From 2cb223cd9eccb0be608ec675f9c155fe05ef51ee Mon Sep 17 00:00:00 2001 From: lkd01632719 Date: Wed, 13 Sep 2023 16:23:56 +0800 Subject: [PATCH] docs: add basic sankey --- packages/plots/src/components/index.ts | 20 +++++++- .../plots/src/components/sankey/index.tsx | 10 ++++ packages/plots/src/core/index.ts | 3 ++ .../plots/src/core/plots/sankey/adaptor.ts | 21 +++++++++ packages/plots/src/core/plots/sankey/index.ts | 33 +++++++++++++ packages/plots/src/core/plots/sankey/type.ts | 3 ++ site/examples/statistics/sankey/demo/basic.js | 46 +++++++++++++++++++ .../examples/statistics/sankey/demo/meta.json | 16 +++++++ site/examples/statistics/sankey/index.en.md | 4 ++ site/examples/statistics/sankey/index.zh.md | 6 +++ 10 files changed, 161 insertions(+), 1 deletion(-) create mode 100644 packages/plots/src/components/sankey/index.tsx create mode 100644 packages/plots/src/core/plots/sankey/adaptor.ts create mode 100644 packages/plots/src/core/plots/sankey/index.ts create mode 100644 packages/plots/src/core/plots/sankey/type.ts create mode 100644 site/examples/statistics/sankey/demo/basic.js create mode 100644 site/examples/statistics/sankey/demo/meta.json create mode 100644 site/examples/statistics/sankey/index.en.md create mode 100644 site/examples/statistics/sankey/index.zh.md diff --git a/packages/plots/src/components/index.ts b/packages/plots/src/components/index.ts index 98659db86..0dff35831 100644 --- a/packages/plots/src/components/index.ts +++ b/packages/plots/src/components/index.ts @@ -13,5 +13,23 @@ import Waterfall from './waterfall'; import Histogram from './histogram'; import Heatmap from './heatmap'; import Box from './box'; +import Sankey from './sankey'; -export { Base, Column, Line, Pie, Area, Bar, DualAxes, Scatter, Radar, Rose, Tiny, Histogram, Waterfall, Heatmap, Box }; +export { + Base, + Column, + Line, + Pie, + Area, + Bar, + DualAxes, + Scatter, + Radar, + Rose, + Tiny, + Histogram, + Waterfall, + Heatmap, + Box, + Sankey, +}; 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 c30709122..c69cdf5cc 100644 --- a/packages/plots/src/core/index.ts +++ b/packages/plots/src/core/index.ts @@ -16,6 +16,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 * from './types'; import { Base } from './plots/base'; @@ -36,6 +37,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'; export const Plots = { Base, @@ -56,4 +58,5 @@ export const Plots = { Histogram, Heatmap, Box, + Sankey, }; 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 +--- + +