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

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

@@ -0,0 +1,342 @@
+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 _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+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); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+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; }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+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 _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+import { ExtensionCategory, Graph, HoverActivate, idOf, register } from '@antv/g6';
+import { getBackgroundColor, normalizePalette } from "../../util/theme";
+
+/**
+ * FlowDiagramConfig defines the configuration for rendering the flow diagram.
+ */
+
+/**
+ * FlowDiagramInstance represents a flow diagram instance with render and destroy methods.
+ */
+
+var ACTIVE_COLOR = '#f6c523';
+var DEFAULT_NODE_WIDTH = 200;
+var DEFAULT_NODE_HEIGHT = 80;
+var HoverElement = /*#__PURE__*/function (_HoverActivate) {
+  _inherits(HoverElement, _HoverActivate);
+  var _super = _createSuper(HoverElement);
+  function HoverElement() {
+    _classCallCheck(this, HoverElement);
+    return _super.apply(this, arguments);
+  }
+  _createClass(HoverElement, [{
+    key: "getActiveIds",
+    value: function getActiveIds(event) {
+      var _this$context = this.context,
+        model = _this$context.model,
+        graph = _this$context.graph;
+      var targetType = event.targetType,
+        target = event.target;
+      var targetId = target.id;
+      var ids = [targetId];
+      if (targetType === 'edge') {
+        var edge = model.getEdgeDatum(targetId);
+        ids.push(edge.source, edge.target);
+      } else if (targetType === 'node') {
+        ids.push.apply(ids, _toConsumableArray(model.getRelatedEdgesData(targetId).map(idOf)));
+      }
+      graph.frontElement(ids);
+      return ids;
+    }
+  }]);
+  return HoverElement;
+}(HoverActivate);
+var behaviorRegistered = false;
+function ensureBehaviorRegistered() {
+  if (!behaviorRegistered) {
+    register(ExtensionCategory.BEHAVIOR, 'hover-element', HoverElement);
+    behaviorRegistered = true;
+  }
+}
+function escapeHtml() {
+  var str = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+}
+function createNodeHTML(d, color) {
+  var _d$data, _d$states, _d$states2;
+  var selectedBorderColor = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '#000';
+  var text = escapeHtml(((_d$data = d.data) === null || _d$data === void 0 ? void 0 : _d$data.text) || '');
+  var isHovered = (_d$states = d.states) === null || _d$states === void 0 ? void 0 : _d$states.includes('active');
+  var isSelected = (_d$states2 = d.states) === null || _d$states2 === void 0 ? void 0 : _d$states2.includes('selected');
+  var nodeColor = isHovered ? ACTIVE_COLOR : color;
+  return "\n    <div\n      data-node-key=\"".concat(escapeHtml(String(d.id)), "\"\n      style=\"\n        box-sizing: border-box;\n        width: ").concat(DEFAULT_NODE_WIDTH, "px;\n        min-height: ").concat(DEFAULT_NODE_HEIGHT, "px;\n        padding: 16px;\n        background: ").concat(nodeColor, ";\n        border: 3px solid ").concat(isSelected ? selectedBorderColor : nodeColor, ";\n        border-radius: 16px;\n        color: #fff;\n        font-size: 16px;\n        font-weight: 600;\n        line-height: 22px;\n        text-align: center;\n        white-space: normal;\n        word-break: break-word;\n        overflow-wrap: anywhere;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n      \"\n    >\n      <div style=\"width: 100%;\">\n        ").concat(text, "\n      </div>\n    </div>\n  ");
+}
+function measureAndUpdateNodeSizes(graph, container, nodeColorMap, selectedBorderColor) {
+  var nodes = graph.getNodeData();
+  var updatedNodes = nodes.map(function (node) {
+    var dom = container.querySelector("[data-node-key=\"".concat(CSS.escape(String(node.id)), "\"]"));
+    var height = DEFAULT_NODE_HEIGHT;
+    if (dom) {
+      height = Math.max(DEFAULT_NODE_HEIGHT, Math.ceil(dom.getBoundingClientRect().height));
+    }
+    return {
+      id: node.id,
+      style: {
+        size: [DEFAULT_NODE_WIDTH, height],
+        dx: -DEFAULT_NODE_WIDTH / 2,
+        dy: -height / 2,
+        innerHTML: createNodeHTML(node, nodeColorMap.get(String(node.id)) || '#1783FF', selectedBorderColor)
+      }
+    };
+  });
+  graph.updateNodeData(updatedNodes);
+  graph.render();
+}
+
+/**
+ * FlowDiagram chart component using G6 5.0 with dagre layout.
+ */
+export var FlowDiagram = function FlowDiagram(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,
+      title = config.title,
+      _config$theme = config.theme,
+      theme = _config$theme === void 0 ? chartTheme : _config$theme,
+      _config$style = config.style,
+      style = _config$style === void 0 ? {} : _config$style;
+    if (graph) {
+      graph.destroy();
+      graph = null;
+    }
+    ensureBehaviorRegistered();
+    var colors = normalizePalette(style.palette, theme);
+    var backgroundColor = style.backgroundColor || getBackgroundColor(theme);
+
+    // Resolve container element
+    var containerEl;
+    if (typeof container === 'string') {
+      var el = document.getElementById(container.replace(/^#/, ''));
+      if (!el) throw new Error("Container element \"".concat(container, "\" not found"));
+      containerEl = el;
+    } else {
+      containerEl = container;
+    }
+    containerEl.style.backgroundColor = backgroundColor;
+
+    // Compute node ranks (BFS layers) for color assignment by row
+    var nodeRankMap = new Map();
+    var incomingTargets = new Set(data.edges.map(function (e) {
+      return e.target;
+    }));
+    var childrenMap = new Map();
+    var _iterator = _createForOfIteratorHelper(data.edges),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var edge = _step.value;
+        var list = childrenMap.get(edge.source) || [];
+        list.push(edge.target);
+        childrenMap.set(edge.source, list);
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    var roots = data.nodes.filter(function (n) {
+      return !incomingTargets.has(n.name);
+    }).map(function (n) {
+      return n.name;
+    });
+    var queue = roots.map(function (name) {
+      return {
+        name: name,
+        rank: 0
+      };
+    });
+    var head = 0;
+    while (head < queue.length) {
+      var _queue$head = queue[head++],
+        name = _queue$head.name,
+        rank = _queue$head.rank;
+      if (nodeRankMap.has(name)) continue;
+      nodeRankMap.set(name, rank);
+      var _iterator2 = _createForOfIteratorHelper(childrenMap.get(name) || []),
+        _step2;
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var child = _step2.value;
+          if (!nodeRankMap.has(child)) {
+            queue.push({
+              name: child,
+              rank: rank + 1
+            });
+          }
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+    }
+
+    // Convert GraphData (name-based) to G6 format (id-based), color by rank
+    var nodeColorMap = new Map();
+    var g6Nodes = data.nodes.map(function (node) {
+      var rank = nodeRankMap.get(node.name) || 0;
+      var color = colors[rank % colors.length];
+      nodeColorMap.set(node.name, color);
+      return {
+        id: node.name,
+        data: {
+          text: node.name
+        }
+      };
+    });
+    var nodeNames = new Set(data.nodes.map(function (n) {
+      return n.name;
+    }));
+    var g6Edges = data.edges.filter(function (edge) {
+      return nodeNames.has(edge.source) && nodeNames.has(edge.target);
+    }).map(function (edge, index) {
+      return {
+        id: "edge-".concat(index),
+        source: edge.source,
+        target: edge.target,
+        data: {
+          text: edge.name || ''
+        }
+      };
+    });
+    var isDark = theme === 'dark';
+    var edgeStroke = isDark ? '#5a6b7f' : '#8b9baf';
+    var labelFill = isDark ? '#aab4c0' : '#8b9baf';
+    var labelBgFill = isDark ? '#1a1a2e' : '#f8f8f8';
+    var labelBgStroke = isDark ? '#5a6b7f' : '#8b9baf';
+    var selectedBorder = isDark ? '#fff' : '#000';
+    graph = new Graph({
+      animation: false,
+      container: containerEl,
+      width: width,
+      height: height,
+      theme: theme,
+      data: {
+        nodes: g6Nodes,
+        edges: g6Edges
+      },
+      autoFit: 'view',
+      autoResize: true,
+      padding: 20,
+      plugins: title ? [{
+        key: 'title',
+        type: 'title',
+        title: title,
+        titleFill: isDark ? '#e0e6ed' : '#1a1a2e'
+      }] : [],
+      node: {
+        type: 'html',
+        style: function style(d) {
+          var color = nodeColorMap.get(String(d.id)) || colors[0];
+          return {
+            size: [DEFAULT_NODE_WIDTH, DEFAULT_NODE_HEIGHT],
+            dx: -DEFAULT_NODE_WIDTH / 2,
+            dy: -DEFAULT_NODE_HEIGHT / 2,
+            innerHTML: createNodeHTML(d, color, selectedBorder),
+            ports: [{
+              placement: 'top'
+            }, {
+              placement: 'bottom'
+            }]
+          };
+        },
+        state: {
+          active: {
+            halo: false
+          },
+          selected: {
+            halo: false
+          }
+        }
+      },
+      edge: {
+        type: 'polyline',
+        style: {
+          lineWidth: 3,
+          radius: 20,
+          stroke: edgeStroke,
+          endArrow: true,
+          labelText: function labelText(d) {
+            var _d$data2;
+            return ((_d$data2 = d.data) === null || _d$data2 === void 0 ? void 0 : _d$data2.text) || '';
+          },
+          labelFill: labelFill,
+          labelFontWeight: 600,
+          labelBackground: true,
+          labelBackgroundFill: labelBgFill,
+          labelBackgroundOpacity: 1,
+          labelBackgroundLineWidth: 3,
+          labelBackgroundStroke: labelBgStroke,
+          labelPadding: [1, 10],
+          labelBackgroundRadius: 4,
+          router: {
+            type: 'orth',
+            padding: 40
+          }
+        },
+        state: {
+          active: {
+            stroke: ACTIVE_COLOR,
+            labelBackgroundStroke: ACTIVE_COLOR,
+            halo: false
+          }
+        }
+      },
+      layout: {
+        type: 'antv-dagre'
+      },
+      behaviors: ['drag-canvas', 'hover-element', 'click-select']
+    });
+    graph.render();
+
+    // Measure real node heights after initial render
+    graph.once('afterrender', function () {
+      if (graph) {
+        measureAndUpdateNodeSizes(graph, containerEl, nodeColorMap, selectedBorder);
+      }
+    });
+  };
+  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 _graph2;
+      return (_graph2 = graph) === null || _graph2 === void 0 ? void 0 : _graph2.getZoom();
+    }
+  };
+};

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

@@ -1,5 +1,5 @@
 import { Chart } from '@antv/g2';
-import { getBackgroundColor, getThemeColors, getThemeObject } from "../../util/theme";
+import { getBackgroundColor, getThemeObject, normalizePalette } from "../../util/theme";
 
 /**
  * FunnelDataItem is the type for each data item in the funnel chart.
@@ -65,7 +65,7 @@ export var Funnel = function Funnel(options) {
     }
 
     // Get colors from style.palette or theme defaults
-    var colors = style.palette || getThemeColors(theme);
+    var colors = normalizePalette(style.palette, theme);
     var backgroundColor = style.backgroundColor || getBackgroundColor(theme);
 
     // Helper function to calculate conversion rate
@@ -87,6 +87,7 @@ export var Funnel = function Funnel(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/histogram/index.js

@@ -1,5 +1,5 @@
 import { Chart } from '@antv/g2';
-import { getBackgroundColor, getThemeColors, getThemeObject } from "../../util/theme";
+import { getBackgroundColor, getThemeObject, normalizePalette } from "../../util/theme";
 
 /**
  * HistogramConfig defines the configuration for rendering the histogram chart.
@@ -60,7 +60,7 @@ export var Histogram = function Histogram(options) {
     }
 
     // Get colors from style.palette or theme defaults
-    var colors = style.palette || getThemeColors(theme);
+    var colors = normalizePalette(style.palette, theme);
     var backgroundColor = style.backgroundColor || getBackgroundColor(theme);
 
     // Create chart
@@ -75,6 +75,7 @@ export var Histogram = function Histogram(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 : '',
@@ -116,11 +117,9 @@ export var Histogram = function Histogram(options) {
       },
       legend: false,
       tooltip: {
-        items: [function (d) {
-          return {
-            name: '频数',
-            value: d.count
-          };
+        items: [{
+          channel: 'y',
+          name: '频数'
         }]
       },
       viewStyle: {

package/dist/esm/vis/indented-tree/index.d.ts

@@ -0,0 +1,40 @@
+import type { VisualizationOptions } from '../../types';
+/**
+ * Indented tree node data — only name + optional children, no description.
+ * Aligns with the official G6 indented tree example data structure.
+ */
+export interface IndentedTreeData {
+    name: string;
+    children?: IndentedTreeData[];
+}
+/**
+ * IndentedTreeConfig defines the configuration for rendering the indented tree.
+ */
+export interface IndentedTreeConfig {
+    type?: 'indented-tree';
+    data: IndentedTreeData;
+    theme?: 'default' | 'academy' | 'dark';
+    title?: string;
+    /** Layout direction: 'LR' = root left (default), 'RL' = root right, 'H' = root center */
+    direction?: 'LR' | 'RL' | 'H';
+    style?: {
+        backgroundColor?: string;
+        palette?: string[];
+    };
+}
+/**
+ * IndentedTreeInstance represents a chart instance with render and destroy methods.
+ */
+export interface IndentedTreeInstance {
+    render: (config: IndentedTreeConfig) => void;
+    destroy: () => void;
+    zoomTo: (zoom: number) => void;
+    getZoom: () => number | undefined;
+}
+/**
+ * IndentedTree — G6 5 indented layout for static DSL trees (no collapse/add UI).
+ * Uses built-in `rect` nodes and `line` edges. Tree edges must have explicit ids (see render) to avoid
+ * colliding with path-based node ids under G6's default `${source}-${target}` edge id rule.
+ * Based on: https://g6.antv.antgroup.com/examples/scene-case/tree-graph#indented-tree
+ */
+export declare const IndentedTree: (options: VisualizationOptions) => IndentedTreeInstance;