From 31d3a676148e900a849b2fd75b318a2a38ae3a51 Mon Sep 17 00:00:00 2001 From: Maxime Quandalle Date: Thu, 26 Mar 2020 11:19:33 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Ne=20pas=20afficher=20les=20barr?= =?UTF-8?q?es=20vides=20dans=20StackedBarChart?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- source/components/StackedBarChart.tsx | 28 ++++++++++++++------------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/source/components/StackedBarChart.tsx b/source/components/StackedBarChart.tsx index 9c8f72df8..415732e1d 100644 --- a/source/components/StackedBarChart.tsx +++ b/source/components/StackedBarChart.tsx @@ -87,10 +87,8 @@ export default function StackedBarChart({ data }: StackedBarChartProps) { const [intersectionRef, displayChart] = useDisplayOnIntersecting({ threshold: 0.5 }) - data = data.filter(datum => datum.nodeValue != undefined) - const percentages = roundedPercentages( - data.map(d => d.nodeValue) as Array - ) + data = data.filter(d => d.nodeValue != undefined) + const percentages = roundedPercentages(data.map(d => d.nodeValue as number)) const dataWithPercentage = data.map((data, index) => ({ ...data, percentage: percentages[index] @@ -100,15 +98,19 @@ export default function StackedBarChart({ data }: StackedBarChartProps) { return ( - {dataWithPercentage.map(({ dottedName, color, percentage }) => ( - - ))} + {dataWithPercentage + // has a border so we don't want to display empty bars + // (even with width 0). + .filter(({ percentage }) => percentage !== 0) + .map(({ dottedName, color, percentage }) => ( + + ))} {dataWithPercentage.map(({ percentage, color, ...rule }) => (