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

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

@@ -33,6 +33,7 @@ var TABLE_STYLES = `
     font-family: ${FONT_FAMILY};
     overflow: auto;
     height: 100%;
+    padding: 16px;
   }
 
   .${SCOPE_ID} .table-title {
@@ -85,6 +86,37 @@ var TABLE_STYLES = `
     background: #f5f5f5;
     cursor: pointer;
   }
+
+  .${SCOPE_ID}[data-theme="dark"] {
+    background: #000;
+  }
+
+  .${SCOPE_ID}[data-theme="dark"] .table-title {
+    color: #ffffffd9;
+  }
+
+  .${SCOPE_ID}[data-theme="dark"] table {
+    background: #141414;
+  }
+
+  .${SCOPE_ID}[data-theme="dark"] th,
+  .${SCOPE_ID}[data-theme="dark"] td {
+    border-bottom: 1px solid #303030;
+    color: #ffffffd9;
+  }
+
+  .${SCOPE_ID}[data-theme="dark"] th {
+    background: #1f1f1f;
+    color: #ffffffa6;
+  }
+
+  .${SCOPE_ID}[data-theme="dark"] th:not(:last-child)::after {
+    background: #303030;
+  }
+
+  .${SCOPE_ID}[data-theme="dark"] tbody tr:hover {
+    background: #1f1f1f;
+  }
 `;
 var calculateTableMinWidth = (data, columns) => {
   let maxRowWidth = 0;
@@ -118,19 +150,23 @@ var injectStyles = () => {
   document.head.appendChild(styleElement);
 };
 var Table = (options) => {
+  const { theme: chartTheme = "default" } = options;
   const container = typeof options.container === "string" ? document.querySelector(options.container) : options.container;
   if (!container) {
     throw new Error("Container not found");
   }
   let tableWrapper = null;
   const render = (config) => {
-    const { data = [], title } = config;
+    const { data = [], title, theme = chartTheme } = config;
     injectStyles();
     if (tableWrapper) {
       tableWrapper.remove();
     }
     tableWrapper = document.createElement("div");
     tableWrapper.className = SCOPE_ID;
+    if (theme === "dark") {
+      tableWrapper.setAttribute("data-theme", "dark");
+    }
     if (data.length === 0) {
       tableWrapper.innerHTML = `
         ${title ? `<div class="table-title">${title}</div>` : ""}

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

@@ -32,7 +32,7 @@ var Treemap = (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 Treemap = (options) => {
       autoFit: true
     });
     const chartOptions = {
+      animate: false,
       type: "treemap",
       data: {
         type: "inline",

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

@@ -3,7 +3,8 @@ import type { VisualizationOptions } from '../../types';
  * VennDataItem is the type for each data item in the venn chart.
  */
 export type VennDataItem = {
-    sets: string[];
+    /** Parser / DSL often yields a comma-separated string; G2 venn transform expects string[]. */
+    sets: string[] | string;
     value: number;
     label?: string;
 };

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

@@ -24,6 +24,16 @@ __export(venn_exports, {
 module.exports = __toCommonJS(venn_exports);
 var import_g2 = require("@antv/g2");
 var import_theme = require("../../util/theme");
+function normalizeVennSets(sets) {
+  if (Array.isArray(sets))
+    return sets.map((s) => String(s));
+  if (typeof sets === "string") {
+    return sets.split(",").map((s) => s.trim()).filter(Boolean);
+  }
+  if (sets == null)
+    return [];
+  return [String(sets)];
+}
 var Venn = (options) => {
   const { container, width, height, theme: chartTheme = "default" } = options;
   let chart = null;
@@ -32,8 +42,12 @@ var Venn = (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 normalizedData = data.map((d) => ({
+      ...d,
+      sets: normalizeVennSets(d.sets)
+    }));
     chart = new import_g2.Chart({
       container,
       width,
@@ -41,9 +55,10 @@ var Venn = (options) => {
       autoFit: true
     });
     const chartOptions = {
+      animate: false,
       type: "path",
       data: {
-        value: data,
+        value: normalizedData,
         transform: [
           {
             type: "venn",
@@ -61,7 +76,7 @@ var Venn = (options) => {
       },
       style: {
         // Set opacity: intersections (sets.length > 1) are nearly transparent, single sets are more opaque
-        opacity: (d) => d.sets.length > 1 ? 1e-3 : 0.65
+        opacity: (d) => normalizeVennSets(d.sets).length > 1 ? 1e-3 : 0.65
       },
       labels: [
         {

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

@@ -33,7 +33,7 @@ var Violin = (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;
@@ -114,6 +114,7 @@ var Violin = (options) => {
       ];
     }
     const chartOptions = {
+      animate: false,
       type: "view",
       data,
       title: title ?? "",

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

@@ -8,14 +8,6 @@ export type WaterfallDataItem = {
     isIntermediateTotal?: boolean;
     isTotal?: boolean;
 };
-/**
- * WaterfallPalette defines custom colors for positive, negative, total bars.
- */
-export interface WaterfallPalette {
-    positiveColor?: string;
-    negativeColor?: string;
-    totalColor?: string;
-}
 /**
  * WaterfallConfig defines the configuration for rendering the waterfall chart.
  */
@@ -28,7 +20,12 @@ export interface WaterfallConfig {
     axisYTitle?: string;
     style?: {
         backgroundColor?: string;
-        palette?: WaterfallPalette;
+        /**
+         * Custom color palette for waterfall bars.
+         * Array order: [0] positive color, [1] negative color, [2] total/intermediate-total color.
+         * Defaults: ['#FF4D4F', '#2EBB59', '#1783FF']
+         */
+        palette?: string[];
     };
 }
 /**

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

@@ -77,10 +77,10 @@ var Waterfall = (options) => {
       chart.destroy();
     }
     const backgroundColor = style.backgroundColor || (0, import_theme.getBackgroundColor)(theme);
-    const palette = style.palette || {};
-    const positiveColor = palette.positiveColor || DEFAULT_POSITIVE_COLOR;
-    const negativeColor = palette.negativeColor || DEFAULT_NEGATIVE_COLOR;
-    const totalColor = palette.totalColor || DEFAULT_TOTAL_COLOR;
+    const palette = style.palette || [];
+    const positiveColor = palette[0] || DEFAULT_POSITIVE_COLOR;
+    const negativeColor = palette[1] || DEFAULT_NEGATIVE_COLOR;
+    const totalColor = palette[2] || DEFAULT_TOTAL_COLOR;
     const transformedData = transformWaterfallData(data);
     const linkData = generateLinkData(transformedData);
     chart = new import_g2.Chart({
@@ -90,6 +90,7 @@ var Waterfall = (options) => {
       autoFit: true
     });
     const chartOptions = {
+      animate: false,
       type: "view",
       data: transformedData,
       title: title ?? "",
@@ -109,6 +110,7 @@ var Waterfall = (options) => {
       children: [
         {
           type: "interval",
+          animate: false,
           data: transformedData,
           encode: { x: "category", y: ["__start__", "__end__"], color: "category" },
           style: {
@@ -130,10 +132,31 @@ var Waterfall = (options) => {
               fontWeight: 600,
               stroke: "#fff"
             }
-          ]
+          ],
+          tooltip: {
+            title: (d) => d.category,
+            items: [
+              {
+                field: "__value__",
+                name: "数值",
+                valueFormatter: "~s"
+              },
+              {
+                field: "__start__",
+                name: "起始",
+                valueFormatter: "~s"
+              },
+              {
+                field: "__end__",
+                name: "结束",
+                valueFormatter: "~s"
+              }
+            ]
+          }
         },
         {
           type: "link",
+          animate: false,
           data: linkData,
           encode: {
             x: "x",

package/dist/cjs/vis/word-cloud/index.js

@@ -32,7 +32,7 @@ var WordCloud = (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 WordCloud = (options) => {
       autoFit: true
     });
     const chartOptions = {
+      animate: false,
       type: "wordCloud",
       data,
       title: title ?? "",

package/dist/cjs/vis-wrapper/icons.js

@@ -44,13 +44,13 @@ function createDownloadIcon(size = 14, fill = "#707070") {
 function createZoomInIcon(size = 18, fill = "#707070") {
   return `<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="${fill}">
     <path d="M889.5 852.7l-220-219.9c45-53.4 72.1-122.3 72.1-197.5 0-169.4-137.8-307.3-307.3-307.3S127.1 265.8 127.1 435.3s137.8 307.3 307.3 307.3c76.1 0 145.7-27.8 199.4-73.8l219.8 219.8c4.9 5 11.4 7.4 17.9 7.4s13-2.5 17.9-7.4c10-9.9 10-26 0.1-35.9zM434.4 691.8c-141.4 0-256.5-115.1-256.5-256.5 0-141.5 115.1-256.5 256.5-256.5s256.5 115.1 256.5 256.5-115.1 256.5-256.5 256.5z"></path>
-    <path d="M555 418.3H304.7c-14 0-25.4 11.4-25.4 25.4s11.4 25.4 25.4 25.4H555c14 0 25.4-11.4 25.4-25.4S569 418.3 555 418.3z"></path>
+    <path d="M555 418.3h-99.8v-99.8c0-14-11.4-25.4-25.4-25.4s-25.4 11.4-25.4 25.4v99.8h-99.8c-14 0-25.4 11.4-25.4 25.4s11.4 25.4 25.4 25.4h99.8v99.8c0 14 11.4 25.4 25.4 25.4s25.4-11.4 25.4-25.4v-99.8H555c14 0 25.4-11.4 25.4-25.4S569 418.3 555 418.3z"></path>
   </svg>`;
 }
 function createZoomOutIcon(size = 18, fill = "#707070") {
   return `<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="${fill}">
     <path d="M889.5 852.7l-220-219.9c45-53.4 72.1-122.3 72.1-197.5 0-169.4-137.8-307.3-307.3-307.3S127.1 265.8 127.1 435.3s137.8 307.3 307.3 307.3c76.1 0 145.7-27.8 199.4-73.8l219.8 219.8c4.9 5 11.4 7.4 17.9 7.4s13-2.5 17.9-7.4c10-9.9 10-26 0.1-35.9zM434.4 691.8c-141.4 0-256.5-115.1-256.5-256.5 0-141.5 115.1-256.5 256.5-256.5s256.5 115.1 256.5 256.5-115.1 256.5-256.5 256.5z"></path>
-    <path d="M555 418.3h-99.8v-99.8c0-14-11.4-25.4-25.4-25.4s-25.4 11.4-25.4 25.4v99.8h-99.8c-14 0-25.4 11.4-25.4 25.4s11.4 25.4 25.4 25.4h99.8v99.8c0 14 11.4 25.4 25.4 25.4s25.4-11.4 25.4-25.4v-99.8H555c14 0 25.4-11.4 25.4-25.4S569 418.3 555 418.3z"></path>
+    <path d="M555 418.3H304.7c-14 0-25.4 11.4-25.4 25.4s11.4 25.4 25.4 25.4H555c14 0 25.4-11.4 25.4-25.4S569 418.3 555 418.3z"></path>
   </svg>`;
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/cjs/vis-wrapper/index.d.ts

@@ -14,6 +14,7 @@ export interface WrapperInstance {
     chartContainer: HTMLElement;
     destroy: () => void;
     setChartRef: (chart: any) => void;
+    update: (syntax: string | object) => void;
 }
 /**
  * Create a wrapper container with tabs, buttons, and controls

package/dist/cjs/vis-wrapper/index.js

@@ -41,7 +41,6 @@ var DEFAULT_LABELS = {
     copied: "Copied"
   }
 };
-var G6_CHART_TYPES = [];
 function createVisWrapper(container, config = {}) {
   (0, import_styles.injectWrapperStyles)();
   const containerElement = typeof container === "string" ? document.querySelector(container) : container;
@@ -51,24 +50,23 @@ function createVisWrapper(container, config = {}) {
   const { chartType = "", syntax = "", locale = "zh-CN" } = config;
   const syntaxString = typeof syntax === "string" ? syntax : JSON.stringify(syntax, null, 2);
   const labels = DEFAULT_LABELS[locale] || DEFAULT_LABELS["en-US"];
-  const isG6Chart = G6_CHART_TYPES.includes(chartType);
   let chartRef = null;
   let copyTimeout;
-  const zoomButtonsHTML = isG6Chart ? `
-      <button class="gpt-vis-wrapper-text-button gpt-vis-wrapper-zoom-button" 
-              data-action="zoom-in" 
-              aria-label="Zoom in" 
-              title="Zoom in">
-        ${(0, import_icons.createZoomInIcon)(18)}
-      </button>
-      <button class="gpt-vis-wrapper-text-button gpt-vis-wrapper-zoom-button" 
-              data-action="zoom-out" 
-              aria-label="Zoom out" 
+  const zoomButtonsHTML = `
+      <button class="gpt-vis-wrapper-text-button gpt-vis-wrapper-zoom-button gpt-vis-wrapper-tab-hide"
+              data-action="zoom-out"
+              aria-label="Zoom out"
               title="Zoom out">
         ${(0, import_icons.createZoomOutIcon)(18)}
       </button>
-      <div class="gpt-vis-wrapper-divider"></div>
-    ` : "";
+      <button class="gpt-vis-wrapper-text-button gpt-vis-wrapper-zoom-button gpt-vis-wrapper-tab-hide"
+              data-action="zoom-in"
+              aria-label="Zoom in"
+              title="Zoom in">
+        ${(0, import_icons.createZoomInIcon)(18)}
+      </button>
+      <div class="gpt-vis-wrapper-divider gpt-vis-wrapper-tab-hide"></div>
+    `;
   const wrapperHTML = `
     <div class="gpt-vis-wrapper-container">
       <div class="gpt-vis-wrapper-header">
@@ -131,6 +129,7 @@ function createVisWrapper(container, config = {}) {
   );
   const divider = wrapperContainer.querySelector(".gpt-vis-wrapper-divider");
   function switchTab(tab) {
+    const hasZoomSupport = chartRef && typeof chartRef.zoomTo === "function";
     if (tab === "chart") {
       chartTabButton.classList.add("active");
       chartTabButton.setAttribute("aria-selected", "true");
@@ -140,7 +139,7 @@ function createVisWrapper(container, config = {}) {
       codeContainer.classList.add("gpt-vis-wrapper-tab-hide");
       downloadButton.classList.remove("gpt-vis-wrapper-tab-hide");
       copyButton.classList.add("gpt-vis-wrapper-tab-hide");
-      if (isG6Chart && zoomInButton && zoomOutButton && divider) {
+      if (hasZoomSupport && zoomInButton && zoomOutButton && divider) {
         zoomInButton.classList.remove("gpt-vis-wrapper-tab-hide");
         zoomOutButton.classList.remove("gpt-vis-wrapper-tab-hide");
         divider.classList.remove("gpt-vis-wrapper-tab-hide");
@@ -154,7 +153,7 @@ function createVisWrapper(container, config = {}) {
       codeContainer.classList.remove("gpt-vis-wrapper-tab-hide");
       downloadButton.classList.add("gpt-vis-wrapper-tab-hide");
       copyButton.classList.remove("gpt-vis-wrapper-tab-hide");
-      if (isG6Chart && zoomInButton && zoomOutButton && divider) {
+      if (hasZoomSupport && zoomInButton && zoomOutButton && divider) {
         zoomInButton.classList.add("gpt-vis-wrapper-tab-hide");
         zoomOutButton.classList.add("gpt-vis-wrapper-tab-hide");
         divider.classList.add("gpt-vis-wrapper-tab-hide");
@@ -214,8 +213,20 @@ function createVisWrapper(container, config = {}) {
     zoomOutButton.onclick = handleZoomOut;
   return {
     chartContainer,
+    update: (newSyntax) => {
+      const newSyntaxString = typeof newSyntax === "string" ? newSyntax : JSON.stringify(newSyntax, null, 2);
+      codeContainer.textContent = newSyntaxString;
+    },
     setChartRef: (chart) => {
       chartRef = chart;
+      if (chart && typeof chart.zoomTo === "function") {
+        if (zoomInButton)
+          zoomInButton.classList.remove("gpt-vis-wrapper-tab-hide");
+        if (zoomOutButton)
+          zoomOutButton.classList.remove("gpt-vis-wrapper-tab-hide");
+        if (divider)
+          divider.classList.remove("gpt-vis-wrapper-tab-hide");
+      }
     },
     destroy: () => {
       if (copyTimeout) {

package/dist/cjs/vis-wrapper/styles.d.ts

@@ -1,7 +1,7 @@
 /**
  * CSS styles for the wrapper component
  */
-export declare const wrapperStyles = "\n.gpt-vis-wrapper-container {\n  border-radius: 8px;\n  overflow: hidden;\n}\n\n.gpt-vis-wrapper-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background: #f5f5f5;\n  padding: 6px 14px 6px 6px;\n  gap: 2px;\n  position: relative;\n  z-index: 10;\n}\n\n.gpt-vis-wrapper-tab-left {\n  display: flex;\n  gap: 2px;\n}\n\n.gpt-vis-wrapper-tab-right {\n  display: flex;\n  gap: 4px;\n  align-items: center;\n}\n\n.gpt-vis-wrapper-tab-button {\n  border: none;\n  box-shadow: none;\n  background: transparent;\n  color: #494949;\n  border-radius: 8px;\n  height: 26px;\n  width: 52px;\n  font-size: 12px;\n  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n  transform: scale(1);\n  cursor: pointer;\n  outline: none;\n  font-family: inherit;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.gpt-vis-wrapper-tab-button.active {\n  background: #fff;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);\n}\n\n.gpt-vis-wrapper-tab-button:hover,\n.gpt-vis-wrapper-tab-button:focus {\n  color: #494949;\n  transform: scale(1.02);\n}\n\n.gpt-vis-wrapper-tab-button:not(.active):hover,\n.gpt-vis-wrapper-tab-button:not(.active):focus {\n  background: #f0f0f0;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);\n}\n\n.gpt-vis-wrapper-tab-button.active:hover,\n.gpt-vis-wrapper-tab-button.active:focus {\n  background: #fff;\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);\n}\n\n.gpt-vis-wrapper-tab-button:active {\n  transform: scale(0.96);\n  transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);\n}\n\n.gpt-vis-wrapper-tab-button.active:active {\n  background: #fff;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);\n}\n\n.gpt-vis-wrapper-tab-button:not(.active):active {\n  background: #e8e8e8;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);\n}\n\n.gpt-vis-wrapper-text-button {\n  border: none;\n  box-shadow: none;\n  background: transparent;\n  color: #494949;\n  height: 26px;\n  padding: 0 8px;\n  font-size: 12px;\n  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n  transform: scale(1);\n  border-radius: 8px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  cursor: pointer;\n  outline: none;\n  font-family: inherit;\n}\n\n.gpt-vis-wrapper-text-button:hover,\n.gpt-vis-wrapper-text-button:focus {\n  color: #666;\n  background: #e8e8e8;\n  transform: scale(1.02);\n}\n\n.gpt-vis-wrapper-text-button:active {\n  background: #e8e8e8;\n  transform: scale(0.98);\n}\n\n.gpt-vis-wrapper-zoom-button {\n  width: 24px;\n  height: 24px;\n  padding: 0;\n}\n\n.gpt-vis-wrapper-divider {\n  width: 1px;\n  height: 16px;\n  background-color: #d9d9d9;\n  margin: 0 8px;\n  flex-shrink: 0;\n}\n\n.gpt-vis-wrapper-content {\n  overflow: hidden;\n  position: relative;\n  background: #fafafa;\n}\n\n.gpt-vis-wrapper-chart {\n  min-width: 300px;\n  max-width: 100%;\n  overflow: hidden;\n  position: relative;\n  padding: 16px;\n}\n\n.gpt-vis-wrapper-chart-container {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n\n.gpt-vis-wrapper-chart-container::-webkit-scrollbar {\n  display: none;\n}\n\n.gpt-vis-wrapper-code {\n  max-height: 500px;\n  overflow: auto;\n  padding: 16px;\n  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;\n  font-size: 12px;\n  line-height: 1.6;\n  color: #333;\n  background: #fafafa;\n  white-space: pre-wrap;\n  word-wrap: break-word;\n}\n\n.gpt-vis-wrapper-tab-hide {\n  display: none;\n}\n";
+export declare const wrapperStyles = "\n.gpt-vis-wrapper-container {\n  border-radius: 8px;\n  overflow: hidden;\n}\n\n.gpt-vis-wrapper-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background: #f5f5f5;\n  padding: 6px 14px 6px 6px;\n  gap: 2px;\n  position: relative;\n  z-index: 10;\n}\n\n.gpt-vis-wrapper-tab-left {\n  display: flex;\n  gap: 2px;\n}\n\n.gpt-vis-wrapper-tab-right {\n  display: flex;\n  gap: 4px;\n  align-items: center;\n}\n\n.gpt-vis-wrapper-tab-button {\n  border: none;\n  box-shadow: none;\n  background: transparent;\n  color: #494949;\n  border-radius: 8px;\n  height: 26px;\n  width: 52px;\n  font-size: 12px;\n  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n  transform: scale(1);\n  cursor: pointer;\n  outline: none;\n  font-family: inherit;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.gpt-vis-wrapper-tab-button.active {\n  background: #fff;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);\n}\n\n.gpt-vis-wrapper-tab-button:hover,\n.gpt-vis-wrapper-tab-button:focus {\n  color: #494949;\n  transform: scale(1.02);\n}\n\n.gpt-vis-wrapper-tab-button:not(.active):hover,\n.gpt-vis-wrapper-tab-button:not(.active):focus {\n  background: #f0f0f0;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);\n}\n\n.gpt-vis-wrapper-tab-button.active:hover,\n.gpt-vis-wrapper-tab-button.active:focus {\n  background: #fff;\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);\n}\n\n.gpt-vis-wrapper-tab-button:active {\n  transform: scale(0.96);\n  transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);\n}\n\n.gpt-vis-wrapper-tab-button.active:active {\n  background: #fff;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);\n}\n\n.gpt-vis-wrapper-tab-button:not(.active):active {\n  background: #e8e8e8;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);\n}\n\n.gpt-vis-wrapper-text-button {\n  border: none;\n  box-shadow: none;\n  background: transparent;\n  color: #494949;\n  height: 26px;\n  padding: 0 8px;\n  font-size: 12px;\n  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n  transform: scale(1);\n  border-radius: 8px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  cursor: pointer;\n  outline: none;\n  font-family: inherit;\n}\n\n.gpt-vis-wrapper-text-button:hover,\n.gpt-vis-wrapper-text-button:focus {\n  color: #666;\n  background: #e8e8e8;\n  transform: scale(1.02);\n}\n\n.gpt-vis-wrapper-text-button:active {\n  background: #e8e8e8;\n  transform: scale(0.98);\n}\n\n.gpt-vis-wrapper-zoom-button {\n  width: 24px;\n  height: 24px;\n  padding: 0;\n}\n\n.gpt-vis-wrapper-divider {\n  width: 1px;\n  height: 16px;\n  background-color: #d9d9d9;\n  margin: 0 8px;\n  flex-shrink: 0;\n}\n\n.gpt-vis-wrapper-content {\n  overflow: hidden;\n  position: relative;\n  background: #fafafa;\n}\n\n.gpt-vis-wrapper-chart {\n  min-width: 300px;\n  max-width: 100%;\n  overflow: hidden;\n  position: relative;\n}\n\n.gpt-vis-wrapper-chart--g6 {\n  min-height: 400px;\n}\n\n.gpt-vis-wrapper-chart-container {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n\n.gpt-vis-wrapper-chart--g6 .gpt-vis-wrapper-chart-container {\n  min-height: 360px;\n}\n\n.gpt-vis-wrapper-chart-container::-webkit-scrollbar {\n  display: none;\n}\n\n.gpt-vis-wrapper-code {\n  max-height: 500px;\n  overflow: auto;\n  padding: 16px;\n  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;\n  font-size: 12px;\n  line-height: 1.6;\n  color: #333;\n  background: #fafafa;\n  white-space: pre-wrap;\n  word-wrap: break-word;\n}\n\n.gpt-vis-wrapper-tab-hide {\n  display: none;\n}\n";
 /**
  * Inject styles into the document head
  */

package/dist/cjs/vis-wrapper/styles.js

@@ -165,7 +165,10 @@ var wrapperStyles = `
   max-width: 100%;
   overflow: hidden;
   position: relative;
-  padding: 16px;
+}
+
+.gpt-vis-wrapper-chart--g6 {
+  min-height: 400px;
 }
 
 .gpt-vis-wrapper-chart-container {
@@ -176,6 +179,10 @@ var wrapperStyles = `
   -ms-overflow-style: none;
 }
 
+.gpt-vis-wrapper-chart--g6 .gpt-vis-wrapper-chart-container {
+  min-height: 360px;
+}
+
 .gpt-vis-wrapper-chart-container::-webkit-scrollbar {
   display: none;
 }

package/dist/esm/gpt-vis/index.d.ts

@@ -4,10 +4,16 @@ import type { BarConfig } from '../vis/bar';
 import type { BoxplotConfig } from '../vis/boxplot';
 import type { ColumnConfig } from '../vis/column';
 import type { DualAxesConfig } from '../vis/dual-axes';
+import type { FishboneDiagramConfig } from '../vis/fishbone-diagram';
+import type { FlowDiagramConfig } from '../vis/flow-diagram';
 import type { FunnelConfig } from '../vis/funnel';
 import type { HistogramConfig } from '../vis/histogram';
+import type { IndentedTreeConfig } from '../vis/indented-tree';
 import type { LineConfig } from '../vis/line';
 import type { LiquidConfig } from '../vis/liquid';
+import type { MindmapConfig } from '../vis/mindmap';
+import type { NetworkGraphConfig } from '../vis/network-graph';
+import type { OrganizationChartConfig } from '../vis/organization-chart';
 import type { PieConfig } from '../vis/pie';
 import type { RadarConfig } from '../vis/radar';
 import type { SankeyConfig } from '../vis/sankey';
@@ -22,7 +28,7 @@ import type { WordCloudConfig } from '../vis/word-cloud';
 /**
  * Union type for all supported chart configurations
  */
-export type GPTVisConfig = AreaConfig | BarConfig | BoxplotConfig | ColumnConfig | DualAxesConfig | FunnelConfig | HistogramConfig | LineConfig | LiquidConfig | PieConfig | RadarConfig | SankeyConfig | ScatterConfig | SummaryConfig | TableConfig | TreemapConfig | VennConfig | ViolinConfig | WaterfallConfig | WordCloudConfig;
+export type GPTVisConfig = AreaConfig | BarConfig | BoxplotConfig | ColumnConfig | DualAxesConfig | FlowDiagramConfig | FunnelConfig | HistogramConfig | IndentedTreeConfig | LineConfig | LiquidConfig | MindmapConfig | NetworkGraphConfig | OrganizationChartConfig | PieConfig | RadarConfig | SankeyConfig | ScatterConfig | SummaryConfig | TableConfig | TreemapConfig | VennConfig | ViolinConfig | WaterfallConfig | WordCloudConfig | FishboneDiagramConfig;
 /**
  * GPTVis is the unified API for all chart types.
  * It provides a simple interface to render different types of visualizations.
@@ -66,6 +72,7 @@ export type GPTVisConfig = AreaConfig | BarConfig | BoxplotConfig | ColumnConfig
 export declare class GPTVis {
     private options;
     private currentChart;
+    private currentChartType;
     private wrapperInstance;
     /**
      * Chart type registry mapping type strings to factory functions

package/dist/esm/gpt-vis/index.js

@@ -8,16 +8,23 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import { isVisSyntax, parse } from "../syntax/parser";
+import { resolveContainer } from "../util/container";
 import { createVisWrapper } from "../vis-wrapper";
 import { Area } from "../vis/area";
 import { Bar } from "../vis/bar";
 import { Boxplot } from "../vis/boxplot";
 import { Column } from "../vis/column";
 import { DualAxes } from "../vis/dual-axes";
+import { FishboneDiagram } from "../vis/fishbone-diagram";
+import { FlowDiagram } from "../vis/flow-diagram";
 import { Funnel } from "../vis/funnel";
 import { Histogram } from "../vis/histogram";
+import { IndentedTree } from "../vis/indented-tree";
 import { Line } from "../vis/line";
 import { Liquid } from "../vis/liquid";
+import { Mindmap } from "../vis/mindmap";
+import { NetworkGraph } from "../vis/network-graph";
+import { OrganizationChart } from "../vis/organization-chart";
 import { Pie } from "../vis/pie";
 import { Radar } from "../vis/radar";
 import { Sankey } from "../vis/sankey";
@@ -87,8 +94,11 @@ export var GPTVis = /*#__PURE__*/function () {
     _classCallCheck(this, GPTVis);
     _defineProperty(this, "options", void 0);
     _defineProperty(this, "currentChart", null);
+    _defineProperty(this, "currentChartType", '');
     _defineProperty(this, "wrapperInstance", null);
-    this.options = options;
+    this.options = _objectSpread(_objectSpread({}, options), {}, {
+      container: resolveContainer(options.container)
+    });
   }
 
   /**
@@ -142,36 +152,40 @@ export var GPTVis = /*#__PURE__*/function () {
         throw new Error("Unsupported chart type: \"".concat(type, "\". Available types: ").concat(availableTypes));
       }
 
-      // Destroy previous chart if exists
-      if (this.currentChart) {
-        this.currentChart.destroy();
-      }
-
-      // Destroy previous wrapper if exists
-      if (this.wrapperInstance) {
-        this.wrapperInstance.destroy();
-        this.wrapperInstance = null;
-      }
-
-      // Create wrapper if enabled
+      // Create or reuse wrapper
       var chartContainer = this.options.container;
       if (this.options.wrapper) {
-        this.wrapperInstance = createVisWrapper(this.options.container, {
-          chartType: type,
-          syntax: config,
-          locale: this.options.locale || 'zh-CN'
-        });
+        if (!this.wrapperInstance) {
+          this.wrapperInstance = createVisWrapper(this.options.container, {
+            chartType: type,
+            syntax: config,
+            locale: this.options.locale || 'zh-CN'
+          });
+        } else {
+          this.wrapperInstance.update(config);
+        }
         chartContainer = this.wrapperInstance.chartContainer;
       }
 
-      // Create chart options with the appropriate container and theme
-      var chartOptions = _objectSpread(_objectSpread({}, this.options), {}, {
-        container: chartContainer
-      });
+      // Reuse existing chart instance if the chart type hasn't changed
+      if (this.currentChart && this.currentChartType === type) {
+        this.currentChart.render(chartConfig);
+      } else {
+        // Destroy previous chart if type changed
+        if (this.currentChart) {
+          this.currentChart.destroy();
+        }
 
-      // Create new chart instance and render with merged config
-      this.currentChart = chartFactory(chartOptions);
-      this.currentChart.render(chartConfig);
+        // Create chart options with the appropriate container and theme
+        var chartOptions = _objectSpread(_objectSpread({}, this.options), {}, {
+          container: chartContainer
+        });
+
+        // Create new chart instance and render
+        this.currentChart = chartFactory(chartOptions);
+        this.currentChartType = type;
+        this.currentChart.render(chartConfig);
+      }
 
       // Set chart reference in wrapper if wrapper is enabled
       if (this.wrapperInstance) {
@@ -188,6 +202,7 @@ export var GPTVis = /*#__PURE__*/function () {
       if (this.currentChart) {
         this.currentChart.destroy();
         this.currentChart = null;
+        this.currentChartType = '';
       }
       if (this.wrapperInstance) {
         this.wrapperInstance.destroy();
@@ -206,10 +221,15 @@ _defineProperty(GPTVis, "chartRegistry", {
   boxplot: Boxplot,
   column: Column,
   'dual-axes': DualAxes,
+  'flow-diagram': FlowDiagram,
   funnel: Funnel,
   histogram: Histogram,
+  'indented-tree': IndentedTree,
   line: Line,
   liquid: Liquid,
+  mindmap: Mindmap,
+  'network-graph': NetworkGraph,
+  'organization-chart': OrganizationChart,
   pie: Pie,
   radar: Radar,
   sankey: Sankey,
@@ -220,5 +240,6 @@ _defineProperty(GPTVis, "chartRegistry", {
   venn: Venn,
   violin: Violin,
   waterfall: Waterfall,
-  'word-cloud': WordCloud
+  'word-cloud': WordCloud,
+  'fishbone-diagram': FishboneDiagram
 });

package/dist/esm/index.d.ts

@@ -1,6 +1,7 @@
 export { GPTVis } from './gpt-vis';
 export type { GPTVisConfig } from './gpt-vis';
-export { isVisSyntax } from './syntax';
+export { isVisSyntax, parse } from './syntax';
+export type { ParsedConfig } from './syntax';
 export type { VisualizationOptions } from './types';
 export { Area } from './vis/area';
 export type { AreaConfig, AreaDataItem } from './vis/area';
@@ -12,14 +13,26 @@ export { Column } from './vis/column';
 export type { ColumnConfig, ColumnDataItem } from './vis/column';
 export { DualAxes } from './vis/dual-axes';
 export type { DualAxesConfig, DualAxesSeriesItem } from './vis/dual-axes';
+export { FishboneDiagram } from './vis/fishbone-diagram';
+export type { FishboneDiagramConfig, FishboneDiagramInstance, FishboneNode, } from './vis/fishbone-diagram';
+export { FlowDiagram } from './vis/flow-diagram';
+export type { FlowDiagramConfig } from './vis/flow-diagram';
 export { Funnel } from './vis/funnel';
 export type { FunnelConfig, FunnelDataItem } from './vis/funnel';
 export { Histogram } from './vis/histogram';
 export type { HistogramConfig } from './vis/histogram';
+export { IndentedTree } from './vis/indented-tree';
+export type { IndentedTreeConfig, IndentedTreeData, IndentedTreeInstance, } from './vis/indented-tree';
 export { Line } from './vis/line';
 export type { LineConfig, LineDataItem } from './vis/line';
 export { Liquid } from './vis/liquid';
 export type { LiquidConfig } from './vis/liquid';
+export { Mindmap } from './vis/mindmap';
+export type { MindMapProps, MindmapConfig, MindmapData } from './vis/mindmap';
+export { NetworkGraph } from './vis/network-graph';
+export type { NetworkGraphConfig, NetworkGraphData, NetworkGraphEdge, NetworkGraphNode, } from './vis/network-graph';
+export { OrganizationChart } from './vis/organization-chart';
+export type { OrganizationChartConfig, OrganizationChartData } from './vis/organization-chart';
 export { Pie } from './vis/pie';
 export type { PieConfig } from './vis/pie';
 export { Radar } from './vis/radar';
@@ -39,6 +52,6 @@ export type { VennConfig, VennDataItem } from './vis/venn';
 export { Violin } from './vis/violin';
 export type { ViolinConfig, ViolinDataItem } from './vis/violin';
 export { Waterfall } from './vis/waterfall';
-export type { WaterfallConfig, WaterfallDataItem, WaterfallPalette } from './vis/waterfall';
+export type { WaterfallConfig, WaterfallDataItem } from './vis/waterfall';
 export { WordCloud } from './vis/word-cloud';
 export type { WordCloudConfig, WordCloudDataItem } from './vis/word-cloud';