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

package/src/vis-wrapper/index.ts

@@ -0,0 +1,276 @@
+import { snapdom } from '@zumer/snapdom';
+import {
+  createCheckIcon,
+  createCopyIcon,
+  createDownloadIcon,
+  createZoomInIcon,
+  createZoomOutIcon,
+} from './icons';
+import { injectWrapperStyles } from './styles';
+
+/**
+ * Labels for different locales
+ */
+const DEFAULT_LABELS: Record<
+  string,
+  { chartTab: string; codeTab: string; download: string; copy: string; copied: string }
+> = {
+  'zh-CN': {
+    chartTab: '图表',
+    codeTab: '代码',
+    download: '下载',
+    copy: '复制',
+    copied: '完成',
+  },
+  'en-US': {
+    chartTab: 'Chart',
+    codeTab: 'Code',
+    download: 'Download',
+    copy: 'Copy',
+    copied: 'Copied',
+  },
+};
+
+/**
+ * G6 chart types that support zoom functionality
+ */
+const G6_CHART_TYPES: string[] = [];
+
+/**
+ * Wrapper configuration options
+ */
+export interface WrapperConfig {
+  chartType?: string;
+  syntax?: string | object;
+  locale?: string;
+  onChartReady?: (chart: any) => void;
+}
+
+/**
+ * Wrapper instance that provides control over the wrapper UI
+ */
+export interface WrapperInstance {
+  chartContainer: HTMLElement;
+  destroy: () => void;
+  setChartRef: (chart: any) => void;
+}
+
+/**
+ * Create a wrapper container with tabs, buttons, and controls
+ * @param container - The parent container element or selector
+ * @param config - Wrapper configuration options
+ * @returns A wrapper instance with the chart container and controls
+ */
+export function createVisWrapper(
+  container: string | HTMLElement,
+  config: WrapperConfig = {},
+): WrapperInstance {
+  // Inject styles if not already present
+  injectWrapperStyles();
+
+  // Get container element
+  const containerElement =
+    typeof container === 'string' ? document.querySelector<HTMLElement>(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: any = null;
+  let copyTimeout: number | undefined;
+
+  // Build zoom buttons HTML for G6 charts
+  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">
+        ${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">
+        ${createZoomOutIcon(18)}
+      </button>
+      <div class="gpt-vis-wrapper-divider"></div>
+    `
+    : '';
+
+  // Create wrapper HTML structure using template string
+  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}">
+            ${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}">
+            ${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>
+  `;
+
+  // Insert HTML into container
+  containerElement.innerHTML = wrapperHTML;
+
+  // Get references to interactive elements
+  const wrapperContainer = containerElement.querySelector('.gpt-vis-wrapper-container')!;
+  const chartTabButton = wrapperContainer.querySelector('[data-tab="chart"]') as HTMLButtonElement;
+  const codeTabButton = wrapperContainer.querySelector('[data-tab="code"]') as HTMLButtonElement;
+  const chartWrapper = wrapperContainer.querySelector('.gpt-vis-wrapper-chart') as HTMLElement;
+  const codeContainer = wrapperContainer.querySelector('.gpt-vis-wrapper-code') as HTMLElement;
+  const chartContainer = wrapperContainer.querySelector(
+    '.gpt-vis-wrapper-chart-container',
+  ) as HTMLElement;
+  const downloadButton = wrapperContainer.querySelector(
+    '[data-action="download"]',
+  ) as HTMLButtonElement;
+  const copyButton = wrapperContainer.querySelector('[data-action="copy"]') as HTMLButtonElement;
+  const zoomInButton = wrapperContainer.querySelector(
+    '[data-action="zoom-in"]',
+  ) as HTMLButtonElement | null;
+  const zoomOutButton = wrapperContainer.querySelector(
+    '[data-action="zoom-out"]',
+  ) as HTMLButtonElement | null;
+  const divider = wrapperContainer.querySelector('.gpt-vis-wrapper-divider') as HTMLElement | null;
+
+  // Event handlers
+  function switchTab(tab: 'chart' | 'code') {
+    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() {
+    if (chartRef && typeof chartRef.zoomTo === 'function') {
+      const currentZoom = chartRef.getZoom?.() || 1;
+      const newZoom = Math.min(currentZoom * 1.15, 5); // Zoom in: multiply to enlarge
+      chartRef.zoomTo(newZoom);
+    }
+  }
+
+  function handleZoomOut() {
+    if (chartRef && typeof chartRef.zoomTo === 'function') {
+      const currentZoom = chartRef.getZoom?.() || 1;
+      const newZoom = Math.max(currentZoom / 1.15, 0.1); // Zoom out: divide to shrink
+      chartRef.zoomTo(newZoom);
+    }
+  }
+
+  async function handleDownload() {
+    try {
+      if (chartContainer) {
+        const result = await 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 = `${createCheckIcon()} <span>${labels.copied}</span>`;
+
+      if (copyTimeout) {
+        clearTimeout(copyTimeout);
+      }
+
+      copyTimeout = window.setTimeout(() => {
+        copyButton.innerHTML = `${createCopyIcon()} <span>${labels.copy}</span>`;
+      }, 1000);
+    } catch (error) {
+      console.error('Copy failed:', error);
+    }
+  }
+
+  // Attach event listeners
+  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 wrapper instance
+  return {
+    chartContainer,
+    setChartRef: (chart: any) => {
+      chartRef = chart;
+    },
+    destroy: () => {
+      if (copyTimeout) {
+        clearTimeout(copyTimeout);
+      }
+      containerElement.innerHTML = '';
+    },
+  };
+}

package/src/vis-wrapper/styles.ts

@@ -0,0 +1,195 @@
+/**
+ * CSS styles for the wrapper component
+ */
+
+export const 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;
+}
+`;
+
+/**
+ * Inject styles into the document head
+ */
+export function injectWrapperStyles(): void {
+  const styleId = 'gpt-vis-wrapper-styles';
+
+  // Check if styles already exist
+  if (document.getElementById(styleId)) {
+    return;
+  }
+
+  const styleElement = document.createElement('style');
+  styleElement.id = styleId;
+  styleElement.textContent = wrapperStyles;
+  document.head.appendChild(styleElement);
+}

package/README.ja-JP.md

@@ -1,164 +0,0 @@
-<img src="https://gw.alipayobjects.com/zos/antfincdn/R8sN%24GNdh6/language.svg" width="18"> [English](./README.md) | [简体中文](./README.zh-CN.md) | 日本語
-
-<div align="center">
-  <img src="https://github.com/eosphoros-ai/GPT-Vis/assets/17919400/c8804ffb-d3d6-45d3-846f-cf217681ab05" height=70">
-</div>
-
-<h1 align="center">GPT-Vis</h1>
-
-<div align="center">
-
-GPTs、生成AI、およびLLMプロジェクトのためのコンポーネント。**UIコンポーネントだけではありません**。[MCP](https://github.com/antvis/mcp-server-chart) の方法で使用する。
-
-<p align="center">
-  <a href="https://gpt-vis.antv.vision" target="_blank">ドキュメント</a> •
-  <a href="/knowledges" target="_blank">知識</a> •
-  <a href="https://www.tbox.cn/share/202504APmv6c00373739?platform=WebService" target="_blank">エージェントデモ</a> •
-  <a href="https://github.com/antvis/mcp-server-chart" target="_blank">MCP Server</a>
-</p>
-</div>
-
-<div align="center">
-  <video src="https://github.com/user-attachments/assets/b8eb4a89-b0ed-4a39-8fab-316161949446" />
-</div>
-
-## ✨ 特徴
-
-- 🤖 **LLMプロトコル**: LLMエージェントカードのための視覚的プロトコルで、LLMの対話型インタラクションとサービスのシリアライズされた出力のために設計されており、AIアプリケーションへの迅速な統合を容易にします。
-- 🍡 **LLMコンポーネント**: LLMアプリケーションのために開発されたコンポーネントで、20以上の一般的なVISコンポーネントが組み込まれており、カスタマイズされたUI要件のための便利な拡張メカニズムとアーキテクチャ設計を提供します。
-- 📈 **LLMアクセス**: チャート知識ベースとチャート推奨モデルをシームレスにLLMにアクセスし、LLMのために視覚カードを直接出力し、エージェントのための知識ベースと推奨モデルソリューションを提供します。
-
-## 📦 インストール
-
-```bash
-$ npm i @antv/gpt-vis --save
-```
-
-## 🔨 使用方法
-
-```jsx
-import { GPTVis } from '@antv/gpt-vis';
-
-const markdownContent = `
-# GPT-VIS \n\nGPTs、生成AI、およびLLMプロジェクトのためのコンポーネント。UIコンポーネントだけではありません。
-
-ここに、2013年から2022年までのHaidilaoのフードデリバリー収益の視覚化があります。年々着実に増加しており、特に最近の年では顕著な*成長*が見られます。
-
-\`\`\`vis-chart
-{
-  "type": "line",
-  "data": [
-    { "time": "2013", "value": 59.3 },
-    { "time": "2014", "value": 64.4 },
-    { "time": "2015", "value": 68.9 },
-    { "time": "2016", "value": 74.4 },
-    { "time": "2017", "value": 82.7 },
-    { "time": "2018", "value": 91.9 },
-    { "time": "2019", "value": 99.1 },
-    { "time": "2020", "value": 101.6 },
-    { "time": "2021", "value": 114.4 },
-    { "time": "2022", "value": 121 }
-  ]
-}
-\`\`\`
-`;
-
-export default () => {
-  return <GPTVis>{markdownContent}</GPTVis>;
-};
-```
-
-<details>
-<summary>🛠 レンダラーUIのカスタマイズ</summary>
-
-```jsx
-import { GPTVisLite, withChartCode, ChartType, Pie } from '@antv/gpt-vis';
-
-const markdownContent = `
-\`\`\`my-ui
-my data
-\`\`\`
-
-\`\`\`vis-chart
-{
-  "type": "pie",
-  "data": [
-    { "category": "カテゴリ1", "value": 27 },
-    { "category": "カテゴリ2", "value": 25 },
-    { "category": "カテゴリ3", "value": 18 },
-    { "category": "その他", "value": 5 }
-  ]
-}
-\`\`\`
-`;
-
-const customRenderers = { 'my-ui': ({ children }) => <div>{children}</div> };
-const components = {
-  code: withChartCode({
-    languageRenderers: customRenderers, // カスタムブロックレンダラーを登録
-    components: { [ChartType.Pie]: Pie }, // パイチャートを登録
-  }),
-};
-
-export default () => {
-  return <GPTVisLite components={components}>{markdownContent}</GPTVisLite>;
-};
-```
-
-</details>
-
-## 🐍 Streamlit
-
-```python
-import streamlit as st
-from streamlit_gpt_vis import set_gpt_vis
-
-content = '''
-ここに、2013年から2022年までのHaidilaoのフードデリバリー収益の視覚化があります。年々着実に増加しており、特に最近の年では顕著な*成長*が見られます。
-
-\`\`\`vis-chart
-{"type": "line","data": [{"time":2013,"value":59.3},{"time":2014,"value":64.4},{"time":2015,"value":68.9},{"time":2016,"value":74.4},{"time":2017,"value":82.7},{"time":2018,"value":91.9},{"time":2019,"value":99.1},{"time":2020,"value":101.6},{"time":2021,"value":114.4},{"time":2022,"value":121}]}
-\`\`\`
-'''
-
-set_gpt_vis(content)
-```
-
-詳細はこちら 👉 [streamlit-gpt-vis](https://github.com/antvis/GPT-Vis/tree/main/bindings/streamlit-gpt-vis)
-
-## ビジュアル知識
-
-[ビジュアル知識ベース](https://github.com/antvis/GPT-Vis/tree/main/knowledges)の目的は、エージェントがさまざまなデータ可視化チャートを理解、選択、作成するのを支援するための包括的かつ体系的なリソースを提供することです。以下は、RAGを通じて評価データセットに基づいて正確なチャートプロトコルを生成するためのメトリクスです。
-
-|               |                         |                      |               |                      |                 |         |
-| ------------- | ----------------------- | -------------------- | ------------- | -------------------- | --------------- | ------- |
-| Line(Multi)   | Column(Grouped/Stacked) | Pie                  | Area(Stacked) | Bar(Grouped/Stacked) | Scatter(Bubble) | Heatmap |
-| 40/40         | 25/27                   | 13/14                | 18/18         | 18/20                | 10/10           | 9/10    |
-| Histogram     | Tree Map                | Word Cloud           | Radar         | Dual Axis            | Rich Text NTV   | Pin Map |
-| 15/16         | 13/15                   | 11/12                | 23/23         | 13/14                | 7.3/10          | 10/11   |
-| Network Graph | Mind Map                | Organizational Chart | Flow Diagram  | Fishbone Diagram     |                 |         |
-| 8/10          | 12/14                   | 10/12                | 10/11         | 10/12                |                 |         |
-|               |                         |                      |               |                      |                 |         |
-
-注: X/Y形式の数字は、データセットに対して評価されたときのそれぞれのチャートタイプのメトリクスを表しています。
-
-## 🤖 チャート推奨データセット
-
-チャート推奨データセットは、与えられたデータに基づいてチャートタイプを推奨する能力を評価または微調整するために設計されています。データセットは現在、16種類のチャートをカバーしており、各チャートタイプには1〜3の異なるデータシナリオがあり、各シナリオには15以上のチャートデータインスタンスがあります。データセットは継続的に更新されており、使用ケースから収集したチャートデータの提供を歓迎します。データセットの詳細については、[evaluations/recommend](https://github.com/antvis/GPT-Vis/blob/main/evaluations/datastes/recommend/README.en.md)をご覧ください。
-
-## 💻 開発
-
-```bash
-# 依存関係をインストール
-$ pnpm install
-
-# ドキュメントデモでライブラリを開発
-$ pnpm dev
-
-# ライブラリのソースコードをビルド
-$ pnpm build
-```
-
-## ライセンス
-
-[MIT](./LICENSE)

package/dist/cjs/Area/index.d.ts

@@ -1,11 +0,0 @@
-import type { AreaConfig } from '@ant-design/plots';
-import React from 'react';
-import type { BasePlotProps, Style, Theme } from '../types';
-type AreaDataItem = {
-    time: string | number;
-    value: number;
-    [key: string]: string | number;
-};
-export type AreaProps = BasePlotProps<AreaDataItem> & Partial<AreaConfig> & Theme & Style;
-declare const Area: (props: AreaProps) => React.JSX.Element;
-export default Area;