From 3ab6510bfd9f0bf28fc19da8a4e33ac8e57c97da Mon Sep 17 00:00:00 2001 From: Pritimay Sarkar Date: Tue, 1 Aug 2023 09:59:08 +0530 Subject: [PATCH] add result ratio plot - add title and info tooltip in location card --- src/components/Locations.css | 43 +++++++++- src/components/Locations.js | 7 +- src/components/ScatterPlot.css | 57 +++++++++++++ src/components/ScatterPlot.js | 138 ++++++++++++++++++++++++++++++++ src/components/TestAnalytics.js | 25 +----- src/components/WorldMap.js | 2 +- 6 files changed, 247 insertions(+), 25 deletions(-) create mode 100644 src/components/ScatterPlot.css create mode 100644 src/components/ScatterPlot.js diff --git a/src/components/Locations.css b/src/components/Locations.css index 0fcf8f4..d696750 100644 --- a/src/components/Locations.css +++ b/src/components/Locations.css @@ -11,4 +11,45 @@ border-color: rgb(219, 219, 219); border-radius: 6px; border-width: max(1px, 0.0625rem); -} \ No newline at end of file +} + +.locations-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); + } + + .locations-card-title { + text-align: center; + font-weight: 600; + padding-top: 10px; + display: flex; + align-items: center; + justify-content: center; + } + + .locations-info-icon { + padding: 0px 0px 0px 10px; + /* margin-top: 5px; */ + } + + .locations-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/Locations.js b/src/components/Locations.js index 0c09582..4f73059 100644 --- a/src/components/Locations.js +++ b/src/components/Locations.js @@ -1,12 +1,17 @@ -import React from 'react'; +import React, { useState } from 'react'; +import { FaInfoCircle } from "react-icons/fa"; import WorldMap from './WorldMap'; import './Locations.css'; function Locations({ show }) { + const [showCardInfo, setShowCardInfo] = useState(false); return (
+
Locations { setShowCardInfo(!showCardInfo) }}> + {showCardInfo &&
Test colcations
} +
); diff --git a/src/components/ScatterPlot.css b/src/components/ScatterPlot.css new file mode 100644 index 0000000..c2f793d --- /dev/null +++ b/src/components/ScatterPlot.css @@ -0,0 +1,57 @@ +.line { + fill: none; + stroke: #009EDC; + stroke-width: 1px; + } + + .resultratio-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); + } + + .resultratio-card-title { + text-align: center; + font-weight: 600; + padding-top: 10px; + display: flex; + align-items: center; + justify-content: center; + } + + .title { + fill: teal; + font-weight: bold; + } + + #resultratio-diagram { + display: flex; + justify-content: center; + align-items: center; + } + + .resultratio-info-icon { + padding: 0px 0px 0px 10px; + /* margin-top: 5px; */ + } + + .resultratio-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; + } diff --git a/src/components/ScatterPlot.js b/src/components/ScatterPlot.js new file mode 100644 index 0000000..6bcf226 --- /dev/null +++ b/src/components/ScatterPlot.js @@ -0,0 +1,138 @@ +import React, { Component } from 'react'; +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 './ScatterPlot.css'; +import constants from '../configs/constants'; + +class ScatterPlot extends Component { + constructor(props) { + super(props); + this.state = { + data: this.props.data, + show: this.props.show, + showCardInfo: false + }; + } + componentDidMount() { + this.drawChart(this.state.data); + } + + drawChart(data) { + console.log(data); + + if (!data) return; + + // set the dimensions and margins of the graph + var margin = { top: 10, right: 30, bottom: 30, left: 60 }, + width = 460 - margin.left - margin.right, + height = 250 - margin.top - margin.bottom; + + // append the svg object to the body of the page + var svg = d3.select("#resultratio-diagram") + .append("svg") + .attr("width", width + margin.left + margin.right) + .attr("height", height + margin.top + margin.bottom) + .append("g") + .attr("transform", + "translate(" + margin.left + "," + margin.top + ")"); + + //Read the data + + // Add X axis + var x = d3.scaleLinear() + .domain([0, 100]) + .range([0, width]); + svg.append("g") + .attr("transform", "translate(0," + height + ")") + .call(d3.axisBottom(x)); + + // Add Y axis + var y = d3.scaleLinear() + .domain([0, 2]) + .range([height, 0]); + svg.append("g") + .call(d3.axisLeft(y)); + + // Add dots + svg.append('g') + .selectAll("dot") + .data(data) + .enter() + .append("circle") + .attr("cx", function (d, i) { return x(2023 - d.birthYear); }) + .attr("cy", function (d) { return y(d.resultRatio); }) + .attr("r", 1.5) + .style("fill", "#69b3a2") + } + + drawChart2(data2) { + // set the dimensions and margins of the graph + var margin = { top: 10, right: 30, bottom: 30, left: 60 }, + width = 460 - margin.left - margin.right, + height = 260 - margin.top - margin.bottom; + + // append the svg object to the body of the page + var svg = d3.select("#resultratio-diagram") + .append("svg") + .attr("width", width + margin.left + margin.right) + .attr("height", height + margin.top + margin.bottom) + .append("g") + .attr("transform", + "translate(" + margin.left + "," + margin.top + ")"); + + //Read the data + // d3.csv("data.csv", function (data) { + fetch('/data.csv') + .then(response => response.text()) + .then((data) => { + // console.log(data); + // var datacsv = require("./data.csv"); + data = d3.csvParse(data); + console.log(data); + // Add X axis + var x = d3.scaleLinear() + .domain([0, 4000]) + .range([0, width]); + svg.append("g") + .attr("transform", "translate(0," + height + ")") + .call(d3.axisBottom(x)); + + // Add Y axis + var y = d3.scaleLinear() + .domain([0, 500000]) + .range([height, 0]); + svg.append("g") + .call(d3.axisLeft(y)); + + // Add dots + svg.append('g') + .selectAll("dot") + .data(data) + .enter() + .append("circle") + .attr("cx", function (d) { return x(d.GrLivArea); }) + .attr("cy", function (d) { return y(d.SalePrice); }) + .attr("r", 1.5) + .style("fill", "#69b3a2") + }); + } + + render() { + return ( +
+
+
Result ratio !this.setState({ showCardInfo: !this.state.showCardInfo })}> + {this.state.showCardInfo &&
Based on all tests
} +
+
+
+
+
+ ) + }; +} +export default ScatterPlot; \ No newline at end of file diff --git a/src/components/TestAnalytics.js b/src/components/TestAnalytics.js index 87b7216..e6bab32 100644 --- a/src/components/TestAnalytics.js +++ b/src/components/TestAnalytics.js @@ -9,26 +9,7 @@ import './TestAnalytics.css'; import TestAnalyticsGraph from './TestAnalyticsGraph'; import TestAnalyticsPie from './TestAnalyticsPie'; import Locations from './Locations'; - -const styles = { - menuList: (base) => ({ - ...base, - - "::-webkit-scrollbar": { - width: "4px", - height: "0px", - }, - "::-webkit-scrollbar-track": { - background: "#f1f1f1" - }, - "::-webkit-scrollbar-thumb": { - background: "#888" - }, - "::-webkit-scrollbar-thumb:hover": { - background: "#555" - } - }) -}; +import ScatterPlot from './ScatterPlot'; const TestAnalytics = () => { const [device, setDevice] = useState("Select a device"); @@ -116,8 +97,8 @@ const TestAnalytics = () => { {dailyResults && }
- - + {allTests && } + {allTests && }
diff --git a/src/components/WorldMap.js b/src/components/WorldMap.js index 12120a2..827739c 100644 --- a/src/components/WorldMap.js +++ b/src/components/WorldMap.js @@ -33,7 +33,7 @@ const cities = [ // { name: "Tianjin", coordinates: [117.3616,39.3434], population: 10920000 }, // { name: "Paris", coordinates: [2.3522,48.8566], population: 10858000 }, // { name: "Lima", coordinates: [-77.0428,-12.0464], population: 10750000 }, - { name: "Nagpur", coordinates: [79.088860, 21.146633], population: 14667000 }, + { name: "Nagpur", coordinates: [79.088860, 21.146633], population: 24667000 }, ] const projection = geoEqualEarth()