+ {allStates.length > 0 && statePerformance.Wisconsin !== undefined ? (
+
+
+ {({ geographies }) => (
+ <>
+ {geographies.map((geo) => {
+ if (!Object.keys(statePerformance).includes(geo.properties.name)) {
+ return null;
+ }
+ const record = statePerformance[geo.properties.name][0];
+ const totalPaymentInDollars = record.totalPaymentInDollars;
+ const totalPaymentInPercentageNationwide =
+ record.totalPaymentInPercentageNationwide;
+ const hoverContent = (
+
+
+ {geo.properties.name}
+
+
+ {Number(totalPaymentInDollars) < 1000000
+ ? `$${Number(
+ Number(totalPaymentInDollars) / 1000.0
+ ).toLocaleString(undefined, {
+ maximumFractionDigits: 2
+ })}K`
+ : `$${Number(
+ Number(totalPaymentInDollars) / 1000000.0
+ ).toLocaleString(undefined, {
+ maximumFractionDigits: 2
+ })}M`}
+
+
+
+ {totalPaymentInPercentageNationwide
+ ? `${totalPaymentInPercentageNationwide} %`
+ : "0%"}
+
+
+
+
+ );
+ const fillColour = () => {
+ if (totalPaymentInDollars) {
+ if (totalPaymentInDollars !== 0) return colorScale(totalPaymentInDollars);
+ return "#D2D2D2";
+ }
+ return "#D2D2D2";
+ };
+ return (
+ {
+ setTooltipContent(hoverContent);
+ }}
+ onMouseLeave={() => {
+ setTooltipContent("");
+ }}
+ fill={fillColour()}
+ stroke="#FFF"
+ style={{
+ default: { stroke: "#FFFFFF", strokeWidth: 0.75, outline: "none" },
+ hover: {
+ stroke: "#232323",
+ strokeWidth: 2,
+ outline: "none"
+ },
+ pressed: {
+ fill: "#345feb",
+ outline: "none"
+ }
+ }}
+ />
+ );
+ })}
+ {geographies.map((geo) => {
+ const centroid = geoCentroid(geo);
+ const cur = allStates.find((s) => s.val === geo.id);
+ return (
+
+ {cur &&
+ centroid[0] > -160 &&
+ centroid[0] < -67 &&
+ (Object.keys(offsets).indexOf(cur.id) === -1 ? (
+
+
+ {cur.id}
+
+
+ ) : (
+
+
+ {cur.id}
+
+
+ ))}
+
+ );
+ })}
+
+ )}
+
+
+ ) : (
+
+ Loading Map Data...
+
+ )}
+
+ Showing the first {rows.length} results of {rows.length} rows
+
+
+ );
+}
+
+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 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;
+ }
+
+ const cspTableData: any[] = [];
+
+ // eslint-disable-next-line no-restricted-syntax
+ for (const [key, value] of Object.entries(statePerformance)) {
+ const newRecord = () => {
+ return {
+ state: key,
+ cspBenefit: `$${value[0].totalPaymentInDollars
+ .toLocaleString(undefined, { minimumFractionDigits: 2 })
+ .toString()}`,
+ percentage: `${value[0].totalPaymentInPercentageNationwide.toString()}%`
+ };
+ };
+ cspTableData.push(newRecord());
+ }
+
+ const columns = React.useMemo(
+ () => [
+ {
+ Header:
+ Showing the first {rows.length} results of {rows.length} rows
+
+
+ );
+}
+
+function App({ category, statePerformance }: { category: string; statePerformance: any }): JSX.Element {
+ const cspTableData: any[] = [];
+ let categoryRecord = [];
+ // eslint-disable-next-line no-restricted-syntax
+ for (const [key, value] of Object.entries(statePerformance)) {
+ 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) {
+ const paymentInDollars =
+ category === "2018 Practices" || category === "2014 Eligible Land"
+ ? categoryRecord.statutePaymentInDollars
+ : categoryRecord.paymentInDollars;
+ const paymentInPercentageWithinState =
+ category === "2018 Practices" || category === "2014 Eligible Land"
+ ? categoryRecord.statutePaymentInPercentageWithinState
+ : categoryRecord.paymentInPercentageWithinState;
+ const newRecord = () => {
+ return {
+ state: key,
+ categoryBenefit: `$${Number(paymentInDollars).toLocaleString(undefined, {
+ minimumFractionDigits: 2
+ })}`,
+ categoryPercentage: `${paymentInPercentageWithinState.toString()}%`,
+ cspBenefit: `$${value[0].totalPaymentInDollars.toLocaleString(undefined, {
+ minimumFractionDigits: 2
+ })}`,
+ percentage: `${value[0].totalPaymentInPercentageNationwide.toString()}%`
+ };
+ };
+ cspTableData.push(newRecord());
+ }
+ }
+ }
+
+ 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;
+ }
+
+ const columns = React.useMemo(
+ () => [
+ {
+ Header: (
+