remove scroll in analytics page

- add searchable dropdown in analytics page
2023-08-03 11:51:14 +05:30
parent f9c054c62b
commit e34a618198
14 changed files with 87 additions and 38 deletions
--- a/src/App.css
+++ b/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 {
--- a/src/components/Calibrations.js
+++ b/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>
--- a/src/components/Devices.css
+++ b/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;
--- a/src/components/Devices.js
+++ b/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 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} /> */}
+                <Select
+                    className='device-dropdown'
+                    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>
--- a/src/components/Locations.css
+++ b/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;
--- a/src/components/ScatterPlot.css
+++ b/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;
--- a/src/components/ScatterPlot.js
+++ b/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;

--- a/src/components/TestAnalytics.css
+++ b/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;
    }
 }
--- a/src/components/TestAnalytics.js
+++ b/src/components/TestAnalytics.js
@@ -82,8 +82,8 @@ const TestAnalytics = () => {
    }, [curTestData, curTest, device, testDate]);

    return (
-        <div className="devices-page">
-            <div className='title'>Analytics</div>
+        <div className="analytics-page">
+            <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>
--- a/src/components/TestAnalyticsGraph.css
+++ b/src/components/TestAnalyticsGraph.css
@@ -6,7 +6,7 @@

 .tests-count-card {
   width: 40vw;
-   height: 45vh;
+   height: 40vh;
   background-color: white;
   margin: 10px;
   /* display: flex;
--- a/src/components/TestAnalyticsGraph.js
+++ b/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"); }));
--- a/src/components/TestAnalyticsPie.css
+++ b/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;
--- a/src/components/TestAnalyticsPie.js
+++ b/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;
--- a/src/components/WorldMap.js
+++ b/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) => (