From 0bdb8ad49f64bf6859f0eac6b877e08a280706c9 Mon Sep 17 00:00:00 2001 From: "Wendy(Pengyin) Shan" Date: Mon, 28 Oct 2024 09:04:39 -0500 Subject: [PATCH 1/7] update landing page map to accomadate the new db data --- src/components/LandingPageTotalMap.tsx | 58 ++++++++++++-------------- 1 file changed, 26 insertions(+), 32 deletions(-) diff --git a/src/components/LandingPageTotalMap.tsx b/src/components/LandingPageTotalMap.tsx index c3a8893..e2e3de3 100644 --- a/src/components/LandingPageTotalMap.tsx +++ b/src/components/LandingPageTotalMap.tsx @@ -1,5 +1,5 @@ /* eslint-disable no-nested-ternary */ -import React, { useEffect, useMemo, useState } from "react"; +import React, { useCallback, useEffect, useMemo, useState } from "react"; import { geoCentroid } from "d3-geo"; import { ComposableMap, Geographies, Geography, Marker, Annotation } from "react-simple-maps"; import ReactTooltip from "react-tooltip"; @@ -8,9 +8,7 @@ import PropTypes from "prop-types"; import Box from "@mui/material/Box"; import Typography from "@mui/material/Typography"; import { FormControl, Select, Chip, MenuItem, Button, FormLabel } from "@mui/material"; -import { inherits } from "util"; import DrawLegend from "./shared/DrawLegend"; -import legendConfig from "../utils/legendConfig.json"; import { CurrencyFormat } from "./shared/ConvertionFormats"; import { useStyles, tooltipBkgColor } from "./shared/MapTooltip"; import "../styles/map.css"; @@ -257,40 +255,32 @@ const LandingPageTotalMap = ({ const uniquePrograms = [...new Set(summary.map((item) => item.Title))]; return ["All Programs", ...uniquePrograms]; }, [summary]); - const calculateTotal = (state) => { - if (selectedPrograms.includes("All Programs")) { - if (allPrograms.find((s) => s.State === state)) { - return allPrograms.find((s) => s.State === state)["18-22 All Programs Total"]; + const calculateTotal = useCallback( + (state) => { + if (selectedPrograms.includes("All Programs")) { + const stateProgram = allPrograms.find((s) => s.State === state); + return stateProgram ? stateProgram["18-22 All Programs Total"] : 0; } - return 0; - } - const newTotal = selectedPrograms.reduce((total, program) => { - const programTotal = summary - .filter((item) => item.State === state && item.Title === program) - .reduce((sum, item) => sum + item.Amount, 0); - return total + programTotal; - }, 0); - return newTotal; - }; - const calculateNationwideTotal = () => { + return selectedPrograms.reduce((total, program) => { + const programTotal = summary + .filter((item) => item.State === state && item.Title === program) + .reduce((sum, item) => sum + item.Amount, 0); + return total + programTotal; + }, 0); + }, + [selectedPrograms, allPrograms, summary] + ); + const calculateNationwideTotal = useCallback(() => { if (selectedPrograms.includes("All Programs")) { - // Sum all state totals for "All Programs" return allStates.reduce((total, state) => { - return total + (allPrograms.find((s) => s.State === state.id)?.["18-22 All Programs Total"] || 0); + const stateProgram = allPrograms.find((s) => s.State === state.id); + return total + (stateProgram?.["18-22 All Programs Total"] || 0); }, 0); } return allStates.reduce((total, state) => { - return ( - total + - selectedPrograms.reduce((stateTotal, program) => { - const programTotal = summary - .filter((item) => item.State === state.id && item.Title === program) - .reduce((sum, item) => sum + item.Amount, 0); - return stateTotal + programTotal; - }, 0) - ); + return total + calculateTotal(state.id); }, 0); - }; + }, [selectedPrograms, allStates, allPrograms, calculateTotal]); const colorScale = useMemo(() => { const allTotals = allStates.map((state) => calculateTotal(state.id)).sort((a, b) => a - b); const nonZeroData = allTotals.filter((value) => value > 0); @@ -304,7 +294,7 @@ const LandingPageTotalMap = ({ } const customScale = d3.scaleThreshold().domain(thresholds).range(mapColor); return customScale; - }, [allStates, selectedPrograms, summary]); + }, [[allStates, calculateTotal, mapColor]]); const handleProgramChange = (event) => { const { @@ -343,7 +333,11 @@ const LandingPageTotalMap = ({ }; }, []); useEffect(() => { - // console.log(selectedPrograms); + // force trigger the color scale to update + setSelectedPrograms((prev) => [...prev]); + }, []); + useEffect(() => { + // console.log("selectedPrograms", selectedPrograms); }, [selectedPrograms]); return (
From 7cfa47575bbefadf40d9a405825ac9f022416616 Mon Sep 17 00:00:00 2001 From: "Wendy(Pengyin) Shan" Date: Mon, 28 Oct 2024 10:29:06 -0500 Subject: [PATCH 2/7] update tab calculation to display new total number for landing page maps --- src/components/LandingPageMapTab.tsx | 39 ++++++++++++++-------------- 1 file changed, 20 insertions(+), 19 deletions(-) diff --git a/src/components/LandingPageMapTab.tsx b/src/components/LandingPageMapTab.tsx index 3f0a5bc..1f470e2 100644 --- a/src/components/LandingPageMapTab.tsx +++ b/src/components/LandingPageMapTab.tsx @@ -131,20 +131,21 @@ export default function LandingPageMapTab({ textTransform: "none" }); - const cur = allPrograms.find((s) => s.State === "Total"); - - let allProgramTotal = ""; - let titleITotal = ""; - let titleIITotal = ""; - let cropTotal = ""; - let snapTotal = ""; - if (cur !== undefined) { - allProgramTotal = cur["18-22 All Programs Total"]; - titleITotal = cur["Title I Total"]; - titleIITotal = cur["Title II Total"]; - cropTotal = cur["Crop Insurance Total"]; - snapTotal = cur["SNAP Total"]; - } + const totals = React.useMemo(() => { + return { + allProgramTotal: allPrograms.reduce( + (sum, state) => sum + Number(state["18-22 All Programs Total"] || 0), + 0 + ), + titleITotal: allPrograms.reduce((sum, state) => sum + Number(state["Title I Total"] || 0), 0), + titleIITotal: allPrograms.reduce((sum, state) => sum + Number(state["Title II Total"] || 0), 0), + cropTotal: allPrograms.reduce((sum, state) => sum + Number(state["Crop Insurance Total"] || 0), 0), + snapTotal: allPrograms.reduce((sum, state) => sum + Number(state["SNAP Total"] || 0), 0) + }; + }, [allPrograms]); + const formatBillions = (value: number) => { + return `$${(value / 1000000000.0).toFixed(2)}B`; + }; return ( @@ -175,7 +176,7 @@ export default function LandingPageMapTab({ All Programs
- ${Number(allProgramTotal / 1000000000.0).toFixed(2)}B + {formatBillions(totals.allProgramTotal)} } /> @@ -185,7 +186,7 @@ export default function LandingPageMapTab({ Title I: Commodities
- ${Number(titleITotal / 1000000000.0).toFixed(2)}B + {formatBillions(totals.titleITotal)} } /> @@ -195,7 +196,7 @@ export default function LandingPageMapTab({ Title II: Conservation
- ${Number(titleIITotal / 1000000000.0).toFixed(2)}B + {formatBillions(totals.titleIITotal)} } /> @@ -205,7 +206,7 @@ export default function LandingPageMapTab({ Crop Insurance
- ${Number(cropTotal / 1000000000.0).toFixed(2)}B + {formatBillions(totals.cropTotal)} } /> @@ -215,7 +216,7 @@ export default function LandingPageMapTab({ Supplemental Nutrition Assistance Program
- ${Number(snapTotal / 1000000000.0).toFixed(2)}B + {formatBillions(totals.snapTotal)} } /> From 75b42baf8efea290ca260aba2a0347a44e906b58 Mon Sep 17 00:00:00 2001 From: "Wendy(Pengyin) Shan" Date: Mon, 28 Oct 2024 11:00:21 -0500 Subject: [PATCH 3/7] optimize total calculation method for landing page map tab --- src/components/LandingPageMapTab.tsx | 21 ++++++++++----------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/src/components/LandingPageMapTab.tsx b/src/components/LandingPageMapTab.tsx index 1f470e2..d09e340 100644 --- a/src/components/LandingPageMapTab.tsx +++ b/src/components/LandingPageMapTab.tsx @@ -132,19 +132,18 @@ export default function LandingPageMapTab({ }); const totals = React.useMemo(() => { - return { - allProgramTotal: allPrograms.reduce( - (sum, state) => sum + Number(state["18-22 All Programs Total"] || 0), - 0 - ), - titleITotal: allPrograms.reduce((sum, state) => sum + Number(state["Title I Total"] || 0), 0), - titleIITotal: allPrograms.reduce((sum, state) => sum + Number(state["Title II Total"] || 0), 0), - cropTotal: allPrograms.reduce((sum, state) => sum + Number(state["Crop Insurance Total"] || 0), 0), - snapTotal: allPrograms.reduce((sum, state) => sum + Number(state["SNAP Total"] || 0), 0) + const sumField = (field) => allPrograms.reduce((sum, state) => sum + parseFloat(state[field] || 0), 0); + const res = { + allProgramTotal: sumField("18-22 All Programs Total"), + titleITotal: sumField("Title I Total"), + titleIITotal: sumField("Title II Total"), + cropTotal: sumField("Crop Insurance Total"), + snapTotal: sumField("SNAP Total") }; + return res; }, [allPrograms]); - const formatBillions = (value: number) => { - return `$${(value / 1000000000.0).toFixed(2)}B`; + const formatBillions = (v: number) => { + return `$${(v / 1000000000.0).toFixed(2)}B`; }; return ( From 422d1442f0a299595ec6d41db0221116c99034af Mon Sep 17 00:00:00 2001 From: "Wendy(Pengyin) Shan" Date: Mon, 28 Oct 2024 13:27:41 -0500 Subject: [PATCH 4/7] update changelog --- CHANGELOG.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2dfafa8..cc70c43 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,11 @@ 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] + +### Changed +- Updated the front-end code to fit the new landing page data from database [#334](https://github.com/policy-design-lab/pdl-frontend/issues/334) + ## [1.2.0] - 2024-10-24 ### Added From a873d0ade042807a379a10255b11c1da66f36136 Mon Sep 17 00:00:00 2001 From: "Wendy(Pengyin) Shan" Date: Tue, 29 Oct 2024 14:59:29 -0500 Subject: [PATCH 5/7] use Totle for landing page tab after API adjustment --- src/components/LandingPageMapTab.tsx | 38 ++++++++++++++-------------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/src/components/LandingPageMapTab.tsx b/src/components/LandingPageMapTab.tsx index d09e340..3f0a5bc 100644 --- a/src/components/LandingPageMapTab.tsx +++ b/src/components/LandingPageMapTab.tsx @@ -131,20 +131,20 @@ export default function LandingPageMapTab({ textTransform: "none" }); - const totals = React.useMemo(() => { - const sumField = (field) => allPrograms.reduce((sum, state) => sum + parseFloat(state[field] || 0), 0); - const res = { - allProgramTotal: sumField("18-22 All Programs Total"), - titleITotal: sumField("Title I Total"), - titleIITotal: sumField("Title II Total"), - cropTotal: sumField("Crop Insurance Total"), - snapTotal: sumField("SNAP Total") - }; - return res; - }, [allPrograms]); - const formatBillions = (v: number) => { - return `$${(v / 1000000000.0).toFixed(2)}B`; - }; + const cur = allPrograms.find((s) => s.State === "Total"); + + let allProgramTotal = ""; + let titleITotal = ""; + let titleIITotal = ""; + let cropTotal = ""; + let snapTotal = ""; + if (cur !== undefined) { + allProgramTotal = cur["18-22 All Programs Total"]; + titleITotal = cur["Title I Total"]; + titleIITotal = cur["Title II Total"]; + cropTotal = cur["Crop Insurance Total"]; + snapTotal = cur["SNAP Total"]; + } return ( @@ -175,7 +175,7 @@ export default function LandingPageMapTab({ All Programs
- {formatBillions(totals.allProgramTotal)} + ${Number(allProgramTotal / 1000000000.0).toFixed(2)}B } /> @@ -185,7 +185,7 @@ export default function LandingPageMapTab({ Title I: Commodities
- {formatBillions(totals.titleITotal)} + ${Number(titleITotal / 1000000000.0).toFixed(2)}B } /> @@ -195,7 +195,7 @@ export default function LandingPageMapTab({ Title II: Conservation
- {formatBillions(totals.titleIITotal)} + ${Number(titleIITotal / 1000000000.0).toFixed(2)}B } /> @@ -205,7 +205,7 @@ export default function LandingPageMapTab({ Crop Insurance
- {formatBillions(totals.cropTotal)} + ${Number(cropTotal / 1000000000.0).toFixed(2)}B } /> @@ -215,7 +215,7 @@ export default function LandingPageMapTab({ Supplemental Nutrition Assistance Program
- {formatBillions(totals.snapTotal)} + ${Number(snapTotal / 1000000000.0).toFixed(2)}B } /> From 195c59679b677b1b4b1aed948d4c94562e6e0970 Mon Sep 17 00:00:00 2001 From: "Wendy(Pengyin) Shan" Date: Wed, 30 Oct 2024 15:20:13 -0500 Subject: [PATCH 6/7] release-1.3.0 --- CHANGELOG.md | 3 ++- package-lock.json | 2 +- package.json | 2 +- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index cc70c43..0b2c4a7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,7 +4,7 @@ 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] +## [1.3.0] - 2024-10-31 ### Changed - Updated the front-end code to fit the new landing page data from database [#334](https://github.com/policy-design-lab/pdl-frontend/issues/334) @@ -304,6 +304,7 @@ 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) +[1.3.0]: https://github.com/policy-design-lab/pdl-frontend/compare/1.2.0...1.3.0 [1.2.0]: https://github.com/policy-design-lab/pdl-frontend/compare/1.1.0...1.2.0 [1.1.0]: https://github.com/policy-design-lab/pdl-frontend/compare/1.0.5...1.1.0 [1.0.5]: https://github.com/policy-design-lab/pdl-frontend/compare/1.0.4...1.0.5 diff --git a/package-lock.json b/package-lock.json index 10d62b9..6ab294c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "policy-design-lab", - "version": "1.2.0", + "version": "1.3.0", "lockfileVersion": 2, "requires": true, "packages": { diff --git a/package.json b/package.json index 881ca23..7f9923a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "policy-design-lab", - "version": "1.2.0", + "version": "1.3.0", "description": "the front end of policy design lab", "repository": "https://github.com/policy-design-lab/pdl-frontend", "main": "src/app.tsx", From b69f044a96e8302425fe2a429d70d77d9060945d Mon Sep 17 00:00:00 2001 From: "Wendy(Pengyin) Shan" Date: Mon, 4 Nov 2024 13:53:13 -0600 Subject: [PATCH 7/7] update release date --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0b2c4a7..8aba717 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,7 +4,7 @@ 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). -## [1.3.0] - 2024-10-31 +## [1.3.0] - 2024-11-04 ### Changed - Updated the front-end code to fit the new landing page data from database [#334](https://github.com/policy-design-lab/pdl-frontend/issues/334)