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

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

@@ -0,0 +1,231 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/vis-wrapper/index.ts
+var vis_wrapper_exports = {};
+__export(vis_wrapper_exports, {
+  createVisWrapper: () => createVisWrapper
+});
+module.exports = __toCommonJS(vis_wrapper_exports);
+var import_snapdom = require("@zumer/snapdom");
+var import_icons = require("./icons");
+var import_styles = require("./styles");
+var DEFAULT_LABELS = {
+  "zh-CN": {
+    chartTab: "图表",
+    codeTab: "代码",
+    download: "下载",
+    copy: "复制",
+    copied: "完成"
+  },
+  "en-US": {
+    chartTab: "Chart",
+    codeTab: "Code",
+    download: "Download",
+    copy: "Copy",
+    copied: "Copied"
+  }
+};
+var G6_CHART_TYPES = [];
+function createVisWrapper(container, config = {}) {
+  (0, import_styles.injectWrapperStyles)();
+  const containerElement = typeof container === "string" ? document.querySelector(container) : container;
+  if (!containerElement) {
+    throw new Error("Container element not found");
+  }
+  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" 
+              title="Zoom out">
+        ${(0, import_icons.createZoomOutIcon)(18)}
+      </button>
+      <div class="gpt-vis-wrapper-divider"></div>
+    ` : "";
+  const wrapperHTML = `
+    <div class="gpt-vis-wrapper-container">
+      <div class="gpt-vis-wrapper-header">
+        <div class="gpt-vis-wrapper-tab-left">
+          <button class="gpt-vis-wrapper-tab-button active" 
+                  data-tab="chart"
+                  role="tab" 
+                  aria-selected="true" 
+                  aria-controls="chart-panel">
+            ${labels.chartTab}
+          </button>
+          <button class="gpt-vis-wrapper-tab-button" 
+                  data-tab="code"
+                  role="tab" 
+                  aria-selected="false" 
+                  aria-controls="code-panel">
+            ${labels.codeTab}
+          </button>
+        </div>
+        <div class="gpt-vis-wrapper-tab-right">
+          ${zoomButtonsHTML}
+          <button class="gpt-vis-wrapper-text-button" 
+                  data-action="download"
+                  aria-label="${labels.download}">
+            ${(0, import_icons.createDownloadIcon)(16)} <span>${labels.download}</span>
+          </button>
+          <button class="gpt-vis-wrapper-text-button gpt-vis-wrapper-tab-hide" 
+                  data-action="copy"
+                  aria-label="${labels.copy}">
+            ${(0, import_icons.createCopyIcon)()} <span>${labels.copy}</span>
+          </button>
+        </div>
+      </div>
+      <div class="gpt-vis-wrapper-content">
+        <div class="gpt-vis-wrapper-chart">
+          <div class="gpt-vis-wrapper-chart-container"></div>
+        </div>
+        <div class="gpt-vis-wrapper-code gpt-vis-wrapper-tab-hide">${syntaxString}</div>
+      </div>
+    </div>
+  `;
+  containerElement.innerHTML = wrapperHTML;
+  const wrapperContainer = containerElement.querySelector(".gpt-vis-wrapper-container");
+  const chartTabButton = wrapperContainer.querySelector('[data-tab="chart"]');
+  const codeTabButton = wrapperContainer.querySelector('[data-tab="code"]');
+  const chartWrapper = wrapperContainer.querySelector(".gpt-vis-wrapper-chart");
+  const codeContainer = wrapperContainer.querySelector(".gpt-vis-wrapper-code");
+  const chartContainer = wrapperContainer.querySelector(
+    ".gpt-vis-wrapper-chart-container"
+  );
+  const downloadButton = wrapperContainer.querySelector(
+    '[data-action="download"]'
+  );
+  const copyButton = wrapperContainer.querySelector('[data-action="copy"]');
+  const zoomInButton = wrapperContainer.querySelector(
+    '[data-action="zoom-in"]'
+  );
+  const zoomOutButton = wrapperContainer.querySelector(
+    '[data-action="zoom-out"]'
+  );
+  const divider = wrapperContainer.querySelector(".gpt-vis-wrapper-divider");
+  function switchTab(tab) {
+    if (tab === "chart") {
+      chartTabButton.classList.add("active");
+      chartTabButton.setAttribute("aria-selected", "true");
+      codeTabButton.classList.remove("active");
+      codeTabButton.setAttribute("aria-selected", "false");
+      chartWrapper.classList.remove("gpt-vis-wrapper-tab-hide");
+      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) {
+        zoomInButton.classList.remove("gpt-vis-wrapper-tab-hide");
+        zoomOutButton.classList.remove("gpt-vis-wrapper-tab-hide");
+        divider.classList.remove("gpt-vis-wrapper-tab-hide");
+      }
+    } else {
+      chartTabButton.classList.remove("active");
+      chartTabButton.setAttribute("aria-selected", "false");
+      codeTabButton.classList.add("active");
+      codeTabButton.setAttribute("aria-selected", "true");
+      chartWrapper.classList.add("gpt-vis-wrapper-tab-hide");
+      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) {
+        zoomInButton.classList.add("gpt-vis-wrapper-tab-hide");
+        zoomOutButton.classList.add("gpt-vis-wrapper-tab-hide");
+        divider.classList.add("gpt-vis-wrapper-tab-hide");
+      }
+    }
+  }
+  function handleZoomIn() {
+    var _a;
+    if (chartRef && typeof chartRef.zoomTo === "function") {
+      const currentZoom = ((_a = chartRef.getZoom) == null ? void 0 : _a.call(chartRef)) || 1;
+      const newZoom = Math.min(currentZoom * 1.15, 5);
+      chartRef.zoomTo(newZoom);
+    }
+  }
+  function handleZoomOut() {
+    var _a;
+    if (chartRef && typeof chartRef.zoomTo === "function") {
+      const currentZoom = ((_a = chartRef.getZoom) == null ? void 0 : _a.call(chartRef)) || 1;
+      const newZoom = Math.max(currentZoom / 1.15, 0.1);
+      chartRef.zoomTo(newZoom);
+    }
+  }
+  async function handleDownload() {
+    try {
+      if (chartContainer) {
+        const result = await (0, import_snapdom.snapdom)(chartContainer, { scale: 2 });
+        await result.download({
+          format: "png",
+          filename: `chart-${chartType}-${Date.now()}`
+        });
+      }
+    } catch (error) {
+      console.error("Download image failed:", error);
+    }
+  }
+  async function handleCopy() {
+    try {
+      await navigator.clipboard.writeText(syntaxString);
+      copyButton.innerHTML = `${(0, import_icons.createCheckIcon)()} <span>${labels.copied}</span>`;
+      if (copyTimeout) {
+        clearTimeout(copyTimeout);
+      }
+      copyTimeout = window.setTimeout(() => {
+        copyButton.innerHTML = `${(0, import_icons.createCopyIcon)()} <span>${labels.copy}</span>`;
+      }, 1e3);
+    } catch (error) {
+      console.error("Copy failed:", error);
+    }
+  }
+  chartTabButton.onclick = () => switchTab("chart");
+  codeTabButton.onclick = () => switchTab("code");
+  downloadButton.onclick = handleDownload;
+  copyButton.onclick = handleCopy;
+  if (zoomInButton)
+    zoomInButton.onclick = handleZoomIn;
+  if (zoomOutButton)
+    zoomOutButton.onclick = handleZoomOut;
+  return {
+    chartContainer,
+    setChartRef: (chart) => {
+      chartRef = chart;
+    },
+    destroy: () => {
+      if (copyTimeout) {
+        clearTimeout(copyTimeout);
+      }
+      containerElement.innerHTML = "";
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createVisWrapper
+});

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

@@ -0,0 +1,8 @@
+/**
+ * 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";
+/**
+ * Inject styles into the document head
+ */
+export declare function injectWrapperStyles(): void;

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

@@ -0,0 +1,214 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/vis-wrapper/styles.ts
+var styles_exports = {};
+__export(styles_exports, {
+  injectWrapperStyles: () => injectWrapperStyles,
+  wrapperStyles: () => wrapperStyles
+});
+module.exports = __toCommonJS(styles_exports);
+var wrapperStyles = `
+.gpt-vis-wrapper-container {
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.gpt-vis-wrapper-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #f5f5f5;
+  padding: 6px 14px 6px 6px;
+  gap: 2px;
+  position: relative;
+  z-index: 10;
+}
+
+.gpt-vis-wrapper-tab-left {
+  display: flex;
+  gap: 2px;
+}
+
+.gpt-vis-wrapper-tab-right {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+}
+
+.gpt-vis-wrapper-tab-button {
+  border: none;
+  box-shadow: none;
+  background: transparent;
+  color: #494949;
+  border-radius: 8px;
+  height: 26px;
+  width: 52px;
+  font-size: 12px;
+  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+  transform: scale(1);
+  cursor: pointer;
+  outline: none;
+  font-family: inherit;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.gpt-vis-wrapper-tab-button.active {
+  background: #fff;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+}
+
+.gpt-vis-wrapper-tab-button:hover,
+.gpt-vis-wrapper-tab-button:focus {
+  color: #494949;
+  transform: scale(1.02);
+}
+
+.gpt-vis-wrapper-tab-button:not(.active):hover,
+.gpt-vis-wrapper-tab-button:not(.active):focus {
+  background: #f0f0f0;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+}
+
+.gpt-vis-wrapper-tab-button.active:hover,
+.gpt-vis-wrapper-tab-button.active:focus {
+  background: #fff;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
+}
+
+.gpt-vis-wrapper-tab-button:active {
+  transform: scale(0.96);
+  transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+
+.gpt-vis-wrapper-tab-button.active:active {
+  background: #fff;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.gpt-vis-wrapper-tab-button:not(.active):active {
+  background: #e8e8e8;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+}
+
+.gpt-vis-wrapper-text-button {
+  border: none;
+  box-shadow: none;
+  background: transparent;
+  color: #494949;
+  height: 26px;
+  padding: 0 8px;
+  font-size: 12px;
+  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+  transform: scale(1);
+  border-radius: 8px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  cursor: pointer;
+  outline: none;
+  font-family: inherit;
+}
+
+.gpt-vis-wrapper-text-button:hover,
+.gpt-vis-wrapper-text-button:focus {
+  color: #666;
+  background: #e8e8e8;
+  transform: scale(1.02);
+}
+
+.gpt-vis-wrapper-text-button:active {
+  background: #e8e8e8;
+  transform: scale(0.98);
+}
+
+.gpt-vis-wrapper-zoom-button {
+  width: 24px;
+  height: 24px;
+  padding: 0;
+}
+
+.gpt-vis-wrapper-divider {
+  width: 1px;
+  height: 16px;
+  background-color: #d9d9d9;
+  margin: 0 8px;
+  flex-shrink: 0;
+}
+
+.gpt-vis-wrapper-content {
+  overflow: hidden;
+  position: relative;
+  background: #fafafa;
+}
+
+.gpt-vis-wrapper-chart {
+  min-width: 300px;
+  max-width: 100%;
+  overflow: hidden;
+  position: relative;
+  padding: 16px;
+}
+
+.gpt-vis-wrapper-chart-container {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.gpt-vis-wrapper-chart-container::-webkit-scrollbar {
+  display: none;
+}
+
+.gpt-vis-wrapper-code {
+  max-height: 500px;
+  overflow: auto;
+  padding: 16px;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
+  font-size: 12px;
+  line-height: 1.6;
+  color: #333;
+  background: #fafafa;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+.gpt-vis-wrapper-tab-hide {
+  display: none;
+}
+`;
+function injectWrapperStyles() {
+  const styleId = "gpt-vis-wrapper-styles";
+  if (document.getElementById(styleId)) {
+    return;
+  }
+  const styleElement = document.createElement("style");
+  styleElement.id = styleId;
+  styleElement.textContent = wrapperStyles;
+  document.head.appendChild(styleElement);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  injectWrapperStyles,
+  wrapperStyles
+});

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

@@ -0,0 +1,108 @@
+import type { VisualizationOptions } from '../types';
+import type { AreaConfig } from '../vis/area';
+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 { FunnelConfig } from '../vis/funnel';
+import type { HistogramConfig } from '../vis/histogram';
+import type { LineConfig } from '../vis/line';
+import type { LiquidConfig } from '../vis/liquid';
+import type { PieConfig } from '../vis/pie';
+import type { RadarConfig } from '../vis/radar';
+import type { SankeyConfig } from '../vis/sankey';
+import type { ScatterConfig } from '../vis/scatter';
+import type { SummaryConfig } from '../vis/summary';
+import type { TableConfig } from '../vis/table';
+import type { TreemapConfig } from '../vis/treemap';
+import type { VennConfig } from '../vis/venn';
+import type { ViolinConfig } from '../vis/violin';
+import type { WaterfallConfig } from '../vis/waterfall';
+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;
+/**
+ * GPTVis is the unified API for all chart types.
+ * It provides a simple interface to render different types of visualizations.
+ *
+ * @example
+ * ```ts
+ * import { GPTVis } from '@antv/gpt-vis';
+ *
+ * const g = new GPTVis({
+ *   container: '#container',
+ *   width: 600,
+ *   height: 400,
+ *   theme: 'academy', // Optional theme
+ *   wrapper: true, // Enable wrapper with tabs and controls (default: false)
+ * });
+ *
+ * // Render with config object
+ * g.render({
+ *   type: 'pie',
+ *   data: [
+ *     { category: '分类一', value: 27 },
+ *     { category: '分类二', value: 25 },
+ *   ],
+ *   innerRadius: 0.6,
+ * });
+ *
+ * // Or render with syntax string
+ * g.render(`
+ * vis pie
+ * data
+ *   - category 分类一
+ *     value 27
+ *   - category 分类二
+ *     value 25
+ * innerRadius: 0.6
+ * `);
+ *
+ * g.destroy();
+ * ```
+ */
+export declare class GPTVis {
+    private options;
+    private currentChart;
+    private wrapperInstance;
+    /**
+     * Chart type registry mapping type strings to factory functions
+     */
+    private static readonly chartRegistry;
+    /**
+     * Constructor
+     * @param options - Visualization options containing container, dimensions, and optional theme
+     */
+    constructor(options: VisualizationOptions);
+    /**
+     * Render a chart based on the provided configuration or syntax string.
+     *
+     * @param config - Chart configuration object (with type field) or syntax string (starting with 'vis [type]')
+     *
+     * @example
+     * ```ts
+     * // With config object
+     * g.render({
+     *   type: 'pie',
+     *   data: [{ category: 'A', value: 30 }, { category: 'B', value: 70 }]
+     * });
+     *
+     * // With syntax string
+     * g.render(`
+     * vis pie
+     * data
+     *   - category A
+     *     value 30
+     *   - category B
+     *     value 70
+     * `);
+     * ```
+     */
+    render(config: string | Record<string, unknown>): void;
+    /**
+     * Destroy the current chart instance and clean up resources
+     */
+    destroy(): void;
+}