From 30020bdd26645aa393818bb81de3fb602d816e95 Mon Sep 17 00:00:00 2001
From: Maxime Quandalle <maxime@quandalle.com>
Date: Tue, 8 Oct 2019 17:37:36 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Ajout=20d'animations=20sur=20la?=
 =?UTF-8?q?=20r=C3=A9partition?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 source/components/StackedBarChart.js | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/source/components/StackedBarChart.js b/source/components/StackedBarChart.js
index 4a4529701..dd6af24d2 100644
--- a/source/components/StackedBarChart.js
+++ b/source/components/StackedBarChart.js
@@ -1,6 +1,8 @@
 import React from 'react'
 import styled from 'styled-components'
 import RuleLink from 'Components/RuleLink'
+import useDisplayOnIntersecting from 'Components/utils/useDisplayOnIntersecting'
+import { animated, useSpring } from 'react-spring'
 import { capitalise0 } from '../utils'
 
 const BarStack = styled.div`
@@ -12,6 +14,7 @@ const BarStack = styled.div`
 const BarItem = styled.div`
 	height: 26px;
 	border-right: 2px solid white;
+	transition: width 0.3s ease-out;
 
 	&:last-child {
 		border-right: none;
@@ -76,14 +79,19 @@ export function roundedPercentages(values) {
 }
 
 export default function StackedBarChart({ data }) {
+	const [intersectionRef, displayChart] = useDisplayOnIntersecting({
+		threshold: 0.5
+	})
 	const percentages = roundedPercentages(data.map(d => d.nodeValue))
 	const dataWithPercentage = data.map((data, index) => ({
 		...data,
 		percentage: percentages[index]
 	}))
 
+	const styles = useSpring({ opacity: displayChart ? 1 : 0 })
+
 	return (
-		<>
+		<animated.div ref={intersectionRef} style={styles}>
 			<BarStack>
 				{dataWithPercentage.map(({ dottedName, color, percentage }) => (
 					<BarItem
@@ -104,6 +112,6 @@ export default function StackedBarChart({ data }) {
 					</BarStackLegendItem>
 				))}
 			</BarStackLegend>
-		</>
+		</animated.div>
 	)
 }