feat: area chart support smooth shape

packages/f2/src/components/area/areaView.tsx

@@ -1,15 +1,55 @@
 import { jsx } from '../../jsx';
+import { Smooth, BBox } from '@antv/f2-graphic';
 
 export default (props: any) => {
-  const { records } = props;
+  const { records, shape } = props;
+  const isSmooth = shape === 'smooth';
   return (
     <group>
       {records.map((record) => {
         const { key, children } = record;
         return (
           <group key={key}>
             {children.map((child) => {
-              const { points, color, shape } = child;
+              const { points, bottomPoints, color, shape } = child;
+              if (isSmooth) {
+                return (
+                  <custom
+                    attrs={{
+                      points,
+                      lineWidth: '2px',
+                      fill: color,
+                      ...shape,
+                    }}
+                    createPath={(context) => {
+                      const constaint = [
+                        [ 0, 0 ],
+                        [ 1, 1 ]
+                      ];
+                      const bottomPointsLen = bottomPoints?.length || 0;
+                      const topPoints = points.slice(0, points.length - bottomPointsLen);
+                      const topSps = Smooth.smooth(topPoints, false, constaint);
+                      context.beginPath();
+                      context.moveTo(topPoints[0].x, topPoints[0].y);
+                      for (let i = 0, n = topSps.length; i < n; i++) {
+                        const sp = topSps[i];
+                        context.bezierCurveTo(sp[1], sp[2], sp[3], sp[4], sp[5], sp[6]);
+                      }
+
+                      if (bottomPointsLen) {
+                        const bottomSps = Smooth.smooth(bottomPoints, false, constaint);
+                        context.lineTo(bottomPoints[0].x, bottomPoints[0].y);
+                        for (let i = 0, n = bottomSps.length; i < n; i++) {
+                          const sp = bottomSps[i];
+                          context.bezierCurveTo(sp[1], sp[2], sp[3], sp[4], sp[5], sp[6]);
+                        }
+                      }
+                      context.closePath();
+                    }}
+                    calculateBox={() => BBox.getBBoxFromPoints(points)}
+                  />
+                );
+              }
               return (
                 <polygon
                   attrs={{

packages/f2/test/components/area/area.test.tsx

@@ -278,17 +278,15 @@ describe('面积图', () => {
           >
             <Axis field="time" />
             <Axis field="tem" />
-            <Area x="time" y="tem" color="l(90) 0:#1890FF 1:#f7f7f7" />
-            <Line x="time" y="tem" color="l(90) 0:#1890FF 1:#f7f7f7" />
+            <Area x="time" y="tem" color="l(90) 0:#1890FF 1:#f7f7f7" shape="smooth" />
+            <Line x="time" y="tem" color="l(90) 0:#1890FF 1:#f7f7f7" shape="smooth" />
           </Chart>
         </Canvas>
       );
       // @ts-ignore
       const chart = new type(props);
       chart.render();
     });
-
-    // TODO(@buli): 曲线面积图
   });
 
   describe('层叠面积图', () => {

packages/f2/test/components/line/line.test.tsx

@@ -432,12 +432,6 @@ describe('折线图', () => {
           pixelRatio={window.devicePixelRatio}
           width={offsetWidth}
           height={height}
-          // 方式一：通过 theme 设置全局 line style
-          // theme={{
-          //   shapes: {
-          //     line: ['smooth'],
-          //   },
-          // }}
         >
           <Chart
             ref={chartRef}
@@ -462,8 +456,7 @@ describe('折线图', () => {
               }}
             />
             <Axis field="tem" />
-            {/* 方式二：通过 props style 传入 */}
-            <Line x="time" y="tem" ref={lineRef} style={{ smooth: true }} />
+            <Line x="time" y="tem" ref={lineRef} shape="smooth" />
             <Tooltip />
           </Chart>
         </Canvas>

packages/graphic/src/index.ts

@@ -1,5 +1,7 @@
 import Matrix from './util/matrix';
 import Vector2 from './util/vector2';
+import * as Smooth from './util/smooth';
+import * as BBox from './util/bbox';
 
 import { Canvas, Group, Shape } from './engine';
 
@@ -21,5 +23,5 @@ function createCanvas(cfg) {
   return new G.Canvas(cfg);
 }
 
-export { registerEngine, getEngine, createCanvas, Canvas, Group, Shape, Matrix, Vector2 };
+export { registerEngine, getEngine, createCanvas, Canvas, Group, Shape, Matrix, Vector2, Smooth, BBox };
 export * from './types';

packages/site/examples/area/area/demo/gradient.js

@@ -44,10 +44,15 @@ const { props } = (
         },
       }}
     >
-      <Axis field="time" />
+      <Axis
+        field="time"
+        style={{
+          label: { align: 'between' },
+        }}
+      />
       <Axis field="tem" />
-      <Area x="time" y="tem" color="l(90) 0:#1890FF 1:#f7f7f7" />
-      <Line x="time" y="tem" color="l(90) 0:#1890FF 1:#f7f7f7" />
+      <Area x="time" y="tem" color="l(90) 0:#1890FF 1:#f7f7f7" shape="smooth" />
+      <Line x="time" y="tem" color="l(90) 0:#1890FF 1:#f7f7f7" shape="smooth" />
     </Chart>
   </Canvas>
 );

packages/site/examples/line/line/demo/smooth.js

@@ -48,12 +48,6 @@ const LineChart = (
     <Chart
       data={data}
       scale={scale}
-      // 方式一：通过 theme 设置全局 line style
-      // theme={{
-      //   shapes: {
-      //     line: ['smooth'],
-      //   },
-      // }}
     >
       <Axis
         field="time"
@@ -62,8 +56,7 @@ const LineChart = (
         }}
       />
       <Axis field="tem" />
-      {/* 方式二：通过 props style 传入 */}
-      <Line x="time" y="tem" style={{ smooth: true }} />
+      <Line x="time" y="tem" shape="smooth" />
       <Tooltip />
     </Chart>
   </Canvas>

packages/site/examples/line/multiple/demo/customize-tootlip.js

@@ -139,11 +139,11 @@ const { props } = (
         y="value"
         size={{
           field: 'tag',
-          map: (val) => (val ? 4 : 0),
+          callback: (val) => (val ? 4 : 0),
         }}
         color={{
           field: 'tag',
-          map: (val) => (val === 2 ? '#518DFE' : '#F35833'),
+          callback: (val) => (val === 2 ? '#518DFE' : '#F35833'),
         }}
       />
       <Legend