feat(sunburst): add sunburst demo (#5854)

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",

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');

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"
+    }
+  ]
+}

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();

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();

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();

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();

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();

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();

site/examples/general/sunburst/index.en.md

@@ -0,0 +1,4 @@
+---
+title: Sunburst
+order: 16
+---

site/examples/general/sunburst/index.zh.md

@@ -0,0 +1,4 @@
+---
+title: 旭日图
+order: 16
+---

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",