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

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

@@ -0,0 +1,137 @@
+# 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

@@ -0,0 +1,137 @@
+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

@@ -0,0 +1,159 @@
+# 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

@@ -0,0 +1,35 @@
+/**
+ * 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>`;
+}