From ffc7260a480b76f9c121627dbc53dc6b171a2221 Mon Sep 17 00:00:00 2001 From: "Wendy(Pengyin) Shan" Date: Wed, 14 Feb 2024 13:03:00 -0600 Subject: [PATCH 1/9] fix total earning premium label and update eqip"s category map and table --- src/components/LandingPageMap.tsx | 42 +-- .../cropinsurance/CropInsuranceMap.tsx | 2 +- .../cropinsurance/CropInsuranceTable.tsx | 2 +- src/components/eqip/CategoryMap.tsx | 45 +-- src/components/eqip/CategoryTable.tsx | 31 +- src/components/shared/DrawLegend.tsx | 21 +- src/components/shared/LandingPgaeTable.tsx | 325 ++++++++++++++++++ .../title1/sideBar/SideBarMenuItem.tsx | 4 + src/pages/CropInsurancePage.tsx | 3 +- src/pages/EQIPPage.tsx | 140 ++++++-- src/pages/TitleIPage.tsx | 100 +++++- 11 files changed, 608 insertions(+), 107 deletions(-) create mode 100644 src/components/shared/LandingPgaeTable.tsx diff --git a/src/components/LandingPageMap.tsx b/src/components/LandingPageMap.tsx index 19c74336..29b121f8 100644 --- 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} /> @@ -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 (
-
- -
- {/* Note that react-tooltip v4 has to use inline background color to style the tooltip arrow */} - - {content} - -
+ +
+ {/* Note that react-tooltip v4 has to use inline background color to style the tooltip arrow */} + + {content} +
); diff --git a/src/components/cropinsurance/CropInsuranceMap.tsx b/src/components/cropinsurance/CropInsuranceMap.tsx index 8df57dba..e175a41c 100644 --- a/src/components/cropinsurance/CropInsuranceMap.tsx +++ b/src/components/cropinsurance/CropInsuranceMap.tsx @@ -87,7 +87,7 @@ const MapChart = ({ {attr === 2 ? ( - ${ShortFormat(programPayment)} + {ShortFormat(programPayment)}   diff --git a/src/components/cropinsurance/CropInsuranceTable.tsx b/src/components/cropinsurance/CropInsuranceTable.tsx index bebc8e50..96feb44c 100644 --- 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/eqip/CategoryMap.tsx b/src/components/eqip/CategoryMap.tsx index 19fe0307..2ae80f95 100644 --- a/src/components/eqip/CategoryMap.tsx +++ b/src/components/eqip/CategoryMap.tsx @@ -27,7 +27,7 @@ const offsets = { }; const MapChart = (props) => { - const { setReactTooltipContent, category, statePerformance, allStates, colorScale } = props; + const {year, setReactTooltipContent, category, statePerformance, stateCodes, allStates, colorScale } = props; const classes = useStyles(); return (
@@ -37,18 +37,25 @@ const MapChart = (props) => { <> {geographies.map((geo) => { if (statePerformance !== undefined) { - if (!Object.keys(statePerformance).includes(geo.properties.name)) { + // if (!Object.keys(statePerformance).includes(geo.properties.name)) { + // return null; + // } + const record = statePerformance[year].filter( + (v) => stateCodes[v.state] === geo.properties.name + )[0]; + if (record === undefined || record.length === 0) { return null; } - const statuteRecord = statePerformance[geo.properties.name][0].statutes; + console.log("record", record); + const statuteRecord = record.statutes; const ACur = statuteRecord.find((s) => s.statuteName === "(6)(A) Practices"); const AArray = ACur.practiceCategories; const BCur = statuteRecord.find((s) => s.statuteName === "(6)(B) Practices"); const BArray = BCur.practiceCategories; const TotalArray = AArray.concat(BArray); const categoryRecord = TotalArray.find((s) => s.practiceCategoryName === category); - const categoryPayment = categoryRecord.paymentInDollars; - const nationwidePercentage = categoryRecord.paymentInPercentageNationwide; + const categoryPayment = categoryRecord.totalPaymentInDollars; + const nationwidePercentage = categoryRecord.totalPaymentInPercentageNationwide; const hoverContent = (
@@ -155,31 +162,27 @@ MapChart.propTypes = { const CategoryMap = ({ category, statePerformance, - allStates + allStates, + year, + stateCodes }: { category: string; statePerformance: any; allStates: any; + year: string; + stateCodes: any; }): JSX.Element => { const [content, setContent] = useState(""); - // issue158: since eqip and csp are using old data structure (i.e. year is not the first level of data structure), going into array to find the year - let years = "2018-2022"; - if ( - Object.keys(statePerformance).length !== 0 && - Array(Array(Array(Object.values(statePerformance)[0])[0])[0])[0] - ) { - years = Array(Array(Array(Object.values(statePerformance)[0])[0])[0])[0][0].years; - } const quantizeArray: number[] = []; - Object.values(statePerformance).map((value) => { - const statuteRecord = value[0].statutes; + statePerformance[year].map((value) => { + const statuteRecord = value.statutes; const ACur = statuteRecord.find((s) => s.statuteName === "(6)(A) Practices"); const AArray = ACur.practiceCategories; const BCur = statuteRecord.find((s) => s.statuteName === "(6)(B) Practices"); const BArray = BCur.practiceCategories; const TotalArray = AArray.concat(BArray); const categoryRecord = TotalArray.find((s) => s.practiceCategoryName === category); - quantizeArray.push(categoryRecord.paymentInDollars); + quantizeArray.push(categoryRecord.totalPaymentInDollars); return null; }); const maxValue = Math.max(...quantizeArray); @@ -193,7 +196,7 @@ const CategoryMap = ({ {maxValue !== 0 ? ( ) : (
- {titleElement(category, years)} + {titleElement(category, year)} - {category} data in {years} is unavailable for all states. + {category} data in {year} is unavailable for all states.
@@ -219,6 +222,8 @@ const CategoryMap = ({ statePerformance={statePerformance} allStates={allStates} colorScale={colorScale} + year={year} + stateCodes={stateCodes} />
diff --git a/src/components/eqip/CategoryTable.tsx b/src/components/eqip/CategoryTable.tsx index d6b73821..8895fc13 100644 --- a/src/components/eqip/CategoryTable.tsx +++ b/src/components/eqip/CategoryTable.tsx @@ -127,32 +127,43 @@ function Table({ columns, data, statePerformance }: { columns: any; data: any; s ); } -function App({ category, statePerformance }: { category: string; statePerformance: any }): JSX.Element { +function App({ + category, + statePerformance, + year, + stateCodes +}: { + category: string; + statePerformance: any; + year: any; + stateCodes: any; +}): JSX.Element { const eqipTableData: any[] = []; // eslint-disable-next-line no-restricted-syntax - for (const [key, value] of Object.entries(statePerformance)) { - const ACur = value[0].statutes.find((s) => s.statuteName === "(6)(A) Practices"); + statePerformance[year].forEach((value) => { + const ACur = value.statutes.find((s) => s.statuteName === "(6)(A) Practices"); const AArray = ACur.practiceCategories; - const BCur = value[0].statutes.find((s) => s.statuteName === "(6)(B) Practices"); + const BCur = value.statutes.find((s) => s.statuteName === "(6)(B) Practices"); const BArray = BCur.practiceCategories; const TotalArray = AArray.concat(BArray); + console.log('TotalArray', TotalArray); const categoryRecord = TotalArray.find((s) => s.practiceCategoryName === category); const newRecord = () => { return { - state: key, - categoryBenefit: `$${Number(categoryRecord.paymentInDollars).toLocaleString(undefined, { + state: stateCodes.find(s=>s.code === value.state).name, + categoryBenefit: `$${Number(categoryRecord.totalPaymentInDollars).toLocaleString(undefined, { minimumFractionDigits: 2 })}`, - categoryPercentage: `${categoryRecord.paymentInPercentageWithinState.toString()}%`, - eqipBenefit: `$${value[0].totalPaymentInDollars.toLocaleString(undefined, { + categoryPercentage: `${categoryRecord.totalPaymentInPercentageWithinState.toString()}%`, + eqipBenefit: `$${value.totalPaymentInDollars.toLocaleString(undefined, { minimumFractionDigits: 2 })}`, - percentage: `${value[0].totalPaymentInPercentageNationwide.toString()}%` + percentage: `${value.totalPaymentInPercentageNationwide.toString()}%` }; }; eqipTableData.push(newRecord()); - } + }); function compareWithDollarSign(rowA, rowB, id, desc) { const a = Number.parseFloat(rowA.values[id].substring(1).replaceAll(",", "")); diff --git a/src/components/shared/DrawLegend.tsx b/src/components/shared/DrawLegend.tsx index 7a4486ef..8af2ee89 100644 --- a/src/components/shared/DrawLegend.tsx +++ b/src/components/shared/DrawLegend.tsx @@ -18,27 +18,18 @@ export default function DrawLegend({ prepColor, emptyState, initRatioLarge, - initRatioSmall -}: { - isRatio: boolean; - notDollar: boolean; - colorScale: d3.ScaleThreshold; - title: React.ReactElement; - programData: number[]; - prepColor: string[]; - emptyState: string[]; - initRatioLarge: number; - initRatioSmall: number; + initRatioSmall, + screenWidth = window.innerWidth }): JSX.Element { const legendRn = React.useRef(null); const margin = 40; let cut_points: number[] = []; const [width, setWidth] = React.useState( - window.innerWidth >= 1679 ? window.innerWidth * initRatioLarge : window.innerWidth * initRatioSmall + screenWidth >= 1679 ? screenWidth * initRatioLarge : screenWidth * initRatioSmall ); React.useEffect(() => { - if (window.innerWidth > 1679) setWidth(window.innerWidth * initRatioLarge); - else setWidth(window.innerWidth * initRatioSmall); + if (screenWidth > 1679) setWidth(screenWidth * initRatioLarge); + else setWidth(screenWidth * initRatioSmall); drawLegend(); }); const drawLegend = () => { @@ -104,7 +95,7 @@ export default function DrawLegend({ legendRectX[legendRectX.length - 1] + data_distribution[data_distribution.length - 1] * svgWidth; legendRectX.push(last); - if (window.innerWidth > 1679) { + if (screenWidth > 1679) { baseSVG .selectAll(null) .data(legendRectX) diff --git a/src/components/shared/LandingPgaeTable.tsx b/src/components/shared/LandingPgaeTable.tsx new file mode 100644 index 00000000..268758ea --- /dev/null +++ b/src/components/shared/LandingPgaeTable.tsx @@ -0,0 +1,325 @@ +/** + * Based on landing page map data (before api revision), create corresponding table + */ +import { Grid, TableContainer, Typography } from "@mui/material"; +import React from "react"; +import styled from "styled-components"; +import { useTable, useSortBy, usePagination } from "react-table"; +import SwapVertIcon from "@mui/icons-material/SwapVert"; +import Box from "@mui/material/Box"; +import { compareWithAlphabetic, compareWithDollarSign } from "./TableCompareFunctions"; +import "../../styles/table.css"; + +/** + * SummaryKey: "Title I Total", "SNAP Total", etc + */ +export default function LandingPageTable({ + TableTitle, + TableData, + stateCodes, + SummaryKey +}: { + TableTitle: string; + TableData: any; + stateCodes: any; + SummaryKey: string; +}): JSX.Element { + const Styles = styled.div` + padding: 0; + margin: 0; + + table { + border-spacing: 0; + border: 1px solid #e4ebe7; + border-left: none; + border-right: none; + width: 100%; + + tr { + :last-child { + td { + border-bottom: 0; + } + } + } + + th { + background-color: rgba(241, 241, 241, 1); + padding: 1em 3em; + cursor: pointer; + text-align: left; + } + + th:not(:first-of-type) { + text-align: right; + } + + td[class$="cell0"] { + padding-right: 10em; + } + + td[class$="cell1"], + td[class$="cell2"], + td[class$="cell3"], + td[class$="cell4"] { + text-align: right; + } + + td { + padding: 1em 3em; + border-bottom: 1px solid #e4ebe7; + border-right: none; + + :last-child { + border-right: 0; + } + } + } + + .pagination { + margin-top: 1.5em; + } + + @media screen and (max-width: 1024px) { + th, + td { + padding: 8px; + } + td[class$="cell0"] { + padding-right: 1em; + } + .pagination { + margin-top: 8px; + } + } + `; + const resultData = []; + TableData.sort((a, b) => b[SummaryKey] - a[SummaryKey]); + // eslint-disable-next-line no-restricted-syntax + TableData.forEach((d) => { + if (d.State.length === 2) { + const newRecord = () => { + return { + state: stateCodes[d.State], + totalPaymentInDollars: `$${d[SummaryKey].toLocaleString(undefined, { + minimumFractionDigits: 2 + }).toString()}` + }; + }; + resultData.push(newRecord()); + } + }); + const columns = React.useMemo( + () => [ + { + Header: "STATE", + accessor: "state", + sortType: compareWithAlphabetic + }, + { + Header: "TOTAL BENEFITS IN DOLLARS", + accessor: "totalPaymentInDollars", + sortType: compareWithDollarSign + } + ], + [] + ); + return ( + + + + + + + {TableTitle} + + + + + + + + + + ); +} +// eslint-disable-next-line +function Table({ columns, data, initialState }: { columns: any; data: any; initialState: any }) { + const state = React.useMemo(() => initialState, []); + const { + getTableProps, + getTableBodyProps, + headerGroups, + rows, + prepareRow, + page, + canPreviousPage, + canNextPage, + pageOptions, + pageCount, + gotoPage, + nextPage, + previousPage, + setPageSize, + state: { pageIndex, pageSize } + } = useTable( + { + columns, + data, + state + }, + useSortBy, + usePagination + ); + return ( +
+
+ + {headerGroups.map((headerGroup) => ( + + {headerGroup.headers.map((column) => ( + // Add the sorting props to control sorting. + + ))} + + ))} + + + { + // eslint-disable-next-line + page.map((row, i) => { + prepareRow(row); + return ( + + {row.cells.map((cell, j) => { + return ( + + ); + })} + + ); + }) + } + +
+ {column.render("Header")} + + {(() => { + if (!column.isSorted) + return ( + + + + ); + if (column.isSortedDesc) + return {"\u{25BC}"}; + return {"\u{25B2}"}; + })()} + +
+ {cell.render("Cell")} +
+ + + {" "} + {" "} + {" "} + {" "} + + 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/title1/sideBar/SideBarMenuItem.tsx b/src/components/title1/sideBar/SideBarMenuItem.tsx index ea8abb08..bf7271f9 100644 --- a/src/components/title1/sideBar/SideBarMenuItem.tsx +++ b/src/components/title1/sideBar/SideBarMenuItem.tsx @@ -1,5 +1,9 @@ // TBD: Optimize the menu structure to retrieve data automatically from the backend export const menu = [ + { + icon: "", + title: "Total Commodities Programs (Title I)" + }, { icon: "", title: "Total Commodities Programs, Subtitle A" diff --git a/src/pages/CropInsurancePage.tsx b/src/pages/CropInsurancePage.tsx index 6b3848a7..41454fa4 100644 --- a/src/pages/CropInsurancePage.tsx +++ b/src/pages/CropInsurancePage.tsx @@ -44,7 +44,8 @@ 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}/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); }); diff --git a/src/pages/EQIPPage.tsx b/src/pages/EQIPPage.tsx index b8d10544..e6603550 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,30 @@ 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`; - getJsonDataFromUrl(state_perf_url).then((response) => { + //const state_perf_url = `${config.apiUrl}/programs/conservation/eqip/state-distribution`; + const state_perf_url =`${config.apiUrl}/titles/title-ii/programs/eqip/state-distribution`; + https: 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 +160,7 @@ 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 ? ( @@ -159,12 +171,12 @@ export default function EQIPPage(): JSX.Element { - - + */} @@ -308,25 +344,25 @@ export default function EQIPPage(): JSX.Element { {aTotal >= 0 || bTotal >= 0 ? (
- + /> */} = 1 && checked <= 7 ? "block" : "none" }}> - + /> */} = 8 ? "block" : "none" }}> - + /> */}
) : null} @@ -339,46 +375,100 @@ export default function EQIPPage(): JSX.Element { - + - + - + - + - + - + - + - + - + - + diff --git a/src/pages/TitleIPage.tsx b/src/pages/TitleIPage.tsx index 534c6fce..c734c448 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,11 @@ 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 title1Div = React.useRef(null); const [checked, setChecked] = React.useState("0"); const mapColor = ["#F9F9D3", "#F9D48B", "#F59020", "#D95F0E", "#993404"]; @@ -39,6 +46,16 @@ export default function TitleIPage(): JSX.Element { 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); @@ -129,6 +146,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 + + + + + + + + Date: Wed, 14 Feb 2024 13:18:23 -0600 Subject: [PATCH 2/9] update EQIP total map and total table to new api --- src/components/crp/CRPTotalMap.tsx | 4 +-- src/components/crp/CRPTotalTable.tsx | 30 +++----------------- src/components/eqip/CategoryMap.tsx | 1 - src/components/eqip/CategoryTable.tsx | 1 - src/components/eqip/EQIPTotalMap.tsx | 39 +++++++++++++++----------- src/components/eqip/EQIPTotalTable.tsx | 34 +++++++++------------- src/pages/EQIPPage.tsx | 17 ++++++++--- 7 files changed, 55 insertions(+), 71 deletions(-) diff --git a/src/components/crp/CRPTotalMap.tsx b/src/components/crp/CRPTotalMap.tsx index 6405c8fb..3dbe351a 100644 --- 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 = (
diff --git a/src/components/crp/CRPTotalTable.tsx b/src/components/crp/CRPTotalTable.tsx index 76b52e25..f9509123 100644 --- 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,29 +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[] = []; @@ -251,7 +229,7 @@ function App({ ), accessor: "noContract", - sortType: compareNumber, + sortType: compareWithNumber, Cell: function styleCells(row) { return
{row.value}
; } @@ -271,7 +249,7 @@ function App({ ), accessor: "noFarm", - sortType: compareNumber, + sortType: compareWithNumber, Cell: function styleCells(row) { return
{row.value}
; } @@ -291,7 +269,7 @@ function App({ ), accessor: "totAcre", - sortType: compareNumber, + sortType: compareWithNumber, Cell: function styleCells(row) { return
{row.value}
; } diff --git a/src/components/eqip/CategoryMap.tsx b/src/components/eqip/CategoryMap.tsx index 2ae80f95..48f22fb7 100644 --- a/src/components/eqip/CategoryMap.tsx +++ b/src/components/eqip/CategoryMap.tsx @@ -46,7 +46,6 @@ const MapChart = (props) => { if (record === undefined || record.length === 0) { return null; } - console.log("record", record); const statuteRecord = record.statutes; const ACur = statuteRecord.find((s) => s.statuteName === "(6)(A) Practices"); const AArray = ACur.practiceCategories; diff --git a/src/components/eqip/CategoryTable.tsx b/src/components/eqip/CategoryTable.tsx index 8895fc13..35ce839f 100644 --- a/src/components/eqip/CategoryTable.tsx +++ b/src/components/eqip/CategoryTable.tsx @@ -147,7 +147,6 @@ function App({ const BCur = value.statutes.find((s) => s.statuteName === "(6)(B) Practices"); const BArray = BCur.practiceCategories; const TotalArray = AArray.concat(BArray); - console.log('TotalArray', TotalArray); const categoryRecord = TotalArray.find((s) => s.practiceCategoryName === category); const newRecord = () => { return { diff --git a/src/components/eqip/EQIPTotalMap.tsx b/src/components/eqip/EQIPTotalMap.tsx index ff3c0d79..2509e67a 100644 --- a/src/components/eqip/EQIPTotalMap.tsx +++ b/src/components/eqip/EQIPTotalMap.tsx @@ -26,7 +26,7 @@ const offsets = { DC: [49, 21] }; -const MapChart = ({ setReactTooltipContent, maxValue, allStates, statePerformance, colorScale }) => { +const MapChart = ({ setReactTooltipContent, maxValue, allStates, statePerformance, year, stateCodes, colorScale }) => { const classes = useStyles(); return (
@@ -35,10 +35,12 @@ const MapChart = ({ setReactTooltipContent, maxValue, allStates, statePerformanc {({ geographies }) => ( <> {geographies.map((geo) => { - if (!Object.keys(statePerformance).includes(geo.properties.name)) { + const record = statePerformance[year].filter( + (v) => stateCodes[v.state] === geo.properties.name + )[0]; + if (record === undefined || record.length === 0) { return null; } - const record = statePerformance[geo.properties.name][0]; const totalPaymentInDollars = record.totalPaymentInDollars; const totalPaymentInPercentageNationwide = record.totalPaymentInPercentageNationwide; const hoverContent = ( @@ -136,23 +138,26 @@ MapChart.propTypes = { maxValue: PropTypes.number }; -const EQIPTotalMap = ({ statePerformance, allStates }: { statePerformance: any; allStates: any }): JSX.Element => { +const EQIPTotalMap = ({ + statePerformance, + allStates, + year, + stateCodes +}: { + statePerformance: any; + allStates: any; + year: string; + stateCodes: any; +}): JSX.Element => { const quantizeArray: number[] = []; const category = "Total EQIP"; - Object.values(statePerformance).map((value) => quantizeArray.push(value[0].totalPaymentInDollars)); + statePerformance[year].forEach((value) => quantizeArray.push(value.totalPaymentInDollars)); const maxValue = Math.max(...quantizeArray); const mapColor = ["#F0F9E8", "#BAE4BC", "#7BCCC4", "#43A2CA", "#0868AC"]; const customScale = legendConfig[category]; const colorScale = d3.scaleThreshold(customScale, mapColor); const [content, setContent] = useState(""); - // issue158: since eqip and csp are using old data structure (i.e. year is not the first level of data structure), going into array to find the year - let years = "2018-2022"; - if ( - Object.keys(statePerformance).length !== 0 && - Array(Array(Array(Object.values(statePerformance)[0])[0])[0])[0] - ) { - years = Array(Array(Array(Object.values(statePerformance)[0])[0])[0])[0][0].years; - } + const classes = useStyles(); return (
@@ -160,7 +165,7 @@ const EQIPTotalMap = ({ statePerformance, allStates }: { statePerformance: any; {maxValue !== 0 ? ( ) : (
- {titleElement(category, years)} + {titleElement(category, year)} - {category} data in {years} is unavailable for all states. + {category} data in {year} is unavailable for all states.
@@ -186,6 +191,8 @@ const EQIPTotalMap = ({ statePerformance, allStates }: { statePerformance: any; allStates={allStates} statePerformance={statePerformance} colorScale={colorScale} + year={year} + stateCodes={stateCodes} />
diff --git a/src/components/eqip/EQIPTotalTable.tsx b/src/components/eqip/EQIPTotalTable.tsx index 7bbf96db..5341df8a 100644 --- a/src/components/eqip/EQIPTotalTable.tsx +++ b/src/components/eqip/EQIPTotalTable.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, compareWithPercentSign } from "../shared/TableCompareFunctions"; const Styles = styled.div` padding: 1rem; @@ -126,38 +127,29 @@ function Table({ columns, data }: { columns: any; data: any }) { ); } -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(",", "")); - 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 App({ statePerformance, year, stateCodes }: { statePerformance: any; year:string; stateCodes:any }): JSX.Element { const eqipTableData: any[] = []; // eslint-disable-next-line no-restricted-syntax - for (const [key, value] of Object.entries(statePerformance)) { + statePerformance[year].forEach((value) => { const newRecord = () => { + let stateName = ""; + stateCodes.forEach((sValue) => { + if (sValue.code.toUpperCase() === value.state.toUpperCase()) { + stateName = sValue.name; + } + }); return { - state: key, - eqipBenefit: `$${value[0].totalPaymentInDollars + state: stateName, + eqipBenefit: `$${value.totalPaymentInDollars .toLocaleString(undefined, { minimumFractionDigits: 2 }) .toString()}`, - percentage: `${value[0].totalPaymentInPercentageNationwide.toString()}%` + percentage: `${value.totalPaymentInPercentageNationwide.toString()}%` }; }; eqipTableData.push(newRecord()); - } + }); const columns = React.useMemo( () => [ diff --git a/src/pages/EQIPPage.tsx b/src/pages/EQIPPage.tsx index e6603550..4e35203d 100644 --- a/src/pages/EQIPPage.tsx +++ b/src/pages/EQIPPage.tsx @@ -171,12 +171,17 @@ export default function EQIPPage(): JSX.Element { - {/* - - */} + + - + Date: Wed, 14 Feb 2024 15:23:33 -0600 Subject: [PATCH 3/9] switch endpoints on all conservation pages except csp --- src/components/acep/ACEPTable.tsx | 11 +-- src/components/acep/ACEPTotalMap.tsx | 9 ++- src/components/crp/CRPTotalTable.tsx | 4 +- src/components/crp/CategoryMap.tsx | 4 +- src/components/crp/CategoryTable.tsx | 12 ++-- src/components/csp/CategoryMap.tsx | 83 ++++++++++------------- src/components/eqip/CategoryMap.tsx | 3 - src/components/rcpp/RCPPTotalMap.tsx | 2 +- src/components/rcpp/RCPPTotalTable.tsx | 9 ++- src/pages/ACEPPage.tsx | 6 +- src/pages/CRPPage.tsx | 22 +++--- src/pages/CSPPage.tsx | 93 ++++++++++++++++++++++---- src/pages/CropInsurancePage.tsx | 1 - src/pages/EQIPPage.tsx | 15 ++--- src/pages/RCPPPage.tsx | 6 +- src/utils/legendConfig.json | 2 +- 16 files changed, 168 insertions(+), 114 deletions(-) diff --git a/src/components/acep/ACEPTable.tsx b/src/components/acep/ACEPTable.tsx index 734812ac..4bd9d501 100644 --- 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 index 2dfb059b..4b4329d1 100644 --- 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 ? ( ) : (
- {titleElement(category, years)} + {titleElement(category, year)} - {category} data in {years} is unavailable for all states. + {category} data in {year} is unavailable for all states.
diff --git a/src/components/crp/CRPTotalTable.tsx b/src/components/crp/CRPTotalTable.tsx index f9509123..7442d16f 100644 --- a/src/components/crp/CRPTotalTable.tsx +++ b/src/components/crp/CRPTotalTable.tsx @@ -152,10 +152,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()}`, diff --git a/src/components/crp/CategoryMap.tsx b/src/components/crp/CategoryMap.tsx index 64ea8d7e..25918c3c 100644 --- a/src/components/crp/CategoryMap.tsx +++ b/src/components/crp/CategoryMap.tsx @@ -81,8 +81,8 @@ const MapChart = (props) => { } else { categoryRecord = FCur; } - const categoryPayment = categoryRecord.paymentInDollars; - const nationwidePercentage = categoryRecord.paymentInPercentageNationwide; + const categoryPayment = categoryRecord.totalPaymentInDollars; + const nationwidePercentage = categoryRecord.totalPaymentInPercentageNationwide; const hoverContent = (
diff --git a/src/components/crp/CategoryTable.tsx b/src/components/crp/CategoryTable.tsx index af0504a0..92455f62 100644 --- a/src/components/crp/CategoryTable.tsx +++ b/src/components/crp/CategoryTable.tsx @@ -161,9 +161,9 @@ function App({ let stateName; // let percentageValue = 0; - // if (Number.parseInt(totalCrp.paymentInDollars, 10) > 0) { + // if (Number.parseInt(totalCrp.totalPaymentInDollars, 10) > 0) { // percentageValue = - // (Number.parseInt(categoryCrp.paymentInDollars, 10) / Number.parseInt(totalCrp.paymentInDollars, 10)) * + // (Number.parseInt(categoryCrp.totalPaymentInDollars, 10) / Number.parseInt(totalCrp.totalPaymentInDollars, 10)) * // 100; // } @@ -175,16 +175,16 @@ function App({ const newRecord = () => { return { state: stateName, - categoryBenefit: `$${categoryCrp.paymentInDollars + categoryBenefit: `$${categoryCrp.totalPaymentInDollars .toLocaleString(undefined, { minimumFractionDigits: 2 }) .toString()}`, - categoryPercentage: `${categoryCrp.paymentInPercentageWithinState + categoryPercentage: `${categoryCrp.totalPaymentInPercentageWithinState .toLocaleString(undefined, { minimumFractionDigits: 2 }) .toString()}%`, - crpBenefit: `$${totalCrp.paymentInDollars + crpBenefit: `$${totalCrp.totalPaymentInDollars .toLocaleString(undefined, { minimumFractionDigits: 2 }) .toString()}`, - percentage: `${categoryCrp.paymentInPercentageNationwide.toString()}%` + percentage: `${categoryCrp.totalPaymentInPercentageNationwide.toString()}%` }; }; crpTableData.push(newRecord()); diff --git a/src/components/csp/CategoryMap.tsx b/src/components/csp/CategoryMap.tsx index 2e581ae8..8ab123b4 100644 --- a/src/components/csp/CategoryMap.tsx +++ b/src/components/csp/CategoryMap.tsx @@ -27,7 +27,7 @@ const offsets = { }; const MapChart = (props) => { - const { setReactTooltipContent, category, allStates, statePerformance, colorScale } = props; + const { setReactTooltipContent, category, allStates, statePerformance, stateCodes, colorScale, year} = props; let categoryRecord; const classes = useStyles(); return ( @@ -37,10 +37,13 @@ const MapChart = (props) => { {({ geographies }) => ( <> {geographies.map((geo) => { - if (!Object.keys(statePerformance).includes(geo.properties.name)) { + const record = statePerformance[year].filter( + (v) => stateCodes[v.state] === geo.properties.name + )[0]; + if (record === undefined || record.length === 0) { return null; } - const statuteRecord = statePerformance[geo.properties.name][0].statutes; + const statuteRecord = record.statutes; const ACur = statuteRecord.find((s) => s.statuteName === "2018 Practices"); const AArray = ACur.practiceCategories; const BCur = statuteRecord.find((s) => s.statuteName === "2014 Eligible Land"); @@ -53,18 +56,9 @@ const MapChart = (props) => { } else { categoryRecord = TotalArray.find((s) => s.practiceCategoryName === category); } - const categoryPayment = - category === "2018 Practices" || category === "2014 Eligible Land" - ? categoryRecord.statutePaymentInDollars - : categoryRecord.paymentInDollars; - const nationwidePercentage = - category === "2018 Practices" || category === "2014 Eligible Land" - ? categoryRecord.statutePaymentInPercentageNationwide - : categoryRecord.paymentInPercentageNationwide; - const withinStatePercentage = - category === "2018 Practices" || category === "2014 Eligible Land" - ? categoryRecord.statutePaymentInPercentageWithinState - : categoryRecord.paymentInPercentageWithinState; + const categoryPayment = categoryRecord.totalPaymentInDollars; + const nationwidePercentage = categoryRecord.totalPaymentInPercentageNationwide; + const withinStatePercentage = categoryRecord.totalPaymentInPercentageWithinState; const hoverContent = (
@@ -168,46 +162,37 @@ MapChart.propTypes = { const CategoryMap = ({ category, statePerformance, - allStates + allStates, + year, + stateCodes }: { category: string; statePerformance: any; allStates: any; + year: string; + stateCodes: any; }): JSX.Element => { const [content, setContent] = useState(""); - // issue158: since eqip and csp are using old data structure (i.e. year is not the first level of data structure), going into array to find the year - let years = "2018-2022"; - if ( - Object.keys(statePerformance).length !== 0 && - Array(Array(Array(Object.values(statePerformance)[0])[0])[0])[0] - ) { - years = Array(Array(Array(Object.values(statePerformance)[0])[0])[0])[0][0].years; - } - const title = `${category} Benefits from ${years}`; + + const title = `${category} Benefits from ${year}`; const quantizeArray: number[] = []; let categoryRecord = {}; - Object.values(statePerformance).map((value) => { - if (Array.isArray(value)) { - const statuteRecord = value[0].statutes; - const ACur = statuteRecord.find((s) => s.statuteName === "2018 Practices"); - const AArray = ACur.practiceCategories; - const BCur = statuteRecord.find((s) => s.statuteName === "2014 Eligible Land"); - const BArray = BCur.practiceCategories; - const TotalArray = AArray.concat(BArray); - if (category === "2018 Practices") { - categoryRecord = statuteRecord[0]; - } else if (category === "2014 Eligible Land") { - categoryRecord = statuteRecord[1]; - } else { - categoryRecord = TotalArray.find((s) => s.practiceCategoryName === category); - } - if (categoryRecord !== undefined) { - if (category === "2018 Practices" || category === "2014 Eligible Land") - quantizeArray.push(categoryRecord.statutePaymentInDollars); - else quantizeArray.push(categoryRecord.paymentInDollars); - } + statePerformance[year].map((value) => { + const statuteRecord = value.statutes; + const ACur = statuteRecord.find((s) => s.statuteName === "2018 Practices"); + const AArray = ACur.practiceCategories; + const BCur = statuteRecord.find((s) => s.statuteName === "2014 Eligible Land"); + const BArray = BCur.practiceCategories; + const TotalArray = AArray.concat(BArray); + + if (category === "2018 Practices") { + categoryRecord = statuteRecord[0]; + } else if (category === "2014 Eligible Land") { + categoryRecord = statuteRecord[1]; + } else { + categoryRecord = TotalArray.find((s) => s.practiceCategoryName === category); } - return null; + quantizeArray.push(categoryRecord.totalPaymentInDollars); }); const maxValue = Math.max(...quantizeArray); const mapColor = ["#F0F9E8", "#BAE4BC", "#7BCCC4", "#43A2CA", "#0868AC"]; @@ -228,7 +213,7 @@ const CategoryMap = ({ {maxValue !== 0 ? ( ) : (
- {titleElement(category, years)} + {titleElement(category, year)} - {category} data in {years} is unavailable for all states. + {category} data in {year} is unavailable for all states.
diff --git a/src/components/eqip/CategoryMap.tsx b/src/components/eqip/CategoryMap.tsx index 48f22fb7..323bd6fc 100644 --- a/src/components/eqip/CategoryMap.tsx +++ b/src/components/eqip/CategoryMap.tsx @@ -37,9 +37,6 @@ const MapChart = (props) => { <> {geographies.map((geo) => { if (statePerformance !== undefined) { - // if (!Object.keys(statePerformance).includes(geo.properties.name)) { - // return null; - // } const record = statePerformance[year].filter( (v) => stateCodes[v.state] === geo.properties.name )[0]; diff --git a/src/components/rcpp/RCPPTotalMap.tsx b/src/components/rcpp/RCPPTotalMap.tsx index e6b20a9f..9ae14cb7 100644 --- a/src/components/rcpp/RCPPTotalMap.tsx +++ b/src/components/rcpp/RCPPTotalMap.tsx @@ -39,7 +39,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; diff --git a/src/components/rcpp/RCPPTotalTable.tsx b/src/components/rcpp/RCPPTotalTable.tsx index 0ac0232d..9656b4b3 100644 --- a/src/components/rcpp/RCPPTotalTable.tsx +++ b/src/components/rcpp/RCPPTotalTable.tsx @@ -141,12 +141,17 @@ function App({ // eslint-disable-next-line no-restricted-syntax statePerformance[year].forEach((value) => { const totalRcpp = value.programs.find((s) => s.programName === "RCPP"); - const stateName = value.state; + let stateName; + stateCodes.forEach((sValue) => { + if (sValue.code.toUpperCase() === value.state.toUpperCase()) { + stateName = sValue.name; + } + }); const newRecord = () => { return { state: stateName, rcppBenefit: `$${ - totalRcpp.paymentInDollars + totalRcpp.totalPaymentInDollars .toLocaleString(undefined, { minimumFractionDigits: 2 }) .toString() .split(".")[0] diff --git a/src/pages/ACEPPage.tsx b/src/pages/ACEPPage.tsx index 31f85635..f31b67f9 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/state-distribution`; getJsonDataFromUrl(chartData_url).then((response) => { processData(response); }); @@ -235,7 +235,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 647809a8..49f2431a 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 acafbe9d..687d7721 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,47 @@ 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 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); + // }); + + // const chartData_url = `${config.apiUrl}/programs/conservation/csp/practice-categories`; + // getJsonDataFromUrl(chartData_url).then((response) => { + // processData(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 +206,7 @@ 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 ? ( @@ -196,7 +225,7 @@ export default function CSPPage(): JSX.Element { display: checked !== 0 ? "none" : "block" }} > - + {/* */} @@ -239,6 +272,8 @@ export default function CSPPage(): JSX.Element { category="Vegetative" statePerformance={statePerformance} allStates={allStates} + year={csp_year} + stateCodes={stateCodesData} /> @@ -268,6 +305,8 @@ export default function CSPPage(): JSX.Element { category="Forest management" statePerformance={statePerformance} allStates={allStates} + year={csp_year} + stateCodes={stateCodesData} /> - + @@ -349,6 +402,8 @@ export default function CSPPage(): JSX.Element { category="2014 Eligible Land" statePerformance={statePerformance} allStates={allStates} + year={csp_year} + stateCodes={stateCodesData} /> @@ -483,7 +550,7 @@ export default function CSPPage(): JSX.Element { Performance by States - + {/* @@ -544,7 +611,7 @@ export default function CSPPage(): JSX.Element { category="Other: supplemental, adjustment & other" statePerformance={statePerformance} /> - + */} ) : ( diff --git a/src/pages/CropInsurancePage.tsx b/src/pages/CropInsurancePage.tsx index 41454fa4..0f16d3ad 100644 --- a/src/pages/CropInsurancePage.tsx +++ b/src/pages/CropInsurancePage.tsx @@ -44,7 +44,6 @@ 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); diff --git a/src/pages/EQIPPage.tsx b/src/pages/EQIPPage.tsx index 4e35203d..3f4f41f9 100644 --- a/src/pages/EQIPPage.tsx +++ b/src/pages/EQIPPage.tsx @@ -45,9 +45,8 @@ export default function EQIPPage(): JSX.Element { 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`; - https: getJsonDataFromUrl(state_perf_url).then((response) => { + getJsonDataFromUrl(state_perf_url).then((response) => { const converted_perf_json = response; setStatePerformance(converted_perf_json); }); @@ -349,25 +348,25 @@ export default function EQIPPage(): JSX.Element { {aTotal >= 0 || bTotal >= 0 ? (
- {/* */} + /> = 1 && checked <= 7 ? "block" : "none" }}> - {/* */} + /> = 8 ? "block" : "none" }}> - {/* */} + />
) : null} diff --git a/src/pages/RCPPPage.tsx b/src/pages/RCPPPage.tsx index e91e8677..be7b50b9 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/state-distribution`; 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/utils/legendConfig.json b/src/utils/legendConfig.json index df154333..5286ab92 100644 --- a/src/utils/legendConfig.json +++ b/src/utils/legendConfig.json @@ -69,5 +69,5 @@ "Grassland-CRP":[10000, 100000, 500000, 10000000], "Total ACEP": [5000000, 10000000, 50000000, 100000000], - "Total RCPP": [1000000, 5000000, 10000000, 20000000] + "Total RCPP": [1000000, 5000000, 10000000, 15000000] } From 88250797c2c3bbcdde5bf365b9280945bdba95bb Mon Sep 17 00:00:00 2001 From: "Wendy(Pengyin) Shan" Date: Mon, 19 Feb 2024 16:38:22 -0600 Subject: [PATCH 4/9] 0.16.0 updates --- CHANGELOG.md | 13 +++ src/components/LandingDisplay.tsx | 2 +- src/components/ProgramDrawer.tsx | 50 +++++++-- src/components/acep/ACEPTable.tsx | 10 +- src/components/acep/TreeMapSquares.tsx | 8 +- src/components/crp/CRPTotalTable.tsx | 1 - src/components/csp/CSPTotalMap.tsx | 46 ++++---- src/components/csp/CSPTotalTable.tsx | 45 ++++---- src/components/csp/CategoryMap.tsx | 11 +- src/components/csp/CategoryTable.tsx | 107 +++++++++---------- src/components/eqip/CategoryMap.tsx | 2 +- src/components/eqip/CategoryTable.tsx | 23 +--- src/components/eqip/EQIPTotalMap.tsx | 2 +- src/components/eqip/EQIPTotalTable.tsx | 23 ++-- src/main.tsx | 2 + src/pages/ACEPPage.tsx | 5 +- src/pages/CSPPage.tsx | 141 +++++++++++++++++++------ src/pages/EQIPPage.tsx | 3 +- src/pages/RCPPPage.tsx | 2 +- src/pages/TitleIIPage.tsx | 113 ++++++++++++++++++++ src/pages/TitleIPage.tsx | 7 +- 21 files changed, 415 insertions(+), 201 deletions(-) create mode 100644 src/pages/TitleIIPage.tsx diff --git a/CHANGELOG.md b/CHANGELOG.md index 6acbc9fb..b25f06e8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,19 @@ 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). +## [unreleased] + +### 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) + +### Changed +- Updated Title I, Title II and Crop Insurance to use new API endpoints [#249](https://github.com/policy-design-lab/pdl-frontend/issues/249) +- 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) + +### 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 diff --git a/src/components/LandingDisplay.tsx b/src/components/LandingDisplay.tsx index 0a3e8b50..50aca69c 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 = (