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

package/dist/esm/syntax/parser.js

@@ -0,0 +1,401 @@
+/**
+ * GPT-Vis Syntax Parser
+ *
+ * Parses a markdown-like syntax for visualization configurations.
+ *
+ * Syntax rules:
+ * - `vis [chartType]` - Defines the chart type (required first line)
+ * - `data` - Starts a data array section
+ * - `  - key value` - Array item with key-value pairs
+ * - `  - value` - Simple array item (for flat arrays like histogram data)
+ * - `key: value` or `key value` - Top-level key-value pair
+ * - `style` - Starts a style object section
+ * - Multiple values separated by spaces become arrays (e.g., `palette #ff5a5f #1fb6ff`)
+ * - `children` - Nested array for hierarchical data (mind-map, treemap, etc.)
+ *
+ * @example
+ * ```
+ * vis pie
+ * data
+ *   - category 分类一
+ *     value 27
+ *   - category 分类二
+ *     value 25
+ * innerRadius: 0.6
+ * style
+ *   backgroundColor #333
+ *   palette #ff5a5f #1fb6ff #13ce66
+ * ```
+ *
+ * @example Simple array (histogram)
+ * ```
+ * vis histogram
+ * data
+ *   - 78
+ *   - 88
+ *   - 60
+ * binNumber 5
+ * ```
+ *
+ * @example Hierarchical data (mind-map)
+ * ```
+ * vis mind-map
+ * data
+ *   - name 项目计划
+ *     children
+ *       - name 研究阶段
+ *         children
+ *           - name 市场调研
+ *           - name 技术可行性分析
+ *       - name 开发阶段
+ * ```
+ */
+
+/**
+ * Parsed chart configuration result
+ */
+
+// Known section names that contain arrays
+var ARRAY_SECTIONS = new Set(['data', 'categories', 'series', 'children']);
+
+// Known section names that contain objects
+var OBJECT_SECTIONS = new Set(['style']);
+
+/**
+ * Try to parse a value as number, boolean, or keep as string
+ */
+function parseValue(value) {
+  // Trim the value
+  var trimmed = value.trim();
+
+  // Empty string
+  if (trimmed === '') {
+    return '';
+  }
+
+  // Boolean values
+  if (trimmed === 'true') return true;
+  if (trimmed === 'false') return false;
+
+  // Numeric values
+  var num = Number(trimmed);
+  if (!isNaN(num) && trimmed !== '') {
+    return num;
+  }
+  return trimmed;
+}
+
+/**
+ * Parse multiple space-separated values into an array or single value
+ * Used for style properties like palette where multiple colors are expected
+ */
+function parseMultipleValues(values) {
+  var trimmed = values.trim();
+
+  // Split by spaces, but handle the case where we want a single value
+  var parts = trimmed.split(/\s+/).filter(function (p) {
+    return p.length > 0;
+  });
+  if (parts.length === 0) {
+    return '';
+  }
+  if (parts.length === 1) {
+    return parseValue(parts[0]);
+  }
+
+  // Multiple values become an array
+  return parts.map(parseValue);
+}
+
+/**
+ * Parse a key-value line (supports both "key: value" and "key value" formats)
+ */
+function parseKeyValue(line) {
+  var trimmed = line.trim();
+
+  // Try "key: value" format first
+  var colonMatch = trimmed.match(/^([a-zA-Z_][a-zA-Z0-9_-]*)\s*:\s*(.*)$/);
+  if (colonMatch) {
+    return {
+      key: colonMatch[1],
+      value: colonMatch[2]
+    };
+  }
+
+  // Try "key value" format (key must be a valid identifier)
+  var spaceMatch = trimmed.match(/^([a-zA-Z_][a-zA-Z0-9_-]*)\s+(.+)$/);
+  if (spaceMatch) {
+    return {
+      key: spaceMatch[1],
+      value: spaceMatch[2]
+    };
+  }
+
+  // Single key without value
+  var singleKey = trimmed.match(/^([a-zA-Z_][a-zA-Z0-9_-]*)$/);
+  if (singleKey) {
+    return {
+      key: singleKey[1],
+      value: ''
+    };
+  }
+  return null;
+}
+
+/**
+ * Check if a value is a simple value (not a key-value pair)
+ * Simple values are: numbers, strings that don't look like key-value pairs
+ */
+function isSimpleValue(line) {
+  var trimmed = line.trim();
+
+  // Check if it looks like a key-value pair
+  var hasKeyValue = parseKeyValue(trimmed);
+  if (hasKeyValue && hasKeyValue.value !== '') {
+    return false;
+  }
+
+  // It's a simple value (number, string without spaces matching key pattern)
+  return true;
+}
+
+/**
+ * Get the indentation level of a line (normalized to units of 2 spaces)
+ */
+function getIndentLevel(line) {
+  var match = line.match(/^(\s*)/);
+  return match ? match[1].length : 0;
+}
+
+/**
+ * Check if a line is an array item marker (starts with -)
+ */
+function isArrayItemLine(line) {
+  return line.trim().startsWith('-');
+}
+
+/**
+ * Parse an array item line (removes the leading -)
+ */
+function parseArrayItemLine(line) {
+  return line.trim().replace(/^-\s*/, '');
+}
+
+/**
+ * Check if a key is a known section name (data, style, etc.)
+ */
+function isKnownSection(key) {
+  return ARRAY_SECTIONS.has(key) || OBJECT_SECTIONS.has(key);
+}
+
+/**
+ * Line information for parsing
+ */
+
+/**
+ * Parse lines into line info array
+ */
+function parseLines(syntax) {
+  var lines = syntax.split('\n');
+  var result = [];
+  for (var i = 0; i < lines.length; i++) {
+    var line = lines[i];
+    var trimmed = line.trim();
+
+    // Skip empty lines
+    if (trimmed === '') {
+      continue;
+    }
+    result.push({
+      line: line,
+      trimmed: trimmed,
+      indent: getIndentLevel(line),
+      lineNumber: i
+    });
+  }
+  return result;
+}
+
+/**
+ * Parse an array of items (data, children, etc.)
+ * Supports nested children arrays for hierarchical data
+ */
+function parseArraySection(lines, startIndex, baseIndent) {
+  var items = [];
+  var currentItem = null;
+  var isSimpleArray = false;
+  var i = startIndex;
+  var firstItemIndent = -1;
+  while (i < lines.length) {
+    var _lines$i = lines[i],
+      trimmed = _lines$i.trimmed,
+      indent = _lines$i.indent;
+
+    // If we see something at base indent level or lower and it's not an array item,
+    // we're done with this section
+    if (indent <= baseIndent && !isArrayItemLine(trimmed)) {
+      break;
+    }
+
+    // If we see an array item at a lower or equal indent to base,
+    // we've reached a sibling at the parent level - return
+    if (isArrayItemLine(trimmed) && indent <= baseIndent) {
+      break;
+    }
+
+    // Check if this is a new array item at our level
+    var isThisLevelItem = isArrayItemLine(trimmed) && (firstItemIndent === -1 || indent === firstItemIndent);
+
+    // Handle array item marker at our level
+    if (isThisLevelItem) {
+      // Set the first item indent if not yet set
+      if (firstItemIndent === -1) {
+        firstItemIndent = indent;
+      }
+
+      // Save previous item if exists
+      if (currentItem !== null && !isSimpleArray) {
+        items.push(currentItem);
+      }
+      var itemContent = parseArrayItemLine(trimmed);
+      if (itemContent) {
+        // Determine if this is a simple value or a key-value pair
+        if (isSimpleValue(itemContent)) {
+          // Simple value array (e.g., histogram data: [78, 88, 60])
+          isSimpleArray = true;
+          items.push(parseValue(itemContent));
+          currentItem = null;
+        } else {
+          // Object array with key-value pairs
+          currentItem = {};
+          var kv = parseKeyValue(itemContent);
+          if (kv) {
+            currentItem[kv.key] = parseValue(kv.value);
+          }
+        }
+      } else {
+        // Empty array item marker, start a new object
+        currentItem = {};
+      }
+      i++;
+      continue;
+    }
+
+    // If we have a first item indent set and we see an array item at a different indent,
+    // it might be a nested child's item - just skip for now, let nested parsing handle it
+    if (isArrayItemLine(trimmed) && firstItemIndent !== -1 && indent !== firstItemIndent) {
+      // This shouldn't happen if we're parsing correctly - skip and continue
+      i++;
+      continue;
+    }
+
+    // Handle properties of current item (including nested children)
+    if (currentItem !== null && !isSimpleArray) {
+      var _kv = parseKeyValue(trimmed);
+      if (_kv) {
+        // Check if this is a 'children' key (start of nested array)
+        if (_kv.key === 'children' && _kv.value === '') {
+          // Parse nested children array - the children start after this line
+          var _parseArraySection = parseArraySection(lines, i + 1, indent),
+            childItems = _parseArraySection.items,
+            nextIndex = _parseArraySection.nextIndex;
+          currentItem.children = childItems;
+          i = nextIndex;
+          continue;
+        } else {
+          currentItem[_kv.key] = parseValue(_kv.value);
+        }
+      }
+    }
+    i++;
+  }
+
+  // Save last item if exists
+  if (currentItem !== null && !isSimpleArray) {
+    items.push(currentItem);
+  }
+  return {
+    items: items,
+    nextIndex: i
+  };
+}
+
+/**
+ * Parse the visualization syntax string into a configuration object
+ */
+export function parse(syntax) {
+  var lines = parseLines(syntax);
+  var result = {
+    type: ''
+  };
+  var i = 0;
+  while (i < lines.length) {
+    var _lines$i2 = lines[i],
+      trimmed = _lines$i2.trimmed,
+      indent = _lines$i2.indent;
+
+    // Handle "vis [type]" declaration
+    if (trimmed.startsWith('vis ')) {
+      var chartType = trimmed.substring(4).trim();
+      result.type = chartType;
+      i++;
+      continue;
+    }
+
+    // Check for section headers (data, style, etc.) - single word, no indentation
+    var isSectionHeader = /^[a-zA-Z_][a-zA-Z0-9_-]*$/.test(trimmed) && indent === 0 && isKnownSection(trimmed);
+    if (isSectionHeader) {
+      if (ARRAY_SECTIONS.has(trimmed)) {
+        // Parse array section
+        var _parseArraySection2 = parseArraySection(lines, i + 1, indent),
+          items = _parseArraySection2.items,
+          nextIndex = _parseArraySection2.nextIndex;
+        if (items.length > 0) {
+          result[trimmed] = items;
+        }
+        i = nextIndex;
+        continue;
+      } else if (OBJECT_SECTIONS.has(trimmed)) {
+        // Parse object section (style)
+        var sectionName = trimmed;
+        result[sectionName] = {};
+        i++;
+        while (i < lines.length) {
+          var _lines$i3 = lines[i],
+            innerTrimmed = _lines$i3.trimmed,
+            innerIndent = _lines$i3.indent;
+
+          // If indent goes back to 0, we're done with this section
+          if (innerIndent === 0) {
+            break;
+          }
+          var kv = parseKeyValue(innerTrimmed);
+          if (kv) {
+            result[sectionName][kv.key] = parseMultipleValues(kv.value);
+          }
+          i++;
+        }
+        continue;
+      }
+    }
+
+    // Top-level key-value pair
+    if (indent === 0) {
+      var _kv2 = parseKeyValue(trimmed);
+      if (_kv2) {
+        result[_kv2.key] = parseValue(_kv2.value);
+      }
+    }
+    i++;
+  }
+  return result;
+}
+
+/**
+ * Check if a val is a valid visualization syntax
+ */
+export function isVisSyntax(input) {
+  if (typeof input !== 'string') return false;
+  var trimmed = input.trim();
+  return trimmed.startsWith('vis ');
+}

package/dist/esm/types/index.d.ts

@@ -1,2 +1,33 @@
-export * from './chart';
-export type { GlobalConfig } from './config';
+/**
+ * Common visualization options for all chart components.
+ * Defines the container and dimensions for rendering visualizations.
+ */
+export interface VisualizationOptions {
+    container: string | HTMLElement;
+    width?: number;
+    height?: number;
+    theme?: 'default' | 'light' | 'dark' | 'academy';
+    wrapper?: boolean;
+    locale?: string;
+}
+/**
+ * Tree graph data structure
+ */
+export interface TreeGraphData {
+    name: string;
+    description?: string;
+    children?: TreeGraphData[];
+}
+/**
+ * Network graph data structure
+ */
+export interface GraphData {
+    nodes: {
+        name: string;
+    }[];
+    edges: {
+        source: string;
+        target: string;
+        name?: string;
+    }[];
+}

package/dist/esm/types/index.js

@@ -1,2 +1 @@
-export * from "./chart";
 export {};

package/dist/esm/util/theme.d.ts

@@ -0,0 +1,21 @@
+export declare const DEFAULT_COLOR_PALETTE: string[];
+export declare const ACADEMY_COLOR_PALETTE: string[];
+export declare const THEME_MAP: Record<string, any>;
+/**
+ * Get normalized theme name for G2.
+ * Converts 'default' to 'light' for G2 compatibility.
+ */
+export declare const getTheme: (theme: string) => string;
+/**
+ * Get theme object from THEME_MAP.
+ * This should be used for visualization components to properly support dark theme with multiple marks.
+ */
+export declare const getThemeObject: (theme: string) => any;
+/**
+ * Get theme color palette based on theme name.
+ */
+export declare const getThemeColors: (theme: string) => string[];
+/**
+ * Get background color based on theme.
+ */
+export declare const getBackgroundColor: (theme: string) => string;

package/dist/esm/util/theme.js

@@ -0,0 +1,141 @@
+// Color palettes
+export var DEFAULT_COLOR_PALETTE = ['#1783FF', '#F08F56', '#D580FF', '#00C9C9', '#7863FF', '#DB9D0D', '#60C42D', '#FF80CA', '#2491B3', '#17C76F'];
+export var ACADEMY_COLOR_PALETTE = ['#4e79a7', '#f28e2c', '#e15759', '#76b7b2', '#59a14f', '#edc949', '#af7aa1', '#ff9da7', '#9c755f', '#bab0ab'];
+
+// Theme definitions
+var DEFAULT_THEME = {
+  type: 'light',
+  view: {
+    viewFill: '#FFF',
+    plotFill: 'transparent',
+    mainFill: 'transparent',
+    contentFill: 'transparent'
+  },
+  interval: {
+    rect: {
+      fillOpacity: 0.8
+    }
+  },
+  line: {
+    line: {
+      lineWidth: 2
+    }
+  },
+  area: {
+    area: {
+      fillOpacity: 0.6
+    }
+  },
+  point: {
+    point: {
+      lineWidth: 1
+    }
+  }
+};
+var DARK_THEME = {
+  type: 'dark',
+  view: {
+    viewFill: '#000',
+    plotFill: 'transparent',
+    mainFill: 'transparent',
+    contentFill: 'transparent'
+  },
+  interval: {
+    rect: {
+      fillOpacity: 0.8
+    }
+  },
+  line: {
+    line: {
+      lineWidth: 2
+    }
+  },
+  area: {
+    area: {
+      fillOpacity: 0.6
+    }
+  },
+  point: {
+    point: {
+      lineWidth: 1
+    }
+  }
+};
+var ACADEMY_THEME = {
+  type: 'academy',
+  view: {
+    viewFill: '#FFF',
+    plotFill: 'transparent',
+    mainFill: 'transparent',
+    contentFill: 'transparent'
+  },
+  interval: {
+    rect: {
+      fillOpacity: 0.8
+    }
+  },
+  line: {
+    line: {
+      lineWidth: 2
+    }
+  },
+  area: {
+    area: {
+      fillOpacity: 0.6
+    }
+  },
+  point: {
+    point: {
+      lineWidth: 1
+    }
+  }
+};
+export var THEME_MAP = {
+  default: DEFAULT_THEME,
+  academy: ACADEMY_THEME,
+  dark: DARK_THEME
+};
+
+/**
+ * Get normalized theme name for G2.
+ * Converts 'default' to 'light' for G2 compatibility.
+ */
+export var getTheme = function getTheme(theme) {
+  return theme === 'default' ? 'light' : theme;
+};
+
+/**
+ * Get theme object from THEME_MAP.
+ * This should be used for visualization components to properly support dark theme with multiple marks.
+ */
+export var getThemeObject = function getThemeObject(theme) {
+  return THEME_MAP[theme] || THEME_MAP.default;
+};
+
+/**
+ * Get theme color palette based on theme name.
+ */
+export var getThemeColors = function getThemeColors(theme) {
+  switch (theme) {
+    case 'academy':
+      return ACADEMY_COLOR_PALETTE;
+    case 'dark':
+    case 'default':
+    default:
+      return DEFAULT_COLOR_PALETTE;
+  }
+};
+
+/**
+ * Get background color based on theme.
+ */
+export var getBackgroundColor = function getBackgroundColor(theme) {
+  switch (theme) {
+    case 'dark':
+      return '#000';
+    case 'academy':
+    case 'default':
+    default:
+      return '#FFF';
+  }
+};

package/dist/esm/vis/area/index.d.ts

@@ -0,0 +1,60 @@
+import type { VisualizationOptions } from '../../types';
+/**
+ * AreaDataItem is the type for each data item in the area chart.
+ */
+export type AreaDataItem = {
+    time: string | number;
+    value: number;
+    group?: string;
+};
+/**
+ * AreaConfig defines the configuration for rendering the area chart.
+ */
+export interface AreaConfig {
+    type?: 'area';
+    data: AreaDataItem[];
+    stack?: boolean;
+    title?: string;
+    axisXTitle?: string;
+    axisYTitle?: string;
+    theme?: 'default' | 'academy' | 'dark';
+    style?: {
+        backgroundColor?: string;
+        palette?: string[];
+        lineWidth?: number;
+    };
+}
+/**
+ * AreaInstance represents an area chart instance with render and destroy methods.
+ */
+export interface AreaInstance {
+    render: (config: AreaConfig) => void;
+    destroy: () => void;
+}
+/**
+ * Area chart component using G2 5.0.
+ *
+ * @example
+ * ```ts
+ * const area = Area({
+ *   container: '#container',
+ *   width: 600,
+ *   height: 400,
+ * });
+ *
+ * area.render({
+ *   type: 'area',
+ *   data: [
+ *     { time: '1 月', value: 23.895 },
+ *     { time: '2 月', value: 23.695 },
+ *     { time: '3 月', value: 23.655 },
+ *   ],
+ *   title: '1月到3月股票价格的变化',
+ *   axisXTitle: '月份',
+ *   axisYTitle: '价格',
+ * });
+ *
+ * area.destroy();
+ * ```
+ */
+export declare const Area: (options: VisualizationOptions) => AreaInstance;