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

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

@@ -5,7 +5,7 @@ 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 { Chart } from '@antv/g2';
-import { getBackgroundColor, getThemeColors, getThemeObject } from "../../util/theme";
+import { getBackgroundColor, getThemeObject, normalizePalette } from "../../util/theme";
 
 /**
  * TreemapDataItem is the type for each data item in the treemap chart.
@@ -83,7 +83,7 @@ export var Treemap = function Treemap(options) {
     }
 
     // Get colors from style.palette or theme defaults
-    var colors = style.palette || getThemeColors(theme);
+    var colors = normalizePalette(style.palette, theme);
     var backgroundColor = style.backgroundColor || getBackgroundColor(theme);
 
     // Create chart
@@ -98,6 +98,7 @@ export var Treemap = function Treemap(options) {
     // Note: Using 'any' type due to G2's complex type system with transformations
     // This is consistent with how G2 5.0 is used elsewhere in the codebase
     var chartOptions = {
+      animate: false,
       type: 'treemap',
       data: {
         type: 'inline',

package/dist/esm/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/esm/vis/venn/index.js

@@ -1,10 +1,29 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+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 { Chart } from '@antv/g2';
-import { getBackgroundColor, getThemeColors, getThemeObject } from "../../util/theme";
+import { getBackgroundColor, getThemeObject, normalizePalette } from "../../util/theme";
 
 /**
  * VennDataItem is the type for each data item in the venn chart.
  */
 
+function normalizeVennSets(sets) {
+  if (Array.isArray(sets)) return sets.map(function (s) {
+    return String(s);
+  });
+  if (typeof sets === 'string') {
+    return sets.split(',').map(function (s) {
+      return s.trim();
+    }).filter(Boolean);
+  }
+  if (sets == null) return [];
+  return [String(sets)];
+}
+
 /**
  * VennConfig defines the configuration for rendering the venn chart.
  */
@@ -63,8 +82,13 @@ export var Venn = function Venn(options) {
     }
 
     // Get colors from style.palette or theme defaults
-    var colors = style.palette || getThemeColors(theme);
+    var colors = normalizePalette(style.palette, theme);
     var backgroundColor = style.backgroundColor || getBackgroundColor(theme);
+    var normalizedData = data.map(function (d) {
+      return _objectSpread(_objectSpread({}, d), {}, {
+        sets: normalizeVennSets(d.sets)
+      });
+    });
 
     // Create chart
     chart = new Chart({
@@ -78,9 +102,10 @@ export var Venn = function Venn(options) {
     // Note: Using 'any' type due to G2's complex type system with transformations
     // This is consistent with how G2 5.0 is used elsewhere in the codebase
     var chartOptions = {
+      animate: false,
       type: 'path',
       data: {
-        value: data,
+        value: normalizedData,
         transform: [{
           type: 'venn',
           padding: 8,
@@ -102,7 +127,7 @@ export var Venn = function Venn(options) {
       style: {
         // Set opacity: intersections (sets.length > 1) are nearly transparent, single sets are more opaque
         opacity: function opacity(d) {
-          return d.sets.length > 1 ? 0.001 : 0.65;
+          return normalizeVennSets(d.sets).length > 1 ? 0.001 : 0.65;
         }
       },
       labels: [{

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

@@ -5,7 +5,7 @@ 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 { Chart } from '@antv/g2';
-import { getBackgroundColor, getThemeColors, getThemeObject } from "../../util/theme";
+import { getBackgroundColor, getThemeObject, normalizePalette } from "../../util/theme";
 
 /**
  * ViolinDataItem is the type for each data item in the violin chart.
@@ -74,7 +74,7 @@ export var Violin = function Violin(options) {
     }
 
     // Get colors from style.palette or theme defaults
-    var colors = style.palette || getThemeColors(theme);
+    var colors = normalizePalette(style.palette, theme);
     var backgroundColor = style.backgroundColor || getBackgroundColor(theme);
     var startAtZero = style.startAtZero || false;
 
@@ -195,6 +195,7 @@ export var Violin = function Violin(options) {
     // Note: Using 'any' type due to G2's complex type system with transformations
     // This is consistent with how G2 5.0 is used elsewhere in the codebase
     var chartOptions = _objectSpread(_objectSpread({
+      animate: false,
       type: 'view',
       data: data,
       title: title !== null && title !== void 0 ? title : '',

package/dist/esm/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/esm/vis/waterfall/index.js

@@ -11,10 +11,6 @@ import { getBackgroundColor, getThemeObject } from "../../util/theme";
  * WaterfallDataItem is the type for each data item in the waterfall chart.
  */
 
-/**
- * WaterfallPalette defines custom colors for positive, negative, total bars.
- */
-
 /**
  * WaterfallConfig defines the configuration for rendering the waterfall chart.
  */
@@ -132,11 +128,12 @@ export var Waterfall = function Waterfall(options) {
     }
 
     // Get colors from style.palette or defaults
+    // palette array order: [0] positive, [1] negative, [2] total
     var backgroundColor = style.backgroundColor || getBackgroundColor(theme);
-    var palette = style.palette || {};
-    var positiveColor = palette.positiveColor || DEFAULT_POSITIVE_COLOR;
-    var negativeColor = palette.negativeColor || DEFAULT_NEGATIVE_COLOR;
-    var totalColor = palette.totalColor || DEFAULT_TOTAL_COLOR;
+    var palette = style.palette || [];
+    var positiveColor = palette[0] || DEFAULT_POSITIVE_COLOR;
+    var negativeColor = palette[1] || DEFAULT_NEGATIVE_COLOR;
+    var totalColor = palette[2] || DEFAULT_TOTAL_COLOR;
 
     // Transform data to include __start__ and __end__ fields
     var transformedData = transformWaterfallData(data);
@@ -156,6 +153,7 @@ export var Waterfall = function Waterfall(options) {
     // Note: Using 'any' type due to G2's complex type system with transformations
     // This is consistent with how G2 5.0 is used elsewhere in the codebase
     var chartOptions = _objectSpread(_objectSpread({
+      animate: false,
       type: 'view',
       data: transformedData,
       title: title !== null && title !== void 0 ? title : '',
@@ -176,20 +174,23 @@ export var Waterfall = function Waterfall(options) {
       },
       children: [{
         type: 'interval',
+        animate: false,
         data: transformedData,
         encode: {
           x: 'category',
           y: ['__start__', '__end__'],
           color: 'category'
         },
-        style: {
+        style: _objectSpread(_objectSpread({
           maxWidth: 60,
-          stroke: '#666',
-          radius: 4,
+          stroke: '#666'
+        }, theme !== 'academy' ? {
+          radius: 4
+        } : {}), {}, {
           fill: function fill(d) {
             return d.isTotal || d.isIntermediateTotal ? totalColor : d.__value__ > 0 ? positiveColor : negativeColor;
           }
-        },
+        }),
         labels: [{
           text: '__value__',
           position: 'inside',
@@ -201,9 +202,28 @@ export var Waterfall = function Waterfall(options) {
           fill: '#000',
           fontWeight: 600,
           stroke: '#fff'
-        }]
+        }],
+        tooltip: {
+          title: function title(d) {
+            return 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/esm/vis/word-cloud/index.js

@@ -1,5 +1,5 @@
 import { Chart } from '@antv/g2';
-import { getBackgroundColor, getThemeColors, getThemeObject } from "../../util/theme";
+import { getBackgroundColor, getThemeObject, normalizePalette } from "../../util/theme";
 
 /**
  * WordCloudDataItem is the type for each data item in the word cloud chart.
@@ -63,7 +63,7 @@ export var WordCloud = function WordCloud(options) {
     }
 
     // Get colors from style.palette or theme defaults
-    var colors = style.palette || getThemeColors(theme);
+    var colors = normalizePalette(style.palette, theme);
     var backgroundColor = style.backgroundColor || getBackgroundColor(theme);
 
     // Create chart
@@ -78,6 +78,7 @@ export var WordCloud = function WordCloud(options) {
     // Note: Using 'any' type due to G2's complex type system with transformations
     // This is consistent with how G2 5.0 is used elsewhere in the codebase
     var chartOptions = {
+      animate: false,
       type: 'wordCloud',
       data: data,
       title: title !== null && title !== void 0 ? title : '',

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

@@ -20,10 +20,10 @@ export function createDownloadIcon() {
 export function createZoomInIcon() {
   var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 18;
   var fill = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '#707070';
-  return "<svg viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(size, "\" height=\"").concat(size, "\" fill=\"").concat(fill, "\">\n    <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>\n    <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>\n  </svg>");
+  return "<svg viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(size, "\" height=\"").concat(size, "\" fill=\"").concat(fill, "\">\n    <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>\n    <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>\n  </svg>");
 }
 export function createZoomOutIcon() {
   var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 18;
   var fill = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '#707070';
-  return "<svg viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(size, "\" height=\"").concat(size, "\" fill=\"").concat(fill, "\">\n    <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>\n    <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>\n  </svg>");
+  return "<svg viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(size, "\" height=\"").concat(size, "\" fill=\"").concat(fill, "\">\n    <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>\n    <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>\n  </svg>");
 }

package/dist/esm/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/esm/vis-wrapper/index.js

@@ -26,11 +26,6 @@ var DEFAULT_LABELS = {
   }
 };
 
-/**
- * G6 chart types that support zoom functionality
- */
-var G6_CHART_TYPES = [];
-
 /**
  * Wrapper configuration options
  */
@@ -63,12 +58,11 @@ export function createVisWrapper(container) {
     locale = _config$locale === void 0 ? 'zh-CN' : _config$locale;
   var syntaxString = typeof syntax === 'string' ? syntax : JSON.stringify(syntax, null, 2);
   var labels = DEFAULT_LABELS[locale] || DEFAULT_LABELS['en-US'];
-  var isG6Chart = G6_CHART_TYPES.includes(chartType);
   var chartRef = null;
   var copyTimeout;
 
-  // Build zoom buttons HTML for G6 charts
-  var zoomButtonsHTML = isG6Chart ? "\n      <button class=\"gpt-vis-wrapper-text-button gpt-vis-wrapper-zoom-button\" \n              data-action=\"zoom-in\" \n              aria-label=\"Zoom in\" \n              title=\"Zoom in\">\n        ".concat(createZoomInIcon(18), "\n      </button>\n      <button class=\"gpt-vis-wrapper-text-button gpt-vis-wrapper-zoom-button\" \n              data-action=\"zoom-out\" \n              aria-label=\"Zoom out\" \n              title=\"Zoom out\">\n        ").concat(createZoomOutIcon(18), "\n      </button>\n      <div class=\"gpt-vis-wrapper-divider\"></div>\n    ") : '';
+  // Build zoom buttons HTML (initially hidden, shown when chart has zoomTo method)
+  var zoomButtonsHTML = "\n      <button class=\"gpt-vis-wrapper-text-button gpt-vis-wrapper-zoom-button gpt-vis-wrapper-tab-hide\"\n              data-action=\"zoom-out\"\n              aria-label=\"Zoom out\"\n              title=\"Zoom out\">\n        ".concat(createZoomOutIcon(18), "\n      </button>\n      <button class=\"gpt-vis-wrapper-text-button gpt-vis-wrapper-zoom-button gpt-vis-wrapper-tab-hide\"\n              data-action=\"zoom-in\"\n              aria-label=\"Zoom in\"\n              title=\"Zoom in\">\n        ").concat(createZoomInIcon(18), "\n      </button>\n      <div class=\"gpt-vis-wrapper-divider gpt-vis-wrapper-tab-hide\"></div>\n    ");
 
   // Create wrapper HTML structure using template string
   var wrapperHTML = "\n    <div class=\"gpt-vis-wrapper-container\">\n      <div class=\"gpt-vis-wrapper-header\">\n        <div class=\"gpt-vis-wrapper-tab-left\">\n          <button class=\"gpt-vis-wrapper-tab-button active\" \n                  data-tab=\"chart\"\n                  role=\"tab\" \n                  aria-selected=\"true\" \n                  aria-controls=\"chart-panel\">\n            ".concat(labels.chartTab, "\n          </button>\n          <button class=\"gpt-vis-wrapper-tab-button\" \n                  data-tab=\"code\"\n                  role=\"tab\" \n                  aria-selected=\"false\" \n                  aria-controls=\"code-panel\">\n            ").concat(labels.codeTab, "\n          </button>\n        </div>\n        <div class=\"gpt-vis-wrapper-tab-right\">\n          ").concat(zoomButtonsHTML, "\n          <button class=\"gpt-vis-wrapper-text-button\" \n                  data-action=\"download\"\n                  aria-label=\"").concat(labels.download, "\">\n            ").concat(createDownloadIcon(16), " <span>").concat(labels.download, "</span>\n          </button>\n          <button class=\"gpt-vis-wrapper-text-button gpt-vis-wrapper-tab-hide\" \n                  data-action=\"copy\"\n                  aria-label=\"").concat(labels.copy, "\">\n            ").concat(createCopyIcon(), " <span>").concat(labels.copy, "</span>\n          </button>\n        </div>\n      </div>\n      <div class=\"gpt-vis-wrapper-content\">\n        <div class=\"gpt-vis-wrapper-chart\">\n          <div class=\"gpt-vis-wrapper-chart-container\"></div>\n        </div>\n        <div class=\"gpt-vis-wrapper-code gpt-vis-wrapper-tab-hide\">").concat(syntaxString, "</div>\n      </div>\n    </div>\n  ");
@@ -91,6 +85,7 @@ export function createVisWrapper(container) {
 
   // Event handlers
   function switchTab(tab) {
+    var hasZoomSupport = chartRef && typeof chartRef.zoomTo === 'function';
     if (tab === 'chart') {
       chartTabButton.classList.add('active');
       chartTabButton.setAttribute('aria-selected', 'true');
@@ -100,7 +95,7 @@ export function createVisWrapper(container) {
       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');
@@ -114,7 +109,7 @@ export function createVisWrapper(container) {
       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');
@@ -224,8 +219,18 @@ export function createVisWrapper(container) {
   // Return wrapper instance
   return {
     chartContainer: chartContainer,
+    update: function update(newSyntax) {
+      var newSyntaxString = typeof newSyntax === 'string' ? newSyntax : JSON.stringify(newSyntax, null, 2);
+      codeContainer.textContent = newSyntaxString;
+    },
     setChartRef: function setChartRef(chart) {
       chartRef = chart;
+      // Show zoom buttons if chart has zoomTo method
+      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: function destroy() {
       if (copyTimeout) {

package/dist/esm/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/esm/vis-wrapper/styles.js

@@ -2,7 +2,7 @@
  * CSS styles for the wrapper component
  */
 
-export var 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 var 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