From de389d3b3a4cd54daf9330f9a1c5667da0f9e339 Mon Sep 17 00:00:00 2001 From: visiky <736929286@qq.com> Date: Fri, 1 Apr 2022 21:26:53 +0800 Subject: [PATCH] =?UTF-8?q?feat(coordinate):=20=20=E6=94=AF=E6=8C=81=20coo?= =?UTF-8?q?rdinate=20=E5=9D=90=E6=A0=87=E8=BD=AC=E6=8D=A2=E9=85=8D?= =?UTF-8?q?=E7=BD=AE=20(#3172)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- __tests__/bugs/bar-axis-label-spec.ts | 2 +- __tests__/unit/plots/area/change-data-spec.ts | 4 +- .../unit/plots/word-cloud/legend-spec.ts | 1 - docs/api/plots/area.en.md | 2 + docs/api/plots/area.zh.md | 2 + docs/api/plots/bar.en.md | 2 + docs/api/plots/bar.zh.md | 2 + docs/api/plots/column.en.md | 2 + docs/api/plots/column.zh.md | 2 + docs/common/coordinate.en.md | 20 ++++++ docs/common/coordinate.zh.md | 20 ++++++ examples/bar/basic/demo/coordinate.ts | 22 ++++++ examples/bar/basic/demo/meta.json | 8 +++ examples/column/basic/demo/coordinate.ts | 68 +++++++++++++++++++ examples/column/basic/demo/meta.json | 9 +++ examples/plugin/multi-view/demo/meta.json | 1 + gatsby-config.js | 4 +- src/adaptor/common.ts | 29 +++++++- src/plots/area/adaptor.ts | 17 ++++- src/plots/area/index.ts | 4 +- src/plots/area/types.ts | 7 ++ src/plots/bar/adaptor.ts | 6 +- src/plots/bar/index.ts | 4 +- src/plots/column/adaptor.ts | 6 +- src/plots/column/index.ts | 4 +- src/plots/column/types.ts | 7 ++ src/plots/mix/utils.ts | 35 +++++----- src/plots/pie/adaptor.ts | 2 +- src/types/coordinate.ts | 17 +++++ src/utils/transform/percent.ts | 2 +- 30 files changed, 271 insertions(+), 40 deletions(-) create mode 100644 docs/common/coordinate.en.md create mode 100644 docs/common/coordinate.zh.md create mode 100644 examples/bar/basic/demo/coordinate.ts create mode 100644 examples/column/basic/demo/coordinate.ts create mode 100644 src/types/coordinate.ts diff --git a/__tests__/bugs/bar-axis-label-spec.ts b/__tests__/bugs/bar-axis-label-spec.ts index b82978f8f5..8385303e2d 100644 --- a/__tests__/bugs/bar-axis-label-spec.ts +++ b/__tests__/bugs/bar-axis-label-spec.ts @@ -24,7 +24,7 @@ describe('bar yaxis formatter', () => { yField: 'type', xAxis: { label: { - formatter: (v) => 'hello', + formatter: () => 'hello', }, }, }); diff --git a/__tests__/unit/plots/area/change-data-spec.ts b/__tests__/unit/plots/area/change-data-spec.ts index 462d85e77d..6e2d9acee9 100644 --- a/__tests__/unit/plots/area/change-data-spec.ts +++ b/__tests__/unit/plots/area/change-data-spec.ts @@ -1,5 +1,5 @@ import { Area } from '../../../../src'; -import { getDataWhetherPecentage } from '../../../../src/utils/transform/percent'; +import { getDataWhetherPercentage } from '../../../../src/utils/transform/percent'; import { partySupport } from '../../../data/party-support'; import { createDiv } from '../../../utils/dom'; @@ -69,7 +69,7 @@ describe('area', () => { expect(area.chart.geometries[1].elements.length).toBe(2); expect(area.options.data).toEqual(partySupport.filter((o) => ['FF', 'Lab'].includes(o.type))); const { data, isPercent, xField, yField } = area.options; - expect(area.chart.getData()).toEqual(getDataWhetherPecentage(data, yField, xField, yField, isPercent)); + expect(area.chart.getData()).toEqual(getDataWhetherPercentage(data, yField, xField, yField, isPercent)); area.destroy(); }); diff --git a/__tests__/unit/plots/word-cloud/legend-spec.ts b/__tests__/unit/plots/word-cloud/legend-spec.ts index 7ee96443e5..e6933a5d4d 100644 --- a/__tests__/unit/plots/word-cloud/legend-spec.ts +++ b/__tests__/unit/plots/word-cloud/legend-spec.ts @@ -1,4 +1,3 @@ -import { groupBy, keys } from '@antv/util'; import { WordCloud } from '../../../../src'; import { CountryEconomy } from '../../../data/country-economy'; import { createDiv } from '../../../utils/dom'; diff --git a/docs/api/plots/area.en.md b/docs/api/plots/area.en.md index e55cbcfea8..8ae7f85a5c 100644 --- a/docs/api/plots/area.en.md +++ b/docs/api/plots/area.en.md @@ -29,6 +29,8 @@ Grouping field. For example, when we need to analyze the transaction volume tren ### Graphic Style +`markdown:docs/common/coordinate.en.md` + #### smooth **optional** _boolean_ _default:_ `false` diff --git a/docs/api/plots/area.zh.md b/docs/api/plots/area.zh.md index 6ba28c248c..090e264b37 100644 --- a/docs/api/plots/area.zh.md +++ b/docs/api/plots/area.zh.md @@ -29,6 +29,8 @@ order: 1 ### 图形样式 +`markdown:docs/common/coordinate.zh.md` + #### smooth **optional** _boolean_ _default:_ `false` diff --git a/docs/api/plots/bar.en.md b/docs/api/plots/bar.en.md index fb5da49554..4ea729db8b 100644 --- a/docs/api/plots/bar.en.md +++ b/docs/api/plots/bar.en.md @@ -59,6 +59,8 @@ Whether the plot is Percent Bar. When isPercent is `true`, isStack must be `true ### Graphic Style +`markdown:docs/common/coordinate.en.md` + `markdown:docs/common/color.en.md` #### pattern ✨ diff --git a/docs/api/plots/bar.zh.md b/docs/api/plots/bar.zh.md index 3d65d87e5e..1572a5a6c9 100644 --- a/docs/api/plots/bar.zh.md +++ b/docs/api/plots/bar.zh.md @@ -59,6 +59,8 @@ order: 3 ### 图形样式 +`markdown:docs/common/coordinate.zh.md` + `markdown:docs/common/color.zh.md` #### pattern ✨ diff --git a/docs/api/plots/column.en.md b/docs/api/plots/column.en.md index 8728b28e26..53cf9e433a 100644 --- a/docs/api/plots/column.en.md +++ b/docs/api/plots/column.en.md @@ -59,6 +59,8 @@ Whether to percent columns, if isPercent is true, isStack also needs to be true. ### Geometry Style +`markdown:docs/common/coordinate.en.md` + `markdown:docs/common/color.en.md` #### pattern ✨ diff --git a/docs/api/plots/column.zh.md b/docs/api/plots/column.zh.md index 6cba8c0311..cc42787047 100644 --- a/docs/api/plots/column.zh.md +++ b/docs/api/plots/column.zh.md @@ -61,6 +61,8 @@ order: 2 ### 图形样式 +`markdown:docs/common/coordinate.zh.md` + `markdown:docs/common/color.zh.md` #### pattern ✨ diff --git a/docs/common/coordinate.en.md b/docs/common/coordinate.en.md new file mode 100644 index 0000000000..81ce1ccdd9 --- /dev/null +++ b/docs/common/coordinate.en.md @@ -0,0 +1,20 @@ +#### coordinate + +**optional** _Transformation[] _ + +Transformations of coordinate; + +Types of _Transformation_ are as follows: + +```ts +type Transformation = + | { + type: 'reflectX'; // send (x, y) to (-x, y) + } + | { + type: 'reflectY'; // send (x, y) to (x, -y) + } + | { + type: 'transpose'; // send (x, y) to (y, x) + }; +``` diff --git a/docs/common/coordinate.zh.md b/docs/common/coordinate.zh.md new file mode 100644 index 0000000000..92efd8f261 --- /dev/null +++ b/docs/common/coordinate.zh.md @@ -0,0 +1,20 @@ +#### coordinate + +**optional** _Transformation[] _ + +坐标转换配置。 + +__Transformation_ 类型定义如下: + +```ts +type Transformation = + | { + type: 'reflectX'; // send (x, y) to (-x, y) + } + | { + type: 'reflectY'; // send (x, y) to (x, -y) + } + | { + type: 'transpose'; // send (x, y) to (y, x) + }; +``` diff --git a/examples/bar/basic/demo/coordinate.ts b/examples/bar/basic/demo/coordinate.ts new file mode 100644 index 0000000000..13613d78ce --- /dev/null +++ b/examples/bar/basic/demo/coordinate.ts @@ -0,0 +1,22 @@ +import { Bar } from '@antv/g2plot'; + +const data = [ + { year: '1951 年', value: 38 }, + { year: '1952 年', value: 52 }, + { year: '1956 年', value: 61 }, + { year: '1957 年', value: 145 }, + { year: '1958 年', value: 48 }, +]; + +const bar = new Bar('container', { + data, + xField: 'value', + yField: 'year', + seriesField: 'year', + legend: { + position: 'top-left', + }, + coordinate: [{ type: 'reflectX' }, { type: 'reflectY' }], +}); + +bar.render(); diff --git a/examples/bar/basic/demo/meta.json b/examples/bar/basic/demo/meta.json index 74af2f4a06..180f9505ac 100644 --- a/examples/bar/basic/demo/meta.json +++ b/examples/bar/basic/demo/meta.json @@ -12,6 +12,14 @@ }, "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/rWp4Sq5ofk/10256978-7f35-4a4c-b67c-39aaad269bc2.png" }, + { + "filename": "coordinate.ts", + "title": { + "zh": "条形图设置坐标转换", + "en": "Bar plot with coordinate transformations" + }, + "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/l41r3at5bs/becb13e0-3dc7-41e2-9458-651f6da6cdc3.png" + }, { "filename": "color.ts", "title": { diff --git a/examples/column/basic/demo/coordinate.ts b/examples/column/basic/demo/coordinate.ts new file mode 100644 index 0000000000..24853e0ad7 --- /dev/null +++ b/examples/column/basic/demo/coordinate.ts @@ -0,0 +1,68 @@ +import { Column } from '@antv/g2plot'; + +const data = [ + { + type: '家具家电', + sales: 38, + }, + { + type: '粮油副食', + sales: 52, + }, + { + type: '生鲜水果', + sales: 61, + }, + { + type: '美容洗护', + sales: 145, + }, + { + type: '母婴用品', + sales: 48, + }, + { + type: '进口食品', + sales: 38, + }, + { + type: '食品饮料', + sales: 38, + }, + { + type: '家庭清洁', + sales: 38, + }, +]; + +const columnPlot = new Column('container', { + data, + xField: 'type', + yField: 'sales', + label: { + // 可手动配置 label 数据标签位置 + position: 'middle', // 'top', 'bottom', 'middle', + // 配置样式 + style: { + fill: '#FFFFFF', + opacity: 0.6, + }, + }, + xAxis: { + label: { + autoHide: true, + autoRotate: false, + }, + }, + meta: { + type: { + alias: '类别', + }, + sales: { + alias: '销售额', + }, + }, + coordinate: [{ type: 'reflectY' }], +}); + +columnPlot.render(); diff --git a/examples/column/basic/demo/meta.json b/examples/column/basic/demo/meta.json index 4deeb3448d..09c306ed4b 100644 --- a/examples/column/basic/demo/meta.json +++ b/examples/column/basic/demo/meta.json @@ -12,6 +12,15 @@ }, "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*KAg2TY-oYRUAAAAAAAAAAAAAARQnAQ" }, + { + "filename": "coordinate.ts", + "title": { + "zh": "倒转柱状图", + "en": "Column plot reflectY" + }, + "new": true, + "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/pgIqf6yZuq/510565ac-e2d6-4869-b71e-da8c5c12bd87.png" + }, { "filename": "color.ts", "title": { diff --git a/examples/plugin/multi-view/demo/meta.json b/examples/plugin/multi-view/demo/meta.json index c2f084a57b..59b4f456b7 100644 --- a/examples/plugin/multi-view/demo/meta.json +++ b/examples/plugin/multi-view/demo/meta.json @@ -74,6 +74,7 @@ "zh": "定制股票图", "en": "Customized stock" }, + "new": true, "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/%26P96Yg5fKh/78f5836e-efde-409d-a5b6-7dfe91cd2d04.png" } ] diff --git a/gatsby-config.js b/gatsby-config.js index bc2fa58ca7..73062e3b66 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -320,8 +320,8 @@ module.exports = { indexName: 'antv_g2plot', }, announcement: { - zh: '✨欢迎订阅图表指引，不定时会更新: https://www.yuque.com/antv/g2plot/plot-guide', - en: '✨欢迎订阅图表指引，不定时会更新: https://www.yuque.com/antv/g2plot/plot-guide', + zh: '1. ✨欢迎订阅图表指引，不定时会更新: https://www.yuque.com/antv/g2plot/plot-guide 2. 柱状图、条形图、面积图支持配置坐标系转换', + en: '1. ✨欢迎订阅图表指引，不定时会更新: https://www.yuque.com/antv/g2plot/plot-guide 2. 柱状图、条形图、面积图支持配置坐标系转换', } }, }; diff --git a/src/adaptor/common.ts b/src/adaptor/common.ts index a24910dc52..89e1670fd6 100644 --- a/src/adaptor/common.ts +++ b/src/adaptor/common.ts @@ -1,8 +1,9 @@ -import { Geometry } from '@antv/g2'; +import { Geometry, Types } from '@antv/g2'; import { each, isNil, isObject } from '@antv/util'; import { Params } from '../core/adaptor'; import { Options } from '../types'; import { Interaction } from '../types/interaction'; +import { Transformations } from '../types/coordinate'; import { Axis } from '../types/axis'; import { AXIS_META_CONFIG_KEYS } from '../constant'; import { pick, deepAssign } from '../utils'; @@ -207,4 +208,30 @@ export function limitInPlot(params: Params): Params { return params; } +/** + * 坐标系转换 + */ +export function transformations(coordinateType: Types.CoordinateOption['type'] = 'rect') { + return (params: Params) => { + const { chart, options } = params; + const { coordinate } = options; + + const actions: Types.CoordinateActions[] = Array.from(coordinate || []) + .map((cfg) => { + if (cfg.type === 'reflectX') return ['reflect', 'x'] as Types.CoordinateActions; + if (cfg.type === 'reflectY') return ['reflect', 'y'] as Types.CoordinateActions; + if (cfg.type === 'transpose') return ['transpose'] as Types.CoordinateActions; + + return null; + }) + .filter((d) => !!d); + + if (actions.length !== 0) { + chart.coordinate({ type: coordinateType, actions }); + } + + return params; + }; +} + export { pattern } from './pattern'; diff --git a/src/plots/area/adaptor.ts b/src/plots/area/adaptor.ts index 1ba0be54ee..3ad1a07d32 100644 --- a/src/plots/area/adaptor.ts +++ b/src/plots/area/adaptor.ts @@ -1,11 +1,21 @@ import { Geometry } from '@antv/g2'; import { each, omit } from '@antv/util'; -import { tooltip, slider, interaction, animation, theme, annotation, limitInPlot, pattern } from '../../adaptor/common'; +import { + tooltip, + slider, + interaction, + animation, + theme, + annotation, + limitInPlot, + pattern, + transformations, +} from '../../adaptor/common'; import { findGeometry } from '../../utils'; import { Params } from '../../core/adaptor'; import { area, point, line } from '../../adaptor/geometries'; import { flow, transformLabel, deepAssign } from '../../utils'; -import { getDataWhetherPecentage } from '../../utils/transform/percent'; +import { getDataWhetherPercentage } from '../../utils/transform/percent'; import { Datum } from '../../types'; import { meta, legend, axis } from '../line/adaptor'; import { AreaOptions } from './types'; @@ -33,7 +43,7 @@ function geometry(params: Params): Params { } = options; const pointState = pointMapping?.state; - const chartData = getDataWhetherPecentage(data, yField, xField, yField, isPercent); + const chartData = getDataWhetherPercentage(data, yField, xField, yField, isPercent); chart.data(chartData); // 百分比堆积图，默认会给一个 % 格式化逻辑, 用户可自定义 const tooltipOptions = isPercent @@ -149,6 +159,7 @@ export function adaptor(params: Params) { return flow( theme, pattern('areaStyle'), + transformations('rect'), geometry, meta, adjust, diff --git a/src/plots/area/index.ts b/src/plots/area/index.ts index 82e5d8c3f0..920e8cad08 100644 --- a/src/plots/area/index.ts +++ b/src/plots/area/index.ts @@ -1,6 +1,6 @@ import { Plot } from '../../core/plot'; import { Adaptor } from '../../core/adaptor'; -import { getDataWhetherPecentage } from '../../utils/transform/percent'; +import { getDataWhetherPercentage } from '../../utils/transform/percent'; import { AreaOptions } from './types'; import { adaptor, meta } from './adaptor'; import { DEFAULT_OPTIONS } from './constants'; @@ -35,7 +35,7 @@ export class Area extends Plot { const { isPercent, xField, yField } = this.options; const { chart, options } = this; meta({ chart, options }); - this.chart.changeData(getDataWhetherPecentage(data, yField, xField, yField, isPercent)); + this.chart.changeData(getDataWhetherPercentage(data, yField, xField, yField, isPercent)); } /** diff --git a/src/plots/area/types.ts b/src/plots/area/types.ts index 79888d1505..bba42936f5 100644 --- a/src/plots/area/types.ts +++ b/src/plots/area/types.ts @@ -1,5 +1,6 @@ import { GeometryOptions, LineGeometryOptions, PointGeometryOptions } from '../../adaptor/geometries'; import { Options, StyleAttr } from '../../types'; +import { Transformations } from '../../types/coordinate'; /** 面积图的配置类型定义 */ export interface AreaOptions extends Options, Pick { @@ -48,4 +49,10 @@ export interface AreaOptions extends Options, Pick): Params { * @param params */ function coordinate(params: Params): Params { - const { chart } = params; // transpose column to bar 对角变换 & y 方向镜像变换 - chart.coordinate({ actions: [['transpose'], ['reflect', 'y']] }); - return params; + const { options } = params; + const coordinateOptions = [{ type: 'transpose' }, { type: 'reflectY' }].concat(options.coordinate || []); + return deepAssign({}, params, { options: { coordinate: coordinateOptions } }); } /** diff --git a/src/plots/bar/index.ts b/src/plots/bar/index.ts index 5060b38035..a3b37704fa 100644 --- a/src/plots/bar/index.ts +++ b/src/plots/bar/index.ts @@ -1,6 +1,6 @@ import { Plot } from '../../core/plot'; import { Adaptor } from '../../core/adaptor'; -import { getDataWhetherPecentage } from '../../utils/transform/percent'; +import { getDataWhetherPercentage } from '../../utils/transform/percent'; import { BarOptions } from './types'; import { adaptor, meta } from './adaptor'; import { DEFAULT_OPTIONS } from './constants'; @@ -31,7 +31,7 @@ export class Bar extends Plot { const { xField, yField, isPercent } = options; const switchedFieldOptions = { ...options, xField: yField, yField: xField }; meta({ chart, options: switchedFieldOptions }); - chart.changeData(getDataWhetherPecentage(data, xField, yField, xField, isPercent)); + chart.changeData(getDataWhetherPercentage(data, xField, yField, xField, isPercent)); } /** diff --git a/src/plots/column/adaptor.ts b/src/plots/column/adaptor.ts index 5754cde27c..cfb4bc524a 100644 --- a/src/plots/column/adaptor.ts +++ b/src/plots/column/adaptor.ts @@ -11,6 +11,7 @@ import { scrollbar, limitInPlot, state, + transformations, } from '../../adaptor/common'; import { conversionTag } from '../../adaptor/conversion-tag'; import { connectedArea } from '../../adaptor/connected-area'; @@ -18,7 +19,7 @@ import { interval } from '../../adaptor/geometries'; import { pattern } from '../../adaptor/pattern'; import { brushInteraction } from '../../adaptor/brush'; import { flow, transformLabel, deepAssign, findGeometry, adjustYMetaByZero, pick } from '../../utils'; -import { getDataWhetherPecentage, getDeepPercent } from '../../utils/transform/percent'; +import { getDataWhetherPercentage, getDeepPercent } from '../../utils/transform/percent'; import { Datum } from '../../types'; import { ColumnOptions } from './types'; @@ -73,7 +74,7 @@ function geometry(params: Params): Params { const percentData = isPercent && isGroup && isStack ? getDeepPercent(data, yField, [xField, groupField], yField) - : getDataWhetherPecentage(data, yField, xField, yField, isPercent); + : getDataWhetherPercentage(data, yField, xField, yField, isPercent); let chartData = []; @@ -292,6 +293,7 @@ export function adaptor(params: Params, isBar = false) { theme, // theme 需要在 geometry 之前 pattern('columnStyle'), state, + transformations('rect'), geometry, meta, axis, diff --git a/src/plots/column/index.ts b/src/plots/column/index.ts index 5a86487218..ac706a515c 100644 --- a/src/plots/column/index.ts +++ b/src/plots/column/index.ts @@ -1,6 +1,6 @@ import { Plot } from '../../core/plot'; import { Adaptor } from '../../core/adaptor'; -import { getDataWhetherPecentage } from '../../utils/transform/percent'; +import { getDataWhetherPercentage } from '../../utils/transform/percent'; import { ColumnOptions } from './types'; import { adaptor, meta } from './adaptor'; import { DEFAULT_OPTIONS } from './constants'; @@ -30,7 +30,7 @@ export class Column extends Plot { const { yField, xField, isPercent } = this.options; const { chart, options } = this; meta({ chart, options }); - this.chart.changeData(getDataWhetherPecentage(data, yField, xField, yField, isPercent)); + this.chart.changeData(getDataWhetherPercentage(data, yField, xField, yField, isPercent)); } /** diff --git a/src/plots/column/types.ts b/src/plots/column/types.ts index a2672a4f30..ed462ceb2d 100644 --- a/src/plots/column/types.ts +++ b/src/plots/column/types.ts @@ -3,6 +3,7 @@ import { BrushCfg, Options, StyleAttr } from '../../types'; import { OptionWithConversionTag } from '../../adaptor/conversion-tag'; import { OptionWithConnectedArea } from '../../adaptor/connected-area'; import { IntervalGeometryOptions } from '../../adaptor/geometries/interval'; +import { Transformations } from '../../types/coordinate'; type PartialIntervalGeometryOptions = Pick; @@ -84,4 +85,10 @@ export interface ColumnOptions * @description 开启下钻交互，以及进行下钻交互的配置 */ readonly brush?: BrushCfg; + + /** + * @title 坐标转换 + * @description 可以对坐标系进行转换，如: reflectX, reflectY, transpose 等 + */ + readonly coordinate?: Transformations; } diff --git a/src/plots/mix/utils.ts b/src/plots/mix/utils.ts index 13b5f011bf..1fa516a508 100644 --- a/src/plots/mix/utils.ts +++ b/src/plots/mix/utils.ts @@ -31,11 +31,12 @@ import { Scatter, ScatterOptions } from '../scatter'; import { Histogram, HistogramOptions } from '../histogram'; import { Funnel, FunnelOptions } from '../funnel'; import { Stock, StockOptions } from '../stock'; +import { Options } from '../../types'; /** - * 移除 options 中的 width、height、data 设置 + * 移除 options 中的 width、height 设置, 将 options 的 data 设置为可选 */ -type OmitPlotOptions = Omit; +type PlotOptions = Omit & Partial>; /** * multi-view 中的支持的 plots 类型（带 options 定义） @@ -49,63 +50,63 @@ export type IPlotTypes = /** * plot 配置 */ - readonly options: OmitPlotOptions; + readonly options: PlotOptions; } | { readonly type: 'pie'; - readonly options: OmitPlotOptions; + readonly options: PlotOptions; } | { readonly type: 'bar'; - readonly options: OmitPlotOptions; + readonly options: PlotOptions; } | { readonly type: 'column'; - readonly options: OmitPlotOptions; + readonly options: PlotOptions; } | { readonly type: 'area'; - readonly options: OmitPlotOptions; + readonly options: PlotOptions; } | { readonly type: 'gauge'; - readonly options: OmitPlotOptions; + readonly options: PlotOptions; } | { readonly type: 'tiny-line'; - readonly options: OmitPlotOptions; + readonly options: PlotOptions; } | { readonly type: 'tiny-area'; - readonly options: OmitPlotOptions; + readonly options: PlotOptions; } | { readonly type: 'tiny-column'; - readonly options: OmitPlotOptions; + readonly options: PlotOptions; } | { readonly type: 'ring-progress'; - readonly options: OmitPlotOptions; + readonly options: PlotOptions; } | { readonly type: 'progress'; - readonly options: OmitPlotOptions; + readonly options: PlotOptions; } | { readonly type: 'histogram'; - readonly options: OmitPlotOptions; + readonly options: PlotOptions; } | { readonly type: 'scatter'; - readonly options: OmitPlotOptions; + readonly options: PlotOptions; } | { readonly type: 'funnel'; - readonly options: OmitPlotOptions; + readonly options: PlotOptions; } | { readonly type: 'stock'; - readonly options: OmitPlotOptions; + readonly options: PlotOptions; }; /** diff --git a/src/plots/pie/adaptor.ts b/src/plots/pie/adaptor.ts index 50b1229220..0c20fc82d4 100644 --- a/src/plots/pie/adaptor.ts +++ b/src/plots/pie/adaptor.ts @@ -138,7 +138,7 @@ function label(params: Params): Params { const angleScale = chart.getScaleByField(angleField); const percent = angleScale?.scale(value); return isFunction(content) - ? // append pecent (number) to data, users can get origin data from `dataum._origin` + ? // append percent (number) to data, users can get origin data from `dataum._origin` content({ ...data, percent }, dataum, index) : isString(content) ? template(content as string, { diff --git a/src/types/coordinate.ts b/src/types/coordinate.ts new file mode 100644 index 0000000000..6aaf41bc88 --- /dev/null +++ b/src/types/coordinate.ts @@ -0,0 +1,17 @@ +/** + * Transformations of coordinate + */ +export type Transformations = Array< + | { + /** send (x, y) to (-x, y) */ + type: 'reflectX'; + } + | { + /** send (x, y) to (x, -y) */ + type: 'reflectY'; + } + | { + /** send (x, y) to (y, x) */ + type: 'transpose'; + } +>; diff --git a/src/utils/transform/percent.ts b/src/utils/transform/percent.ts index b14dab4830..eb2391108f 100644 --- a/src/utils/transform/percent.ts +++ b/src/utils/transform/percent.ts @@ -85,7 +85,7 @@ export function getDeepPercent(data: Record[], measure: string, fie * 获取数据，如果是百分比，进行数据转换 (适用于面积图、柱状图、条形图) * @param isPercent 是否百分比 */ -export function getDataWhetherPecentage( +export function getDataWhetherPercentage( data: Record[], yField: string, groupField: string,