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

package/src/vis/summary/index.ts

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

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

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

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