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

package/dist/cjs/syntax/parser.d.ts

@@ -8,9 +8,12 @@
  * - `data` - Starts a data array section
  * - `  - key value` - Array item with key-value pairs
  * - `  - value` - Simple array item (for flat arrays like histogram data)
+ * - `  - "value with spaces"` - Quoted string item; single or double quotes both supported.
+ *                               Quotes are required when the value contains spaces; optional otherwise.
+ *                               Quoted values are never coerced to numbers or booleans.
  * - `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`)
+ * - `palette` inside `style` uses array syntax with dash-prefixed items
  * - `children` - Nested array for hierarchical data (mind-map, treemap, etc.)
  *
  * @example
@@ -24,7 +27,10 @@
  * innerRadius: 0.6
  * style
  *   backgroundColor #333
- *   palette #ff5a5f #1fb6ff #13ce66
+ *   palette
+ *     - #ff5a5f
+ *     - #1fb6ff
+ *     - #13ce66
  * ```
  *
  * @example Simple array (histogram)
@@ -37,6 +43,15 @@
  * binNumber 5
  * ```
  *
+ * @example Quoted string values (values containing spaces)
+ * ```
+ * vis dual-axes
+ * categories
+ *   - "North America"
+ *   - '东南 亚'
+ *   - 欧洲
+ * ```
+ *
  * @example Hierarchical data (mind-map)
  * ```
  * vis mind-map

package/dist/cjs/syntax/parser.js

@@ -23,13 +23,24 @@ __export(parser_exports, {
   parse: () => parse
 });
 module.exports = __toCommonJS(parser_exports);
-var ARRAY_SECTIONS = /* @__PURE__ */ new Set(["data", "categories", "series", "children"]);
+var ARRAY_SECTIONS = /* @__PURE__ */ new Set(["data", "categories", "series", "children", "nodes", "edges"]);
 var OBJECT_SECTIONS = /* @__PURE__ */ new Set(["style"]);
+function isQuotedString(s) {
+  if (s.length < 2)
+    return false;
+  const quote = s[0];
+  if (quote !== '"' && quote !== "'")
+    return false;
+  return s.endsWith(quote) && s.indexOf(quote, 1) === s.length - 1;
+}
 function parseValue(value) {
   const trimmed = value.trim();
   if (trimmed === "") {
     return "";
   }
+  if (isQuotedString(trimmed)) {
+    return trimmed.slice(1, -1);
+  }
   if (trimmed === "true")
     return true;
   if (trimmed === "false")
@@ -40,44 +51,41 @@ function parseValue(value) {
   }
   return trimmed;
 }
-function parseMultipleValues(values) {
-  const trimmed = values.trim();
-  const parts = trimmed.split(/\s+/).filter((p) => p.length > 0);
-  if (parts.length === 0) {
-    return "";
+function parseKeyValue(raw) {
+  const text = raw.trim();
+  if (!text)
+    return null;
+  const match = text.match(/^([^:\s=]+)\s*[:=]\s*(.*)$/);
+  if (match) {
+    return { key: match[1], value: match[2] };
   }
-  if (parts.length === 1) {
-    return parseValue(parts[0]);
+  const matchSpace = text.match(/^([^\s]+)\s+(.*)$/);
+  if (matchSpace) {
+    return { key: matchSpace[1], value: matchSpace[2] };
   }
-  return parts.map(parseValue);
-}
-function parseKeyValue(line) {
-  const trimmed = line.trim();
-  const colonMatch = trimmed.match(/^([a-zA-Z_][a-zA-Z0-9_-]*)\s*:\s*(.*)$/);
-  if (colonMatch) {
-    return { key: colonMatch[1], value: colonMatch[2] };
-  }
-  const spaceMatch = trimmed.match(/^([a-zA-Z_][a-zA-Z0-9_-]*)\s+(.+)$/);
-  if (spaceMatch) {
-    return { key: spaceMatch[1], value: spaceMatch[2] };
-  }
-  const singleKey = trimmed.match(/^([a-zA-Z_][a-zA-Z0-9_-]*)$/);
-  if (singleKey) {
-    return { key: singleKey[1], value: "" };
-  }
-  return null;
+  return { key: text, value: "" };
 }
 function isSimpleValue(line) {
   const trimmed = line.trim();
+  if (isQuotedString(trimmed)) {
+    return true;
+  }
   const hasKeyValue = parseKeyValue(trimmed);
   if (hasKeyValue && hasKeyValue.value !== "") {
     return false;
   }
   return true;
 }
+var TAB_INDENT_WIDTH = 2;
 function getIndentLevel(line) {
-  const match = line.match(/^(\s*)/);
-  return match ? match[1].length : 0;
+  const match = line.match(/^([\t ]*)/);
+  if (!match)
+    return 0;
+  let w = 0;
+  for (const ch of match[1]) {
+    w += ch === "	" ? TAB_INDENT_WIDTH : 1;
+  }
+  return w;
 }
 function isArrayItemLine(line) {
   return line.trim().startsWith("-");
@@ -106,6 +114,28 @@ function parseLines(syntax) {
   }
   return result;
 }
+function parseTreeNode(lines, startIndex, baseIndent) {
+  const node = {};
+  let i = startIndex;
+  while (i < lines.length) {
+    const { trimmed, indent } = lines[i];
+    if (indent <= baseIndent)
+      break;
+    const kv = parseKeyValue(trimmed);
+    if (kv) {
+      if (kv.key === "children" && kv.value === "") {
+        const { items: childItems, nextIndex } = parseArraySection(lines, i + 1, indent);
+        node.children = childItems;
+        i = nextIndex;
+        continue;
+      } else {
+        node[kv.key] = parseValue(kv.value);
+      }
+    }
+    i++;
+  }
+  return { node, nextIndex: i };
+}
 function parseArraySection(lines, startIndex, baseIndent) {
   const items = [];
   let currentItem = null;
@@ -117,7 +147,7 @@ function parseArraySection(lines, startIndex, baseIndent) {
     if (indent <= baseIndent && !isArrayItemLine(trimmed)) {
       break;
     }
-    if (isArrayItemLine(trimmed) && indent <= baseIndent) {
+    if (isArrayItemLine(trimmed) && indent < baseIndent) {
       break;
     }
     const isThisLevelItem = isArrayItemLine(trimmed) && (firstItemIndent === -1 || indent === firstItemIndent);
@@ -148,6 +178,30 @@ function parseArraySection(lines, startIndex, baseIndent) {
       continue;
     }
     if (isArrayItemLine(trimmed) && firstItemIndent !== -1 && indent !== firstItemIndent) {
+      if (indent < firstItemIndent && indent > baseIndent && currentItem !== null && !isSimpleArray) {
+        items.push(currentItem);
+        const itemContent = parseArrayItemLine(trimmed);
+        currentItem = {};
+        const kv = parseKeyValue(itemContent);
+        if (kv) {
+          currentItem[kv.key] = parseValue(kv.value);
+        }
+        firstItemIndent = indent;
+        i++;
+        continue;
+      }
+      if (indent > firstItemIndent && currentItem !== null && !isSimpleArray) {
+        items.push(currentItem);
+        const itemContent = parseArrayItemLine(trimmed);
+        currentItem = {};
+        const kv = parseKeyValue(itemContent);
+        if (kv) {
+          currentItem[kv.key] = parseValue(kv.value);
+        }
+        firstItemIndent = indent;
+        i++;
+        continue;
+      }
       i++;
       continue;
     }
@@ -159,9 +213,14 @@ function parseArraySection(lines, startIndex, baseIndent) {
           currentItem.children = childItems;
           i = nextIndex;
           continue;
-        } else {
-          currentItem[kv.key] = parseValue(kv.value);
         }
+        if (kv.key === "data" && kv.value === "") {
+          const { items: nestedData, nextIndex } = parseArraySection(lines, i + 1, indent);
+          currentItem.data = nestedData;
+          i = nextIndex;
+          continue;
+        }
+        currentItem[kv.key] = parseValue(kv.value);
       }
     }
     i++;
@@ -186,26 +245,80 @@ function parse(syntax) {
     const isSectionHeader = /^[a-zA-Z_][a-zA-Z0-9_-]*$/.test(trimmed) && indent === 0 && isKnownSection(trimmed);
     if (isSectionHeader) {
       if (ARRAY_SECTIONS.has(trimmed)) {
-        const { items, nextIndex } = parseArraySection(lines, i + 1, indent);
+        const sectionName = trimmed;
+        const nextIndex = i + 1;
+        let hasSubSections = false;
+        if (nextIndex < lines.length && lines[nextIndex].indent > indent) {
+          const nextTrimmed = lines[nextIndex].trimmed;
+          hasSubSections = /^[a-zA-Z_][a-zA-Z0-9_-]*$/.test(nextTrimmed) && !isArrayItemLine(nextTrimmed);
+        }
+        if (hasSubSections) {
+          const dataObj = {};
+          i++;
+          while (i < lines.length && lines[i].indent > indent) {
+            const subTrimmed = lines[i].trimmed;
+            const subIndent = lines[i].indent;
+            if (/^[a-zA-Z_][a-zA-Z0-9_-]*$/.test(subTrimmed) && !isArrayItemLine(subTrimmed)) {
+              const { items: subItems, nextIndex: subNext } = parseArraySection(
+                lines,
+                i + 1,
+                subIndent
+              );
+              dataObj[subTrimmed] = subItems;
+              i = subNext;
+            } else {
+              i++;
+            }
+          }
+          result[sectionName] = dataObj;
+          continue;
+        }
+        let isTreeRoot = false;
+        if (nextIndex < lines.length && lines[nextIndex].indent > indent) {
+          const firstTrimmed = lines[nextIndex].trimmed;
+          if (!isArrayItemLine(firstTrimmed) && !hasSubSections) {
+            isTreeRoot = true;
+          }
+        }
+        if (isTreeRoot) {
+          const { node, nextIndex: treeNext } = parseTreeNode(lines, i + 1, indent);
+          result[sectionName] = node;
+          i = treeNext;
+          continue;
+        }
+        const { items, nextIndex: arrNext } = parseArraySection(lines, i + 1, indent);
         if (items.length > 0) {
-          result[trimmed] = items;
+          result[sectionName] = items;
         }
-        i = nextIndex;
+        i = arrNext;
         continue;
       } else if (OBJECT_SECTIONS.has(trimmed)) {
         const sectionName = trimmed;
-        result[sectionName] = {};
+        const sectionObj = {};
+        result[sectionName] = sectionObj;
+        const sectionIndent = indent;
         i++;
         while (i < lines.length) {
           const { trimmed: innerTrimmed, indent: innerIndent } = lines[i];
-          if (innerIndent === 0) {
+          if (innerIndent <= sectionIndent) {
             break;
           }
+          if (isArrayItemLine(innerTrimmed)) {
+            i++;
+            continue;
+          }
           const kv = parseKeyValue(innerTrimmed);
           if (kv) {
-            result[sectionName][kv.key] = parseMultipleValues(
-              kv.value
-            );
+            if (kv.value === "" && i + 1 < lines.length) {
+              const nextLine = lines[i + 1];
+              if (nextLine.indent > innerIndent && isArrayItemLine(nextLine.trimmed)) {
+                const { items, nextIndex } = parseArraySection(lines, i + 1, innerIndent);
+                sectionObj[kv.key] = items;
+                i = nextIndex;
+                continue;
+              }
+            }
+            sectionObj[kv.key] = parseValue(kv.value);
           }
           i++;
         }

package/dist/cjs/util/container.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Resolve a container parameter to an HTMLElement.
+ * Supports CSS selectors (e.g., '#container', '.my-chart') and direct HTMLElement references.
+ */
+export declare function resolveContainer(container: string | HTMLElement): HTMLElement;

package/dist/cjs/util/container.js

@@ -0,0 +1,43 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/util/container.ts
+var container_exports = {};
+__export(container_exports, {
+  resolveContainer: () => resolveContainer
+});
+module.exports = __toCommonJS(container_exports);
+function resolveContainer(container) {
+  if (typeof container === "string") {
+    if (typeof document === "undefined") {
+      throw new Error(
+        `Container element "${container}" cannot be resolved in a non-browser environment.`
+      );
+    }
+    const el = document.querySelector(container);
+    if (!el) {
+      throw new Error(`Container element "${container}" not found`);
+    }
+    return el;
+  }
+  return container;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  resolveContainer
+});

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

@@ -19,3 +19,8 @@ export declare const getThemeColors: (theme: string) => string[];
  * Get background color based on theme.
  */
 export declare const getBackgroundColor: (theme: string) => string;
+/**
+ * Normalize palette to always return an array.
+ * Handles the case where a single color is parsed as a string instead of an array.
+ */
+export declare const normalizePalette: (palette: string | string[] | undefined, theme: string) => string[];

package/dist/cjs/util/theme.js

@@ -25,7 +25,8 @@ __export(theme_exports, {
   getBackgroundColor: () => getBackgroundColor,
   getTheme: () => getTheme,
   getThemeColors: () => getThemeColors,
-  getThemeObject: () => getThemeObject
+  getThemeObject: () => getThemeObject,
+  normalizePalette: () => normalizePalette
 });
 module.exports = __toCommonJS(theme_exports);
 var DEFAULT_COLOR_PALETTE = [
@@ -170,6 +171,11 @@ var getBackgroundColor = (theme) => {
       return "#FFF";
   }
 };
+var normalizePalette = (palette, theme) => {
+  if (!palette || Array.isArray(palette) && palette.length === 0)
+    return getThemeColors(theme);
+  return Array.isArray(palette) ? palette : [palette];
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ACADEMY_COLOR_PALETTE,
@@ -178,5 +184,6 @@ var getBackgroundColor = (theme) => {
   getBackgroundColor,
   getTheme,
   getThemeColors,
-  getThemeObject
+  getThemeObject,
+  normalizePalette
 });

package/dist/cjs/vis/area/index.js

@@ -45,7 +45,7 @@ var Area = (options) => {
     }
     const { lineWidth = 2 } = style;
     const hasGroupField = data.length > 0 && ((_a = data[0]) == null ? void 0 : _a.group) !== void 0;
-    const colors = style.palette || (0, import_theme.getThemeColors)(theme);
+    const colors = (0, import_theme.normalizePalette)(style.palette, theme);
     const backgroundColor = style.backgroundColor || (0, import_theme.getBackgroundColor)(theme);
     const fillColor = getLinearGradientColor(colors[0] || DEFAULT_COLOR);
     chart = new import_g2.Chart({
@@ -106,6 +106,7 @@ var Area = (options) => {
       ];
     }
     const chartOptions = {
+      animate: false,
       type: "view",
       data,
       title: title ?? "",

package/dist/cjs/vis/bar/index.js

@@ -28,7 +28,7 @@ var Bar = (options) => {
   const { container, width, height, theme: chartTheme = "default" } = options;
   let chart = null;
   const render = (config) => {
-    var _a, _b;
+    var _a;
     const {
       data = [],
       theme = chartTheme,
@@ -43,7 +43,7 @@ var Bar = (options) => {
       chart.destroy();
     }
     const hasGroupField = data.length > 0 && ((_a = data[0]) == null ? void 0 : _a.group) !== void 0;
-    const colors = style.palette || (0, import_theme.getThemeColors)(theme);
+    const colors = (0, import_theme.normalizePalette)(style.palette, theme);
     const backgroundColor = style.backgroundColor || (0, import_theme.getBackgroundColor)(theme);
     chart = new import_g2.Chart({
       container,
@@ -54,7 +54,7 @@ var Bar = (options) => {
     let encode = {};
     let transform = [];
     let radiusStyle = {};
-    if (theme === "default") {
+    if (theme !== "academy") {
       radiusStyle = { radiusTopLeft: 4, radiusTopRight: 4 };
     }
     if (hasGroupField && group) {
@@ -70,9 +70,10 @@ var Bar = (options) => {
     }
     const scaleConfig = {
       y: { nice: true },
-      ...((_b = style.palette) == null ? void 0 : _b.length) ? { color: { range: colors } } : {}
+      ...style.palette ? { color: { range: colors } } : {}
     };
     const chartOptions = {
+      animate: false,
       type: "interval",
       data,
       title: title ?? "",

package/dist/cjs/vis/boxplot/index.js

@@ -33,7 +33,7 @@ var Boxplot = (options) => {
     if (chart) {
       chart.destroy();
     }
-    const colors = style.palette || (0, import_theme.getThemeColors)(theme);
+    const colors = (0, import_theme.normalizePalette)(style.palette, theme);
     const backgroundColor = style.backgroundColor || (0, import_theme.getBackgroundColor)(theme);
     const startAtZero = style.startAtZero || false;
     const hasGroupField = ((_a = (data || [])[0]) == null ? void 0 : _a.group) !== void 0;
@@ -59,6 +59,7 @@ var Boxplot = (options) => {
       autoFit: true
     });
     const chartOptions = {
+      animate: false,
       type: "boxplot",
       data,
       title: title ?? "",
@@ -77,7 +78,11 @@ var Boxplot = (options) => {
         y: { nice: true, zero: startAtZero },
         color: { range: colors }
       },
-      style: { stroke: "black" },
+      // When hasGroupField is true, set point to false to prevent G2's Boxplot composite mark
+      // from splitting into box + point child marks. The point child mark does not inherit
+      // the `scale` config, causing legendFilter interaction to throw
+      // "Cannot read properties of undefined (reading 'color')" when clicking legend items.
+      style: { stroke: "black", ...hasGroupField ? { point: false } : {} },
       legend: {
         color: hasGroupField ? { position: "top" } : false
       },

package/dist/cjs/vis/column/index.js

@@ -28,7 +28,7 @@ var Column = (options) => {
   const { container, width, height, theme: chartTheme = "default" } = options;
   let chart = null;
   const render = (config) => {
-    var _a, _b;
+    var _a;
     const {
       data = [],
       theme = chartTheme,
@@ -43,7 +43,7 @@ var Column = (options) => {
       chart.destroy();
     }
     const hasGroupField = data.length > 0 && ((_a = data[0]) == null ? void 0 : _a.group) !== void 0;
-    const colors = style.palette || (0, import_theme.getThemeColors)(theme);
+    const colors = (0, import_theme.normalizePalette)(style.palette, theme);
     const backgroundColor = style.backgroundColor || (0, import_theme.getBackgroundColor)(theme);
     chart = new import_g2.Chart({
       container,
@@ -54,7 +54,7 @@ var Column = (options) => {
     let encode = {};
     let transform = [];
     let radiusStyle = {};
-    if (theme === "default") {
+    if (theme !== "academy") {
       radiusStyle = { radiusTopLeft: 4, radiusTopRight: 4 };
     }
     if (hasGroupField && group) {
@@ -70,9 +70,10 @@ var Column = (options) => {
     }
     const scaleConfig = {
       y: { nice: true },
-      ...((_b = style.palette) == null ? void 0 : _b.length) ? { color: { range: colors } } : {}
+      ...style.palette ? { color: { range: colors } } : {}
     };
     const chartOptions = {
+      animate: false,
       type: "interval",
       data,
       title: title ?? "",

package/dist/cjs/vis/dual-axes/index.js

@@ -43,7 +43,7 @@ var DualAxes = (options) => {
       chart.destroy();
     }
     const { startAtZero = false } = style;
-    const colors = style.palette || (0, import_theme.getThemeColors)(theme);
+    const colors = (0, import_theme.normalizePalette)(style.palette, theme);
     const backgroundColor = style.backgroundColor || (0, import_theme.getBackgroundColor)(theme);
     const data = transformData(series, categories);
     chart = new import_g2.Chart({
@@ -76,8 +76,7 @@ var DualAxes = (options) => {
           },
           style: {
             columnWidthRatio: 0.8,
-            radiusTopLeft: 4,
-            radiusTopRight: 4
+            ...theme !== "academy" ? { radiusTopLeft: 4, radiusTopRight: 4 } : {}
           }
         };
       } else {
@@ -103,6 +102,7 @@ var DualAxes = (options) => {
       }
     });
     const chartOptions = {
+      animate: false,
       type: "view",
       data,
       title: title ?? "",

package/dist/cjs/vis/fishbone-diagram/index.d.ts

@@ -0,0 +1,35 @@
+import type { VisualizationOptions } from '../../types';
+export interface FishboneNode {
+    name: string;
+    children?: FishboneNode[];
+}
+/**
+ * FishboneDiagramConfig defines the configuration for rendering the fishbone diagram.
+ */
+export interface FishboneDiagramConfig {
+    type?: 'fishbone-diagram';
+    data: FishboneNode;
+    theme?: 'default' | 'academy' | 'dark';
+    title?: string;
+    style?: {
+        /** Custom color palette for branch nodes, overrides theme default */
+        palette?: string[];
+        /** Canvas background color, overrides theme default */
+        backgroundColor?: string;
+        /** Node rendering style: 'rough' for hand-drawn look, 'default' for smooth */
+        texture?: 'rough' | 'default';
+    };
+}
+/**
+ * FishboneDiagramInstance represents a fishbone diagram instance.
+ */
+export interface FishboneDiagramInstance {
+    render: (config: FishboneDiagramConfig) => void;
+    destroy: () => void;
+    zoomTo: (zoom: number) => void;
+    getZoom: () => number | undefined;
+}
+/**
+ * FishboneDiagram chart component using G6 with fishbone layout.
+ */
+export declare const FishboneDiagram: (options: VisualizationOptions) => FishboneDiagramInstance;