diff --git a/packages/plots/src/components/index.ts b/packages/plots/src/components/index.ts index 27e8918ac..f84a25c37 100644 --- a/packages/plots/src/components/index.ts +++ b/packages/plots/src/components/index.ts @@ -13,6 +13,7 @@ import Waterfall from './waterfall'; import Histogram from './histogram'; import Heatmap from './heatmap'; import Box from './box'; +import Sankey from './sankey'; import Bullet from './bullet'; import Gauge from './gauge'; import Liquid from './liquid'; @@ -33,6 +34,7 @@ export type { WaterfallConfig } from './waterfall'; export type { HistogramConfig } from './histogram'; export type { HeatmapConfig } from './heatmap'; export type { BoxConfig } from './box'; +export type { SankeyConfig } from './sankey'; export type { BulletConfig } from './bullet'; export type { GaugeConfig } from './gauge'; export type { LiquidConfig } from './liquid'; @@ -55,6 +57,7 @@ export { Waterfall, Heatmap, Box, + Sankey, Bullet, Gauge, Liquid, diff --git a/packages/plots/src/components/sankey/index.tsx b/packages/plots/src/components/sankey/index.tsx new file mode 100644 index 000000000..c5febface --- /dev/null +++ b/packages/plots/src/components/sankey/index.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +import { SankeyOptions } from '../../core'; +import { CommonConfig } from '../../interface'; +import { BaseChart } from '../base'; + +export type SankeyConfig = CommonConfig; + +const SankeyChart = (props: SankeyConfig) => ; + +export default SankeyChart; diff --git a/packages/plots/src/core/index.ts b/packages/plots/src/core/index.ts index 22dd1b3a9..75b99349f 100644 --- a/packages/plots/src/core/index.ts +++ b/packages/plots/src/core/index.ts @@ -17,6 +17,7 @@ export type { WaterfallOptions } from './plots/waterfall'; export type { HistogramOptions } from './plots/histogram'; export type { HeatmapOptions } from './plots/heatmap'; export type { BoxOptions } from './plots/box'; +export type { SankeyOptions } from './plots/sankey'; export type { BulletOptions } from './plots/bullet'; export type { GaugeOptions } from './plots/gauge'; export type { LiquidOptions } from './plots/liquid'; @@ -43,6 +44,7 @@ import { Waterfall } from './plots/waterfall'; import { Histogram } from './plots/histogram'; import { Heatmap } from './plots/heatmap'; import { Box } from './plots/box'; +import { Sankey } from './plots/sankey'; import { Bullet } from './plots/bullet'; import { Gauge } from './plots/gauge'; import { Liquid } from './plots/liquid'; @@ -69,6 +71,7 @@ export const Plots = { Histogram, Heatmap, Box, + Sankey, Bullet, Gauge, Liquid, diff --git a/packages/plots/src/core/plots/sankey/adaptor.ts b/packages/plots/src/core/plots/sankey/adaptor.ts new file mode 100644 index 000000000..fa25137dd --- /dev/null +++ b/packages/plots/src/core/plots/sankey/adaptor.ts @@ -0,0 +1,21 @@ +import { mark } from '../../components'; +import type { Adaptor } from '../../types'; +import { flow, transformOptions } from '../../utils'; +import type { SankeyOptions } from './type'; + +type Params = Adaptor; + +/** + * @param chart + * @param options + */ +export function adaptor(params: Params) { + /** + * 图表差异化处理 + */ + const init = (params: Params) => { + return params; + }; + + return flow(init, transformOptions, mark)(params); +} diff --git a/packages/plots/src/core/plots/sankey/index.ts b/packages/plots/src/core/plots/sankey/index.ts new file mode 100644 index 000000000..300b908e0 --- /dev/null +++ b/packages/plots/src/core/plots/sankey/index.ts @@ -0,0 +1,33 @@ +import { Plot } from '../../base'; +import type { Adaptor } from '../../types'; +import { adaptor } from './adaptor'; +import { SankeyOptions } from './type'; + +export type { SankeyOptions }; + +export class Sankey extends Plot { + /** 图表类型 */ + public type = 'sankey'; + + /** + * 获取 双轴图 默认配置项 + * 供外部使用 + */ + static getDefaultOptions(): Partial { + return { type: 'view', children: [{ type: 'sankey' }] }; + } + + /** + * 获取 条形图 默认配置 + */ + protected getDefaultOptions() { + return Sankey.getDefaultOptions(); + } + + /** + * 条形图适配器 + */ + protected getSchemaAdaptor(): (params: Adaptor) => void { + return adaptor; + } +} diff --git a/packages/plots/src/core/plots/sankey/type.ts b/packages/plots/src/core/plots/sankey/type.ts new file mode 100644 index 000000000..4a1f2cb56 --- /dev/null +++ b/packages/plots/src/core/plots/sankey/type.ts @@ -0,0 +1,3 @@ +import type { Options, BaseOptions } from '../../types/common'; + +export type SankeyOptions = Options & BaseOptions; diff --git a/site/examples/statistics/sankey/demo/basic.js b/site/examples/statistics/sankey/demo/basic.js new file mode 100644 index 000000000..fc22f4dad --- /dev/null +++ b/site/examples/statistics/sankey/demo/basic.js @@ -0,0 +1,46 @@ +import { Sankey } from '@ant-design/plots' +import React from 'react'; +import ReactDOM from 'react-dom'; + +const DemoSankey = () => { + const config = { + layout: { nodeAlign: "center", nodePadding: 0.03 }, + data: { + type: "fetch", + value: "https://assets.antv.antgroup.com/g2/energy.json", + transform: [ + { + type: "custom", + callback: (data) => ({ + links: data, + }), + }, + ], + }, + scale: { + color: { + range: [ + "#4e79a7", + "#f28e2c", + "#e15759", + "#76b7b2", + "#59a14f", + "#edc949", + "#af7aa1", + "#ff9da7", + "#9c755f", + "#bab0ab", + ], + }, + }, + style: { + labelSpacing: 3, + labelFontWeight: "bold", + nodeStrokeWidth: 1.2, + linkFillOpacity: 0.4, + }, + }; + return ; +}; + +ReactDOM.render(, document.getElementById('container')); diff --git a/site/examples/statistics/sankey/demo/meta.json b/site/examples/statistics/sankey/demo/meta.json new file mode 100644 index 000000000..cf1ca51a7 --- /dev/null +++ b/site/examples/statistics/sankey/demo/meta.json @@ -0,0 +1,16 @@ +{ + "title": { + "zh": "中文分类", + "en": "Category" + }, + "demos": [ + { + "filename": "basic.js", + "title": { + "zh": "桑基图", + "en": "Sankey" + }, + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*dACBR7ANcfEAAAAAAAAAAAAADmJ7AQ/original" + } + ] +} diff --git a/site/examples/statistics/sankey/index.en.md b/site/examples/statistics/sankey/index.en.md new file mode 100644 index 000000000..e757ad045 --- /dev/null +++ b/site/examples/statistics/sankey/index.en.md @@ -0,0 +1,4 @@ +--- +title: Sankey +order: 20 +--- \ No newline at end of file diff --git a/site/examples/statistics/sankey/index.zh.md b/site/examples/statistics/sankey/index.zh.md new file mode 100644 index 000000000..b51710f20 --- /dev/null +++ b/site/examples/statistics/sankey/index.zh.md @@ -0,0 +1,6 @@ +--- +title: 桑基图 +order: 20 +--- + +