fix: auto fit

packages/plots/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 2.1.2
+
+`2023-12-12`
+
+- 🔥 新增 segment chart 示例，优化 transform 逻辑
+- 🐞 修复 autoFit 配置无效
+
+
 ## 2.1.1
 
 `2023-12-08`

packages/plots/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ant-design/plots",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "G2Plot Statistical chart",
   "bugs": {
     "url": "https://github.com/ant-design/ant-design-charts/issues"

packages/plots/src/core/base/index.ts

@@ -3,7 +3,7 @@ import { ChartEvent } from '@antv/g2';
 import { Chart } from './chart';
 import { Annotaion } from '../annotation';
 import { CHART_OPTIONS, ANNOTATION_LIST, SKIP_DEL_CUSTOM_SIGN } from '../constants';
-import { deepAssign, omit, pick, deleteCustomKeys, deleteChartOptionKeys } from '../utils';
+import { deepAssign, pick } from '../utils';
 
 import type { G2Chart } from './chart';
 import type { Adaptor, Options } from '../types';
@@ -35,11 +35,9 @@ export abstract class Plot<O extends PickOptions> extends EE {
    * new Chart 所需配置
    */
   private getChartOptions() {
-    const { autoFit = true } = this.options;
     return {
       ...pick(this.options, CHART_OPTIONS),
       container: this.container,
-      autoFit,
     };
   }
 
@@ -50,7 +48,7 @@ export abstract class Plot<O extends PickOptions> extends EE {
     if (this.type === 'base' || this[SKIP_DEL_CUSTOM_SIGN]) {
       return { ...this.options, ...this.getChartOptions() };
     }
-    return deleteCustomKeys(omit(this.options, CHART_OPTIONS), true);
+    return this.options;
   }
 
   /**
@@ -80,13 +78,13 @@ export abstract class Plot<O extends PickOptions> extends EE {
   }
 
   private getBaseOptions(): Partial<Options> {
-    return { type: 'view' };
+    return { type: 'view', autoFit: true };
   }
 
   /**
    * 获取默认的 options 配置项，每个组件都可以复写
    */
-  protected getDefaultOptions(): any { }
+  protected getDefaultOptions(): any {}
 
   /**
    * 绘制
@@ -182,7 +180,7 @@ export abstract class Plot<O extends PickOptions> extends EE {
     // 转化成 G2 Spec
     adaptor({
       chart: this.chart,
-      options: deleteChartOptionKeys(this.options),
+      options: this.options,
     });
   }
 

packages/plots/src/core/constants/index.ts

@@ -1,12 +1,12 @@
 import { isArray, isBoolean } from '../utils';
 
 /** new Chart options */
-export const CHART_OPTIONS = [
+export const CHART_OPTIONS = ['renderer'];
+/** There is only the view layer, no need to pass it down to children */
+export const VIEW_OPTIONS = [
   'width',
   'height',
-  'renderer',
   'autoFit',
-  'canvas',
   'theme',
   'inset',
   'insetLeft',
@@ -26,11 +26,12 @@ export const CHART_OPTIONS = [
   'depth',
   'title',
   'clip',
+  'children',
+  'type',
+  'data',
+  'direction',
 ];
 
-/** 最终透传给 G2 Spec 的保留字 */
-export const RESERVED_KEYS = ['data', 'type', 'children', 'direction'];
-
 /** 特殊标识，用于标识改配置来自于转换逻辑，而非用户配置 */
 export const TRANSFORM_SIGN = '__transform__';
 

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

@@ -15,27 +15,32 @@ export function adaptor(params: Params) {
    */
   const annotations = (params: Params) => {
     const { options } = params;
-    const { annotations = [], children = [] } = options;
+    const { annotations = [], children = [], scale } = options;
     let sharedScale = false;
+    if (get(scale, 'y.key')) {
+      return params;
+    }
     children.forEach((child, index) => {
-      const scaleKey = `child${index}Scale`;
-      set(child, 'scale.y.key', scaleKey);
-      const { annotations: childAnnotations = [] } = child;
-      /**
-       * @description If the child has annotations, the scale of the child needs to be assigned scaleKey to connect the annotation.
-       */
-      if (childAnnotations.length > 0) {
-        set(child, 'scale.y.independent', false);
-        childAnnotations.forEach((annotation) => {
-          set(annotation, 'scale.y.key', scaleKey);
-        });
-      }
-      if (!sharedScale && annotations.length > 0 && get(child, 'scale.y.independent') === undefined) {
-        sharedScale = true;
-        set(child, 'scale.y.independent', false);
-        annotations.forEach((annotation) => {
-          set(annotation, 'scale.y.key', scaleKey);
-        });
+      if (!get(child, 'scale.y.key')) {
+        const scaleKey = `child${index}Scale`;
+        set(child, 'scale.y.key', scaleKey);
+        const { annotations: childAnnotations = [] } = child;
+        /**
+         * @description If the child has annotations, the scale of the child needs to be assigned scaleKey to connect the annotation.
+         */
+        if (childAnnotations.length > 0) {
+          set(child, 'scale.y.independent', false);
+          childAnnotations.forEach((annotation) => {
+            set(annotation, 'scale.y.key', scaleKey);
+          });
+        }
+        if (!sharedScale && annotations.length > 0 && get(child, 'scale.y.independent') === undefined) {
+          sharedScale = true;
+          set(child, 'scale.y.independent', false);
+          annotations.forEach((annotation) => {
+            set(annotation, 'scale.y.key', scaleKey);
+          });
+        }
       }
     });
     return params;

packages/plots/src/core/utils/delete-custom-keys.ts

@@ -1,12 +1,11 @@
 import { COORDIANTE_OPTIONS } from '../components';
 import { getCustomKeys } from './get-custom-keys';
-import { RESERVED_KEYS } from '../constants';
 import { Options } from '../types';
 
 /**
  * 统一删除已转换的配置项
  */
-export const deleteCustomKeys = <O extends Options>(options: O, isRender?: boolean): O => {
+export const deleteCustomKeys = <O extends Options>(options: O): O => {
   const deleteKeys = getCustomKeys();
   [...deleteKeys, ...COORDIANTE_OPTIONS].forEach((key) => {
     delete options[key];
@@ -20,16 +19,5 @@ export const deleteCustomKeys = <O extends Options>(options: O, isRender?: boole
     });
   });
 
-  /**
-   * @description 最终渲染，除保留配置外，其余全部删除，避免配置污染
-   */
-  if (isRender) {
-    Object.keys(options).forEach((key) => {
-      if (!RESERVED_KEYS.includes(key)) {
-        delete options[key];
-      }
-    });
-  }
-
   return options;
 };

packages/plots/src/core/utils/index.ts

@@ -30,7 +30,6 @@ export { isCompositePlot } from './is-composite-plot';
 export { transformOptions } from './transform';
 export { getShapeConfigKeys } from './get-shape-config-keys';
 export { deleteCustomKeys } from './delete-custom-keys';
-export { deleteChartOptionKeys } from './delete-chart-option-keys';
 export { filterTransformed } from './filter-transformed';
 export { conversionTagFormatter } from './conversion';
 export { deepAssign } from '@ant-design/charts-util';

packages/plots/src/core/utils/transform.ts

@@ -1,4 +1,4 @@
-import { SPECIAL_OPTIONS, TRANSFORM_OPTION_KEY, CONFIG_SHAPE } from '../constants';
+import { SPECIAL_OPTIONS, TRANSFORM_OPTION_KEY, CONFIG_SHAPE, VIEW_OPTIONS } from '../constants';
 import {
   omit,
   pick,
@@ -19,12 +19,7 @@ export const transformOptions = (params: Adaptor) => {
   const options = filterTransformed(params);
   const { children = [] } = options;
 
-  const getRest = (o: Adaptor['options']) => {
-    const { children, type, data, ...rest } = o;
-    return omit(rest, getShapeConfigKeys());
-  };
-
-  const rest = getRest(options);
+  const rest = omit(options, [].concat(VIEW_OPTIONS, getShapeConfigKeys()));
 
   const getValue = (newConfig: string | Function, value: unknown, origin: Options) => {
     if (typeof newConfig === 'function') {

site/examples/statistics/dual-axes/demo/meta.json

@@ -12,6 +12,14 @@
       },
       "screenshot": "https://mdn.alipayobjects.com/mdn/huamei_qa8qxu/afts/img/A*GLvKQbqMjTQAAAAAAAAAAAAADmJ7AQ/fmt.webp"
     },
+    {
+      "filename": "segment.js",
+      "title": {
+        "zh": " 分段图",
+        "en": "Segment Chart"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*t5wnSouqkP4AAAAAAAAAAAAADmJ7AQ/original"
+    },
     {
       "filename": "multi-line.js",
       "title": {

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

@@ -0,0 +1,53 @@
+import { DualAxes } from '@ant-design/plots';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+const DemoDualAxes = () => {
+  const data = [
+    { year: '1991', value: null, count: 3 },
+    { year: '1992', value: null, count: 3 },
+    { year: '1993', value: null, count: 5 },
+    { year: '1994', value: 5, count: 5 },
+    { year: '1995', value: 6, count: null },
+    { year: '1996', value: 8, count: null },
+    { year: '1997', value: 7, count: null },
+    { year: '1998', value: 9, count: null },
+  ];
+
+  const config = {
+    data,
+    xField: 'year',
+    scale: {
+      y: {
+        independent: false,
+        key: 'sameKey',
+        domain: [0, 10],
+      },
+    },
+    tooltip: {
+      items: [
+        (item) => ({
+          name: '销售额',
+          value: item.value | item.count,
+        }),
+      ],
+    },
+    children: [
+      {
+        type: 'line',
+        yField: 'count',
+      },
+      {
+        type: 'line',
+        yField: 'value',
+        style: {
+          lineDash: [2, 4],
+          stroke: 'red',
+        },
+      },
+    ],
+  };
+  return <DualAxes {...config} />;
+};
+
+ReactDOM.render(<DemoDualAxes />, document.getElementById('container'));