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

package/dist/cjs/vis/network-graph/index.d.ts

@@ -0,0 +1,59 @@
+import type { GraphData, VisualizationOptions } from '../../types';
+export type NetworkGraphNode = GraphData['nodes'][number];
+export type NetworkGraphEdge = GraphData['edges'][number];
+export type NetworkGraphData = GraphData;
+/**
+ * NetworkGraphConfig defines the configuration for rendering the network graph.
+ */
+export interface NetworkGraphConfig {
+    type?: 'network-graph';
+    data: NetworkGraphData;
+    layout?: 'force' | 'circular' | 'grid' | 'radial' | 'concentric' | 'dagre';
+    theme?: 'default' | 'academy' | 'dark';
+    title?: string;
+    style?: {
+        backgroundColor?: string;
+        palette?: string[];
+    };
+}
+/**
+ * NetworkGraphInstance represents a network graph instance with render and destroy methods.
+ */
+export interface NetworkGraphInstance {
+    render: (config: NetworkGraphConfig) => void;
+    destroy: () => void;
+    zoomTo: (zoom: number) => void;
+    getZoom: () => number | undefined;
+}
+/**
+ * NetworkGraph component using G6 5.0.
+ *
+ * @example
+ * ```ts
+ * const graph = NetworkGraph({
+ *   container: '#container',
+ *   width: 600,
+ *   height: 400,
+ * });
+ *
+ * graph.render({
+ *   type: 'network-graph',
+ *   data: {
+ *     nodes: [
+ *       { name: '哈利·波特' },
+ *       { name: '赫敏·格兰杰' },
+ *       { name: '伏地魔' },
+ *     ],
+ *     edges: [
+ *       { source: '哈利·波特', target: '赫敏·格兰杰', name: '朋友' },
+ *       { source: '哈利·波特', target: '伏地魔', name: '敌人' },
+ *     ],
+ *   },
+ *   layout: 'force',
+ *   theme: 'academy',
+ * });
+ *
+ * graph.destroy();
+ * ```
+ */
+export declare const NetworkGraph: (options: VisualizationOptions) => NetworkGraphInstance;

package/dist/cjs/vis/network-graph/index.js

@@ -0,0 +1,166 @@
+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/network-graph/index.ts
+var network_graph_exports = {};
+__export(network_graph_exports, {
+  NetworkGraph: () => NetworkGraph
+});
+module.exports = __toCommonJS(network_graph_exports);
+var import_g6 = require("@antv/g6");
+var import_theme = require("../../util/theme");
+var NetworkGraph = (options) => {
+  const { container, width, height, theme: chartTheme = "default" } = options;
+  let graph = null;
+  const render = (config) => {
+    const {
+      data = { nodes: [], edges: [] },
+      layout = "force",
+      theme = chartTheme,
+      title,
+      style = {}
+    } = config;
+    const { nodes = [], edges = [] } = data;
+    if (graph) {
+      graph.destroy();
+      graph = null;
+    }
+    const colors = (0, import_theme.normalizePalette)(style.palette, theme);
+    const backgroundColor = style.backgroundColor || (0, import_theme.getBackgroundColor)(theme);
+    const isDark = theme === "dark";
+    const containerEl = typeof container === "string" ? document.querySelector(container) : container;
+    if (!containerEl) {
+      throw new Error("NetworkGraph: container element not found");
+    }
+    containerEl.innerHTML = "";
+    containerEl.style.background = backgroundColor;
+    containerEl.style.borderRadius = "4px";
+    containerEl.style.overflow = "hidden";
+    const nodeData = nodes.map((node, index) => ({
+      id: node.name,
+      data: { label: node.name },
+      style: {
+        fill: colors[index % colors.length],
+        stroke: isDark ? "#444" : "#fff",
+        lineWidth: 2,
+        labelText: node.name,
+        labelFill: isDark ? "#e0e0e0" : "#333",
+        labelFontSize: 12,
+        size: 28
+      }
+    }));
+    const edgeData = edges.map((edge) => ({
+      source: edge.source,
+      target: edge.target,
+      data: { label: edge.name ?? "" },
+      style: {
+        stroke: isDark ? "#555" : "#ccc",
+        lineWidth: 1.5,
+        endArrow: true,
+        labelText: edge.name ?? "",
+        labelFill: isDark ? "#aaa" : "#666",
+        labelFontSize: 11,
+        labelBackground: !!edge.name,
+        labelBackgroundFill: backgroundColor,
+        labelBackgroundOpacity: 0.8
+      }
+    }));
+    const layoutConfig = {
+      force: {
+        type: "force",
+        preventOverlap: true,
+        nodeSize: 32,
+        linkDistance: 150,
+        gravity: 10
+      },
+      circular: {
+        type: "circular"
+      },
+      grid: {
+        type: "grid",
+        rows: Math.max(1, Math.ceil(Math.sqrt(nodes.length)))
+      },
+      radial: {
+        type: "radial",
+        preventOverlap: true,
+        nodeSize: 32
+      },
+      concentric: {
+        type: "concentric",
+        preventOverlap: true,
+        nodeSize: 32
+      },
+      dagre: {
+        type: "dagre",
+        rankdir: "TB",
+        nodesep: 50,
+        ranksep: 80
+      }
+    };
+    graph = new import_g6.Graph({
+      animation: false,
+      container: containerEl,
+      width,
+      height,
+      autoFit: "view",
+      autoResize: true,
+      padding: 24,
+      data: {
+        nodes: nodeData,
+        edges: edgeData
+      },
+      layout: layoutConfig[layout] || layoutConfig.force,
+      node: {
+        style: {
+          labelPlacement: "bottom",
+          labelMaxWidth: 100
+        }
+      },
+      behaviors: ["drag-canvas", "drag-element", "click-select"],
+      plugins: title ? [{ key: "title", type: "title", title, titleFill: isDark ? "#e0e6ed" : "#1a1a2e" }] : []
+    });
+    graph.render();
+  };
+  const destroy = () => {
+    if (graph) {
+      graph.destroy();
+      graph = null;
+    }
+  };
+  const zoomTo = (zoom) => {
+    if (graph) {
+      graph.zoomTo(zoom);
+    }
+  };
+  const getZoom = () => {
+    if (graph) {
+      return graph.getZoom();
+    }
+    return 1;
+  };
+  return {
+    render,
+    destroy,
+    zoomTo,
+    getZoom
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  NetworkGraph
+});

package/dist/cjs/vis/organization-chart/index.d.ts

@@ -0,0 +1,64 @@
+import type { TreeGraphData, VisualizationOptions } from '../../types';
+export type OrganizationChartData = TreeGraphData;
+/**
+ * OrganizationChartConfig defines the configuration for rendering the organization chart.
+ */
+export interface OrganizationChartConfig {
+    type?: 'organization-chart';
+    data: OrganizationChartData;
+    theme?: 'default' | 'academy' | 'dark';
+    title?: string;
+    style?: {
+        backgroundColor?: string;
+        palette?: string[];
+    };
+}
+/**
+ * OrganizationChartInstance represents a chart instance with render and destroy methods.
+ */
+export interface OrganizationChartInstance {
+    render: (config: OrganizationChartConfig) => void;
+    destroy: () => void;
+    zoomTo: (zoom: number) => void;
+    getZoom: () => number | undefined;
+}
+/**
+ * OrganizationChart component using G6 5.0.
+ * - dagre (TB) layout for hierarchical structure
+ * - custom rect node with name + description labels
+ * - depth-based color cycling
+ *
+ * @example
+ * ```ts
+ * const chart = OrganizationChart({ container: '#container', width: 600, height: 400 });
+ *
+ * chart.render({
+ *   type: 'organization-chart',
+ *   data: {
+ *     name: 'Alice Johnson',
+ *     description: 'Chief Technology Officer',
+ *     children: [
+ *       {
+ *         name: 'Bob Smith',
+ *         description: 'Senior Software Engineer',
+ *         children: [
+ *           { name: 'Charlie Brown', description: 'Software Engineer' },
+ *           { name: 'Diana White',   description: 'Software Engineer' },
+ *         ],
+ *       },
+ *       {
+ *         name: 'Eve Black',
+ *         description: 'IT Support Department Head',
+ *         children: [
+ *           { name: 'Frank Green', description: 'IT Support Specialist' },
+ *           { name: 'Grace Blue',  description: 'IT Support Specialist' },
+ *         ],
+ *       },
+ *     ],
+ *   },
+ * });
+ *
+ * chart.destroy();
+ * ```
+ */
+export declare const OrganizationChart: (options: VisualizationOptions) => OrganizationChartInstance;

package/dist/cjs/vis/organization-chart/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/organization-chart/index.ts
+var organization_chart_exports = {};
+__export(organization_chart_exports, {
+  OrganizationChart: () => OrganizationChart
+});
+module.exports = __toCommonJS(organization_chart_exports);
+var import_g6 = require("@antv/g6");
+var import_theme = require("../../util/theme");
+var NODE_WIDTH = 160;
+var NODE_HEIGHT_WITH_DESC = 72;
+var NODE_HEIGHT_NO_DESC = 40;
+var FONT_FAMILY = "system-ui,-apple-system,BlinkMacSystemFont,sans-serif";
+var LABEL_MAX_WIDTH = NODE_WIDTH - 16;
+function flattenTree(node, depth, pathId, nodes, edges) {
+  nodes.push({ id: pathId, name: node.name, description: node.description, depth });
+  (node.children ?? []).forEach((child, index) => {
+    const childId = `${pathId}_${index}`;
+    edges.push({ source: pathId, target: childId });
+    flattenTree(child, depth + 1, childId, nodes, edges);
+  });
+}
+var OrganizationChart = (options) => {
+  const { container, width, height, theme: chartTheme = "default" } = options;
+  let graph = null;
+  const render = (config) => {
+    const { data, theme = chartTheme, title, style = {} } = config;
+    if (!data || !data.name) {
+      throw new Error("OrganizationChart: 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("OrganizationChart: container element not found");
+    }
+    containerEl.innerHTML = "";
+    const colors = (0, import_theme.normalizePalette)(style.palette, theme);
+    const backgroundColor = style.backgroundColor || (0, import_theme.getBackgroundColor)(theme);
+    const isDark = theme === "dark";
+    containerEl.style.background = backgroundColor;
+    containerEl.style.borderRadius = "4px";
+    containerEl.style.overflow = "hidden";
+    const flatNodes = [];
+    const flatEdges = [];
+    flattenTree(data, 0, "0", flatNodes, flatEdges);
+    const nodeData = flatNodes.map((node) => ({
+      id: node.id,
+      data: {
+        name: node.name,
+        description: node.description,
+        depth: node.depth
+      }
+    }));
+    const edgeData = flatEdges.map((edge) => ({
+      id: `e__${edge.source}__${edge.target}`,
+      source: edge.source,
+      target: edge.target
+    }));
+    graph = new import_g6.Graph({
+      animation: false,
+      container: containerEl,
+      width,
+      height,
+      autoFit: "view",
+      autoResize: true,
+      padding: 24,
+      data: { nodes: nodeData, edges: edgeData },
+      plugins: [
+        {
+          type: "tooltip",
+          trigger: "hover",
+          enable: (e) => (e == null ? void 0 : e.targetType) === "node",
+          offset: [10, 10],
+          getContent: (e, items) => {
+            const item = items == null ? void 0 : items[0];
+            const biz = item == null ? void 0 : item.data;
+            if (!biz)
+              return "";
+            const name = escapeHtml(String(biz.name ?? ""));
+            const desc = biz.description ? escapeHtml(String(biz.description)) : "";
+            return `
+              <div style="max-width:260px;font-family:${FONT_FAMILY};">
+                <div style="font-weight:700;font-size:12px;line-height:1.2;margin-bottom:${desc ? "4px" : "0"};">
+                  ${name}
+                </div>
+                ${desc ? `<div style="font-size:12px;line-height:1.35;opacity:${isDark ? "0.86" : "0.78"};">${desc}</div>` : ""}
+              </div>
+            `;
+          },
+          style: {
+            ".tooltip": {
+              background: isDark ? "rgba(20,20,20,0.92)" : "rgba(255,255,255,0.96)",
+              color: isDark ? "#f2f2f2" : "#1f1f1f",
+              border: `1px solid ${isDark ? "rgba(255,255,255,0.12)" : "rgba(0,0,0,0.10)"}`,
+              borderRadius: 8,
+              boxShadow: "0 12px 28px rgba(0,0,0,0.16)",
+              padding: "8px 10px",
+              pointerEvents: "none"
+            }
+          }
+        },
+        ...title ? [{ key: "title", type: "title", title, titleFill: isDark ? "#e0e6ed" : "#1a1a2e" }] : []
+      ],
+      node: {
+        type: "rect",
+        style: {
+          // size: [width, height] is the correct API for rect nodes in G6 v5
+          size: (d) => [
+            NODE_WIDTH,
+            d.data.description ? NODE_HEIGHT_WITH_DESC : NODE_HEIGHT_NO_DESC
+          ],
+          fill: (d) => colors[d.data.depth % colors.length],
+          stroke: isDark ? "#555" : "#e8ebf0",
+          lineWidth: 1,
+          radius: 8,
+          // Use official label wrapping/ellipsis for BOTH name & description.
+          // 1 line name + up to 2 lines description => total maxLines = 3.
+          labelText: (d) => d.data.description ? `${d.data.name}
+${d.data.description}` : d.data.name,
+          labelFill: "#ffffff",
+          labelFontSize: 12,
+          labelFontWeight: 600,
+          labelWordWrap: true,
+          labelWordWrapWidth: LABEL_MAX_WIDTH,
+          labelMaxLines: (d) => d.data.description ? 3 : 1,
+          labelLineHeight: 14,
+          labelPlacement: "center"
+        }
+      },
+      edge: {
+        // Use a tree-friendly edge type that does not depend on node ports.
+        type: "cubic-vertical",
+        style: {
+          stroke: isDark ? "#4a4a4a" : "#d0d7e0",
+          lineWidth: 1.5,
+          endArrow: false,
+          startArrow: false
+        }
+      },
+      layout: {
+        type: "dagre",
+        rankdir: "TB",
+        nodesep: 40,
+        ranksep: 60,
+        // Dynamic nodeSize lets dagre calculate accurate per-node spacing
+        nodeSize: (d) => [NODE_WIDTH, d.data.description ? NODE_HEIGHT_WITH_DESC : NODE_HEIGHT_NO_DESC]
+      },
+      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()
+  };
+};
+function escapeHtml(input) {
+  return String(input).replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#039;");
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  OrganizationChart
+});

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

@@ -33,7 +33,7 @@ var Pie = (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 sumValue = data.reduce((sum, item) => sum + item.value, 0);
     chart = new import_g2.Chart({
@@ -43,6 +43,7 @@ var Pie = (options) => {
       autoFit: true
     });
     const chartOptions = {
+      animate: false,
       type: "interval",
       data,
       title: title ?? "",
@@ -85,8 +86,7 @@ var Pie = (options) => {
       viewStyle: {
         viewFill: backgroundColor
       },
-      theme: (0, import_theme.getThemeObject)(theme),
-      animate: { enter: { type: "waveIn" } }
+      theme: (0, import_theme.getThemeObject)(theme)
     };
     chart.options(chartOptions);
     chart.render();

package/dist/cjs/vis/radar/index.d.ts

@@ -14,6 +14,7 @@ export interface RadarConfig {
     type?: 'radar';
     data: RadarDataItem[];
     title?: string;
+    align?: boolean;
     theme?: 'default' | 'academy' | 'dark';
     style?: {
         backgroundColor?: string;

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

@@ -51,12 +51,12 @@ var Radar = (options) => {
   const { container, width, height, theme: chartTheme = "default" } = options;
   let chart = null;
   const render = (config) => {
-    const { data = [], theme = chartTheme, title, style = {} } = config;
+    const { data = [], theme = chartTheme, title, align = false, style = {} } = config;
     if (chart) {
       chart.destroy();
     }
     const { lineWidth = 2 } = 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 parallelData = transformRadarToParallel(data);
     const position = Object.keys(parallelData[0] || {}).filter((key) => key !== "group");
@@ -67,6 +67,7 @@ var Radar = (options) => {
       autoFit: true
     });
     const chartOptions = {
+      animate: false,
       type: "line",
       data: parallelData,
       title: title ?? "",
@@ -77,15 +78,15 @@ var Radar = (options) => {
         color: "group"
       },
       scale: {
-        // Configure scales for each position axis
         ...Object.fromEntries(
-          Array.from({ length: position.length }, (_, i) => [
-            `position${i === 0 ? "" : i}`,
-            {
-              domainMin: 0,
-              nice: true
+          Array.from({ length: position.length }, (_, i) => {
+            const scaleConfig = { domainMin: 0, nice: true };
+            if (align) {
+              const allValues = data.map((d) => d.value).filter((v) => v != null);
+              scaleConfig.domainMax = Math.max(...allValues);
             }
-          ])
+            return [`position${i === 0 ? "" : i}`, scaleConfig];
+          })
         ),
         color: {
           range: colors

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

@@ -32,7 +32,7 @@ var Sankey = (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,
@@ -41,6 +41,7 @@ var Sankey = (options) => {
       autoFit: true
     });
     const chartOptions = {
+      animate: false,
       type: "sankey",
       data: {
         value: data,

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

@@ -33,7 +33,7 @@ var Scatter = (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 hasGroupField = data.length > 0 && ((_a = data[0]) == null ? void 0 : _a.group) !== void 0;
     chart = new import_g2.Chart({
@@ -53,6 +53,7 @@ var Scatter = (options) => {
       encode = { x: "x", y: "y", color: () => "all" };
     }
     const chartOptions = {
+      animate: false,
       type: "point",
       data,
       title: title ?? "",

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

@@ -23,6 +23,7 @@ __export(summary_exports, {
 });
 module.exports = __toCommonJS(summary_exports);
 var import_t8 = require("@antv/t8");
+var import_theme = require("../../util/theme");
 var Summary = (options) => {
   let { theme = "light" } = options;
   if (theme === "academy" || theme === "default")
@@ -31,20 +32,33 @@ var Summary = (options) => {
   if (!container) {
     throw new Error("Container not found");
   }
+  const wrapper = document.createElement("div");
+  wrapper.className = "gpt-vis-summary";
+  container.appendChild(wrapper);
   let text = null;
   const render = (syntax) => {
     if (text) {
       text.unmount();
     }
-    text = new import_t8.Text(container);
-    text.theme(theme);
-    text.render(syntax);
+    let activeTheme = theme;
+    const cleanedSyntax = syntax.replace(/^theme\s+(light|dark)\s*$/im, (_, t) => {
+      activeTheme = t;
+      return "";
+    });
+    text = new import_t8.Text(wrapper);
+    wrapper.style.backgroundColor = activeTheme === "dark" ? (0, import_theme.getBackgroundColor)("dark") : "";
+    wrapper.style.padding = "16px";
+    text.theme(activeTheme);
+    text.render(cleanedSyntax.trim());
   };
   const destroy = () => {
     if (text) {
       text.unmount();
       text = null;
     }
+    if (wrapper.parentNode) {
+      wrapper.parentNode.removeChild(wrapper);
+    }
   };
   return {
     render,

package/dist/cjs/vis/table/index.d.ts

@@ -6,6 +6,7 @@ export interface TableConfig {
     type?: 'table';
     data: Record<string, any>[];
     title?: string;
+    theme?: 'default' | 'dark';
 }
 /**
  * TableInstance represents a table instance with render and destroy methods.