From dc6e4a53949fa5e452877048087211bc2dbfade0 Mon Sep 17 00:00:00 2001 From: "Wendy(Pengyin) Shan" Date: Mon, 18 Dec 2023 11:43:01 -0600 Subject: [PATCH 01/14] move reactga to useEffect part to debug --- src/app.config.js | 3 +++ src/main.tsx | 5 ++--- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/app.config.js b/src/app.config.js index f115a76d..e6452746 100644 --- a/src/app.config.js +++ b/src/app.config.js @@ -4,16 +4,19 @@ const baseConfig = { const deployConfig = { apiUrl: "/pdl", + ga_tracking_id: "G-GFR8PTXMDM", ...baseConfig }; const developConfig = { apiUrl: "https://policydesignlab-dev.ncsa.illinois.edu/pdl", + ga_tracking_id: "G-GFR8PTXMDM", ...baseConfig }; const localConfig = { apiUrl: "http://localhost:5000/pdl", + ga_tracking_id: "G-K4MLHWSVVT", ...baseConfig }; diff --git a/src/main.tsx b/src/main.tsx index 44c29388..d8f009bd 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -11,9 +11,7 @@ import TitleIPage from "./pages/TitleIPage"; import CropInsurancePage from "./pages/CropInsurancePage"; import ACEPPage from "./pages/ACEPPage"; import IssueWhitePaperPage from "./pages/IssueWhitePaperPage"; - -const TRACKING_ID = "G-GFR8PTXMDM"; -ReactGA.initialize(TRACKING_ID); +import { config } from "./app.config"; const ScrollToTop = (props: any) => { const location = useLocation(); @@ -26,6 +24,7 @@ const ScrollToTop = (props: any) => { export default function Main(): JSX.Element { useEffect(() => { + ReactGA.initialize(config.ga_tracking_id); ReactGA.pageview(window.location.pathname + window.location.search); }, []); From 7d9b4037cb143fae1e42d23511a88441a9e4972b Mon Sep 17 00:00:00 2001 From: "Wendy(Pengyin) Shan" Date: Mon, 18 Dec 2023 15:44:58 -0600 Subject: [PATCH 02/14] 225: fix crop insurance loss ratio table number --- CHANGELOG.md | 24 +++++-------------- .../cropinsurance/CropInsuranceTable.tsx | 3 ++- 2 files changed, 8 insertions(+), 19 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 729dde75..929b5530 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,57 +4,53 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html). +## [unreleased] + +### Fixed +- Fixed the loss ratio representation at crop insurance page [#225](https://github.com/policy-design-lab/pdl-frontend/issues/225) + ## [0.13.0] - 2023-12-14 ### Added - - Added Google Analytics using `react-ga` module to page router [#217](https://github.com/policy-design-lab/pdl-frontend/issues/217) ### Changed - - Updated all maps to show exact number of dollars instead of rounding units to the nearest million [#137](https://github.com/policy-design-lab/pdl-frontend/issues/137) - Replaced the arrow of table to Material UI icons to show in Linux browser[#151](https://github.com/policy-design-lab/pdl-frontend/issues/151) ## [0.12.0] - 2023-11-17 ### Added - - Add the issue release/white paper page [#210](https://github.com/policy-design-lab/pdl-frontend/issues/210) - Add iFrame component to the release/white paper page [#214](https://github.com/policy-design-lab/pdl-frontend/issues/214) ## [0.11.0] - 2023-11-08 ### Added - - Dairy Margin Coverage page and Supplemental Agricultural Disaster Assistance page with corresponding components for their attributes [#206](https://github.com/policy-design-lab/pdl-frontend/issues/206) ### Changed - - Optimize webpack config to save docker building time [#203](https://github.com/policy-design-lab/pdl-frontend/issues/203) - Change PDL logo to use the new design [#209](https://github.com/policy-design-lab/pdl-frontend/issues/209) ## [0.10.0] - 2023-10-17 ### Added - - ACEP page and corresponding components for its attributes [#200](https://github.com/policy-design-lab/pdl-frontend/issues/200) - RCPP page and corresponding components for its attributes [#196](https://github.com/policy-design-lab/pdl-frontend/issues/196) ### Changed - Reverse some unnecessary changes in EQIP, CSP and CRP table [#199](https://github.com/policy-design-lab/pdl-frontend/issues/199) - -## Fixed +### Fixed - Adjust program drawer to remove over-length scroll bar in Chrome/Firefox [#198](https://github.com/policy-design-lab/pdl-frontend/issues/198) - ## [0.9.0] - 2023-09-18 ### Added - CRP page and corresponding components for its attributes [#170](https://github.com/policy-design-lab/pdl-frontend/issues/170) ### Changed - - Replace the color legends on the EQIP, CSP, and CRP pages with the customized scheme [189](https://github.com/policy-design-lab/pdl-frontend/issues/189) - Adjusted the menu height of CRP page on small screen [#190](https://github.com/policy-design-lab/pdl-frontend/issues/190) @@ -64,12 +60,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. ## [0.8.0] - 2023-09-06 ### Added - - Add Crop Insurance page and corresponding components for its attributes [#125](https://github.com/policy-design-lab/pdl-frontend/issues/125) - Added Average Insured Area In Acres sub-page to Crop Insurance pages [#183](https://github.com/policy-design-lab/pdl-frontend/issues/183) ### Changed - - Use different title equations for the bar charts in pages under the Net Farmer Benefit section [#179](https://github.com/policy-design-lab/pdl-frontend/issues/179) - Adjusted font size of chart headers on Crop Insurance page [#182](https://github.com/policy-design-lab/pdl-frontend/issues/182) - Adjusted '$' sign for some sub-pages of Crop Insurance page [#184](https://github.com/policy-design-lab/pdl-frontend/issues/184) @@ -80,7 +74,6 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. ## [0.7.0] - 2023-08-22 ### Changed - - Landing page clean up for use API endpoint by removing redundant calls [#148](https://github.com/policy-design-lab/pdl-frontend/issues/148) - CSP page uses API endpoint instead of local json file [#149](https://github.com/policy-design-lab/pdl-frontend/issues/149) - SNAP page landing page uses API endpoint following the pattern in Landing Page [#166](https://github.com/policy-design-lab/pdl-frontend/issues/166) @@ -92,11 +85,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. ## [0.6.0] - 2023-07-18 ### Added - - Add Title 1 page and corresponding components for the Conservation Programs [#126](https://github.com/policy-design-lab/pdl-frontend/issues/126) ### Changed - - EQIP page updated to use the data from API endpoint [#132](https://github.com/policy-design-lab/pdl-frontend/issues/132) - Reverse the 'm' back to 'k' in the data formatting function for thousands [#145](https://github.com/policy-design-lab/pdl-frontend/issues/145) - Add `$` sign to the beginning of legend bar on landing page [#141](https://github.com/policy-design-lab/pdl-frontend/issues/141) @@ -108,19 +99,16 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. ## [0.5.1] - 2023-05-30 ### Changed - - Change the format of negative values in landing page maps' tips and legend bar to fit client's request - Modify the title of each map's tip to match each program ## [0.5.0] - 2023-05-26 ### Added - - Add dynamic color bar for landing page and SNAP page [#121](https://github.com/policy-design-lab/pdl-frontend/issues/121) - New GitHub issue templates. [#127](https://github.com/policy-design-lab/pdl-frontend/issues/127) ### Changed - - Landing page maps & tabs use api endpoints instead of local json files [#110](https://github.com/policy-design-lab/pdl-frontend/issues/110) - Add crop insurance tab back to landing page [#130](https://github.com/policy-design-lab/pdl-frontend/issues/130) - Removed the duplicate 'AllProgramMap' component on the landing page. Instead, modified the 'LandingPageMap' component to include the all-program map diff --git a/src/components/cropinsurance/CropInsuranceTable.tsx b/src/components/cropinsurance/CropInsuranceTable.tsx index 383a834c..5fbb2631 100644 --- a/src/components/cropinsurance/CropInsuranceTable.tsx +++ b/src/components/cropinsurance/CropInsuranceTable.tsx @@ -11,6 +11,7 @@ import { sortByDollars } from "../shared/TableCompareFunctions"; import "../../styles/table.css"; +import { ShortFormat } from "../shared/ConvertionFormats"; function CropInsuranceProgramTable({ tableTitle, @@ -41,7 +42,7 @@ function CropInsuranceProgramTable({ const newRecord = { state: stateCodes[Object.keys(stateCodes).filter((stateCode) => stateCode === s)[0]] }; Object.entries(hashmap[s]).forEach(([attr, value]) => { if (attr === "lossRatio") { - newRecord[attr] = `${value.toString()}%`; + newRecord[attr] = `${ShortFormat((Number(value) * 100).toString(), undefined, 2)}%`; } else if (attr === "averageInsuredAreaInAcres") { newRecord[attr] = `${ value.toLocaleString(undefined, { minimumFractionDigits: 2 }).toString().split(".")[0] From 9e9636b8c53bf896d23a2843b77b2320a049c572 Mon Sep 17 00:00:00 2001 From: "Wendy(Pengyin) Shan" Date: Tue, 19 Dec 2023 10:21:07 -0600 Subject: [PATCH 03/14] change loss ratio in table to rounding to one digits --- src/components/cropinsurance/CropInsuranceTable.tsx | 2 +- src/pages/SNAPPage.tsx | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/cropinsurance/CropInsuranceTable.tsx b/src/components/cropinsurance/CropInsuranceTable.tsx index 5fbb2631..bebc8e50 100644 --- a/src/components/cropinsurance/CropInsuranceTable.tsx +++ b/src/components/cropinsurance/CropInsuranceTable.tsx @@ -42,7 +42,7 @@ function CropInsuranceProgramTable({ const newRecord = { state: stateCodes[Object.keys(stateCodes).filter((stateCode) => stateCode === s)[0]] }; Object.entries(hashmap[s]).forEach(([attr, value]) => { if (attr === "lossRatio") { - newRecord[attr] = `${ShortFormat((Number(value) * 100).toString(), undefined, 2)}%`; + newRecord[attr] = `${ShortFormat((Number(value) * 100).toString(), undefined, 1)}%`; } else if (attr === "averageInsuredAreaInAcres") { newRecord[attr] = `${ value.toLocaleString(undefined, { minimumFractionDigits: 2 }).toString().split(".")[0] diff --git a/src/pages/SNAPPage.tsx b/src/pages/SNAPPage.tsx index 85f0c668..754eae1c 100644 --- a/src/pages/SNAPPage.tsx +++ b/src/pages/SNAPPage.tsx @@ -13,6 +13,7 @@ import { Radio, SvgIcon } from "@mui/material"; +import ReactGA from "react-ga"; import TableChartIcon from "@mui/icons-material/TableChart"; import InsertChartIcon from "@mui/icons-material/InsertChart"; import LandingPageMap from "../components/LandingPageMap"; @@ -69,6 +70,9 @@ export default function SNAPPage(): JSX.Element { getJsonDataFromUrl(`${config.apiUrl}/programs/snap/state-distribution`).then((response) => { setData(response); }); + + // test ReactGA + ReactGA.pageview(window.location.pathname + window.location.search); }, []); const defaultTheme = createTheme({ spacing: 8 From 0bbde86c15c77afa3aeb88890ac543aec1b188bc Mon Sep 17 00:00:00 2001 From: "Wendy(Pengyin) Shan" Date: Tue, 19 Dec 2023 11:09:52 -0600 Subject: [PATCH 04/14] squash all ga commits --- src/app.config.js | 2 -- src/index.html | 10 ++++++++++ src/main.tsx | 8 +------- src/pages/SNAPPage.tsx | 3 --- webpack.common.js | 5 +---- webpack.dev.js | 7 ++++++- webpack.prod.js | 9 +++++++-- 7 files changed, 25 insertions(+), 19 deletions(-) diff --git a/src/app.config.js b/src/app.config.js index e6452746..3e5de6db 100644 --- a/src/app.config.js +++ b/src/app.config.js @@ -10,13 +10,11 @@ const deployConfig = { const developConfig = { apiUrl: "https://policydesignlab-dev.ncsa.illinois.edu/pdl", - ga_tracking_id: "G-GFR8PTXMDM", ...baseConfig }; const localConfig = { apiUrl: "http://localhost:5000/pdl", - ga_tracking_id: "G-K4MLHWSVVT", ...baseConfig }; diff --git a/src/index.html b/src/index.html index dcef04dd..993b5d2f 100644 --- a/src/index.html +++ b/src/index.html @@ -4,6 +4,16 @@ + + Policy Design Lab diff --git a/src/main.tsx b/src/main.tsx index d8f009bd..6fea0a70 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,6 +1,5 @@ import React, { useEffect } from "react"; import { Routes, Route, useLocation } from "react-router-dom"; -import ReactGA from "react-ga"; import LandingPage from "./pages/LandingPage"; import EQIPPage from "./pages/EQIPPage"; import CSPPage from "./pages/CSPPage"; @@ -11,7 +10,6 @@ import TitleIPage from "./pages/TitleIPage"; import CropInsurancePage from "./pages/CropInsurancePage"; import ACEPPage from "./pages/ACEPPage"; import IssueWhitePaperPage from "./pages/IssueWhitePaperPage"; -import { config } from "./app.config"; const ScrollToTop = (props: any) => { const location = useLocation(); @@ -23,11 +21,7 @@ const ScrollToTop = (props: any) => { }; export default function Main(): JSX.Element { - useEffect(() => { - ReactGA.initialize(config.ga_tracking_id); - ReactGA.pageview(window.location.pathname + window.location.search); - }, []); - + // useGaTracker(); return ( diff --git a/src/pages/SNAPPage.tsx b/src/pages/SNAPPage.tsx index 754eae1c..b444611a 100644 --- a/src/pages/SNAPPage.tsx +++ b/src/pages/SNAPPage.tsx @@ -70,9 +70,6 @@ export default function SNAPPage(): JSX.Element { getJsonDataFromUrl(`${config.apiUrl}/programs/snap/state-distribution`).then((response) => { setData(response); }); - - // test ReactGA - ReactGA.pageview(window.location.pathname + window.location.search); }, []); const defaultTheme = createTheme({ spacing: 8 diff --git a/webpack.common.js b/webpack.common.js index d59bfa5a..1b2722c0 100644 --- a/webpack.common.js +++ b/webpack.common.js @@ -2,7 +2,6 @@ const path = require('path'); const Webpack = require('webpack'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const FaviconsWebpackPlugin = require('favicons-webpack-plugin'); -const HtmlWebpackPlugin = require('html-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { @@ -79,9 +78,7 @@ module.exports = { }, plugins: [ - new HtmlWebpackPlugin({ - template: 'src/index.html' - }), + new Webpack.DefinePlugin({ "process.env": { "APP_ENV": JSON.stringify(process.env.APP_ENV) diff --git a/webpack.dev.js b/webpack.dev.js index 865c4608..0be6e5ff 100644 --- a/webpack.dev.js +++ b/webpack.dev.js @@ -1,6 +1,7 @@ const Webpack = require('webpack'); const { merge } = require('webpack-merge'); const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer'); +const HtmlWebpackPlugin = require('html-webpack-plugin'); const commonConfig = require('./webpack.common'); @@ -42,7 +43,11 @@ module.exports = merge(commonConfig, { plugins: [ new Webpack.DefinePlugin({ - ENV: JSON.stringify('development') + ENV: JSON.stringify('development'), + }), + new HtmlWebpackPlugin({ + template: './src/index.html', + GA_URL: 'https://www.googletagmanager.com/gtag/js?id=G-K4MLHWSVVT', }), new BundleAnalyzerPlugin({ openAnalyzer: false, analyzerPort: 8081 }) ], diff --git a/webpack.prod.js b/webpack.prod.js index ccb33d3a..6f6aea41 100644 --- a/webpack.prod.js +++ b/webpack.prod.js @@ -1,6 +1,6 @@ const Webpack = require('webpack'); const { merge } = require('webpack-merge'); - +const HtmlWebpackPlugin = require('html-webpack-plugin'); const commonConfig = require('./webpack.common'); module.exports = merge(commonConfig, { @@ -33,8 +33,13 @@ module.exports = merge(commonConfig, { }, plugins: [ + new HtmlWebpackPlugin({ + template: 'src/index.html', + GA_URL: 'https://www.googletagmanager.com/gtag/js?id=G-GFR8PTXMDM', + }), new Webpack.DefinePlugin({ - ENV: JSON.stringify('production') + ENV: JSON.stringify('production'), + }) ] }); From ce8d34784db9fa6959938f460ab59891a2106d26 Mon Sep 17 00:00:00 2001 From: "Wendy(Pengyin) Shan" Date: Wed, 20 Dec 2023 12:19:24 -0600 Subject: [PATCH 05/14] update Changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 929b5530..eb1ebee3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. ### Fixed - Fixed the loss ratio representation at crop insurance page [#225](https://github.com/policy-design-lab/pdl-frontend/issues/225) +- Changed Google Analytics plugin from `react-ga` module to script and use webpack environmental variable to config [#226](https://github.com/policy-design-lab/pdl-frontend/issues/226) ## [0.13.0] - 2023-12-14 From 3d12f3119c151fd149d7cd85c7e8b95dca711ced Mon Sep 17 00:00:00 2001 From: "Wendy(Pengyin) Shan" Date: Wed, 20 Dec 2023 14:51:53 -0600 Subject: [PATCH 06/14] squash all ga tests parent ce8d34784db9fa6959938f460ab59891a2106d26 author Wendy(Pengyin) Shan 1703105513 -0600 committer Wendy(Pengyin) Shan 1703190129 -0600 --- package-lock.json | 58 ++++++++++++++++++++++++++++++++++++++++++ package.json | 1 + src/app.config.js | 2 ++ src/app.tsx | 18 +++++++++++++ src/index.html | 10 -------- src/pages/SNAPPage.tsx | 1 - webpack.common.js | 5 +++- webpack.dev.js | 7 +---- webpack.prod.js | 9 ++----- 9 files changed, 86 insertions(+), 25 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2762147a..22c8d80b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -51,6 +51,7 @@ "clean-webpack-plugin": "^3.0.0", "css-loader": "^5.2.4", "css-minimizer-webpack-plugin": "^2.0.0", + "dotenv-webpack": "^8.0.1", "eslint": "^7.26.0", "eslint-config-airbnb": "^18.2.1", "eslint-config-prettier": "^8.3.0", @@ -9865,6 +9866,39 @@ "node": ">=8" } }, + "node_modules/dotenv": { + "version": "8.6.0", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.6.0.tgz", + "integrity": "sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==", + "dev": true, + "engines": { + "node": ">=10" + } + }, + "node_modules/dotenv-defaults": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/dotenv-defaults/-/dotenv-defaults-2.0.2.tgz", + "integrity": "sha512-iOIzovWfsUHU91L5i8bJce3NYK5JXeAwH50Jh6+ARUdLiiGlYWfGw6UkzsYqaXZH/hjE/eCd/PlfM/qqyK0AMg==", + "dev": true, + "dependencies": { + "dotenv": "^8.2.0" + } + }, + "node_modules/dotenv-webpack": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/dotenv-webpack/-/dotenv-webpack-8.0.1.tgz", + "integrity": "sha512-CdrgfhZOnx4uB18SgaoP9XHRN2v48BbjuXQsZY5ixs5A8579NxQkmMxRtI7aTwSiSQcM2ao12Fdu+L3ZS3bG4w==", + "dev": true, + "dependencies": { + "dotenv-defaults": "^2.0.2" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "webpack": "^4 || ^5" + } + }, "node_modules/duplexer": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz", @@ -30976,6 +31010,30 @@ "is-obj": "^2.0.0" } }, + "dotenv": { + "version": "8.6.0", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.6.0.tgz", + "integrity": "sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==", + "dev": true + }, + "dotenv-defaults": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/dotenv-defaults/-/dotenv-defaults-2.0.2.tgz", + "integrity": "sha512-iOIzovWfsUHU91L5i8bJce3NYK5JXeAwH50Jh6+ARUdLiiGlYWfGw6UkzsYqaXZH/hjE/eCd/PlfM/qqyK0AMg==", + "dev": true, + "requires": { + "dotenv": "^8.2.0" + } + }, + "dotenv-webpack": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/dotenv-webpack/-/dotenv-webpack-8.0.1.tgz", + "integrity": "sha512-CdrgfhZOnx4uB18SgaoP9XHRN2v48BbjuXQsZY5ixs5A8579NxQkmMxRtI7aTwSiSQcM2ao12Fdu+L3ZS3bG4w==", + "dev": true, + "requires": { + "dotenv-defaults": "^2.0.2" + } + }, "duplexer": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz", diff --git a/package.json b/package.json index aa757a0f..0cbca8ce 100644 --- a/package.json +++ b/package.json @@ -58,6 +58,7 @@ "clean-webpack-plugin": "^3.0.0", "css-loader": "^5.2.4", "css-minimizer-webpack-plugin": "^2.0.0", + "dotenv-webpack": "^8.0.1", "eslint": "^7.26.0", "eslint-config-airbnb": "^18.2.1", "eslint-config-prettier": "^8.3.0", diff --git a/src/app.config.js b/src/app.config.js index 3e5de6db..a490f825 100644 --- a/src/app.config.js +++ b/src/app.config.js @@ -10,11 +10,13 @@ const deployConfig = { const developConfig = { apiUrl: "https://policydesignlab-dev.ncsa.illinois.edu/pdl", + ga_tracking_id: "G-K4MLHWSVVT", ...baseConfig }; const localConfig = { apiUrl: "http://localhost:5000/pdl", + ga_tracking_id: "none", ...baseConfig }; diff --git a/src/app.tsx b/src/app.tsx index 359ce94a..3c8313cb 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -1,7 +1,25 @@ import React from "react"; import Main from "./main"; +import { config } from "./app.config"; export default function App(): JSX.Element { + React.useEffect(() => { + const src = `https://www.googletagmanager.com/gtag/js?id=G-${config.ga_tracking_id}`; + const content = `window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', '${config.ga_tracking_id}');`; + + // Dynamically insert script into the head + const script1 = document.createElement("script"); + script1.src = src; + document.head.appendChild(script1); + + const script2 = document.createElement("script"); + script2.innerHTML = content; + document.head.appendChild(script2); + + return () => { + document.head.removeChild(script1); + }; + }, []); return (
diff --git a/src/index.html b/src/index.html index 993b5d2f..dcef04dd 100644 --- a/src/index.html +++ b/src/index.html @@ -4,16 +4,6 @@ - - Policy Design Lab diff --git a/src/pages/SNAPPage.tsx b/src/pages/SNAPPage.tsx index b444611a..85f0c668 100644 --- a/src/pages/SNAPPage.tsx +++ b/src/pages/SNAPPage.tsx @@ -13,7 +13,6 @@ import { Radio, SvgIcon } from "@mui/material"; -import ReactGA from "react-ga"; import TableChartIcon from "@mui/icons-material/TableChart"; import InsertChartIcon from "@mui/icons-material/InsertChart"; import LandingPageMap from "../components/LandingPageMap"; diff --git a/webpack.common.js b/webpack.common.js index 1b2722c0..d59bfa5a 100644 --- a/webpack.common.js +++ b/webpack.common.js @@ -2,6 +2,7 @@ const path = require('path'); const Webpack = require('webpack'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const FaviconsWebpackPlugin = require('favicons-webpack-plugin'); +const HtmlWebpackPlugin = require('html-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { @@ -78,7 +79,9 @@ module.exports = { }, plugins: [ - + new HtmlWebpackPlugin({ + template: 'src/index.html' + }), new Webpack.DefinePlugin({ "process.env": { "APP_ENV": JSON.stringify(process.env.APP_ENV) diff --git a/webpack.dev.js b/webpack.dev.js index 0be6e5ff..865c4608 100644 --- a/webpack.dev.js +++ b/webpack.dev.js @@ -1,7 +1,6 @@ const Webpack = require('webpack'); const { merge } = require('webpack-merge'); const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer'); -const HtmlWebpackPlugin = require('html-webpack-plugin'); const commonConfig = require('./webpack.common'); @@ -43,11 +42,7 @@ module.exports = merge(commonConfig, { plugins: [ new Webpack.DefinePlugin({ - ENV: JSON.stringify('development'), - }), - new HtmlWebpackPlugin({ - template: './src/index.html', - GA_URL: 'https://www.googletagmanager.com/gtag/js?id=G-K4MLHWSVVT', + ENV: JSON.stringify('development') }), new BundleAnalyzerPlugin({ openAnalyzer: false, analyzerPort: 8081 }) ], diff --git a/webpack.prod.js b/webpack.prod.js index 6f6aea41..ccb33d3a 100644 --- a/webpack.prod.js +++ b/webpack.prod.js @@ -1,6 +1,6 @@ const Webpack = require('webpack'); const { merge } = require('webpack-merge'); -const HtmlWebpackPlugin = require('html-webpack-plugin'); + const commonConfig = require('./webpack.common'); module.exports = merge(commonConfig, { @@ -33,13 +33,8 @@ module.exports = merge(commonConfig, { }, plugins: [ - new HtmlWebpackPlugin({ - template: 'src/index.html', - GA_URL: 'https://www.googletagmanager.com/gtag/js?id=G-GFR8PTXMDM', - }), new Webpack.DefinePlugin({ - ENV: JSON.stringify('production'), - + ENV: JSON.stringify('production') }) ] }); From 218ce83c684db30bf647a7ba3d298eb1ec9a28d3 Mon Sep 17 00:00:00 2001 From: "Wendy(Pengyin) Shan" Date: Wed, 3 Jan 2024 17:08:03 -0600 Subject: [PATCH 07/14] fix issue1 in uat test --- src/components/ProgramDrawer.tsx | 422 +++++++++++++++++-------------- src/pages/CRPPage.tsx | 6 +- src/pages/CSPPage.tsx | 6 +- src/pages/EQIPPage.tsx | 5 +- 4 files changed, 244 insertions(+), 195 deletions(-) diff --git a/src/components/ProgramDrawer.tsx b/src/components/ProgramDrawer.tsx index a30e1e82..f439034b 100644 --- a/src/components/ProgramDrawer.tsx +++ b/src/components/ProgramDrawer.tsx @@ -10,9 +10,95 @@ import ListItemText from "@mui/material/ListItemText"; import PropTypes from "prop-types"; import { useLocation, useNavigate } from "react-router-dom"; import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown"; +import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp"; +import { makeStyles } from "@mui/styles"; +/** ALL MENUs */ const drawerWidth = 240; +const commonMenuStyles = { + topMenu: { + marginRight: 8 + }, + topMenuItem: { + paddingLeft: "1.5em", + paddingTop: 0, + paddingBottom: 0, + paddingRight: 0 + }, + statue_common: { + maxWidth: 40, + paddingTop: "1.5em", + paddingBottom: "1.5em", + display: "flex", + alignItems: "center", + justifyContent: "flex-end", + maxHeight: 48 + } +}; +// xxx_top are styles that should be added to top level menu items only +const useStyles = makeStyles(() => ({ + // background classes for menuItem + bk_on: { + ...commonMenuStyles.topMenuItem, + backgroundColor: "#ECF0EE" + }, + bk_off: { + ...commonMenuStyles.topMenuItem, + backgroundColor: "transparent" + }, + // text classes for the top box inside the menuItem and listIemText(submenu) + regular: { + "& .MuiTypography-root": { + ...commonMenuStyles.topMenu, + color: "#3F3F3F" + } + }, + regular_top: { + paddingTop: 24, + paddingBottom: 24 + }, + selected: { + "& .MuiTypography-root": { + ...commonMenuStyles.topMenu, + color: "#2f7164", + fontWeight: 700 + } + }, + disabled: { + "& .MuiTypography-root": { + ...commonMenuStyles.topMenu, + color: "#00000061", + cursor: "not-allowed" + } + }, + disabled_top: { + paddingTop: 24, + paddingBottom: 24 + }, + // statue classes for box wrapping the text and icon + no_statue: { + paddingTop: "1.5em", + paddingBottom: "1.5em" + }, + statue_on: { + ...commonMenuStyles.statue_common, + color: "#ffffff", + backgroundColor: "#2f7164" + }, + statue_off: { + ...commonMenuStyles.statue_common, + color: "transparent", + backgroundColor: "transparent" + }, + // statue class for text inside the box + statue_text: { + color: "white", + fontSize: "0.875em" + } +})); + +/** EQIP */ EQIPCheckboxList.propTypes = { setEQIPChecked: PropTypes.func, setShowPopUp: PropTypes.func @@ -51,6 +137,7 @@ function EQIPCheckboxList({ setEQIPChecked, setShowPopUp, zeroCategory }) { "Comprehensive Nutrient Mgt." ]; + const classes = useStyles(); return ( {EQIPList.map((category, value) => { @@ -74,7 +161,7 @@ function EQIPCheckboxList({ setEQIPChecked, setShowPopUp, zeroCategory }) { @@ -100,7 +187,11 @@ function EQIPCheckboxList({ setEQIPChecked, setShowPopUp, zeroCategory }) { } }} /> - + ); @@ -121,7 +212,11 @@ function EQIPCheckboxList({ setEQIPChecked, setShowPopUp, zeroCategory }) { } }} /> - + ); @@ -146,7 +241,11 @@ function EQIPCheckboxList({ setEQIPChecked, setShowPopUp, zeroCategory }) { } }} /> - + @@ -171,7 +270,11 @@ function EQIPCheckboxList({ setEQIPChecked, setShowPopUp, zeroCategory }) { } }} /> - + @@ -213,7 +316,7 @@ function CSPCheckboxList({ setCSPChecked, setShowPopUp, zeroCategory }) { "Non-industrial private forestland", "Other: supplemental, adjustment & other" ]; - + const classes = useStyles(); return ( {CSPList.map((category, value) => { @@ -237,7 +340,7 @@ function CSPCheckboxList({ setCSPChecked, setShowPopUp, zeroCategory }) { @@ -263,7 +366,11 @@ function CSPCheckboxList({ setCSPChecked, setShowPopUp, zeroCategory }) { } }} /> - + ); @@ -284,7 +391,11 @@ function CSPCheckboxList({ setCSPChecked, setShowPopUp, zeroCategory }) { } }} /> - + ); @@ -310,6 +421,7 @@ function CSPCheckboxList({ setCSPChecked, setShowPopUp, zeroCategory }) { id={labelId} primary={category} primaryTypographyProps={{ fontWeight: 700 }} + className={checked === value ? classes.selected : classes.regular} /> @@ -332,7 +444,11 @@ function CSPCheckboxList({ setCSPChecked, setShowPopUp, zeroCategory }) { } }} /> - + @@ -361,7 +477,7 @@ function CRPCheckboxList({ setCRPChecked, setShowPopUp, zeroCategory }) { "Farmable Wetland", "Grassland" ]; - + const classes = useStyles(); return ( {CRPList.map((category, value) => { @@ -385,7 +501,7 @@ function CRPCheckboxList({ setCRPChecked, setShowPopUp, zeroCategory }) { @@ -407,73 +523,10 @@ function CRPCheckboxList({ setCRPChecked, setShowPopUp, zeroCategory }) { } }} /> - - - - ); - } - return ( - - - - - - - - - ); - })} - - ); -} - -function RCPPCheckboxList({ setRCPPChecked, setShowPopUp, zeroCategory }) { - const [checked, setChecked] = React.useState(currentChecked); - - const handleToggle = (value: number) => () => { - setChecked(value); - setRCPPChecked(value); - currentChecked = value; - setShowPopUp(false); - }; - - const RCPPList = ["Total RCPP"]; - - return ( - - {RCPPList.map((category, value) => { - const labelId = `checkbox-list-label-${value}`; - if (zeroCategory && zeroCategory.includes(category)) { - return ( - - - @@ -495,7 +548,11 @@ function RCPPCheckboxList({ setRCPPChecked, setShowPopUp, zeroCategory }) { } }} /> - + @@ -518,13 +575,15 @@ export default function ProgramDrawer({ setCSPChecked, setCRPChecked, setRCPPChecked, - zeroCategories + zeroCategories // different page will pass different zeroCategories }: ProgramDrawerProps): JSX.Element { const location = useLocation(); const navigate = useNavigate(); const [zeroCategory, setZeroCategory] = React.useState(zeroCategories); const [eqipOpen, setEqipOpen] = React.useState(false); const eqipRef = React.useRef(null); + + const classes = useStyles(); const handleEqipClick = () => { if (location.pathname !== "/eqip") { navigate("/eqip"); @@ -624,50 +683,49 @@ export default function ProgramDrawer({ }} PaperProps={{ sx: { - backgroundColor: "#ffffff", - color: "gray" + backgroundColor: "#ffffff" } }} open > - + Total Conservation Programs Benefits - + + EQIP: Environmental Quality Incentives Program {location.pathname === "/eqip" ? ( - - EQIP: Environmental Quality Incentives Program - + + + + STATUTE + {eqipOpen ? : } + + + ) : ( - EQIP: Environmental Quality Incentives Program + )} - - - - STATUTE - - - - - + + CSP: Conservation Stewardship Program {location.pathname === "/csp" ? ( - - CSP: Conservation Stewardship Program - + + + + STATUTE + {cspOpen ? : } + + + ) : ( - CSP: Conservation Stewardship Program + )} - - - - STATUTE - - - - - + + CRP: Conservation Reserve Program {location.pathname === "/crp" ? ( - - CRP: Conservation Reserve Program - + + + + STATUTE + {crpOpen ? : } + + + ) : ( - CRP: Conservation Reserve Program + )} - - - - STATUTE - - - - - - {location.pathname === "/acep" ? ( - - ACEP: Agriculture Conservation Easement Program - - ) : ( - ACEP: Agriculture Conservation Easement Program - )} + + ACEP: Agriculture Conservation Easement Program @@ -812,34 +865,25 @@ export default function ProgramDrawer({ - - {location.pathname === "/rcpp" ? ( - - RCPP: Regional Conservation Partnership Program - - ) : ( - RCPP: Regional Conservation Partnership Program - )} - {/* - */} + + RCPP: Regional Conservation Partnership Program - + Other Conservation diff --git a/src/pages/CRPPage.tsx b/src/pages/CRPPage.tsx index 57d1085c..2b2e1d48 100644 --- a/src/pages/CRPPage.tsx +++ b/src/pages/CRPPage.tsx @@ -101,7 +101,8 @@ export default function CRPPage(): JSX.Element { grasslandPyamentInDollars = cur7.paymentInDollars; if (grasslandPyamentInDollars === 0) zeroCategory.push("Grassland"); - setZeroCategories(zeroCategory); + if (zeroCategory.length > 0) setZeroCategories(zeroCategory); + else setZeroCategories(["None"]); setTotalChartData([ { name: "Total General Sign-Up", value: generalSignUpPaymentInDollars, color: "#2F7164" }, @@ -121,7 +122,8 @@ export default function CRPPage(): JSX.Element { {Object.keys(stateCodesData).length > 0 && Object.keys(allStatesData).length > 0 && - Object.keys(stateDistributionData).length > 0 ? ( + Object.keys(stateDistributionData).length > 0 && + zeroCategories.length > 0 ? ( diff --git a/src/pages/CSPPage.tsx b/src/pages/CSPPage.tsx index 0740d712..bed66c1a 100644 --- a/src/pages/CSPPage.tsx +++ b/src/pages/CSPPage.tsx @@ -1,6 +1,7 @@ import Box from "@mui/material/Box"; import * as React from "react"; import { createTheme, ThemeProvider, Typography } from "@mui/material"; +import { set } from "react-ga"; import NavBar from "../components/NavBar"; import Drawer from "../components/ProgramDrawer"; import SemiDonutChart from "../components/SemiDonutChart"; @@ -172,11 +173,12 @@ export default function CSPPage(): JSX.Element { { name: "2014 Eligible Land", value: old2014Total, color: "#9CBAB4" } ]); - setZeroCategories(zeroCategory); + if (zeroCategory.length > 0) setZeroCategories(zeroCategory); + else setZeroCategories(["None"]); }; return ( - {allStates.length > 0 && statePerformance.Wisconsin !== undefined ? ( + {allStates.length > 0 && statePerformance.Wisconsin !== undefined && zeroCategories.length > 0 ? ( diff --git a/src/pages/EQIPPage.tsx b/src/pages/EQIPPage.tsx index dc35e581..ea23cd64 100644 --- a/src/pages/EQIPPage.tsx +++ b/src/pages/EQIPPage.tsx @@ -142,12 +142,13 @@ export default function EQIPPage(): JSX.Element { { name: "6 (B)", value: sixBTotal, color: "#9CBAB4" } ]); - setZeroCategories(zeroCategory); + if (zeroCategory.length > 0) setZeroCategories(zeroCategory); + else setZeroCategories(["None"]); }; return ( - {allStates.length > 0 && statePerformance.Wisconsin !== undefined ? ( + {allStates.length > 0 && statePerformance.Wisconsin !== undefined && zeroCategories.length > 0 ? ( From 29b9894f2faf30e02368e9db2e2b21cf77c886f0 Mon Sep 17 00:00:00 2001 From: "Wendy(Pengyin) Shan" Date: Thu, 4 Jan 2024 16:52:35 -0600 Subject: [PATCH 08/14] issue2 and issue5 --- src/components/LandingPageMap.tsx | 369 +++++++++++------- src/components/SemiDonutChart.tsx | 8 +- src/components/acep/ACEPCategoryMap.tsx | 11 +- src/components/acep/ACEPTotalMap.tsx | 10 +- .../cropinsurance/CropInsuranceMap.tsx | 10 +- src/components/crp/CRPTotalMap.tsx | 10 +- src/components/crp/CategoryMap.tsx | 10 +- src/components/csp/CSPTotalMap.tsx | 10 +- src/components/csp/CategoryMap.tsx | 10 +- src/components/eqip/CategoryMap.tsx | 10 +- src/components/eqip/EQIPTotalMap.tsx | 10 +- src/components/rcpp/RCPPTotalMap.tsx | 10 +- src/components/title1/Title1Map.tsx | 14 +- src/pages/ACEPPage.tsx | 1 + src/pages/CRPPage.tsx | 8 +- src/pages/CSPPage.tsx | 17 +- src/pages/CropInsurancePage.tsx | 1 + src/pages/RCPPPage.tsx | 6 +- src/pages/SNAPPage.tsx | 1 + src/pages/TitleIPage.tsx | 4 - src/styles/map.css | 4 - src/styles/table.css | 7 +- 22 files changed, 317 insertions(+), 224 deletions(-) diff --git a/src/components/LandingPageMap.tsx b/src/components/LandingPageMap.tsx index 55651b05..d5f86cd8 100644 --- a/src/components/LandingPageMap.tsx +++ b/src/components/LandingPageMap.tsx @@ -1,9 +1,10 @@ +/* eslint-disable no-nested-ternary */ import React, { useState } from "react"; import { geoCentroid } from "d3-geo"; import { ComposableMap, Geographies, Geography, Marker, Annotation } from "react-simple-maps"; import ReactTooltip from "react-tooltip"; import * as d3 from "d3"; -import Divider from "@mui/material/Divider"; +import { makeStyles } from "@mui/styles"; import PropTypes from "prop-types"; import Box from "@mui/material/Box"; import Typography from "@mui/material/Typography"; @@ -26,8 +27,93 @@ const offsets = { DC: [49, 21] }; +// Shared Styles +const commonMenuStyles = { + tooltip_cell: { + margin: 0 + } +}; +const useStyles = makeStyles(() => ({ + customized_tooltip: { + "backgroundColor": "#D9D9D9 !important", + "padding": "0 !important", + "margin": "0 !important", + "opacity": "1 !important", + "& .arrow": { + backgroundColor: "#D9D9D9 !important" + } + }, + tooltip_overall: { + backgroundColor: "white", + width: "100%", + height: "100%" + }, + tooltip_header: { + padding: "0.5em 0 0.5em 1em", + textAlign: "left", + fontSize: "1.5em", + color: "#00000099", + margin: 0 + }, + tooltip_table: { + backgroundColor: "#D9D9D9", + width: "100%", + fontSize: "1.25em", + color: "#00000099", + padding: 0, + margin: 0, + borderCollapse: "collapse" + }, + tooltip_topcell_left: { + ...commonMenuStyles.tooltip_cell, + padding: "1em 0.5em 1em 1em" + }, + tooltip_topcell_right: { + ...commonMenuStyles.tooltip_cell, + textAlign: "right", + padding: "0.5em 1em 1em 0", + borderRight: "none" + }, + tooltip_bottomcell_left: { + ...commonMenuStyles.tooltip_cell, + padding: "0 0 1em 1em" + }, + tooltip_bottomcell_right: { + ...commonMenuStyles.tooltip_cell, + textAlign: "right", + padding: "0 1em 1em 0", + borderLeft: "none" + }, + tooltip_regularcell_left: { + ...commonMenuStyles.tooltip_cell, + padding: "0 0 1em 1em" + }, + tooltip_regularcell_right: { + ...commonMenuStyles.tooltip_cell, + textAlign: "right", + padding: "0 1em 1em 0", + borderLeft: "none" + }, + tooltip_footer_left: { + ...commonMenuStyles.tooltip_cell, + textAlign: "left", + padding: "1em 0 1em 1em", + borderTop: "0.1em solid #00000099", + color: "black", + borderRight: "none" + }, + tooltip_footer_right: { + ...commonMenuStyles.tooltip_cell, + textAlign: "right", + padding: "1em 1em 1em 0", + borderTop: "0.1em solid #00000099", + color: "black", + borderLeft: "none" + } +})); + const MapChart = (props) => { - const { setTooltipContent, title, stateCodes, allPrograms, allStates, summary, screenWidth } = props; + const { setReactTooltipContent, title, stateCodes, allPrograms, allStates, summary, screenWidth } = props; let searchKey = ""; let color1 = ""; let color2 = ""; @@ -141,6 +227,7 @@ const MapChart = (props) => { allPrograms.forEach((d) => { if (d[searchKey] === 0) zeroPoints.push(d.State); }); + const classes = useStyles(); return (
@@ -183,156 +270,162 @@ const MapChart = (props) => { const hoverContent = title !== "All Programs" ? ( - - - - {stateCodes[cur.id]} - - {title === "Supplemental Nutrition Assistance Program (SNAP)" ? ( - Total Cost - ) : ( - Total Benefit - )} - - ${ShortFormat(total, undefined, 2)} - -
- {/* Show additional data on hover for SNAP */} - {title === "Supplemental Nutrition Assistance Program (SNAP)" && ( - - Avg. Monthly Participation - - )} - {/* Average SNAP monthly participation for the current years */} - {title === "Supplemental Nutrition Assistance Program (SNAP)" && ( - - {ShortFormat( - totalAverageMonthlyParticipation / yearList.length, - undefined, - 2 - )} - - )} - - - - {title === "Supplemental Nutrition Assistance Program (SNAP)" ? ( - - Costs: -
- {records.map((record) => ( -
+
+ {stateCodes[cur.id]} +
+ + + {records.map((record) => ( + + + + ))} + {title === + "Supplemental Nutrition Assistance Program (SNAP)" ? ( + + + + + ) : ( + + + + + )} + {title === + "Supplemental Nutrition Assistance Program (SNAP)" ? ( + + + + + ) : null} + +
- {record["Fiscal Year"]}:{" "} - {ShortFormat(record.Amount, undefined, 2)} - - ))} - - ) : ( - - {title === "Crop Insurance" ? "Benefits:" : "Payments:"} -
- {records.map((record) => ( -
+
{String(record["Fiscal Year"]) === "2022" && - title.includes("Title I") ? ( -
2022: Not Available
- ) : ( -
- {record["Fiscal Year"]}: $ - {ShortFormat(record.Amount, undefined, 2)} -
+ title.includes("Title I") + ? "Not Available" + : `${ShortFormat(record.Amount, undefined, 2)}`} +
+ Total Cost: + + ${ShortFormat(total, undefined, 2)} +
+ {title === "Crop Insurance" + ? "Total Payments: " + : "Total Benefit: "} + + ${ShortFormat(total, undefined, 2)} +
+ Avg. Monthly Participation: + + {ShortFormat( + totalAverageMonthlyParticipation / + yearList.length, + undefined, + 2 )} - - ))} - - )} - - +
+
) : ( - - - - {cur ? stateCodes[cur.id] : ""} - - Total Benefit - - ${ShortFormat(total, undefined, 2)} - - - - - - Payments: -
- {records.map((record) => ( -
- 2018: $ - {ShortFormat( - record["2018 All Programs Total"], - undefined, - 2 - )} -
- 2019: $ - {ShortFormat( +
+
+ {cur ? stateCodes[cur.id] : ""} +
+ + {records.map((record) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + ))} +
2018: + {`${ShortFormat( + record["2018 All Programs Total"], + undefined, + 2 + )}`} +
+ 2019:{" "} + {`${ShortFormat( record["2019 All Programs Total"], undefined, 2 - )} -
- 2020: $ - {ShortFormat( + )}`}
+ 2020:{" "} + {`${ShortFormat( record["2020 All Programs Total"], undefined, 2 - )} -
- 2021: $ - {ShortFormat( + )}`}
+ 2021:{" "} + {`${ShortFormat( record["2021 All Programs Total"], undefined, 2 - )} -
- 2022: $ - {ShortFormat( + )}`}
+ 2022:{" "} + {`${ShortFormat( record["2022 All Programs Total"], undefined, 2 - )} -
- - ))} - - - + )}`}
+ Total Benefit:{" "} + + ${ShortFormat(total, undefined, 2)} +
+
); + const fillColour = () => { if (total) { if (total !== 0) return colorScale(total); @@ -340,15 +433,16 @@ const MapChart = (props) => { } return "#D2D2D2"; }; + return ( { - setTooltipContent(hoverContent); + setReactTooltipContent(hoverContent); }} onMouseLeave={() => { - setTooltipContent(""); + setReactTooltipContent(""); }} fill={fillColour()} stroke="#FFF" @@ -406,7 +500,7 @@ const MapChart = (props) => { }; MapChart.propTypes = { - setTooltipContent: PropTypes.func, + setReactTooltipContent: PropTypes.func, title: PropTypes.string }; @@ -423,13 +517,14 @@ const LandingPageMap = ({ allPrograms: any; summary: any; }): JSX.Element => { + const classes = useStyles(); const [content, setContent] = useState(""); const [screenWidth, setScreenWidth] = useState(window.innerWidth); return (
- + {content}
diff --git a/src/components/SemiDonutChart.tsx b/src/components/SemiDonutChart.tsx index 1462e9c0..9b1e09df 100644 --- a/src/components/SemiDonutChart.tsx +++ b/src/components/SemiDonutChart.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { PieChart, Pie, Tooltip, Label, Cell } from "recharts"; +import { PieChart, Pie, ReactTooltip, Label, Cell } from "recharts"; import { Box } from "@mui/material"; import { ShortFormat } from "./shared/ConvertionFormats"; @@ -28,7 +28,7 @@ export default function SemiDonutChart({ data, label1, label2 }: any): JSX.Eleme ); }; - const CustomTooltip = ({ active, payload, label }: any) => { + const CustomReactTooltip = ({ active, payload, label }: any) => { if (active && payload && payload.length) { return (
))} - } + } wrapperStyle={{ backgroundColor: "white", borderStyle: "ridge", diff --git a/src/components/acep/ACEPCategoryMap.tsx b/src/components/acep/ACEPCategoryMap.tsx index bdd548fa..50490d22 100644 --- a/src/components/acep/ACEPCategoryMap.tsx +++ b/src/components/acep/ACEPCategoryMap.tsx @@ -27,7 +27,8 @@ const offsets = { }; const MapChart = (props) => { - const { year, setTooltipContent, category, allStates, stateCodes, statePerformance, colorScale, attribute } = props; + const { year, setReactTooltipContent, category, allStates, stateCodes, statePerformance, colorScale, attribute } = + props; return (
@@ -94,10 +95,10 @@ const MapChart = (props) => { key={geo.rsmKey} geography={geo} onMouseEnter={() => { - setTooltipContent(hoverContent); + setReactTooltipContent(hoverContent); }} onMouseLeave={() => { - setTooltipContent(""); + setReactTooltipContent(""); }} fill={fillColour()} stroke="#FFFFFF" @@ -154,7 +155,7 @@ const MapChart = (props) => { MapChart.propTypes = { year: PropTypes.string, - setTooltipContent: PropTypes.func, + setReactTooltipContent: PropTypes.func, category: PropTypes.string }; @@ -247,7 +248,7 @@ const CategoryMap = ({ )} { - const { setTooltipContent, allStates, statePerformance, year, stateCodes, colorScale } = props; + const { setReactTooltipContent, allStates, statePerformance, year, stateCodes, colorScale } = props; return (
@@ -88,10 +88,10 @@ const MapChart = (props) => { key={geo.rsmKey} geography={geo} onMouseEnter={() => { - setTooltipContent(hoverContent); + setReactTooltipContent(hoverContent); }} onMouseLeave={() => { - setTooltipContent(""); + setReactTooltipContent(""); }} fill={fillColour()} stroke="#FFF" @@ -152,7 +152,7 @@ const MapChart = (props) => { }; MapChart.propTypes = { - setTooltipContent: PropTypes.func + setReactTooltipContent: PropTypes.func }; const ACEPTotalMap = ({ @@ -216,7 +216,7 @@ const ACEPTotalMap = ({ { - setTooltipContent(hoverContent); + setReactTooltipContent(hoverContent); }} onMouseLeave={() => { - setTooltipContent(""); + setReactTooltipContent(""); }} fill={programPayment === 0 ? "#CCC" : colorScale(programPayment)} stroke="#FFF" @@ -167,7 +167,7 @@ const MapChart = ({ }; MapChart.propTypes = { - setTooltipContent: PropTypes.func, + setReactTooltipContent: PropTypes.func, attribute: PropTypes.string, program: PropTypes.string, maxValue: PropTypes.number @@ -251,7 +251,7 @@ const CropInsuranceMap = ({ )} { - const { setTooltipContent, allStates, statePerformance, year, stateCodes, colorScale } = props; + const { setReactTooltipContent, allStates, statePerformance, year, stateCodes, colorScale } = props; return (
@@ -89,10 +89,10 @@ const MapChart = (props) => { key={geo.rsmKey} geography={geo} onMouseEnter={() => { - setTooltipContent(hoverContent); + setReactTooltipContent(hoverContent); }} onMouseLeave={() => { - setTooltipContent(""); + setReactTooltipContent(""); }} fill={fillColour()} stroke="#FFF" @@ -153,7 +153,7 @@ const MapChart = (props) => { }; MapChart.propTypes = { - setTooltipContent: PropTypes.func + setReactTooltipContent: PropTypes.func }; const CRPTotalMap = ({ @@ -218,7 +218,7 @@ const CRPTotalMap = ({ { - const { year, setTooltipContent, category, allStates, stateCodes, statePerformance, colorScale } = props; + const { year, setReactTooltipContent, category, allStates, stateCodes, statePerformance, colorScale } = props; let categoryRecord; return (
@@ -123,10 +123,10 @@ const MapChart = (props) => { key={geo.rsmKey} geography={geo} onMouseEnter={() => { - setTooltipContent(hoverContent); + setReactTooltipContent(hoverContent); }} onMouseLeave={() => { - setTooltipContent(""); + setReactTooltipContent(""); }} fill={fillColour()} stroke="#FFFFFF" @@ -183,7 +183,7 @@ const MapChart = (props) => { MapChart.propTypes = { year: PropTypes.string, - setTooltipContent: PropTypes.func, + setReactTooltipContent: PropTypes.func, category: PropTypes.string }; @@ -287,7 +287,7 @@ const CategoryMap = ({ )} { - const { setTooltipContent, allStates, statePerformance, colorScale } = props; + const { setReactTooltipContent, allStates, statePerformance, colorScale } = props; return (
@@ -86,10 +86,10 @@ const MapChart = (props) => { key={geo.rsmKey} geography={geo} onMouseEnter={() => { - setTooltipContent(hoverContent); + setReactTooltipContent(hoverContent); }} onMouseLeave={() => { - setTooltipContent(""); + setReactTooltipContent(""); }} fill={fillColour()} stroke="#FFF" @@ -150,7 +150,7 @@ const MapChart = (props) => { }; MapChart.propTypes = { - setTooltipContent: PropTypes.func + setReactTooltipContent: PropTypes.func }; const CSPTotalMap = ({ statePerformance, allStates }: { statePerformance: any; allStates: any }): JSX.Element => { @@ -204,7 +204,7 @@ const CSPTotalMap = ({ statePerformance, allStates }: { statePerformance: any; a { - const { setTooltipContent, category, allStates, statePerformance, colorScale } = props; + const { setReactTooltipContent, category, allStates, statePerformance, colorScale } = props; let categoryRecord; return (
@@ -105,10 +105,10 @@ const MapChart = (props) => { key={geo.rsmKey} geography={geo} onMouseEnter={() => { - setTooltipContent(hoverContent); + setReactTooltipContent(hoverContent); }} onMouseLeave={() => { - setTooltipContent(""); + setReactTooltipContent(""); }} fill={fillColour()} stroke="#FFFFFF" @@ -164,7 +164,7 @@ const MapChart = (props) => { }; MapChart.propTypes = { - setTooltipContent: PropTypes.func, + setReactTooltipContent: PropTypes.func, category: PropTypes.string }; @@ -272,7 +272,7 @@ const CategoryMap = ({ )} { - const { setTooltipContent, category, statePerformance, allStates, colorScale } = props; + const { setReactTooltipContent, category, statePerformance, allStates, colorScale } = props; return (
@@ -90,10 +90,10 @@ const MapChart = (props) => { key={geo.rsmKey} geography={geo} onMouseEnter={() => { - setTooltipContent(hoverContent); + setReactTooltipContent(hoverContent); }} onMouseLeave={() => { - setTooltipContent(""); + setReactTooltipContent(""); }} fill={fillColour()} stroke="#FFF" @@ -151,7 +151,7 @@ const MapChart = (props) => { }; MapChart.propTypes = { - setTooltipContent: PropTypes.func, + setReactTooltipContent: PropTypes.func, category: PropTypes.string }; @@ -216,7 +216,7 @@ const CategoryMap = ({ )} { +const MapChart = ({ setReactTooltipContent, maxValue, allStates, statePerformance, colorScale }) => { return (
@@ -76,10 +76,10 @@ const MapChart = ({ setTooltipContent, maxValue, allStates, statePerformance, co key={geo.rsmKey} geography={geo} onMouseEnter={() => { - setTooltipContent(hoverContent); + setReactTooltipContent(hoverContent); }} onMouseLeave={() => { - setTooltipContent(""); + setReactTooltipContent(""); }} fill={colorScale(totalPaymentInDollars || { value: 0 }) || "#D2D2D2"} stroke="#FFF" @@ -135,7 +135,7 @@ const MapChart = ({ setTooltipContent, maxValue, allStates, statePerformance, co }; MapChart.propTypes = { - setTooltipContent: PropTypes.func, + setReactTooltipContent: PropTypes.func, maxValue: PropTypes.number }; @@ -183,7 +183,7 @@ const EQIPTotalMap = ({ statePerformance, allStates }: { statePerformance: any; )} { - const { setTooltipContent, allStates, statePerformance, year, stateCodes, colorScale } = props; + const { setReactTooltipContent, allStates, statePerformance, year, stateCodes, colorScale } = props; return (
{allStates.length > 0 && statePerformance[year] !== undefined ? ( @@ -90,10 +90,10 @@ const MapChart = (props) => { key={geo.rsmKey} geography={geo} onMouseEnter={() => { - setTooltipContent(hoverContent); + setReactTooltipContent(hoverContent); }} onMouseLeave={() => { - setTooltipContent(""); + setReactTooltipContent(""); }} fill={fillColour()} stroke="#FFF" @@ -154,7 +154,7 @@ const MapChart = (props) => { }; MapChart.propTypes = { - setTooltipContent: PropTypes.func + setReactTooltipContent: PropTypes.func }; const RCPPTotalMap = ({ @@ -219,7 +219,7 @@ const RCPPTotalMap = ({ { - setTooltipContent(hoverContent); + setReactTooltipContent(hoverContent); }} onMouseLeave={() => { - setTooltipContent(""); + setReactTooltipContent(""); }} fill={programPayment === 0 ? "#CCC" : colorScale(programPayment)} stroke="#FFF" @@ -224,10 +224,10 @@ const MapChart = ({ key={geo.rsmKey} geography={geo} onMouseEnter={() => { - setTooltipContent(hoverContent); + setReactTooltipContent(hoverContent); }} onMouseLeave={() => { - setTooltipContent(""); + setReactTooltipContent(""); }} fill={programPayment === 0 ? "#CCC" : colorScale(programPayment)} stroke="#FFF" @@ -288,7 +288,7 @@ const MapChart = ({ }; MapChart.propTypes = { - setTooltipContent: PropTypes.func, + setReactTooltipContent: PropTypes.func, subprogram: PropTypes.string, program: PropTypes.string, maxValue: PropTypes.number @@ -366,7 +366,7 @@ const Title1Map = ({ /> Date: Fri, 5 Jan 2024 16:39:21 -0600 Subject: [PATCH 09/14] issue 4 of uat testing --- src/components/LandingPageMap.tsx | 121 ++------ src/components/acep/ACEPCategoryMap.tsx | 279 ------------------ src/components/acep/ACEPTotalMap.tsx | 136 +++++---- .../cropinsurance/CropInsuranceMap.tsx | 79 ++--- .../chart/CropInsuranceBubble.tsx | 6 +- src/components/crp/CRPTotalMap.tsx | 60 ++-- src/components/crp/CategoryMap.tsx | 56 ++-- src/components/csp/CSPTotalMap.tsx | 60 ++-- src/components/csp/CategoryMap.tsx | 56 ++-- src/components/eqip/CategoryMap.tsx | 55 ++-- src/components/eqip/EQIPTotalMap.tsx | 60 ++-- src/components/rcpp/RCPPTotalMap.tsx | 62 ++-- src/components/shared/MapTooltip.tsx | 91 ++++++ src/components/title1/Title1Map.tsx | 143 ++++----- src/pages/CRPPage.tsx | 2 +- src/pages/CSPPage.tsx | 2 +- src/pages/CropInsurancePage.tsx | 12 +- src/pages/EQIPPage.tsx | 2 +- src/pages/RCPPPage.tsx | 2 +- src/pages/SNAPPage.tsx | 4 +- 20 files changed, 516 insertions(+), 772 deletions(-) delete mode 100644 src/components/acep/ACEPCategoryMap.tsx create mode 100644 src/components/shared/MapTooltip.tsx diff --git a/src/components/LandingPageMap.tsx b/src/components/LandingPageMap.tsx index d5f86cd8..ecec453e 100644 --- a/src/components/LandingPageMap.tsx +++ b/src/components/LandingPageMap.tsx @@ -4,7 +4,6 @@ import { geoCentroid } from "d3-geo"; import { ComposableMap, Geographies, Geography, Marker, Annotation } from "react-simple-maps"; import ReactTooltip from "react-tooltip"; import * as d3 from "d3"; -import { makeStyles } from "@mui/styles"; import PropTypes from "prop-types"; import Box from "@mui/material/Box"; import Typography from "@mui/material/Typography"; @@ -12,6 +11,7 @@ import "../styles/map.css"; import DrawLegend from "./shared/DrawLegend"; import legendConfig from "../utils/legendConfig.json"; import { ShortFormat } from "./shared/ConvertionFormats"; +import { useStyles, tooltipBkgColor } from "./shared/MapTooltip"; const geoUrl = "https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json"; @@ -27,91 +27,6 @@ const offsets = { DC: [49, 21] }; -// Shared Styles -const commonMenuStyles = { - tooltip_cell: { - margin: 0 - } -}; -const useStyles = makeStyles(() => ({ - customized_tooltip: { - "backgroundColor": "#D9D9D9 !important", - "padding": "0 !important", - "margin": "0 !important", - "opacity": "1 !important", - "& .arrow": { - backgroundColor: "#D9D9D9 !important" - } - }, - tooltip_overall: { - backgroundColor: "white", - width: "100%", - height: "100%" - }, - tooltip_header: { - padding: "0.5em 0 0.5em 1em", - textAlign: "left", - fontSize: "1.5em", - color: "#00000099", - margin: 0 - }, - tooltip_table: { - backgroundColor: "#D9D9D9", - width: "100%", - fontSize: "1.25em", - color: "#00000099", - padding: 0, - margin: 0, - borderCollapse: "collapse" - }, - tooltip_topcell_left: { - ...commonMenuStyles.tooltip_cell, - padding: "1em 0.5em 1em 1em" - }, - tooltip_topcell_right: { - ...commonMenuStyles.tooltip_cell, - textAlign: "right", - padding: "0.5em 1em 1em 0", - borderRight: "none" - }, - tooltip_bottomcell_left: { - ...commonMenuStyles.tooltip_cell, - padding: "0 0 1em 1em" - }, - tooltip_bottomcell_right: { - ...commonMenuStyles.tooltip_cell, - textAlign: "right", - padding: "0 1em 1em 0", - borderLeft: "none" - }, - tooltip_regularcell_left: { - ...commonMenuStyles.tooltip_cell, - padding: "0 0 1em 1em" - }, - tooltip_regularcell_right: { - ...commonMenuStyles.tooltip_cell, - textAlign: "right", - padding: "0 1em 1em 0", - borderLeft: "none" - }, - tooltip_footer_left: { - ...commonMenuStyles.tooltip_cell, - textAlign: "left", - padding: "1em 0 1em 1em", - borderTop: "0.1em solid #00000099", - color: "black", - borderRight: "none" - }, - tooltip_footer_right: { - ...commonMenuStyles.tooltip_cell, - textAlign: "right", - padding: "1em 1em 1em 0", - borderTop: "0.1em solid #00000099", - color: "black", - borderLeft: "none" - } -})); - const MapChart = (props) => { const { setReactTooltipContent, title, stateCodes, allPrograms, allStates, summary, screenWidth } = props; let searchKey = ""; @@ -287,7 +202,18 @@ const MapChart = (props) => { : classes.tooltip_regularcell_left } > - {record["Fiscal Year"]} + {title === + "Supplemental Nutrition Assistance Program (SNAP)" + ? `${record["Fiscal Year"]} Cost:` + : null} + {title === "Crop Insurance" + ? `${record["Fiscal Year"]} Payment:` + : null} + {title !== "Crop Insurance" && + title !== + "Supplemental Nutrition Assistance Program (SNAP)" + ? `${record["Fiscal Year"]} Benefit:` + : null} { "Supplemental Nutrition Assistance Program (SNAP)" ? ( - Total Cost: + Total Costs: ${ShortFormat(total, undefined, 2)} @@ -320,7 +246,7 @@ const MapChart = (props) => { {title === "Crop Insurance" ? "Total Payments: " - : "Total Benefit: "} + : "Total Benefits: "} ${ShortFormat(total, undefined, 2)} @@ -355,7 +281,9 @@ const MapChart = (props) => { {records.map((record) => ( - 2018: + + 2018 Benefit:{" "} + {`${ShortFormat( record["2018 All Programs Total"], @@ -366,7 +294,7 @@ const MapChart = (props) => { - 2019:{" "} + 2019 Benefit:{" "} { - 2020:{" "} + 2020 Benefit:{" "} { - 2021:{" "} + 2021 Benefit:{" "} { - 2022:{" "} + 2022 Benefit:{" "} { - Total Benefit:{" "} + Total Benefits:{" "} ${ShortFormat(total, undefined, 2)} @@ -533,7 +461,8 @@ const LandingPageMap = ({ screenWidth={screenWidth} />
- + {/* Note that react-tooltip v4 has to use inline background color to style the tooltip arrow */} + {content}
diff --git a/src/components/acep/ACEPCategoryMap.tsx b/src/components/acep/ACEPCategoryMap.tsx deleted file mode 100644 index 50490d22..00000000 --- a/src/components/acep/ACEPCategoryMap.tsx +++ /dev/null @@ -1,279 +0,0 @@ -import React, { useState } from "react"; -import { geoCentroid } from "d3-geo"; -import { ComposableMap, Geographies, Geography, Marker, Annotation } from "react-simple-maps"; -import ReactTooltip from "react-tooltip"; -import Divider from "@mui/material/Divider"; -import Box from "@mui/material/Box"; -import Typography from "@mui/material/Typography"; -import PropTypes from "prop-types"; -import * as d3 from "d3"; -import "../../styles/map.css"; -import legendConfig from "../../utils/legendConfig.json"; -import DrawLegend from "../shared/DrawLegend"; -import { getValueFromAttrDollar, getValueFromAttrPercentage } from "../../utils/apiutil"; - -const geoUrl = "https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json"; - -const offsets = { - VT: [50, -8], - NH: [34, 2], - MA: [30, -1], - RI: [28, 2], - CT: [35, 10], - NJ: [34, 1], - DE: [33, 0], - MD: [47, 10], - DC: [49, 21] -}; - -const MapChart = (props) => { - const { year, setReactTooltipContent, category, allStates, stateCodes, statePerformance, colorScale, attribute } = - props; - - return ( -
- - - {({ geographies }) => ( - <> - {geographies.map((geo) => { - let keyDollar; - let keyPercentage = ""; - const record = statePerformance[year].filter((v) => v.state === geo.properties.name)[0]; - if (record === undefined || record.length === 0) { - return null; - } - if (attribute === "contracts") { - keyDollar = "totalContracts"; - keyPercentage = "contractsInPercentageNationwide"; - } else if (attribute === "acres") { - keyDollar = "totalAcres"; - keyPercentage = "acresInPercentageNationwide"; - } else { - keyDollar = getValueFromAttrDollar(record.programs[0], attribute); - keyPercentage = getValueFromAttrPercentage(record.programs[0], attribute); - } - const categoryPayment = record.programs[0][keyDollar]; - const nationwidePercentage = record.programs[0][keyPercentage]; - const hoverContent = ( - - - {geo.properties.name} - - - ${ShortFormat(categoryPayment, undefined, 2)} - - - - {nationwidePercentage ? `${nationwidePercentage} %` : "0%"} - - - - - ); - const fillColour = () => { - if (categoryPayment) { - if (categoryPayment !== 0) return colorScale(categoryPayment); - return "#D2D2D2"; - } - return "#D2D2D2"; - }; - return ( - { - setReactTooltipContent(hoverContent); - }} - onMouseLeave={() => { - setReactTooltipContent(""); - }} - fill={fillColour()} - stroke="#FFFFFF" - style={{ - default: { stroke: "#FFFFFF", strokeWidth: 0.75, outline: "none" }, - hover: { - stroke: "#232323", - strokeWidth: 2, - outline: "none" - }, - pressed: { - fill: "#345feb", - outline: "none" - } - }} - /> - ); - })} - {geographies.map((geo) => { - const centroid = geoCentroid(geo); - const cur = allStates.find((s) => s.val === geo.id); - return ( - - {cur && - centroid[0] > -160 && - centroid[0] < -67 && - (Object.keys(offsets).indexOf(cur.id) === -1 ? ( - - - {cur.id} - - - ) : ( - - - {cur.id} - - - ))} - - ); - })} - - )} - - -
- ); -}; - -MapChart.propTypes = { - year: PropTypes.string, - setReactTooltipContent: PropTypes.func, - category: PropTypes.string -}; - -const CategoryMap = ({ - year, - category, - attribute, - statePerformance, - allStates, - stateCodes -}: { - year: string; - category: string; - attribute: string; - statePerformance: any; - allStates: any; - stateCodes: any; -}): JSX.Element => { - const [content, setContent] = useState(""); - const title = `ACEP ${category} from ${year}`; - const quantizeArray: number[] = []; - const zeroPoints = []; - - statePerformance[year].forEach((value) => { - const programRecord = value.programs; - const ACur = programRecord[0]; - let key = ""; - if (attribute === "contracts") key = "totalContracts"; - else if (attribute === "acres") key = "totalAcres"; - else { - key = getValueFromAttrDollar(ACur, attribute); - key = key !== "" ? key : attribute; - } - quantizeArray.push(ACur[key]); - ACur[key] === 0 && zeroPoints.push(value.state); - return null; - }); - const years = "2018-2022"; - const maxValue = Math.max(...quantizeArray); - const mapColor = ["#F0F9E8", "#BAE4BC", "#7BCCC4", "#43A2CA", "#0868AC"]; - const customScale = legendConfig[category]; - const colorScale = d3.scaleThreshold(customScale, mapColor); - return ( -
- {maxValue !== 0 ? ( - - {maxValue !== 0 ? ( - - ) : ( -
- {titleElement(category, years)} - - - {category} data in {years} is unavailable for all states. - - -
- )} - - ) : ( - - - - {title} - - - - - {title} data is unavailable for all states. - - - - )} - -
- - {content} - -
-
- ); -}; -const titleElement = (attribute, year): JSX.Element => { - return ( - - - {attribute} from {year} - {" "} - - In any state that appears in grey, there is no available data - - - ); -}; -export default CategoryMap; diff --git a/src/components/acep/ACEPTotalMap.tsx b/src/components/acep/ACEPTotalMap.tsx index 533cb3e1..b6c2f1ba 100644 --- a/src/components/acep/ACEPTotalMap.tsx +++ b/src/components/acep/ACEPTotalMap.tsx @@ -1,12 +1,12 @@ -import React, { useState } from "react"; +import React, { Suspense, lazy, useState } from "react"; import { geoCentroid } from "d3-geo"; import { ComposableMap, Geographies, Geography, Marker, Annotation } from "react-simple-maps"; import ReactTooltip from "react-tooltip"; -import Divider from "@mui/material/Divider"; import Box from "@mui/material/Box"; import Typography from "@mui/material/Typography"; import * as d3 from "d3"; import PropTypes from "prop-types"; +import { useStyles, tooltipBkgColor, topTipStyle } from "../shared/MapTooltip"; import "../../styles/map.css"; import legendConfig from "../../utils/legendConfig.json"; import DrawLegend from "../shared/DrawLegend"; @@ -28,7 +28,7 @@ const offsets = { const MapChart = (props) => { const { setReactTooltipContent, allStates, statePerformance, year, stateCodes, colorScale } = props; - + const classes = useStyles(); return (
{allStates.length > 0 && statePerformance[year] !== undefined ? ( @@ -47,34 +47,31 @@ const MapChart = (props) => { const assistancePaymentInPercentageNationwide = record.programs[0].assistancePaymentInPercentageNationwide; const hoverContent = ( - - - {geo.properties.name} - - - ${ShortFormat(totalPaymentInDollars, undefined, 2)} - - - - {assistancePaymentInPercentageNationwide - ? `${assistancePaymentInPercentageNationwide} %` - : "0%"} - - - - +
+
+ {geo.properties.name} +
+ + + + + + + + + + + +
Benefits: + ${ShortFormat(totalPaymentInDollars, undefined, 2)} +
+ PCT. Nationwide: + + {assistancePaymentInPercentageNationwide + ? `${assistancePaymentInPercentageNationwide} %` + : "0%"} +
+
); const fillColour = () => { if (totalPaymentInDollars) { @@ -187,49 +184,48 @@ const ACEPTotalMap = ({ const mapColor = ["#F0F9E8", "#BAE4BC", "#7BCCC4", "#43A2CA", "#0868AC"]; const customScale = legendConfig[category]; const colorScale = d3.scaleThreshold(customScale, mapColor); + const classes = useStyles(); return (
-
- - {maxValue !== 0 ? ( - - ) : ( -
- {titleElement(category, years)} - - - {category} data in {years} is unavailable for all states. - - -
- )} - + + {maxValue !== 0 ? ( + + ) : ( +
+ {titleElement(category, years)} + + + {category} data in {years} is unavailable for all states. + + +
+ )} + - + -
- - {content} - -
+
+ + {content} +
); diff --git a/src/components/cropinsurance/CropInsuranceMap.tsx b/src/components/cropinsurance/CropInsuranceMap.tsx index 0d7c5f1d..5d30a0aa 100644 --- a/src/components/cropinsurance/CropInsuranceMap.tsx +++ b/src/components/cropinsurance/CropInsuranceMap.tsx @@ -9,10 +9,10 @@ import PropTypes from "prop-types"; import "../../styles/map.css"; import DrawLegend from "../shared/DrawLegend"; import legendConfig from "../../utils/legendConfig.json"; +import { useStyles, tooltipBkgColor } from "../shared/MapTooltip"; import { ShortFormat } from "../shared/ConvertionFormats"; const geoUrl = "https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json"; - const offsets = { VT: [50, -8], NH: [34, 2], @@ -40,6 +40,8 @@ const MapChart = ({ let attr = 0; if (attribute === "lossRatio") attr = 1; if (attribute === "averageInsuredAreaInAcres" || attribute === "totalPoliciesEarningPremium") attr = 2; + + const classes = useStyles(); return (
@@ -60,44 +62,48 @@ const MapChart = ({ : "totalNetFarmerBenefit"; programPayment = state.programs[0][key]; const hoverContent = ( - - - {geo.properties.name} +
+
+ {geo.properties.name} +
- {attr === 1 ? ( - - {Number(programPayment * 100).toLocaleString(undefined, { - maximumFractionDigits: 2 - })} - % - - ) : ( - + {attr === 1 ? ( + + + + + + + +
+ $ + {Number(programPayment * 100).toLocaleString(undefined, { + maximumFractionDigits: 2 + })} + % +  
+ ) : ( + + {attr === 2 ? ( - - {ShortFormat(programPayment)} - + + + + ) : ( - - ${ShortFormat(programPayment)} - + + + + )} - - )} - - + +
+ {ShortFormat(programPayment)} +  
+ ${ShortFormat(programPayment)} +  
+ )} +
); return ( @@ -263,7 +270,7 @@ const CropInsuranceMap = ({ colorScale={colorScale} />
- + {content}
diff --git a/src/components/cropinsurance/chart/CropInsuranceBubble.tsx b/src/components/cropinsurance/chart/CropInsuranceBubble.tsx index 21a504bd..8390becb 100644 --- a/src/components/cropinsurance/chart/CropInsuranceBubble.tsx +++ b/src/components/cropinsurance/chart/CropInsuranceBubble.tsx @@ -367,20 +367,20 @@ export default function CropInsuranceBubble({ originalData, initChartWidthRatio, } const fullName = stateCodes[theState.data()[0].State.toString()]; const CustomLabel = () => ( -
+
{fullName}
{ const { setReactTooltipContent, allStates, statePerformance, year, stateCodes, colorScale } = props; - + const classes = useStyles(); return (
{allStates.length > 0 && statePerformance[year] !== undefined ? ( @@ -48,34 +48,31 @@ const MapChart = (props) => { const totalPaymentInPercentageNationwide = record.programs[0].paymentInPercentageNationwide; const hoverContent = ( - - - {geo.properties.name} - - - ${ShortFormat(totalPaymentInDollars, undefined, 2)} - - - - {totalPaymentInPercentageNationwide - ? `${totalPaymentInPercentageNationwide} %` - : "0%"} - - - - +
+
+ {geo.properties.name} +
+
+ + + + + + + + + + +
Benefits: + ${ShortFormat(totalPaymentInDollars, undefined, 2)} +
+ PCT. Nationwide: + + {totalPaymentInPercentageNationwide + ? `${totalPaymentInPercentageNationwide} %` + : "0%"} +
+
); const fillColour = () => { if (totalPaymentInDollars) { @@ -189,6 +186,7 @@ const CRPTotalMap = ({ const mapColor = ["#F0F9E8", "#BAE4BC", "#7BCCC4", "#43A2CA", "#0868AC"]; const customScale = legendConfig[category]; const colorScale = d3.scaleThreshold(customScale, mapColor); + const classes = useStyles(); return (
@@ -228,7 +226,7 @@ const CRPTotalMap = ({ />
- + {content}
diff --git a/src/components/crp/CategoryMap.tsx b/src/components/crp/CategoryMap.tsx index f3430627..52c337cd 100644 --- a/src/components/crp/CategoryMap.tsx +++ b/src/components/crp/CategoryMap.tsx @@ -2,12 +2,11 @@ import React, { useState } from "react"; import { geoCentroid } from "d3-geo"; import { ComposableMap, Geographies, Geography, Marker, Annotation } from "react-simple-maps"; import ReactTooltip from "react-tooltip"; -import { scaleQuantize } from "d3-scale"; -import Divider from "@mui/material/Divider"; import Box from "@mui/material/Box"; import Typography from "@mui/material/Typography"; import PropTypes from "prop-types"; import * as d3 from "d3"; +import { useStyles, tooltipBkgColor, topTipStyle } from "../shared/MapTooltip"; import "../../styles/map.css"; import legendConfig from "../../utils/legendConfig.json"; import DrawLegend from "../shared/DrawLegend"; @@ -31,6 +30,7 @@ const offsets = { const MapChart = (props) => { const { year, setReactTooltipContent, category, allStates, stateCodes, statePerformance, colorScale } = props; let categoryRecord; + const classes = useStyles(); return (
@@ -84,32 +84,29 @@ const MapChart = (props) => { const categoryPayment = categoryRecord.paymentInDollars; const nationwidePercentage = categoryRecord.paymentInPercentageNationwide; const hoverContent = ( - - - {geo.properties.name} - - - ${ShortFormat(categoryPayment, undefined, 2)} - - - - {nationwidePercentage ? `${nationwidePercentage} %` : "0%"} - - - - +
+
+ {geo.properties.name} +
+ + + + + + + + + + + +
Benefits: + ${ShortFormat(categoryPayment, undefined, 2)} +
+ PCT. Nationwide: + + {nationwidePercentage ? `${nationwidePercentage} %` : "0%"} +
+
); const fillColour = () => { if (categoryPayment) { @@ -237,6 +234,7 @@ const CategoryMap = ({ const mapColor = ["#F0F9E8", "#BAE4BC", "#7BCCC4", "#43A2CA", "#0868AC"]; const customScale = legendConfig[category === "Grassland" ? "Grassland-CRP" : category]; const colorScale = d3.scaleThreshold(customScale, mapColor); + const classes = useStyles(); return (
{maxValue !== 0 ? ( @@ -295,7 +293,7 @@ const CategoryMap = ({ statePerformance={statePerformance} />
- + {content}
diff --git a/src/components/csp/CSPTotalMap.tsx b/src/components/csp/CSPTotalMap.tsx index 006ff187..4275e352 100644 --- a/src/components/csp/CSPTotalMap.tsx +++ b/src/components/csp/CSPTotalMap.tsx @@ -2,11 +2,11 @@ import React, { useState } from "react"; import { geoCentroid } from "d3-geo"; import { ComposableMap, Geographies, Geography, Marker, Annotation } from "react-simple-maps"; import ReactTooltip from "react-tooltip"; -import Divider from "@mui/material/Divider"; import Box from "@mui/material/Box"; import Typography from "@mui/material/Typography"; import * as d3 from "d3"; import PropTypes from "prop-types"; +import { useStyles, tooltipBkgColor, topTipStyle } from "../shared/MapTooltip"; import "../../styles/map.css"; import legendConfig from "../../utils/legendConfig.json"; import DrawLegend from "../shared/DrawLegend"; @@ -28,7 +28,7 @@ const offsets = { const MapChart = (props) => { const { setReactTooltipContent, allStates, statePerformance, colorScale } = props; - + const classes = useStyles(); return (
{allStates.length > 0 && statePerformance.Wisconsin !== undefined ? ( @@ -45,34 +45,31 @@ const MapChart = (props) => { const totalPaymentInPercentageNationwide = record.totalPaymentInPercentageNationwide; const hoverContent = ( - - - {geo.properties.name} - - - ${ShortFormat(totalPaymentInDollars, undefined, 2)} - - - - {totalPaymentInPercentageNationwide - ? `${totalPaymentInPercentageNationwide} %` - : "0%"} - - - - +
+
+ {geo.properties.name} +
+ + + + + + + + + + + +
Benefits: + ${ShortFormat(totalPaymentInDollars, undefined, 2)} +
+ PCT. Nationwide: + + {totalPaymentInPercentageNationwide + ? `${totalPaymentInPercentageNationwide} %` + : "0%"} +
+
); const fillColour = () => { if (totalPaymentInDollars) { @@ -175,6 +172,7 @@ const CSPTotalMap = ({ statePerformance, allStates }: { statePerformance: any; a ) { years = Array(Array(Array(Object.values(statePerformance)[0])[0])[0])[0][0].years; } + const classes = useStyles(); return (
@@ -212,7 +210,7 @@ const CSPTotalMap = ({ statePerformance, allStates }: { statePerformance: any; a />
- + {content}
diff --git a/src/components/csp/CategoryMap.tsx b/src/components/csp/CategoryMap.tsx index b36020e1..ed19e634 100644 --- a/src/components/csp/CategoryMap.tsx +++ b/src/components/csp/CategoryMap.tsx @@ -2,12 +2,11 @@ import React, { useState } from "react"; import { geoCentroid } from "d3-geo"; import { ComposableMap, Geographies, Geography, Marker, Annotation } from "react-simple-maps"; import ReactTooltip from "react-tooltip"; -import { scaleQuantize } from "d3-scale"; -import Divider from "@mui/material/Divider"; import Box from "@mui/material/Box"; import Typography from "@mui/material/Typography"; import PropTypes from "prop-types"; import * as d3 from "d3"; +import { useStyles, tooltipBkgColor, topTipStyle } from "../shared/MapTooltip"; import "../../styles/map.css"; import legendConfig from "../../utils/legendConfig.json"; import DrawLegend from "../shared/DrawLegend"; @@ -30,6 +29,7 @@ const offsets = { const MapChart = (props) => { const { setReactTooltipContent, category, allStates, statePerformance, colorScale } = props; let categoryRecord; + const classes = useStyles(); return (
@@ -66,32 +66,29 @@ const MapChart = (props) => { ? categoryRecord.statutePaymentInPercentageWithinState : categoryRecord.paymentInPercentageWithinState; const hoverContent = ( - - - {geo.properties.name} - - - ${ShortFormat(categoryPayment, undefined, 2)} - - - - {nationwidePercentage ? `${nationwidePercentage} %` : "0%"} - - - - +
+
+ {geo.properties.name} +
+ + + + + + + + + + + +
Benefits: + ${ShortFormat(categoryPayment, undefined, 2)} +
+ PCT. Nationwide: + + {nationwidePercentage ? `${nationwidePercentage} %` : "0%"} +
+
); const fillColour = () => { if (categoryPayment) { @@ -223,6 +220,7 @@ const CategoryMap = ({ if (category === "Other improvement") legendCategory = "Other improvement-CSP"; const customScale = legendConfig[legendCategory]; const colorScale = d3.scaleThreshold(customScale, mapColor); + const classes = useStyles(); return (
{maxValue !== 0 ? ( @@ -279,7 +277,7 @@ const CategoryMap = ({ colorScale={colorScale} />
- + {content}
diff --git a/src/components/eqip/CategoryMap.tsx b/src/components/eqip/CategoryMap.tsx index 68388374..8f158115 100644 --- a/src/components/eqip/CategoryMap.tsx +++ b/src/components/eqip/CategoryMap.tsx @@ -7,6 +7,7 @@ import Box from "@mui/material/Box"; import Typography from "@mui/material/Typography"; import PropTypes from "prop-types"; import * as d3 from "d3"; +import { useStyles, tooltipBkgColor, topTipStyle } from "../shared/MapTooltip"; import "../../styles/map.css"; import legendConfig from "../../utils/legendConfig.json"; import DrawLegend from "../shared/DrawLegend"; @@ -28,7 +29,7 @@ const offsets = { const MapChart = (props) => { const { setReactTooltipContent, category, statePerformance, allStates, colorScale } = props; - + const classes = useStyles(); return (
@@ -50,32 +51,29 @@ const MapChart = (props) => { const categoryPayment = categoryRecord.paymentInDollars; const nationwidePercentage = categoryRecord.paymentInPercentageNationwide; const hoverContent = ( - - - {geo.properties.name} - - - ${ShortFormat(categoryPayment, undefined, 2)} - - - - {nationwidePercentage ? `${nationwidePercentage} %` : "0%"} - - - - +
+
+ {geo.properties.name} +
+ + + + + + + + + + + +
Benefits: + ${ShortFormat(categoryPayment, undefined, 2)} +
+ PCT. Nationwide: + + {nationwidePercentage ? `${nationwidePercentage} %` : "0%"} +
+
); const fillColour = () => { @@ -189,6 +187,7 @@ const CategoryMap = ({ const mapColor = ["#F0F9E8", "#BAE4BC", "#7BCCC4", "#43A2CA", "#0868AC"]; const customScale = legendConfig[category]; const colorScale = d3.scaleThreshold(customScale, mapColor); + const classes = useStyles(); return (
@@ -223,7 +222,7 @@ const CategoryMap = ({ colorScale={colorScale} />
- + {content}
diff --git a/src/components/eqip/EQIPTotalMap.tsx b/src/components/eqip/EQIPTotalMap.tsx index 0267354a..0848b5a4 100644 --- a/src/components/eqip/EQIPTotalMap.tsx +++ b/src/components/eqip/EQIPTotalMap.tsx @@ -2,12 +2,11 @@ import React, { useState } from "react"; import { geoCentroid } from "d3-geo"; import { ComposableMap, Geographies, Geography, Marker, Annotation } from "react-simple-maps"; import ReactTooltip from "react-tooltip"; -import { scaleQuantize } from "d3-scale"; -import Divider from "@mui/material/Divider"; import Box from "@mui/material/Box"; import Typography from "@mui/material/Typography"; import * as d3 from "d3"; import PropTypes from "prop-types"; +import { useStyles, tooltipBkgColor, topTipStyle } from "../shared/MapTooltip"; import "../../styles/map.css"; import legendConfig from "../../utils/legendConfig.json"; import DrawLegend from "../shared/DrawLegend"; @@ -28,6 +27,7 @@ const offsets = { }; const MapChart = ({ setReactTooltipContent, maxValue, allStates, statePerformance, colorScale }) => { + const classes = useStyles(); return (
@@ -42,34 +42,31 @@ const MapChart = ({ setReactTooltipContent, maxValue, allStates, statePerformanc const totalPaymentInDollars = record.totalPaymentInDollars; const totalPaymentInPercentageNationwide = record.totalPaymentInPercentageNationwide; const hoverContent = ( - - - {geo.properties.name} - - - ${ShortFormat(totalPaymentInDollars, undefined, 2)} - - - - {totalPaymentInPercentageNationwide - ? `${totalPaymentInPercentageNationwide} %` - : "0%"} - - - - +
+
+ {geo.properties.name} +
+ + + + + + + + + + + +
Benefits: + ${ShortFormat(totalPaymentInDollars, undefined, 2)} +
+ PCT. Nationwide: + + {totalPaymentInPercentageNationwide + ? `${totalPaymentInPercentageNationwide} %` + : "0%"} +
+
); return ( @@ -190,7 +188,7 @@ const EQIPTotalMap = ({ statePerformance, allStates }: { statePerformance: any; colorScale={colorScale} />
- + {content}
diff --git a/src/components/rcpp/RCPPTotalMap.tsx b/src/components/rcpp/RCPPTotalMap.tsx index d46b95aa..0bf0bddc 100644 --- a/src/components/rcpp/RCPPTotalMap.tsx +++ b/src/components/rcpp/RCPPTotalMap.tsx @@ -2,7 +2,6 @@ import React, { useState } from "react"; import { geoCentroid } from "d3-geo"; import { ComposableMap, Geographies, Geography, Marker, Annotation } from "react-simple-maps"; import ReactTooltip from "react-tooltip"; -import Divider from "@mui/material/Divider"; import Box from "@mui/material/Box"; import Typography from "@mui/material/Typography"; import * as d3 from "d3"; @@ -12,6 +11,7 @@ import legendConfig from "../../utils/legendConfig.json"; import DrawLegend from "../shared/DrawLegend"; import { getValueFromAttrDollar } from "../../utils/apiutil"; import { ShortFormat } from "../shared/ConvertionFormats"; +import { useStyles, tooltipBkgColor, topTipStyle } from "../shared/MapTooltip"; const geoUrl = "https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json"; @@ -29,6 +29,7 @@ const offsets = { const MapChart = (props) => { const { setReactTooltipContent, allStates, statePerformance, year, stateCodes, colorScale } = props; + const classes = useStyles(); return (
{allStates.length > 0 && statePerformance[year] !== undefined ? ( @@ -49,34 +50,34 @@ const MapChart = (props) => { const totalPaymentInPercentageNationwide = record.programs[0].assistancePaymentInPercentageNationwide; const hoverContent = ( - - - {geo.properties.name} - - - ${ShortFormat(totalPaymentInDollars, undefined, 2)} - - - - {totalPaymentInPercentageNationwide - ? `${totalPaymentInPercentageNationwide} %` - : "0%"} - - - - +
+
+ {geo.properties.name} +
+ + + + + + + + + + + +
Benefits: + ${ShortFormat(totalPaymentInDollars, undefined, 2)} +
+ PCT. Nationwide: + + {totalPaymentInPercentageNationwide + ? `${totalPaymentInPercentageNationwide} %` + : "0%"} +
+
); const fillColour = () => { if (totalPaymentInDollars) { @@ -190,6 +191,7 @@ const RCPPTotalMap = ({ const mapColor = ["#F0F9E8", "#BAE4BC", "#7BCCC4", "#43A2CA", "#0868AC"]; const customScale = legendConfig[category]; const colorScale = d3.scaleThreshold(customScale, mapColor); + const classes = useStyles(); return (
@@ -229,7 +231,7 @@ const RCPPTotalMap = ({ />
- + {content}
diff --git a/src/components/shared/MapTooltip.tsx b/src/components/shared/MapTooltip.tsx new file mode 100644 index 00000000..d4ab1a8d --- /dev/null +++ b/src/components/shared/MapTooltip.tsx @@ -0,0 +1,91 @@ +import { makeStyles } from "@mui/styles"; + +// Shared Tooltip Styles for react-simplemap +export const tooltipBkgColor = "#F3F3F3"; +const regularTextColor = "#00000099"; +const commonMenuStyles = { + tooltip_cell: { + margin: 0 + } +}; +export const useStyles = makeStyles(() => ({ + customized_tooltip: { + backgroundColor: `${tooltipBkgColor} !important`, + padding: "0 !important", + margin: "0 !important", + opacity: "1 !important" + }, + tooltip_overall: { + backgroundColor: "white", + width: "100%", + height: "100%" + }, + tooltip_header: { + padding: "0.5em 1em 0.5em 1em", + textAlign: "left", + fontSize: "1.5em", + color: "black", + margin: 0 + }, + tooltip_table: { + backgroundColor: `${tooltipBkgColor} !important`, + width: "100%", + fontSize: "1.25em", + color: `${regularTextColor}`, + padding: 0, + margin: 0, + borderCollapse: "collapse" + }, + tooltip_topcell_left: { + ...commonMenuStyles.tooltip_cell, + padding: "1em" + }, + tooltip_topcell_right: { + ...commonMenuStyles.tooltip_cell, + textAlign: "right", + padding: "1em", + borderRight: "none" + }, + tooltip_bottomcell_left: { + ...commonMenuStyles.tooltip_cell, + padding: "0 1em 1em 1em" + }, + tooltip_bottomcell_right: { + ...commonMenuStyles.tooltip_cell, + textAlign: "right", + padding: "0 1em 1em 1em", + borderLeft: "none" + }, + tooltip_regularcell_left: { + ...commonMenuStyles.tooltip_cell, + padding: "0 1em 1em 1em" + }, + tooltip_regularcell_right: { + ...commonMenuStyles.tooltip_cell, + textAlign: "right", + padding: "0 1em 1em 1em", + borderLeft: "none" + }, + tooltip_footer_left: { + ...commonMenuStyles.tooltip_cell, + textAlign: "left", + padding: "1em", + borderTop: `0.1em solid ${regularTextColor}`, + color: "black", + borderRight: "none", + fontWeight: "bold" + }, + tooltip_footer_right: { + ...commonMenuStyles.tooltip_cell, + textAlign: "right", + padding: "1em", + borderTop: `0.1em solid ${regularTextColor}`, + color: "black", + borderLeft: "none", + fontWeight: "bold" + } +})); +export const topTipStyle = { + fontWeight: "bold", + color: "#000000DE" +}; diff --git a/src/components/title1/Title1Map.tsx b/src/components/title1/Title1Map.tsx index 08cf354a..7549208f 100644 --- a/src/components/title1/Title1Map.tsx +++ b/src/components/title1/Title1Map.tsx @@ -7,6 +7,7 @@ import Box from "@mui/material/Box"; import Typography from "@mui/material/Typography"; import * as d3 from "d3"; import PropTypes from "prop-types"; +import { useStyles, tooltipBkgColor, topTipStyle } from "../shared/MapTooltip"; import "../../styles/map.css"; import DrawLegend from "../shared/DrawLegend"; import legendConfig from "../../utils/legendConfig.json"; @@ -38,6 +39,7 @@ const MapChart = ({ allStates, colorScale }) => { + const classes = useStyles(); return (
{program !== "Total Commodities Programs" ? ( @@ -70,39 +72,42 @@ const MapChart = ({ totalPaymentInPercentage = subprogramRecord.paymentInPercentageNationwide; } const hoverContent = ( - - - {geo.properties.name} - - {subprogram === undefined ? ( - - ${ShortFormat(programPayment, undefined, 2)} - - ) : ( - - - ${ShortFormat(programPayment, undefined, 2)} - - - - {totalPaymentInPercentage} % - - - )} - - +
+
+ {geo.properties.name} +
+ {subprogram === undefined ? ( + + + + + + + +
+ {ShortFormat(programPayment, undefined, 2)} +  
+ ) : ( + + + + + + + + + + + +
Payments: + ${ShortFormat(programPayment, undefined, 2)} +
+ PCT. Nationwide: + + {totalPaymentInPercentage} % +
+ )} +
); return ( - - {geo.properties.name} - - {subprogram === undefined ? ( - - ${ShortFormat(programPayment, undefined, 2)} - - ) : ( - - - ${ShortFormat(programPayment, undefined, 2)} - - - - {totalPaymentInPercentage} % - - - )} - - +
+
+ {geo.properties.name} +
+ {subprogram === undefined ? ( + + + + + + + +
+ ${ShortFormat(programPayment, undefined, 2)} +  
+ ) : ( + + + + + + + + + + + +
Payments: + ${ShortFormat(programPayment, undefined, 2)} +
+ PCT. Nationwide: + + {totalPaymentInPercentage} % +
+ )} +
); return ( @@ -378,7 +387,7 @@ const Title1Map = ({ colorScale={colorScale} />
- + {content}
diff --git a/src/pages/CRPPage.tsx b/src/pages/CRPPage.tsx index a807c5f9..647809a8 100644 --- a/src/pages/CRPPage.tsx +++ b/src/pages/CRPPage.tsx @@ -314,7 +314,7 @@ export default function CRPPage(): JSX.Element { - Overall Performance of States + Performance by States diff --git a/src/pages/CSPPage.tsx b/src/pages/CSPPage.tsx index 2e646946..acafbe9d 100644 --- a/src/pages/CSPPage.tsx +++ b/src/pages/CSPPage.tsx @@ -480,7 +480,7 @@ export default function CSPPage(): JSX.Element { - Performance by State + Performance by States diff --git a/src/pages/CropInsurancePage.tsx b/src/pages/CropInsurancePage.tsx index 3ba2d6e9..6b3848a7 100644 --- a/src/pages/CropInsurancePage.tsx +++ b/src/pages/CropInsurancePage.tsx @@ -128,7 +128,7 @@ export default function CropInsurancePage(): JSX.Element { > - Comparison by States + Performance by States - Comparison by States + Performance by States - Comparison by States + Performance by States - Comparison by States + Performance by States - Comparison by States + Performance by States - Comparison by States + Performance by States - Performance by State + Performance by States diff --git a/src/pages/RCPPPage.tsx b/src/pages/RCPPPage.tsx index 5f6726f9..e91e8677 100644 --- a/src/pages/RCPPPage.tsx +++ b/src/pages/RCPPPage.tsx @@ -152,7 +152,7 @@ export default function RCPPPage(): JSX.Element { - Overall Performance of States + Performance by States diff --git a/src/pages/SNAPPage.tsx b/src/pages/SNAPPage.tsx index c29419c3..f450e4cd 100644 --- a/src/pages/SNAPPage.tsx +++ b/src/pages/SNAPPage.tsx @@ -22,7 +22,7 @@ import NavBar from "../components/NavBar"; import NavSearchBar from "../components/shared/NavSearchBar"; import { hexToRGB } from "../components/shared/StyleFunctions"; import "../styles/snap.css"; - +import "../styles/table.css"; import { config } from "../app.config"; import { convertAllState, getJsonDataFromUrl } from "../utils/apiutil"; @@ -167,7 +167,7 @@ export default function SNAPPage(): JSX.Element { }} > - Comparison by States + Performance by States Date: Mon, 8 Jan 2024 08:23:42 -0600 Subject: [PATCH 10/14] fix SemiDonutChart labeling --- src/components/SemiDonutChart.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/SemiDonutChart.tsx b/src/components/SemiDonutChart.tsx index 9b1e09df..7f58d40c 100644 --- a/src/components/SemiDonutChart.tsx +++ b/src/components/SemiDonutChart.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { PieChart, Pie, ReactTooltip, Label, Cell } from "recharts"; +import { PieChart, Pie, Tooltip, Label, Cell } from "recharts"; import { Box } from "@mui/material"; import { ShortFormat } from "./shared/ConvertionFormats"; @@ -93,7 +93,7 @@ export default function SemiDonutChart({ data, label1, label2 }: any): JSX.Eleme ))} - } wrapperStyle={{ backgroundColor: "white", From c51bdd3e3fee450fbc80cc52b8b02d8ef9918b06 Mon Sep 17 00:00:00 2001 From: "Wendy(Pengyin) Shan" Date: Mon, 8 Jan 2024 08:41:24 -0600 Subject: [PATCH 11/14] fix syntax error --- src/components/ProgramDrawer.tsx | 4 ++-- src/components/cropinsurance/chart/CropInsuranceBubble.tsx | 4 +++- src/components/rcpp/RCPPTotalMap.tsx | 5 +---- 3 files changed, 6 insertions(+), 7 deletions(-) diff --git a/src/components/ProgramDrawer.tsx b/src/components/ProgramDrawer.tsx index f439034b..d7b3f540 100644 --- a/src/components/ProgramDrawer.tsx +++ b/src/components/ProgramDrawer.tsx @@ -223,7 +223,7 @@ function EQIPCheckboxList({ setEQIPChecked, setShowPopUp, zeroCategory }) { } if (category === "Land management") { return ( - + (6)(A) Improvements @@ -402,7 +402,7 @@ function CSPCheckboxList({ setCSPChecked, setShowPopUp, zeroCategory }) { } if (category === "2018 Practices" || category === "2014 Eligible Land") { return ( - + ( -
+
{ - + PCT. Nationwide: From 33dccbb03c648dedb0db72883ff93e77cef5a386 Mon Sep 17 00:00:00 2001 From: "Wendy(Pengyin) Shan" Date: Wed, 17 Jan 2024 09:25:35 -0600 Subject: [PATCH 12/14] move basic style to css and remove unneeded imports --- src/components/LandingPageMap.tsx | 6 +++--- src/components/acep/ACEPTotalMap.tsx | 4 ++-- src/components/cropinsurance/CropInsuranceMap.tsx | 2 +- src/components/crp/CRPTotalMap.tsx | 2 +- src/components/crp/CategoryMap.tsx | 2 +- src/components/csp/CSPTotalMap.tsx | 2 +- src/components/csp/CategoryMap.tsx | 2 +- src/components/eqip/CategoryMap.tsx | 3 +-- src/components/eqip/EQIPTotalMap.tsx | 2 +- src/components/rcpp/RCPPTotalMap.tsx | 2 +- src/components/title1/Title1Map.tsx | 5 ++--- src/styles/map.css | 5 +++++ 12 files changed, 20 insertions(+), 17 deletions(-) diff --git a/src/components/LandingPageMap.tsx b/src/components/LandingPageMap.tsx index ecec453e..9c35f517 100644 --- a/src/components/LandingPageMap.tsx +++ b/src/components/LandingPageMap.tsx @@ -7,11 +7,11 @@ import * as d3 from "d3"; import PropTypes from "prop-types"; import Box from "@mui/material/Box"; import Typography from "@mui/material/Typography"; -import "../styles/map.css"; import DrawLegend from "./shared/DrawLegend"; import legendConfig from "../utils/legendConfig.json"; import { ShortFormat } from "./shared/ConvertionFormats"; import { useStyles, tooltipBkgColor } from "./shared/MapTooltip"; +import "../styles/map.css"; const geoUrl = "https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json"; @@ -185,7 +185,7 @@ const MapChart = (props) => { const hoverContent = title !== "All Programs" ? ( -
+
{stateCodes[cur.id]}
@@ -273,7 +273,7 @@ const MapChart = (props) => {
) : ( -
+
{cur ? stateCodes[cur.id] : ""}
diff --git a/src/components/acep/ACEPTotalMap.tsx b/src/components/acep/ACEPTotalMap.tsx index b6c2f1ba..2dfb059b 100644 --- a/src/components/acep/ACEPTotalMap.tsx +++ b/src/components/acep/ACEPTotalMap.tsx @@ -1,4 +1,4 @@ -import React, { Suspense, lazy, useState } from "react"; +import React, { useState } from "react"; import { geoCentroid } from "d3-geo"; import { ComposableMap, Geographies, Geography, Marker, Annotation } from "react-simple-maps"; import ReactTooltip from "react-tooltip"; @@ -47,7 +47,7 @@ const MapChart = (props) => { const assistancePaymentInPercentageNationwide = record.programs[0].assistancePaymentInPercentageNationwide; const hoverContent = ( -
+
{geo.properties.name}
diff --git a/src/components/cropinsurance/CropInsuranceMap.tsx b/src/components/cropinsurance/CropInsuranceMap.tsx index 5d30a0aa..de3511fe 100644 --- a/src/components/cropinsurance/CropInsuranceMap.tsx +++ b/src/components/cropinsurance/CropInsuranceMap.tsx @@ -62,7 +62,7 @@ const MapChart = ({ : "totalNetFarmerBenefit"; programPayment = state.programs[0][key]; const hoverContent = ( -
+
{geo.properties.name}
diff --git a/src/components/crp/CRPTotalMap.tsx b/src/components/crp/CRPTotalMap.tsx index b8918300..6405c8fb 100644 --- a/src/components/crp/CRPTotalMap.tsx +++ b/src/components/crp/CRPTotalMap.tsx @@ -48,7 +48,7 @@ const MapChart = (props) => { const totalPaymentInPercentageNationwide = record.programs[0].paymentInPercentageNationwide; const hoverContent = ( -
+
{geo.properties.name}
diff --git a/src/components/crp/CategoryMap.tsx b/src/components/crp/CategoryMap.tsx index 52c337cd..64ea8d7e 100644 --- a/src/components/crp/CategoryMap.tsx +++ b/src/components/crp/CategoryMap.tsx @@ -84,7 +84,7 @@ const MapChart = (props) => { const categoryPayment = categoryRecord.paymentInDollars; const nationwidePercentage = categoryRecord.paymentInPercentageNationwide; const hoverContent = ( -
+
{geo.properties.name}
diff --git a/src/components/csp/CSPTotalMap.tsx b/src/components/csp/CSPTotalMap.tsx index 4275e352..13a5249b 100644 --- a/src/components/csp/CSPTotalMap.tsx +++ b/src/components/csp/CSPTotalMap.tsx @@ -45,7 +45,7 @@ const MapChart = (props) => { const totalPaymentInPercentageNationwide = record.totalPaymentInPercentageNationwide; const hoverContent = ( -
+
{geo.properties.name}
diff --git a/src/components/csp/CategoryMap.tsx b/src/components/csp/CategoryMap.tsx index ed19e634..2e581ae8 100644 --- a/src/components/csp/CategoryMap.tsx +++ b/src/components/csp/CategoryMap.tsx @@ -66,7 +66,7 @@ const MapChart = (props) => { ? categoryRecord.statutePaymentInPercentageWithinState : categoryRecord.paymentInPercentageWithinState; const hoverContent = ( -
+
{geo.properties.name}
diff --git a/src/components/eqip/CategoryMap.tsx b/src/components/eqip/CategoryMap.tsx index 8f158115..19fe0307 100644 --- a/src/components/eqip/CategoryMap.tsx +++ b/src/components/eqip/CategoryMap.tsx @@ -2,7 +2,6 @@ import React, { useState } from "react"; import { geoCentroid } from "d3-geo"; import { ComposableMap, Geographies, Geography, Marker, Annotation } from "react-simple-maps"; import ReactTooltip from "react-tooltip"; -import Divider from "@mui/material/Divider"; import Box from "@mui/material/Box"; import Typography from "@mui/material/Typography"; import PropTypes from "prop-types"; @@ -51,7 +50,7 @@ const MapChart = (props) => { const categoryPayment = categoryRecord.paymentInDollars; const nationwidePercentage = categoryRecord.paymentInPercentageNationwide; const hoverContent = ( -
+
{geo.properties.name}
diff --git a/src/components/eqip/EQIPTotalMap.tsx b/src/components/eqip/EQIPTotalMap.tsx index 0848b5a4..ff3c0d79 100644 --- a/src/components/eqip/EQIPTotalMap.tsx +++ b/src/components/eqip/EQIPTotalMap.tsx @@ -42,7 +42,7 @@ const MapChart = ({ setReactTooltipContent, maxValue, allStates, statePerformanc const totalPaymentInDollars = record.totalPaymentInDollars; const totalPaymentInPercentageNationwide = record.totalPaymentInPercentageNationwide; const hoverContent = ( -
+
{geo.properties.name}
diff --git a/src/components/rcpp/RCPPTotalMap.tsx b/src/components/rcpp/RCPPTotalMap.tsx index ae243e0c..e6b20a9f 100644 --- a/src/components/rcpp/RCPPTotalMap.tsx +++ b/src/components/rcpp/RCPPTotalMap.tsx @@ -50,7 +50,7 @@ const MapChart = (props) => { const totalPaymentInPercentageNationwide = record.programs[0].assistancePaymentInPercentageNationwide; const hoverContent = ( -
+
{geo.properties.name}
diff --git a/src/components/title1/Title1Map.tsx b/src/components/title1/Title1Map.tsx index 7549208f..c71a6bd9 100644 --- a/src/components/title1/Title1Map.tsx +++ b/src/components/title1/Title1Map.tsx @@ -2,7 +2,6 @@ import React, { useState } from "react"; import { geoCentroid } from "d3-geo"; import { ComposableMap, Geographies, Geography, Marker, Annotation } from "react-simple-maps"; import ReactTooltip from "react-tooltip"; -import Divider from "@mui/material/Divider"; import Box from "@mui/material/Box"; import Typography from "@mui/material/Typography"; import * as d3 from "d3"; @@ -72,7 +71,7 @@ const MapChart = ({ totalPaymentInPercentage = subprogramRecord.paymentInPercentageNationwide; } const hoverContent = ( -
+
{geo.properties.name}
@@ -190,7 +189,7 @@ const MapChart = ({ programPayment = state.totalPaymentInDollars; totalPaymentInPercentage = state.totalPaymentInPercentageNationwide; const hoverContent = ( -
+
{geo.properties.name}
diff --git a/src/styles/map.css b/src/styles/map.css index e69de29b..495fd64a 100644 --- a/src/styles/map.css +++ b/src/styles/map.css @@ -0,0 +1,5 @@ +.map_tooltip{ + background-color: white; + width: 100%; + height: 100%; +} From f42a2b95efb6fcd83721527570c7f43625d7cd21 Mon Sep 17 00:00:00 2001 From: "Wendy(Pengyin) Shan" Date: Wed, 17 Jan 2024 11:00:50 -0600 Subject: [PATCH 13/14] update changelog and adjust code based on designer"s review --- CHANGELOG.md | 13 ++++++++++++- src/components/LandingPageMap.tsx | 16 ++++++++++------ .../cropinsurance/CropInsuranceMap.tsx | 3 +-- .../cropinsurance/chart/CropInsuranceBubble.tsx | 2 +- src/components/shared/MapTooltip.tsx | 11 ++++++++--- src/components/title1/Title1Map.tsx | 2 +- 6 files changed, 33 insertions(+), 14 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index eb1ebee3..92f0efeb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,7 +4,13 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html). -## [unreleased] +## [0.14.0] - 2024-01-17 + +### Changed +- Based on the user feasibility testing result, adjusted all tables to have a similar header style[#233](https://github.com/policy-design-lab/pdl-frontend/issues/233) +- Based on the user feasibility testing result, adjusted the pie chart color at Conservation pages[#230](https://github.com/policy-design-lab/pdl-frontend/issues/230) +- Based on the user feasibility testing result, adjusted the side menu style at Conservation pages[#229](https://github.com/policy-design-lab/pdl-frontend/issues/229) +- Based on the user feasibility testing result, adjusted tooltip styles for all maps [#232](https://github.com/policy-design-lab/pdl-frontend/issues/232) ### Fixed - Fixed the loss ratio representation at crop insurance page [#225](https://github.com/policy-design-lab/pdl-frontend/issues/225) @@ -185,6 +191,11 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. - Map data json [#12](https://github.com/policy-design-lab/pdl-frontend/issues/12) - Final landing page changes for initial milestone [#15](https://github.com/policy-design-lab/pdl-frontend/issues/15) +[0.14.0]: https://github.com/policy-design-lab/pdl-frontend/compare/0.13.0...0.14.0 +[0.13.0]: https://github.com/policy-design-lab/pdl-frontend/compare/0.12.0...0.13.0 +[0.12.0]: https://github.com/policy-design-lab/pdl-frontend/compare/0.11.0...0.12.0 +[0.11.0]: https://github.com/policy-design-lab/pdl-frontend/compare/0.10.0...0.11.0 +[0.10.0]: https://github.com/policy-design-lab/pdl-frontend/compare/0.9.0...0.10.0 [0.9.0]: https://github.com/policy-design-lab/pdl-frontend/compare/0.8.0...0.9.0 [0.8.0]: https://github.com/policy-design-lab/pdl-frontend/compare/0.7.0...0.8.0 [0.7.0]: https://github.com/policy-design-lab/pdl-frontend/compare/0.6.0...0.7.0 diff --git a/src/components/LandingPageMap.tsx b/src/components/LandingPageMap.tsx index 9c35f517..04798d32 100644 --- a/src/components/LandingPageMap.tsx +++ b/src/components/LandingPageMap.tsx @@ -227,7 +227,11 @@ const MapChart = (props) => { {String(record["Fiscal Year"]) === "2022" && title.includes("Title I") ? "Not Available" - : `${ShortFormat(record.Amount, undefined, 2)}`} + : `$${ShortFormat( + record.Amount, + undefined, + 2 + )}`} ))} @@ -285,7 +289,7 @@ const MapChart = (props) => { 2018 Benefit:{" "} - {`${ShortFormat( + {`$${ShortFormat( record["2018 All Programs Total"], undefined, 2 @@ -298,7 +302,7 @@ const MapChart = (props) => { {`${ShortFormat( + >{`$${ShortFormat( record["2019 All Programs Total"], undefined, 2 @@ -310,7 +314,7 @@ const MapChart = (props) => { {`${ShortFormat( + >{`$${ShortFormat( record["2020 All Programs Total"], undefined, 2 @@ -322,7 +326,7 @@ const MapChart = (props) => { {`${ShortFormat( + >{`$${ShortFormat( record["2021 All Programs Total"], undefined, 2 @@ -334,7 +338,7 @@ const MapChart = (props) => { {`${ShortFormat( + >{`$${ShortFormat( record["2022 All Programs Total"], undefined, 2 diff --git a/src/components/cropinsurance/CropInsuranceMap.tsx b/src/components/cropinsurance/CropInsuranceMap.tsx index de3511fe..8df57dba 100644 --- a/src/components/cropinsurance/CropInsuranceMap.tsx +++ b/src/components/cropinsurance/CropInsuranceMap.tsx @@ -72,7 +72,6 @@ const MapChart = ({ - $ {Number(programPayment * 100).toLocaleString(undefined, { maximumFractionDigits: 2 })} @@ -88,7 +87,7 @@ const MapChart = ({ {attr === 2 ? ( - {ShortFormat(programPayment)} + ${ShortFormat(programPayment)}   diff --git a/src/components/cropinsurance/chart/CropInsuranceBubble.tsx b/src/components/cropinsurance/chart/CropInsuranceBubble.tsx index e3cef827..c4060385 100644 --- a/src/components/cropinsurance/chart/CropInsuranceBubble.tsx +++ b/src/components/cropinsurance/chart/CropInsuranceBubble.tsx @@ -3,7 +3,7 @@ import * as d3 from "d3"; import styled from "styled-components"; import { Box, FormControlLabel, Grid, Radio, RadioGroup, Typography } from "@mui/material"; import ReactDOMServer from "react-dom/server"; -import { ShortFormat, ToDollarString } from "../../shared/ConvertionFormats"; +import { ToDollarString } from "../../shared/ConvertionFormats"; import { DownloadIcon } from "../../shared/DownloadIcon"; export default function CropInsuranceBubble({ originalData, initChartWidthRatio, stateCodesData }): JSX.Element { diff --git a/src/components/shared/MapTooltip.tsx b/src/components/shared/MapTooltip.tsx index d4ab1a8d..b4e8926f 100644 --- a/src/components/shared/MapTooltip.tsx +++ b/src/components/shared/MapTooltip.tsx @@ -1,13 +1,18 @@ import { makeStyles } from "@mui/styles"; // Shared Tooltip Styles for react-simplemap -export const tooltipBkgColor = "#F3F3F3"; +export const tooltipBkgColor = "#dadada"; const regularTextColor = "#00000099"; const commonMenuStyles = { tooltip_cell: { margin: 0 } }; + +/** + * New Styles that follow the same style as the bubble chart in Crop Insurance + * Note the font-size has an increment of 0.2em + */ export const useStyles = makeStyles(() => ({ customized_tooltip: { backgroundColor: `${tooltipBkgColor} !important`, @@ -23,14 +28,14 @@ export const useStyles = makeStyles(() => ({ tooltip_header: { padding: "0.5em 1em 0.5em 1em", textAlign: "left", - fontSize: "1.5em", + fontSize: "1.1em", color: "black", margin: 0 }, tooltip_table: { backgroundColor: `${tooltipBkgColor} !important`, width: "100%", - fontSize: "1.25em", + fontSize: "1em", color: `${regularTextColor}`, padding: 0, margin: 0, diff --git a/src/components/title1/Title1Map.tsx b/src/components/title1/Title1Map.tsx index c71a6bd9..ec77ea2a 100644 --- a/src/components/title1/Title1Map.tsx +++ b/src/components/title1/Title1Map.tsx @@ -80,7 +80,7 @@ const MapChart = ({ - {ShortFormat(programPayment, undefined, 2)} + ${ShortFormat(programPayment, undefined, 2)}   From 77d00f23383a132ee1ea379f100d6e2b0d98a5f8 Mon Sep 17 00:00:00 2001 From: "Wendy(Pengyin) Shan" Date: Wed, 17 Jan 2024 14:11:00 -0600 Subject: [PATCH 14/14] update changelog --- CHANGELOG.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 92f0efeb..683a966a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,10 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. ## [0.14.0] - 2024-01-17 ### Changed -- Based on the user feasibility testing result, adjusted all tables to have a similar header style[#233](https://github.com/policy-design-lab/pdl-frontend/issues/233) -- Based on the user feasibility testing result, adjusted the pie chart color at Conservation pages[#230](https://github.com/policy-design-lab/pdl-frontend/issues/230) -- Based on the user feasibility testing result, adjusted the side menu style at Conservation pages[#229](https://github.com/policy-design-lab/pdl-frontend/issues/229) -- Based on the user feasibility testing result, adjusted tooltip styles for all maps [#232](https://github.com/policy-design-lab/pdl-frontend/issues/232) +- Based on the usability testing result, adjusted all tables to have a similar header style[#233](https://github.com/policy-design-lab/pdl-frontend/issues/233) +- Based on the usability testing result, adjusted the pie chart color at Conservation pages[#230](https://github.com/policy-design-lab/pdl-frontend/issues/230) +- Based on the usability testing result, adjusted the side menu style at Conservation pages[#229](https://github.com/policy-design-lab/pdl-frontend/issues/229) +- Based on the usability testing result, adjusted tooltip styles for all maps [#232](https://github.com/policy-design-lab/pdl-frontend/issues/232) ### Fixed - Fixed the loss ratio representation at crop insurance page [#225](https://github.com/policy-design-lab/pdl-frontend/issues/225)