Merge pull request #318 from policy-design-lab/release-1.0.5

Release 1.0.5
policy-design-lab · Aug 28, 2024 · 62c4013 · 62c4013
2 parents e4ea316 + 3e5b927
commit 62c4013
Show file tree

Hide file tree

Showing 9 changed files with 65 additions and 25 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,12 @@ 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.0.5] - 2024-08-28
+
+### Added
+- Added the CSP session to the IRA page [#299](https://github.com/policy-design-lab/pdl-frontend/issues/299) 
+- Improved the map legend to cover more maps on the IRA page [#313](https://github.com/policy-design-lab/pdl-frontend/issues/313) 
+
 ## [1.0.4] - 2024-08-16
 
 ### Added
@@ -280,6 +286,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.0.5]: https://github.com/policy-design-lab/pdl-frontend/compare/1.0.4...1.0.5
 [1.0.4]: https://github.com/policy-design-lab/pdl-frontend/compare/1.0.3...1.0.4
 [1.0.3]: https://github.com/policy-design-lab/pdl-frontend/compare/1.0.2...1.0.3
 [1.0.2]: https://github.com/policy-design-lab/pdl-frontend/compare/1.0.1...1.0.2

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "policy-design-lab",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "the front end of policy design lab",
   "repository": "https://github.com/policy-design-lab/pdl-frontend",
   "main": "src/app.tsx",

diff --git a/src/components/ira/IRADollarMap.tsx b/src/components/ira/IRADollarMap.tsx
@@ -484,13 +484,14 @@ const IRADollarMap = ({
     // since IRA data is not predictable in legend config, separate the scale to five equal parts
     const sortedData = quantizeArray.sort((a, b) => a - b);
     const numIntervals = 5;
-    const intervalSize = Math.floor(sortedData.length / numIntervals);
-    const thresholds = [];
+    const nonZeroData = sortedData.filter((value) => value > 0);
+    const intervalSize = Math.ceil(nonZeroData.length / numIntervals);
+    const thresholds: number[] = [];
     for (let i = 1; i < numIntervals; i += 1) {
         const thresholdIndex = i * intervalSize - 1;
-        thresholds.push(sortedData[thresholdIndex]);
+        const adjustedIndex = Math.min(thresholdIndex, nonZeroData.length - 1);
+        thresholds.push(nonZeroData[adjustedIndex]);
     }
-    if (thresholds[0] === 0) thresholds.unshift(1000);
     const colorScale = d3.scaleThreshold().domain(thresholds).range(mapColor);
     // For IRA, only if all practices are zero, the state will be colored as grey
     let zeroPoints = [];

diff --git a/src/components/ira/IRAPredictedMap.tsx b/src/components/ira/IRAPredictedMap.tsx
@@ -321,13 +321,14 @@ const IRAPredictedMap = ({
     // since IRA data is not predictable in legend config, separate the scale to five equal parts
     const sortedData = quantizeArray.sort((a, b) => a - b);
     const numIntervals = 5;
-    const intervalSize = Math.floor(sortedData.length / numIntervals);
-    const thresholds = [];
+    const nonZeroData = sortedData.filter((value) => value > 0);
+    const intervalSize = Math.ceil(nonZeroData.length / numIntervals);
+    const thresholds: number[] = [];
     for (let i = 1; i < numIntervals; i += 1) {
         const thresholdIndex = i * intervalSize - 1;
-        thresholds.push(sortedData[thresholdIndex]);
+        const adjustedIndex = Math.min(thresholdIndex, nonZeroData.length - 1);
+        thresholds.push(nonZeroData[adjustedIndex]);
     }
-    if (thresholds[0] === 0) thresholds.unshift(1000);
     const colorScale = d3.scaleThreshold().domain(thresholds).range(mapColor);
     // For IRA, only if all practices are zero, the state will be colored as grey
     let zeroPoints = [];

diff --git a/src/components/ira/TabPanel.tsx b/src/components/ira/TabPanel.tsx
@@ -55,7 +55,7 @@ function TabPanel({
     const years = stateDistributionData ? Object.keys(stateDistributionData).map(Number) : [];
     const [updatedData, setUpdatedData] = useState(stateDistributionData);
     const [updatedPredictedData, setUpdatedPredictedData] = useState(predictedData);
-    const minYear = Math.min(...years).toString();
+    const minYear = 2023;
     const maxYear = Math.max(...years);
     const [isPlaying, setIsPlaying] = useState(false);
     const [intervalId, setIntervalId] = useState<ReturnType<typeof setInterval> | null>(null);

diff --git a/src/components/shared/ConvertionFormats.tsx b/src/components/shared/ConvertionFormats.tsx
@@ -36,10 +36,14 @@ export function ShortFormat(labelValue, position?: number, decimal?: number) {
     }
     if (decimalPart.length > 0) {
         const numberPart = result.match(/^(.*).$/)?.[1];
+        if (position === -1) {
+            return result;
+        }
         if (position === 0) {
-            result = result.replace(/^(.*)(.)$/, `${Math.floor(Number(numberPart))}$2`);
-        } else if (position !== undefined) {
-            result = result.replace(/^(.*)(.)$/, `${Math.ceil(Number(numberPart))}$2`);
+            return result.replace(/^(.*)(.)$/, `${Math.floor(Number(numberPart))}$2`);
+        }
+        if (position !== undefined) {
+            return result.replace(/^(.*)(.)$/, `${Math.ceil(Number(numberPart))}$2`);
         }
     }
     return result;

diff --git a/src/components/shared/DrawLegend.tsx b/src/components/shared/DrawLegend.tsx
@@ -112,10 +112,10 @@ export default function DrawLegend({
                                     return `${Math.round(cut_points[i] * 100)}%`;
                                 }
                                 if (i === 0 && !notDollar) {
-                                    const res = ShortFormat(Math.round(cut_points[i]), i);
+                                    const res = ShortFormat(cut_points[i].toFixed(2), -1, 2);
                                     return res.indexOf("-") < 0 ? `$${res}` : `-$${res.substring(1)}`;
                                 }
-                                return ShortFormat(Math.round(cut_points[i]), i, 1);
+                                return ShortFormat(cut_points[i].toFixed(2), -1, 2);
                             });
                     } else {
                         baseSVG
@@ -136,10 +136,10 @@ export default function DrawLegend({
                                     return `${Math.round(cut_points[i] * 100)}%`;
                                 }
                                 if (i === 0 && !notDollar) {
-                                    const res = ShortFormat(Math.round(cut_points[i]), i);
+                                    const res = ShortFormat(cut_points[i].toFixed(2), -1, 2);
                                     return res.indexOf("-") < 0 ? `$${res}` : `-$${res.substring(1)}`;
                                 }
-                                return ShortFormat(Math.round(cut_points[i]), i, 2);
+                                return ShortFormat(cut_points[i].toFixed(2), -1, 2);
                             });
                     }
                     if (emptyState.length !== 0) {

diff --git a/src/pages/IRAPage.tsx b/src/pages/IRAPage.tsx
@@ -1,4 +1,4 @@
-import { Box, Typography, Grid, Tabs, Button } from "@mui/material";
+import { Box, Typography, Grid, Tabs, Button, Divider } from "@mui/material";
 import * as React from "react";
 import { config } from "../app.config";
 import { convertAllState, getJsonDataFromUrl } from "../utils/apiutil";
@@ -21,6 +21,10 @@ export default function IRAPage(): JSX.Element {
     const [eqipPredictedData, setEqipPredictedData] = React.useState({});
     const [eqipSummaryData, setEqipSummaryData] = React.useState({});
     const [eqipPracticeNames, setEqipPracticeNames] = React.useState({});
+    const [cspStateDistributionData, setCspStateDistributionData] = React.useState({});
+    const [cspPredictedData, setCspPredictedData] = React.useState({});
+    const [cspSummaryData, setCspSummaryData] = React.useState({});
+    const [cspPracticeNames, setCspPracticeNames] = React.useState({});
     const [stateCodesData, setStateCodesData] = React.useState({});
     const [stateCodesArray, setStateCodesArray] = React.useState({});
     const [allStatesData, setAllStatesData] = React.useState([]);
@@ -37,14 +41,22 @@ export default function IRAPage(): JSX.Element {
                     eqipStateDistributionResponse,
                     eqipPredictedResponse,
                     eqipSummaryResponse,
-                    eqipPracticeNamesResponse
+                    eqipPracticeNamesResponse,
+                    cspStateDistributionResponse,
+                    cspPredictedResponse,
+                    cspSummaryResponse,
+                    cspPracticeNamesResponse
                 ] = await Promise.all([
                     getJsonDataFromUrl(`${config.apiUrl}/states`),
                     getJsonDataFromUrl(`${config.apiUrl}/statecodes`),
                     getJsonDataFromUrl(`${config.apiUrl}/titles/title-ii/programs/eqip-ira/state-distribution`),
                     getJsonDataFromUrl(`${config.apiUrl}/titles/title-ii/programs/eqip-ira/predicted`),
                     getJsonDataFromUrl(`${config.apiUrl}/titles/title-ii/programs/eqip-ira/summary`),
-                    getJsonDataFromUrl(`${config.apiUrl}/titles/title-ii/programs/eqip-ira/practice-names`)
+                    getJsonDataFromUrl(`${config.apiUrl}/titles/title-ii/programs/eqip-ira/practice-names`),
+                    getJsonDataFromUrl(`${config.apiUrl}/titles/title-ii/programs/csp-ira/state-distribution`),
+                    getJsonDataFromUrl(`${config.apiUrl}/titles/title-ii/programs/csp-ira/predicted`),
+                    getJsonDataFromUrl(`${config.apiUrl}/titles/title-ii/programs/csp-ira/summary`),
+                    getJsonDataFromUrl(`${config.apiUrl}/titles/title-ii/programs/csp-ira/practice-names`)
                 ]);
                 setAllStatesData(allStatesResponse);
                 setStateCodesArray(stateCodesResponse);
@@ -53,6 +65,10 @@ export default function IRAPage(): JSX.Element {
                 setEqipPredictedData(eqipPredictedResponse);
                 setEqipSummaryData(eqipSummaryResponse);
                 setEqipPracticeNames(eqipPracticeNamesResponse);
+                setCspStateDistributionData(cspStateDistributionResponse);
+                setCspPredictedData(cspPredictedResponse);
+                setCspSummaryData(cspSummaryResponse);
+                setCspPracticeNames(cspPracticeNamesResponse);
                 setIsDataReady(true);
             } catch (error) {
                 console.error("Error fetching data:", error);
@@ -167,9 +183,9 @@ export default function IRAPage(): JSX.Element {
                                     sx={{ mb: 1 }}
                                 >
                                     <CustomTab label={<Box>EQIP</Box>} customSx={tabStyle} selectedSX={selectedStyle} />
+                                    <Divider sx={{ mx: 1 }} orientation="vertical" variant="middle" flexItem />
+                                    <CustomTab label={<Box>CSP</Box>} customSx={tabStyle} selectedSX={selectedStyle} />
                                     {/* <Divider sx={{ mx: 1 }} orientation="vertical" variant="middle" flexItem />
-                    <CustomTab label={<Box>CSP</Box>} customSx={tabStyle} selectedSX={selectedStyle} />
-                    <Divider sx={{ mx: 1 }} orientation="vertical" variant="middle" flexItem />
                     <CustomTab label={<Box>RCPP</Box>} customSx={tabStyle} selectedSX={selectedStyle} />
                     <Divider sx={{ mx: 1 }} orientation="vertical" variant="middle" flexItem />
                     <CustomTab label={<Box>ACEP</Box>} customSx={tabStyle} selectedSX={selectedStyle} /> */}
@@ -191,8 +207,19 @@ export default function IRAPage(): JSX.Element {
                                         allStates={allStatesData}
                                         summaryData={eqipSummaryData}
                                     />
-                                    {/* <TabPanel v={value} index={2} title="CSP" stateDistributionData={{}} />
-                    <TabPanel v={value} index={4} title="RCPP" stateDistributionData={{}} />
+                                    <TabPanel
+                                        v={value}
+                                        index={2}
+                                        title="CSP"
+                                        stateDistributionData={cspStateDistributionData}
+                                        predictedData={cspPredictedData}
+                                        predictedYear={Object.keys(cspPredictedData)[0]}
+                                        stateCodes={stateCodesData}
+                                        allStates={allStatesData}
+                                        practiceNames={cspPracticeNames}
+                                        summaryData={cspSummaryData}
+                                    />
+                                    {/* <TabPanel v={value} index={4} title="RCPP" stateDistributionData={{}} />
                     <TabPanel v={value} index={6} title="ACEP" stateDistributionData={{}} /> */}
                                 </span>
                             ) : (