remove scroll in analytics page

- add searchable dropdown in analytics page

src/App.css

@@ -50,7 +50,7 @@ body {
   display: inline-flex;
   flex-direction: row;
   font-size: xx-large;
-  background-color: rgb(215, 192, 252);
+  background-color: rgb(207, 235, 250);
 }
 
 .last-update {
@@ -146,7 +146,7 @@ body {
     text-align: center;
     align-self: center;
     font-size: xx-large;
-    background-color: rgb(215, 192, 252);
+    background-color: rgb(207, 235, 250);
   }
 
   .nscm-logo {
@@ -206,7 +206,7 @@ body {
     text-align: center;
     align-self: center;
     font-size: xx-large;
-    background-color: rgb(215, 192, 252);
+    background-color: rgb(207, 235, 250);
   }
 }
 
@@ -253,7 +253,7 @@ body {
     text-align: center;
     align-self: center;
     font-size: xx-large;
-    background-color: rgb(215, 192, 252);
+    background-color: rgb(207, 235, 250);
   }
 
   .title-text {
@@ -307,7 +307,7 @@ body {
     text-align: center;
     align-self: center;
     font-size: xx-large;
-    background-color: rgb(215, 192, 252);
+    background-color: rgb(207, 235, 250);
   }
 
   .title-text {
@@ -372,7 +372,7 @@ body {
   .dashboard-title {
     text-align: center;
     align-self: center;
-    background-color: rgb(215, 192, 252);
+    background-color: rgb(207, 235, 250);
   }
 
   .title-text {

src/components/Calibrations.js

@@ -48,9 +48,6 @@ const Calibrations = () => {
             <div className='title'>Calibrations</div>
             <div className='dropdown-group'>
                 <Dropdown className='device-dropdown' options={devices?.map(x => x.deviceId)} onChange={changeDevice} value={device} placeholder="Select an device" />
-                {/* <Select className='device-dropdown' options={devices.map(x => { return { value: x, label: x }; })} menuPlacement='auto' maxMenuHeight={250} menuShouldScrollIntoView={true} onChange={changeDevice} />
-                <Select className='day-dropdown' options={days.map(x => { return { value: x, label: x }; })} menuPlacement='auto' maxMenuHeight={250} menuShouldScrollIntoView={true} onChange={changeTestDate} />
-                <Select className='test-dropdown' options={tests.map(x => { return { value: x, label: x }; })} menuPlacement='auto' maxMenuHeight={220} menuShouldScrollIntoView={true} onChange={changeTestDate} /> */}
 
                 <button className='clear-button' onClick={toggleShowDevice}><img className="graph-icon" src={require('../assets/graph_icon.png')} alt='icon'></img>{device ? 'Clear' : 'Show'}</button>
             </div>

src/components/Devices.css

@@ -2,12 +2,14 @@
     display: none;
 }
 
-.title {
+.insights-title {
+    /* width: 100vw; */
     padding: 10px;
     text-align: center;
-    background: rgb(215, 192, 252);
+    background: rgb(207, 235, 250);
     color: black;
     font-size: 30px;
+    font-family: sans-serif;
 }
 
 .device-dropdown {
@@ -79,7 +81,7 @@
     background-color: rgb(207, 235, 250);
     width: 10vw;
     height: 5vh;
-    margin: 5px;
+    /* margin: 5px; */
     border-radius: 10px;
     font-size: medium;
     font-weight: 600;

src/components/Devices.js

@@ -1,8 +1,9 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { query, collection, onSnapshot } from 'firebase/firestore';
 import Dropdown from 'react-dropdown';
 import 'react-dropdown/style.css';
 import moment from 'moment';
+import Select from 'react-select';
 
 import DeviceGraph from "./DeviceGraph";
 import db from '../firebase';
@@ -18,11 +19,15 @@ const Devices = () => {
     const [tests, setTests] = useState([]);
     const [allTests, setAllTests] = useState(null);
     const [showGraph, setShowGraph] = useState(false);
+    const selectDateDropdownRef = useRef();
+    const selectTestDropdownRef = useRef();
 
     const changeDevice = ({ value }) => {
         setDevice(value);
         setTestDate(null);
         setCurTest(null);
+        selectDateDropdownRef.current?.setValue("");
+        selectTestDropdownRef.current?.setValue("");
         setDays([...new Set(allTests
             .filter((x) => x.deviceSerialNumber === value)
             .map(x => moment(x.testTime).format("YYYY-MM-DD")))]
@@ -32,6 +37,7 @@ const Devices = () => {
 
     const changeTestDate = ({ value }) => {
         setTestDate(value);
+        selectTestDropdownRef.current?.setValue("");
         setCurTest(null);
         setCurTestData(null);
         setShowGraph(false);
@@ -84,15 +90,38 @@ const Devices = () => {
 
     return (
         <div className="devices-page">
-            <div className='title'>Insights</div>
+            <div className='insights-title'>Insights</div>
             <div className='dropdown-group'>
-                <Dropdown className='device-dropdown' options={devices} onChange={changeDevice} value={device} placeholder="Select an device" />
+                {/* <Dropdown className='device-dropdown' options={devices} onChange={changeDevice} value={device} placeholder="Select an device" />
                 <Dropdown className='day-dropdown' options={days} onChange={changeTestDate} value={testDate} placeholder="Select an test date" />
-                <Dropdown className='test-dropdown' options={tests} onChange={changeTest} value={curTest} placeholder="Select an test" />
+                <Dropdown className='test-dropdown' options={tests} onChange={changeTest} value={curTest} placeholder="Select an test" /> */}
 
-                {/* <Select className='device-dropdown' options={devices.map(x => { return { value: x, label: x }; })} menuPlacement='auto' maxMenuHeight={250} menuShouldScrollIntoView={true} onChange={changeDevice} />
+                <Select
-                <Select className='day-dropdown' options={days.map(x => { return { value: x, label: x }; })} menuPlacement='auto' maxMenuHeight={250} menuShouldScrollIntoView={true} onChange={changeTestDate} />
+                    className='device-dropdown'
-                <Select className='test-dropdown' options={tests.map(x => { return { value: x, label: x }; })} menuPlacement='auto' maxMenuHeight={220} menuShouldScrollIntoView={true} onChange={changeTestDate} /> */}
+                    defaultValue={{ label: "Select a device", value: "Select a device" }}
+                    options={devices.map(x => { return { value: x, label: x }; })}
+                    menuPlacement='auto'
+                    maxMenuHeight={250}
+                    menuShouldScrollIntoView={true}
+                    onChange={changeDevice} />
+                <Select
+                    ref={selectDateDropdownRef}
+                    className='day-dropdown'
+                    defaultValue={{ label: "Select a test date", value: "Select a test date" }}
+                    options={days.map(x => { return { value: x, label: x }; })}
+                    menuPlacement='auto'
+                    maxMenuHeight={250}
+                    menuShouldScrollIntoView={true}
+                    onChange={changeTestDate} />
+                <Select
+                    ref={selectTestDropdownRef}
+                    className='test-dropdown'
+                    defaultValue={{ label: "Select a test", value: "Select a test" }}
+                    options={tests.map(x => { return { value: x, label: x }; })}
+                    menuPlacement='auto'
+                    maxMenuHeight={220}
+                    menuShouldScrollIntoView={true}
+                    onChange={changeTest} />
 
                 <button className='clear-button' onClick={toggleShowGraph}><img className="graph-icon" src={require('../assets/graph_icon.png')} alt='icon'></img>{curTestData ? 'Clear' : 'Show'}</button>
             </div>

src/components/Locations.css

@@ -1,6 +1,6 @@
 .locations-card {
     width: 40vw;
-    height: 45vh;
+    height: 40vh;
     background-color: white;
     margin: 10px;
     display: flex;
@@ -15,7 +15,7 @@
 
 .locations-graph-card {
     width: 40vw;
-    height: 45vh;
+    height: 40vh;
     background-color: white;
     margin: 10px;
     border-style: solid;
@@ -27,7 +27,7 @@
  .locations-card-title {
     text-align: center;
     font-weight: 600;
-    padding-top: 10px;
+    /* padding-top: 10px; */
     display: flex;
     align-items: center;
     justify-content: center;

src/components/ScatterPlot.css

@@ -6,7 +6,7 @@
  
  .resultratio-graph-card {
     width: 40vw;
-    height: 45vh;
+    height: 40vh;
     background-color: white;
     margin: 10px;
     border-style: solid;

src/components/ScatterPlot.js

@@ -24,7 +24,7 @@ class ScatterPlot extends Component {
         if (!data) return;
 
         // set the dimensions and margins of the graph
-        var margin = { top: 10, right: 30, bottom: 30, left: 60 },
+        var margin = { top: 10, right: 30, bottom: 40, left: 60 },
             width = 460 - margin.left - margin.right,
             height = 250 - margin.top - margin.bottom;
 

src/components/TestAnalytics.css

@@ -1,17 +1,38 @@
-.container {
+.analytics-page::-webkit-scrollbar {
+    display: none;
+}
+
+.analytics-title::-webkit-scrollbar {
+    display: none;
+}
+
+.analytics-page {
+    width: 100vw;
+}
+
+.analytics-container {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    height: 50vh;
+    font-family: sans-serif;
+}
+
+.analytics-title {
+    padding: 10px;
+    text-align: center;
+    background: rgb(207, 235, 250);
+    color: black;
+    font-size: 30px;
+    font-family: sans-serif;
 }
 
 @media screen and (min-width: 900px) {
-    .container {
+    .analytics-container {
         display: flex;
         flex-direction: row;
         align-items: center;
         justify-content: center;
-        height: 50vh;
+        height: 45vh;
     }
 }

src/components/TestAnalytics.js

@@ -82,8 +82,8 @@ const TestAnalytics = () => {
     }, [curTestData, curTest, device, testDate]);
 
     return (
-        <div className="devices-page">
+        <div className="analytics-page">
-            <div className='title'>Analytics</div>
+            <div className='analytics-title'>Analytics</div>
             {/* <div className='dropdown-group'>
                 <Dropdown className='device-dropdown' options={devices} onChange={changeDevice} value={device} placeholder="Select an device" />
                 <Dropdown className='day-dropdown' options={days} onChange={changeTestDate} value={testDate} placeholder="Select an test date" />
@@ -92,11 +92,11 @@ const TestAnalytics = () => {
                 <button className='clear-button' onClick={toggleShowGraph}><img className="graph-icon" src={require('./graph_icon.png')}></img>{curTestData ? 'Clear' : 'Show'}</button>
             </div> */}
 
-            <div className='container'>
+            <div className='analytics-container'>
                 {dailyCategoryCounts && <TestAnalyticsPie data={dailyCategoryCounts} />}
                 {dailyResults && <TestAnalyticsGraph data={dailyResults} />}
             </div>
-            <div className='container'>
+            <div className='analytics-container'>
                 {allTests && <ScatterPlot data={allTests} />}
                 {allTests && <Locations />}
             </div>

src/components/TestAnalyticsGraph.css

@@ -6,7 +6,7 @@
 
 .tests-count-card {
    width: 40vw;
-   height: 45vh;
+   height: 40vh;
    background-color: white;
    margin: 10px;
    /* display: flex;

src/components/TestAnalyticsGraph.js

@@ -25,7 +25,7 @@ class TestAnalyticsGraph extends Component {
 
         data.reverse();
 
-        var margin = { top: 60, right: 20, bottom: 30, left: 50 },
+        var margin = { top: 60, right: 20, bottom: 30, left: 10 },
             width = 520 - margin.left - margin.right,
             height = 220 - margin.top - margin.bottom;
 
@@ -40,7 +40,7 @@ class TestAnalyticsGraph extends Component {
             yScale = d3.scaleLinear().range([height, 0]);
 
         var g = svg.append("g")
-            .attr("transform", "translate(" + 10 + "," + 10 + ")");
+            .attr("transform", "translate(" + 5 + "," + 5 + ")");
 
 
         xScale.domain(data.map(function (d) { return moment(d.date).format("MM-DD"); }));

src/components/TestAnalyticsPie.css

@@ -6,7 +6,7 @@
 
 .category-graph-card {
    width: 40vw;
-   height: 45vh;
+   height: 40vh;
    background-color: white;
    margin: 10px;
    border-style: solid;

src/components/TestAnalyticsPie.js

@@ -24,7 +24,7 @@ class TestAnalyticsPie extends Component {
     drawChart(data) {
         if (!data) return;
 
-        var margin = { top: 30, right: 10, bottom: 15, left: 25 },
+        var margin = { top: 15, right: 10, bottom: 25, left: 10 },
             width = 480 - margin.left - margin.right,
             height = 250 - margin.top - margin.bottom,
             radius = Math.min(width, height) / 2;

src/components/WorldMap.js

@@ -44,7 +44,7 @@ const WorldMap = () => {
   }
 
   return (
-    <svg width={ '40vw' } height={ '50vh' } viewBox="0 0 800 450">
+    <svg width={ '40vw' } height={ '35vh' } viewBox="0 0 800 450">
       <g className="countries">
         {
           geographies.map((d,i) => (