add info tooltip on analytics graph card

- add assets and config folders
	- rename conflicting css classess

src/components/AbsorbanceGraph.js

@@ -11,7 +11,7 @@ class AbsorbanceGraph extends Component {
         super(props);
         this.state = { url: this.props.url, show: this.props.show };
     }
-    
+
     componentDidMount() {
         this.drawChart(this.state.url);
     }
@@ -95,7 +95,7 @@ class AbsorbanceGraph extends Component {
     render() {
         return (
             <div>
-                <div className='graph-card'>
+                <div className='wavelength-graph-card'>
                     {/* <FaInfo /> */}
                     <div id="wavelength-graph" style={{ margin: '1em' }}>
                     </div>

src/components/DeviceGraph.css

@@ -1,17 +1,21 @@
 .line {
-    fill: none;
-    stroke: #009EDC;
-    stroke-width: 1px;
- }
+   fill: none;
+   stroke: #009EDC;
+   stroke-width: 1px;
+}
 
- .graph-card {
-    width: 80vw;
-    background-color: white;
-    margin: 10px;
- }
+.wavelength-graph-card {
+   width: 80vw;
+   background-color: white;
+   margin: 10px;
+   /* border-style: solid;
+   border-color: rgb(219, 219, 219);
+   border-radius: 6px;
+   border-width: max(1px, 0.0625rem); */
+}
 
- .graph-title {
-    text-align: center;
-    font-weight: 600;
-    padding: 15px;
- }
+.graph-title {
+   text-align: center;
+   font-weight: 600;
+   padding: 15px;
+}

src/components/Devices.js

@@ -94,7 +94,7 @@ const Devices = () => {
                 <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={toggleShowGraph}><img className="graph-icon" src={require('./graph_icon.png')} alt='icon'></img>{curTestData ? 'Clear' : 'Show'}</button>
+                <button className='clear-button' onClick={toggleShowGraph}><img className="graph-icon" src={require('../assets/graph_icon.png')} alt='icon'></img>{curTestData ? 'Clear' : 'Show'}</button>
             </div>
 
             <div className='graph-person-conatiner'>

src/components/Locations.css

@@ -7,4 +7,8 @@
     align-items: center;
     justify-content: center;
     flex-direction: column;
- }
+    border-style: solid;
+    border-color: rgb(219, 219, 219);
+    border-radius: 6px;
+    border-width: max(1px, 0.0625rem);
+}

src/components/TestAnalyticsGraph.css

@@ -1,34 +1,61 @@
 .line {
-    fill: none;
-    stroke: #009EDC;
-    stroke-width: 1px;
- }
+   fill: none;
+   stroke: #009EDC;
+   stroke-width: 1px;
+}
 
- .tests-count-card {
-    width: 40vw;
-    height: 45vh;
-    background-color: white;
-    margin: 10px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
- }
+.tests-count-card {
+   width: 40vw;
+   height: 45vh;
+   background-color: white;
+   margin: 10px;
+   /* display: flex;
+   align-items: center;
+   justify-content: center;
+   flex-direction: column; */
+   border-style: solid;
+   border-color: rgb(219, 219, 219);
+   border-radius: 6px;
+   border-width: max(1px, 0.0625rem);
+}
 
- .graph-title {
-    text-align: center;
-    font-weight: 600;
-    padding: 5px;
-    bottom: -10;
- }
+.testcount-graph-title {
+   text-align: center;
+   font-weight: 600;
+   padding-top: 10px;
+   display: flex;
+   align-items: center;
+   justify-content: center;
+}
 
- .axis-grid line {
-  /* stroke: #def; */
-  stroke: lightgrey;
+.axis-grid line {
+   /* stroke: #def; */
+   stroke: lightgrey;
    /* stroke-opacity: 0.7; */
    shape-rendering: crispEdges;
 }
 
 .bar {
    fill: steelblue;
+}
+
+.testcount-info-icon {
+   padding: 0px 0px 0px 10px;
+   /* margin-top: 5px; */
+}
+
+.testcount-info-card {
+   position: absolute;
+   visibility: visible;
+   background-color: rgb(236, 247, 253);
+   height: 7vh;
+   width: 10vw;
+   border-style: solid;
+   border-color: rgb(219, 219, 219);
+   border-radius: 6px;
+   border-width: max(1px, 0.0625rem);
+   margin-left: 26vw;
+   font-size: x-small;
+   font-weight: 400;
+   padding: 0.5em;
 }

src/components/TestAnalyticsGraph.js

@@ -2,13 +2,18 @@ import React, { Component } from 'react';
 import * as d3 from 'd3';
 import moment from 'moment';
 import { sgg } from 'ml-savitzky-golay-generalized';
+import { FaBeer, FaInfoCircle } from "react-icons/fa";
 
 import './TestAnalyticsGraph.css';
 
 class TestAnalyticsGraph extends Component {
     constructor(props) {
         super(props);
-        this.state = { data: this.props.data, show: this.props.show };
+        this.state = {
+            data: this.props.data,
+            show: this.props.show,
+            showCardInfo: false
+        };
     }
     componentDidMount() {
         // this.drawChart(this.state.data);
@@ -194,9 +199,10 @@ class TestAnalyticsGraph extends Component {
         return (
             <div>
                 <div className='tests-count-card'>
+                    <div className='testcount-graph-title'>Daily test counts<span className='testcount-info-icon' onClick={() => !this.setState({ showCardInfo: !this.state.showCardInfo })}><FaInfoCircle /></span></div>
+                    {this.state.showCardInfo && <div className='testcount-info-card'>Daily test counts are shown. While off days are not taken into consideration</div>}
                     <div id="tests-count-graph" style={{ margin: '1em' }}>
                     </div>
-                    <div className='graph-title'>test counts per day</div>
                 </div>
             </div>
         )

src/components/TestAnalyticsPie.css

@@ -1,22 +1,30 @@
 .line {
-    fill: none;
-    stroke: #009EDC;
-    stroke-width: 1px;
- }
+   fill: none;
+   stroke: #009EDC;
+   stroke-width: 1px;
+}
 
- .graph-card {
-    width: 40vw;
-    height: 45vh;
-    background-color: white;
- }
+.category-graph-card {
+   width: 40vw;
+   height: 45vh;
+   background-color: white;
+   margin: 10px;
+   border-style: solid;
+   border-color: rgb(219, 219, 219);
+   border-radius: 6px;
+   border-width: max(1px, 0.0625rem);
+}
 
- .graph-title {
-    text-align: center;
-    font-weight: 600;
-    padding: 15px;
- }
+.category-card-title {
+   text-align: center;
+   font-weight: 600;
+   padding-top: 10px;
+   display: flex;
+   align-items: center;
+   justify-content: center;
+}
 
- .title {
+.title {
    fill: teal;
    font-weight: bold;
 }
@@ -25,4 +33,25 @@
    display: flex;
    justify-content: center;
    align-items: center;
+}
+
+.category-info-icon {
+   padding: 0px 0px 0px 10px;
+   /* margin-top: 5px; */
+}
+
+.category-info-card {
+   position: absolute;
+   visibility: visible;
+   background-color: rgb(236, 247, 253);
+   height: 7vh;
+   width: 10vw;
+   border-style: solid;
+   border-color: rgb(219, 219, 219);
+   border-radius: 6px;
+   border-width: max(1px, 0.0625rem);
+   margin-left: 31vw;
+   font-size: x-small;
+   font-weight: 400;
+   padding: 0.5em;
 }

src/components/TestAnalyticsPie.js

@@ -3,14 +3,19 @@ import * as d3 from 'd3';
 import { sgg } from 'ml-savitzky-golay-generalized';
 import axios from 'axios';
 import moment from 'moment';
+import { FaBeer, FaInfoCircle } from "react-icons/fa";
 
 import './TestAnalyticsPie.css';
-import constants from '../constants';
+import constants from '../configs/constants';
 
 class TestAnalyticsPie extends Component {
     constructor(props) {
         super(props);
-        this.state = { data: this.props.data, show: this.props.show };
+        this.state = {
+            data: this.props.data,
+            show: this.props.show,
+            showCardInfo: false
+        };
     }
     componentDidMount() {
         this.drawChart(this.state.data);
@@ -55,6 +60,7 @@ class TestAnalyticsPie extends Component {
 
         var tooltip = d3.select("#category-diagram")
             .append("div")
+            .attr("class", "category-tooltip")
             .style("position", "absolute")
             .style("z-index", "10")
             .style("visibility", "hidden")
@@ -65,10 +71,11 @@ class TestAnalyticsPie extends Component {
             .attr("d", path)
             .attr("fill", function (d) { return color(d.data.category); })
             .on('mouseover', (event, d) => {
-                tooltip.text(`${d.data.category}: ${d.data.count}, ${100 * d.data.count/data.reduce((a, c) => a + c.count, 0)}%`);
+                tooltip.text(`${d.data.category}: ${d.data.count}, ${100 * d.data.count / data.reduce((a, c) => a + c.count, 0)}%`);
                 return tooltip
                     .style("visibility", "visible")
-                    .style("font-size", "0.75em")
+                    .style("font-size", "0.65em")
+                    .style("font-weight", "600")
                     .style("z-index", "9999")
                     .style("width", "200px")
                     .style("height", "50px")
@@ -100,10 +107,12 @@ class TestAnalyticsPie extends Component {
     render() {
         return (
             <div>
-                <div className='graph-card'>
+                <div className='category-graph-card'>
+                    <div className='category-card-title'>Category data on daily basis<span className='category-info-icon' onClick={() => !this.setState({ showCardInfo: !this.state.showCardInfo })}><FaInfoCircle /></span>
+                        {this.state.showCardInfo && <div className='category-info-card'>Current day test data or the last tested day data is taken into account</div>}
+                    </div>
                     <div id="category-diagram" style={{ margin: '1em' }}>
                     </div>
-                    <div className='graph-title'>category data on daily basis</div>
                 </div>
             </div>
         )