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

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

@@ -5,7 +5,7 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import { Chart } from '@antv/g2';
-import { getBackgroundColor, getThemeColors, getThemeObject } from "../../util/theme";
+import { getBackgroundColor, getThemeObject, normalizePalette } from "../../util/theme";
 
 /**
  * ColumnDataItem is the type for each data item in the column chart.
@@ -57,7 +57,7 @@ export var Column = function Column(options) {
    * Render the column chart with the given configuration.
    */
   var render = function render(config) {
-    var _data$, _style$palette;
+    var _data$;
     var _config$data = config.data,
       data = _config$data === void 0 ? [] : _config$data,
       _config$theme = config.theme,
@@ -77,7 +77,7 @@ export var Column = function Column(options) {
       chart.destroy();
     }
     var hasGroupField = data.length > 0 && ((_data$ = data[0]) === null || _data$ === void 0 ? void 0 : _data$.group) !== undefined;
-    var colors = style.palette || getThemeColors(theme);
+    var colors = normalizePalette(style.palette, theme);
     var backgroundColor = style.backgroundColor || getBackgroundColor(theme);
 
     // Create chart
@@ -93,8 +93,8 @@ export var Column = function Column(options) {
     var transform = [];
     var radiusStyle = {};
 
-    // Set radius style for default theme
-    if (theme === 'default') {
+    // academy theme uses no rounded corners; other themes use rounded top corners
+    if (theme !== 'academy') {
       radiusStyle = {
         radiusTopLeft: 4,
         radiusTopRight: 4
@@ -133,7 +133,7 @@ export var Column = function Column(options) {
       y: {
         nice: true
       }
-    }, (_style$palette = style.palette) !== null && _style$palette !== void 0 && _style$palette.length ? {
+    }, style.palette ? {
       color: {
         range: colors
       }
@@ -143,6 +143,7 @@ export var Column = function Column(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
     var chartOptions = {
+      animate: false,
       type: 'interval',
       data: data,
       title: title !== null && title !== void 0 ? title : '',

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

@@ -1,3 +1,9 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -5,7 +11,7 @@ function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symb
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 import { Chart } from '@antv/g2';
-import { getBackgroundColor, getThemeColors, getThemeObject } from "../../util/theme";
+import { getBackgroundColor, getThemeObject, normalizePalette } from "../../util/theme";
 
 /**
  * DualAxesSeriesItem defines a single series in the dual-axes chart.
@@ -94,7 +100,7 @@ export var DualAxes = function DualAxes(options) {
     }
     var _style$startAtZero = style.startAtZero,
       startAtZero = _style$startAtZero === void 0 ? false : _style$startAtZero;
-    var colors = style.palette || getThemeColors(theme);
+    var colors = normalizePalette(style.palette, theme);
     var backgroundColor = style.backgroundColor || getBackgroundColor(theme);
 
     // Transform data
@@ -142,11 +148,12 @@ export var DualAxes = function DualAxes(options) {
               title: item.axisYTitle || ''
             }
           },
-          style: {
-            columnWidthRatio: 0.8,
+          style: _objectSpread({
+            columnWidthRatio: 0.8
+          }, theme !== 'academy' ? {
             radiusTopLeft: 4,
             radiusTopRight: 4
-          }
+          } : {})
         };
       } else {
         // line type
@@ -186,6 +193,7 @@ export var DualAxes = function DualAxes(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
     var chartOptions = {
+      animate: false,
       type: 'view',
       data: data,
       title: title !== null && title !== void 0 ? title : '',

package/dist/esm/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;

package/dist/esm/vis/fishbone-diagram/index.js

@@ -0,0 +1,219 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["children"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import { Graph, treeToGraphData } from '@antv/g6';
+import { getBackgroundColor, getTheme, normalizePalette } from "../../util/theme";
+
+/**
+ * FishboneDiagramConfig defines the configuration for rendering the fishbone diagram.
+ */
+
+/**
+ * FishboneDiagramInstance represents a fishbone diagram instance.
+ */
+
+var FONT_FAMILY = 'system-ui, sans-serif';
+function getNodeSize(id, depth) {
+  return depth === 0 ? [measureText(id, 24, 'bold') + 80, 70] : depth === 1 ? [measureText(id, 18) + 50, 42] : [2, 30];
+}
+var measureText = function () {
+  var canvas = null;
+  return function (text) {
+    var fontSize = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 12;
+    var fontWeight = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'normal';
+    if (typeof document === 'undefined') return text.length * fontSize * 0.6;
+    if (!canvas) canvas = document.createElement('canvas');
+    var ctx = canvas.getContext('2d');
+    if (!ctx) return 0;
+    ctx.font = "".concat(fontWeight, " ").concat(fontSize, "px ").concat(FONT_FAMILY);
+    return ctx.measureText(text).width;
+  };
+}();
+
+/**
+ * Convert name-based tree to G6 tree format (name → id).
+ */
+function toG6TreeData(node) {
+  return {
+    id: node.name,
+    children: (node.children || []).map(toG6TreeData)
+  };
+}
+
+/**
+ * Convert GPT-Vis tree data to flat G6 graph data, attaching depth to each node.
+ */
+function convertData(data) {
+  return treeToGraphData(toG6TreeData(data), {
+    getNodeData: function getNodeData(datum, depth) {
+      datum.depth = depth;
+      if (!datum.children) return datum;
+      var children = datum.children,
+        rest = _objectWithoutProperties(datum, _excluded);
+      return _objectSpread(_objectSpread({}, rest), {}, {
+        children: children.map(function (c) {
+          return c.id;
+        })
+      });
+    }
+  });
+}
+
+/**
+ * Assign a unique palette color to each depth-1 branch node so that each
+ * branch is visually distinct, matching the v0.6.1 multi-color style.
+ */
+function assignBranchColors(graphData, palette) {
+  var nodes = graphData.nodes || [];
+  var colorIndex = 0;
+  nodes.filter(function (n) {
+    return n.depth === 1;
+  }).forEach(function (n) {
+    n.style = n.style || {};
+    n.style.branchColor = palette[colorIndex++ % palette.length];
+  });
+}
+
+/**
+ * FishboneDiagram chart component using G6 with fishbone layout.
+ */
+export var FishboneDiagram = function FishboneDiagram(options) {
+  var container = options.container,
+    width = options.width,
+    height = options.height,
+    _options$theme = options.theme,
+    chartTheme = _options$theme === void 0 ? 'default' : _options$theme;
+  var graph = null;
+  var render = function render(config) {
+    var data = config.data,
+      _config$theme = config.theme,
+      theme = _config$theme === void 0 ? chartTheme : _config$theme,
+      title = config.title,
+      _config$style = config.style,
+      _style = _config$style === void 0 ? {} : _config$style;
+    if (!(data !== null && data !== void 0 && data.name)) {
+      throw new Error('FishboneDiagram: data with a name field is required');
+    }
+    if (graph) {
+      graph.destroy();
+      graph = null;
+    }
+    var containerEl = typeof container === 'string' ? document.querySelector(container) : container;
+    if (!containerEl) throw new Error('FishboneDiagram: container element not found');
+    containerEl.innerHTML = '';
+
+    // Theme-derived colors, allowing style.palette to override the theme default
+    var isDark = theme === 'dark';
+    var backgroundColor = _style.backgroundColor || getBackgroundColor(theme);
+    var palette = normalizePalette(_style.palette, theme);
+    var rootFill = isDark ? '#2a2a2a' : '#EFF0F0';
+    var rootLabelFill = isDark ? '#e0e0e0' : '#262626';
+    var leafLabelFill = isDark ? '#c0c0c0' : '#262626';
+    var edgeStroke = isDark ? '#555' : '#99ADD1';
+    containerEl.style.backgroundColor = backgroundColor;
+    var graphData = convertData(data);
+    assignBranchColors(graphData, palette);
+    graph = new Graph({
+      animation: false,
+      container: containerEl,
+      width: width,
+      height: height,
+      autoFit: 'view',
+      autoResize: true,
+      padding: title ? [46, 20, 20, 20] : 20,
+      theme: getTheme(theme),
+      plugins: title ? [{
+        key: 'title',
+        type: 'title',
+        title: title,
+        titleFill: isDark ? '#e0e6ed' : '#000',
+        titleFontFamily: 'sans-serif'
+      }] : [],
+      data: graphData,
+      node: {
+        type: 'rect',
+        style: function style(d) {
+          var _d$depth;
+          var depth = (_d$depth = d.depth) !== null && _d$depth !== void 0 ? _d$depth : 0;
+          var nodeStyle = {
+            radius: theme === 'academy' ? 0 : 8,
+            size: getNodeSize(String(d.id), depth),
+            labelText: String(d.id),
+            labelPlacement: 'left',
+            labelFontFamily: FONT_FAMILY
+          };
+          if (depth === 0) {
+            Object.assign(nodeStyle, {
+              fill: rootFill,
+              labelFill: rootLabelFill,
+              labelFontWeight: 'bold',
+              labelFontSize: 24,
+              labelOffsetY: 4,
+              labelPlacement: 'center'
+            });
+          } else if (depth === 1) {
+            var _d$style;
+            var color = ((_d$style = d.style) === null || _d$style === void 0 ? void 0 : _d$style.branchColor) || palette[0];
+            Object.assign(nodeStyle, {
+              fill: color,
+              labelFill: '#fff',
+              labelFontSize: 18,
+              labelPlacement: 'center'
+            });
+          } else {
+            Object.assign(nodeStyle, {
+              fill: 'transparent',
+              labelFill: leafLabelFill,
+              labelFontSize: 16
+            });
+          }
+          if (_style.texture === 'rough') {
+            nodeStyle.lineWidth = 0.5;
+          }
+          return nodeStyle;
+        }
+      },
+      edge: {
+        type: 'polyline',
+        style: _objectSpread({
+          lineWidth: 3,
+          stroke: edgeStroke
+        }, _style.texture === 'rough' ? {
+          labelFontFamily: 'Comic Sans MS'
+        } : {})
+      },
+      layout: {
+        type: 'fishbone',
+        direction: 'RL',
+        hGap: 40,
+        vGap: 60
+      },
+      behaviors: ['drag-canvas']
+    });
+    graph.render();
+  };
+  var destroy = function destroy() {
+    if (graph) {
+      graph.destroy();
+      graph = null;
+    }
+  };
+  return {
+    render: render,
+    destroy: destroy,
+    zoomTo: function zoomTo(zoom) {
+      var _graph;
+      return (_graph = graph) === null || _graph === void 0 ? void 0 : _graph.zoomTo(zoom);
+    },
+    getZoom: function getZoom() {
+      var _graph$getZoom, _graph2;
+      return (_graph$getZoom = (_graph2 = graph) === null || _graph2 === void 0 ? void 0 : _graph2.getZoom()) !== null && _graph$getZoom !== void 0 ? _graph$getZoom : 1;
+    }
+  };
+};

package/dist/esm/vis/flow-diagram/index.d.ts

@@ -0,0 +1,27 @@
+import type { GraphData, VisualizationOptions } from '../../types';
+/**
+ * FlowDiagramConfig defines the configuration for rendering the flow diagram.
+ */
+export interface FlowDiagramConfig {
+    type?: 'flow-diagram';
+    data: GraphData;
+    title?: string;
+    theme?: 'default' | 'academy' | 'dark';
+    style?: {
+        backgroundColor?: string;
+        palette?: string[];
+    };
+}
+/**
+ * FlowDiagramInstance represents a flow diagram instance with render and destroy methods.
+ */
+export interface FlowDiagramInstance {
+    render: (config: FlowDiagramConfig) => void;
+    destroy: () => void;
+    zoomTo: (zoom: number) => void;
+    getZoom: () => number | undefined;
+}
+/**
+ * FlowDiagram chart component using G6 5.0 with dagre layout.
+ */
+export declare const FlowDiagram: (options: VisualizationOptions) => FlowDiagramInstance;