diff --git a/CHANGELOG.md b/CHANGELOG.md index 6acbc9f..a1a303e 100644 --- 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 index 85d8d65..2bd114f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "policy-design-lab", - "version": "0.15.0", + "version": "0.16.0", "lockfileVersion": 2, "requires": true, "packages": { diff --git a/package.json b/package.json index dcf5077..c88e500 100644 --- 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 index 0a3e8b5..50aca69 100644 --- 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 = ( {" "} + {" "} + {" "} + {" "} + + Page{" "} + + {pageIndex + 1} of {pageOptions.length} + {" "} + + + | Go to page:{" "} + { + let p = e.target.value ? Number(e.target.value) - 1 : 0; + if (p > pageOptions.length) p = pageOptions.length - 1; + if (p < 0) p = 0; + gotoPage(p); + }} + style={{ width: "3em" }} + />{" "} + + + + + {" "} + {pageSize * (pageIndex + 1) <= rows.length ? ( + + Showing the first {parseInt(pageSize, 10) * (pageIndex + 1)} results of {rows.length} rows + + ) : ( + + Showing the first {rows.length} results of {rows.length}rows + + )} + + + + ); +} diff --git a/src/components/shared/NavSearchBar.tsx b/src/components/shared/NavSearchBar.tsx index 3d98ea7..de08387 100644 --- a/src/components/shared/NavSearchBar.tsx +++ b/src/components/shared/NavSearchBar.tsx @@ -23,7 +23,7 @@ export default function NavSearchBar({ @@ -62,7 +62,7 @@ export default function NavSearchBar({ ) : null} - + { const location = useLocation(); @@ -26,6 +27,7 @@ export default function Main(): JSX.Element { } /> + } /> } /> } /> } /> diff --git a/src/pages/ACEPPage.tsx b/src/pages/ACEPPage.tsx index 31f8563..7c2886a 100644 --- a/src/pages/ACEPPage.tsx +++ b/src/pages/ACEPPage.tsx @@ -48,12 +48,12 @@ export default function ACEPPage(): JSX.Element { setStateCodesData(converted_json); }); - const statedistribution_url = `${config.apiUrl}/programs/conservation/acep/state-distribution`; + const statedistribution_url = `${config.apiUrl}/titles/title-ii/programs/acep/state-distribution`; getJsonDataFromUrl(statedistribution_url).then((response) => { setStateDistributionData(response); }); - const chartData_url = `${config.apiUrl}/programs/conservation/acep/subprograms`; + const chartData_url = `${config.apiUrl}/titles/title-ii/programs/acep/summary`; getJsonDataFromUrl(chartData_url).then((response) => { processData(response); }); @@ -67,7 +67,6 @@ export default function ACEPPage(): JSX.Element { const processData = (chartData) => { if (chartData.programs === undefined) return; const cur1 = chartData.programs.find((s) => s.programName === "ACEP"); - totalACEPPaymentInDollars = cur1.assistancePaymentInDollars; setTotalAcep(totalACEPPaymentInDollars); if (totalACEPPaymentInDollars === 0) zeroCategory.push("ACEP"); @@ -214,7 +213,7 @@ export default function ACEPPage(): JSX.Element { 1440 ? window.innerWidth * 0.7 : window.innerWidth * 0.6 @@ -235,7 +234,7 @@ export default function ACEPPage(): JSX.Element { "contractsInPercentageNationwide" ]} skipColumns={[]} - stateCodes={stateCodesData} + stateCodes={stateCodesArray} AcepData={stateDistributionData} year="2018-2022" colors={["#1F78B433", "#C8119526", "#66BB6A40"]} diff --git a/src/pages/CRPPage.tsx b/src/pages/CRPPage.tsx index 647809a..49f2431 100644 --- a/src/pages/CRPPage.tsx +++ b/src/pages/CRPPage.tsx @@ -14,7 +14,7 @@ import NavSearchBar from "../components/shared/NavSearchBar"; export default function CRPPage(): JSX.Element { const year = "2018-2022"; - const attribute = "paymentInDollars"; + const attribute = "totalPaymentInDollars"; const [checked, setChecked] = React.useState(0); const [stateDistributionData, setStateDistributionData] = React.useState({}); @@ -50,12 +50,12 @@ export default function CRPPage(): JSX.Element { setStateCodesData(converted_json); }); - const statedistribution_url = `${config.apiUrl}/programs/conservation/crp/state-distribution`; + const statedistribution_url = `${config.apiUrl}/titles/title-ii/programs/crp/state-distribution`; getJsonDataFromUrl(statedistribution_url).then((response) => { setStateDistributionData(response); }); - const chartData_url = `${config.apiUrl}/programs/conservation/crp/subprograms`; + const chartData_url = `${config.apiUrl}/titles/title-ii/programs/crp/summary`; getJsonDataFromUrl(chartData_url).then((response) => { processData(response); }); @@ -84,21 +84,21 @@ export default function CRPPage(): JSX.Element { } }); - totalCRPPaymentInDollars = cur1.paymentInDollars; + totalCRPPaymentInDollars = cur1.totalPaymentInDollars; setTotalCrp(totalCRPPaymentInDollars); if (totalCRPPaymentInDollars === 0) zeroCategory.push("Total CRP"); - generalSignUpPaymentInDollars = cur2.paymentInDollars; + generalSignUpPaymentInDollars = cur2.totalPaymentInDollars; if (generalSignUpPaymentInDollars === 0) zeroCategory.push("Total General Sign-Up"); - continuousSingUpPaymentInDollars = cur3.paymentInDollars; + continuousSingUpPaymentInDollars = cur3.totalPaymentInDollars; if (continuousSingUpPaymentInDollars === 0) zeroCategory.push("Total Continuous"); setTotalSub(continuousSingUpPaymentInDollars); - crepPaymentInDollars = cur4.paymentInDollars; + crepPaymentInDollars = cur4.totalPaymentInDollars; if (crepPaymentInDollars === 0) zeroCategory.push("CREP Only"); - nocCrepPaymentInDollars = cur5.paymentInDollars; + nocCrepPaymentInDollars = cur5.totalPaymentInDollars; if (nocCrepPaymentInDollars === 0) zeroCategory.push("Continuous Non-CREP"); - wetlandPaymentInDollars = cur6.paymentInDollars; + wetlandPaymentInDollars = cur6.totalPaymentInDollars; if (wetlandPaymentInDollars === 0) zeroCategory.push("Farmable Wetland"); - grasslandPyamentInDollars = cur7.paymentInDollars; + grasslandPyamentInDollars = cur7.totalPaymentInDollars; if (grasslandPyamentInDollars === 0) zeroCategory.push("Grassland"); if (zeroCategory.length > 0) setZeroCategories(zeroCategory); @@ -306,7 +306,7 @@ export default function CRPPage(): JSX.Element { 2 && checked < 6 ? "block" : "none" }}> diff --git a/src/pages/CSPPage.tsx b/src/pages/CSPPage.tsx index acafbe9..11b485a 100644 --- a/src/pages/CSPPage.tsx +++ b/src/pages/CSPPage.tsx @@ -9,13 +9,15 @@ import CSPTotalMap from "../components/csp/CSPTotalMap"; import CategoryTable from "../components/csp/CategoryTable"; import CategoryMap from "../components/csp/CategoryMap"; import { config } from "../app.config"; -import { getJsonDataFromUrl } from "../utils/apiutil"; +import { convertAllState, getJsonDataFromUrl } from "../utils/apiutil"; import NavSearchBar from "../components/shared/NavSearchBar"; export default function CSPPage(): JSX.Element { const [checked, setChecked] = React.useState(0); const [statePerformance, setStatePerformance] = React.useState({}); const [allStates, setAllStates] = React.useState([]); + const [stateCodesData, setStateCodesData] = React.useState({}); + const [stateCodesArray, setStateCodesArray] = React.useState([]); const [totalChartData, setTotalChartData] = React.useState([{}]); const [old2014ChartData, setOld2014ChartData] = React.useState([{}]); const [new2018ChartData, setNew2018ChartData] = React.useState([{}]); @@ -43,20 +45,32 @@ export default function CSPPage(): JSX.Element { let old2014Total = 0; const zeroCategory = []; + const csp_year = "2018-2022"; + React.useEffect(() => { - const allprograms_url = `${config.apiUrl}/programs/conservation/csp/state-distribution`; - getJsonDataFromUrl(allprograms_url).then((response) => { - setStatePerformance(response); + const state_perf_url = `${config.apiUrl}/titles/title-ii/programs/csp/state-distribution`; + getJsonDataFromUrl(state_perf_url).then((response) => { + const converted_perf_json = response; + setStatePerformance(converted_perf_json); }); const allstates_url = `${config.apiUrl}/states`; getJsonDataFromUrl(allstates_url).then((response) => { - setAllStates(response); + const converted_json = response; + setAllStates(converted_json); + }); + + const statecode_url = `${config.apiUrl}/statecodes`; + getJsonDataFromUrl(statecode_url).then((response) => { + setStateCodesArray(response); + const converted_json = convertAllState(response); + setStateCodesData(converted_json); }); - const chartData_url = `${config.apiUrl}/programs/conservation/csp/practice-categories`; - getJsonDataFromUrl(chartData_url).then((response) => { - processData(response); + const chartdata_url = `${config.apiUrl}/titles/title-ii/programs/csp/summary`; + getJsonDataFromUrl(chartdata_url).then((response) => { + const converted_chart_json = response; + processData(converted_chart_json); }); }, []); @@ -177,7 +191,10 @@ export default function CSPPage(): JSX.Element { }; return ( - {allStates.length > 0 && statePerformance.Wisconsin !== undefined && zeroCategories.length > 0 ? ( + {allStates.length > 0 && + statePerformance[csp_year] !== undefined && + zeroCategories.length > 0 && + stateCodesArray.length > 0 ? ( @@ -196,7 +213,12 @@ export default function CSPPage(): JSX.Element { display: checked !== 0 ? "none" : "block" }} > - + @@ -239,6 +265,8 @@ export default function CSPPage(): JSX.Element { category="Vegetative" statePerformance={statePerformance} allStates={allStates} + year={csp_year} + stateCodes={stateCodesData} /> @@ -268,6 +298,8 @@ export default function CSPPage(): JSX.Element { category="Forest management" statePerformance={statePerformance} allStates={allStates} + year={csp_year} + stateCodes={stateCodesData} /> - + @@ -349,6 +395,8 @@ export default function CSPPage(): JSX.Element { category="2014 Eligible Land" statePerformance={statePerformance} allStates={allStates} + year={csp_year} + stateCodes={stateCodesData} /> @@ -484,65 +544,148 @@ export default function CSPPage(): JSX.Element { - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + diff --git a/src/pages/CropInsurancePage.tsx b/src/pages/CropInsurancePage.tsx index 6b3848a..a6c0396 100644 --- a/src/pages/CropInsurancePage.tsx +++ b/src/pages/CropInsurancePage.tsx @@ -44,7 +44,7 @@ export default function CropInsurancePage(): JSX.Element { const converted_json = convertAllState(response); setStateCodesData(converted_json); }); - const statedistribution_url = `${config.apiUrl}/programs/crop-insurance/state-distribution`; + const statedistribution_url = `${config.apiUrl}/titles/title-xi/programs/crop-insurance/state-distribution`; getJsonDataFromUrl(statedistribution_url).then((response) => { setStateDistributionData(response); }); @@ -74,6 +74,17 @@ export default function CropInsurancePage(): JSX.Element { }); return res; }; + const subtextMatch = { + "0": "Total Net Farmer Benefits", + "01": "Total Farmer Paid Premium", + "00": "Total Indemnities", + "02": "Total Premium", + "03": "Total Premium Subsidy", + "1": "Loss Ratio", + "2": "Average Liabilities", + "3": "Total Policies Earning Premium", + "4": "Average Acres Insured" + }; return ( {Object.keys(stateCodesData).length > 0 && @@ -82,7 +93,7 @@ export default function CropInsurancePage(): JSX.Element { - + {/* Net Farmer Premium Section */} diff --git a/src/pages/EQIPPage.tsx b/src/pages/EQIPPage.tsx index b8d1054..8b1f71b 100644 --- a/src/pages/EQIPPage.tsx +++ b/src/pages/EQIPPage.tsx @@ -9,7 +9,7 @@ import EqipTotalMap from "../components/eqip/EQIPTotalMap"; import CategoryTable from "../components/eqip/CategoryTable"; import CategoryMap from "../components/eqip/CategoryMap"; import { config } from "../app.config"; -import { getJsonDataFromUrl } from "../utils/apiutil"; +import { convertAllState, getJsonDataFromUrl } from "../utils/apiutil"; import NavSearchBar from "../components/shared/NavSearchBar"; export default function EQIPPage(): JSX.Element { @@ -33,6 +33,8 @@ export default function EQIPPage(): JSX.Element { // connect to api endpoint const [statePerformance, setStatePerformance] = React.useState({}); const [allStates, setAllStates] = React.useState({}); + const [stateCodesData, setStateCodesData] = React.useState({}); + const [stateCodesArray, setStateCodesArray] = React.useState([]); const [totalChartData, setTotalChartData] = React.useState([{}]); const [sixAChartData, setSixAChartData] = React.useState([{}]); const [sixBChartData, setSixBChartData] = React.useState([{}]); @@ -40,20 +42,28 @@ export default function EQIPPage(): JSX.Element { const [bTotal, setBTotal] = React.useState(0); const [zeroCategories, setZeroCategories] = React.useState([]); + const eqip_year = "2018-2022"; React.useEffect(() => { - const state_perf_url = `${config.apiUrl}/programs/conservation/eqip/state-distribution`; + const state_perf_url = `${config.apiUrl}/titles/title-ii/programs/eqip/state-distribution`; getJsonDataFromUrl(state_perf_url).then((response) => { const converted_perf_json = response; setStatePerformance(converted_perf_json); }); - const statecode_url = `${config.apiUrl}/states`; - getJsonDataFromUrl(statecode_url).then((response) => { + const allstates_url = `${config.apiUrl}/states`; + getJsonDataFromUrl(allstates_url).then((response) => { const converted_json = response; setAllStates(converted_json); }); - const chartdata_url = `${config.apiUrl}/programs/conservation/eqip/practice-categories`; + const statecode_url = `${config.apiUrl}/statecodes`; + getJsonDataFromUrl(statecode_url).then((response) => { + setStateCodesArray(response); + const converted_json = convertAllState(response); + setStateCodesData(converted_json); + }); + + const chartdata_url = `${config.apiUrl}/titles/title-ii/programs/eqip/summary`; getJsonDataFromUrl(chartdata_url).then((response) => { const converted_chart_json = response; processData(converted_chart_json); @@ -148,7 +158,10 @@ export default function EQIPPage(): JSX.Element { return ( - {allStates.length > 0 && statePerformance.Wisconsin !== undefined && zeroCategories.length > 0 ? ( + {allStates.length > 0 && + statePerformance[eqip_year] !== undefined && + zeroCategories.length > 0 && + stateCodesArray.length > 0 ? ( @@ -163,7 +176,12 @@ export default function EQIPPage(): JSX.Element { component="div" sx={{ width: "85%", m: "auto", display: checked !== 0 ? "none" : "block" }} > - + @@ -336,49 +378,107 @@ export default function EQIPPage(): JSX.Element { - + - + - + - + - + - + - + - + - + - + - + diff --git a/src/pages/RCPPPage.tsx b/src/pages/RCPPPage.tsx index e91e867..3fc036e 100644 --- a/src/pages/RCPPPage.tsx +++ b/src/pages/RCPPPage.tsx @@ -45,12 +45,12 @@ export default function RCPPPage(): JSX.Element { setStateCodesData(converted_json); }); - const statedistribution_url = `${config.apiUrl}/programs/conservation/rcpp/state-distribution`; + const statedistribution_url = `${config.apiUrl}/titles/title-ii/programs/rcpp/state-distribution`; getJsonDataFromUrl(statedistribution_url).then((response) => { setStateDistributionData(response); }); - const chartData_url = `${config.apiUrl}/programs/conservation/rcpp/subprograms`; + const chartData_url = `${config.apiUrl}/titles/title-ii/programs/rcpp/summary`; getJsonDataFromUrl(chartData_url).then((response) => { processData(response); }); @@ -61,7 +61,7 @@ export default function RCPPPage(): JSX.Element { const cur1 = chartData.programs.find((s) => s.programName === "RCPP"); - totalRCPPPaymentInDollars = cur1.paymentInDollars; + totalRCPPPaymentInDollars = cur1.totalPaymentInDollars; setTotalRcpp(totalRCPPPaymentInDollars); if (totalRCPPPaymentInDollars === 0) zeroCategory.push("RCPP"); totalContracts = cur1.totalContracts; diff --git a/src/pages/SNAPPage.tsx b/src/pages/SNAPPage.tsx index d61f677..4ea95c5 100644 --- a/src/pages/SNAPPage.tsx +++ b/src/pages/SNAPPage.tsx @@ -67,7 +67,7 @@ export default function SNAPPage(): JSX.Element { setSummary(response); }); - getJsonDataFromUrl(`${config.apiUrl}/programs/snap/state-distribution`).then((response) => { + getJsonDataFromUrl(`${config.apiUrl}/titles/title-iv/programs/snap/state-distribution`).then((response) => { setData(response); }); }, []); diff --git a/src/pages/TitleIIPage.tsx b/src/pages/TitleIIPage.tsx new file mode 100644 index 0000000..72bcd47 --- /dev/null +++ b/src/pages/TitleIIPage.tsx @@ -0,0 +1,113 @@ +import Box from "@mui/material/Box"; +import * as React from "react"; +import { createTheme, ThemeProvider, Typography } from "@mui/material"; +import NavBar from "../components/NavBar"; +import Drawer from "../components/ProgramDrawer"; +import { config } from "../app.config"; +import { convertAllState, getJsonDataFromUrl } from "../utils/apiutil"; +import NavSearchBar from "../components/shared/NavSearchBar"; +import LandingPageMap from "../components/LandingPageMap"; +import LandingPageTable from "../components/shared/LandingPgaeTable"; + +export default function TitleIIPage(): JSX.Element { + const defaultTheme = createTheme(); + const [allStates, setAllStates] = React.useState({}); + const [stateCodesData, setStateCodesData] = React.useState({}); + const [allPrograms, setAllPrograms] = React.useState([]); + const [summary, setSummary] = React.useState([]); + const [windowWidth, setWindowWidth] = React.useState(window.innerWidth); + const handleResize = () => { + setWindowWidth(window.innerWidth); + }; + + const total_year = "2018-2022"; + React.useEffect(() => { + // For landing page map only. + const allprograms_url = `${config.apiUrl}/allprograms`; + getJsonDataFromUrl(allprograms_url).then((response) => { + setAllPrograms(response); + }); + + const allstates_url = `${config.apiUrl}/states`; + getJsonDataFromUrl(allstates_url).then((response) => { + const converted_json = response; + setAllStates(converted_json); + }); + + const statecode_url = `${config.apiUrl}/statecodes`; + getJsonDataFromUrl(statecode_url).then((response) => { + const converted_json = convertAllState(response); + setStateCodesData(converted_json); + }); + + const summary_url = `${config.apiUrl}/summary`; + getJsonDataFromUrl(summary_url).then((response) => { + setSummary(response); + }); + + window.addEventListener("resize", handleResize); + return () => window.removeEventListener("resize", handleResize); + }, []); + return ( + + {allStates.length > 0 ? ( + + + + + + + + + + + + + + + + + TitleII: State Performance by Category of Practices + + + + TitleII provides cost-share assistance for improvements to eligible land. In the + statute, Congress defined seven categories of conservation practices: (1) structural + practices, such as for irrigation and livestock manure management or abatement; (2) land + management practices, such as for fencing, drainage water management, grazing, + prescribed burning, and wildlife habitat; (3) vegetative practices, such as planting + filter strips, cover crops, grassed waterways, field borders, windbreaks, and + shelterbelts; (4) forest management practices, which include planting trees and shrubs, + improving forest stands, planting riparian forest buffers, and treating residues; (5) + soil testing practices; (6) soil remediation practices, such as residue and tillage + management (no-till, mulch-till, or strip-till), and amendments for treating + agricultural wastes; and (7) other practices, including integrated pest management, dust + control, and energy improvements. + + + + + + + + ) : ( +

Loading data...

+ )} + + ); +} diff --git a/src/pages/TitleIPage.tsx b/src/pages/TitleIPage.tsx index 534c6fc..c36c822 100644 --- a/src/pages/TitleIPage.tsx +++ b/src/pages/TitleIPage.tsx @@ -20,6 +20,8 @@ import SideBar from "../components/title1/sideBar/SideBar"; import { config } from "../app.config"; import { convertAllState, getJsonDataFromUrl } from "../utils/apiutil"; import "../styles/subpage.css"; +import LandingPageMap from "../components/LandingPageMap"; +import LandingPageTable from "../components/shared/LandingPgaeTable"; export default function TitleIPage(): JSX.Element { const [tab, setTab] = React.useState(0); @@ -28,6 +30,14 @@ export default function TitleIPage(): JSX.Element { const [subtitleDStateDistributionData, setSubtitleDStateDistributionData] = React.useState({}); const [stateCodesData, setStateCodesData] = React.useState({}); const [allStatesData, setAllStatesData] = React.useState([]); + + const [allPrograms, setAllPrograms] = React.useState([]); + const [summary, setSummary] = React.useState([]); + const [windowWidth, setWindowWidth] = React.useState(window.innerWidth); + const handleResize = () => { + setWindowWidth(window.innerWidth); + }; + const title1Div = React.useRef(null); const [checked, setChecked] = React.useState("0"); const mapColor = ["#F9F9D3", "#F9D48B", "#F59020", "#D95F0E", "#993404"]; @@ -37,8 +47,17 @@ export default function TitleIPage(): JSX.Element { const subtitleAYear = "2014-2021"; const subtitleEYear = "2014-2021"; const subtitleDYear = "2014-2021"; - React.useEffect(() => { + // For landing page map only. + const allprograms_url = `${config.apiUrl}/allprograms`; + getJsonDataFromUrl(allprograms_url).then((response) => { + setAllPrograms(response); + }); + const summary_url = `${config.apiUrl}/summary`; + getJsonDataFromUrl(summary_url).then((response) => { + setSummary(response); + }); + const allstates_url = `${config.apiUrl}/states`; getJsonDataFromUrl(allstates_url).then((response) => { setAllStatesData(response); @@ -61,6 +80,9 @@ export default function TitleIPage(): JSX.Element { getJsonDataFromUrl(subtitleE_url).then((response) => { setSubtitleEStateDistributionData(response); }); + + window.addEventListener("resize", handleResize); + return () => window.removeEventListener("resize", handleResize); }, []); const switchChartTable = (event, newTab) => { @@ -110,7 +132,20 @@ export default function TitleIPage(): JSX.Element { }); return [organizedData, originalData]; } - + const subtextMatch = { + 0: "Total Commodities Programs (Title I)", + 1: "Total Commodities Programs, Subtitle A", + 2: "Agriculture Risk Coverage (ARC)", + 20: "Agriculture Risk Coverage County Option (ARC-CO)", + 21: "Agriculture Risk Coverage Individual Coverage (ARC-IC)", + 3: "Price Loss Coverage (PLC)", + 4: "Dairy Margin Coverage, Subtitle D", + 5: "Supplemental Agricultural Disaster Assistance, Subtitle E", + 50: "Emergency Assistance for Livestock, Honey Bees, and Farm-Raised Fish Program (ELAP)", + 51: "Livestock Forage Program (LFP)", + 52: "Livestock Indemnity Payments (LIP)", + 53: "Tree Assistance Program (TAP)" + }; return ( {Object.keys(stateCodesData).length > 0 && @@ -121,7 +156,7 @@ export default function TitleIPage(): JSX.Element { - + @@ -129,6 +164,69 @@ export default function TitleIPage(): JSX.Element { component="div" className="halfWidthMainContent" sx={{ display: checked !== "0" ? "none" : "block" }} + > + + {/* landing page map has margin top of 4 in its component, thus reverse it */} + + + + + + + + + Performance by States + + + + + + + +