docs: examples review

packages/plots/src/core/plots/area/type.ts

@@ -1,3 +1,8 @@
 import type { Options } from '../../types/common';
 
-export type AreaOptions = Options;
+export type AreaOptions = Omit<Options, 'yField'> & {
+  /**
+   * @title y轴字段
+   */
+  readonly yField?: string | string[];
+};

packages/plots/src/core/plots/dual-axes/index.ts

@@ -17,7 +17,7 @@ export class DualAxes extends Plot<DualAxesOptions> {
     return {
       type: 'view',
       axis: {
-        y: { title: false },
+        y: { title: false, tick: false },
         x: { title: false },
       },
     };

site/.dumirc.ts

@@ -10,7 +10,7 @@ export default defineConfig({
     title: 'Ant Design Charts',
     description: 'AntV react component library',
     defaultLanguage: 'zh',
-    siteUrl: 'https://charts.ant.design',
+    siteUrl: 'https://ant-design-charts.antgroup.com',
     showChinaMirror: false,
     footerTheme: 'light', // 白色 底部主题
     githubUrl: repository.url,
@@ -127,7 +127,7 @@ export default defineConfig({
       },
     ],
     detail: {
-      engine:{
+      engine: {
         zh: 'AntV react',
         en: 'AntV react',
       },

site/examples/statistics/area/demo/area-difference.js

@@ -21,7 +21,7 @@ const DemoArea = () => {
     colorField: 'city',
     shapeField: 'hvh',
     diff: true,
-    meta: {
+    scale: {
       color: { range: ['#67a9cf', '#ef8a62'] },
     },
     line: {

site/examples/statistics/area/demo/orderly-area.js

@@ -12,9 +12,6 @@ const DemoArea = () => {
     yField: 'unemployed',
     colorField: 'industry',
     shapeField: 'smooth',
-    meta: {
-      x: { utc: true },
-    },
     axis: {
       x: { title: 'Date' },
       y: { labelFormatter: '~s' },

site/examples/statistics/area/demo/range-spline-area.js

@@ -25,7 +25,7 @@ const DemoArea = () => {
     axis: {
       y: { title: false },
     },
-    meta: {
+    scale: {
       x: { type: 'linear', tickCount: 10 },
     },
     point: {

site/examples/statistics/box/demo/box-tooltip.js

@@ -4,30 +4,30 @@ import { Box } from '@ant-design/plots';
 
 const DemoBox = () => {
   const data = [
-    { x: 'Oceania', y: [ 1, 9, 16, 22, 24 ]},
-    { x: 'East Europe', y: [ 1, 5, 8, 12, 16 ]},
-    { x: 'Australia', y: [ 1, 8, 12, 19, 26 ]},
-    { x: 'South America', y: [ 2, 8, 12, 21, 28 ]},
-    { x: 'North Africa', y: [ 1, 8, 14, 18, 24 ]},
-    { x: 'North America', y: [ 3, 10, 17, 28, 30 ]},
-    { x: 'West Europe', y: [ 1, 7, 10, 17, 22 ]},
-    { x: 'West Africa', y: [ 1, 6, 8, 13, 16 ]},
+    { x: 'Oceania', y: [1, 9, 16, 22, 24] },
+    { x: 'East Europe', y: [1, 5, 8, 12, 16] },
+    { x: 'Australia', y: [1, 8, 12, 19, 26] },
+    { x: 'South America', y: [2, 8, 12, 21, 28] },
+    { x: 'North Africa', y: [1, 8, 14, 18, 24] },
+    { x: 'North America', y: [3, 10, 17, 28, 30] },
+    { x: 'West Europe', y: [1, 7, 10, 17, 22] },
+    { x: 'West Africa', y: [1, 6, 8, 13, 16] },
   ];
 
   const config = {
     data: {
-       value: data,
+      value: data,
     },
     xField: 'x',
     yField: 'y',
-    meta: { x: { paddingInner: 0.6, paddingOuter: 0.3 }, y: { zero: true } },
+    scale: { x: { paddingInner: 0.6, paddingOuter: 0.3 }, y: { zero: true } },
     tooltip: {
       items: [
-        { name: "最低值", channel: "y" },
-        { name: "下四分位数", channel: "y1" },
-        { name: "最低值", channel: "y2" },
-        { name: "上四分位数", channel: "y3" },
-        { name: "最高值", channel: "y4" },
+        { name: '最低值', channel: 'y' },
+        { name: '下四分位数', channel: 'y1' },
+        { name: '最低值', channel: 'y2' },
+        { name: '上四分位数', channel: 'y3' },
+        { name: '最高值', channel: 'y4' },
       ],
     },
   };

site/examples/statistics/box/demo/box.js

@@ -4,14 +4,14 @@ import { Box } from '@ant-design/plots';
 
 const DemoBox = () => {
   const data = [
-    { x: 'Oceania', y: [ 1, 9, 16, 22, 24 ]},
-    { x: 'East Europe', y: [ 1, 5, 8, 12, 16 ]},
-    { x: 'Australia', y: [ 1, 8, 12, 19, 26 ]},
-    { x: 'South America', y: [ 2, 8, 12, 21, 28 ]},
-    { x: 'North Africa', y: [ 1, 8, 14, 18, 24 ]},
-    { x: 'North America', y: [ 3, 10, 17, 28, 30 ]},
-    { x: 'West Europe', y: [ 1, 7, 10, 17, 22 ]},
-    { x: 'West Africa', y: [ 1, 6, 8, 13, 16 ]},
+    { x: 'Oceania', y: [1, 9, 16, 22, 24] },
+    { x: 'East Europe', y: [1, 5, 8, 12, 16] },
+    { x: 'Australia', y: [1, 8, 12, 19, 26] },
+    { x: 'South America', y: [2, 8, 12, 21, 28] },
+    { x: 'North Africa', y: [1, 8, 14, 18, 24] },
+    { x: 'North America', y: [3, 10, 17, 28, 30] },
+    { x: 'West Europe', y: [1, 7, 10, 17, 22] },
+    { x: 'West Africa', y: [1, 6, 8, 13, 16] },
   ];
 
   const config = {
@@ -27,7 +27,7 @@ const DemoBox = () => {
     style: {
       stroke: 'black',
     },
-    meta: {
+    scale: {
       x: { paddingInner: 0.6, paddingOuter: 0.3 },
       y: { zero: true },
     },

site/examples/statistics/box/demo/grouped-box.js

@@ -89,7 +89,7 @@ const DemoBox = () => {
     style: {
       stroke: 'black',
     },
-    meta: {
+    scale: {
       x: { paddingInner: 0.2, paddingOuter: 0.1 },
       y: { zero: true },
       series: { paddingInner: 0.3, paddingOuter: 0.1 },

site/examples/statistics/box/demo/polar-box.js

@@ -21,9 +21,9 @@ const DemoBox = () => {
     xField: 'x',
     yField: 'y',
     colorField: 'x',
-    meta: { x: { paddingInner: 0.6, paddingOuter: 0.3 }, y: { zero: true } },
-    coordinate: { type: "polar", innerRadius: 0.2 },
-    style: { stroke: "black" },
+    scale: { x: { paddingInner: 0.6, paddingOuter: 0.3 }, y: { zero: true } },
+    coordinate: { type: 'polar', innerRadius: 0.2 },
+    style: { stroke: 'black' },
     axis: { y: { tickCount: 5 } },
     legend: false,
   };

site/examples/statistics/column/demo/column-maxwidth.js

@@ -7,7 +7,7 @@ const DemoColumn = () => {
     data: [{ letter: 'A', frequency: 120 }],
     xField: 'letter',
     yField: 'frequency',
-    meta: {
+    scale: {
       x: { padding: 0.5 },
     },
     style: {

site/examples/statistics/column/demo/region-annotation.js

@@ -22,7 +22,7 @@ const DemoColumn = () => {
     data,
     xField: 'month',
     yField: 'value',
-    meta: {
+    scale: {
       y: {
         domainMax: 2000,
         domainMin: -1000,

site/examples/statistics/dual-axes/demo/basic.js

@@ -18,13 +18,6 @@ const DemoDualAxes = () => {
         type: 'interval',
         xField: 'time',
         yField: 'waiting',
-        axis: {
-          y: { title: 'Waiting', style: { titleFill: '#5B8FF9' } },
-        },
-        label: {
-          text: 'waiting',
-          position: 'inside',
-        },
       },
       {
         type: 'line',
@@ -35,22 +28,15 @@ const DemoDualAxes = () => {
           stroke: '#fdae6b',
           lineWidth: 2,
         },
-        label: {
-          text: 'people',
-        },
-        meta: {
+        scale: {
           y: {
             independent: true,
           },
         },
         axis: {
           y: {
             position: 'right',
-            grid: null,
-            title: 'People',
-            style: {
-              titleFill: '#fdae6b',
-            },
+            // grid: null,
           },
         },
       },

site/examples/statistics/dual-axes/demo/column-line.js

@@ -14,7 +14,6 @@ const DemoDualAxes = () => {
   const config = {
     data,
     xField: 'time',
-    axis: { y: { title: null } },
     children: [
       {
         type: 'interval',
@@ -28,7 +27,7 @@ const DemoDualAxes = () => {
           stroke: '#5AD8A6',
           lineWidth: 2,
         },
-        meta: { y: { independent: true } },
+        scale: { y: { independent: true } },
         axis: { y: { position: 'right' } },
       },
     ],

site/examples/statistics/dual-axes/demo/column-multi-line.js

@@ -5,8 +5,8 @@ import ReactDOM from 'react-dom';
 const lineColor = {
   a: 'rgb(90, 216, 166)',
   b: 'rgb(93, 112, 146)',
-  c: 'rgb(246, 189, 22)'
-}
+  c: 'rgb(246, 189, 22)',
+};
 
 const DemoDualAxes = () => {
   const uvData = [
@@ -54,7 +54,7 @@ const DemoDualAxes = () => {
           lineWidth: 2,
           stroke: (d) => lineColor[d[0].name],
         },
-        meta: { y: { independent: true } },
+        scale: { y: { independent: true } },
         axis: { y: { position: 'right' } },
       },
     ],

site/examples/statistics/dual-axes/demo/custom-column-line.js

@@ -14,7 +14,6 @@ const DemoDualAxes = () => {
   const config = {
     data,
     xField: 'time',
-    axis: { y: { title: null } },
     children: [
       {
         type: 'interval',
@@ -23,7 +22,7 @@ const DemoDualAxes = () => {
         label: { position: 'inside' },
         interaction: {
           elementHighlight: true,
-          elementHighlightByColor: { background: true }
+          elementHighlightByColor: { background: true },
         },
       },
       {
@@ -34,14 +33,14 @@ const DemoDualAxes = () => {
           stroke: '#5AD8A6',
           lineWidth: 2,
         },
-        meta: { y: { independent: true } },
+        scale: { y: { independent: true } },
         axis: { y: { position: 'right' } },
         interaction: {
           tooltip: {
             crosshairs: false,
             marker: false,
-          }
-        }
+          },
+        },
       },
     ],
     annotations: [

site/examples/statistics/dual-axes/demo/custom-dual-line.js

@@ -34,7 +34,7 @@ const DemoDualAxes = () => {
             textAnchor: 'middle',
           },
         },
-        meta: {
+        scale: {
           y: { independent: true },
         },
         axis: {

site/examples/statistics/dual-axes/demo/custom-grouped-column-line.js

@@ -1,4 +1,3 @@
-
 import { DualAxes } from '@ant-design/plots';
 import React from 'react';
 import ReactDOM from 'react-dom';
@@ -43,7 +42,7 @@ const DemoDualAxes = () => {
         style: { maxWidth: 50 },
         label: { position: 'inside' },
         scale: { color: { range: ['#5B8FF9', '#5D7092'] } },
-        interaction: { elementHighlightByColor: { background: true, } },
+        interaction: { elementHighlightByColor: { background: true } },
       },
       {
         data: transformData,
@@ -53,14 +52,14 @@ const DemoDualAxes = () => {
           stroke: '#5AD8A6',
           lineWidth: 2,
         },
-        meta: { y: { independent: true } },
+        scale: { y: { independent: true } },
         axis: { y: { position: 'right' } },
         interaction: {
           tooltip: {
             crosshairs: false,
             marker: false,
-          }
-        }
+          },
+        },
       },
     ],
   };

site/examples/statistics/dual-axes/demo/custom-stacked-column-line.js

@@ -30,10 +30,9 @@ const DemoDualAxes = () => {
       color: {
         itemMarker: 'round',
         itemMarkerSize: 14,
-        position: 'right'
+        position: 'right',
       },
     },
-    axis: { y: { title: null } },
     children: [
       {
         data: uvBillData,
@@ -43,10 +42,10 @@ const DemoDualAxes = () => {
         colorField: 'type',
         style: { maxWidth: 80 },
         label: { position: 'inside' },
-        meta: { y: { domainMax: 1200 } },
+        scale: { y: { domainMax: 1200 } },
         interaction: {
           elementHighlight: true,
-          elementHighlightByColor: { background: true }
+          elementHighlightByColor: { background: true },
         },
       },
       {
@@ -55,14 +54,14 @@ const DemoDualAxes = () => {
         yField: 'count',
         colorField: () => 'count',
         style: { lineWidth: 2 },
-        meta: { y: { independent: true } },
+        scale: { y: { independent: true } },
         axis: { y: { position: 'right' } },
         interaction: {
           tooltip: {
             crosshairs: false,
             marker: false,
-          }
-        }
+          },
+        },
       },
     ],
     theme: { category10: ['#F4A49E', '#FACDAA', '#EE7B91', '#E85285', '#BE408C', '#BE408C'] },