feat(ava): add polar animate, and encode date column

Author: 逍为

packages/ava/src/advisor/advise-pipeline/spec-mapping.ts

@@ -16,6 +16,21 @@ function splitAngleColor(dataProps: BasicDataPropertyForAdvice[]): [ReturnField,
   return [field4Color, field4Angle];
 }
 
+/**
+ * Process date column to new Date().
+ * @param field
+ * @param dataProps
+ * @returns
+ */
+function processDateEncode(field: string, dataProps: BasicDataPropertyForAdvice[]) {
+  const dp = dataProps.find((dataProp) => dataProp.name === field);
+
+  if (dp?.recommendation === 'date') {
+    return (d) => new Date(d[field]);
+  }
+  return field;
+}
+
 function pieChart(data: Data, dataProps: BasicDataPropertyForAdvice[]): Advice['spec'] {
   const [field4Color, field4Angle] = splitAngleColor(dataProps);
   if (!field4Angle || !field4Color) return null;
@@ -29,6 +44,10 @@ function pieChart(data: Data, dataProps: BasicDataPropertyForAdvice[]): Advice['
     },
     transform: [{ type: 'stackY' }],
     coordinate: { type: 'theta' },
+    animate: {
+      enter: { type: 'waveIn' },
+      update: { type: 'waveIn' },
+    },
   };
   return spec;
 }
@@ -46,6 +65,10 @@ function donutChart(data: Data, dataProps: BasicDataPropertyForAdvice[]): Advice
     },
     transform: [{ type: 'stackY' }],
     coordinate: { type: 'theta', innerRadius: 0.6 },
+    animate: {
+      enter: { type: 'waveIn' },
+      update: { type: 'waveIn' },
+    },
   };
   return spec;
 }
@@ -67,7 +90,7 @@ function lineChart(data: Data, dataProps: BasicDataPropertyForAdvice[]): Advice[
     type: 'line',
     data,
     encode: {
-      x: field4X.name,
+      x: processDateEncode(field4X.name, dataProps),
       y: field4Y.name,
     },
   };
@@ -87,7 +110,7 @@ function stepLineChart(data: Data, dataProps: BasicDataPropertyForAdvice[]): Adv
     type: 'line',
     data,
     encode: {
-      x: field4X.name,
+      x: processDateEncode(field4X.name, dataProps),
       y: field4Y.name,
       shape: 'hvh',
     },
@@ -120,7 +143,7 @@ function areaChart(data: Data, dataProps: BasicDataPropertyForAdvice[]): Advice[
     type: 'area',
     data,
     encode: {
-      x: field4X.name,
+      x: processDateEncode(field4X.name, dataProps),
       y: field4Y.name,
     },
   };
@@ -136,7 +159,7 @@ function stackedAreaChart(data: Data, dataProps: BasicDataPropertyForAdvice[]):
     type: 'area',
     data,
     encode: {
-      x: field4X.name,
+      x: processDateEncode(field4X.name, dataProps),
       y: field4Y.name,
       color: field4Series.name,
     },
@@ -154,7 +177,7 @@ function percentStackedAreaChart(data: Data, dataProps: BasicDataPropertyForAdvi
     type: 'area',
     data,
     encode: {
-      x: field4X.name,
+      x: processDateEncode(field4X.name, dataProps),
       y: field4Y.name,
       color: field4Series.name,
     },

playground/package.json

@@ -43,7 +43,7 @@
     "@antv/auto-chart": "^2.0.3",
     "@antv/chart-advisor": "^2.0.3",
     "@antv/ckb": "^2.0.3",
-    "@antv/g2": "5.0.0",
+    "@antv/g2": "^5.0.0",
     "@antv/g2plot": "^2.0.9",
     "@antv/g6": "^4.3.11",
     "@antv/lite-insight": "^2.0.3",

playground/src/DevPlayground/ChartAdvisor/Chart.tsx

@@ -1,9 +1,10 @@
-import { useEffect, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 
 import { render } from '@antv/g2';
 
 export const Chart = ({ id, spec }: any) => {
   const containerRef = useRef<HTMLElement>(null);
+
   useEffect(() => {
     if (containerRef.current) {
       const container = document.getElementById('container');
@@ -23,5 +24,5 @@ export const Chart = ({ id, spec }: any) => {
     }
   }, []);
   // @ts-ignore 待 g2 确认渲染方式
-  return <div ref={container} id={id} style={{ width: '100%', height: 200, margin: 'auto' }}></div>;
+  return <div ref={containerRef} id={id} style={{ width: '100%', height: 200, margin: 'auto' }}></div>;
 };