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

package/src/vis/treemap/index.ts

@@ -1,167 +0,0 @@
-import { Chart } from '@antv/g2';
-import type { VisualizationOptions } from '../../types';
-import { getBackgroundColor, getThemeColors, getThemeObject } from '../../util/theme';
-
-/**
- * TreemapDataItem is the type for each data item in the treemap chart.
- */
-export type TreemapDataItem = {
-  name: string;
-  value: number;
-  children?: TreemapDataItem[];
-};
-
-/**
- * TreemapConfig defines the configuration for rendering the treemap chart.
- */
-export interface TreemapConfig {
-  type?: 'treemap';
-  data: TreemapDataItem[];
-  theme?: 'default' | 'academy' | 'dark';
-  title?: string;
-  style?: {
-    backgroundColor?: string;
-    palette?: string[];
-  };
-}
-
-/**
- * TreemapInstance represents a treemap chart instance with render and destroy methods.
- */
-export interface TreemapInstance {
-  render: (config: TreemapConfig) => void;
-  destroy: () => void;
-}
-
-/**
- * Treemap chart component using G2 5.0.
- *
- * @example
- * ```ts
- * const treemap = Treemap({
- *   container: '#container',
- *   width: 600,
- *   height: 400,
- * });
- *
- * treemap.render({
- *   type: 'treemap',
- *   data: [
- *     {
- *       name: 'A',
- *       value: 100,
- *       children: [
- *         { name: 'A1', value: 40 },
- *         { name: 'A2', value: 30 },
- *         { name: 'A3', value: 30 },
- *       ],
- *     },
- *     {
- *       name: 'B',
- *       value: 80,
- *       children: [
- *         { name: 'B1', value: 50 },
- *         { name: 'B2', value: 30 },
- *       ],
- *     },
- *   ],
- *   theme: 'academy'
- * });
- *
- * treemap.destroy();
- * ```
- */
-export const Treemap = (options: VisualizationOptions): TreemapInstance => {
-  const { container, width, height, theme: chartTheme = 'default' } = options;
-  let chart: Chart | null = null;
-
-  /**
-   * Render the treemap chart with the given configuration.
-   */
-  const render = (config: TreemapConfig): 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: 'treemap',
-      data: {
-        type: 'inline',
-        value: {
-          name: 'root',
-          children: data,
-        },
-      },
-      title: title ?? '',
-      layout: {
-        tile: 'treemapBinary',
-        paddingInner: 2,
-      },
-      encode: {
-        value: 'value',
-      },
-      style: {
-        fillOpacity: 0.8,
-        labelFontSize: 10,
-      },
-      legend: false,
-      tooltip: {
-        items: [
-          (d: any) => ({
-            name: d.data?.name || d.name,
-            value: d.data?.value || d.value,
-          }),
-        ],
-      },
-      viewStyle: {
-        viewFill: backgroundColor,
-      },
-      theme: getThemeObject(theme),
-      scale: {
-        ...(colors.length > 0
-          ? {
-              color: {
-                range: colors,
-              },
-            }
-          : {}),
-      },
-    };
-
-    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/venn/README.md

@@ -1,153 +0,0 @@
-# Venn
-
-A venn chart component for visualizing set relationships, intersections, and unions, built with G2 5.0.
-
-## Usage
-
-```ts
-import { Venn } from '@antv/gpt-vis/ai';
-
-const venn = Venn({
-  container: '#container',
-  width: 600,
-  height: 400,
-});
-
-venn.render({
-  data: [
-    { sets: ['A'], value: 20, label: '集合A' },
-    { sets: ['B'], value: 15, label: '集合B' },
-    { sets: ['A', 'B'], value: 5, label: '交集AB' },
-  ],
-});
-
-venn.destroy();
-```
-
-## Configuration
-
-### Constructor Options (VennOptions)
-
-| 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 (VennConfig)
-
-| Property | Type   | Default   | Description                                   |
-| -------- | ------ | --------- | --------------------------------------------- |
-| data     | Array  | -         | Chart data array                              |
-| theme    | string | 'default' | Color theme: 'default' \| 'academy' \| 'dark' |
-| title    | string | -         | Chart title                                   |
-| style    | object | -         | Chart style configuration                     |
-
-### Data Structure
-
-```ts
-type VennDataItem = {
-  sets: string[]; // Set identifiers (single set or intersection)
-  value: number; // Set or intersection size
-  label?: string; // Optional label for the set or intersection
-};
-```
-
-### Style Options
-
-```ts
-style?: {
-  backgroundColor?: string;  // Background color
-  palette?: string[];        // Color palette
-}
-```
-
-## Examples
-
-### Basic Example (Two Sets)
-
-```ts
-venn.render({
-  data: [
-    { sets: ['A'], value: 20, label: '集合A' },
-    { sets: ['B'], value: 15, label: '集合B' },
-    { sets: ['A', 'B'], value: 5, label: '交集AB' },
-  ],
-  title: '集合交集示例',
-});
-```
-
-### Three Sets with Intersections
-
-```ts
-venn.render({
-  data: [
-    { sets: ['A'], value: 10, label: '集合A' },
-    { sets: ['B'], value: 8, label: '集合B' },
-    { sets: ['C'], value: 6, label: '集合C' },
-    { sets: ['A', 'B'], value: 4 },
-    { sets: ['A', 'C'], value: 2 },
-    { sets: ['B', 'C'], value: 1 },
-    { sets: ['A', 'B', 'C'], value: 1 },
-  ],
-  title: '三集合关系',
-});
-```
-
-### With Academy Theme
-
-```ts
-venn.render({
-  data: [
-    { sets: ['A'], value: 10, label: '集合A' },
-    { sets: ['B'], value: 8, label: '集合B' },
-    { sets: ['C'], value: 6, label: '集合C' },
-    { sets: ['A', 'B'], value: 4 },
-    { sets: ['A', 'C'], value: 2 },
-    { sets: ['B', 'C'], value: 1 },
-    { sets: ['A', 'B', 'C'], value: 1 },
-  ],
-  title: '三集合关系',
-  theme: 'academy',
-});
-```
-
-### With Dark Theme
-
-```ts
-venn.render({
-  data: [
-    { sets: ['A'], value: 10, label: '集合A' },
-    { sets: ['B'], value: 8, label: '集合B' },
-    { sets: ['C'], value: 6, label: '集合C' },
-    { sets: ['A', 'B'], value: 4 },
-    { sets: ['A', 'C'], value: 2 },
-    { sets: ['B', 'C'], value: 1 },
-    { sets: ['A', 'B', 'C'], value: 1 },
-  ],
-  title: '三集合关系',
-  theme: 'dark',
-});
-```
-
-### With Custom Styles
-
-```ts
-venn.render({
-  data: [
-    { sets: ['A'], value: 30, label: '购买手机' },
-    { sets: ['B'], value: 25, label: '购买耳机' },
-    { sets: ['A', 'B'], value: 10 },
-  ],
-  title: '标签交集',
-  style: {
-    palette: ['#FFB6C1', '#87CEFA'],
-    backgroundColor: '#F8F8FF',
-  },
-});
-```
-
-## Methods
-
-- `render(config: VennConfig): void` - Render or update the chart
-- `destroy(): void` - Destroy the chart instance and clean up resources

package/src/vis/venn/index.ts

@@ -1,149 +0,0 @@
-import { Chart } from '@antv/g2';
-import type { VisualizationOptions } from '../../types';
-import { getBackgroundColor, getThemeColors, getThemeObject } from '../../util/theme';
-
-/**
- * VennDataItem is the type for each data item in the venn chart.
- */
-export type VennDataItem = {
-  sets: string[];
-  value: number;
-  label?: string;
-};
-
-/**
- * VennConfig defines the configuration for rendering the venn chart.
- */
-export interface VennConfig {
-  type?: 'venn';
-  data: VennDataItem[];
-  theme?: 'default' | 'academy' | 'dark';
-  title?: string;
-  style?: {
-    backgroundColor?: string;
-    palette?: string[];
-  };
-}
-
-/**
- * VennInstance represents a venn chart instance with render and destroy methods.
- */
-export interface VennInstance {
-  render: (config: VennConfig) => void;
-  destroy: () => void;
-}
-
-/**
- * Venn chart component using G2 5.0.
- *
- * @example
- * ```ts
- * const venn = Venn({
- *   container: '#container',
- *   width: 600,
- *   height: 400,
- * });
- *
- * venn.render({
- *   type: 'venn',
- *   data: [
- *     { sets: ['A'], value: 20, label: '集合A' },
- *     { sets: ['B'], value: 15, label: '集合B' },
- *     { sets: ['A', 'B'], value: 5, label: '交集AB' },
- *   ],
- *   theme: 'academy'
- * });
- *
- * venn.destroy();
- * ```
- */
-export const Venn = (options: VisualizationOptions): VennInstance => {
-  const { container, width, height, theme: chartTheme = 'default' } = options;
-  let chart: Chart | null = null;
-
-  /**
-   * Render the venn chart with the given configuration.
-   */
-  const render = (config: VennConfig): 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: 'path',
-      data: {
-        value: data,
-        transform: [
-          {
-            type: 'venn',
-            padding: 8,
-            sets: 'sets',
-            size: 'value',
-            as: ['key', 'path'],
-          },
-        ],
-      },
-      title: title ?? '',
-      encode: { d: 'path', color: 'key' },
-      scale: {
-        color: { range: colors },
-      },
-      style: {
-        // Set opacity: intersections (sets.length > 1) are nearly transparent, single sets are more opaque
-        opacity: (d: VennDataItem) => (d.sets.length > 1 ? 0.001 : 0.65),
-      },
-      labels: [
-        {
-          position: 'inside',
-          text: (d: VennDataItem) => d.label || '',
-          fill: '#000',
-          fillOpacity: 0.85,
-          fontSize: 10,
-        },
-      ],
-      viewStyle: {
-        viewFill: backgroundColor,
-      },
-      theme: getThemeObject(theme),
-      legend: false,
-      axis: false,
-      tooltip: false,
-    };
-
-    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/violin/README.md

@@ -1,168 +0,0 @@
-# Violin
-
-A violin plot component for displaying statistical distribution and probability density, built with G2 5.0.
-
-## Usage
-
-```ts
-import { Violin } from '@antv/gpt-vis/ai';
-
-const violin = Violin({
-  container: '#container',
-  width: 600,
-  height: 400,
-});
-
-violin.render({
-  data: [
-    { category: '班级A', value: 15 },
-    { category: '班级A', value: 18 },
-    { category: '班级A', value: 22 },
-    { category: '班级A', value: 27 },
-    { category: '班级A', value: 35 },
-    { category: '班级B', value: 10 },
-    { category: '班级B', value: 14 },
-    { category: '班级B', value: 19 },
-    { category: '班级B', value: 23 },
-    { category: '班级B', value: 30 },
-  ],
-});
-
-violin.destroy();
-```
-
-## Configuration
-
-### Constructor Options (ViolinOptions)
-
-| 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 (ViolinConfig)
-
-| Property   | Type   | Default   | Description               |
-| ---------- | ------ | --------- | ------------------------- |
-| data       | Array  | -         | Chart data array          |
-| theme      | string | 'default' | Color theme               |
-| title      | string | -         | Chart title               |
-| axisXTitle | string | -         | X-axis title              |
-| axisYTitle | string | -         | Y-axis title              |
-| style      | object | -         | Chart style configuration |
-
-### Data Structure
-
-```ts
-type ViolinDataItem = {
-  category: string; // Category name (required)
-  value: number; // Data value (required)
-  group?: string; // Group name for grouped violin plots (optional)
-};
-```
-
-### Style Options
-
-```ts
-style?: {
-  backgroundColor?: string;  // Background color
-  palette?: string[];        // Color palette
-  startAtZero?: boolean;     // Whether Y-axis starts at zero
-}
-```
-
-## Examples
-
-### Basic Example
-
-```ts
-violin.render({
-  data: [
-    { category: '班级A', value: 15 },
-    { category: '班级A', value: 18 },
-    { category: '班级A', value: 22 },
-    { category: '班级A', value: 27 },
-    { category: '班级A', value: 35 },
-    { category: '班级B', value: 10 },
-    { category: '班级B', value: 14 },
-    { category: '班级B', value: 19 },
-    { category: '班级B', value: 23 },
-    { category: '班级B', value: 30 },
-  ],
-  title: '成绩分布',
-});
-```
-
-### With Theme
-
-```ts
-violin.render({
-  data: [
-    { category: '实验组1', value: 12 },
-    { category: '实验组1', value: 15 },
-    { category: '实验组1', value: 20 },
-    { category: '实验组1', value: 25 },
-    { category: '实验组1', value: 30 },
-  ],
-  theme: 'academy',
-  title: '实验数据分布',
-});
-```
-
-### With Custom Styles
-
-```ts
-violin.render({
-  data: [
-    { category: '股票A', value: 50 },
-    { category: '股票A', value: 55 },
-    { category: '股票A', value: 60 },
-    { category: '股票A', value: 65 },
-    { category: '股票A', value: 70 },
-  ],
-  title: '金融数据分布',
-  style: {
-    palette: ['#FF9800', '#2196F3', '#F5F5F5'],
-    backgroundColor: '#333333',
-  },
-});
-```
-
-### Grouped Violin Plot
-
-```ts
-violin.render({
-  data: [
-    { group: 'I. setosa', category: 'PetalWidth', value: 0.2 },
-    { group: 'I. setosa', category: 'PetalLength', value: 1.4 },
-    { group: 'I. setosa', category: 'SepalWidth', value: 3.5 },
-    { group: 'I. setosa', category: 'SepalLength', value: 5.1 },
-    { group: 'I. versicolor', category: 'PetalWidth', value: 1.4 },
-    { group: 'I. versicolor', category: 'PetalLength', value: 4.7 },
-    { group: 'I. versicolor', category: 'SepalWidth', value: 3.2 },
-    { group: 'I. versicolor', category: 'SepalLength', value: 7.0 },
-  ],
-  title: '不同品种的鸢尾花特征分布',
-});
-```
-
-### Start at Zero
-
-```ts
-violin.render({
-  data: [
-    { category: '班级A', value: 15 },
-    { category: '班级A', value: 18 },
-    { category: '班级A', value: 22 },
-  ],
-  style: {
-    startAtZero: true,
-  },
-});
-```
-
-## Methods
-
-- `render(config: ViolinConfig): void` - Render or update the chart
-- `destroy(): void` - Destroy the chart instance and clean up resources