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

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

@@ -0,0 +1,235 @@
+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 { Chart } from '@antv/g2';
+import { getBackgroundColor, getThemeObject, normalizePalette } from "../../util/theme";
+
+/**
+ * DualAxesSeriesItem defines a single series in the dual-axes chart.
+ */
+
+/**
+ * DualAxesConfig defines the configuration for rendering the dual-axes chart.
+ */
+
+/**
+ * DualAxesInstance represents a dual-axes chart instance with render and destroy methods.
+ */
+
+/**
+ * Transform series data to G2 format.
+ * Combines multiple series into a single data array with categories.
+ */
+function transformData(series, categories) {
+  return categories.map(function (category, index) {
+    var dataPoint = {
+      category: category
+    };
+    series.forEach(function (s, i) {
+      var yField = s.axisYTitle || "value_".concat(i + 1);
+      dataPoint[yField] = s.data[index];
+    });
+    return dataPoint;
+  });
+}
+
+/**
+ * DualAxes chart component using G2 5.0.
+ *
+ * @example
+ * ```ts
+ * const dualAxes = DualAxes({
+ *   container: '#container',
+ *   width: 600,
+ *   height: 400,
+ * });
+ *
+ * dualAxes.render({
+ *   type: 'dual-axes',
+ *   categories: ['2018', '2019', '2020', '2021', '2022'],
+ *   series: [
+ *     {
+ *       type: 'column',
+ *       data: [91.9, 99.1, 101.6, 114.4, 121],
+ *       axisYTitle: '销售额',
+ *     },
+ *     {
+ *       type: 'line',
+ *       data: [0.055, 0.06, 0.062, 0.07, 0.075],
+ *       axisYTitle: '利润率',
+ *     },
+ *   ],
+ * });
+ *
+ * dualAxes.destroy();
+ * ```
+ */
+export var DualAxes = function DualAxes(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 dual-axes chart with the given configuration.
+   */
+  var render = function render(config) {
+    var categories = config.categories,
+      series = config.series,
+      _config$theme = config.theme,
+      theme = _config$theme === void 0 ? chartTheme : _config$theme,
+      title = config.title,
+      axisXTitle = config.axisXTitle,
+      _config$style = config.style,
+      style = _config$style === void 0 ? {} : _config$style;
+
+    // Clean up previous chart if exists
+    if (chart) {
+      chart.destroy();
+    }
+    var _style$startAtZero = style.startAtZero,
+      startAtZero = _style$startAtZero === void 0 ? false : _style$startAtZero;
+    var colors = normalizePalette(style.palette, theme);
+    var backgroundColor = style.backgroundColor || getBackgroundColor(theme);
+
+    // Transform data
+    var data = transformData(series, categories);
+
+    // Create chart
+    chart = new Chart({
+      container: container,
+      width: width,
+      height: height,
+      autoFit: true
+    });
+
+    // Sort series: column first, then line (line rendered last appears on top)
+    var sortedSeries = _toConsumableArray(series).sort(function (a, b) {
+      var order = ['column', 'line'];
+      return order.indexOf(a.type) - order.indexOf(b.type);
+    });
+
+    // Create children configurations for each series
+    var children = sortedSeries.map(function (item, index) {
+      var yField = item.axisYTitle || "value_".concat(index + 1);
+      var color = colors[index % colors.length];
+      if (item.type === 'column') {
+        return {
+          type: 'interval',
+          encode: {
+            x: 'category',
+            y: yField,
+            color: function color() {
+              return yField;
+            }
+          },
+          scale: {
+            y: {
+              nice: true,
+              zero: startAtZero
+            },
+            color: {
+              range: [color]
+            }
+          },
+          axis: {
+            y: {
+              title: item.axisYTitle || ''
+            }
+          },
+          style: {
+            columnWidthRatio: 0.8,
+            radiusTopLeft: 4,
+            radiusTopRight: 4
+          }
+        };
+      } else {
+        // line type
+        return {
+          type: 'line',
+          encode: {
+            x: 'category',
+            y: yField,
+            shape: 'smooth',
+            color: function color() {
+              return yField;
+            }
+          },
+          scale: {
+            y: {
+              independent: true,
+              zero: startAtZero
+            },
+            color: {
+              range: [color]
+            }
+          },
+          axis: {
+            y: {
+              position: 'right',
+              title: item.axisYTitle || ''
+            }
+          },
+          style: {
+            lineWidth: 2
+          }
+        };
+      }
+    });
+
+    // 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: children,
+      axis: {
+        x: {
+          title: axisXTitle || false
+        }
+      },
+      scale: {
+        y: {
+          nice: true
+        }
+      },
+      legend: {
+        color: {
+          position: 'top',
+          itemMarker: function itemMarker(v, index) {
+            var seriesItem = series[index];
+            return (seriesItem === null || seriesItem === void 0 ? void 0 : seriesItem.type) === 'line' ? 'smooth' : 'rect';
+          }
+        }
+      },
+      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/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,218 @@
+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, 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: 20,
+      theme: chartTheme,
+      plugins: title ? [{
+        key: 'title',
+        type: 'title',
+        title: title,
+        titleFill: isDark ? '#e0e6ed' : '#1a1a2e'
+      }] : [],
+      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: 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;