chore: area 走查优化 (#1541)

* fix(area): #1536 修复面积图中 range 不为 0 1 的问题

* feat(area): 添加 gradients 面积图 demo

* feat(area): 添加 slider 的 demo

Author: hustcc

__tests__/unit/plots/area/index-spec.ts

@@ -18,6 +18,40 @@ describe('area', () => {
     expect(area.chart.geometries[0].elements.length).toBe(1);
   });
 
+  it('x cat scale', () => {
+    const data = [
+      { x: 1, y: 1 },
+      { x: 2, y: 4 },
+      { x: 3, y: 5 },
+      { x: 4, y: 2 },
+    ];
+    const area = new Area(createDiv(), {
+      width: 400,
+      height: 300,
+      appendPadding: 10,
+      data: data,
+      xField: 'x',
+      yField: 'y',
+    });
+
+    area.render();
+
+    expect(area.options.meta.x.type).toBe('cat');
+    expect(area.chart.getScaleByField('x').range).toEqual([0, 1]);
+    area.update({
+      ...area.options,
+      meta: {
+        x: {
+          type: 'linear',
+          range: [0.1, 0.9],
+        },
+      },
+    });
+
+    expect(area.options.meta.x.type).toBe('linear');
+    expect(area.chart.getScaleByField('x').range).toEqual([0.1, 0.9]);
+  });
+
   it('x*y with color', () => {
     const area = new Area(createDiv(), {
       width: 400,

examples/area/basic/demo/basic-gradients.ts

@@ -0,0 +1,21 @@
+import { Area } from '@antv/g2plot';
+
+fetch('https://gw.alipayobjects.com/os/bmw-prod/1d565782-dde4-4bb6-8946-ea6a38ccf184.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const area = new Area('container', {
+      data,
+      xField: 'Date',
+      yField: 'scales',
+      xAxis: {
+        type: 'dateTime',
+        tickCount: 5,
+      },
+      areaStyle: () => {
+        return {
+          fill: 'l(270) 0:#ffffff 0.5:#7ec2f3 1:#1890ff',
+        };
+      },
+    });
+    area.render();
+  });

examples/area/basic/demo/basic-slider.ts

@@ -0,0 +1,23 @@
+import { Area } from '@antv/g2plot';
+
+fetch('https://gw.alipayobjects.com/os/bmw-prod/1d565782-dde4-4bb6-8946-ea6a38ccf184.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const area = new Area('container', {
+      data,
+      xField: 'Date',
+      yField: 'scales',
+      xAxis: {
+        type: 'dateTime',
+        tickCount: 5,
+      },
+      slider: {
+        min: 0.1,
+        max: 0.9,
+        trendCfg: {
+          isArea: true,
+        },
+      },
+    });
+    area.render();
+  });

examples/area/basic/demo/meta.json

@@ -11,6 +11,22 @@
         "en": "basic Area chart"
       },
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*aARCQbtAl4AAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "basic-gradients.ts",
+      "title": {
+        "zh": "渐变色面积图",
+        "en": "gradients Area chart"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*aARCQbtAl4AAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "basic-slider.ts",
+      "title": {
+        "zh": "缩略轴面积图",
+        "en": "slider Area chart"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*aARCQbtAl4AAAAAAAAAAAABkARQnAQ"
     }
   ]
 }

examples/area/stacked/demo/basic-slider.ts

@@ -0,0 +1,17 @@
+import { Area } from '@antv/g2plot';
+
+fetch('https://gw.alipayobjects.com/os/bmw-prod/b21e7336-0b3e-486c-9070-612ede49284e.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const area = new Area('container', {
+      data,
+      xField: 'date',
+      yField: 'value',
+      seriesField: 'country',
+      slider: {
+        min: 0.1,
+        max: 0.9,
+      },
+    });
+    area.render();
+  });

examples/area/stacked/demo/meta.json

@@ -19,6 +19,14 @@
         "en": "The causes of CO2 emissions"
       },
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*u6u1RqMG9coAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "basic-slider.ts",
+      "title": {
+        "zh": "带缩略轴堆叠面积图",
+        "en": "StackedArea with slider"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*u6u1RqMG9coAAAAAAAAAAABkARQnAQ"
     }
   ]
 }

src/plots/area/index.ts

@@ -13,7 +13,8 @@ export class Area extends Plot<AreaOptions> {
   /**
    * 获取 折线图 默认配置
    */
-  protected getDefaultOptions() {
+  protected getDefaultOptions(options: AreaOptions) {
+    const { xField } = options;
     return deepMix({}, super.getDefaultOptions(), {
       tooltip: {
         showMarkers: true,
@@ -22,6 +23,12 @@ export class Area extends Plot<AreaOptions> {
           type: 'x',
         },
       },
+      meta: {
+        [xField]: {
+          type: 'cat',
+          range: [0, 1],
+        },
+      },
     });
   }