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

package/src/vis/funnel/index.ts

@@ -1,238 +0,0 @@
-import { Chart } from '@antv/g2';
-import type { VisualizationOptions } from '../../types';
-import { getBackgroundColor, getThemeColors, getThemeObject } from '../../util/theme';
-
-/**
- * FunnelDataItem is the type for each data item in the funnel chart.
- */
-export type FunnelDataItem = {
-  category: string;
-  value: number;
-};
-
-/**
- * FunnelConfig defines the configuration for rendering the funnel chart.
- */
-export interface FunnelConfig {
-  type?: 'funnel';
-  data: FunnelDataItem[];
-  theme?: 'default' | 'academy' | 'dark';
-  title?: string;
-  style?: {
-    backgroundColor?: string;
-    palette?: string[];
-  };
-}
-
-/**
- * FunnelInstance represents a funnel chart instance with render and destroy methods.
- */
-export interface FunnelInstance {
-  render: (config: FunnelConfig) => void;
-  destroy: () => void;
-}
-
-/**
- * Funnel chart component using G2 5.0.
- *
- * @example
- * ```ts
- * const funnel = Funnel({
- *   container: '#container',
- *   width: 600,
- *   height: 400,
- * });
- *
- * funnel.render({
- *   type: 'funnel',
- *   data: [
- *     { category: '访问', value: 1000 },
- *     { category: '咨询', value: 600 },
- *     { category: '下单', value: 300 },
- *     { category: '成交', value: 120 },
- *   ],
- *   theme: 'academy'
- * });
- *
- * funnel.destroy();
- * ```
- */
-export const Funnel = (options: VisualizationOptions): FunnelInstance => {
-  const { container, width, height, theme: chartTheme = 'default' } = options;
-  let chart: Chart | null = null;
-
-  /**
-   * Render the funnel chart with the given configuration.
-   */
-  const render = (config: FunnelConfig): 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);
-
-    // Helper function to calculate conversion rate
-    const conversionRate = (start: any, end: any) => `${((end / start) * 100).toFixed(2)} %`;
-
-    // Create chart
-    chart = new Chart({
-      container,
-      width,
-      height,
-      autoFit: true,
-      paddingLeft: 40,
-      paddingRight: 68,
-    });
-
-    // 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 ?? '',
-      children: [
-        {
-          type: 'interval',
-          data,
-          encode: {
-            x: 'category',
-            y: 'value',
-            color: 'category',
-            shape: 'funnel', // Use funnel shape for proper funnel visualization
-          },
-          transform: [{ type: 'symmetryY' }],
-          coordinate: { transform: [{ type: 'transpose' }] },
-          scale: {
-            x: { padding: 0 },
-            color: { range: colors },
-          },
-          legend: {
-            color: {
-              position: 'top',
-              layout: {
-                justifyContent: 'center',
-              },
-            },
-          },
-          labels: [
-            // Inside label showing category and value
-            {
-              text: (d: any) => `${d.category}\n${d.value}`,
-              position: 'inside',
-              transform: [{ type: 'contrastReverse' }],
-            },
-            // Connecting line for conversion rate
-            {
-              text: (d: any, i: any) => (i !== 0 ? '———' : ''),
-              style: {
-                'font-size': '1px',
-                color: '#666',
-                'letter-spacing': '0px',
-              },
-              position: 'top-right',
-              fill: '#666',
-              dx: 35,
-              dy: -8,
-            },
-            // Conversion rate label text
-            {
-              text: (d: any, i: any) => (i !== 0 ? '转化率' : ''),
-              position: 'top-right',
-              textAlign: 'left',
-              textBaseline: 'middle',
-              fill: '#666',
-              dx: 40,
-            },
-            // Conversion rate percentage
-            {
-              text: (d: any, i: any, dataArray: any) =>
-                i !== 0 ? conversionRate(dataArray[i - 1].value, dataArray[i].value) : '',
-              position: 'top-right',
-              textAlign: 'left',
-              textBaseline: 'middle',
-              dx: 80,
-            },
-          ],
-          viewStyle: {
-            viewFill: backgroundColor,
-          },
-        },
-        // Overall conversion rate connector
-        {
-          type: 'connector',
-          data: [
-            {
-              startX: data[0]?.category,
-              startY: data[data.length - 1]?.category,
-              endX: 0,
-              endY: (data[0]?.value - data[data.length - 1]?.value) / 2,
-            },
-          ],
-          encode: { x: 'startX', x1: 'startY', y: 'endX', y1: 'endY' },
-          style: {
-            stroke: '#666',
-            markerEnd: false,
-            connectLength1: -12,
-            offset2: -20,
-            connectorStroke: '#0649f2',
-            lineDash: [12, 2],
-          },
-          labels: [
-            {
-              text: '转化率',
-              position: 'left',
-              textAlign: 'start',
-              textBaseline: 'middle',
-              fill: '#666',
-              dx: 10,
-            },
-            {
-              text: conversionRate(data[0]?.value, data[data.length - 1]?.value),
-              position: 'left',
-              textAlign: 'start',
-              dx: 50,
-              fill: '#000',
-            },
-          ],
-        },
-      ],
-      axis: false,
-      tooltip: {
-        items: [
-          (d: any) => ({
-            name: d.category,
-            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/histogram/README.md

@@ -1,130 +0,0 @@
-# Histogram
-
-A histogram chart component for visualizing data distribution, built with G2 5.0.
-
-## Usage
-
-```ts
-import { Histogram } from '@antv/gpt-vis/ai';
-
-const histogram = Histogram({
-  container: '#container',
-  width: 600,
-  height: 400,
-});
-
-histogram.render({
-  data: [78, 88, 60, 100, 95],
-  binNumber: 5,
-  title: '成绩分布',
-});
-
-histogram.destroy();
-```
-
-## Configuration
-
-### Constructor Options (HistogramOptions)
-
-| 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 (HistogramConfig)
-
-| Property   | Type   | Default   | Description                     |
-| ---------- | ------ | --------- | ------------------------------- |
-| data       | Array  | -         | Numeric data array              |
-| binNumber  | number | -         | Number of bins for distribution |
-| title      | string | -         | Chart title                     |
-| axisXTitle | string | -         | X-axis title                    |
-| axisYTitle | string | -         | Y-axis title                    |
-| theme      | string | 'default' | Color theme                     |
-| style      | object | -         | Chart style configuration       |
-
-### Data Structure
-
-```ts
-type HistogramData = number[]; // Array of numeric values
-```
-
-### Style Options
-
-```ts
-style?: {
-  backgroundColor?: string;  // Background color
-  palette?: string[];        // Color palette
-}
-```
-
-## Examples
-
-### Basic Example
-
-```ts
-histogram.render({
-  data: [20, 25, 30, 35],
-});
-```
-
-### With Bin Number
-
-```ts
-histogram.render({
-  data: [78, 88, 60, 100, 95],
-  binNumber: 5,
-  title: '成绩分布',
-});
-```
-
-### With Axis Titles
-
-```ts
-histogram.render({
-  data: [
-    1.2, 3.4, 3.7, 4.3, 5.2, 5.8, 6.1, 6.5, 6.8, 7.1, 7.3, 7.7, 8.3, 8.6, 8.8, 9.1, 9.2, 9.4, 9.5,
-    9.7, 10.5, 10.7, 10.8, 11, 11, 11.1, 11.2, 11.3, 11.4, 11.4, 11.7, 12, 12.9, 12.9, 13.3, 13.7,
-    13.8, 13.9, 14, 14.2, 14.5, 15, 15.2, 15.6, 16, 16.3, 17.3, 17.5, 17.9, 18, 18, 20.6, 21, 23.4,
-  ],
-  axisXTitle: '花瓣大小分布',
-  axisYTitle: '花瓣分布数量',
-});
-```
-
-### With Theme
-
-```ts
-histogram.render({
-  data: [78, 88, 60, 100, 95],
-  binNumber: 5,
-  theme: 'academy',
-});
-```
-
-### With Custom Styles
-
-```ts
-histogram.render({
-  data: [20, 25, 30, 35, 40, 45, 50],
-  style: {
-    palette: ['#FF6B6B'],
-  },
-});
-```
-
-### Dark Theme
-
-```ts
-histogram.render({
-  data: [78, 88, 60, 100, 95],
-  binNumber: 5,
-  theme: 'dark',
-});
-```
-
-## Methods
-
-- `render(config: HistogramConfig): void` - Render or update the chart
-- `destroy(): void` - Destroy the chart instance and clean up resources

package/src/vis/histogram/index.ts

@@ -1,153 +0,0 @@
-import { Chart } from '@antv/g2';
-import type { VisualizationOptions } from '../../types';
-import { getBackgroundColor, getThemeColors, getThemeObject } from '../../util/theme';
-
-/**
- * HistogramConfig defines the configuration for rendering the histogram chart.
- */
-export interface HistogramConfig {
-  type?: 'histogram';
-  data: number[];
-  binNumber?: number;
-  title?: string;
-  axisXTitle?: string;
-  axisYTitle?: string;
-  theme?: 'default' | 'academy' | 'dark';
-  style?: {
-    backgroundColor?: string;
-    palette?: string[];
-  };
-}
-
-/**
- * HistogramInstance represents a histogram chart instance with render and destroy methods.
- */
-export interface HistogramInstance {
-  render: (config: HistogramConfig) => void;
-  destroy: () => void;
-}
-
-/**
- * Histogram chart component using G2 5.0.
- *
- * @example
- * ```ts
- * const histogram = Histogram({
- *   container: '#container',
- *   width: 600,
- *   height: 400,
- * });
- *
- * histogram.render({
- *   type: 'histogram',
- *   data: [78, 88, 60, 100, 95],
- *   binNumber: 5,
- *   title: '成绩分布',
- *   theme: 'academy'
- * });
- *
- * histogram.destroy();
- * ```
- */
-export const Histogram = (options: VisualizationOptions): HistogramInstance => {
-  const { container, width, height, theme: chartTheme = 'default' } = options;
-  let chart: Chart | null = null;
-
-  /**
-   * Render the histogram chart with the given configuration.
-   */
-  const render = (config: HistogramConfig): void => {
-    const {
-      data = [],
-      theme = chartTheme,
-      title,
-      axisXTitle,
-      axisYTitle,
-      binNumber,
-      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: 'interval',
-      data,
-      title: title ?? '',
-      encode: {
-        x: (d: any) => d,
-        y: 'count',
-        color: () => 'all',
-      },
-      // binX transform groups continuous data into bins and counts frequency
-      transform: [{ type: 'binX', y: 'count', thresholds: binNumber }],
-      style: {
-        minHeight: 1,
-        columnWidthRatio: 1,
-        inset: 0.5,
-      },
-      axis: {
-        x: {
-          title: axisXTitle,
-        },
-        y: {
-          title: axisYTitle,
-        },
-      },
-      scale: {
-        y: {
-          nice: true,
-        },
-        color: { range: colors },
-      },
-      legend: false,
-      tooltip: {
-        items: [
-          (d: any) => ({
-            name: '频数',
-            value: d.count,
-          }),
-        ],
-      },
-      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/line/README.md

@@ -1,138 +0,0 @@
-# Line
-
-A line chart component for visualizing trends over time or ordered categories, built with G2 5.0.
-
-## Usage
-
-```ts
-import { Line } from '@antv/gpt-vis/ai';
-
-const line = Line({
-  container: '#container',
-  width: 600,
-  height: 400,
-});
-
-line.render({
-  data: [
-    { time: '2015 年', value: 1700 },
-    { time: '2016 年', value: 1500 },
-    { time: '2017 年', value: 1200 },
-  ],
-  title: '出生人口变化',
-  axisXTitle: '年份',
-  axisYTitle: '出生人口（万人）',
-});
-
-line.destroy();
-```
-
-## Configuration
-
-### Constructor Options (LineOptions)
-
-| 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 (LineConfig)
-
-| Property   | Type   | Default   | Description               |
-| ---------- | ------ | --------- | ------------------------- |
-| data       | Array  | -         | Chart data array          |
-| type       | string | 'line'    | Chart type identifier     |
-| title      | string | -         | Chart title               |
-| axisXTitle | string | -         | X-axis title              |
-| axisYTitle | string | -         | Y-axis title              |
-| theme      | string | 'default' | Color theme               |
-| style      | object | -         | Chart style configuration |
-
-### Data Structure
-
-```ts
-type LineDataItem = {
-  time: string | number; // Time or category value
-  value: number; // Numeric value
-  group?: string; // Optional group name for multi-line charts
-};
-```
-
-### Style Options
-
-| Property        | Type     | Default | Description                                 |
-| --------------- | -------- | ------- | ------------------------------------------- |
-| backgroundColor | string   | -       | Background color of the chart               |
-| palette         | string[] | -       | Array of colors for the chart color palette |
-| lineWidth       | number   | 2       | Width of the line in pixels                 |
-
-## Examples
-
-### Basic Line Chart
-
-```ts
-line.render({
-  data: [
-    { time: 2015, value: 7200.0 },
-    { time: 2016, value: 3660.0 },
-    { time: 2017, value: 4100.0 },
-  ],
-  axisXTitle: 'year',
-  axisYTitle: 'industrial',
-});
-```
-
-### Multi-Line Chart with Groups
-
-```ts
-line.render({
-  data: [
-    { time: '2015 年', value: 1700, group: '出生人口' },
-    { time: '2015 年', value: 965, group: '死亡人口' },
-    { time: '2016 年', value: 1500, group: '出生人口' },
-    { time: '2016 年', value: 846, group: '死亡人口' },
-    { time: '2017 年', value: 1200, group: '出生人口' },
-    { time: '2017 年', value: 782, group: '死亡人口' },
-  ],
-  title: '出生人口与死亡人口变化',
-  axisXTitle: '年份',
-  axisYTitle: '人口（万人）',
-});
-```
-
-### With Theme
-
-```ts
-line.render({
-  data: [
-    { time: '2015 年', value: 1700 },
-    { time: '2016 年', value: 1500 },
-    { time: '2017 年', value: 1200 },
-  ],
-  theme: 'academy',
-  title: '出生人口变化',
-});
-```
-
-### With Custom Styles
-
-```ts
-line.render({
-  data: [
-    { time: '2015 年', value: 1700 },
-    { time: '2016 年', value: 1500 },
-    { time: '2017 年', value: 1200 },
-  ],
-  style: {
-    palette: ['#FF6B6B', '#4ECDC4', '#45B7D1'],
-    lineWidth: 3,
-    backgroundColor: '#F5F5F5',
-  },
-});
-```
-
-## Methods
-
-- `render(config: LineConfig): void` - Render or update the chart
-- `destroy(): void` - Destroy the chart instance and clean up resources