diff --git a/src/components/AnimatedSvgElements/index.js b/src/components/AnimatedSvgElements/index.js index 00600504..5f5a466e 100644 --- a/src/components/AnimatedSvgElements/index.js +++ b/src/components/AnimatedSvgElements/index.js @@ -1,96 +1,109 @@ import { useSpring, animated } from '@react-spring/web'; +const isPropAnimatable = propName => + !['style', 'children', 'className'].includes(propName) + && propName.indexOf('on') !== 0; + + +const getAnimatableProps = props => { + const keys = Object.keys(props); + const animatableKeys = keys.filter(isPropAnimatable); + const nonAnimatableKeys = keys.filter(k => !isPropAnimatable(k)); + const animatableProps = animatableKeys.reduce((cur, key) => ({ ...cur, [key]: props[key] }), {}); + const nonAnimatableProps = nonAnimatableKeys.reduce((cur, key) => ({ ...cur, [key]: props[key] }), {}); + return { + animatableProps, + nonAnimatableProps, + } +} + export function AnimatedGroup({ - children, - style, - ...props + children, + ...props }) { - const animatedProps = useSpring(props); + const { animatableProps, nonAnimatableProps } = getAnimatableProps(props); + const animatedProps = useSpring(animatableProps); - return ( - - {children} - - ) + return ( + + {children} + + ) } export function AnimatedForeignObject({ children, - style, ...props }) { - const animatedProps = useSpring(props); + const { animatableProps, nonAnimatableProps } = getAnimatableProps(props); + const animatedProps = useSpring(animatableProps); return ( - - {children} - + + {children} + ) } export function AnimatedText({ children, - style, - onClick, ...props }) { - const animatedProps = useSpring(props); + const { animatableProps, nonAnimatableProps } = getAnimatableProps(props); + const animatedProps = useSpring(animatableProps); return ( - - {children} - + + {children} + ) } export function AnimatedCircle({ children, - style, ...props }) { - const animatedProps = useSpring(props); + const { animatableProps, nonAnimatableProps } = getAnimatableProps(props); + const animatedProps = useSpring(animatableProps); return ( - - {children} - + + {children} + ) } export function AnimatedLine({ children, - style, ...props }) { - const animatedProps = useSpring(props); - + const { animatableProps, nonAnimatableProps } = getAnimatableProps(props); + const animatedProps = useSpring(animatableProps); return ( - - {children} - + + {children} + ) } export function AnimatedPath({ - onClick, ...props }) { - const mouseProps = Object.keys(props).filter(key => key.includes('Mouse')) - .reduce((res, key) => ({...res, [key]: props[key]}), {}); - const animatedProps = useSpring(props); + const { animatableProps, nonAnimatableProps } = getAnimatableProps(props); + const animatedProps = useSpring(animatableProps); - return ( - - ) + return ( + + ) } export function AnimatedRect({ ...props }) { - const animatedProps = useSpring(props); - + const { animatableProps, nonAnimatableProps } = getAnimatableProps(props); + const animatedProps = useSpring(animatableProps); return ( - + ) } \ No newline at end of file diff --git a/src/components/LineChart/LineChart.js b/src/components/LineChart/LineChart.js index 64b1cc42..753b3787 100644 --- a/src/components/LineChart/LineChart.js +++ b/src/components/LineChart/LineChart.js @@ -357,7 +357,6 @@ const LineChart = ({ .filter(a => a.axis === 'x') .map((annotation, annotationIndex) => { const { start, end, label, labelPosition = 20 } = annotation; - console.log({labelPosition}) const thatHeight = height - yScale(yAxisValues[yAxisValues.length - 1]) - margins.bottom; const thatY1 = height - margins.bottom; const thatY2 = yScale(yAxisValues[yAxisValues.length - 1]); diff --git a/src/i18n/messages.yml b/src/i18n/messages.yml index 4299c8b5..97cc8ab2 100644 --- a/src/i18n/messages.yml +++ b/src/i18n/messages.yml @@ -648,7 +648,7 @@ GuerreEtCroissance: fr: Période de guerre en: War period legend-observations: - fr: Valeurs observées (lt. pour le commerce ; observations, miles marins ou tonnages pour la navigation suivant la source/métrique choisie) + fr: Valeurs observées (lt. pour le commerce ; observations, milles marins ou tonnages pour la navigation suivant la source/métrique choisie) en: Observed values (lt. for trade; observations, nautical miles, or tonnage for navigation depending on the chosen source/metric) navigation-interface-title: fr: Données de navigation