feat: @antv/g2-extension-plot 0.1.0 add sunburst

antvis · Nov 27, 2023 · 279c750 · 279c750
1 parent 4fa29fa
commit 279c750
Show file tree

Hide file tree

Showing 19 changed files with 980 additions and 0 deletions.
diff --git a/plot/.gitignore b/plot/.gitignore
@@ -0,0 +1,10 @@
+node_modules
+.DS_Store
+
+esm
+lib
+dist
+
+playwright-report
+*-actual.png
+*-diff.png
diff --git a/plot/.prettierrc b/plot/.prettierrc
@@ -0,0 +1,3 @@
+{
+  "printWidth": 120
+}
diff --git a/plot/README.md b/plot/README.md
@@ -0,0 +1,37 @@
+# g2-extension-plot
+
+The plot for @antv/g2 marks.
+
+## Getting Started
+
+Install `@antv/g2-extension-plot` and `@antv/g2` via package manager such NPM or Yarn.
+
+```bash
+$ npm install @antv/g2-extension-plot @antv/g2
+```
+
+Use mark individually:
+
+```js
+import { Runtime, extend, corelib } from "@antv/g2";
+import { corelib as plotlib } from "../../src";
+
+const Chart = extend(Runtime, { ...corelib(), ...plotlib() });
+
+const chart = new Chart({ container: "container" });
+
+  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();
+```
+
+## License
+
+MIT@[AntV](https://github.com/antvis).
diff --git a/plot/__tests__/index.html b/plot/__tests__/index.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<head>
+  <meta charset="utf-8" />
+</head>
+<script type="module">
+  import * as plots from "./plots/index.ts";
+
+  const select = createSelect(() => {
+    const { value } = select;
+    history.pushState({ value }, "", `?name=${value}`);
+    render();
+  });
+  const options = Object.keys(plots).map(createOption);
+  document.body.append(select);
+  select.append(...options);
+
+  const initialValue = new URL(location).searchParams.get("name");
+  if (plots[initialValue]) select.value = initialValue;
+
+  let preClear = null;
+  let preNode = null;
+  render();
+
+  function createSelect(onchange) {
+    const select = document.createElement("select");
+    select.style.margin = "1em";
+    select.onchange = onchange;
+    select.style.display = "block";
+    return select;
+  }
+
+  function createOption(key) {
+    const option = document.createElement("option");
+    option.value = key;
+    option.textContent = key;
+    return option;
+  }
+
+  async function render() {
+    const fn = plots[select.value];
+    const { finished, destroy } = await fn({ container: "container" });
+    preClear = destroy;
+  }
+</script>
+<div id="container"></div>
diff --git a/plot/__tests__/plots/index.ts b/plot/__tests__/plots/index.ts
@@ -0,0 +1,3 @@
+export { Sunburst } from "./sunburst";
+export { SunburstColor } from "./sunburs-color";
+export { SunburstInteraction } from "./sunburs-interaction";
diff --git a/plot/__tests__/plots/sunburs-color.ts b/plot/__tests__/plots/sunburs-color.ts
@@ -0,0 +1,24 @@
+import { Runtime, extend, corelib } from "@antv/g2";
+import { corelib as plotlib } from "../../src";
+
+export function SunburstColor(context) {
+  const { container } = context;
+
+  const Chart = extend(Runtime, { ...corelib(), ...plotlib() });
+  const chart = new Chart({
+    container,
+  });
+
+  chart
+  .sunburst()
+  .data({
+    type: 'fetch',
+    value: 'https://gw.alipayobjects.com/os/antvdemo/assets/data/sunburst.json',
+  })
+  .encode('value', 'sum')
+  .encode('color', 'label');
+
+  chart.render();
+
+  return { destroy: () => chart.destroy() };
+}
diff --git a/plot/__tests__/plots/sunburs-interaction.ts b/plot/__tests__/plots/sunburs-interaction.ts
@@ -0,0 +1,55 @@
+import { Runtime, extend, corelib } from "@antv/g2";
+import { corelib as plotlib } from "../../src";
+
+export function SunburstInteraction(context) {
+  const { container } = context;
+
+  const Chart = extend(Runtime, { ...corelib(), ...plotlib() });
+  const chart = new Chart({
+    container,
+  });
+
+  const interaction = {
+    drillDown: {
+      breadCrumb: {
+        rootText: '起始',
+        style: {
+          fontSize: '18px',
+          fill: '#333',
+        },
+        active: {
+          fill: 'red',
+        },
+      },
+      // FixedColor default: true, true -> drillDown update scale, false -> scale keep.
+      fixedColor: false,
+    },
+  };
+
+  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',
+        },
+      ],
+    })
+    // @ts-ignore
+    .interaction(interaction)
+    .state({
+      active: { zIndex: 2, stroke: 'red' },
+      inactive: { zIndex: 1, stroke: '#fff' },
+    });
+
+  chart.render();
+
+  return { destroy: () => chart.destroy() };
+}
diff --git a/plot/__tests__/plots/sunburst.ts b/plot/__tests__/plots/sunburst.ts
@@ -0,0 +1,24 @@
+import { Runtime, extend, corelib } from "@antv/g2";
+import { corelib as plotlib } from "../../src";
+
+export function Sunburst(context) {
+  const { container } = context;
+
+  const Chart = extend(Runtime, { ...corelib(), ...plotlib() });
+  const chart = new Chart({
+    container,
+  });
+
+  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();
+
+  return { destroy: () => chart.destroy() };
+}
diff --git a/plot/jest.config.js b/plot/jest.config.js
@@ -0,0 +1,29 @@
+// Installing third-party modules by tnpm or cnpm will name modules with underscore as prefix.
+// In this case _{module} is also necessary.
+const esm = ["internmap", "d3-*", "lodash-es"].map((d) => `_${d}|${d}`).join("|");
+
+module.exports = {
+  testTimeout: 100000,
+  transform: {
+    "^.+\\.[tj]s$": [
+      "ts-jest",
+      {
+        isolatedModules: true,
+        tsconfig: {
+          allowJs: true,
+          target: "esnext",
+          esModuleInterop: true,
+        },
+      },
+    ],
+  },
+  collectCoverageFrom: ["src/**/*.ts", "!**/d3-sankey/**", "!**/d3-cloud/**"],
+  moduleFileExtensions: ["ts", "tsx", "js", "json"],
+  collectCoverage: false,
+  testRegex: "(/__tests__/.*\\.(test|spec))\\.(ts|tsx|js)$",
+  // Transform esm to cjs.
+  transformIgnorePatterns: [`<rootDir>/node_modules/(?!(${esm}))`],
+  globalSetup: "./scripts/jest/setup.js",
+  globalTeardown: "./scripts/jest/teardown.js",
+  testEnvironment: "./scripts/jest/environment.js",
+};
diff --git a/plot/package.json b/plot/package.json
@@ -0,0 +1,66 @@
+{
+  "name": "@antv/g2-extension-plot",
+  "version": "0.1.0",
+  "main": "lib/index.js",
+  "module": "esm/index.js",
+  "unpkg": "dist/index.umd.min.js",
+  "types": "lib/index.d.ts",
+  "files": [
+    "lib",
+    "esm",
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": [
+    "./esm/index.js"
+  ],
+  "scripts": {
+    "start": "npm run dev",
+    "dev": "vite",
+    "fix": "prettier --write src __tests__",
+    "test": "jest",
+    "build:cjs": "rimraf ./lib && tsc --module commonjs --outDir lib",
+    "build:esm": "rimraf ./esm && tsc --module ESNext --outDir esm",
+    "build": "run-p build:*",
+    "ci": "npm run test && npm run build"
+  },
+  "dependencies": {
+    "@antv/g": "^5.18.19",
+    "@antv/g2": "^5.1.8",
+    "@antv/g-canvas": "^1.11.22",
+    "@antv/g-plugin-dragndrop": "^1.8.17",
+    "d3-hierarchy": "^3.1.2",
+    "d3-array": "^3.2.4",
+    "@antv/util": "^3.3.5",
+    "@antv/g-plugin-3d": "^1.9.5",
+    "ndarray": "^1.0.19",
+    "ndarray-ops": "^1.2.2",
+    "ndarray-pack": "^1.2.1",
+    "ndarray-gradient": "^1.0.1",
+    "@antv/g-plugin-control": "^1.9.17",
+    "@antv/g-plugin-rough-canvas-renderer": "^1.9.22",
+    "@antv/g-plugin-rough-svg-renderer": "^1.9.22",
+    "@antv/g-svg": "^1.10.21",
+    "@antv/g-webgl": "^1.9.29",
+    "colormap": "^2.3.2"
+  },
+  "devDependencies": {
+    "@antv/g-pattern": "^1.2.19",
+    "@types/d3-array": "3.0.5",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^3.0.3",
+    "rimraf": "^5.0.5",
+    "typescript": "^5.2.2",
+    "vite": "^4.3.9",
+    "vitest": "^0.34.2",
+    "@antv/g-webgl": "^1.9.8",
+    "@antv/g-plugin-control": "^1.9.5",
+    "@types/node": "^16.11.7",
+    "@types/jest": "^29.0.0",
+    "jest": "^29.0.0",
+    "jest-environment-node": "^29.7.0",
+    "pixelmatch": "5.3.0",
+    "ts-jest": "^29.1.0"
+  },
+  "repository": "https://github.com/antvis/g2-extensions.git"
+}
diff --git a/plot/src/index.ts b/plot/src/index.ts
@@ -0,0 +1,12 @@
+import { runtime } from '@antv/g';
+import { Sunburst } from "./mark/sunburst";
+import { DrillDown } from "./interaction/drillDown";
+
+runtime.enableCSSParsing = false;
+
+export function corelib() {
+  return {
+    "interaction.drillDown": DrillDown,
+    "mark.sunburst": Sunburst,
+  } as const;
+}