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

package/dist/esm/vis/organization-chart/index.js

@@ -0,0 +1,269 @@
+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; }
+import { Graph } from '@antv/g6';
+import { getBackgroundColor, normalizePalette } from "../../util/theme";
+
+/**
+ * OrganizationChartConfig defines the configuration for rendering the organization chart.
+ */
+
+/**
+ * OrganizationChartInstance represents a chart instance with render and destroy methods.
+ */
+
+var NODE_WIDTH = 160;
+// Keep stable layout height when description exists.
+var NODE_HEIGHT_WITH_DESC = 72;
+var NODE_HEIGHT_NO_DESC = 40;
+var FONT_FAMILY = 'system-ui,-apple-system,BlinkMacSystemFont,sans-serif';
+var LABEL_MAX_WIDTH = NODE_WIDTH - 16; // padding
+
+/** Business data stored in each G6 node's `data` field. */
+
+/** Shorthand for the G6 node style callback argument shape. */
+
+/**
+ * Recursively flatten a tree into flat nodes and edges arrays for G6.
+ * Uses path-index IDs instead of names to prevent duplicate-name collisions.
+ */
+function flattenTree(node, depth, pathId, nodes, edges) {
+  var _node$children;
+  nodes.push({
+    id: pathId,
+    name: node.name,
+    description: node.description,
+    depth: depth
+  });
+  ((_node$children = node.children) !== null && _node$children !== void 0 ? _node$children : []).forEach(function (child, index) {
+    // Use an underscore separator to avoid ambiguity with auto-generated edge IDs.
+    // Some render/layout internals may derive edge IDs by concatenating source/target with "-",
+    // and using "-" inside node IDs can lead to collisions in rare cases.
+    var childId = "".concat(pathId, "_").concat(index);
+    edges.push({
+      source: pathId,
+      target: childId
+    });
+    flattenTree(child, depth + 1, childId, nodes, edges);
+  });
+}
+
+/**
+ * OrganizationChart component using G6 5.0.
+ * - dagre (TB) layout for hierarchical structure
+ * - custom rect node with name + description labels
+ * - depth-based color cycling
+ *
+ * @example
+ * ```ts
+ * const chart = OrganizationChart({ container: '#container', width: 600, height: 400 });
+ *
+ * chart.render({
+ *   type: 'organization-chart',
+ *   data: {
+ *     name: 'Alice Johnson',
+ *     description: 'Chief Technology Officer',
+ *     children: [
+ *       {
+ *         name: 'Bob Smith',
+ *         description: 'Senior Software Engineer',
+ *         children: [
+ *           { name: 'Charlie Brown', description: 'Software Engineer' },
+ *           { name: 'Diana White',   description: 'Software Engineer' },
+ *         ],
+ *       },
+ *       {
+ *         name: 'Eve Black',
+ *         description: 'IT Support Department Head',
+ *         children: [
+ *           { name: 'Frank Green', description: 'IT Support Specialist' },
+ *           { name: 'Grace Blue',  description: 'IT Support Specialist' },
+ *         ],
+ *       },
+ *     ],
+ *   },
+ * });
+ *
+ * chart.destroy();
+ * ```
+ */
+export var OrganizationChart = function OrganizationChart(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 || !data.name) {
+      throw new Error('OrganizationChart: 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('OrganizationChart: container element not found');
+    }
+    containerEl.innerHTML = '';
+    var colors = normalizePalette(style.palette, theme);
+    var backgroundColor = style.backgroundColor || getBackgroundColor(theme);
+    var isDark = theme === 'dark';
+    containerEl.style.background = backgroundColor;
+    containerEl.style.borderRadius = '4px';
+    containerEl.style.overflow = 'hidden';
+
+    // Flatten tree structure into G6 flat nodes + edges
+    var flatNodes = [];
+    var flatEdges = [];
+    flattenTree(data, 0, '0', flatNodes, flatEdges);
+
+    // Store node business data in the `data` field so style functions can access it via d.data.*
+    var nodeData = flatNodes.map(function (node) {
+      return {
+        id: node.id,
+        data: {
+          name: node.name,
+          description: node.description,
+          depth: node.depth
+        }
+      };
+    });
+    var edgeData = flatEdges.map(function (edge) {
+      return {
+        id: "e__".concat(edge.source, "__").concat(edge.target),
+        source: edge.source,
+        target: edge.target
+      };
+    });
+    graph = new Graph({
+      animation: false,
+      container: containerEl,
+      width: width,
+      height: height,
+      autoFit: 'view',
+      autoResize: true,
+      padding: 24,
+      data: {
+        nodes: nodeData,
+        edges: edgeData
+      },
+      plugins: [{
+        type: 'tooltip',
+        trigger: 'hover',
+        enable: function enable(e) {
+          return (e === null || e === void 0 ? void 0 : e.targetType) === 'node';
+        },
+        offset: [10, 10],
+        getContent: function getContent(e, items) {
+          var _biz$name;
+          var item = items === null || items === void 0 ? void 0 : items[0];
+          var biz = item === null || item === void 0 ? void 0 : item.data;
+          if (!biz) return '';
+          var name = escapeHtml(String((_biz$name = biz.name) !== null && _biz$name !== void 0 ? _biz$name : ''));
+          var desc = biz.description ? escapeHtml(String(biz.description)) : '';
+          return "\n              <div style=\"max-width:260px;font-family:".concat(FONT_FAMILY, ";\">\n                <div style=\"font-weight:700;font-size:12px;line-height:1.2;margin-bottom:").concat(desc ? '4px' : '0', ";\">\n                  ").concat(name, "\n                </div>\n                ").concat(desc ? "<div style=\"font-size:12px;line-height:1.35;opacity:".concat(isDark ? '0.86' : '0.78', ";\">").concat(desc, "</div>") : '', "\n              </div>\n            ");
+        },
+        style: {
+          '.tooltip': {
+            background: isDark ? 'rgba(20,20,20,0.92)' : 'rgba(255,255,255,0.96)',
+            color: isDark ? '#f2f2f2' : '#1f1f1f',
+            border: "1px solid ".concat(isDark ? 'rgba(255,255,255,0.12)' : 'rgba(0,0,0,0.10)'),
+            borderRadius: 8,
+            boxShadow: '0 12px 28px rgba(0,0,0,0.16)',
+            padding: '8px 10px',
+            pointerEvents: 'none'
+          }
+        }
+      }].concat(_toConsumableArray(title ? [{
+        key: 'title',
+        type: 'title',
+        title: title,
+        titleFill: isDark ? '#e0e6ed' : '#1a1a2e'
+      }] : [])),
+      node: {
+        type: 'rect',
+        style: {
+          // size: [width, height] is the correct API for rect nodes in G6 v5
+          size: function size(d) {
+            return [NODE_WIDTH, d.data.description ? NODE_HEIGHT_WITH_DESC : NODE_HEIGHT_NO_DESC];
+          },
+          fill: function fill(d) {
+            return colors[d.data.depth % colors.length];
+          },
+          stroke: isDark ? '#555' : '#e8ebf0',
+          lineWidth: 1,
+          radius: 8,
+          // Use official label wrapping/ellipsis for BOTH name & description.
+          // 1 line name + up to 2 lines description => total maxLines = 3.
+          labelText: function labelText(d) {
+            return d.data.description ? "".concat(d.data.name, "\n").concat(d.data.description) : d.data.name;
+          },
+          labelFill: '#ffffff',
+          labelFontSize: 12,
+          labelFontWeight: 600,
+          labelWordWrap: true,
+          labelWordWrapWidth: LABEL_MAX_WIDTH,
+          labelMaxLines: function labelMaxLines(d) {
+            return d.data.description ? 3 : 1;
+          },
+          labelLineHeight: 14,
+          labelPlacement: 'center'
+        }
+      },
+      edge: {
+        // Use a tree-friendly edge type that does not depend on node ports.
+        type: 'cubic-vertical',
+        style: {
+          stroke: isDark ? '#4a4a4a' : '#d0d7e0',
+          lineWidth: 1.5,
+          endArrow: false,
+          startArrow: false
+        }
+      },
+      layout: {
+        type: 'dagre',
+        rankdir: 'TB',
+        nodesep: 40,
+        ranksep: 60,
+        // Dynamic nodeSize lets dagre calculate accurate per-node spacing
+        nodeSize: function nodeSize(d) {
+          return [NODE_WIDTH, d.data.description ? NODE_HEIGHT_WITH_DESC : NODE_HEIGHT_NO_DESC];
+        }
+      },
+      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 _graph2;
+      return (_graph2 = graph) === null || _graph2 === void 0 ? void 0 : _graph2.getZoom();
+    }
+  };
+};
+function escapeHtml(input) {
+  return String(input).replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;').replaceAll('"', '&quot;').replaceAll("'", '&#039;');
+}

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

@@ -0,0 +1,55 @@
+import type { VisualizationOptions } from '../../types';
+/**
+ * PieDataItem is the type for each data item in the pie chart.
+ */
+type PieDataItem = {
+    category: string;
+    value: number;
+};
+/**
+ * PieConfig defines the configuration for rendering the pie chart.
+ */
+export interface PieConfig {
+    type?: 'pie';
+    data: PieDataItem[];
+    innerRadius?: number;
+    theme?: 'default' | 'academy' | 'dark';
+    title?: string;
+    style?: {
+        backgroundColor?: string;
+        palette?: string[];
+    };
+}
+/**
+ * PieInstance represents a pie chart instance with render and destroy methods.
+ */
+export interface PieInstance {
+    render: (config: PieConfig) => void;
+    destroy: () => void;
+}
+/**
+ * Pie chart component using G2 5.0.
+ *
+ * @example
+ * ```ts
+ * const pie = Pie({
+ *   container: '#container',
+ *   width: 600,
+ *   height: 400,
+ * });
+ *
+ * pie.render({
+ *   type: 'pie',
+ *   data: [
+ *     { category: '分类一', value: 27 },
+ *     { category: '分类二', value: 25 },
+ *   ],
+ *   innerRadius: 0.6,
+ *   theme: 'academy'
+ * });
+ *
+ * pie.destroy();
+ * ```
+ */
+export declare const Pie: (options: VisualizationOptions) => PieInstance;
+export {};

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

@@ -0,0 +1,164 @@
+import { Chart } from '@antv/g2';
+import { getBackgroundColor, getThemeObject, normalizePalette } from "../../util/theme";
+
+/**
+ * PieDataItem is the type for each data item in the pie chart.
+ */
+
+/**
+ * PieConfig defines the configuration for rendering the pie chart.
+ */
+
+/**
+ * PieInstance represents a pie chart instance with render and destroy methods.
+ */
+
+/**
+ * Pie chart component using G2 5.0.
+ *
+ * @example
+ * ```ts
+ * const pie = Pie({
+ *   container: '#container',
+ *   width: 600,
+ *   height: 400,
+ * });
+ *
+ * pie.render({
+ *   type: 'pie',
+ *   data: [
+ *     { category: '分类一', value: 27 },
+ *     { category: '分类二', value: 25 },
+ *   ],
+ *   innerRadius: 0.6,
+ *   theme: 'academy'
+ * });
+ *
+ * pie.destroy();
+ * ```
+ */
+export var Pie = function Pie(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;
+
+  // Precision multiplier for rounding percentages to 4 decimal places
+  var PERCENTAGE_PRECISION_MULTIPLIER = 10000;
+
+  /**
+   * Render the pie chart with the given configuration.
+   */
+  var render = function render(config) {
+    var _config$data = config.data,
+      data = _config$data === void 0 ? [] : _config$data,
+      _config$innerRadius = config.innerRadius,
+      innerRadius = _config$innerRadius === void 0 ? 0 : _config$innerRadius,
+      _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);
+
+    // Calculate sum for percentage labels
+    var sumValue = data.reduce(function (sum, item) {
+      return sum + item.value;
+    }, 0);
+
+    // Create chart
+    chart = new Chart({
+      container: container,
+      width: width,
+      height: height,
+      autoFit: true
+    });
+
+    // 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 (e.g., Radar component)
+    var chartOptions = {
+      animate: false,
+      type: 'interval',
+      data: data,
+      title: title !== null && title !== void 0 ? title : '',
+      encode: {
+        y: 'value',
+        color: 'category'
+      },
+      transform: [{
+        type: 'stackY'
+      }],
+      coordinate: {
+        type: 'theta',
+        innerRadius: Math.max(0, Math.min(1, innerRadius))
+      },
+      scale: {
+        color: {
+          range: colors
+        }
+      },
+      legend: {
+        color: {
+          position: 'top'
+        }
+      },
+      labels: [{
+        text: function text(d) {
+          var percentage = Math.round(d.value / sumValue * 100 * PERCENTAGE_PRECISION_MULTIPLIER) / PERCENTAGE_PRECISION_MULTIPLIER;
+          return "".concat(d.category, ": ").concat(percentage, "%");
+        },
+        position: 'outside',
+        transform: [{
+          type: 'overlapHide'
+        }]
+      }],
+      tooltip: {
+        items: [function (d) {
+          return {
+            name: d.category,
+            value: d.value
+          };
+        }]
+      },
+      interaction: {
+        elementSelect: {
+          single: true
+        }
+      },
+      style: {
+        fillOpacity: 0.8
+      },
+      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/radar/index.d.ts

@@ -0,0 +1,58 @@
+import type { VisualizationOptions } from '../../types';
+/**
+ * RadarDataItem is the type for each data item in the radar chart.
+ */
+export type RadarDataItem = {
+    name: string;
+    value: number;
+    group?: string;
+};
+/**
+ * RadarConfig defines the configuration for rendering the radar chart.
+ */
+export interface RadarConfig {
+    type?: 'radar';
+    data: RadarDataItem[];
+    title?: string;
+    align?: boolean;
+    theme?: 'default' | 'academy' | 'dark';
+    style?: {
+        backgroundColor?: string;
+        palette?: string[];
+        lineWidth?: number;
+    };
+}
+/**
+ * RadarInstance represents a radar chart instance with render and destroy methods.
+ */
+export interface RadarInstance {
+    render: (config: RadarConfig) => void;
+    destroy: () => void;
+}
+/**
+ * Radar chart component using G2 5.0.
+ *
+ * @example
+ * ```ts
+ * const radar = Radar({
+ *   container: '#container',
+ *   width: 600,
+ *   height: 400,
+ * });
+ *
+ * radar.render({
+ *   type: 'radar',
+ *   data: [
+ *     { name: '沟通能力', value: 2 },
+ *     { name: '协作能力', value: 3 },
+ *     { name: '领导能力', value: 2 },
+ *     { name: '学习能力', value: 5 },
+ *     { name: '创新能力', value: 6 },
+ *     { name: '技术能力', value: 9 },
+ *   ],
+ * });
+ *
+ * radar.destroy();
+ * ```
+ */
+export declare const Radar: (options: VisualizationOptions) => RadarInstance;