-
Notifications
You must be signed in to change notification settings - Fork 123
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2370 from PolicyEngine/nikhilwoodruff/issue2369
Add UK Parliamentary constituencies
- Loading branch information
Showing
9 changed files
with
617 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
123 changes: 123 additions & 0 deletions
123
src/pages/policy/output/constituencies/AverageChangeByConstituency.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,123 @@ | ||
| import Plot from "react-plotly.js"; | ||
| import { ChartLogo } from "../../../../api/charts"; | ||
| import { localeCode, formatCurrency } from "../../../../lang/format"; | ||
| import style from "../../../../style"; | ||
| import React from "react"; | ||
| import ImpactChart from "../ImpactChart"; | ||
| import { title } from "./WinnersLosersByConstituency"; | ||
|
|
||
| export function ImpactPlot(props) { | ||
| const { data, metadata, mobile } = props; | ||
|
|
||
| let xValues = Object.values(data).map((item) => item.x); | ||
| const constituencyNames = Object.keys(data); | ||
| let text = []; | ||
| const yValues = Object.values(data).map((item) => item.y); | ||
| const colorValues = Object.values(data).map( | ||
| (item) => item.average_household_income_change, | ||
| ); | ||
| let valueStr; | ||
| for (let i = 0; i < xValues.length; i++) { | ||
| if (yValues[i] % 2 === 0) { | ||
| xValues[i] = xValues[i] + 0.5; | ||
| } | ||
| valueStr = formatCurrency(colorValues[i], metadata.countryId); | ||
| text.push(`${constituencyNames[i]}: ${valueStr}`); | ||
| } | ||
| const maxAbsValue = Math.max(...colorValues.map(Math.abs)); | ||
| return ( | ||
| <Plot | ||
| data={[ | ||
| { | ||
| type: "scatter", | ||
| mode: "markers", | ||
| x: xValues, | ||
| y: yValues, | ||
| text: text, | ||
| marker: { | ||
| color: colorValues, | ||
| symbol: "hexagon", | ||
| size: 12, | ||
| coloraxis: "coloraxis", | ||
| }, | ||
| showscale: true, | ||
| hoverinfo: "text", | ||
| }, | ||
| ]} | ||
| layout={{ | ||
| xaxis: { | ||
| visible: false, | ||
| showgrid: false, | ||
| showline: false, | ||
| }, | ||
| yaxis: { | ||
| visible: false, | ||
| showgrid: false, | ||
| showline: false, | ||
| }, | ||
| height: 600, | ||
| showlegend: false, | ||
| coloraxis: { | ||
| showscale: true, | ||
| cmin: -maxAbsValue, | ||
| cmax: maxAbsValue, | ||
| colorbar: { | ||
| outlinewidth: 0, | ||
| thickness: 10, | ||
| tickformat: "$,.0f", | ||
| }, | ||
| colorscale: [ | ||
| [0, style.colors.DARK_GRAY], | ||
| [0.2, style.colors.MEDIUM_LIGHT_GRAY], | ||
| [0.4, style.colors.LIGHT_GRAY], | ||
| [0.6, style.colors.BLUE_LIGHT], | ||
| [1, style.colors.BLUE], | ||
| ], | ||
| }, | ||
| margin: { | ||
| t: 0, | ||
| b: 80, | ||
| l: 80, | ||
| r: 0, | ||
| }, | ||
| ...ChartLogo(1.1, -0.05), | ||
| }} | ||
| style={{ | ||
| width: "90%", | ||
| marginLeft: 20, | ||
| marginBottom: !mobile && 50, | ||
| }} | ||
| config={{ | ||
| displayModeBar: false, | ||
| responsive: true, | ||
| locale: localeCode(metadata.countryId), | ||
| }} | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| export default function AverageChangeByConstituency(props) { | ||
| const { impact, policyLabel, metadata, mobile } = props; | ||
|
|
||
| const chart = ( | ||
| <ImpactChart title={title(policyLabel, impact)}> | ||
| <ImpactPlot | ||
| data={impact?.constituency_impact?.by_constituency} | ||
| metadata={metadata} | ||
| mobile={mobile} | ||
| /> | ||
| </ImpactChart> | ||
| ); | ||
| const csv = () => { | ||
| const header = ["Constituency", "Average Change"]; | ||
| const constituencyData = impact?.constituency_impact?.by_constituency || {}; | ||
| const data = [ | ||
| header, | ||
| ...Object.entries(constituencyData).map(([constituency, data]) => { | ||
| return [constituency, data.average_household_income_change]; | ||
| }), | ||
| ]; | ||
| return data; | ||
| }; | ||
| return { chart: chart, csv: csv }; | ||
| } |
125 changes: 125 additions & 0 deletions
125
src/pages/policy/output/constituencies/RelativeChangeByConstituency.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,125 @@ | ||
| import Plot from "react-plotly.js"; | ||
| import { ChartLogo } from "../../../../api/charts"; | ||
| import { localeCode, formatPercent } from "../../../../lang/format"; | ||
| import style from "../../../../style"; | ||
| import React from "react"; | ||
| import ImpactChart from "../ImpactChart"; | ||
| import { title } from "./WinnersLosersByConstituency"; | ||
|
|
||
| export function ImpactPlot(props) { | ||
| const { data, metadata, mobile } = props; | ||
|
|
||
| let xValues = Object.values(data).map((item) => item.x); | ||
| const constituencyNames = Object.keys(data); | ||
| let text = []; | ||
| const yValues = Object.values(data).map((item) => item.y); | ||
| const colorValues = Object.values(data).map( | ||
| (item) => item.relative_household_income_change, | ||
| ); | ||
| let valueStr; | ||
| for (let i = 0; i < xValues.length; i++) { | ||
| if (yValues[i] % 2 === 0) { | ||
| xValues[i] = xValues[i] + 0.5; | ||
| } | ||
| valueStr = formatPercent(colorValues[i], metadata.countryId, { | ||
| minimumFractionDigits: 1, | ||
| }); | ||
| text.push(`${constituencyNames[i]}: ${valueStr}`); | ||
| } | ||
| const maxAbsValue = Math.max(...colorValues.map(Math.abs)); | ||
| return ( | ||
| <Plot | ||
| data={[ | ||
| { | ||
| type: "scatter", | ||
| mode: "markers", | ||
| x: xValues, | ||
| y: yValues, | ||
| text: text, | ||
| marker: { | ||
| color: colorValues, | ||
| symbol: "hexagon", | ||
| size: 12, | ||
| coloraxis: "coloraxis", | ||
| }, | ||
| showscale: true, | ||
| hoverinfo: "text", | ||
| }, | ||
| ]} | ||
| layout={{ | ||
| xaxis: { | ||
| visible: false, | ||
| showgrid: false, | ||
| showline: false, | ||
| }, | ||
| yaxis: { | ||
| visible: false, | ||
| showgrid: false, | ||
| showline: false, | ||
| }, | ||
| height: 600, | ||
| showlegend: false, | ||
| coloraxis: { | ||
| showscale: true, | ||
| cmin: -maxAbsValue, | ||
| cmax: maxAbsValue, | ||
| colorbar: { | ||
| outlinewidth: 0, | ||
| thickness: 10, | ||
| tickformat: ".1%", | ||
| }, | ||
| colorscale: [ | ||
| [0, style.colors.DARK_GRAY], | ||
| [0.2, style.colors.MEDIUM_LIGHT_GRAY], | ||
| [0.4, style.colors.LIGHT_GRAY], | ||
| [0.6, style.colors.BLUE_LIGHT], | ||
| [1, style.colors.BLUE], | ||
| ], | ||
| }, | ||
| margin: { | ||
| t: 0, | ||
| b: 80, | ||
| l: 80, | ||
| r: 0, | ||
| }, | ||
| ...ChartLogo(1.1, -0.05), | ||
| }} | ||
| style={{ | ||
| width: "90%", | ||
| marginLeft: 20, | ||
| marginBottom: !mobile && 50, | ||
| }} | ||
| config={{ | ||
| displayModeBar: false, | ||
| responsive: true, | ||
| locale: localeCode(metadata.countryId), | ||
| }} | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| export default function RelativeChangeByConstituency(props) { | ||
| const { impact, policyLabel, metadata, mobile } = props; | ||
|
|
||
| const chart = ( | ||
| <ImpactChart title={title(policyLabel, impact)}> | ||
| <ImpactPlot | ||
| data={impact?.constituency_impact?.by_constituency} | ||
| metadata={metadata} | ||
| mobile={mobile} | ||
| /> | ||
| </ImpactChart> | ||
| ); | ||
| const csv = () => { | ||
| const header = ["Constituency", "Relative Change"]; | ||
| const constituencyData = impact?.constituency_impact?.by_constituency || {}; | ||
| const data = [ | ||
| header, | ||
| ...Object.entries(constituencyData).map(([constituency, data]) => { | ||
| return [constituency, data.relative_household_income_change]; | ||
| }), | ||
| ]; | ||
| return data; | ||
| }; | ||
| return { chart: chart, csv: csv }; | ||
| } |
Oops, something went wrong.