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

package/src/vis/summary/index.ts

@@ -1,91 +0,0 @@
-import { Text } from '@antv/t8';
-import type { VisualizationOptions } from '../../types';
-
-/**
- * SummaryConfig is a T8 Syntax string for narrative text visualization.
- * Supports markdown-like syntax with special annotations for metrics.
- * @example
- * ```
- * # Sales Report
- * Total sales reached [¥1,234,567](metric_value, origin=1234567).
- * ```
- */
-export type SummaryConfig = string;
-
-/**
- * SummaryInstance represents a summary instance with render and destroy methods.
- */
-export interface SummaryInstance {
-  render: (syntax: SummaryConfig) => void;
-  destroy: () => void;
-}
-
-/**
- * Summary component using @antv/t8 for narrative text visualization.
- *
- * This component provides a way to render data summaries with rich text formatting
- * and inline data visualization using T8 syntax (markdown-like syntax).
- *
- * @example
- * ```ts
- * const summary = Summary({
- *   container: '#container',
- *   theme: 'light',
- * });
- *
- * summary.render(`
- *   # Sales Report
- *   Total sales reached [¥1,234,567](metric_value, origin=1234567).
- *   This represents a [15%](delta_value, status=increase) increase compared to last quarter.
- * `);
- *
- * summary.destroy();
- * ```
- */
-export const Summary = (options: VisualizationOptions): SummaryInstance => {
-  // T8 only supports 'light' and 'dark', so map 'academy' to 'light'
-  let { theme = 'light' } = options;
-  if (theme === 'academy' || theme === 'default') theme = 'light';
-  const container =
-    typeof options.container === 'string'
-      ? document.querySelector(options.container)
-      : options.container;
-
-  if (!container) {
-    throw new Error('Container not found');
-  }
-
-  let text: Text | null = null;
-
-  /**
-   * Render the summary with the given T8 syntax string.
-   */
-  const render = (syntax: SummaryConfig): void => {
-    // Clean up previous instance if exists
-    if (text) {
-      text.unmount();
-    }
-
-    // Create T8 Text instance
-    text = new Text(container as HTMLElement);
-
-    // Set theme and render syntax
-    text.theme(theme);
-    text.render(syntax);
-  };
-
-  /**
-   * Destroy the summary instance and clean up resources.
-   */
-  const destroy = (): void => {
-    if (text) {
-      text.unmount();
-      text = null;
-    }
-  };
-
-  return {
-    render,
-    destroy,
-  };
-};

package/src/vis/table/README.md

@@ -1,174 +0,0 @@
-# Table
-
-A table component for displaying structured data in rows and columns, built with pure JavaScript.
-
-## Usage
-
-```ts
-import { Table } from '@antv/gpt-vis/ai';
-
-const table = Table({
-  container: '#container',
-  width: 600,
-  height: 400,
-});
-
-table.render({
-  type: 'table',
-  data: [
-    {
-      Indicator: '经度(°)',
-      Mean: '104.15°',
-      Std: '±0.64°',
-      Range: '103.19-105.28',
-      Q1Q3: '103.62-104.68°',
-    },
-    {
-      Indicator: '纬度(°)',
-      Mean: '31.60°',
-      Std: '±0.48°',
-      Range: '30.89-32.45°',
-      Q1Q3: '31.21-32.00°',
-    },
-    { Indicator: '深度(km)', Mean: '11.82', Std: '±5.67', Range: '3.0-34.8', Q1Q3: '10.0-10.0' },
-    { Indicator: '震级(mag)', Mean: '5.29', Std: '±0.49', Range: '5.0-7.9', Q1Q3: '5.0-5.4' },
-  ],
-  title: '一个文本标题',
-});
-
-table.destroy();
-```
-
-## Configuration
-
-### Constructor Options (VisualizationOptions)
-
-| 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 (TableConfig)
-
-| Property | Type                  | Default | Description            |
-| -------- | --------------------- | ------- | ---------------------- |
-| data     | Record<string, any>[] | -       | Table data array       |
-| type     | string                | 'table' | Chart type identifier  |
-| title    | string                | -       | Table title (optional) |
-
-### Data Structure
-
-The `data` property should be an array of objects where each object represents a row in the table. The keys of the objects will be used as column headers.
-
-```ts
-type TableData = Record<string, any>[];
-```
-
-## Features
-
-- **Pure JavaScript**: No React or other framework dependencies
-- **Scoped CSS**: Dynamic CSS injection with automatic scoping to avoid style conflicts
-- **Responsive**: Automatically adapts to container size
-- **Hover Effects**: Interactive row highlighting on hover
-- **Clean Styling**: Modern, minimalist design with proper spacing and borders
-
-## Examples
-
-### Basic Table
-
-```ts
-table.render({
-  data: [
-    { 类别: '火锅', '营收额占比(%)': 22 },
-    { 类别: '自助餐', '营收额占比(%)': 12 },
-    { 类别: '小吃快餐', '营收额占比(%)': 8 },
-    { 类别: '西餐', '营收额占比(%)': 6 },
-    { 类别: '其它', '营收额占比(%)': 44 },
-  ],
-});
-```
-
-### Table with Title
-
-```ts
-table.render({
-  data: [
-    { 类别: '火锅', '营收额占比(%)': 22 },
-    { 类别: '自助餐', '营收额占比(%)': 12 },
-    { 类别: '小吃快餐', '营收额占比(%)': 8 },
-    { 类别: '西餐', '营收额占比(%)': 6 },
-    { 类别: '其它', '营收额占比(%)': 44 },
-  ],
-  title: '餐饮业营收额数据表',
-});
-```
-
-### Population Distribution Table
-
-```ts
-table.render({
-  data: [
-    { 人口类型: '城镇人口', '数量(万人)': 63.89 },
-    { 人口类型: '乡村人口', '数量(万人)': 36.11 },
-  ],
-  title: '全国人口居住分布',
-});
-```
-
-### Industrial Structure Table
-
-```ts
-table.render({
-  data: [
-    { 产业类型: '第一产业', '产值(亿元)': 7200.0 },
-    { 产业类型: '第二产业', '产值(亿元)': 36600.0 },
-    { 产业类型: '第三产业', '产值(亿元)': 41000.0 },
-  ],
-});
-```
-
-### Seismic Data Table
-
-```ts
-table.render({
-  data: [
-    {
-      Indicator: '经度(°)',
-      Mean: '104.15°',
-      Std: '±0.64°',
-      Range: '103.19-105.28',
-      Q1Q3: '103.62-104.68°',
-    },
-    {
-      Indicator: '纬度(°)',
-      Mean: '31.60°',
-      Std: '±0.48°',
-      Range: '30.89-32.45°',
-      Q1Q3: '31.21-32.00°',
-    },
-    { Indicator: '深度(km)', Mean: '11.82', Std: '±5.67', Range: '3.0-34.8', Q1Q3: '10.0-10.0' },
-    { Indicator: '震级(mag)', Mean: '5.29', Std: '±0.49', Range: '5.0-7.9', Q1Q3: '5.0-5.4' },
-  ],
-  title: '地震数据统计表',
-});
-```
-
-## Methods
-
-- `render(config: TableConfig): void` - Render or update the table
-- `destroy(): void` - Destroy the table instance and clean up resources (including injected styles)
-
-## Use Cases
-
-- Displaying structured data like reports, lists, and detail tables
-- Comparing multiple data items with several attributes
-- Presenting statistical data in a clear, organized format
-- When data needs to be searchable, sortable, or filterable
-- Financial statements, scorecards, product lists, etc.
-
-## When Not to Use
-
-- When data has hierarchical or network relationships (use tree or graph visualizations instead)
-- When you need to emphasize data distribution, trends, or proportions (use charts like bar, line, or pie instead)
-- When the dataset is extremely large with many fields (consider pagination or grouping)

package/src/vis/table/index.ts

@@ -1,241 +0,0 @@
-import { measureText } from 'measury';
-
-import type { VisualizationOptions } from '../../types';
-
-/**
- * TableConfig defines the configuration for rendering the table.
- */
-export interface TableConfig {
-  type?: 'table';
-  data: Record<string, any>[];
-  title?: string;
-}
-
-/**
- * TableInstance represents a table instance with render and destroy methods.
- */
-export interface TableInstance {
-  render: (config: TableConfig) => void;
-  destroy: () => void;
-}
-
-const SCOPE_ID = '__gpt-vis-table__';
-const FONT_FAMILY =
-  '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';
-const CELL_PADDING = 16; // 8px * 2
-const MIN_WIDTH_MULTIPLIER = 1.1;
-
-// CSS styles for the table component
-const TABLE_STYLES = `
-  .${SCOPE_ID} {
-    font-family: ${FONT_FAMILY};
-    overflow: auto;
-    height: 100%;
-  }
-
-  .${SCOPE_ID} .table-title {
-    font-size: 16px;
-    font-weight: 500;
-    margin-bottom: 12px;
-    color: #1d2129;
-  }
-
-  .${SCOPE_ID} table {
-    border-collapse: separate;
-    border-spacing: 0;
-    background: #fff;
-    border-radius: 8px;
-    overflow: hidden;
-  }
-
-  .${SCOPE_ID} th,
-  .${SCOPE_ID} td {
-    border-bottom: 1px solid #f0f0f0;
-    padding: 8px;
-    text-align: left;
-    font-size: 14px;
-    color: #333;
-    white-space: nowrap;
-  }
-
-  .${SCOPE_ID} th {
-    background: #f5f5f5;
-    font-weight: 600;
-    color: #000000e0;
-    position: relative;
-  }
-
-  .${SCOPE_ID} th:not(:last-child)::after {
-    content: '';
-    position: absolute;
-    top: 25%;
-    right: 0;
-    width: 1px;
-    height: 50%;
-    background: #e0e0e0;
-  }
-
-  .${SCOPE_ID} tr {
-    transition: background 0.2s;
-  }
-
-  .${SCOPE_ID} tbody tr:hover {
-    background: #f5f5f5;
-    cursor: pointer;
-  }
-`;
-
-/**
- * Calculate the minimum width needed for a table based on its data.
- * This is a pure function that measures text width and returns the calculated min-width.
- *
- * @param data - Table data array
- * @param columns - Column names array
- * @returns Calculated minimum width in pixels
- */
-export const calculateTableMinWidth = (data: Record<string, any>[], columns: string[]): number => {
-  let maxRowWidth = 0;
-
-  // Measure header row
-  const headerWidth = columns.reduce((total, col) => {
-    const metrics = measureText(String(col), {
-      fontFamily: FONT_FAMILY,
-      fontSize: 14,
-      fontWeight: '600',
-    });
-    return total + metrics.width + CELL_PADDING;
-  }, 0);
-  maxRowWidth = Math.max(maxRowWidth, headerWidth);
-
-  // Measure each data row
-  data.forEach((row) => {
-    const rowText = columns.map((col) => String(row[col] != null ? row[col] : '')).join('');
-    const metrics = measureText(rowText, {
-      fontFamily: FONT_FAMILY,
-      fontSize: 14,
-    });
-    const rowWidth = metrics.width + columns.length * CELL_PADDING;
-    maxRowWidth = Math.max(maxRowWidth, rowWidth);
-  });
-
-  // Return min-width with 110% multiplier for optimal spacing
-  return maxRowWidth * MIN_WIDTH_MULTIPLIER;
-};
-
-// Inject CSS into the document head if not already present
-const injectStyles = (): void => {
-  if (document.querySelector(`style[data-scope="${SCOPE_ID}"]`)) {
-    return;
-  }
-  const styleElement = document.createElement('style');
-  styleElement.setAttribute('data-scope', SCOPE_ID);
-  styleElement.textContent = TABLE_STYLES;
-  document.head.appendChild(styleElement);
-};
-
-/**
- * Table component using pure JavaScript.
- *
- * @example
- * ```ts
- * const table = Table({
- *   container: '#container',
- *   width: 600,
- *   height: 400,
- * });
- *
- * table.render({
- *   type: 'table',
- *   data: [
- *     { "Indicator": "经度(°)", "Mean": "104.15°", "Std": "±0.64°" },
- *     { "Indicator": "纬度(°)", "Mean": "31.60°", "Std": "±0.48°" },
- *   ],
- *   title: '一个文本标题',
- * });
- *
- * table.destroy();
- * ```
- */
-export const Table = (options: VisualizationOptions): TableInstance => {
-  const container =
-    typeof options.container === 'string'
-      ? document.querySelector(options.container)
-      : options.container;
-
-  if (!container) {
-    throw new Error('Container not found');
-  }
-
-  let tableWrapper: HTMLDivElement | null = null;
-
-  /**
-   * Render the table with the given configuration.
-   */
-  const render = (config: TableConfig): void => {
-    const { data = [], title } = config;
-
-    // Inject styles if not already present
-    injectStyles();
-
-    // Clean up previous render
-    if (tableWrapper) {
-      tableWrapper.remove();
-    }
-
-    // Create wrapper element
-    tableWrapper = document.createElement('div');
-    tableWrapper.className = SCOPE_ID;
-
-    // Handle empty data case
-    if (data.length === 0) {
-      tableWrapper.innerHTML = `
-        ${title ? `<div class="table-title">${title}</div>` : ''}
-        <div style="padding: 20px; text-align: center; color: #999;">No data available</div>
-      `;
-      container.appendChild(tableWrapper);
-      return;
-    }
-
-    // Get columns from the first data item
-    const columns = Object.keys(data[0]);
-
-    // Calculate the minimum width needed for the table using pure function
-    let minWidth = calculateTableMinWidth(data, columns);
-    // Ensure a minimum width for columns
-    minWidth = Math.max(minWidth, columns.length * 100);
-
-    // Build table HTML using template strings
-    const headerHTML = columns.map((col) => `<th>${col}</th>`).join('');
-    const bodyHTML = data
-      .map(
-        (row) =>
-          `<tr>${columns.map((col) => `<td>${row[col] != null ? row[col] : ''}</td>`).join('')}</tr>`,
-      )
-      .join('');
-
-    tableWrapper.innerHTML = `
-      ${title ? `<div class="table-title">${title}</div>` : ''}
-      <table style="min-width: ${minWidth}px;">
-        <thead><tr>${headerHTML}</tr></thead>
-        <tbody>${bodyHTML}</tbody>
-      </table>
-    `;
-
-    container.appendChild(tableWrapper);
-  };
-
-  /**
-   * Destroy the table instance and clean up resources.
-   */
-  const destroy = (): void => {
-    if (tableWrapper) {
-      tableWrapper.remove();
-      tableWrapper = null;
-    }
-  };
-
-  return {
-    render,
-    destroy,
-  };
-};

package/src/vis/treemap/README.md

@@ -1,199 +0,0 @@
-# Treemap
-
-A treemap chart component for visualizing hierarchical data structures, built with G2 5.0.
-
-## Usage
-
-```ts
-import { Treemap } from '@antv/gpt-vis/ai';
-
-const treemap = Treemap({
-  container: '#container',
-  width: 600,
-  height: 400,
-});
-
-treemap.render({
-  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 },
-      ],
-    },
-  ],
-});
-
-treemap.destroy();
-```
-
-## Configuration
-
-### Constructor Options (TreemapOptions)
-
-| 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 (TreemapConfig)
-
-| Property | Type   | Default   | Description               |
-| -------- | ------ | --------- | ------------------------- |
-| data     | Array  | -         | Hierarchical data array   |
-| theme    | string | 'default' | Color theme               |
-| title    | string | -         | Chart title               |
-| style    | object | -         | Chart style configuration |
-
-### Data Structure
-
-```ts
-type TreemapDataItem = {
-  name: string; // Category name
-  value: number; // Numeric value
-  children?: TreemapDataItem[]; // Optional nested children
-};
-```
-
-### Style Options
-
-```ts
-style?: {
-  backgroundColor?: string;  // Background color
-  palette?: string[];        // Color palette
-}
-```
-
-## Examples
-
-### Basic Example
-
-```ts
-treemap.render({
-  data: [
-    {
-      name: '产品A',
-      value: 500,
-      children: [
-        { name: '子产品A1', value: 200 },
-        { name: '子产品A2', value: 300 },
-      ],
-    },
-    { name: '产品B', value: 400 },
-  ],
-});
-```
-
-### With Theme
-
-```ts
-treemap.render({
-  data: [
-    {
-      name: 'A',
-      value: 100,
-      children: [
-        { name: 'A1', value: 40 },
-        { name: 'A2', value: 30 },
-        { name: 'A3', value: 30 },
-      ],
-    },
-  ],
-  theme: 'academy',
-});
-```
-
-### With Title
-
-```ts
-treemap.render({
-  data: [
-    {
-      name: '苹果',
-      value: 800,
-      children: [
-        { name: '红富士', value: 400 },
-        { name: '黄元帅', value: 400 },
-      ],
-    },
-    { name: '橙子', value: 600 },
-    { name: '香蕉', value: 500 },
-  ],
-  title: '水果销售量',
-});
-```
-
-### With Custom Styles
-
-```ts
-treemap.render({
-  data: [
-    { name: 'A', value: 100 },
-    { name: 'B', value: 80 },
-    { name: 'C', value: 60 },
-  ],
-  style: {
-    palette: ['#FF6B6B', '#4ECDC4', '#45B7D1'],
-  },
-});
-```
-
-### Dark Theme
-
-```ts
-treemap.render({
-  data: [
-    {
-      name: 'A',
-      value: 100,
-      children: [
-        { name: 'A1', value: 40 },
-        { name: 'A2', value: 30 },
-        { name: 'A3', value: 30 },
-      ],
-    },
-  ],
-  theme: 'dark',
-});
-```
-
-### Multiple Levels
-
-```ts
-treemap.render({
-  data: [
-    {
-      name: '部门A',
-      value: 200,
-      children: [
-        {
-          name: '组A1',
-          value: 100,
-          children: [
-            { name: '成员1', value: 50 },
-            { name: '成员2', value: 50 },
-          ],
-        },
-        { name: '组A2', value: 100 },
-      ],
-    },
-  ],
-});
-```
-
-## Methods
-
-- `render(config: TreemapConfig): void` - Render or update the chart
-- `destroy(): void` - Destroy the chart instance and clean up resources