Merge pull request #326 from policy-design-lab/release-1.1.0

Frontend Release 1.1.0
policy-design-lab · Oct 4, 2024 · 401c6c9 · 401c6c9
2 parents 62c4013 + e1bff6e
commit 401c6c9
Show file tree

Hide file tree

Showing 21 changed files with 497 additions and 293 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,14 @@ 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.1.0] - 2024-10-04
+
+### Changed
+- Updated the CRP page to use the latest data structure from the API endpoint [#320](https://github.com/policy-design-lab/pdl-frontend/issues/320) 
+- Updated the ACEP and RCPP page to use the latest data from the API endpoint [#322](https://github.com/policy-design-lab/pdl-frontend/issues/322) 
+- Updated the Crop Insurance page to use the latest data from the API endpoint [#324](https://github.com/policy-design-lab/pdl-frontend/issues/324) 
+- Replaced the treemap on the ACEP page with the table [#325](https://github.com/policy-design-lab/pdl-frontend/issues/325) 
+
 ## [1.0.5] - 2024-08-28
 
 ### Added
@@ -286,6 +294,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.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
 [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

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.5",
+  "version": "1.1.0",
   "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/ProgramDrawer.tsx b/src/components/ProgramDrawer.tsx
@@ -475,8 +475,8 @@ function CRPCheckboxList({ setCRPChecked, setShowPopUp, zeroCategory }) {
 
     const CRPList = [
         "Total CRP",
-        "Total General Sign-up",
-        "Total Continuous Sign-Up",
+        "General Sign-up",
+        "Continuous Sign-up",
         "CREP Only",
         "Continuous Non-CREP",
         "Farmable Wetland",
@@ -512,10 +512,10 @@ function CRPCheckboxList({ setCRPChecked, setShowPopUp, zeroCategory }) {
                         </ListItem>
                     );
                 }
-                if (category !== "CREP Only" && category !== "Continuous Non-CREP" && category !== "Farmable Wetland") {
+                if (category === "Total CRP") {
                     return (
                         <ListItem key={category} disablePadding>
-                            <ListItemButton role={undefined} onClick={handleToggle(value)} dense sx={{ pl: 4 }}>
+                            <ListItemButton role={undefined} onClick={handleToggle(value)} dense>
                                 <Radio
                                     edge="start"
                                     checked={checked === value}
@@ -537,6 +537,34 @@ function CRPCheckboxList({ setCRPChecked, setShowPopUp, zeroCategory }) {
                         </ListItem>
                     );
                 }
+                if (category === "General Sign-up" || category === "Continuous Sign-up" || category === "Grassland") {
+                    return (
+                        <Box key={category}>
+                            <ListItem key={category} disablePadding>
+                                <ListItemButton role={undefined} onClick={handleToggle(value)} dense sx={{ pl: 4 }}>
+                                    <Radio
+                                        edge="start"
+                                        checked={checked === value}
+                                        tabIndex={-1}
+                                        disableRipple
+                                        inputProps={{ "aria-labelledby": labelId }}
+                                        sx={{
+                                            "&.Mui-checked": {
+                                                color: "#2f7164"
+                                            }
+                                        }}
+                                    />
+                                    <ListItemText
+                                        id={labelId}
+                                        primary={category}
+                                        primaryTypographyProps={{ fontWeight: 700 }}
+                                        className={checked === value ? classes.selected : classes.regular}
+                                    />
+                                </ListItemButton>
+                            </ListItem>
+                        </Box>
+                    );
+                }
                 return (
                     <Box key={category}>
                         <ListItem key={category} disablePadding>

diff --git a/src/components/acep/ACEPTable.tsx b/src/components/acep/ACEPTable.tsx
@@ -31,13 +31,9 @@ function AcepProgramTable({
                 state = sValue.name;
             }
         });
-        let programData = null;
-        programData = stateData.programs.filter((p) => {
-            return p.programName.toString() === program;
-        });
         hashmap[state] = {};
         attributes.forEach((attribute) => {
-            const attributeData = programData[0][attribute];
+            const attributeData = stateData[attribute];
             hashmap[state][attribute] = attributeData;
         });
     });
@@ -48,7 +44,7 @@ function AcepProgramTable({
         Object.entries(hashmap[s]).forEach(([attr, value]) => {
             if (attr.includes("Percentage")) {
                 newRecord[attr] = `${value.toString()}%`;
-            } else if (attr === "totalAcres" || attr === "totalContracts") {
+            } else if (attr === "totalAreaInAcres" || attr === "totalContracts") {
                 newRecord[attr] = `${
                     value.toLocaleString(undefined, { minimumFractionDigits: 2 }).toString().split(".")[0]
                 }`;
@@ -65,16 +61,17 @@ function AcepProgramTable({
     attributes.forEach((attribute) => {
         let sortMethod = compareWithDollarSign;
         if (attribute.includes("Percentage")) sortMethod = compareWithPercentSign;
-        if (attribute.includes("totalContracts") || attribute.includes("totalAcres")) sortMethod = compareWithNumber;
+        if (attribute.includes("totalContracts") || attribute.includes("totalAreaInAcres"))
+            sortMethod = compareWithNumber;
         let attrName = attribute
             .replace(/([A-Z])/g, " $1")
             .trim()
             .split(" ")
             .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
             .join(" ")
             .toUpperCase();
-        if (attribute === "assistancePaymentInDollars") attrName = "Total Payment in Dollars".toUpperCase();
-        if (attribute === "assistancePaymentInPercentageNationwide")
+        if (attribute === "totalPaymentInDollars") attrName = "Total Payment in Dollars".toUpperCase();
+        if (attribute === "totalPaymentInPercentageNationwide")
             attrName = "Total Payment In Percentage Nationwide".toUpperCase();
         const json = {
             Header: attrName,
@@ -84,12 +81,12 @@ function AcepProgramTable({
         columnPrep.push(json);
     });
     const columns = React.useMemo(() => columnPrep, []);
-    const paymentsIndex = columns.findIndex((c) => c.accessor === "assistancePaymentInDollars");
-    const acresIndex = columns.findIndex((c) => c.accessor === "totalAcres");
+    const paymentsIndex = columns.findIndex((c) => c.accessor === "totalPaymentInDollars");
+    const acresIndex = columns.findIndex((c) => c.accessor === "totalAreaInAcres");
     const contractsIndex = columns.findIndex((c) => c.accessor === "totalContracts");
-    const paymentsPercentageIndex = columns.findIndex((c) => c.accessor === "assistancePaymentInPercentageNationwide");
-    const contractsPercentageIndex = columns.findIndex((c) => c.accessor === "contractsInPercentageNationwide");
-    const acresPercentageIndex = columns.findIndex((c) => c.accessor === "acresInPercentageNationwide");
+    const paymentsPercentageIndex = columns.findIndex((c) => c.accessor === "totalPaymentInPercentageNationwide");
+    const contractsPercentageIndex = columns.findIndex((c) => c.accessor === "totalContractsInPercentageNationwide");
+    const acresPercentageIndex = columns.findIndex((c) => c.accessor === "totalAreaInPercentageNationwide");
     const Styles = styled.div`
         padding: 0;
         margin: 0;

diff --git a/src/components/acep/ACEPTotalMap.tsx b/src/components/acep/ACEPTotalMap.tsx
@@ -43,9 +43,9 @@ const MapChart = (props) => {
                                     if (record === undefined || record.length === 0) {
                                         return null;
                                     }
-                                    const totalPaymentInDollars = record.programs[0].assistancePaymentInDollars;
-                                    const assistancePaymentInPercentageNationwide =
-                                        record.programs[0].assistancePaymentInPercentageNationwide;
+                                    const totalPaymentInDollars = record.totalPaymentInDollars;
+                                    const totalPaymentInPercentageNationwide =
+                                        record.totalPaymentInPercentageNationwide;
                                     const hoverContent = (
                                         <div className="map_tooltip">
                                             <div className={classes.tooltip_header}>
@@ -64,8 +64,8 @@ const MapChart = (props) => {
                                                             PCT. Nationwide:
                                                         </td>
                                                         <td className={classes.tooltip_regularcell_right}>
-                                                            {assistancePaymentInPercentageNationwide
-                                                                ? `${assistancePaymentInPercentageNationwide} %`
+                                                            {totalPaymentInPercentageNationwide
+                                                                ? `${totalPaymentInPercentageNationwide} %`
                                                                 : "0%"}
                                                         </td>
                                                     </tr>
@@ -171,9 +171,8 @@ const ACEPTotalMap = ({
     const quantizeArray: number[] = [];
     const zeroPoints = [];
     statePerformance[year].forEach((value) => {
-        const programRecord = value.programs;
-        const ACur = programRecord.find((s) => s.programName === program);
-        const key = "assistancePaymentInDollars";
+        const ACur = value;
+        const key = "totalPaymentInDollars";
         quantizeArray.push(ACur[key]);
         ACur[key] === 0 && zeroPoints.push(value.state);
         return null;