From 1f0fcc7fda2478c020e5cad98d3d0d496a4a98f5 Mon Sep 17 00:00:00 2001 From: ai-qing-hai Date: Tue, 28 Nov 2023 17:20:34 +0800 Subject: [PATCH] feat(sunburst): add sunburst demo --- package.json | 2 + site/.dumi/global.ts | 1 + site/examples/general/sunburst/demo/meta.json | 56 +++++++++++++++++++ .../general/sunburst/demo/sunburst-color.ts | 20 +++++++ .../general/sunburst/demo/sunburst-default.ts | 20 +++++++ .../sunburst/demo/sunburst-interaction.ts | 47 ++++++++++++++++ .../general/sunburst/demo/sunburst-label.ts | 27 +++++++++ .../general/sunburst/demo/sunburst-pattern.ts | 37 ++++++++++++ .../general/sunburst/demo/sunburst-style.ts | 25 +++++++++ site/examples/general/sunburst/index.en.md | 4 ++ site/examples/general/sunburst/index.zh.md | 4 ++ site/package.json | 1 + 12 files changed, 244 insertions(+) create mode 100644 site/examples/general/sunburst/demo/meta.json create mode 100644 site/examples/general/sunburst/demo/sunburst-color.ts create mode 100644 site/examples/general/sunburst/demo/sunburst-default.ts create mode 100644 site/examples/general/sunburst/demo/sunburst-interaction.ts create mode 100644 site/examples/general/sunburst/demo/sunburst-label.ts create mode 100644 site/examples/general/sunburst/demo/sunburst-pattern.ts create mode 100644 site/examples/general/sunburst/demo/sunburst-style.ts create mode 100644 site/examples/general/sunburst/index.en.md create mode 100644 site/examples/general/sunburst/index.zh.md diff --git a/package.json b/package.json index 4abc85de56..633c334f62 100644 --- a/package.json +++ b/package.json @@ -83,6 +83,7 @@ }, "devDependencies": { "@antv/data-set": "^0.11.8", + "@antv/g-pattern": "^1.2.19", "@antv/g-plugin-3d": "^1.9.26", "@antv/g-plugin-control": "^1.9.17", "@antv/g-plugin-rough-canvas-renderer": "^1.9.22", @@ -91,6 +92,7 @@ "@antv/g-webgl": "^1.9.29", "@antv/g2-extension-3d": "^0.1.3", "@antv/g2-extension-ava": "^0.1.1", + "@antv/g2-extension-plot": "^0.1.0", "@antv/translator": "^1.0.1", "@commitlint/cli": "^11.0.0", "@commitlint/config-conventional": "^17.8.1", diff --git a/site/.dumi/global.ts b/site/.dumi/global.ts index 48cd10c1d2..0883fd6a32 100644 --- a/site/.dumi/global.ts +++ b/site/.dumi/global.ts @@ -6,6 +6,7 @@ if (window) { (window as any).G2 = (window as any).g2; (window as any).g2Extension3d = require('@antv/g2-extension-3d'); (window as any).g2ExtensionAva = require('@antv/g2-extension-ava'); + (window as any).g2ExtensionPlot = require('@antv/g2-extension-plot'); (window as any).s2 = require('@antv/s2'); (window as any).d3Hierarchy = require('d3-hierarchy'); (window as any).d3ScaleChromatic = require('d3-scale-chromatic'); diff --git a/site/examples/general/sunburst/demo/meta.json b/site/examples/general/sunburst/demo/meta.json new file mode 100644 index 0000000000..f823fe8732 --- /dev/null +++ b/site/examples/general/sunburst/demo/meta.json @@ -0,0 +1,56 @@ +{ + "title": { + "zh": "中文分类", + "en": "Category" + }, + "demos": [ + { + "filename": "sunburst-default.ts", + "title": { + "zh": "旭日图", + "en": "Sunburst Chart" + }, + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*-aInRJfa4-8AAAAAAAAAAAAADmJ7AQ/original" + }, + { + "filename": "sunburst-label.ts", + "title": { + "zh": "旭日图带标签", + "en": "Sunburst Label Chart" + }, + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*GBxdT697NYQAAAAAAAAAAAAADmJ7AQ/original" + }, + { + "filename": "sunburst-color.ts", + "title": { + "zh": "旭日图自定义颜色通道", + "en": "Sunburst ColorField Chart" + }, + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*7L4tQ4F61ZkAAAAAAAAAAAAADmJ7AQ/original" + }, + { + "filename": "sunburst-style.ts", + "title": { + "zh": "旭日图自定义样式", + "en": "Sunburst Style Chart" + }, + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*BP7zQ6SMiKcAAAAAAAAAAAAADmJ7AQ/original" + }, + { + "filename": "sunburst-pattern.ts", + "title": { + "zh": "旭日图自定义纹理", + "en": "Sunburst Pattern Chart" + }, + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*rVCgTqydP5kAAAAAAAAAAAAADmJ7AQ/original" + }, + { + "filename": "sunburst-interaction.ts", + "title": { + "zh": "旭日图交互配置", + "en": "Sunburst Interaction Config Chart" + }, + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*7C0NQK9_TfwAAAAAAAAAAAAADmJ7AQ/original" + } + ] +} diff --git a/site/examples/general/sunburst/demo/sunburst-color.ts b/site/examples/general/sunburst/demo/sunburst-color.ts new file mode 100644 index 0000000000..1b46b03217 --- /dev/null +++ b/site/examples/general/sunburst/demo/sunburst-color.ts @@ -0,0 +1,20 @@ +import { plotlib } from '@antv/g2-extension-plot'; +import { Runtime, corelib, extend } from '@antv/g2'; + +const Chart = extend(Runtime, { ...corelib(), ...plotlib() }); + +const chart = new Chart({ + container: 'container', + autoFit: true, +}); + +chart + .sunburst() + .data({ + type: 'fetch', + value: 'https://gw.alipayobjects.com/os/antvdemo/assets/data/sunburst.json', + }) + .encode('value', 'sum') + .encode('color', 'label'); + +chart.render(); diff --git a/site/examples/general/sunburst/demo/sunburst-default.ts b/site/examples/general/sunburst/demo/sunburst-default.ts new file mode 100644 index 0000000000..dd3dd8037a --- /dev/null +++ b/site/examples/general/sunburst/demo/sunburst-default.ts @@ -0,0 +1,20 @@ +import { plotlib } from '@antv/g2-extension-plot'; +import { Runtime, corelib, extend } from '@antv/g2'; + +const Chart = extend(Runtime, { ...corelib(), ...plotlib() }); + +const chart = new Chart({ + container: 'container', + autoFit: true, +}); + +chart + .sunburst() + .data({ + type: 'fetch', + value: 'https://gw.alipayobjects.com/os/antfincdn/ryp44nvUYZ/coffee.json', + }) + .animate('enter', { type: 'waveIn' }) + .coordinate({ type: 'polar', innerRadius: 0 }); + +chart.render(); diff --git a/site/examples/general/sunburst/demo/sunburst-interaction.ts b/site/examples/general/sunburst/demo/sunburst-interaction.ts new file mode 100644 index 0000000000..c926c496e5 --- /dev/null +++ b/site/examples/general/sunburst/demo/sunburst-interaction.ts @@ -0,0 +1,47 @@ +import { plotlib } from '@antv/g2-extension-plot'; +import { Runtime, corelib, extend } from '@antv/g2'; + +const Chart = extend(Runtime, { ...corelib(), ...plotlib() }); + +const chart = new Chart({ + container: 'container', + autoFit: true, +}); + +chart + .sunburst() + .data({ + type: 'fetch', + value: 'https://gw.alipayobjects.com/os/antvdemo/assets/data/sunburst.json', + }) + .encode('value', 'sum') + .label({ + text: 'name', + transform: [ + { + type: 'overflowHide', + }, + ], + }) + .interaction({ + drillDown: { + breadCrumb: { + rootText: '起始', + style: { + fontSize: '18px', + fill: '#333', + }, + active: { + fill: 'red', + }, + }, + // FixedColor default: true, true -> drillDown update scale, false -> scale keep. + fixedColor: false, + }, + }) + .state({ + active: { zIndex: 2, stroke: 'red' }, + inactive: { zIndex: 1, stroke: '#fff' }, + }); + +chart.render(); diff --git a/site/examples/general/sunburst/demo/sunburst-label.ts b/site/examples/general/sunburst/demo/sunburst-label.ts new file mode 100644 index 0000000000..5b30332906 --- /dev/null +++ b/site/examples/general/sunburst/demo/sunburst-label.ts @@ -0,0 +1,27 @@ +import { plotlib } from '@antv/g2-extension-plot'; +import { Runtime, corelib, extend } from '@antv/g2'; + +const Chart = extend(Runtime, { ...corelib(), ...plotlib() }); + +const chart = new Chart({ + container: 'container', + autoFit: true, +}); + +chart + .sunburst() + .data({ + type: 'fetch', + value: 'https://gw.alipayobjects.com/os/antvdemo/assets/data/sunburst.json', + }) + .encode('value', 'sum') + .label({ + text: 'name', + transform: [ + { + type: 'overflowHide', + }, + ], + }); + +chart.render(); diff --git a/site/examples/general/sunburst/demo/sunburst-pattern.ts b/site/examples/general/sunburst/demo/sunburst-pattern.ts new file mode 100644 index 0000000000..8ccf5cae9c --- /dev/null +++ b/site/examples/general/sunburst/demo/sunburst-pattern.ts @@ -0,0 +1,37 @@ +import { lines } from '@antv/g-pattern'; +import { plotlib } from '@antv/g2-extension-plot'; +import { Runtime, corelib, extend } from '@antv/g2'; + +const Chart = extend(Runtime, { ...corelib(), ...plotlib() }); + +const colors = ['#e8c1a0', '#f47560', '#f1e15b', '#e8a838', '#61cdbb']; + +const chart = new Chart({ + container: 'container', + autoFit: true, +}); + +chart + .sunburst() + .data({ + type: 'fetch', + value: 'https://gw.alipayobjects.com/os/antvdemo/assets/data/sunburst.json', + }) + .encode('value', 'sum') + .style({ + fill: (_, idx) => { + return { + image: lines({ + backgroundColor: colors[idx % colors.length], + backgroundOpacity: 0.65, + stroke: colors[idx % colors.length], + lineWidth: 4, + spacing: 5, + }), + repetition: 'repeat', + transform: 'rotate(30deg)', + }; + }, + }); + +chart.render(); diff --git a/site/examples/general/sunburst/demo/sunburst-style.ts b/site/examples/general/sunburst/demo/sunburst-style.ts new file mode 100644 index 0000000000..ebf6a740ad --- /dev/null +++ b/site/examples/general/sunburst/demo/sunburst-style.ts @@ -0,0 +1,25 @@ +import { plotlib } from '@antv/g2-extension-plot'; +import { Runtime, corelib, extend } from '@antv/g2'; + +const Chart = extend(Runtime, { ...corelib(), ...plotlib() }); + +const chart = new Chart({ + container: 'container', + autoFit: true, +}); + +chart + .sunburst() + .data({ + type: 'fetch', + value: 'https://gw.alipayobjects.com/os/antvdemo/assets/data/sunburst.json', + }) + .encode('value', 'sum') + .style({ + fill: (v) => { + if (v['path'] === '类别 3') return 'red'; + if (v['name'] === '类别 2.1.1') return 'red'; + }, + }); + +chart.render(); diff --git a/site/examples/general/sunburst/index.en.md b/site/examples/general/sunburst/index.en.md new file mode 100644 index 0000000000..519b9db0fa --- /dev/null +++ b/site/examples/general/sunburst/index.en.md @@ -0,0 +1,4 @@ +--- +title: Sunburst +order: 16 +--- diff --git a/site/examples/general/sunburst/index.zh.md b/site/examples/general/sunburst/index.zh.md new file mode 100644 index 0000000000..5207a6df25 --- /dev/null +++ b/site/examples/general/sunburst/index.zh.md @@ -0,0 +1,4 @@ +--- +title: 旭日图 +order: 16 +--- \ No newline at end of file diff --git a/site/package.json b/site/package.json index ce2dee8cbc..f96d357b1c 100644 --- a/site/package.json +++ b/site/package.json @@ -21,6 +21,7 @@ "@antv/g-webgl": "^1.9.29", "@antv/g2-extension-3d": "^0.1.3", "@antv/g2-extension-ava": "^0.2.0", + "@antv/g2-extension-plot": "^0.1.0", "@antv/s2": "^1.52.0", "antd": "^4.24.14", "d3-array": "^3.2.4",