Merge pull request #258 from policy-design-lab/release-0.16.0

Release 0.16.0
policy-design-lab · Feb 23, 2024 · 21d604d · 21d604d
2 parents 7a970b5 + 4a9a4c0
commit 21d604d
Show file tree

Hide file tree

Showing 40 changed files with 1,219 additions and 438 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,22 @@ 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.16.0] - 2024-02-22
+
+### Added
+- Title I page added the total subsection based on the summary data for landing page [#239](https://github.com/policy-design-lab/pdl-frontend/issues/239)
+- Title II page added the total subsection based on the summary data for landing page [#253](https://github.com/policy-design-lab/pdl-frontend/issues/253)
+- Added sub title in nav bar for the Title I and Crop Insurance Page [#255](https://github.com/policy-design-lab/pdl-frontend/issues/255)
+
+### Changed
+- Updated Title I, Title II and Crop Insurance pages to use new API endpoints [#249](https://github.com/policy-design-lab/pdl-frontend/issues/249) 
+- Updated the SNAP page to use new API endpoints [#257](https://github.com/policy-design-lab/pdl-frontend/issues/257) 
+- Revised the EQIP and CSP code to follow the same pattern as new pages, allowing `map` endpoint to retire [#249](https://github.com/policy-design-lab/pdl-frontend/issues/249) 
+- Removed the 'Other Conservation' section out of Title II menu [#256](https://github.com/policy-design-lab/pdl-frontend/issues/256)
+
+### Fixed
+- Removed the `$` in total policies earning premium section at the Crop Insurance page [#252](https://github.com/policy-design-lab/pdl-frontend/issues/252) 
+
 ## [0.15.0] - 2024-02-09
 
 ### Added
@@ -201,6 +217,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)
 
+[0.16.0]: https://github.com/policy-design-lab/pdl-frontend/compare/0.15.0...0.16.0
 [0.15.0]: https://github.com/policy-design-lab/pdl-frontend/compare/0.14.0...0.15.0
 [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

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": "0.15.0",
+  "version": "0.16.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/LandingDisplay.tsx b/src/components/LandingDisplay.tsx
@@ -59,7 +59,7 @@ export default function LandingDisplay({ programTitle }: { programTitle: string
             boldText = "What is Title II, conservation programs?";
             bodyText =
                 "Title II of the law authorizes the Farm Bill’s conservation programs. The programs in this title programs help agricultural producers and landowners adopt conservation activities on private farm and forest lands. In general, conservation activities are intended to protect and improve water quality and quantity, soil health, wildlife habitat, and air quality. The map shows the total benefit of the conservation program by state from 2018-2022.";
-            route = "/eqip";
+            route = "/title2";
             buttonText = "Explore Maps of Conservation Programs";
             button = (
                 <Button

diff --git a/src/components/LandingPageMap.tsx b/src/components/LandingPageMap.tsx
@@ -154,6 +154,7 @@ const MapChart = (props) => {
                     emptyState={zeroPoints}
                     initRatioLarge={0.75}
                     initRatioSmall={0.8}
+                    screenWidth={screenWidth}
                 />
             </Box>
             <ComposableMap projection="geoAlbersUsa">
@@ -428,35 +429,28 @@ const LandingPageMap = ({
     allStates,
     stateCodes,
     allPrograms,
-    summary
-}: {
-    programTitle: string;
-    allStates: any;
-    stateCodes: any;
-    allPrograms: any;
-    summary: any;
+    summary,
+    containerWidth = window.innerWidth
 }): JSX.Element => {
     const classes = useStyles();
     const [content, setContent] = useState("");
-    const [screenWidth, setScreenWidth] = useState(window.innerWidth);
+    const [screenWidth, setScreenWidth] = useState(containerWidth);
     return (
         <div>
-            <div>
-                <MapChart
-                    setReactTooltipContent={setContent}
-                    title={programTitle}
-                    stateCodes={stateCodes}
-                    allPrograms={allPrograms}
-                    allStates={allStates}
-                    summary={summary}
-                    screenWidth={screenWidth}
-                />
-                <div className="tooltip-container">
-                    {/* Note that react-tooltip v4 has to use inline background color to style the tooltip arrow */}
-                    <ReactTooltip className={`${classes.customized_tooltip} tooltip`} backgroundColor={tooltipBkgColor}>
-                        {content}
-                    </ReactTooltip>
-                </div>
+            <MapChart
+                setReactTooltipContent={setContent}
+                title={programTitle}
+                stateCodes={stateCodes}
+                allPrograms={allPrograms}
+                allStates={allStates}
+                summary={summary}
+                screenWidth={screenWidth}
+            />
+            <div className="tooltip-container">
+                {/* Note that react-tooltip v4 has to use inline background color to style the tooltip arrow */}
+                <ReactTooltip className={`${classes.customized_tooltip} tooltip`} backgroundColor={tooltipBkgColor}>
+                    {content}
+                </ReactTooltip>
             </div>
         </div>
     );

diff --git a/src/components/ProgramDrawer.tsx b/src/components/ProgramDrawer.tsx
@@ -579,11 +579,30 @@ export default function ProgramDrawer({
 }: ProgramDrawerProps): JSX.Element {
     const location = useLocation();
     const navigate = useNavigate();
+    const classes = useStyles();
     const [zeroCategory, setZeroCategory] = React.useState(zeroCategories);
+    // Total Menu
+    const [totalOpen, setTotalOpen] = React.useState(false);
+    const totalRef = React.useRef<HTMLLIElement>(null);
+    const handleTotalClick = () => {
+        if (location.pathname !== "/title2") {
+            navigate("/title2");
+            window.location.reload(false);
+        } else {
+            setTotalOpen((prevTotalOpen) => !prevTotalOpen);
+        }
+    };
+    const prevTotalOpen = React.useRef(totalOpen);
+    React.useEffect(() => {
+        if (prevTotalOpen.current && !totalOpen) {
+            totalRef.current.focus();
+        }
+
+        prevTotalOpen.current = totalOpen;
+    }, [totalOpen]);
+    // EQIP Menu
     const [eqipOpen, setEqipOpen] = React.useState(false);
     const eqipRef = React.useRef<HTMLLIElement>(null);
-
-    const classes = useStyles();
     const handleEqipClick = () => {
         if (location.pathname !== "/eqip") {
             navigate("/eqip");
@@ -600,7 +619,7 @@ export default function ProgramDrawer({
 
         prevEqipOpen.current = eqipOpen;
     }, [eqipOpen]);
-
+    // CSP
     const [cspOpen, setCspOpen] = React.useState(false);
     const cspRef = React.useRef<HTMLLIElement>(null);
     const handleCspClick = () => {
@@ -689,12 +708,25 @@ export default function ProgramDrawer({
             open
         >
             <Box id="filler" sx={{ minHeight: 100 }} />
-            <MenuItem
-                style={{ whiteSpace: "normal" }}
-                className={`${classes.bk_off} ${classes.disabled_top} ${classes.disabled}  ${classes.no_statue}`}
-            >
-                <Typography>Total Conservation Programs Benefits</Typography>
-            </MenuItem>
+            <Box>
+                <MenuItem
+                    ref={totalRef}
+                    style={{ whiteSpace: "normal" }}
+                    className={location.pathname === "/title2" ? classes.bk_on : classes.bk_off}
+                    onClick={handleTotalClick}
+                >
+                    <Box
+                        sx={{ display: "flex", flexDirection: "horizontal", alignItems: "center" }}
+                        className={
+                            location.pathname === "/title2"
+                                ? `${classes.selected} ${classes.selected_top}  ${classes.no_statue}`
+                                : `${classes.regular} ${classes.regular_top}  ${classes.no_statue}`
+                        }
+                    >
+                        <Typography>Total Conservation Programs Benefits</Typography>
+                    </Box>
+                </MenuItem>
+            </Box>
             <Box>
                 <MenuItem
                     ref={eqipRef}
@@ -880,12 +912,6 @@ export default function ProgramDrawer({
                     </Box>
                 </MenuItem>
             </Box>
-            <MenuItem
-                className={`${classes.bk_off} ${classes.disabled_top} ${classes.disabled} ${classes.no_statue}`}
-                style={{ whiteSpace: "normal" }}
-            >
-                <Typography>Other Conservation</Typography>
-            </MenuItem>
         </Drawer>
     );
 }
diff --git a/src/components/acep/ACEPTable.tsx b/src/components/acep/ACEPTable.tsx
@@ -25,7 +25,12 @@ function AcepProgramTable({
     const hashmap = {};
     // eslint-disable-next-line no-restricted-syntax
     AcepData[year].forEach((stateData) => {
-        const state = stateData.state;
+        let state;
+        stateCodes.forEach((sValue) => {
+            if (sValue.code.toUpperCase() === stateData.state.toUpperCase()) {
+                state = sValue.name;
+            }
+        });
         let programData = null;
         programData = stateData.programs.filter((p) => {
             return p.programName.toString() === program;
@@ -38,9 +43,7 @@ function AcepProgramTable({
     });
     Object.keys(hashmap).forEach((s) => {
         const newRecord = {
-            state: Object.values(stateCodes).filter((stateCode) => {
-                return stateCode === s;
-            })[0]
+            state: s
         };
         Object.entries(hashmap[s]).forEach(([attr, value]) => {
             if (attr.includes("Percentage")) {

diff --git a/src/components/acep/ACEPTotalMap.tsx b/src/components/acep/ACEPTotalMap.tsx
@@ -38,7 +38,7 @@ const MapChart = (props) => {
                             <>
                                 {geographies.map((geo) => {
                                     const record = statePerformance[year].filter(
-                                        (v) => v.state === geo.properties.name
+                                        (v) => stateCodes[v.state] === geo.properties.name
                                     )[0];
                                     if (record === undefined || record.length === 0) {
                                         return null;
@@ -179,7 +179,6 @@ const ACEPTotalMap = ({
         return null;
     });
     const category = "Total ACEP";
-    const years = "2018-2022";
     const maxValue = Math.max(...quantizeArray);
     const mapColor = ["#F0F9E8", "#BAE4BC", "#7BCCC4", "#43A2CA", "#0868AC"];
     const customScale = legendConfig[category];
@@ -191,7 +190,7 @@ const ACEPTotalMap = ({
                 {maxValue !== 0 ? (
                     <DrawLegend
                         colorScale={colorScale}
-                        title={titleElement(category, years)}
+                        title={titleElement(category, year)}
                         programData={quantizeArray}
                         prepColor={mapColor}
                         initRatioLarge={0.6}
@@ -202,10 +201,10 @@ const ACEPTotalMap = ({
                     />
                 ) : (
                     <div>
-                        {titleElement(category, years)}
+                        {titleElement(category, year)}
                         <Box display="flex" justifyContent="center">
                             <Typography sx={{ color: "#CCC", fontWeight: 700 }}>
-                                {category} data in {years} is unavailable for all states.
+                                {category} data in {year} is unavailable for all states.
                             </Typography>
                         </Box>
                     </div>

diff --git a/src/components/acep/TreeMapSquares.tsx b/src/components/acep/TreeMapSquares.tsx
@@ -122,13 +122,7 @@ export default function TreeMapSquares({
                                 .style("z-index", 100000);
                             tipGroup
                                 .append("text")
-                                .text(
-                                    `${
-                                        Object.values(stateCodes).filter(
-                                            (stateCode) => stateCode === stateData.state
-                                        )[0]
-                                    }`
-                                )
+                                .text(`${stateCodes.find((s) => s.code === stateData.state).name}`)
                                 .attr("x", xPosition + baseSize)
                                 .attr("y", mousePos[1] + stepSize * 1)
                                 .style("font-size", "0.9em")

diff --git a/src/components/cropinsurance/CropInsuranceMap.tsx b/src/components/cropinsurance/CropInsuranceMap.tsx
@@ -87,7 +87,7 @@ const MapChart = ({
                                                     {attr === 2 ? (
                                                         <tr>
                                                             <td className={classes.tooltip_topcell_left}>
-                                                                ${ShortFormat(programPayment)}
+                                                                {ShortFormat(programPayment)}
                                                             </td>
                                                             <td className={classes.tooltip_topcell_right}>&nbsp;</td>
                                                         </tr>

diff --git a/src/components/cropinsurance/CropInsuranceTable.tsx b/src/components/cropinsurance/CropInsuranceTable.tsx
@@ -43,7 +43,7 @@ function CropInsuranceProgramTable({
         Object.entries(hashmap[s]).forEach(([attr, value]) => {
             if (attr === "lossRatio") {
                 newRecord[attr] = `${ShortFormat((Number(value) * 100).toString(), undefined, 1)}%`;
-            } else if (attr === "averageInsuredAreaInAcres") {
+            } else if (attr === "averageInsuredAreaInAcres" || attr === "totalPoliciesEarningPremium") {
                 newRecord[attr] = `${
                     value.toLocaleString(undefined, { minimumFractionDigits: 2 }).toString().split(".")[0]
                 }`;

diff --git a/src/components/crp/CRPTotalMap.tsx b/src/components/crp/CRPTotalMap.tsx
@@ -44,9 +44,9 @@ const MapChart = (props) => {
                                     if (record === undefined || record.length === 0) {
                                         return null;
                                     }
-                                    const totalPaymentInDollars = record.programs[0].paymentInDollars;
+                                    const totalPaymentInDollars = record.programs[0].totalPaymentInDollars;
                                     const totalPaymentInPercentageNationwide =
-                                        record.programs[0].paymentInPercentageNationwide;
+                                        record.programs[0].totalPaymentInPercentageNationwide;
                                     const hoverContent = (
                                         <div className="map_tooltip">
                                             <div className={classes.tooltip_header}>

diff --git a/src/components/crp/CRPTotalTable.tsx b/src/components/crp/CRPTotalTable.tsx
@@ -4,6 +4,7 @@ import { useTable, useSortBy } from "react-table";
 import SwapVertIcon from "@mui/icons-material/SwapVert";
 import Box from "@mui/material/Box";
 import "../../styles/table.css";
+import { compareWithDollarSign, compareWithNumber, compareWithPercentSign } from "../shared/TableCompareFunctions";
 
 const Styles = styled.div`
     padding: 1rem;
@@ -136,30 +137,6 @@ function App({
     year: any;
     stateCodes: any;
 }): JSX.Element {
-    function compareWithDollarSign(rowA, rowB, id, desc) {
-        const a = Number.parseFloat(rowA.values[id].substring(1).replaceAll(",", ""));
-        const b = Number.parseFloat(rowB.values[id].substring(1).replaceAll(",", ""));
-        if (a > b) return 1;
-        if (a < b) return -1;
-        return 0;
-    }
-
-    function compareWithPercentSign(rowA, rowB, id, desc) {
-        const a = Number.parseFloat(rowA.values[id].replaceAll("%", ""));
-        const b = Number.parseFloat(rowB.values[id].replaceAll("%", ""));
-        if (a > b) return 1;
-        if (a < b) return -1;
-        return 0;
-    }
-
-    function compareNumber(rowA, rowB, id, desc) {
-        const a = Number.parseInt(rowA.values[id].replaceAll(",", ""), 10);
-        const b = Number.parseInt(rowB.values[id].replaceAll(",", ""), 10);
-        if (a > b) return 1;
-        if (a < b) return -1;
-        return 0;
-    }
-
     const crpTableData: any[] = [];
 
     // eslint-disable-next-line no-restricted-syntax
@@ -174,10 +151,10 @@ function App({
         const newRecord = () => {
             return {
                 state: stateName,
-                crpBenefit: `$${totalCrp.paymentInDollars
+                crpBenefit: `$${totalCrp.totalPaymentInDollars
                     .toLocaleString(undefined, { minimumFractionDigits: 2 })
                     .toString()}`,
-                percentage: `${totalCrp.paymentInPercentageNationwide.toString()}%`,
+                percentage: `${totalCrp.totalPaymentInPercentageNationwide.toString()}%`,
                 noContract: `${totalCrp.totalContracts
                     .toLocaleString(undefined, { minimumFractionDigits: 0 })
                     .toString()}`,
@@ -251,7 +228,7 @@ function App({
                     </Box>
                 ),
                 accessor: "noContract",
-                sortType: compareNumber,
+                sortType: compareWithNumber,
                 Cell: function styleCells(row) {
                     return <div style={{ textAlign: "right" }}>{row.value}</div>;
                 }
@@ -271,7 +248,7 @@ function App({
                     </Box>
                 ),
                 accessor: "noFarm",
-                sortType: compareNumber,
+                sortType: compareWithNumber,
                 Cell: function styleCells(row) {
                     return <div style={{ textAlign: "right" }}>{row.value}</div>;
                 }
@@ -291,7 +268,7 @@ function App({
                     </Box>
                 ),
                 accessor: "totAcre",
-                sortType: compareNumber,
+                sortType: compareWithNumber,
                 Cell: function styleCells(row) {
                     return <div style={{ textAlign: "right" }}>{row.value}</div>;
                 }