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

package/src/vis/word-cloud/README.md

@@ -1,137 +0,0 @@
-# WordCloud
-
-A word cloud chart component for visualizing word frequency or importance, built with G2 5.0.
-
-## Usage
-
-```ts
-import { WordCloud } from '@antv/gpt-vis/ai';
-
-const wordCloud = WordCloud({
-  container: '#container',
-  width: 600,
-  height: 400,
-});
-
-wordCloud.render({
-  data: [
-    { text: '环境', value: 20 },
-    { text: '保护', value: 15 },
-    { text: '可持续发展', value: 10 },
-  ],
-});
-
-wordCloud.destroy();
-```
-
-## Configuration
-
-### Constructor Options (WordCloudOptions)
-
-| Property  | Type                  | Default | Description                   |
-| --------- | --------------------- | ------- | ----------------------------- |
-| container | string \| HTMLElement | -       | Container element or selector |
-| width     | number                | 640     | Chart width in pixels         |
-| height    | number                | 480     | Chart height in pixels        |
-
-### Render Config (WordCloudConfig)
-
-| Property | Type   | Default   | Description               |
-| -------- | ------ | --------- | ------------------------- |
-| data     | Array  | -         | Chart data array          |
-| theme    | string | 'default' | Color theme               |
-| title    | string | -         | Chart title               |
-| style    | object | -         | Chart style configuration |
-
-### Data Structure
-
-```ts
-type WordCloudDataItem = {
-  text: string; // The word to display
-  value: number; // The importance/frequency score
-};
-```
-
-### Style Options
-
-```ts
-style?: {
-  backgroundColor?: string;  // Background color
-  palette?: string[];        // Color palette
-}
-```
-
-## Examples
-
-### Basic Example
-
-```ts
-wordCloud.render({
-  data: [
-    { text: '数据', value: 50 },
-    { text: '分析', value: 40 },
-    { text: '结果', value: 30 },
-  ],
-});
-```
-
-### With Theme
-
-```ts
-wordCloud.render({
-  data: [
-    { text: '环境', value: 20 },
-    { text: '保护', value: 15 },
-    { text: '可持续发展', value: 10 },
-  ],
-  theme: 'academy',
-});
-```
-
-### With Custom Styles
-
-```ts
-wordCloud.render({
-  data: [
-    { text: '质量好', value: 30 },
-    { text: '价格合理', value: 20 },
-    { text: '服务差', value: 5 },
-  ],
-  style: {
-    palette: ['#FF6B6B', '#4ECDC4', '#45B7D1'],
-  },
-});
-```
-
-### With Title
-
-```ts
-wordCloud.render({
-  data: [
-    { text: '环保', value: 10 },
-    { text: '气候变化', value: 8 },
-    { text: '可再生能源', value: 6 },
-    { text: '碳排放', value: 5 },
-    { text: '绿色生活', value: 4 },
-  ],
-  title: '环保关键词',
-});
-```
-
-### Dark Theme
-
-```ts
-wordCloud.render({
-  data: [
-    { text: '环境', value: 20 },
-    { text: '保护', value: 15 },
-    { text: '可持续发展', value: 10 },
-  ],
-  theme: 'dark',
-});
-```
-
-## Methods
-
-- `render(config: WordCloudConfig): void` - Render or update the chart
-- `destroy(): void` - Destroy the chart instance and clean up resources

package/src/vis/word-cloud/index.ts

@@ -1,137 +0,0 @@
-import { Chart } from '@antv/g2';
-import type { VisualizationOptions } from '../../types';
-import { getBackgroundColor, getThemeColors, getThemeObject } from '../../util/theme';
-
-/**
- * WordCloudDataItem is the type for each data item in the word cloud chart.
- */
-export type WordCloudDataItem = {
-  text: string;
-  value: number;
-};
-
-/**
- * WordCloudConfig defines the configuration for rendering the word cloud chart.
- */
-export interface WordCloudConfig {
-  type?: 'word-cloud';
-  data: WordCloudDataItem[];
-  theme?: 'default' | 'academy' | 'dark';
-  title?: string;
-  style?: {
-    backgroundColor?: string;
-    palette?: string[];
-  };
-}
-
-/**
- * WordCloudInstance represents a word cloud chart instance with render and destroy methods.
- */
-export interface WordCloudInstance {
-  render: (config: WordCloudConfig) => void;
-  destroy: () => void;
-}
-
-/**
- * WordCloud chart component using G2 5.0.
- *
- * @example
- * ```ts
- * const wordCloud = WordCloud({
- *   container: '#container',
- *   width: 600,
- *   height: 400,
- * });
- *
- * wordCloud.render({
- *   type: 'word-cloud',
- *   data: [
- *     { text: '环境', value: 20 },
- *     { text: '保护', value: 15 },
- *     { text: '可持续发展', value: 10 },
- *   ],
- *   theme: 'academy'
- * });
- *
- * wordCloud.destroy();
- * ```
- */
-export const WordCloud = (options: VisualizationOptions): WordCloudInstance => {
-  const { container, width, height, theme: chartTheme = 'default' } = options;
-  let chart: Chart | null = null;
-
-  /**
-   * Render the word cloud chart with the given configuration.
-   */
-  const render = (config: WordCloudConfig): void => {
-    const { data = [], theme = chartTheme, title, style = {} } = config;
-
-    // Clean up previous chart if exists
-    if (chart) {
-      chart.destroy();
-    }
-
-    // Get colors from style.palette or theme defaults
-    const colors = style.palette || getThemeColors(theme);
-    const backgroundColor = style.backgroundColor || getBackgroundColor(theme);
-
-    // Create chart
-    chart = new Chart({
-      container,
-      width,
-      height,
-      autoFit: true,
-    });
-
-    // Configure chart 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
-    const chartOptions: any = {
-      type: 'wordCloud',
-      data,
-      title: title ?? '',
-      layout: {
-        fontSize: [8, 42],
-      },
-      encode: {
-        text: 'text',
-        color: 'text',
-        value: 'value',
-      },
-      scale: {
-        color: { range: colors },
-      },
-      legend: false,
-      tooltip: {
-        items: [
-          (d: any) => ({
-            name: d.text,
-            value: d.value,
-          }),
-        ],
-      },
-      viewStyle: {
-        viewFill: backgroundColor,
-      },
-      theme: getThemeObject(theme),
-    };
-
-    chart.options(chartOptions);
-    chart.render();
-  };
-
-  /**
-   * Destroy the chart instance and clean up resources.
-   */
-  const destroy = (): void => {
-    if (chart) {
-      chart.destroy();
-      chart = null;
-    }
-  };
-
-  return {
-    render,
-    destroy,
-  };
-};

package/src/vis-wrapper/README.md

@@ -1,159 +0,0 @@
-# GPT-Vis Wrapper Feature
-
-## Overview
-
-The wrapper feature adds an outer container to GPTVis charts with built-in UI controls for enhanced user interaction. When enabled, charts are displayed with tabs, buttons, and additional functionality.
-
-## Features
-
-### Chart Tab
-
-- **Download Chart**: Export the chart as a PNG image
-- **Zoom Controls** (for G6 charts only):
-  - Zoom in/out buttons for charts like mind-map, network-graph, flow-diagram, organization-chart, indented-tree, and fishbone-diagram
-
-### Code Tab
-
-- **View Configuration**: Switch to code view to see the JSON configuration of the chart
-- **Copy Code**: Copy the chart configuration to clipboard with one click
-
-## Usage
-
-### Basic Example
-
-```typescript
-import { GPTVis } from '@antv/gpt-vis';
-
-// Create a GPTVis instance with wrapper enabled
-const g = new GPTVis({
-  container: '#container',
-  width: 600,
-  height: 400,
-  wrapper: true, // Enable the wrapper (default: false)
-});
-
-// Render a chart
-g.render({
-  type: 'pie',
-  data: [
-    { category: '分类一', value: 27 },
-    { category: '分类二', value: 25 },
-    { category: '分类三', value: 18 },
-  ],
-  innerRadius: 0.6,
-  theme: 'academy',
-});
-
-// Clean up when done
-g.destroy();
-```
-
-### Without Wrapper (Default)
-
-```typescript
-const g = new GPTVis({
-  container: '#container',
-  width: 600,
-  height: 400,
-  wrapper: false, // Or omit this option (default is false)
-});
-```
-
-### With G6 Charts (Zoom Controls)
-
-For G6-based charts (mind-map, network-graph, flow-diagram, etc.), the wrapper automatically displays zoom in/out buttons:
-
-```typescript
-const g = new GPTVis({
-  container: '#container',
-  width: 600,
-  height: 400,
-  wrapper: true,
-});
-
-g.render({
-  type: 'mind-map',
-  data: {
-    name: '项目管理',
-    children: [
-      {
-        name: '计划阶段',
-        children: [{ name: '需求分析' }, { name: '资源规划' }],
-      },
-      {
-        name: '执行阶段',
-        children: [{ name: '任务分配' }, { name: '进度跟踪' }],
-      },
-    ],
-  },
-  theme: 'default',
-});
-```
-
-## Implementation Details
-
-### Architecture
-
-1. **VisualizationOptions Interface**: Added `wrapper?: boolean` option (default: false)
-2. **createVisWrapper Function**: Creates the wrapper HTML structure with tabs and controls
-3. **GPTVis Integration**: When `wrapper: true`, the GPTVis class creates a wrapper container and renders the chart inside it
-
-### Wrapper Components
-
-- **Tab Header**: Contains chart/code tabs and action buttons
-- **Tab Content**: Displays either the chart or the JSON configuration
-- **Chart Container**: The actual chart rendering area
-- **Code Container**: Shows formatted JSON with syntax highlighting
-
-### Styling
-
-The wrapper uses inline styles injected via a `<style>` tag to ensure no conflicts with existing styles. The design follows the reference from the original React component.
-
-## Supported Chart Types with Zoom
-
-The following chart types support zoom controls when wrapper is enabled:
-
-- mind-map (思维导图)
-- fishbone-diagram (鱼骨图)
-- flow-diagram (流程图)
-- organization-chart (组织架构图)
-- network-graph (网络图)
-- indented-tree (缩进树)
-
-## Browser Compatibility
-
-The wrapper feature requires:
-
-- Modern browser with ES6+ support
-- `navigator.clipboard` API for copy functionality
-- `snapdom` library for chart image export
-
-## API Reference
-
-### VisualizationOptions
-
-```typescript
-interface VisualizationOptions {
-  container: string | HTMLElement; // Container selector or element
-  width?: number; // Chart width
-  height?: number; // Chart height
-  wrapper?: boolean; // Enable wrapper (default: false)
-}
-```
-
-### GPTVis Methods
-
-```typescript
-class GPTVis {
-  constructor(options: VisualizationOptions);
-  render(config: GPTVisConfig): void;
-  destroy(): void;
-}
-```
-
-## Notes
-
-- The wrapper is disabled by default (`wrapper: false`) to maintain backward compatibility
-- Only affects the `GPTVis` unified API, not individual chart components
-- Wrapper styles are automatically injected when the wrapper is first created
-- Multiple GPTVis instances can use wrappers independently

package/src/vis-wrapper/icons.ts

@@ -1,35 +0,0 @@
-/**
- * Create SVG icon elements for the wrapper UI
- */
-
-export function createCopyIcon(size = 14, fill = '#707070'): string {
-  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="M768 682.666667V170.666667a85.333333 85.333333 0 0 0-85.333333-85.333334H170.666667a85.333333 85.333333 0 0 0-85.333334 85.333334v512a85.333333 85.333333 0 0 0 85.333334 85.333333h512a85.333333 85.333333 0 0 0 85.333333-85.333333zM170.666667 170.666667h512v512H170.666667z m682.666666 85.333333v512a85.333333 85.333333 0 0 1-85.333333 85.333333H256a85.333333 85.333333 0 0 0 85.333333 85.333334h426.666667a170.666667 170.666667 0 0 0 170.666667-170.666667V341.333333a85.333333 85.333333 0 0 0-85.333334-85.333333z"></path>
-  </svg>`;
-}
-
-export function createCheckIcon(size = 14, fill = '#707070'): string {
-  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="M380.416 822.144c-10.432 0-20.864-3.968-28.8-11.968L75.968 534.592c-15.936-15.936-15.936-41.664 0-57.6 15.872-15.872 41.664-15.872 57.536 0L380.416 723.84l510.08-510.016c15.872-15.936 41.664-15.936 57.536 0 15.936 15.936 15.936 41.664 0 57.6L409.216 810.24c-7.936 7.936-18.368 11.904-28.8 11.904z"></path>
-  </svg>`;
-}
-
-export function createDownloadIcon(size = 14, fill = '#707070'): string {
-  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="M512 165.93q13.645 0 23.31 9.666t9.665 23.31V580.77L653.37 472.103q9.517-9.517 23.434-9.517 14.164 0 23.558 9.394t9.393 23.557q0 13.917-9.517 23.434L535.434 683.774q-9.517 9.517-23.434 9.517t-23.434-9.517L323.763 518.971q-9.517-10.036-9.517-23.434 0-13.645 9.665-23.31t23.31-9.665q13.917 0 23.434 9.516L479.05 580.744V198.881q0-13.645 9.665-23.31t23.31-9.665z m329.582 461.435q13.645 0 23.31 9.665t9.665 23.31v131.828q0 41.207-28.575 69.782-29.095 29.095-69.536 29.095H248.32q-40.416 0-70.03-28.848-28.847-29.613-28.847-70.03V660.34q0-13.645 9.665-23.31t23.31-9.665 23.31 9.665 9.666 23.31v131.828q0 13.645 9.665 23.31t23.31 9.665h528.127q13.398 0 22.791-9.665t9.393-23.31V660.34q0-13.645 9.666-23.31t23.31-9.665z"></path>
-  </svg>`;
-}
-
-export function createZoomInIcon(size = 18, fill = '#707070'): string {
-  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>
-  </svg>`;
-}
-
-export function createZoomOutIcon(size = 18, fill = '#707070'): string {
-  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>
-  </svg>`;
-}