Skip to content

Commit

Permalink
Merge pull request #673 from jacky5124/hovertemplate
Browse files Browse the repository at this point in the history 
Add `hovertemplate` for all plots
  • Loading branch information
@nikhilwoodruff
nikhilwoodruff authored Oct 12, 2023
2 parents 777d503 + 7138a4a commit 0a6b6e1
Show file tree
Hide file tree
Showing 19 changed files with 1,845 additions and 668 deletions.
216 changes: 153 additions & 63 deletions src/pages/household/output/EarningsVariation/BaselineAndReformChart.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,13 +147,14 @@ function BaselineAndReformTogetherPlot(props) {
metadata,
variable,
baselineValue,
useHoverCard = false,
} = props;
let data = [
...(variable === "household_net_income"
? getCliffs(baselineArray, earningsArray)
? getCliffs(baselineArray, earningsArray, false, "$", useHoverCard)
: []),
...(variable === "household_net_income"
? getCliffs(reformArray, earningsArray, true)
? getCliffs(reformArray, earningsArray, true, "$", useHoverCard)
: []),
{
x: earningsArray,
Expand All @@ -163,7 +164,17 @@ function BaselineAndReformTogetherPlot(props) {
line: {
color: style.colors.MEDIUM_DARK_GRAY,
},
hoverinfo: "none",
...(useHoverCard
? {
hoverinfo: "none",
}
: {
hovertemplate:
`<b>Baseline ${variableLabel}</b><br><br>` +
`If you earn %{x}, your baseline<br>` +
`${variableLabel} will be %{y}.` +
`<extra></extra>`,
}),
},
{
x: earningsArray,
Expand All @@ -173,7 +184,17 @@ function BaselineAndReformTogetherPlot(props) {
line: {
color: style.colors.BLUE,
},
hoverinfo: "none",
...(useHoverCard
? {
hoverinfo: "none",
}
: {
hovertemplate:
`<b>Reform ${variableLabel}</b><br><br>` +
`If you earn %{x}, your reform<br>` +
`${variableLabel} will be %{y}.` +
`<extra></extra>`,
}),
},
{
x: [currentEarnings],
Expand All @@ -184,7 +205,17 @@ function BaselineAndReformTogetherPlot(props) {
line: {
color: style.colors.BLUE,
},
hoverinfo: "none",
...(useHoverCard
? {
hoverinfo: "none",
}
: {
hovertemplate:
`<b>Your reform ${variableLabel}</b><br><br>` +
`If you earn %{x}, your reform<br>` +
`${variableLabel} will be %{y}.` +
`<extra></extra>`,
}),
},
{
x: [currentEarnings],
Expand All @@ -195,7 +226,17 @@ function BaselineAndReformTogetherPlot(props) {
line: {
color: style.colors.MEDIUM_DARK_GRAY,
},
hoverinfo: "none",
...(useHoverCard
? {
hoverinfo: "none",
}
: {
hovertemplate:
`<b>Your baseline ${variableLabel}</b><br><br>` +
`If you earn %{x}, your baseline<br>` +
`${variableLabel} will be %{y}.` +
`<extra></extra>`,
}),
},
];
const plotObject = (
Expand All @@ -222,6 +263,15 @@ function BaselineAndReformTogetherPlot(props) {
tickformat: ",.0f",
uirevision: metadata.variables.household_net_income.unit,
},
...(useHoverCard
? {}
: {
hoverlabel: {
align: "left",
bgcolor: "#FFF",
font: { size: "16" },
},
}),
legend: {
// Position above the plot
y: 1.2,
Expand All @@ -237,32 +287,36 @@ function BaselineAndReformTogetherPlot(props) {
style={{
width: "100%",
}}
onHover={(data) => {
if (
data.points[0].x !== undefined &&
data.points[0].y !== undefined
) {
const variableLabelAmount = convertToCurrencyString(
metadata.currency,
data.points[0].y,
);
const employmentIncome = convertToCurrencyString(
metadata.currency,
data.points[0].x,
);
const message = `If you earn ${employmentIncome}, your ${
data.points[0].data.name.toLocaleLowerCase().includes("reform")
? "reform"
: "baseline"
} ${variableLabel} will be ${variableLabelAmount}.`;
setHoverCard({
title: data.points[0].data.name,
body: message,
});
} else {
setHoverCard({
title: data.points[0].data.name,
body: `Your net income falls after earning
{...(useHoverCard
? {
onHover: (data) => {
if (
data.points[0].x !== undefined &&
data.points[0].y !== undefined
) {
const variableLabelAmount = convertToCurrencyString(
metadata.currency,
data.points[0].y,
);
const employmentIncome = convertToCurrencyString(
metadata.currency,
data.points[0].x,
);
const message = `If you earn ${employmentIncome}, your ${
data.points[0].data.name
.toLocaleLowerCase()
.includes("reform")
? "reform"
: "baseline"
} ${variableLabel} will be ${variableLabelAmount}.`;
setHoverCard({
title: data.points[0].data.name,
body: message,
});
} else {
setHoverCard({
title: data.points[0].data.name,
body: `Your net income falls after earning
${convertToCurrencyString(
metadata.currency,
Math.min(...data.points[0].data.x),
Expand All @@ -276,12 +330,14 @@ function BaselineAndReformTogetherPlot(props) {
? "reform"
: "baseline"
} scenario.`,
});
}
}}
onUnhover={() => {
setHoverCard(null);
}}
});
}
},
onUnhover: () => {
setHoverCard(null);
},
}
: {})}
/>
</Screenshottable>
);
Expand All @@ -302,6 +358,7 @@ function BaselineReformDeltaPlot(props) {
variableLabel,
metadata,
variable,
useHoverCard = false,
} = props;
let data = [
{
Expand All @@ -312,7 +369,17 @@ function BaselineReformDeltaPlot(props) {
line: {
color: style.colors.BLUE,
},
hoverinfo: "none",
...(useHoverCard
? {
hoverinfo: "none",
}
: {
hovertemplate:
`<b>Change in ${variableLabel}</b><br><br>` +
`If you earn %{x}, your change in<br>` +
`${variableLabel} will be %{y}.` +
`<extra></extra>`,
}),
},
{
x: [currentEarnings],
Expand All @@ -323,7 +390,17 @@ function BaselineReformDeltaPlot(props) {
line: {
color: style.colors.BLUE,
},
hoverinfo: "none",
...(useHoverCard
? {
hoverinfo: "none",
}
: {
hovertemplate:
`<b>Your current change in ${variableLabel}</b><br><br>` +
`If you earn %{x}, your change in<br>` +
`${variableLabel} will be %{y}.` +
`<extra></extra>`,
}),
},
];
const plotObject = (
Expand Down Expand Up @@ -354,6 +431,15 @@ function BaselineReformDeltaPlot(props) {
tickformat: ",.0f",
uirevision: metadata.variables[variable].unit,
},
...(useHoverCard
? {}
: {
hoverlabel: {
align: "left",
bgcolor: "#FFF",
font: { size: "16" },
},
}),
legend: {
// Position above the plot
y: 1.2,
Expand All @@ -373,29 +459,33 @@ function BaselineReformDeltaPlot(props) {
width: "100%",
marginTop: "3rem",
}}
onHover={(data) => {
if (
data.points[0].x !== undefined &&
data.points[0].y !== undefined
) {
const variableLabelAmount = convertToCurrencyString(
metadata.currency,
data.points[0].y,
);
const employmentIncome = convertToCurrencyString(
metadata.currency,
data.points[0].x,
);
const message = `If you earn ${employmentIncome}, your change in ${variableLabel} will be ${variableLabelAmount}.`;
setHoverCard({
title: data.points[0].data.name,
body: message,
});
}
}}
onUnhover={() => {
setHoverCard(null);
}}
{...(useHoverCard
? {
onHover: (data) => {
if (
data.points[0].x !== undefined &&
data.points[0].y !== undefined
) {
const variableLabelAmount = convertToCurrencyString(
metadata.currency,
data.points[0].y,
);
const employmentIncome = convertToCurrencyString(
metadata.currency,
data.points[0].x,
);
const message = `If you earn ${employmentIncome}, your change in ${variableLabel} will be ${variableLabelAmount}.`;
setHoverCard({
title: data.points[0].data.name,
body: message,
});
}
},
onUnhover: () => {
setHoverCard(null);
},
}
: {})}
/>
</Screenshottable>
);
Expand Down
Loading

0 comments on commit 0a6b6e1

Please sign in to comment.