Merge pull request #175 from policy-design-lab/release-0.7.0

Release 0.7.0
policy-design-lab · Aug 23, 2023 · b57df11 · b57df11
2 parents 5f5b6bb + f5f85f5
commit b57df11
Show file tree

Hide file tree

Showing 19 changed files with 975 additions and 779 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,17 @@ 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.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)
+- Updated the year related labels on landing page and title 1 page to reflect changes of new title 1 API [#168](https://github.com/policy-design-lab/pdl-frontend/issues/168)
+- Updated the landing page map tab to include a label to explain that the top-line numbers are not finalized [#171](https://github.com/policy-design-lab/pdl-frontend/issues/171)
+- Added '(Numbers have not yet been finalized)' label on landing page top line tab and updated several details on Title 1 page [#172](https://github.com/policy-design-lab/pdl-frontend/issues/172)
+
 ## [0.6.0] - 2023-07-18
 
 ### Added
@@ -111,6 +122,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.7.0]: https://github.com/policy-design-lab/pdl-frontend/compare/0.5.1...0.7.0
 [0.6.0]: https://github.com/policy-design-lab/pdl-frontend/compare/0.5.1...0.6.0
 [0.5.1]: https://github.com/policy-design-lab/pdl-frontend/compare/0.5.0...0.5.1
 [0.5.0]: https://github.com/policy-design-lab/pdl-frontend/compare/0.4.0...0.5.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.6.0",
+  "version": "0.7.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/LandingPageMap.tsx b/src/components/LandingPageMap.tsx
diff --git a/src/components/LandingPageMapTab.tsx b/src/components/LandingPageMapTab.tsx
@@ -1,13 +1,11 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 import Tabs from "@mui/material/Tabs";
 import Tab from "@mui/material/Tab";
 import Box from "@mui/material/Box";
-import { CardMedia, createTheme, styled, Typography, ThemeProvider } from "@mui/material";
+import { createTheme, styled, Typography, ThemeProvider } from "@mui/material";
 import Divider from "@mui/material/Divider";
 import LandingPageMap from "./LandingPageMap";
 import LandingDisplay from "./LandingDisplay";
-import { config } from "../app.config";
-import { getJsonDataFromUrl } from "../utils/apiutil";
 
 const theme = createTheme({
     palette: {
@@ -17,39 +15,60 @@ const theme = createTheme({
     }
 });
 
-interface TabPanelProps {
-    index: number;
-    value: number;
+function TabPanel({
+    value,
+    index,
+    title,
+    allStates,
+    stateCodes,
+    allPrograms,
+    summary
+}: {
+    value: any;
+    index: any;
     title: string;
-}
-
-function TabPanel(props: TabPanelProps) {
-    const { value, index, title, ...other } = props;
+    allStates: any;
+    stateCodes: any;
+    allPrograms: any;
+    summary: any;
+}) {
     return (
         <div>
             {window.innerWidth > 1679 ? (
-                <Box role="tabpanel" hidden={value !== index} {...other}>
+                <Box role="tabpanel" hidden={value !== index}>
                     {value === index && (
                         <Box
                             sx={{
                                 width: "70%",
                                 mx: "auto"
                             }}
                         >
-                            <LandingPageMap programTitle={title} />
+                            <LandingPageMap
+                                programTitle={title}
+                                allStates={allStates}
+                                stateCodes={stateCodes}
+                                allPrograms={allPrograms}
+                                summary={summary}
+                            />
                         </Box>
                     )}
                 </Box>
             ) : (
-                <Box role="tabpanel" hidden={value !== index} {...other}>
+                <Box role="tabpanel" hidden={value !== index}>
                     {value === index && (
                         <Box
                             sx={{
                                 width: "80%",
                                 mx: "auto"
                             }}
                         >
-                            <LandingPageMap programTitle={title} />
+                            <LandingPageMap
+                                programTitle={title}
+                                allStates={allStates}
+                                stateCodes={stateCodes}
+                                allPrograms={allPrograms}
+                                summary={summary}
+                            />
                         </Box>
                     )}
                 </Box>
@@ -64,7 +83,17 @@ function TabPanel(props: TabPanelProps) {
     );
 }
 
-export default function LandingPageMapTab(): JSX.Element {
+export default function LandingPageMapTab({
+    allStates,
+    stateCodes,
+    allPrograms,
+    summary
+}: {
+    allStates: any;
+    stateCodes: any;
+    allPrograms: any;
+    summary: any;
+}): JSX.Element {
     const [value, setValue] = React.useState(2);
 
     const handleChange = (_event: React.SyntheticEvent, newValue: number) => {
@@ -79,17 +108,8 @@ export default function LandingPageMapTab(): JSX.Element {
         textTransform: "none"
     });
 
-    const [allProgramsData, setAllProgramsData] = useState([]);
-
-    useEffect(() => {
-        const allprograms_url = `${config.apiUrl}/allprograms`;
-        getJsonDataFromUrl(allprograms_url).then((response) => {
-            setAllProgramsData(response);
-        });
-    }, []);
+    const cur = allPrograms.find((s) => s.State === "Total");
 
-    // let allPrograms = {allProgramsData};
-    const cur = allProgramsData.find((s) => s.State === "Total");
     let allProgramTotal = "";
     let titleITotal = "";
     let titleIITotal = "";
@@ -116,11 +136,12 @@ export default function LandingPageMapTab(): JSX.Element {
                         className="tab"
                     >
                         <Box sx={{ mt: 1.5, pb: 0, mr: 8 }}>
-                            <Typography variant="h4" className="smallCaps">
+                            <Typography variant="h4" className="smallCaps" style={{ textAlign: "center" }}>
                                 <strong>Farm Bill Data</strong>
                             </Typography>
                             <Typography variant="h6" className="allSmallCaps" sx={{ mt: 1 }}>
-                                <strong>Map visualization</strong>
+                                <strong>Map visualization</strong>{" "}
+                                <b style={{ color: "lightgrey" }}>(Numbers have not yet been finalized)</b>
                             </Typography>
                         </Box>
                         <Divider sx={{ mx: 1 }} orientation="vertical" variant="middle" flexItem />
@@ -176,12 +197,60 @@ export default function LandingPageMapTab(): JSX.Element {
                     </Tabs>
                 </ThemeProvider>
             </Box>
-            <TabPanel value={value} index={0} title="All Programs" />
-            <TabPanel value={value} index={2} title="All Programs" />
-            <TabPanel value={value} index={4} title="Title I: Commodities" />
-            <TabPanel value={value} index={6} title="Title II: Conservation" />
-            <TabPanel value={value} index={8} title="Crop Insurance" />
-            <TabPanel value={value} index={10} title="Supplemental Nutrition Assistance Program (SNAP)" />
+            <TabPanel
+                value={value}
+                index={0}
+                title="All Programs"
+                allStates={allStates}
+                stateCodes={stateCodes}
+                allPrograms={allPrograms}
+                summary={summary}
+            />
+            <TabPanel
+                value={value}
+                index={2}
+                title="All Programs"
+                allStates={allStates}
+                stateCodes={stateCodes}
+                allPrograms={allPrograms}
+                summary={summary}
+            />
+            <TabPanel
+                value={value}
+                index={4}
+                title="Title I: Commodities"
+                allStates={allStates}
+                stateCodes={stateCodes}
+                allPrograms={allPrograms}
+                summary={summary}
+            />
+            <TabPanel
+                value={value}
+                index={6}
+                title="Title II: Conservation"
+                allStates={allStates}
+                stateCodes={stateCodes}
+                allPrograms={allPrograms}
+                summary={summary}
+            />
+            <TabPanel
+                value={value}
+                index={8}
+                title="Crop Insurance"
+                allStates={allStates}
+                stateCodes={stateCodes}
+                allPrograms={allPrograms}
+                summary={summary}
+            />
+            <TabPanel
+                value={value}
+                index={10}
+                title="Supplemental Nutrition Assistance Program (SNAP)"
+                allStates={allStates}
+                stateCodes={stateCodes}
+                allPrograms={allPrograms}
+                summary={summary}
+            />
         </Box>
     );
 }
diff --git a/src/components/csp/CSPTotalMap.tsx b/src/components/csp/CSPTotalMap.tsx
@@ -1,17 +1,15 @@
-import React, { useEffect, useState } from "react";
+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 { scaleQuantile, scaleQuantize } from "d3-scale";
+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 "../../styles/map.css";
 import HorizontalStackedBar from "../HorizontalStackedBar";
-import { config } from "../../app.config";
-import { getJsonDataFromUrl } from "../../utils/apiutil";
 
 const geoUrl = "https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json";
 

diff --git a/src/components/csp/CSPTotalTable.tsx b/src/components/csp/CSPTotalTable.tsx
@@ -3,8 +3,6 @@ import styled from "styled-components";
 import { useTable, useSortBy } from "react-table";
 import Box from "@mui/material/Box";
 import "../../styles/table.css";
-import { config } from "../../app.config";
-import { getJsonDataFromUrl } from "../../utils/apiutil";
 
 const Styles = styled.div`
     padding: 1rem;
@@ -113,22 +111,7 @@ function Table({ columns, data }: { columns: any; data: any }) {
     );
 }
 
-function App(): JSX.Element {
-    const [statePerformance, setStatePerformance] = React.useState([]);
-    const [allStates, setAllStates] = React.useState([]);
-
-    // TBD: due to the time limited, leave this
-    React.useEffect(() => {
-        const allprograms_url = `${config.apiUrl}/programs/conservation/csp/state-distribution`;
-        getJsonDataFromUrl(allprograms_url).then((response) => {
-            setStatePerformance(response);
-        });
-        const allstates_url = `${config.apiUrl}/states`;
-        getJsonDataFromUrl(allstates_url).then((response) => {
-            setAllStates(response);
-        });
-    }, []);
-
+function App({ statePerformance }: { statePerformance: 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(",", ""));

diff --git a/src/components/csp/CategoryMap.tsx b/src/components/csp/CategoryMap.tsx
@@ -1,8 +1,8 @@
-import React, { useEffect, useState } from "react";
+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 { scaleQuantile, scaleQuantize } from "d3-scale";
+import { scaleQuantize } from "d3-scale";
 import Divider from "@mui/material/Divider";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";

diff --git a/src/components/csp/CategoryTable.tsx b/src/components/csp/CategoryTable.tsx
@@ -43,7 +43,7 @@ const Styles = styled.div`
 `;
 
 // eslint-disable-next-line
-function Table({ columns, data, statePerformance }: { columns: any; data: any; statePerformance: any }) {
+function Table({ columns, data }: { columns: any; data: any; statePerformance: any }) {
     const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable(
         {
             columns,

diff --git a/src/components/shared/DrawLegend.tsx b/src/components/shared/DrawLegend.tsx
@@ -14,22 +14,28 @@ export default function DrawLegend({
     programData,
     prepColor,
     emptyState,
-    initWidth
+    initRatioLarge,
+    initRatioSmall
 }: {
     colorScale: d3.ScaleThreshold<number, string>;
     title: React.ReactElement;
     programData: number[];
     prepColor: string[];
     emptyState: string[];
-    initWidth: number;
+    initRatioLarge: number;
+    initRatioSmall: number;
 }): JSX.Element {
     const legendRn = React.useRef(null);
     const margin = 40;
     let cut_points: number[] = [];
-    const [width, setWidth] = React.useState(initWidth);
+    const [width, setWidth] = React.useState(
+        window.innerWidth >= 1679 ? window.innerWidth * initRatioLarge : window.innerWidth * initRatioSmall
+    );
     React.useEffect(() => {
+        if (window.innerWidth > 1679) setWidth(window.innerWidth * initRatioLarge);
+        else setWidth(window.innerWidth * initRatioSmall);
         drawLegend();
-    }, []);
+    });
     const drawLegend = () => {
         if (legendRn.current) {
             d3.select(legendRn.current).selectAll("svg").remove();
@@ -139,10 +145,18 @@ export default function DrawLegend({
                         });
                 }
                 if (emptyState.length !== 0) {
+                    const middleText = baseSVG
+                        .append("text")
+                        .attr("class", "legendTextSide")
+                        .attr("x", -1000)
+                        .attr("y", -1000)
+                        .text(`${emptyState.join(", ")}'s data is not available`);
+                    const middleBox = middleText.node().getBBox();
+                    middleText.remove();
                     baseSVG
                         .append("text")
                         .attr("class", "legendTextSide")
-                        .attr("x", (svgWidth + margin * 2) / 2 - margin * 2)
+                        .attr("x", (svgWidth + margin * 2) / 2 - middleBox.width / 2)
                         .attr("y", 80)
                         .text(`${emptyState.join(", ")}'s data is not available`);
                 }