Skip to content

Commit

Permalink
Merge pull request #291 from policy-design-lab/release-1.0.1
Browse files Browse the repository at this point in the history 
Release 1.0.1
  • Loading branch information
@pengyin-shan
pengyin-shan authored Jul 19, 2024
2 parents ae1a9d6 + 8bf6819 commit 0f8f845
Show file tree
Hide file tree
Showing 9 changed files with 187 additions and 92 deletions.
12 changes: 12 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,17 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).

## [1.0.1] - 2024-07-19

### Added
- Added the percentage display into the EQIP IRA map tips [#285](https://github.com/policy-design-lab/pdl-frontend/issues/285)

### Changed
- Update the practice list to reflect current and predicted practices for EQIP IRA[#286](https://github.com/policy-design-lab/pdl-frontend/issues/286)

### Fixed
- Fixed the NaN values in percentage table in the EQIP IRA page [#290](https://github.com/policy-design-lab/pdl-frontend/issues/290)

## [1.0.0] - 2024-07-03

### Added
Expand Down Expand Up @@ -246,6 +257,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)

[1.0.1]: https://github.com/policy-design-lab/pdl-frontend/compare/1.0.0...1.0.1
[1.0.0]: https://github.com/policy-design-lab/pdl-frontend/compare/0.20.0...1.0.0
[0.20.0]: https://github.com/policy-design-lab/pdl-frontend/compare/0.19.0...0.20.0
[0.19.0]: https://github.com/policy-design-lab/pdl-frontend/compare/0.18.0...0.19.0
Expand Down
2 changes: 1 addition & 1 deletion package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "policy-design-lab",
"version": "1.0.0",
"version": "1.0.1",
"description": "the front end of policy design lab",
"repository": "https://github.com/policy-design-lab/pdl-frontend",
"main": "src/app.tsx",
Expand Down
71 changes: 50 additions & 21 deletions src/components/ira/IRAMap.tsx → src/components/ira/IRADollarMap.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,8 @@ const MapChart = ({
statePerformance,
stateCodes,
allStates,
colorScale
colorScale,
summary
}) => {
const classes = useStyles();
const geoUrl = "https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json";
Expand Down Expand Up @@ -72,6 +73,20 @@ const MapChart = ({
}
});
}
// calculate the total of all practices and get the percentage of the practices
const totalNationwidePayment = practices.includes("Total")
? summary[year].totalPaymentInDollars
: summary[year].practices
.filter((p) => practices.includes(p.practiceName))
.reduce((acc, p) => acc + p.totalPaymentInDollars, 0);
let totalPaymentPercentageNationwide = (
(practicePayment / totalNationwidePayment) *
100
).toFixed(2);
totalPaymentPercentageNationwide =
totalPaymentPercentageNationwide === "NaN"
? "0"
: totalPaymentPercentageNationwide;
const hoverContent = (
<div className="map_tooltip">
<div className={classes.tooltip_header}>
Expand All @@ -80,14 +95,24 @@ const MapChart = ({
<table className={classes.tooltip_table}>
<tbody key={geo.properties.name}>
{practices.includes("Total") ? (
<tr style={topTipStyle}>
<td className={classes.tooltip_topcell_left}>
Total Benefits:
</td>
<td className={classes.tooltip_topcell_right}>
${ShortFormat(practicePayment, undefined, 2)}
</td>
</tr>
<span>
<tr style={topTipStyle}>
<td className={classes.tooltip_topcell_left}>
Total Benefits:
</td>
<td className={classes.tooltip_topcell_right}>
${ShortFormat(practicePayment, undefined, 2)}
</td>
</tr>
<tr style={topTipStyle}>
<td className={classes.tooltip_bottomcell_left}>
PCT. Nationwide:
</td>
<td className={classes.tooltip_bottomcell_right}>
{totalPaymentPercentageNationwide}%
</td>
</tr>
</span>
) : (
<span>
{practices.length > 1 &&
Expand Down Expand Up @@ -175,17 +200,18 @@ const MapChart = ({
</td>
</tr>
)}
<tr style={topTipStyle}>
<td className={classes.tooltip_bottomcell_left}>
{practices.length === 1
? "PCT. Nationwide:"
: "PCT. Nationwide (All Practices):"}
</td>
<td className={classes.tooltip_bottomcell_right}>
{totalPaymentPercentageNationwide}%
</td>
</tr>
</span>
)}

{/* <tr>
<td className={classes.tooltip_regularcell_left}>
PCT. Nationwide:
</td>
<td className={classes.tooltip_regularcell_right}>
{totalPaymentInPercentage} %
</td>
</tr> */}
</tbody>
</table>
{/* )} */}
Expand Down Expand Up @@ -393,15 +419,16 @@ MapChart.propTypes = {
maxValue: PropTypes.number
};

const IRAMap = ({
const IRADollarMap = ({
subtitle,
practices,
predict,
year,
mapColor,
statePerformance,
stateCodes,
allStates
allStates,
summary
}: {
subtitle: string;
practices: any;
Expand All @@ -411,6 +438,7 @@ const IRAMap = ({
statePerformance: any;
stateCodes: any;
allStates: any;
summary: any;
}): JSX.Element => {
const [content, setContent] = useState("");
const quantizeArray: number[] = [];
Expand Down Expand Up @@ -524,6 +552,7 @@ const IRAMap = ({
stateCodes={stateCodes}
allStates={allStates}
colorScale={colorScale}
summary={summary}
/>
<div className="tooltip-container">
<ReactTooltip className={`${classes.customized_tooltip} tooltip`} backgroundColor={tooltipBkgColor}>
Expand All @@ -550,4 +579,4 @@ const titleElement = ({ subtitle, year }): JSX.Element => {
</Box>
);
};
export default IRAMap;
export default IRADollarMap;
1 change: 1 addition & 0 deletions src/components/ira/IRAPercentageTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -165,6 +165,7 @@ function IRAPercentageTable({
} else {
newRecord[attr] = "0";
}
newRecord[attr] = newRecord[attr].includes("NaN") ? "0.00%" : newRecord[attr];
});
resultData.push(newRecord);
});
Expand Down
1 change: 0 additions & 1 deletion src/components/ira/IRAPredictedDollarTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,6 @@ function IRAPredictedDollarTable({
});
resultData.push(newRecord);
});

const columnPrep = [];
columnPrep.push({ Header: "STATE", accessor: "state", sortType: compareWithAlphabetic });
const attrs = resultData[0] ? Object.keys(resultData[0]).filter((item) => item.toLowerCase() !== "state") : [];
Expand Down
55 changes: 45 additions & 10 deletions src/components/ira/IRAPredictedMap.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,8 @@ const MapChart = ({
predictedPerformance,
stateCodes,
allStates,
colorScale
colorScale,
summary
}) => {
const classes = useStyles();
return (
Expand Down Expand Up @@ -69,6 +70,17 @@ const MapChart = ({
}
});
}
const totalNationwidePayment = practices.includes("Total")
? summary[year].predictedTotalPaymentInDollars
: summary[year].practices
.filter((p) => practices.includes(p.practiceName))
.reduce((acc, p) => acc + p.predictedTotalPaymentInDollars, 0);
let totalPaymentPercentageNationwide = (
(practicePayment / totalNationwidePayment) *
100
).toFixed(2);
totalPaymentPercentageNationwide =
totalPaymentPercentageNationwide === "NaN" ? "0" : totalPaymentPercentageNationwide;
const hoverContent = (
<div className="map_tooltip">
<div className={classes.tooltip_header}>
Expand All @@ -77,14 +89,24 @@ const MapChart = ({
<table className={classes.tooltip_table}>
<tbody key={geo.properties.name}>
{practices.includes("Total") ? (
<tr style={topTipStyle}>
<td className={classes.tooltip_topcell_left}>
Total Predicted Benefits:
</td>
<td className={classes.tooltip_topcell_right}>
${ShortFormat(practicePayment, undefined, 2)}
</td>
</tr>
<span>
<tr style={topTipStyle}>
<td className={classes.tooltip_topcell_left}>
Total Predicted Benefits:
</td>
<td className={classes.tooltip_topcell_right}>
${ShortFormat(practicePayment, undefined, 2)}
</td>
</tr>
<tr style={topTipStyle}>
<td className={classes.tooltip_bottomcell_left}>
PCT. Nationwide:
</td>
<td className={classes.tooltip_bottomcell_right}>
{totalPaymentPercentageNationwide}%
</td>
</tr>
</span>
) : (
<span>
{practices.length > 1 &&
Expand Down Expand Up @@ -164,6 +186,16 @@ const MapChart = ({
</td>
</tr>
)}
<tr style={topTipStyle}>
<td className={classes.tooltip_bottomcell_left}>
{practices.length === 1
? "PCT. Nationwide:"
: "PCT. Nationwide (All Practices):"}
</td>
<td className={classes.tooltip_bottomcell_right}>
{totalPaymentPercentageNationwide}%
</td>
</tr>
</span>
)}
</tbody>
Expand Down Expand Up @@ -250,7 +282,8 @@ const IRAPredictedMap = ({
mapColor,
predictedPerformance,
stateCodes,
allStates
allStates,
summary
}: {
subtitle: string;
practices: any;
Expand All @@ -260,6 +293,7 @@ const IRAPredictedMap = ({
predictedPerformance: any;
stateCodes: any;
allStates: any;
summary: any;
}): JSX.Element => {
const [content, setContent] = useState("");
const quantizeArray: number[] = [];
Expand Down Expand Up @@ -339,6 +373,7 @@ const IRAPredictedMap = ({
stateCodes={stateCodes}
allStates={allStates}
colorScale={colorScale}
summary={summary}
/>
<div className="tooltip-container">
<ReactTooltip className={`${classes.customized_tooltip} tooltip`} backgroundColor={tooltipBkgColor}>
Expand Down
Loading

0 comments on commit 0f8f845

Please sign in to comment.