fix: area and line shares the same curve generator(#5877)

* docs: update description of mark shape options

* fix: let area and line use the same curve smoothing strategy

* test: update tests for modification of the area curve strategy

* test: add tests for modification of the area curve strategy

---------

Co-authored-by: taoliujun <taoliujun@qq.com>

__tests__/plots/static/aapl-area-line-smooth-sample.ts

@@ -0,0 +1,49 @@
+import { G2Spec } from '../../../src';
+
+export function aaplAreaLineSmoothSample(): G2Spec {
+  return {
+    type: 'view',
+    data: {
+      type: 'fetch',
+      value: 'data/aapl.csv',
+    },
+    children: [
+      {
+        type: 'line',
+        encode: {
+          x: 'date',
+          y: 'close',
+          shape: 'smooth',
+        },
+        style: {
+          strokeWidth: 4,
+        },
+        transform: [
+          {
+            type: 'sample',
+            thresholds: 100,
+            strategy: 'lttb',
+          },
+        ],
+      },
+      {
+        type: 'area',
+        encode: {
+          x: 'date',
+          y: 'close',
+          shape: 'smooth',
+        },
+        style: {
+          fillOpacity: 0.5,
+        },
+        transform: [
+          {
+            type: 'sample',
+            thresholds: 100,
+            strategy: 'lttb',
+          },
+        ],
+      },
+    ],
+  };
+}

__tests__/plots/static/index.ts

@@ -58,6 +58,7 @@ export { aaplLineBasicLabelOverlapHide } from './aapl-line-basic-label-overlap-h
 export { aaplLineBasicSample } from './aapl-line-basic-sample';
 export { aaplLineBasicSampleLabelFilter } from './aapl-line-basic-sample-label-filter';
 export { aaplLineAreaBasicSample } from './aapl-line-area-basic-sample';
+export { aaplAreaLineSmoothSample } from './aapl-area-line-smooth-sample';
 export { aaplLinePointBasicSample } from './aapl-line-point-basic-sample';
 export { speciesDensityBasic } from './species-density-basic';
 export { speciesViolinBasic } from './species-violin-basic';

site/docs/spec/mark/area.zh.md

@@ -73,23 +73,19 @@ chart.render();
 
 ### smooth
 
-除了 `area` 相同配置之外，额外增加下面的属性。
-
-| 属性  | 描述                    | 类型     | 默认值 |
-| ----- | ----------------------- | -------- | ------ |
-| alpha | 平滑曲线的参数（0 ~ 1） | `number` | `0.5`  |
+和 `area` 配置相同。
 
 ### vh
 
-和 `line` 配置相同。
+和 `area` 配置相同。
 
 ### hv
 
-和 `line` 配置相同。
+和 `area` 配置相同。
 
 ### hvh
 
-和 `line` 配置相同。
+和 `area` 配置相同。
 
 ## FAQ
 

site/docs/spec/mark/line.zh.md

@@ -66,11 +66,7 @@ chart.render();
 
 ### smooth
 
-除了 `line` 相同配置之外，额外增加下面的属性。
-
-| 属性  | 描述                    | 类型     | 默认值 |
-| ----- | ----------------------- | -------- | ------ |
-| alpha | 平滑曲线的参数（0 ~ 1） | `number` | `0.5`  |
+和 `line` 配置相同。
 
 ### vh
 

src/shape/area/smooth.ts

@@ -1,18 +1,24 @@
-import { curveCatmullRomClosed, curveCatmullRom } from 'd3-shape';
-import { isPolar } from '../../utils/coordinate';
+import {
+  curveCatmullRomClosed,
+  curveMonotoneX,
+  curveMonotoneY,
+} from 'd3-shape';
+import { isPolar, isTranspose } from '../../utils/coordinate';
 import { ShapeComponent as SC } from '../../runtime';
 import { Curve } from './curve';
 
-export type SmoothOptions = {
-  alpha?: number;
-};
+export type SmoothOptions = Record<string, any>;
 
 export const Smooth: SC<SmoothOptions> = (options, context) => {
-  const { alpha = 0.5, ...rest } = options;
+  const { ...rest } = options;
   const { coordinate } = context;
   return (...params) => {
-    const curve = isPolar(coordinate) ? curveCatmullRomClosed : curveCatmullRom;
-    return Curve({ curve: curve.alpha(alpha), ...rest }, context)(...params);
+    const curve = isPolar(coordinate)
+      ? curveCatmullRomClosed
+      : isTranspose(coordinate)
+      ? curveMonotoneY
+      : curveMonotoneX;
+    return Curve({ curve, ...rest }, context)(...params);
   };
 };
 

src/shape/line/smooth.ts

@@ -7,20 +7,18 @@ import { isPolar, isTranspose } from '../../utils/coordinate';
 import { ShapeComponent as SC } from '../../runtime';
 import { Curve } from './curve';
 
-export type SmoothOptions = {
-  alpha?: number;
-};
+export type SmoothOptions = Record<string, any>;
 
 export const Smooth: SC<SmoothOptions> = (options, context) => {
-  const { alpha = 0.5, ...rest } = options;
+  const { ...rest } = options;
   const { coordinate } = context;
   return (...params) => {
     const curve = isPolar(coordinate)
       ? curveCatmullRomClosed
       : isTranspose(coordinate)
       ? curveMonotoneY
       : curveMonotoneX;
-    return Curve({ curve: curve, ...rest }, context)(...params);
+    return Curve({ curve, ...rest }, context)(...params);
   };
 };