diff --git a/components/StackedBarGraph.tsx b/components/StackedBarGraph.tsx index 0a98371..88bb6f4 100644 --- a/components/StackedBarGraph.tsx +++ b/components/StackedBarGraph.tsx @@ -53,6 +53,14 @@ export type StackedBarProps = { scalePadding?: number; /** Margin for each item in the legend */ itemMargin?: string; + /** Hide the first data value in tooltip*/ + hideDataValueInTooltip?: boolean; + //** Top tooltip label */ + tooltipTopLabel?: string; + //** Bottom tooltip label */ + tooltipBottomLabel?: string; + //** Display percentage */ + displayPercentage?: boolean; }; let tooltipTimeout: number; @@ -79,6 +87,10 @@ export const StackedBarGraphVertical = withTooltip< tooltipData, hideTooltip, showTooltip, + hideDataValueInTooltip, + tooltipBottomLabel = "", + tooltipTopLabel = "", + displayPercentage, }: StackedBarProps & WithTooltipProvidedProps) => { const yTotals = data.reduce((allTotals, currCategory) => { const yTotal = keys.reduce((categoryTotal, k) => { @@ -230,8 +242,15 @@ export const StackedBarGraphVertical = withTooltip< left={tooltipLeft} header={tooltipData.key} > -

{tooltipData.bar.data[tooltipData.key]}

-

{getCategory(tooltipData.bar.data)}

+ {hideDataValueInTooltip ? null : ( +

+ {tooltipTopLabel} {tooltipData.bar.data[tooltipData.key]} + {displayPercentage ? "%" : ""} +

+ )} +

+ {tooltipBottomLabel} {getCategory(tooltipData.bar.data)} +

) : null} @@ -261,6 +280,10 @@ export const StackedBarGraphHorizontal = withTooltip< tooltipData, hideTooltip, showTooltip, + hideDataValueInTooltip, + tooltipBottomLabel = "", + tooltipTopLabel = "", + displayPercentage, }: StackedBarProps & WithTooltipProvidedProps) => { const yTotals = data.reduce((allTotals, currCategory) => { const yTotal = keys.reduce((categoryTotal, k) => { @@ -409,8 +432,15 @@ export const StackedBarGraphHorizontal = withTooltip< left={tooltipLeft} header={tooltipData.key} > -

{tooltipData.bar.data[tooltipData.key]}

-

{getCategory(tooltipData.bar.data)}

+ {hideDataValueInTooltip ? null : ( +

+ {tooltipTopLabel} {tooltipData.bar.data[tooltipData.key]} + {displayPercentage ? "%" : ""} +

+ )} +

+ {tooltipBottomLabel} {getCategory(tooltipData.bar.data)} +

) : null} diff --git a/pages/coop.tsx b/pages/coop.tsx index 84de69b..73da4a2 100644 --- a/pages/coop.tsx +++ b/pages/coop.tsx @@ -231,6 +231,8 @@ export default function CoopPage() { ]} data={C7v} margin={barGraphMargin} + hideDataValueInTooltip + tooltipBottomLabel="Coop Term: " /> @@ -256,6 +258,8 @@ export default function CoopPage() { ]} data={C7vi} margin={barGraphMargin} + tooltipBottomLabel="Coop Term: " + displayPercentage />