diff --git a/src/pages/policy/output/PolicyBreakdown.jsx b/src/pages/policy/output/PolicyBreakdown.jsx index b27e8e04e..08ef94c37 100644 --- a/src/pages/policy/output/PolicyBreakdown.jsx +++ b/src/pages/policy/output/PolicyBreakdown.jsx @@ -1,11 +1,22 @@ +import { useSearchParams } from "react-router-dom"; import style from "../../../style"; +import { motion } from "framer-motion"; export default function PolicyBreakdown(props) { const { policyLabel, metadata, impact, timePeriod, region } = props; + const [searchParams, setSearchParams] = useSearchParams(); const regionObj = metadata.economy_options.region.find( (elem) => elem.name === region, ); + + const handleItemClick = (focusTarget) => { + let newSearch = new URLSearchParams(searchParams); + + newSearch.set("focus", focusTarget); + + setSearchParams(newSearch); + }; let regionLabel; // This is a workaround for enhanced_us that should be changed // if and when it is treated as something other than a "region" @@ -42,6 +53,7 @@ export default function PolicyBreakdown(props) { { value: budgetaryImpact, type: "budgetaryImpact", + focusTarget: "policyOutput.budgetaryImpact.overall", formatOptions: { currencyLabel: metadata.currency, }, @@ -49,6 +61,7 @@ export default function PolicyBreakdown(props) { { value: povertyRateChange, type: "povertyRateChange", + focusTarget: "policyOutput.povertyImpact.regular.byAge", formatOptions: { percentage: true, signFlip: true, @@ -57,6 +70,7 @@ export default function PolicyBreakdown(props) { { value: decileOverview, type: "winnersLosersPercent", + focusTarget: "policyOutput.winnersAndLosers.incomeDecile", }, ]; @@ -67,6 +81,7 @@ export default function PolicyBreakdown(props) { data={listItems} title={title} bottomText={bottomText} + onItemClick={handleItemClick} /> > ); @@ -82,7 +97,7 @@ export default function PolicyBreakdown(props) { * @returns {import("react-markdown/lib/react-markdown").ReactElement} */ function BreakdownTemplate(props) { - const { data, title, bottomText } = props; + const { data, title, bottomText, onItemClick } = props; const COLORS = { pos: style.colors.BLUE, @@ -104,7 +119,7 @@ function BreakdownTemplate(props) { gap: "20px", }} > - {formatWinnersLosers(item.value)} + {formatWinnersLosers(item, onItemClick)} ); } @@ -131,6 +146,7 @@ function BreakdownTemplate(props) { } const [descStart, descEnd] = formatDesc(item.value, item.type); + const focusTarget = item.focusTarget; const formattedValue = formatValue( item.value, item.type, @@ -148,10 +164,16 @@ function BreakdownTemplate(props) { gap: "20px", }} > -