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

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.

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,12 +110,13 @@ var Waterfall = (options) => {
       children: [
         {
           type: "interval",
+          animate: false,
           data: transformedData,
           encode: { x: "category", y: ["__start__", "__end__"], color: "category" },
           style: {
             maxWidth: 60,
             stroke: "#666",
-            radius: 4,
+            ...theme !== "academy" ? { radius: 4 } : {},
             fill: (d) => {
               return d.isTotal || d.isIntermediateTotal ? totalColor : d.__value__ > 0 ? positiveColor : negativeColor;
             }
@@ -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