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

package/src/vis/dual-axes/README.md

@@ -1,191 +0,0 @@
-# DualAxes
-
-A dual-axes chart component that combines column and line charts for visualizing two different data series with different scales, built with G2 5.0.
-
-## Usage
-
-```ts
-import { DualAxes } from '@antv/gpt-vis/ai';
-
-const dualAxes = DualAxes({
-  container: '#container',
-  width: 600,
-  height: 400,
-});
-
-dualAxes.render({
-  categories: ['2018', '2019', '2020', '2021', '2022'],
-  series: [
-    {
-      type: 'column',
-      data: [91.9, 99.1, 101.6, 114.4, 121],
-      axisYTitle: 'Sales',
-    },
-    {
-      type: 'line',
-      data: [0.055, 0.06, 0.062, 0.07, 0.075],
-      axisYTitle: 'Profit Rate',
-    },
-  ],
-});
-
-dualAxes.destroy();
-```
-
-## Configuration
-
-### Constructor Options (DualAxesOptions)
-
-| 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 (DualAxesConfig)
-
-| Property   | Type   | Default     | Description                  |
-| ---------- | ------ | ----------- | ---------------------------- |
-| type       | string | 'dual-axes' | Chart type                   |
-| categories | Array  | -           | X-axis categories (required) |
-| series     | Array  | -           | Series data array (required) |
-| title      | string | -           | Chart title                  |
-| axisXTitle | string | -           | X-axis title                 |
-| theme      | string | 'default'   | Color theme                  |
-| style      | object | -           | Chart style configuration    |
-
-### Series Data Structure
-
-```ts
-type DualAxesSeriesItem = {
-  type: 'line' | 'column'; // Series type
-  data: number[]; // Data values
-  axisYTitle?: string; // Y-axis title for this series
-};
-```
-
-### Style Options
-
-```ts
-style?: {
-  backgroundColor?: string; // Background color
-  palette?: string[]; // Color palette
-  startAtZero?: boolean; // Whether Y-axis starts at zero
-}
-```
-
-## Examples
-
-### Basic Dual-Axes Chart
-
-```ts
-dualAxes.render({
-  categories: ['2018', '2019', '2020', '2021', '2022'],
-  series: [
-    {
-      type: 'column',
-      data: [91.9, 99.1, 101.6, 114.4, 121],
-      axisYTitle: 'Sales',
-    },
-    {
-      type: 'line',
-      data: [0.055, 0.06, 0.062, 0.07, 0.075],
-      axisYTitle: 'Profit Rate',
-    },
-  ],
-});
-```
-
-### With Title and X-Axis Label
-
-```ts
-dualAxes.render({
-  categories: ['2018', '2019', '2020', '2021', '2022'],
-  title: '2018-2022 Sales and Profit Rate',
-  axisXTitle: 'Year',
-  series: [
-    {
-      type: 'column',
-      data: [91.9, 99.1, 101.6, 114.4, 121],
-      axisYTitle: 'Sales',
-    },
-    {
-      type: 'line',
-      data: [0.055, 0.06, 0.062, 0.07, 0.075],
-      axisYTitle: 'Profit Rate',
-    },
-  ],
-});
-```
-
-### With Academy Theme
-
-```ts
-dualAxes.render({
-  categories: ['2020', '2021', '2022'],
-  series: [
-    {
-      type: 'column',
-      data: [500, 600, 700],
-      axisYTitle: 'Revenue',
-    },
-    {
-      type: 'line',
-      data: [10, 12, 15],
-      axisYTitle: 'Growth Rate',
-    },
-  ],
-  theme: 'academy',
-});
-```
-
-### With Custom Styles
-
-```ts
-dualAxes.render({
-  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
-  series: [
-    {
-      type: 'column',
-      data: [120, 150, 180, 210, 240],
-      axisYTitle: 'Sales',
-    },
-    {
-      type: 'line',
-      data: [8, 10, 12, 15, 18],
-      axisYTitle: 'Growth',
-    },
-  ],
-  style: {
-    palette: ['#5B8FF9', '#61DDAA'],
-    backgroundColor: '#F8F9FA',
-    startAtZero: true,
-  },
-});
-```
-
-### Dark Theme
-
-```ts
-dualAxes.render({
-  categories: ['Q1', 'Q2', 'Q3', 'Q4'],
-  series: [
-    {
-      type: 'column',
-      data: [100, 120, 140, 160],
-      axisYTitle: 'Revenue',
-    },
-    {
-      type: 'line',
-      data: [5, 6, 7, 8],
-      axisYTitle: 'Profit',
-    },
-  ],
-  theme: 'dark',
-});
-```
-
-## Methods
-
-- `render(config: DualAxesConfig): void` - Render or update the chart
-- `destroy(): void` - Destroy the chart instance and clean up resources

package/src/vis/dual-axes/index.ts

@@ -1,218 +0,0 @@
-import { Chart } from '@antv/g2';
-import type { VisualizationOptions } from '../../types';
-import { getBackgroundColor, getThemeColors, getThemeObject } from '../../util/theme';
-
-/**
- * DualAxesSeriesItem defines a single series in the dual-axes chart.
- */
-export type DualAxesSeriesItem = {
-  type: 'line' | 'column';
-  data: number[];
-  axisYTitle?: string;
-};
-
-/**
- * DualAxesConfig defines the configuration for rendering the dual-axes chart.
- */
-export interface DualAxesConfig {
-  type?: 'dual-axes';
-  categories: string[];
-  series: DualAxesSeriesItem[];
-  title?: string;
-  axisXTitle?: string;
-  theme?: 'default' | 'academy' | 'dark';
-  style?: {
-    backgroundColor?: string;
-    palette?: string[];
-    startAtZero?: boolean;
-  };
-}
-
-/**
- * DualAxesInstance represents a dual-axes chart instance with render and destroy methods.
- */
-export interface DualAxesInstance {
-  render: (config: DualAxesConfig) => void;
-  destroy: () => void;
-}
-
-/**
- * Transform series data to G2 format.
- * Combines multiple series into a single data array with categories.
- */
-function transformData(series: DualAxesSeriesItem[], categories: string[]) {
-  return categories.map((category, index) => {
-    const dataPoint: any = { category };
-    series.forEach((s, i) => {
-      const yField = s.axisYTitle || `value_${i + 1}`;
-      dataPoint[yField] = s.data[index];
-    });
-    return dataPoint;
-  });
-}
-
-/**
- * DualAxes chart component using G2 5.0.
- *
- * @example
- * ```ts
- * const dualAxes = DualAxes({
- *   container: '#container',
- *   width: 600,
- *   height: 400,
- * });
- *
- * dualAxes.render({
- *   type: 'dual-axes',
- *   categories: ['2018', '2019', '2020', '2021', '2022'],
- *   series: [
- *     {
- *       type: 'column',
- *       data: [91.9, 99.1, 101.6, 114.4, 121],
- *       axisYTitle: '销售额',
- *     },
- *     {
- *       type: 'line',
- *       data: [0.055, 0.06, 0.062, 0.07, 0.075],
- *       axisYTitle: '利润率',
- *     },
- *   ],
- * });
- *
- * dualAxes.destroy();
- * ```
- */
-export const DualAxes = (options: VisualizationOptions): DualAxesInstance => {
-  const { container, width, height, theme: chartTheme = 'default' } = options;
-  let chart: Chart | null = null;
-
-  /**
-   * Render the dual-axes chart with the given configuration.
-   */
-  const render = (config: DualAxesConfig): void => {
-    const { categories, series, theme = chartTheme, title, axisXTitle, style = {} } = config;
-
-    // Clean up previous chart if exists
-    if (chart) {
-      chart.destroy();
-    }
-
-    const { startAtZero = false } = style;
-    const colors = style.palette || getThemeColors(theme);
-    const backgroundColor = style.backgroundColor || getBackgroundColor(theme);
-
-    // Transform data
-    const data = transformData(series, categories);
-
-    // Create chart
-    chart = new Chart({
-      container,
-      width,
-      height,
-      autoFit: true,
-    });
-
-    // Sort series: column first, then line (line rendered last appears on top)
-    const sortedSeries = [...series].sort((a, b) => {
-      const order = ['column', 'line'];
-      return order.indexOf(a.type) - order.indexOf(b.type);
-    });
-
-    // Create children configurations for each series
-    const children = sortedSeries.map((item, index) => {
-      const yField = item.axisYTitle || `value_${index + 1}`;
-      const color = colors[index % colors.length];
-
-      if (item.type === 'column') {
-        return {
-          type: 'interval',
-          encode: {
-            x: 'category',
-            y: yField,
-            color: () => yField,
-          },
-          scale: {
-            y: { nice: true, zero: startAtZero },
-            color: { range: [color] },
-          },
-          axis: {
-            y: { title: item.axisYTitle || '' },
-          },
-          style: {
-            columnWidthRatio: 0.8,
-            radiusTopLeft: 4,
-            radiusTopRight: 4,
-          },
-        };
-      } else {
-        // line type
-        return {
-          type: 'line',
-          encode: {
-            x: 'category',
-            y: yField,
-            shape: 'smooth',
-            color: () => yField,
-          },
-          scale: {
-            y: { independent: true, zero: startAtZero },
-            color: { range: [color] },
-          },
-          axis: {
-            y: { position: 'right', title: item.axisYTitle || '' },
-          },
-          style: {
-            lineWidth: 2,
-          },
-        };
-      }
-    });
-
-    // 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,
-      axis: {
-        x: { title: axisXTitle || false },
-      },
-      scale: {
-        y: { nice: true },
-      },
-      legend: {
-        color: {
-          position: 'top',
-          itemMarker: (v: string, index: number) => {
-            const seriesItem = series[index];
-            return seriesItem?.type === 'line' ? 'smooth' : 'rect';
-          },
-        },
-      },
-      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/funnel/README.md

@@ -1,143 +0,0 @@
-# Funnel
-
-A funnel chart component for displaying multi-stage data flow and conversion rates, built with G2 5.0. Ideal for analyzing sales processes, user conversion, and activity participation.
-
-## Usage
-
-```ts
-import { Funnel } from '@antv/gpt-vis/ai';
-
-const funnel = Funnel({
-  container: '#container',
-  width: 600,
-  height: 400,
-});
-
-funnel.render({
-  data: [
-    { category: '访问', value: 1000 },
-    { category: '咨询', value: 600 },
-    { category: '下单', value: 300 },
-    { category: '成交', value: 120 },
-  ],
-});
-
-funnel.destroy();
-```
-
-## Configuration
-
-### Constructor Options (FunnelOptions)
-
-| 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 (FunnelConfig)
-
-| Property | Type                             | Default   | Description               |
-| -------- | -------------------------------- | --------- | ------------------------- |
-| data     | FunnelDataItem[]                 | -         | Chart data array          |
-| theme    | 'default' \| 'academy' \| 'dark' | 'default' | Color theme               |
-| title    | string                           | -         | Chart title               |
-| style    | object                           | -         | Chart style configuration |
-
-### FunnelDataItem
-
-```ts
-type FunnelDataItem = {
-  category: string; // Stage name
-  value: number; // Stage value
-};
-```
-
-### Style Options
-
-```ts
-style?: {
-  backgroundColor?: string;  // Background color
-  palette?: string[];        // Color palette
-}
-```
-
-## Examples
-
-### Basic Funnel Chart
-
-```ts
-funnel.render({
-  data: [
-    { category: '访问', value: 1000 },
-    { category: '咨询', value: 600 },
-    { category: '下单', value: 300 },
-    { category: '成交', value: 120 },
-  ],
-});
-```
-
-### With Title
-
-```ts
-funnel.render({
-  data: [
-    { category: '访问', value: 1000 },
-    { category: '咨询', value: 600 },
-    { category: '下单', value: 300 },
-    { category: '成交', value: 120 },
-  ],
-  title: '销售漏斗',
-});
-```
-
-### Academy Theme
-
-```ts
-funnel.render({
-  data: [
-    { category: '注册', value: 800 },
-    { category: '激活', value: 500 },
-    { category: '付费', value: 200 },
-  ],
-  theme: 'academy',
-  title: '用户转化流程',
-});
-```
-
-### Dark Theme
-
-```ts
-funnel.render({
-  data: [
-    { category: '访问', value: 1000 },
-    { category: '咨询', value: 600 },
-    { category: '下单', value: 300 },
-    { category: '成交', value: 120 },
-  ],
-  theme: 'dark',
-});
-```
-
-### Custom Styles
-
-```ts
-// Custom colors
-funnel.render({
-  data: [
-    { category: '报名', value: 1500 },
-    { category: '签到', value: 900 },
-    { category: '参与', value: 700 },
-  ],
-  title: '活动参与漏斗',
-  style: {
-    palette: ['#FF7F50', '#87CEFA', '#32CD32'],
-    backgroundColor: '#FFF8DC',
-  },
-});
-```
-
-## Methods
-
-- `render(config: FunnelConfig): void` - Render or update the chart
-- `destroy(): void` - Destroy the chart instance and clean up resources