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

package/src/vis/line/index.ts

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

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

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

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