From 4396bd2d72043bd058c89632c65121995cc89f20 Mon Sep 17 00:00:00 2001 From: Pritimay Sarkar Date: Tue, 1 Aug 2023 08:44:56 +0530 Subject: [PATCH] add info tooltip on analytics graph card - add assets and config folders - rename conflicting css classess --- src/{components => assets}/graph_icon.png | Bin src/components/AbsorbanceGraph.js | 4 +- src/components/DeviceGraph.css | 32 +++++----- src/components/Devices.js | 2 +- src/components/Locations.css | 6 +- src/components/TestAnalyticsGraph.css | 73 +++++++++++++++------- src/components/TestAnalyticsGraph.js | 10 ++- src/components/TestAnalyticsPie.css | 59 ++++++++++++----- src/components/TestAnalyticsPie.js | 21 +++++-- src/{ => configs}/constants.js | 0 10 files changed, 143 insertions(+), 64 deletions(-) rename src/{components => assets}/graph_icon.png (100%) rename src/{ => configs}/constants.js (100%) diff --git a/src/components/graph_icon.png b/src/assets/graph_icon.png similarity index 100% rename from src/components/graph_icon.png rename to src/assets/graph_icon.png diff --git a/src/components/AbsorbanceGraph.js b/src/components/AbsorbanceGraph.js index 27a3820..983993f 100644 --- a/src/components/AbsorbanceGraph.js +++ b/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 (
-
+
{/* */}
diff --git a/src/components/DeviceGraph.css b/src/components/DeviceGraph.css index f94a641..6970da5 100644 --- a/src/components/DeviceGraph.css +++ b/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; - } \ No newline at end of file +.graph-title { + text-align: center; + font-weight: 600; + padding: 15px; +} \ No newline at end of file diff --git a/src/components/Devices.js b/src/components/Devices.js index 6f095d2..093efec 100644 --- a/src/components/Devices.js +++ b/src/components/Devices.js @@ -94,7 +94,7 @@ const Devices = () => { { return { value: x, label: x }; })} menuPlacement='auto' maxMenuHeight={220} menuShouldScrollIntoView={true} onChange={changeTestDate} /> */} - +
diff --git a/src/components/Locations.css b/src/components/Locations.css index a81c4da..0fcf8f4 100644 --- a/src/components/Locations.css +++ b/src/components/Locations.css @@ -7,4 +7,8 @@ align-items: center; justify-content: center; flex-direction: column; - } \ No newline at end of file + border-style: solid; + border-color: rgb(219, 219, 219); + border-radius: 6px; + border-width: max(1px, 0.0625rem); +} \ No newline at end of file diff --git a/src/components/TestAnalyticsGraph.css b/src/components/TestAnalyticsGraph.css index 27e950d..99c1535 100644 --- a/src/components/TestAnalyticsGraph.css +++ b/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; } \ No newline at end of file diff --git a/src/components/TestAnalyticsGraph.js b/src/components/TestAnalyticsGraph.js index 9321a5c..5a3546c 100644 --- a/src/components/TestAnalyticsGraph.js +++ b/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 (
+
Daily test counts !this.setState({ showCardInfo: !this.state.showCardInfo })}>
+ {this.state.showCardInfo &&
Daily test counts are shown. While off days are not taken into consideration
}
-
test counts per day
) diff --git a/src/components/TestAnalyticsPie.css b/src/components/TestAnalyticsPie.css index 6e12e8d..0796cfb 100644 --- a/src/components/TestAnalyticsPie.css +++ b/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; } \ No newline at end of file diff --git a/src/components/TestAnalyticsPie.js b/src/components/TestAnalyticsPie.js index 0f05e59..3103794 100644 --- a/src/components/TestAnalyticsPie.js +++ b/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 (
-
+
+
Category data on daily basis !this.setState({ showCardInfo: !this.state.showCardInfo })}> + {this.state.showCardInfo &&
Current day test data or the last tested day data is taken into account
} +
-
category data on daily basis
) diff --git a/src/constants.js b/src/configs/constants.js similarity index 100% rename from src/constants.js rename to src/configs/constants.js