diff --git a/CHANGELOG.md b/CHANGELOG.md index 729dde7..683a966 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,57 +4,60 @@ 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). +## [0.14.0] - 2024-01-17 + +### Changed +- 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) +- 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 ### 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 +67,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 +81,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 +92,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 +106,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 @@ -196,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/package-lock.json b/package-lock.json index 2762147..22c8d80 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 aa757a0..0cbca8c 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 f115a76..a490f82 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-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 359ce94..3c8313c 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/components/LandingPageMap.tsx b/src/components/LandingPageMap.tsx index 55651b0..04798d3 100644 --- a/src/components/LandingPageMap.tsx +++ b/src/components/LandingPageMap.tsx @@ -1,16 +1,17 @@ +/* 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 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"; @@ -27,7 +28,7 @@ const offsets = { }; 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 +142,7 @@ const MapChart = (props) => { allPrograms.forEach((d) => { if (d[searchKey] === 0) zeroPoints.push(d.State); }); + const classes = useStyles(); return (
@@ -183,156 +185,179 @@ 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 Costs: + + ${ShortFormat(total, undefined, 2)} +
+ {title === "Crop Insurance" + ? "Total Payments: " + : "Total Benefits: "} + + ${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 Benefit:{" "} + + {`$${ShortFormat( + record["2018 All Programs Total"], + undefined, + 2 + )}`} +
+ 2019 Benefit:{" "} + {`$${ShortFormat( record["2019 All Programs Total"], undefined, 2 - )} -
- 2020: $ - {ShortFormat( + )}`}
+ 2020 Benefit:{" "} + {`$${ShortFormat( record["2020 All Programs Total"], undefined, 2 - )} -
- 2021: $ - {ShortFormat( + )}`}
+ 2021 Benefit:{" "} + {`$${ShortFormat( record["2021 All Programs Total"], undefined, 2 - )} -
- 2022: $ - {ShortFormat( + )}`}
+ 2022 Benefit:{" "} + {`$${ShortFormat( record["2022 All Programs Total"], undefined, 2 - )} -
- - ))} - - - + )}`}
+ Total Benefits:{" "} + + ${ShortFormat(total, undefined, 2)} +
+
); + const fillColour = () => { if (total) { if (total !== 0) return colorScale(total); @@ -340,15 +365,16 @@ const MapChart = (props) => { } return "#D2D2D2"; }; + return ( { - setTooltipContent(hoverContent); + setReactTooltipContent(hoverContent); }} onMouseLeave={() => { - setTooltipContent(""); + setReactTooltipContent(""); }} fill={fillColour()} stroke="#FFF" @@ -406,7 +432,7 @@ const MapChart = (props) => { }; MapChart.propTypes = { - setTooltipContent: PropTypes.func, + setReactTooltipContent: PropTypes.func, title: PropTypes.string }; @@ -423,13 +449,14 @@ const LandingPageMap = ({ allPrograms: any; summary: any; }): JSX.Element => { + const classes = useStyles(); const [content, setContent] = useState(""); const [screenWidth, setScreenWidth] = useState(window.innerWidth); return (
- + {/* Note that react-tooltip v4 has to use inline background color to style the tooltip arrow */} + {content}
diff --git a/src/components/ProgramDrawer.tsx b/src/components/ProgramDrawer.tsx index a30e1e8..d7b3f54 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,14 +212,18 @@ function EQIPCheckboxList({ setEQIPChecked, setShowPopUp, zeroCategory }) { } }} /> - + ); } if (category === "Land management") { return ( - + (6)(A) Improvements @@ -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,14 +391,18 @@ function CSPCheckboxList({ setCSPChecked, setShowPopUp, zeroCategory }) { } }} /> - + ); } if (category === "2018 Practices" || category === "2014 Eligible Land") { return ( - + @@ -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/components/SemiDonutChart.tsx b/src/components/SemiDonutChart.tsx index 1462e9c..7f58d40 100644 --- a/src/components/SemiDonutChart.tsx +++ b/src/components/SemiDonutChart.tsx @@ -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 (
} + content={} wrapperStyle={{ backgroundColor: "white", borderStyle: "ridge", diff --git a/src/components/acep/ACEPCategoryMap.tsx b/src/components/acep/ACEPCategoryMap.tsx deleted file mode 100644 index bdd548f..0000000 --- a/src/components/acep/ACEPCategoryMap.tsx +++ /dev/null @@ -1,278 +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, setTooltipContent, 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 ( - { - setTooltipContent(hoverContent); - }} - onMouseLeave={() => { - setTooltipContent(""); - }} - 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, - setTooltipContent: 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 ba3bfd7..2dfb059 100644 --- a/src/components/acep/ACEPTotalMap.tsx +++ b/src/components/acep/ACEPTotalMap.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"; @@ -27,8 +27,8 @@ const offsets = { }; const MapChart = (props) => { - const { setTooltipContent, allStates, statePerformance, year, stateCodes, colorScale } = 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) { @@ -88,10 +85,10 @@ const MapChart = (props) => { key={geo.rsmKey} geography={geo} onMouseEnter={() => { - setTooltipContent(hoverContent); + setReactTooltipContent(hoverContent); }} onMouseLeave={() => { - setTooltipContent(""); + setReactTooltipContent(""); }} fill={fillColour()} stroke="#FFF" @@ -152,7 +149,7 @@ const MapChart = (props) => { }; MapChart.propTypes = { - setTooltipContent: PropTypes.func + setReactTooltipContent: PropTypes.func }; const ACEPTotalMap = ({ @@ -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 e418f66..8df57db 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], @@ -26,7 +26,7 @@ const offsets = { }; const MapChart = ({ - setTooltipContent, + setReactTooltipContent, program, attribute, maxValue, @@ -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,54 +62,57 @@ 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 ( { - setTooltipContent(hoverContent); + setReactTooltipContent(hoverContent); }} onMouseLeave={() => { - setTooltipContent(""); + setReactTooltipContent(""); }} fill={programPayment === 0 ? "#CCC" : colorScale(programPayment)} stroke="#FFF" @@ -167,7 +172,7 @@ const MapChart = ({ }; MapChart.propTypes = { - setTooltipContent: PropTypes.func, + setReactTooltipContent: PropTypes.func, attribute: PropTypes.string, program: PropTypes.string, maxValue: PropTypes.number @@ -207,6 +212,7 @@ const CropInsuranceMap = ({ const searchKey = attribute === undefined ? program : attribute; const customScale = legendConfig[searchKey]; const colorScale = d3.scaleThreshold(customScale, mapColor); + const classes = useStyles(); return (
@@ -251,7 +257,7 @@ const CropInsuranceMap = ({ )}
- + {content}
diff --git a/src/components/cropinsurance/CropInsuranceTable.tsx b/src/components/cropinsurance/CropInsuranceTable.tsx index 383a834..bebc8e5 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, 1)}%`; } else if (attr === "averageInsuredAreaInAcres") { newRecord[attr] = `${ value.toLocaleString(undefined, { minimumFractionDigits: 2 }).toString().split(".")[0] diff --git a/src/components/cropinsurance/chart/CropInsuranceBubble.tsx b/src/components/cropinsurance/chart/CropInsuranceBubble.tsx index 21a504b..c406038 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 { @@ -367,20 +367,22 @@ export default function CropInsuranceBubble({ originalData, initChartWidthRatio, } const fullName = stateCodes[theState.data()[0].State.toString()]; const CustomLabel = () => ( -
+
{fullName}
{ - const { setTooltipContent, allStates, statePerformance, year, stateCodes, colorScale } = props; - + 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) { @@ -89,10 +86,10 @@ const MapChart = (props) => { key={geo.rsmKey} geography={geo} onMouseEnter={() => { - setTooltipContent(hoverContent); + setReactTooltipContent(hoverContent); }} onMouseLeave={() => { - setTooltipContent(""); + setReactTooltipContent(""); }} fill={fillColour()} stroke="#FFF" @@ -153,7 +150,7 @@ const MapChart = (props) => { }; MapChart.propTypes = { - setTooltipContent: PropTypes.func + setReactTooltipContent: PropTypes.func }; const CRPTotalMap = ({ @@ -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 (
@@ -218,7 +216,7 @@ const CRPTotalMap = ({
- + {content}
diff --git a/src/components/crp/CategoryMap.tsx b/src/components/crp/CategoryMap.tsx index f33c4c3..64ea8d7 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"; @@ -29,8 +28,9 @@ const offsets = { }; const MapChart = (props) => { - const { year, setTooltipContent, category, allStates, stateCodes, statePerformance, colorScale } = 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) { @@ -123,10 +120,10 @@ const MapChart = (props) => { key={geo.rsmKey} geography={geo} onMouseEnter={() => { - setTooltipContent(hoverContent); + setReactTooltipContent(hoverContent); }} onMouseLeave={() => { - setTooltipContent(""); + setReactTooltipContent(""); }} fill={fillColour()} stroke="#FFFFFF" @@ -183,7 +180,7 @@ const MapChart = (props) => { MapChart.propTypes = { year: PropTypes.string, - setTooltipContent: PropTypes.func, + setReactTooltipContent: PropTypes.func, category: PropTypes.string }; @@ -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 ? ( @@ -287,7 +285,7 @@ const CategoryMap = ({ )}
- + {content}
diff --git a/src/components/csp/CSPTotalMap.tsx b/src/components/csp/CSPTotalMap.tsx index 2823a14..13a5249 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"; @@ -27,8 +27,8 @@ const offsets = { }; const MapChart = (props) => { - const { setTooltipContent, allStates, statePerformance, colorScale } = 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) { @@ -86,10 +83,10 @@ const MapChart = (props) => { key={geo.rsmKey} geography={geo} onMouseEnter={() => { - setTooltipContent(hoverContent); + setReactTooltipContent(hoverContent); }} onMouseLeave={() => { - setTooltipContent(""); + setReactTooltipContent(""); }} fill={fillColour()} stroke="#FFF" @@ -150,7 +147,7 @@ const MapChart = (props) => { }; MapChart.propTypes = { - setTooltipContent: PropTypes.func + setReactTooltipContent: PropTypes.func }; const CSPTotalMap = ({ statePerformance, allStates }: { statePerformance: any; allStates: any }): JSX.Element => { @@ -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 (
@@ -204,7 +202,7 @@ const CSPTotalMap = ({ statePerformance, allStates }: { statePerformance: any; a
- + {content}
diff --git a/src/components/csp/CategoryMap.tsx b/src/components/csp/CategoryMap.tsx index 85a8723..2e581ae 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"; @@ -28,8 +27,9 @@ const offsets = { }; const MapChart = (props) => { - const { setTooltipContent, category, allStates, statePerformance, colorScale } = 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) { @@ -105,10 +102,10 @@ const MapChart = (props) => { key={geo.rsmKey} geography={geo} onMouseEnter={() => { - setTooltipContent(hoverContent); + setReactTooltipContent(hoverContent); }} onMouseLeave={() => { - setTooltipContent(""); + setReactTooltipContent(""); }} fill={fillColour()} stroke="#FFFFFF" @@ -164,7 +161,7 @@ const MapChart = (props) => { }; MapChart.propTypes = { - setTooltipContent: PropTypes.func, + setReactTooltipContent: PropTypes.func, category: PropTypes.string }; @@ -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 ? ( @@ -272,14 +270,14 @@ const CategoryMap = ({ )}
- + {content}
diff --git a/src/components/eqip/CategoryMap.tsx b/src/components/eqip/CategoryMap.tsx index 276a7fd..19fe030 100644 --- a/src/components/eqip/CategoryMap.tsx +++ b/src/components/eqip/CategoryMap.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 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"; @@ -27,8 +27,8 @@ const offsets = { }; const MapChart = (props) => { - const { setTooltipContent, category, statePerformance, allStates, colorScale } = props; - + const { setReactTooltipContent, category, statePerformance, allStates, colorScale } = props; + const classes = useStyles(); return (
@@ -50,32 +50,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 = () => { @@ -90,10 +87,10 @@ const MapChart = (props) => { key={geo.rsmKey} geography={geo} onMouseEnter={() => { - setTooltipContent(hoverContent); + setReactTooltipContent(hoverContent); }} onMouseLeave={() => { - setTooltipContent(""); + setReactTooltipContent(""); }} fill={fillColour()} stroke="#FFF" @@ -151,7 +148,7 @@ const MapChart = (props) => { }; MapChart.propTypes = { - setTooltipContent: PropTypes.func, + setReactTooltipContent: PropTypes.func, category: PropTypes.string }; @@ -189,6 +186,7 @@ const CategoryMap = ({ const mapColor = ["#F0F9E8", "#BAE4BC", "#7BCCC4", "#43A2CA", "#0868AC"]; const customScale = legendConfig[category]; const colorScale = d3.scaleThreshold(customScale, mapColor); + const classes = useStyles(); return (
@@ -216,14 +214,14 @@ const CategoryMap = ({ )}
- + {content}
diff --git a/src/components/eqip/EQIPTotalMap.tsx b/src/components/eqip/EQIPTotalMap.tsx index 79d543a..ff3c0d7 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"; @@ -27,7 +26,8 @@ const offsets = { DC: [49, 21] }; -const MapChart = ({ setTooltipContent, maxValue, allStates, statePerformance, colorScale }) => { +const MapChart = ({ setReactTooltipContent, maxValue, allStates, statePerformance, colorScale }) => { + const classes = useStyles(); return (
@@ -42,44 +42,41 @@ const MapChart = ({ setTooltipContent, maxValue, allStates, statePerformance, co 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 ( { - setTooltipContent(hoverContent); + setReactTooltipContent(hoverContent); }} onMouseLeave={() => { - setTooltipContent(""); + setReactTooltipContent(""); }} fill={colorScale(totalPaymentInDollars || { value: 0 }) || "#D2D2D2"} stroke="#FFF" @@ -135,7 +132,7 @@ const MapChart = ({ setTooltipContent, maxValue, allStates, statePerformance, co }; MapChart.propTypes = { - setTooltipContent: PropTypes.func, + setReactTooltipContent: PropTypes.func, maxValue: PropTypes.number }; @@ -156,6 +153,7 @@ const EQIPTotalMap = ({ statePerformance, allStates }: { statePerformance: any; ) { years = Array(Array(Array(Object.values(statePerformance)[0])[0])[0])[0][0].years; } + const classes = useStyles(); return (
@@ -183,14 +181,14 @@ const EQIPTotalMap = ({ statePerformance, allStates }: { statePerformance: any; )}
- + {content}
diff --git a/src/components/rcpp/RCPPTotalMap.tsx b/src/components/rcpp/RCPPTotalMap.tsx index 3c3b8bc..e6b20a9 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"; @@ -28,7 +28,8 @@ const offsets = { }; const MapChart = (props) => { - const { setTooltipContent, allStates, statePerformance, year, stateCodes, colorScale } = props; + const { setReactTooltipContent, allStates, statePerformance, year, stateCodes, colorScale } = props; + const classes = useStyles(); return (
{allStates.length > 0 && statePerformance[year] !== undefined ? ( @@ -49,34 +50,31 @@ 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) { @@ -90,10 +88,10 @@ const MapChart = (props) => { key={geo.rsmKey} geography={geo} onMouseEnter={() => { - setTooltipContent(hoverContent); + setReactTooltipContent(hoverContent); }} onMouseLeave={() => { - setTooltipContent(""); + setReactTooltipContent(""); }} fill={fillColour()} stroke="#FFF" @@ -154,7 +152,7 @@ const MapChart = (props) => { }; MapChart.propTypes = { - setTooltipContent: PropTypes.func + setReactTooltipContent: PropTypes.func }; const RCPPTotalMap = ({ @@ -190,6 +188,7 @@ const RCPPTotalMap = ({ const mapColor = ["#F0F9E8", "#BAE4BC", "#7BCCC4", "#43A2CA", "#0868AC"]; const customScale = legendConfig[category]; const colorScale = d3.scaleThreshold(customScale, mapColor); + const classes = useStyles(); return (
@@ -219,7 +218,7 @@ const RCPPTotalMap = ({
- + {content}
diff --git a/src/components/shared/MapTooltip.tsx b/src/components/shared/MapTooltip.tsx new file mode 100644 index 0000000..b4e8926 --- /dev/null +++ b/src/components/shared/MapTooltip.tsx @@ -0,0 +1,96 @@ +import { makeStyles } from "@mui/styles"; + +// Shared Tooltip Styles for react-simplemap +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`, + 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.1em", + color: "black", + margin: 0 + }, + tooltip_table: { + backgroundColor: `${tooltipBkgColor} !important`, + width: "100%", + fontSize: "1em", + 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 e175dbf..ec77ea2 100644 --- a/src/components/title1/Title1Map.tsx +++ b/src/components/title1/Title1Map.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 DrawLegend from "../shared/DrawLegend"; import legendConfig from "../../utils/legendConfig.json"; @@ -27,7 +27,7 @@ const offsets = { }; const MapChart = ({ - setTooltipContent, + setReactTooltipContent, program, subprogram, maxValue, @@ -38,6 +38,7 @@ const MapChart = ({ allStates, colorScale }) => { + const classes = useStyles(); return (
{program !== "Total Commodities Programs" ? ( @@ -70,49 +71,52 @@ 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 ( { - setTooltipContent(hoverContent); + setReactTooltipContent(hoverContent); }} onMouseLeave={() => { - setTooltipContent(""); + setReactTooltipContent(""); }} fill={programPayment === 0 ? "#CCC" : colorScale(programPayment)} stroke="#FFF" @@ -185,49 +189,52 @@ const MapChart = ({ programPayment = state.totalPaymentInDollars; totalPaymentInPercentage = state.totalPaymentInPercentageNationwide; 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 ( { - setTooltipContent(hoverContent); + setReactTooltipContent(hoverContent); }} onMouseLeave={() => { - setTooltipContent(""); + setReactTooltipContent(""); }} fill={programPayment === 0 ? "#CCC" : colorScale(programPayment)} stroke="#FFF" @@ -288,7 +295,7 @@ const MapChart = ({ }; MapChart.propTypes = { - setTooltipContent: PropTypes.func, + setReactTooltipContent: PropTypes.func, subprogram: PropTypes.string, program: PropTypes.string, maxValue: PropTypes.number @@ -352,6 +359,7 @@ const Title1Map = ({ zeroPoints.push(state.state); } }); + const classes = useStyles(); return (
@@ -366,7 +374,7 @@ const Title1Map = ({ />
- + {content}
diff --git a/src/main.tsx b/src/main.tsx index 44c2938..6fea0a7 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"; @@ -12,9 +11,6 @@ import CropInsurancePage from "./pages/CropInsurancePage"; import ACEPPage from "./pages/ACEPPage"; import IssueWhitePaperPage from "./pages/IssueWhitePaperPage"; -const TRACKING_ID = "G-GFR8PTXMDM"; -ReactGA.initialize(TRACKING_ID); - const ScrollToTop = (props: any) => { const location = useLocation(); useEffect(() => { @@ -25,10 +21,7 @@ const ScrollToTop = (props: any) => { }; export default function Main(): JSX.Element { - useEffect(() => { - ReactGA.pageview(window.location.pathname + window.location.search); - }, []); - + // useGaTracker(); return ( diff --git a/src/pages/ACEPPage.tsx b/src/pages/ACEPPage.tsx index 739b0a2..31f8563 100644 --- a/src/pages/ACEPPage.tsx +++ b/src/pages/ACEPPage.tsx @@ -11,6 +11,7 @@ import { convertAllState, getJsonDataFromUrl } from "../utils/apiutil"; import NavSearchBar from "../components/shared/NavSearchBar"; import ACEPTable from "../components/acep/ACEPTable"; import AcepTreeMap from "../components/acep/AcepTreeMap"; + import "../styles/subpage.css"; export default function ACEPPage(): JSX.Element { diff --git a/src/pages/CRPPage.tsx b/src/pages/CRPPage.tsx index 57d1085..647809a 100644 --- a/src/pages/CRPPage.tsx +++ b/src/pages/CRPPage.tsx @@ -101,18 +101,19 @@ 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" }, - { name: "Total Continuous", value: continuousSingUpPaymentInDollars, color: "#869397" }, - { name: "Grassland", value: grasslandPyamentInDollars, color: "#9CBAB4" } + { name: "Total Continuous", value: continuousSingUpPaymentInDollars, color: "#9CBAB4" }, + { name: "Grassland", value: grasslandPyamentInDollars, color: "#CDDBD8" } ]); setSubChartData([ { name: "CREP Only", value: crepPaymentInDollars, color: "#2F7164" }, - { name: "Continuous Non-CREP", value: nocCrepPaymentInDollars, color: "#869397" }, - { name: "Farmable Wetland", value: wetlandPaymentInDollars, color: "#9CBAB4" } + { name: "Continuous Non-CREP", value: nocCrepPaymentInDollars, color: "#9CBAB4" }, + { name: "Farmable Wetland", value: wetlandPaymentInDollars, color: "#CDDBD8" } ]); } }; @@ -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 ? ( @@ -312,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 0740d71..acafbe9 100644 --- a/src/pages/CSPPage.tsx +++ b/src/pages/CSPPage.tsx @@ -132,20 +132,20 @@ export default function CSPPage(): JSX.Element { { name: "Existing activity payments", value: existingAPTotal, - color: "#869397" + color: "#749F97" }, - { name: "Vegetative", value: vegetativeTotal, color: "#749F97" }, + { name: "Vegetative", value: vegetativeTotal, color: "#9CBAB4" }, { name: "Forest management", value: forestManagementTotal, - color: "#9CBAB4" + color: "#B9CDC9" }, { name: "Soil remediation", value: soilRemediationTotal, - color: "#B9CDC9" + color: "#CDDBD8" }, - { name: "Structural", value: structuralTotal, color: "#CDDBD8" }, + { name: "Structural", value: structuralTotal, color: "#E2E8E7" }, { name: "Bundles", value: bundlesTotal, color: "#C3C5C4" }, { name: "Soil Testing", value: soilTestingTotal, color: "#CAD4C5" } ]); @@ -157,14 +157,14 @@ export default function CSPPage(): JSX.Element { { name: "Other: supplemental, adjustment & other", value: SAOTotal, - color: "#869397" + color: "#9CBAB4" }, { name: "Non-industrial private forestland", value: NIPFTotal, - color: "#9CBAB4" + color: "#B9CDC9" }, - { name: "Grassland", value: grasslandTotal, color: "#B9CDC9" } + { name: "Grassland", value: grasslandTotal, color: "#CDDBD8" } ]); setTotalChartData([ @@ -172,11 +172,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 ? ( @@ -479,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 e31df3b..6b3848a 100644 --- a/src/pages/CropInsurancePage.tsx +++ b/src/pages/CropInsurancePage.tsx @@ -19,6 +19,7 @@ import SideBar from "../components/cropinsurance/sideBar/ShortSideBar"; import { config } from "../app.config"; import { convertAllState, getJsonDataFromUrl } from "../utils/apiutil"; import "../styles/subpage.css"; + import "../styles/cropinsurance.css"; import CropInsuranceBubble from "../components/cropinsurance/chart/CropInsuranceBubble"; import CropInsuranceBars from "../components/cropinsurance/chart/CropInsuranceBars"; @@ -127,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 0) setZeroCategories(zeroCategory); + else setZeroCategories(["None"]); }; return ( - {allStates.length > 0 && statePerformance.Wisconsin !== undefined ? ( + {allStates.length > 0 && statePerformance.Wisconsin !== undefined && zeroCategories.length > 0 ? ( @@ -331,7 +332,7 @@ export default function EQIPPage(): JSX.Element { ) : null} - Performance by State + Performance by States diff --git a/src/pages/RCPPPage.tsx b/src/pages/RCPPPage.tsx index 1180536..e91e867 100644 --- a/src/pages/RCPPPage.tsx +++ b/src/pages/RCPPPage.tsx @@ -5,8 +5,6 @@ import NavBar from "../components/NavBar"; import Drawer from "../components/ProgramDrawer"; import DataTable from "../components/rcpp/RCPPTotalTable"; import RCPPTotalMap from "../components/rcpp/RCPPTotalMap"; -// import CategoryTable from "../components/rcpp/CategoryTable"; -// import CategoryMap from "../components/rcpp/CategoryMap"; import { config } from "../app.config"; import { convertAllState, getJsonDataFromUrl } from "../utils/apiutil"; import NavSearchBar from "../components/shared/NavSearchBar"; @@ -76,8 +74,8 @@ export default function RCPPPage(): JSX.Element { setTotalChartData([ { name: "Total Financial Assistance Payments", value: assistancePayments, color: "#2F7164" }, - { name: "Total Reimbursable Payments", value: reimbursePayments, color: "#869397" }, - { name: "Total Techinical Assistance Payments", value: techPayments, color: "#9CBAB4" } + { name: "Total Reimbursable Payments", value: reimbursePayments, color: "#9CBAB4" }, + { name: "Total Techinical Assistance Payments", value: techPayments, color: "#CDDBD8" } ]); setTotalBenefit( @@ -154,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 85f0c66..f450e4c 100644 --- a/src/pages/SNAPPage.tsx +++ b/src/pages/SNAPPage.tsx @@ -22,6 +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"; @@ -166,7 +167,7 @@ export default function SNAPPage(): JSX.Element { }} > - Comparison by States + Performance by States