@antv/gpt-vis 1.0.0-beta.1 → 1.0.0-beta.2

package/dist/cjs/util/container.js

@@ -0,0 +1,43 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/util/container.ts
+var container_exports = {};
+__export(container_exports, {
+  resolveContainer: () => resolveContainer
+});
+module.exports = __toCommonJS(container_exports);
+function resolveContainer(container) {
+  if (typeof container === "string") {
+    if (typeof document === "undefined") {
+      throw new Error(
+        `Container element "${container}" cannot be resolved in a non-browser environment.`
+      );
+    }
+    const el = document.querySelector(container);
+    if (!el) {
+      throw new Error(`Container element "${container}" not found`);
+    }
+    return el;
+  }
+  return container;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  resolveContainer
+});

package/dist/cjs/util/theme.d.ts

@@ -19,3 +19,8 @@ export declare const getThemeColors: (theme: string) => string[];
  * Get background color based on theme.
  */
 export declare const getBackgroundColor: (theme: string) => string;
+/**
+ * Normalize palette to always return an array.
+ * Handles the case where a single color is parsed as a string instead of an array.
+ */
+export declare const normalizePalette: (palette: string | string[] | undefined, theme: string) => string[];

package/dist/cjs/util/theme.js

@@ -25,7 +25,8 @@ __export(theme_exports, {
   getBackgroundColor: () => getBackgroundColor,
   getTheme: () => getTheme,
   getThemeColors: () => getThemeColors,
-  getThemeObject: () => getThemeObject
+  getThemeObject: () => getThemeObject,
+  normalizePalette: () => normalizePalette
 });
 module.exports = __toCommonJS(theme_exports);
 var DEFAULT_COLOR_PALETTE = [
@@ -170,6 +171,11 @@ var getBackgroundColor = (theme) => {
       return "#FFF";
   }
 };
+var normalizePalette = (palette, theme) => {
+  if (!palette || Array.isArray(palette) && palette.length === 0)
+    return getThemeColors(theme);
+  return Array.isArray(palette) ? palette : [palette];
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ACADEMY_COLOR_PALETTE,
@@ -178,5 +184,6 @@ var getBackgroundColor = (theme) => {
   getBackgroundColor,
   getTheme,
   getThemeColors,
-  getThemeObject
+  getThemeObject,
+  normalizePalette
 });

package/dist/cjs/vis/area/index.js

@@ -45,7 +45,7 @@ var Area = (options) => {
     }
     const { lineWidth = 2 } = style;
     const hasGroupField = data.length > 0 && ((_a = data[0]) == null ? void 0 : _a.group) !== void 0;
-    const colors = style.palette || (0, import_theme.getThemeColors)(theme);
+    const colors = (0, import_theme.normalizePalette)(style.palette, theme);
     const backgroundColor = style.backgroundColor || (0, import_theme.getBackgroundColor)(theme);
     const fillColor = getLinearGradientColor(colors[0] || DEFAULT_COLOR);
     chart = new import_g2.Chart({
@@ -106,6 +106,7 @@ var Area = (options) => {
       ];
     }
     const chartOptions = {
+      animate: false,
       type: "view",
       data,
       title: title ?? "",

package/dist/cjs/vis/bar/index.js

@@ -28,7 +28,7 @@ var Bar = (options) => {
   const { container, width, height, theme: chartTheme = "default" } = options;
   let chart = null;
   const render = (config) => {
-    var _a, _b;
+    var _a;
     const {
       data = [],
       theme = chartTheme,
@@ -43,7 +43,7 @@ var Bar = (options) => {
       chart.destroy();
     }
     const hasGroupField = data.length > 0 && ((_a = data[0]) == null ? void 0 : _a.group) !== void 0;
-    const colors = style.palette || (0, import_theme.getThemeColors)(theme);
+    const colors = (0, import_theme.normalizePalette)(style.palette, theme);
     const backgroundColor = style.backgroundColor || (0, import_theme.getBackgroundColor)(theme);
     chart = new import_g2.Chart({
       container,
@@ -54,7 +54,7 @@ var Bar = (options) => {
     let encode = {};
     let transform = [];
     let radiusStyle = {};
-    if (theme === "default") {
+    if (theme !== "academy") {
       radiusStyle = { radiusTopLeft: 4, radiusTopRight: 4 };
     }
     if (hasGroupField && group) {
@@ -70,9 +70,10 @@ var Bar = (options) => {
     }
     const scaleConfig = {
       y: { nice: true },
-      ...((_b = style.palette) == null ? void 0 : _b.length) ? { color: { range: colors } } : {}
+      ...style.palette ? { color: { range: colors } } : {}
     };
     const chartOptions = {
+      animate: false,
       type: "interval",
       data,
       title: title ?? "",

package/dist/cjs/vis/boxplot/index.js

@@ -33,7 +33,7 @@ var Boxplot = (options) => {
     if (chart) {
       chart.destroy();
     }
-    const colors = style.palette || (0, import_theme.getThemeColors)(theme);
+    const colors = (0, import_theme.normalizePalette)(style.palette, theme);
     const backgroundColor = style.backgroundColor || (0, import_theme.getBackgroundColor)(theme);
     const startAtZero = style.startAtZero || false;
     const hasGroupField = ((_a = (data || [])[0]) == null ? void 0 : _a.group) !== void 0;
@@ -59,6 +59,7 @@ var Boxplot = (options) => {
       autoFit: true
     });
     const chartOptions = {
+      animate: false,
       type: "boxplot",
       data,
       title: title ?? "",
@@ -77,7 +78,11 @@ var Boxplot = (options) => {
         y: { nice: true, zero: startAtZero },
         color: { range: colors }
       },
-      style: { stroke: "black" },
+      // When hasGroupField is true, set point to false to prevent G2's Boxplot composite mark
+      // from splitting into box + point child marks. The point child mark does not inherit
+      // the `scale` config, causing legendFilter interaction to throw
+      // "Cannot read properties of undefined (reading 'color')" when clicking legend items.
+      style: { stroke: "black", ...hasGroupField ? { point: false } : {} },
       legend: {
         color: hasGroupField ? { position: "top" } : false
       },

package/dist/cjs/vis/column/index.js

@@ -28,7 +28,7 @@ var Column = (options) => {
   const { container, width, height, theme: chartTheme = "default" } = options;
   let chart = null;
   const render = (config) => {
-    var _a, _b;
+    var _a;
     const {
       data = [],
       theme = chartTheme,
@@ -43,7 +43,7 @@ var Column = (options) => {
       chart.destroy();
     }
     const hasGroupField = data.length > 0 && ((_a = data[0]) == null ? void 0 : _a.group) !== void 0;
-    const colors = style.palette || (0, import_theme.getThemeColors)(theme);
+    const colors = (0, import_theme.normalizePalette)(style.palette, theme);
     const backgroundColor = style.backgroundColor || (0, import_theme.getBackgroundColor)(theme);
     chart = new import_g2.Chart({
       container,
@@ -54,7 +54,7 @@ var Column = (options) => {
     let encode = {};
     let transform = [];
     let radiusStyle = {};
-    if (theme === "default") {
+    if (theme !== "academy") {
       radiusStyle = { radiusTopLeft: 4, radiusTopRight: 4 };
     }
     if (hasGroupField && group) {
@@ -70,9 +70,10 @@ var Column = (options) => {
     }
     const scaleConfig = {
       y: { nice: true },
-      ...((_b = style.palette) == null ? void 0 : _b.length) ? { color: { range: colors } } : {}
+      ...style.palette ? { color: { range: colors } } : {}
     };
     const chartOptions = {
+      animate: false,
       type: "interval",
       data,
       title: title ?? "",

package/dist/cjs/vis/dual-axes/index.js

@@ -43,7 +43,7 @@ var DualAxes = (options) => {
       chart.destroy();
     }
     const { startAtZero = false } = style;
-    const colors = style.palette || (0, import_theme.getThemeColors)(theme);
+    const colors = (0, import_theme.normalizePalette)(style.palette, theme);
     const backgroundColor = style.backgroundColor || (0, import_theme.getBackgroundColor)(theme);
     const data = transformData(series, categories);
     chart = new import_g2.Chart({
@@ -103,6 +103,7 @@ var DualAxes = (options) => {
       }
     });
     const chartOptions = {
+      animate: false,
       type: "view",
       data,
       title: title ?? "",

package/dist/cjs/vis/fishbone-diagram/index.d.ts

@@ -0,0 +1,35 @@
+import type { VisualizationOptions } from '../../types';
+export interface FishboneNode {
+    name: string;
+    children?: FishboneNode[];
+}
+/**
+ * FishboneDiagramConfig defines the configuration for rendering the fishbone diagram.
+ */
+export interface FishboneDiagramConfig {
+    type?: 'fishbone-diagram';
+    data: FishboneNode;
+    theme?: 'default' | 'academy' | 'dark';
+    title?: string;
+    style?: {
+        /** Custom color palette for branch nodes, overrides theme default */
+        palette?: string[];
+        /** Canvas background color, overrides theme default */
+        backgroundColor?: string;
+        /** Node rendering style: 'rough' for hand-drawn look, 'default' for smooth */
+        texture?: 'rough' | 'default';
+    };
+}
+/**
+ * FishboneDiagramInstance represents a fishbone diagram instance.
+ */
+export interface FishboneDiagramInstance {
+    render: (config: FishboneDiagramConfig) => void;
+    destroy: () => void;
+    zoomTo: (zoom: number) => void;
+    getZoom: () => number | undefined;
+}
+/**
+ * FishboneDiagram chart component using G6 with fishbone layout.
+ */
+export declare const FishboneDiagram: (options: VisualizationOptions) => FishboneDiagramInstance;

package/dist/cjs/vis/fishbone-diagram/index.js

@@ -0,0 +1,183 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/vis/fishbone-diagram/index.ts
+var fishbone_diagram_exports = {};
+__export(fishbone_diagram_exports, {
+  FishboneDiagram: () => FishboneDiagram
+});
+module.exports = __toCommonJS(fishbone_diagram_exports);
+var import_g6 = require("@antv/g6");
+var import_theme = require("../../util/theme");
+var FONT_FAMILY = "system-ui, sans-serif";
+function getNodeSize(id, depth) {
+  return depth === 0 ? [measureText(id, 24, "bold") + 80, 70] : depth === 1 ? [measureText(id, 18) + 50, 42] : [2, 30];
+}
+var measureText = function() {
+  let canvas = null;
+  return (text, fontSize = 12, fontWeight = "normal") => {
+    if (typeof document === "undefined")
+      return text.length * fontSize * 0.6;
+    if (!canvas)
+      canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    if (!ctx)
+      return 0;
+    ctx.font = `${fontWeight} ${fontSize}px ${FONT_FAMILY}`;
+    return ctx.measureText(text).width;
+  };
+}();
+function toG6TreeData(node) {
+  return {
+    id: node.name,
+    children: (node.children || []).map(toG6TreeData)
+  };
+}
+function convertData(data) {
+  return (0, import_g6.treeToGraphData)(toG6TreeData(data), {
+    getNodeData: (datum, depth) => {
+      datum.depth = depth;
+      if (!datum.children)
+        return datum;
+      const { children, ...rest } = datum;
+      return { ...rest, children: children.map((c) => c.id) };
+    }
+  });
+}
+function assignBranchColors(graphData, palette) {
+  const nodes = graphData.nodes || [];
+  let colorIndex = 0;
+  nodes.filter((n) => n.depth === 1).forEach((n) => {
+    n.style = n.style || {};
+    n.style.branchColor = palette[colorIndex++ % palette.length];
+  });
+}
+var FishboneDiagram = (options) => {
+  const { container, width, height, theme: chartTheme = "default" } = options;
+  let graph = null;
+  const render = (config) => {
+    const { data, theme = chartTheme, title, style = {} } = config;
+    if (!(data == null ? void 0 : data.name)) {
+      throw new Error("FishboneDiagram: data with a name field is required");
+    }
+    if (graph) {
+      graph.destroy();
+      graph = null;
+    }
+    const containerEl = typeof container === "string" ? document.querySelector(container) : container;
+    if (!containerEl)
+      throw new Error("FishboneDiagram: container element not found");
+    containerEl.innerHTML = "";
+    const isDark = theme === "dark";
+    const backgroundColor = style.backgroundColor || (0, import_theme.getBackgroundColor)(theme);
+    const palette = (0, import_theme.normalizePalette)(style.palette, theme);
+    const rootFill = isDark ? "#2a2a2a" : "#EFF0F0";
+    const rootLabelFill = isDark ? "#e0e0e0" : "#262626";
+    const leafLabelFill = isDark ? "#c0c0c0" : "#262626";
+    const edgeStroke = isDark ? "#555" : "#99ADD1";
+    containerEl.style.backgroundColor = backgroundColor;
+    const graphData = convertData(data);
+    assignBranchColors(graphData, palette);
+    graph = new import_g6.Graph({
+      animation: false,
+      container: containerEl,
+      width,
+      height,
+      autoFit: "view",
+      autoResize: true,
+      padding: 20,
+      theme: chartTheme,
+      plugins: title ? [{ key: "title", type: "title", title, titleFill: isDark ? "#e0e6ed" : "#1a1a2e" }] : [],
+      data: graphData,
+      node: {
+        type: "rect",
+        style: (d) => {
+          var _a;
+          const depth = d.depth ?? 0;
+          const nodeStyle = {
+            radius: 8,
+            size: getNodeSize(String(d.id), depth),
+            labelText: String(d.id),
+            labelPlacement: "left",
+            labelFontFamily: FONT_FAMILY
+          };
+          if (depth === 0) {
+            Object.assign(nodeStyle, {
+              fill: rootFill,
+              labelFill: rootLabelFill,
+              labelFontWeight: "bold",
+              labelFontSize: 24,
+              labelOffsetY: 4,
+              labelPlacement: "center"
+            });
+          } else if (depth === 1) {
+            const color = ((_a = d.style) == null ? void 0 : _a.branchColor) || palette[0];
+            Object.assign(nodeStyle, {
+              fill: color,
+              labelFill: "#fff",
+              labelFontSize: 18,
+              labelPlacement: "center"
+            });
+          } else {
+            Object.assign(nodeStyle, {
+              fill: "transparent",
+              labelFill: leafLabelFill,
+              labelFontSize: 16
+            });
+          }
+          if (style.texture === "rough") {
+            nodeStyle.lineWidth = 0.5;
+          }
+          return nodeStyle;
+        }
+      },
+      edge: {
+        type: "polyline",
+        style: {
+          lineWidth: 3,
+          stroke: edgeStroke,
+          ...style.texture === "rough" ? { labelFontFamily: "Comic Sans MS" } : {}
+        }
+      },
+      layout: {
+        type: "fishbone",
+        direction: "RL",
+        hGap: 40,
+        vGap: 60
+      },
+      behaviors: ["drag-canvas"]
+    });
+    graph.render();
+  };
+  const destroy = () => {
+    if (graph) {
+      graph.destroy();
+      graph = null;
+    }
+  };
+  return {
+    render,
+    destroy,
+    zoomTo: (zoom) => graph == null ? void 0 : graph.zoomTo(zoom),
+    getZoom: () => (graph == null ? void 0 : graph.getZoom()) ?? 1
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FishboneDiagram
+});

package/dist/cjs/vis/flow-diagram/index.d.ts

@@ -0,0 +1,27 @@
+import type { GraphData, VisualizationOptions } from '../../types';
+/**
+ * FlowDiagramConfig defines the configuration for rendering the flow diagram.
+ */
+export interface FlowDiagramConfig {
+    type?: 'flow-diagram';
+    data: GraphData;
+    title?: string;
+    theme?: 'default' | 'academy' | 'dark';
+    style?: {
+        backgroundColor?: string;
+        palette?: string[];
+    };
+}
+/**
+ * FlowDiagramInstance represents a flow diagram instance with render and destroy methods.
+ */
+export interface FlowDiagramInstance {
+    render: (config: FlowDiagramConfig) => void;
+    destroy: () => void;
+    zoomTo: (zoom: number) => void;
+    getZoom: () => number | undefined;
+}
+/**
+ * FlowDiagram chart component using G6 5.0 with dagre layout.
+ */
+export declare const FlowDiagram: (options: VisualizationOptions) => FlowDiagramInstance;