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

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

@@ -0,0 +1,191 @@
+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: title ? [46, 20, 20, 20] : 20,
+      theme: (0, import_theme.getTheme)(theme),
+      plugins: title ? [
+        {
+          key: "title",
+          type: "title",
+          title,
+          titleFill: isDark ? "#e0e6ed" : "#000",
+          titleFontFamily: "sans-serif"
+        }
+      ] : [],
+      data: graphData,
+      node: {
+        type: "rect",
+        style: (d) => {
+          var _a;
+          const depth = d.depth ?? 0;
+          const nodeStyle = {
+            radius: theme === "academy" ? 0 : 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;

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

@@ -0,0 +1,287 @@
+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/flow-diagram/index.ts
+var flow_diagram_exports = {};
+__export(flow_diagram_exports, {
+  FlowDiagram: () => FlowDiagram
+});
+module.exports = __toCommonJS(flow_diagram_exports);
+var import_g6 = require("@antv/g6");
+var import_theme = require("../../util/theme");
+var ACTIVE_COLOR = "#f6c523";
+var DEFAULT_NODE_WIDTH = 200;
+var DEFAULT_NODE_HEIGHT = 80;
+var HoverElement = class extends import_g6.HoverActivate {
+  getActiveIds(event) {
+    const { model, graph } = this.context;
+    const { targetType, target } = event;
+    const targetId = target.id;
+    const ids = [targetId];
+    if (targetType === "edge") {
+      const edge = model.getEdgeDatum(targetId);
+      ids.push(edge.source, edge.target);
+    } else if (targetType === "node") {
+      ids.push(...model.getRelatedEdgesData(targetId).map(import_g6.idOf));
+    }
+    graph.frontElement(ids);
+    return ids;
+  }
+};
+var behaviorRegistered = false;
+function ensureBehaviorRegistered() {
+  if (!behaviorRegistered) {
+    (0, import_g6.register)(import_g6.ExtensionCategory.BEHAVIOR, "hover-element", HoverElement);
+    behaviorRegistered = true;
+  }
+}
+function escapeHtml(str = "") {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function createNodeHTML(d, color, selectedBorderColor = "#000", theme = "default") {
+  var _a, _b, _c;
+  const text = escapeHtml(((_a = d.data) == null ? void 0 : _a.text) || "");
+  const isHovered = (_b = d.states) == null ? void 0 : _b.includes("active");
+  const isSelected = (_c = d.states) == null ? void 0 : _c.includes("selected");
+  const nodeColor = isHovered ? ACTIVE_COLOR : color;
+  const borderRadius = theme === "academy" ? "0px" : "8px";
+  return `
+    <div
+      data-node-key="${escapeHtml(String(d.id))}"
+      style="
+        box-sizing: border-box;
+        width: ${DEFAULT_NODE_WIDTH}px;
+        min-height: ${DEFAULT_NODE_HEIGHT}px;
+        padding: 16px;
+        background: ${nodeColor};
+        border: 3px solid ${isSelected ? selectedBorderColor : nodeColor};
+        border-radius: ${borderRadius};
+        color: #fff;
+        font-size: 16px;
+        font-weight: 600;
+        line-height: 22px;
+        text-align: center;
+        white-space: normal;
+        word-break: break-word;
+        overflow-wrap: anywhere;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+      "
+    >
+      <div style="width: 100%;">
+        ${text}
+      </div>
+    </div>
+  `;
+}
+function measureAndUpdateNodeSizes(graph, container, nodeColorMap, selectedBorderColor, theme = "default") {
+  const nodes = graph.getNodeData();
+  const updatedNodes = nodes.map((node) => {
+    const dom = container.querySelector(`[data-node-key="${CSS.escape(String(node.id))}"]`);
+    let height = DEFAULT_NODE_HEIGHT;
+    if (dom) {
+      height = Math.max(DEFAULT_NODE_HEIGHT, Math.ceil(dom.getBoundingClientRect().height));
+    }
+    return {
+      id: node.id,
+      style: {
+        size: [DEFAULT_NODE_WIDTH, height],
+        dx: -DEFAULT_NODE_WIDTH / 2,
+        dy: -height / 2,
+        innerHTML: createNodeHTML(
+          node,
+          nodeColorMap.get(String(node.id)) || "#1783FF",
+          selectedBorderColor,
+          theme
+        )
+      }
+    };
+  });
+  graph.updateNodeData(updatedNodes);
+  graph.render();
+}
+var FlowDiagram = (options) => {
+  const { container, width, height, theme: chartTheme = "default" } = options;
+  let graph = null;
+  const render = (config) => {
+    const { data, title, theme = chartTheme, style = {} } = config;
+    if (graph) {
+      graph.destroy();
+      graph = null;
+    }
+    ensureBehaviorRegistered();
+    const colors = (0, import_theme.normalizePalette)(style.palette, theme);
+    const backgroundColor = style.backgroundColor || (0, import_theme.getBackgroundColor)(theme);
+    let containerEl;
+    if (typeof container === "string") {
+      const el = document.getElementById(container.replace(/^#/, ""));
+      if (!el)
+        throw new Error(`Container element "${container}" not found`);
+      containerEl = el;
+    } else {
+      containerEl = container;
+    }
+    containerEl.style.backgroundColor = backgroundColor;
+    const nodeRankMap = /* @__PURE__ */ new Map();
+    const incomingTargets = new Set(data.edges.map((e) => e.target));
+    const childrenMap = /* @__PURE__ */ new Map();
+    for (const edge of data.edges) {
+      const list = childrenMap.get(edge.source) || [];
+      list.push(edge.target);
+      childrenMap.set(edge.source, list);
+    }
+    const roots = data.nodes.filter((n) => !incomingTargets.has(n.name)).map((n) => n.name);
+    const queue = roots.map((name) => ({ name, rank: 0 }));
+    let head = 0;
+    while (head < queue.length) {
+      const { name, rank } = queue[head++];
+      if (nodeRankMap.has(name))
+        continue;
+      nodeRankMap.set(name, rank);
+      for (const child of childrenMap.get(name) || []) {
+        if (!nodeRankMap.has(child)) {
+          queue.push({ name: child, rank: rank + 1 });
+        }
+      }
+    }
+    const nodeColorMap = /* @__PURE__ */ new Map();
+    const g6Nodes = data.nodes.map((node) => {
+      const rank = nodeRankMap.get(node.name) || 0;
+      const color = colors[rank % colors.length];
+      nodeColorMap.set(node.name, color);
+      return {
+        id: node.name,
+        data: { text: node.name }
+      };
+    });
+    const nodeNames = new Set(data.nodes.map((n) => n.name));
+    const g6Edges = data.edges.filter((edge) => nodeNames.has(edge.source) && nodeNames.has(edge.target)).map((edge, index) => ({
+      id: `edge-${index}`,
+      source: edge.source,
+      target: edge.target,
+      data: { text: edge.name || "" }
+    }));
+    const isDark = theme === "dark";
+    const edgeStroke = isDark ? "#5a6b7f" : "#8b9baf";
+    const labelFill = isDark ? "#aab4c0" : "#8b9baf";
+    const labelBgFill = isDark ? "#1a1a2e" : "#f8f8f8";
+    const labelBgStroke = isDark ? "#5a6b7f" : "#8b9baf";
+    const selectedBorder = isDark ? "#fff" : "#000";
+    graph = new import_g6.Graph({
+      animation: false,
+      container: containerEl,
+      width,
+      height,
+      theme: (0, import_theme.getTheme)(theme),
+      data: { nodes: g6Nodes, edges: g6Edges },
+      autoFit: "view",
+      autoResize: true,
+      padding: title ? [46, 20, 20, 20] : 20,
+      plugins: title ? [
+        {
+          key: "title",
+          type: "title",
+          title,
+          titleFill: isDark ? "#e0e6ed" : "#000",
+          titleFontFamily: "sans-serif"
+        }
+      ] : [],
+      node: {
+        type: "html",
+        style: (d) => {
+          var _a;
+          const color = nodeColorMap.get(String(d.id)) || colors[0];
+          const size = ((_a = d.style) == null ? void 0 : _a.size) || [
+            DEFAULT_NODE_WIDTH,
+            DEFAULT_NODE_HEIGHT
+          ];
+          const height2 = size[1];
+          return {
+            size,
+            dx: -DEFAULT_NODE_WIDTH / 2,
+            dy: -height2 / 2,
+            innerHTML: createNodeHTML(d, color, selectedBorder, theme),
+            ports: [{ placement: "top" }, { placement: "bottom" }]
+          };
+        },
+        state: {
+          active: { halo: false },
+          selected: { halo: false }
+        }
+      },
+      edge: {
+        type: "polyline",
+        style: {
+          lineWidth: 3,
+          radius: 20,
+          stroke: edgeStroke,
+          endArrow: true,
+          labelText: (d) => {
+            var _a;
+            return ((_a = d.data) == null ? void 0 : _a.text) || "";
+          },
+          labelFill,
+          labelFontWeight: 600,
+          labelBackground: true,
+          labelBackgroundFill: labelBgFill,
+          labelBackgroundOpacity: 1,
+          labelBackgroundLineWidth: 3,
+          labelBackgroundStroke: labelBgStroke,
+          labelPadding: [1, 10],
+          labelBackgroundRadius: 4,
+          router: { type: "orth", padding: 40 }
+        },
+        state: {
+          active: {
+            stroke: ACTIVE_COLOR,
+            labelBackgroundStroke: ACTIVE_COLOR,
+            halo: false
+          }
+        }
+      },
+      layout: {
+        type: "antv-dagre"
+      },
+      behaviors: ["drag-canvas", "hover-element", "click-select"]
+    });
+    graph.render();
+    graph.once("afterrender", () => {
+      if (graph) {
+        measureAndUpdateNodeSizes(graph, containerEl, nodeColorMap, selectedBorder, theme);
+      }
+    });
+  };
+  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()
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FlowDiagram
+});

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

@@ -33,7 +33,7 @@ var Funnel = (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 conversionRate = (start, end) => `${(end / start * 100).toFixed(2)} %`;
     chart = new import_g2.Chart({
@@ -45,6 +45,7 @@ var Funnel = (options) => {
       paddingRight: 68
     });
     const chartOptions = {
+      animate: false,
       type: "view",
       data,
       title: title ?? "",

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

@@ -40,7 +40,7 @@ var Histogram = (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);
     chart = new import_g2.Chart({
       container,
@@ -49,6 +49,7 @@ var Histogram = (options) => {
       autoFit: true
     });
     const chartOptions = {
+      animate: false,
       type: "interval",
       data,
       title: title ?? "",
@@ -80,12 +81,7 @@ var Histogram = (options) => {
       },
       legend: false,
       tooltip: {
-        items: [
-          (d) => ({
-            name: "频数",
-            value: d.count
-          })
-        ]
+        items: [{ channel: "y", name: "频数" }]
       },
       viewStyle: {
         viewFill: backgroundColor

package/dist/cjs/vis/indented-tree/index.d.ts

@@ -0,0 +1,40 @@
+import type { VisualizationOptions } from '../../types';
+/**
+ * Indented tree node data — only name + optional children, no description.
+ * Aligns with the official G6 indented tree example data structure.
+ */
+export interface IndentedTreeData {
+    name: string;
+    children?: IndentedTreeData[];
+}
+/**
+ * IndentedTreeConfig defines the configuration for rendering the indented tree.
+ */
+export interface IndentedTreeConfig {
+    type?: 'indented-tree';
+    data: IndentedTreeData;
+    theme?: 'default' | 'academy' | 'dark';
+    title?: string;
+    /** Layout direction: 'LR' = root left (default), 'RL' = root right, 'H' = root center */
+    direction?: 'LR' | 'RL' | 'H';
+    style?: {
+        backgroundColor?: string;
+        palette?: string[];
+    };
+}
+/**
+ * IndentedTreeInstance represents a chart instance with render and destroy methods.
+ */
+export interface IndentedTreeInstance {
+    render: (config: IndentedTreeConfig) => void;
+    destroy: () => void;
+    zoomTo: (zoom: number) => void;
+    getZoom: () => number | undefined;
+}
+/**
+ * IndentedTree — G6 5 indented layout for static DSL trees (no collapse/add UI).
+ * Uses built-in `rect` nodes and `line` edges. Tree edges must have explicit ids (see render) to avoid
+ * colliding with path-based node ids under G6's default `${source}-${target}` edge id rule.
+ * Based on: https://g6.antv.antgroup.com/examples/scene-case/tree-graph#indented-tree
+ */
+export declare const IndentedTree: (options: VisualizationOptions) => IndentedTreeInstance;