diff --git a/packages/plots/CHANGELOG.md b/packages/plots/CHANGELOG.md index b1b76f99f..18e698683 100644 --- a/packages/plots/CHANGELOG.md +++ b/packages/plots/CHANGELOG.md @@ -1,3 +1,11 @@ +## 2.1.2 + +`2023-12-12` + +- 🔥 新增 segment chart 示例，优化 transform 逻辑 +- 🐞 修复 autoFit 配置无效 + + ## 2.1.1 `2023-12-08` diff --git a/packages/plots/package.json b/packages/plots/package.json index bbdad9c58..0d4d60cf9 100644 --- a/packages/plots/package.json +++ b/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" diff --git a/packages/plots/src/core/base/index.ts b/packages/plots/src/core/base/index.ts index 8f901936e..65c6270b6 100644 --- a/packages/plots/src/core/base/index.ts +++ b/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 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 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 extends EE { } private getBaseOptions(): Partial { - return { type: 'view' }; + return { type: 'view', autoFit: true }; } /** * 获取默认的 options 配置项，每个组件都可以复写 */ - protected getDefaultOptions(): any { } + protected getDefaultOptions(): any {} /** * 绘制 @@ -182,7 +180,7 @@ export abstract class Plot extends EE { // 转化成 G2 Spec adaptor({ chart: this.chart, - options: deleteChartOptionKeys(this.options), + options: this.options, }); } diff --git a/packages/plots/src/core/constants/index.ts b/packages/plots/src/core/constants/index.ts index 7f6e93d53..a13eeba6b 100644 --- a/packages/plots/src/core/constants/index.ts +++ b/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__'; diff --git a/packages/plots/src/core/plots/dual-axes/adaptor.ts b/packages/plots/src/core/plots/dual-axes/adaptor.ts index e1e548224..542e88bc5 100644 --- a/packages/plots/src/core/plots/dual-axes/adaptor.ts +++ b/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; diff --git a/packages/plots/src/core/utils/delete-chart-option-keys.ts b/packages/plots/src/core/utils/delete-chart-option-keys.ts deleted file mode 100644 index dff3c2a75..000000000 --- a/packages/plots/src/core/utils/delete-chart-option-keys.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { CHART_OPTIONS } from '../constants'; -import { Options } from '../types'; - -/** - * 统一删除不消费的配置项 - */ -export const deleteChartOptionKeys = (options: O): O => { - Object.keys(options).forEach((key) => { - if (CHART_OPTIONS.includes(key)) { - delete options[key]; - } - }); - - return options; -}; diff --git a/packages/plots/src/core/utils/delete-custom-keys.ts b/packages/plots/src/core/utils/delete-custom-keys.ts index 351fd9ebb..48fc65dc2 100644 --- a/packages/plots/src/core/utils/delete-custom-keys.ts +++ b/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 = (options: O, isRender?: boolean): O => { +export const deleteCustomKeys = (options: O): O => { const deleteKeys = getCustomKeys(); [...deleteKeys, ...COORDIANTE_OPTIONS].forEach((key) => { delete options[key]; @@ -20,16 +19,5 @@ export const deleteCustomKeys = (options: O, isRender?: boole }); }); - /** - * @description 最终渲染，除保留配置外，其余全部删除，避免配置污染 - */ - if (isRender) { - Object.keys(options).forEach((key) => { - if (!RESERVED_KEYS.includes(key)) { - delete options[key]; - } - }); - } - return options; }; diff --git a/packages/plots/src/core/utils/index.ts b/packages/plots/src/core/utils/index.ts index d771fda17..a7103ecf1 100644 --- a/packages/plots/src/core/utils/index.ts +++ b/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'; diff --git a/packages/plots/src/core/utils/transform.ts b/packages/plots/src/core/utils/transform.ts index 90bbbc518..dc21d8d2f 100644 --- a/packages/plots/src/core/utils/transform.ts +++ b/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') { diff --git a/site/examples/statistics/dual-axes/demo/meta.json b/site/examples/statistics/dual-axes/demo/meta.json index 4eb7c789e..9b00029ba 100644 --- a/site/examples/statistics/dual-axes/demo/meta.json +++ b/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": { diff --git a/site/examples/statistics/dual-axes/demo/segment.js b/site/examples/statistics/dual-axes/demo/segment.js new file mode 100644 index 000000000..f631a857c --- /dev/null +++ b/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 ; +}; + +ReactDOM.render(, document.getElementById('container'));