Poc/animation

.husky/pre-commit

@@ -2,5 +2,5 @@
 . "$(dirname "$0")/_/husky.sh"
 
 # yarn test
-lerna run --concurrency 1 --stream precommit --since HEAD --exclude-dependents
+npx lerna run --concurrency 1 --stream precommit --since HEAD --exclude-dependents
 

packages/ez-core/src/utils/defaults.ts

@@ -102,7 +102,11 @@ export const defaultTooltipContext: TooltipContext = {
 export const defaultChartContext: ChartContext = {
   dimensions: defaultChartDimensions,
   padding: defaultChartPadding,
-  animationOptions: undefined,
+  animationOptions: {
+    duration: 0,
+    delay: 0,
+    easing: 'easeLinear',
+  },
   data: [],
   dataDict: {},
   isRTL: false,

packages/ez-core/src/utils/line.ts

@@ -38,7 +38,7 @@ export const generateLinePath = (
   shapeData: LineData,
   curve: LineCurve,
   beta?: number
-) => {
+): string => {
   const lineGenerator = line();
   if (curve) {
     const curves = {
@@ -50,7 +50,7 @@ export const generateLinePath = (
   }
   const data = shapeData.map((d) => [d.x, d.y]);
   // @ts-ignore <-- remove this when TS version is fix
-  return lineGenerator(data);
+  return lineGenerator(data) || '';
 };
 
 /**

packages/ez-core/src/utils/types.ts

@@ -77,7 +77,7 @@ export interface RadialConfig extends PieConfig {
 export interface ChartContext {
   dimensions: Dimensions;
   padding: ChartPadding;
-  animationOptions?: AnimationOptions;
+  animationOptions: AnimationOptions;
   data: NormalizedData;
   dataDict: NormalizedDataDict;
   isRTL: boolean;

packages/ez-react/src/components/Segments.tsx

@@ -4,6 +4,7 @@ import { Point } from '@/components/shapes/Point';
 import { Points } from '@/components/Points';
 import { LinePath } from '@/components/shapes/LinePath';
 import { useColorScale } from '@/components/scales/ColorScale';
+import { useChart } from '@/lib/use-chart';
 
 export interface SegmentsProps extends SVGAttributes<SVGGElement> {
   xDomainKey: string;
@@ -26,6 +27,9 @@ export const Segments: FC<SegmentsProps> = ({
     color: '#FFF',
   },
 }) => {
+  const {
+    animationOptions: { duration },
+  } = useChart();
   const { colorScale } = useColorScale();
 
   const color = useMemo(
@@ -54,7 +58,9 @@ export const Segments: FC<SegmentsProps> = ({
                 strokeWidth={line.strokeWidth}
               />
               {!marker.hidden &&
-                pointData.map((pointDatum) => {
+                pointData.map((pointDatum, idx) => {
+                  const dur = duration / pointData.length;
+                  const delay = dur * (idx + 1);
                   return (
                     <Point
                       key={pointDatum.id}
@@ -63,7 +69,25 @@ export const Segments: FC<SegmentsProps> = ({
                       fill={marker.color}
                       stroke={color}
                       strokeWidth={line.strokeWidth}
-                    />
+                      opacity={0}
+                    >
+                      <animate
+                        attributeName="opacity"
+                        attributeType="CSS"
+                        from={0}
+                        to={1}
+                        begin={`${delay}ms`}
+                        dur={`${dur}ms`}
+                        fill={'freeze'}
+                      />
+                      <animate
+                        attributeName="r"
+                        from={0}
+                        to={marker.radius}
+                        begin={`${delay}ms`}
+                        dur={`${dur}ms`}
+                      />
+                    </Point>
                   );
                 })}
             </g>

packages/ez-react/src/components/shapes/LinePath.tsx

@@ -1,7 +1,13 @@
-import React, { FC, SVGAttributes, useMemo } from 'react';
+import React, {
+  FC,
+  SVGAttributes,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { LineData, LineCurve } from 'eazychart-core/src/types';
 import { defaultColor, generateLinePath } from 'eazychart-core/src';
-import { useAnimation } from '@/lib/use-animation';
 import { useChart } from '@/lib/use-chart';
 
 export interface LinePathProps extends SVGAttributes<SVGPathElement> {
@@ -16,25 +22,60 @@ export const LinePath: FC<LinePathProps> = ({
   beta,
   stroke = defaultColor,
   strokeWidth = 1,
+  fill = 'none',
+  strokeLinejoin = 'round',
+  strokeLinecap = 'round',
+  children,
   ...rest
 }) => {
-  const { animationOptions } = useChart();
+  const {
+    animationOptions: { duration },
+  } = useChart();
   const dataPath = useMemo(
     () => generateLinePath(shapeData, curve, beta),
     [shapeData, curve, beta]
   );
-  const currentData =
-    useAnimation(dataPath, '', animationOptions, [curve]) || '';
+  const [pathLength, setPathLength] = useState(0);
+  const ref = useRef<SVGPathElement | null>(null);
+
+  useEffect(() => {
+    if (ref.current) {
+      setPathLength(ref.current.getTotalLength());
+    }
+  }, [dataPath]);
+
   return (
     <path
-      d={currentData}
+      ref={ref}
+      d={dataPath}
       stroke={stroke}
       strokeWidth={strokeWidth}
-      fill="none"
-      strokeLinejoin={'round'}
-      strokeLinecap={'round'}
+      fill={fill}
+      strokeLinejoin={strokeLinejoin}
+      strokeLinecap={strokeLinecap}
       {...rest}
       className="ez-line"
-    />
+    >
+      {children ? (
+        children
+      ) : (
+        <>
+          <animate
+            attributeName="stroke-dasharray"
+            attributeType="CSS"
+            from={pathLength}
+            to={pathLength}
+            dur={'0s'}
+          />
+          <animate
+            attributeName="stroke-dashoffset"
+            attributeType="CSS"
+            from={pathLength}
+            to={0}
+            dur={`${duration}ms`}
+          />
+        </>
+      )}
+    </path>
   );
 };

packages/ez-react/src/components/shapes/Point.tsx

@@ -1,7 +1,6 @@
 import React, { FC, MouseEventHandler, SVGAttributes } from 'react';
 import { PointDatum } from 'eazychart-core/src/types';
 import { defaultPointDatum, defaultPointRadius } from 'eazychart-core/src';
-import { useAnimation } from '@/lib/use-animation';
 import { useTooltip } from '@/components/addons/tooltip/use-tooltip';
 import { useChart } from '@/lib/use-chart';
 
@@ -15,17 +14,14 @@ export const Point: FC<PointProps> = ({
   fill,
   stroke,
   strokeWidth = 1,
+  children,
   ...rest
 }) => {
   const { showTooltip, hideTooltip, moveTooltip } = useTooltip();
-  const { animationOptions } = useChart();
-  const currentShapeDatum = useAnimation(
-    shapeDatum,
-    defaultPointDatum,
-    animationOptions
-  );
-
-  const { x, y, color } = currentShapeDatum;
+  const {
+    animationOptions: { duration },
+  } = useChart();
+  const { x, y, color } = shapeDatum;
 
   const handleMouseOver: MouseEventHandler<SVGCircleElement> = (event) => {
     showTooltip(shapeDatum, event as any as MouseEvent);
@@ -53,6 +49,12 @@ export const Point: FC<PointProps> = ({
       strokeWidth={strokeWidth}
       data-testid="ez-point"
       className="ez-point"
-    />
+    >
+      {children ? (
+        children
+      ) : (
+        <animate attributeName="r" from={0} to={r} dur={`${duration}ms`} />
+      )}
+    </circle>
   );
 };

packages/ez-react/src/lib/use-animation.ts

@@ -15,13 +15,14 @@ export const useAnimation = <T extends Interpolables>(
   const updateOnAnimate = useCallback(
     (v) => {
       if (v) {
-        setCurrentData(
-          typeof v === 'object'
-            ? {
-                ...v,
-              }
-            : v
-        );
+        const newVal = Array.isArray(v)
+          ? [...v]
+          : typeof v === 'object'
+          ? {
+              ...v,
+            }
+          : v;
+        setCurrentData(newVal);
       }
     },
     [setCurrentData]

packages/ez-react/src/recipes/line/LineChart.tsx

@@ -49,7 +49,7 @@ export const LineChart: FC<LineChartProps> = ({
   },
   animationOptions = {
     easing: 'easeBack',
-    duration: 400,
+    duration: 2000,
     delay: 0,
   },
   padding = {