tiny fixes

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 (
-        <animated.g {...animatedProps} style={style}>
-            {children}
-        </animated.g>
-    )
+  return (
+    <animated.g {...animatedProps} {...nonAnimatableProps}>
+      {children}
+    </animated.g>
+  )
 }
 export function AnimatedForeignObject({
   children,
-  style,
   ...props
 }) {
-  const animatedProps = useSpring(props);
+  const { animatableProps, nonAnimatableProps } = getAnimatableProps(props);
+  const animatedProps = useSpring(animatableProps);
 
   return (
-      <animated.foreignObject {...animatedProps} style={style}>
-          {children}
-      </animated.foreignObject>
+    <animated.foreignObject {...animatedProps} {...nonAnimatableProps}>
+      {children}
+    </animated.foreignObject>
   )
 }
 
 export function AnimatedText({
   children,
-  style,
-  onClick,
   ...props
 }) {
-  const animatedProps = useSpring(props);
+  const { animatableProps, nonAnimatableProps } = getAnimatableProps(props);
+  const animatedProps = useSpring(animatableProps);
 
   return (
-      <animated.text {...animatedProps} onClick={onClick} style={style}>
-          {children}
-      </animated.text>
+    <animated.text {...animatedProps} {...nonAnimatableProps}>
+      {children}
+    </animated.text>
   )
 }
 
 
 export function AnimatedCircle({
   children,
-  style,
   ...props
 }) {
-  const animatedProps = useSpring(props);
+  const { animatableProps, nonAnimatableProps } = getAnimatableProps(props);
+  const animatedProps = useSpring(animatableProps);
 
   return (
-      <animated.circle {...animatedProps} style={style}>
-          {children}
-      </animated.circle>
+    <animated.circle {...animatedProps} {...nonAnimatableProps}>
+      {children}
+    </animated.circle>
   )
 }
 
 
 export function AnimatedLine({
   children,
-  style,
   ...props
 }) {
-  const animatedProps = useSpring(props);
-
+  const { animatableProps, nonAnimatableProps } = getAnimatableProps(props);
+  const animatedProps = useSpring(animatableProps);
   return (
-      <animated.line {...animatedProps} style={style}>
-          {children}
-      </animated.line>
+    <animated.line {...animatedProps} {...nonAnimatableProps}>
+      {children}
+    </animated.line>
   )
 }
 
 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 (
-        <animated.path onClick={onClick} {...animatedProps} {...mouseProps} />
-    )
+  return (
+    <animated.path {...animatedProps} {...nonAnimatableProps} />
+  )
 }
 
 export function AnimatedRect({
   ...props
 }) {
-  const animatedProps = useSpring(props);
-
+  const { animatableProps, nonAnimatableProps } = getAnimatableProps(props);
+  const animatedProps = useSpring(animatableProps);
   return (
-      <animated.rect {...animatedProps} />
+    <animated.rect {...animatedProps} {...nonAnimatableProps} />
   )
 }

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]);

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