@antv/gpt-vis 0.6.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.d.ts

@@ -0,0 +1,54 @@
+import type { VisualizationOptions } from '../../types';
+/**
+ * FunnelDataItem is the type for each data item in the funnel chart.
+ */
+export type FunnelDataItem = {
+    category: string;
+    value: number;
+};
+/**
+ * FunnelConfig defines the configuration for rendering the funnel chart.
+ */
+export interface FunnelConfig {
+    type?: 'funnel';
+    data: FunnelDataItem[];
+    theme?: 'default' | 'academy' | 'dark';
+    title?: string;
+    style?: {
+        backgroundColor?: string;
+        palette?: string[];
+    };
+}
+/**
+ * FunnelInstance represents a funnel chart instance with render and destroy methods.
+ */
+export interface FunnelInstance {
+    render: (config: FunnelConfig) => void;
+    destroy: () => void;
+}
+/**
+ * Funnel chart component using G2 5.0.
+ *
+ * @example
+ * ```ts
+ * const funnel = Funnel({
+ *   container: '#container',
+ *   width: 600,
+ *   height: 400,
+ * });
+ *
+ * funnel.render({
+ *   type: 'funnel',
+ *   data: [
+ *     { category: '访问', value: 1000 },
+ *     { category: '咨询', value: 600 },
+ *     { category: '下单', value: 300 },
+ *     { category: '成交', value: 120 },
+ *   ],
+ *   theme: 'academy'
+ * });
+ *
+ * funnel.destroy();
+ * ```
+ */
+export declare const Funnel: (options: VisualizationOptions) => FunnelInstance;

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

@@ -0,0 +1,247 @@
+import { Chart } from '@antv/g2';
+import { getBackgroundColor, getThemeObject, normalizePalette } from "../../util/theme";
+
+/**
+ * FunnelDataItem is the type for each data item in the funnel chart.
+ */
+
+/**
+ * FunnelConfig defines the configuration for rendering the funnel chart.
+ */
+
+/**
+ * FunnelInstance represents a funnel chart instance with render and destroy methods.
+ */
+
+/**
+ * Funnel chart component using G2 5.0.
+ *
+ * @example
+ * ```ts
+ * const funnel = Funnel({
+ *   container: '#container',
+ *   width: 600,
+ *   height: 400,
+ * });
+ *
+ * funnel.render({
+ *   type: 'funnel',
+ *   data: [
+ *     { category: '访问', value: 1000 },
+ *     { category: '咨询', value: 600 },
+ *     { category: '下单', value: 300 },
+ *     { category: '成交', value: 120 },
+ *   ],
+ *   theme: 'academy'
+ * });
+ *
+ * funnel.destroy();
+ * ```
+ */
+export var Funnel = function Funnel(options) {
+  var container = options.container,
+    width = options.width,
+    height = options.height,
+    _options$theme = options.theme,
+    chartTheme = _options$theme === void 0 ? 'default' : _options$theme;
+  var chart = null;
+
+  /**
+   * Render the funnel chart with the given configuration.
+   */
+  var render = function render(config) {
+    var _data$, _data, _data$2, _data2, _data$3, _data3;
+    var _config$data = config.data,
+      data = _config$data === void 0 ? [] : _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;
+
+    // Clean up previous chart if exists
+    if (chart) {
+      chart.destroy();
+    }
+
+    // Get colors from style.palette or theme defaults
+    var colors = normalizePalette(style.palette, theme);
+    var backgroundColor = style.backgroundColor || getBackgroundColor(theme);
+
+    // Helper function to calculate conversion rate
+    var conversionRate = function conversionRate(start, end) {
+      return "".concat((end / start * 100).toFixed(2), " %");
+    };
+
+    // Create chart
+    chart = new Chart({
+      container: container,
+      width: width,
+      height: height,
+      autoFit: true,
+      paddingLeft: 40,
+      paddingRight: 68
+    });
+
+    // Configure chart 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 : '',
+      children: [{
+        type: 'interval',
+        data: data,
+        encode: {
+          x: 'category',
+          y: 'value',
+          color: 'category',
+          shape: 'funnel' // Use funnel shape for proper funnel visualization
+        },
+        transform: [{
+          type: 'symmetryY'
+        }],
+        coordinate: {
+          transform: [{
+            type: 'transpose'
+          }]
+        },
+        scale: {
+          x: {
+            padding: 0
+          },
+          color: {
+            range: colors
+          }
+        },
+        legend: {
+          color: {
+            position: 'top',
+            layout: {
+              justifyContent: 'center'
+            }
+          }
+        },
+        labels: [
+        // Inside label showing category and value
+        {
+          text: function text(d) {
+            return "".concat(d.category, "\n").concat(d.value);
+          },
+          position: 'inside',
+          transform: [{
+            type: 'contrastReverse'
+          }]
+        },
+        // Connecting line for conversion rate
+        {
+          text: function text(d, i) {
+            return i !== 0 ? '———' : '';
+          },
+          style: {
+            'font-size': '1px',
+            color: '#666',
+            'letter-spacing': '0px'
+          },
+          position: 'top-right',
+          fill: '#666',
+          dx: 35,
+          dy: -8
+        },
+        // Conversion rate label text
+        {
+          text: function text(d, i) {
+            return i !== 0 ? '转化率' : '';
+          },
+          position: 'top-right',
+          textAlign: 'left',
+          textBaseline: 'middle',
+          fill: '#666',
+          dx: 40
+        },
+        // Conversion rate percentage
+        {
+          text: function text(d, i, dataArray) {
+            return i !== 0 ? conversionRate(dataArray[i - 1].value, dataArray[i].value) : '';
+          },
+          position: 'top-right',
+          textAlign: 'left',
+          textBaseline: 'middle',
+          dx: 80
+        }],
+        viewStyle: {
+          viewFill: backgroundColor
+        }
+      },
+      // Overall conversion rate connector
+      {
+        type: 'connector',
+        data: [{
+          startX: (_data$ = data[0]) === null || _data$ === void 0 ? void 0 : _data$.category,
+          startY: (_data = data[data.length - 1]) === null || _data === void 0 ? void 0 : _data.category,
+          endX: 0,
+          endY: (((_data$2 = data[0]) === null || _data$2 === void 0 ? void 0 : _data$2.value) - ((_data2 = data[data.length - 1]) === null || _data2 === void 0 ? void 0 : _data2.value)) / 2
+        }],
+        encode: {
+          x: 'startX',
+          x1: 'startY',
+          y: 'endX',
+          y1: 'endY'
+        },
+        style: {
+          stroke: '#666',
+          markerEnd: false,
+          connectLength1: -12,
+          offset2: -20,
+          connectorStroke: '#0649f2',
+          lineDash: [12, 2]
+        },
+        labels: [{
+          text: '转化率',
+          position: 'left',
+          textAlign: 'start',
+          textBaseline: 'middle',
+          fill: '#666',
+          dx: 10
+        }, {
+          text: conversionRate((_data$3 = data[0]) === null || _data$3 === void 0 ? void 0 : _data$3.value, (_data3 = data[data.length - 1]) === null || _data3 === void 0 ? void 0 : _data3.value),
+          position: 'left',
+          textAlign: 'start',
+          dx: 50,
+          fill: '#000'
+        }]
+      }],
+      axis: false,
+      tooltip: {
+        items: [function (d) {
+          return {
+            name: d.category,
+            value: d.value
+          };
+        }]
+      },
+      viewStyle: {
+        viewFill: backgroundColor
+      },
+      theme: getThemeObject(theme)
+    };
+    chart.options(chartOptions);
+    chart.render();
+  };
+
+  /**
+   * Destroy the chart instance and clean up resources.
+   */
+  var destroy = function destroy() {
+    if (chart) {
+      chart.destroy();
+      chart = null;
+    }
+  };
+  return {
+    render: render,
+    destroy: destroy
+  };
+};

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

@@ -0,0 +1,47 @@
+import type { VisualizationOptions } from '../../types';
+/**
+ * HistogramConfig defines the configuration for rendering the histogram chart.
+ */
+export interface HistogramConfig {
+    type?: 'histogram';
+    data: number[];
+    binNumber?: number;
+    title?: string;
+    axisXTitle?: string;
+    axisYTitle?: string;
+    theme?: 'default' | 'academy' | 'dark';
+    style?: {
+        backgroundColor?: string;
+        palette?: string[];
+    };
+}
+/**
+ * HistogramInstance represents a histogram chart instance with render and destroy methods.
+ */
+export interface HistogramInstance {
+    render: (config: HistogramConfig) => void;
+    destroy: () => void;
+}
+/**
+ * Histogram chart component using G2 5.0.
+ *
+ * @example
+ * ```ts
+ * const histogram = Histogram({
+ *   container: '#container',
+ *   width: 600,
+ *   height: 400,
+ * });
+ *
+ * histogram.render({
+ *   type: 'histogram',
+ *   data: [78, 88, 60, 100, 95],
+ *   binNumber: 5,
+ *   title: '成绩分布',
+ *   theme: 'academy'
+ * });
+ *
+ * histogram.destroy();
+ * ```
+ */
+export declare const Histogram: (options: VisualizationOptions) => HistogramInstance;