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

package/src/vis/line/index.ts

@@ -1,159 +0,0 @@
-import { Chart } from '@antv/g2';
-import type { VisualizationOptions } from '../../types';
-import { getBackgroundColor, getThemeColors, getThemeObject } from '../../util/theme';
-
-/**
- * LineDataItem is the type for each data item in the line chart.
- */
-export type LineDataItem = {
-  time: string | number;
-  value: number;
-  group?: string;
-};
-
-/**
- * LineConfig defines the configuration for rendering the line chart.
- */
-export interface LineConfig {
-  type?: 'line';
-  data: LineDataItem[];
-  title?: string;
-  axisXTitle?: string;
-  axisYTitle?: string;
-  theme?: 'default' | 'academy' | 'dark';
-  style?: {
-    backgroundColor?: string;
-    palette?: string[];
-    lineWidth?: number;
-  };
-}
-
-/**
- * LineInstance represents a line chart instance with render and destroy methods.
- */
-export interface LineInstance {
-  render: (config: LineConfig) => void;
-  destroy: () => void;
-}
-
-/**
- * Line chart component using G2 5.0.
- *
- * @example
- * ```ts
- * const line = Line({
- *   container: '#container',
- *   width: 600,
- *   height: 400,
- * });
- *
- * line.render({
- *   type: 'line',
- *   data: [
- *     { time: '2015 年', value: 1700 },
- *     { time: '2016 年', value: 1500 },
- *     { time: '2017 年', value: 1200 },
- *   ],
- *   title: '出生人口变化',
- *   axisXTitle: '年份',
- *   axisYTitle: '出生人口（万人）',
- * });
- *
- * line.destroy();
- * ```
- */
-export const Line = (options: VisualizationOptions): LineInstance => {
-  const { container, width, height, theme: chartTheme = 'default' } = options;
-  let chart: Chart | null = null;
-
-  /**
-   * Render the line chart with the given configuration.
-   */
-  const render = (config: LineConfig): void => {
-    const { data = [], theme = chartTheme, title, axisXTitle, axisYTitle, style = {} } = config;
-
-    // Clean up previous chart if exists
-    if (chart) {
-      chart.destroy();
-    }
-
-    const { lineWidth = 2 } = style;
-    const hasGroupField = data.length > 0 && data[0]?.group !== undefined;
-    const colors = style.palette || getThemeColors(theme);
-    const backgroundColor = style.backgroundColor || getBackgroundColor(theme);
-
-    // Create chart
-    chart = new Chart({
-      container,
-      width,
-      height,
-      autoFit: true,
-    });
-
-    // Configure chart encode based on whether there's a group field
-    let encode: any = {};
-    const scaleConfig: any = { y: { nice: true } };
-
-    if (hasGroupField) {
-      encode = { x: 'time', y: 'value', color: 'group' };
-      scaleConfig.color = { range: colors };
-    } else {
-      encode = { x: 'time', y: 'value' };
-    }
-
-    // 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: 'view',
-      data,
-      title: title ?? '',
-      encode,
-      children: [
-        {
-          type: 'line',
-          style: {
-            lineWidth,
-            ...(!hasGroupField && style.palette ? { stroke: colors[0] } : {}),
-          },
-        },
-      ],
-      scale: scaleConfig,
-      axis: {
-        x: { title: axisXTitle || false },
-        y: { title: axisYTitle || false },
-      },
-      legend: hasGroupField ? { color: { position: 'top' } } : false,
-      tooltip: {
-        items: [
-          (d: any) => ({
-            name: axisYTitle || d.time,
-            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/liquid/README.md

@@ -1,150 +0,0 @@
-# Liquid
-
-A liquid fill chart component for displaying progress, completion rates, or percentage values with a dynamic wave effect, built with G2 5.0.
-
-## Usage
-
-```ts
-import { Liquid } from '@antv/gpt-vis/ai';
-
-const liquid = Liquid({
-  container: '#container',
-  width: 600,
-  height: 400,
-});
-
-liquid.render({
-  percent: 0.75,
-});
-
-liquid.destroy();
-```
-
-## Configuration
-
-### Constructor Options (LiquidOptions)
-
-| 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 (LiquidConfig)
-
-| Property | Type   | Default   | Description                                      |
-| -------- | ------ | --------- | ------------------------------------------------ |
-| percent  | number | -         | Fill percentage (0-1), e.g., 0.75 for 75%        |
-| shape    | string | 'circle'  | Chart shape: 'circle', 'rect', 'pin', 'triangle' |
-| theme    | string | 'default' | Color theme: 'default', 'academy', 'dark'        |
-| title    | string | -         | Chart title                                      |
-| style    | object | -         | Chart style configuration                        |
-
-### Style Options
-
-```ts
-style?: {
-  backgroundColor?: string;  // Background color
-  palette?: string[];        // Color palette (uses first color for liquid fill)
-}
-```
-
-## Examples
-
-### Basic Example
-
-```ts
-const liquid = Liquid({
-  container: '#container',
-});
-
-liquid.render({
-  percent: 0.75,
-});
-```
-
-### With Title
-
-```ts
-liquid.render({
-  percent: 0.6,
-  title: 'Task Completion',
-});
-```
-
-### Different Shapes
-
-```ts
-// Circle (default)
-liquid.render({
-  percent: 0.75,
-  shape: 'circle',
-});
-
-// Rectangle
-liquid.render({
-  percent: 0.6,
-  shape: 'rect',
-});
-
-// Pin (water drop)
-liquid.render({
-  percent: 0.85,
-  shape: 'pin',
-});
-
-// Triangle
-liquid.render({
-  percent: 0.92,
-  shape: 'triangle',
-});
-```
-
-### With Themes
-
-```ts
-// Academy theme
-liquid.render({
-  percent: 0.75,
-  theme: 'academy',
-});
-
-// Dark theme
-liquid.render({
-  percent: 0.6,
-  theme: 'dark',
-});
-```
-
-### With Custom Styles
-
-```ts
-liquid.render({
-  percent: 0.92,
-  title: 'KPI Achievement',
-  shape: 'triangle',
-  style: {
-    palette: ['#00BFFF'],
-    backgroundColor: '#F0F0F0',
-  },
-});
-```
-
-## Methods
-
-- `render(config: LiquidConfig): void` - Render or update the chart with new configuration
-- `destroy(): void` - Destroy the chart instance and clean up resources
-
-## Use Cases
-
-- Display task completion rates
-- Show resource usage percentages
-- Visualize KPI achievement levels
-- Present single metric progress indicators
-
-## Notes
-
-- The `percent` value should be between 0 and 1 (e.g., 0.75 = 75%)
-- Font size is automatically calculated based on chart dimensions
-- The wave animation is disabled for consistent rendering
-- Custom palette colors only use the first color in the array

package/src/vis/liquid/index.ts

@@ -1,130 +0,0 @@
-import { Chart } from '@antv/g2';
-import type { VisualizationOptions } from '../../types';
-import { getBackgroundColor, getThemeColors, getThemeObject } from '../../util/theme';
-
-// Default dimensions used for font size calculation when not explicitly provided
-const DEFAULT_WIDTH = 640;
-const DEFAULT_HEIGHT = 480;
-
-/**
- * LiquidConfig defines the configuration for rendering the liquid chart.
- */
-export interface LiquidConfig {
-  type?: 'liquid';
-  percent: number;
-  shape?: 'rect' | 'circle' | 'pin' | 'triangle';
-  theme?: 'default' | 'academy' | 'dark';
-  title?: string;
-  style?: {
-    backgroundColor?: string;
-    palette?: string[];
-  };
-}
-
-/**
- * LiquidInstance represents a liquid chart instance with render and destroy methods.
- */
-export interface LiquidInstance {
-  render: (config: LiquidConfig) => void;
-  destroy: () => void;
-}
-
-/**
- * Liquid chart component using G2 5.0.
- *
- * @example
- * ```ts
- * const liquid = Liquid({
- *   container: '#container',
- *   width: 600,
- *   height: 400,
- * });
- *
- * liquid.render({
- *   type: 'liquid',
- *   percent: 0.75,
- *   shape: 'circle',
- *   theme: 'academy'
- * });
- *
- * liquid.destroy();
- * ```
- */
-export const Liquid = (options: VisualizationOptions): LiquidInstance => {
-  const { container, width, height, theme: chartTheme = 'default' } = options;
-  let chart: Chart | null = null;
-
-  /**
-   * Render the liquid chart with the given configuration.
-   */
-  const render = (config: LiquidConfig): void => {
-    const { percent, shape = 'circle', 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);
-
-    // Calculate dynamic font size based on chart dimensions
-    // Use default dimensions for font size calculation when not provided
-    const inferFontSize = Math.min(width ?? DEFAULT_WIDTH, height ?? DEFAULT_HEIGHT) / 10;
-    const fontSize = Math.min(Math.max(inferFontSize, 24), 64);
-
-    // 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: 'liquid',
-      data: percent,
-      title: title ?? '',
-      style: {
-        shape,
-        contentFontSize: fontSize,
-        contentFill: '#000',
-        contentStroke: '#fff',
-        contentLineWidth: 2,
-        outlineBorder: 4,
-        outlineDistance: 4,
-        waveLength: 128,
-        contentPointerEvents: 'none',
-        // Use palette color if provided
-        ...(colors[0] ? { fill: colors[0], outlineStroke: colors[0] } : {}),
-      },
-      viewStyle: {
-        viewFill: backgroundColor,
-      },
-      theme: getThemeObject(theme),
-      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/pie/README.md

@@ -1,127 +0,0 @@
-# Pie
-
-A pie chart component for displaying categorical data as slices of a circle, built with G2 5.0.
-
-## Usage
-
-```ts
-import { Pie } from '@antv/gpt-vis/ai';
-
-const pie = Pie({
-  container: '#container',
-  width: 600,
-  height: 400,
-});
-
-pie.render({
-  data: [
-    { category: '分类一', value: 27 },
-    { category: '分类二', value: 25 },
-    { category: '分类三', value: 18 },
-    { category: '分类四', value: 15 },
-    { category: '分类五', value: 10 },
-    { category: '其他', value: 5 },
-  ],
-});
-
-pie.destroy();
-```
-
-## Configuration
-
-### Constructor Options (PieOptions)
-
-| 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 (PieConfig)
-
-| Property    | Type                             | Default   | Description                        |
-| ----------- | -------------------------------- | --------- | ---------------------------------- |
-| data        | PieDataItem[]                    | -         | Chart data array                   |
-| innerRadius | number                           | 0         | Inner radius for donut chart (0-1) |
-| theme       | 'default' \| 'academy' \| 'dark' | 'default' | Color theme                        |
-| title       | string                           | -         | Chart title                        |
-| style       | object                           | -         | Chart style configuration          |
-
-### PieDataItem
-
-```ts
-type PieDataItem = {
-  category: string;
-  value: number;
-};
-```
-
-### Style Options
-
-```ts
-style?: {
-  backgroundColor?: string;  // Background color
-  palette?: string[];        // Color palette
-}
-```
-
-## Examples
-
-### Donut Chart
-
-```ts
-pie.render({
-  data: [...],
-  innerRadius: 0.6,
-});
-```
-
-### With Title
-
-```ts
-pie.render({
-  data: [...],
-  title: '餐饮业营收额占比',
-});
-```
-
-### Themes
-
-```ts
-// Academy theme
-pie.render({
-  data: [...],
-  theme: 'academy',
-});
-
-// Dark theme
-pie.render({
-  data: [...],
-  theme: 'dark',
-});
-```
-
-### Custom Styles
-
-```ts
-// Custom colors
-pie.render({
-  data: [...],
-  style: {
-    palette: ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A'],
-  },
-});
-
-// Custom background
-pie.render({
-  data: [...],
-  style: {
-    backgroundColor: '#f5f5f5',
-  },
-});
-```
-
-## Methods
-
-- `render(config: PieConfig): void` - Render or update the chart
-- `destroy(): void` - Destroy the chart instance and clean up resources