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

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, getThemeObject, normalizePalette } from "../../util/theme";
+import { CHART_STYLE_DEFAULTS, getCartesianAxis, getCartesianLayout, getChartAnimation, getLineHighlightState, getSeriesHighlightByColorInteraction, getSharedTooltipInteraction, getThemeObject, normalizePalette } from "../../util";
 
 /**
  * DualAxesSeriesItem defines a single series in the dual-axes chart.
@@ -23,14 +29,16 @@ import { getBackgroundColor, getThemeObject, normalizePalette } from "../../util
  * Transform series data to G2 format.
  * Combines multiple series into a single data array with categories.
  */
+var getSeriesField = function getSeriesField(index) {
+  return "value_".concat(index + 1);
+};
 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];
+    series.forEach(function (item, seriesIndex) {
+      dataPoint[getSeriesField(seriesIndex)] = item.data[index];
     });
     return dataPoint;
   });
@@ -74,6 +82,7 @@ export var DualAxes = function DualAxes(options) {
     _options$theme = options.theme,
     chartTheme = _options$theme === void 0 ? 'default' : _options$theme;
   var chart = null;
+  var hasRendered = false;
 
   /**
    * Render the dual-axes chart with the given configuration.
@@ -94,8 +103,11 @@ export var DualAxes = function DualAxes(options) {
     }
     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);
+    var requestedColors = style.palette ? normalizePalette(style.palette, theme) : [];
+    var defaultColors = normalizePalette(undefined, theme);
+    var colors = [].concat(_toConsumableArray(requestedColors), _toConsumableArray(defaultColors.filter(function (color) {
+      return !requestedColors.includes(color);
+    })));
 
     // Transform data
     var data = transformData(series, categories);
@@ -109,15 +121,55 @@ export var DualAxes = function DualAxes(options) {
     });
 
     // Sort series: column first, then line (line rendered last appears on top)
-    var sortedSeries = _toConsumableArray(series).sort(function (a, b) {
+    var sortedSeries = series.map(function (item, originalIndex) {
+      return {
+        item: item,
+        originalIndex: originalIndex
+      };
+    }).sort(function (a, b) {
       var order = ['column', 'line'];
-      return order.indexOf(a.type) - order.indexOf(b.type);
+      return order.indexOf(a.item.type) - order.indexOf(b.item.type);
     });
+    var seriesMeta = sortedSeries.map(function (_ref, index) {
+      var item = _ref.item,
+        originalIndex = _ref.originalIndex;
+      return {
+        item: item,
+        yField: getSeriesField(originalIndex),
+        displayName: item.axisYTitle || getSeriesField(originalIndex),
+        color: colors[index % colors.length]
+      };
+    });
+    var seriesByField = new Map(seriesMeta.map(function (_ref2) {
+      var item = _ref2.item,
+        yField = _ref2.yField,
+        displayName = _ref2.displayName;
+      return [yField, {
+        type: item.type,
+        displayName: displayName
+      }];
+    }));
+    var cartesianAxisOptions = {
+      axisXTitle: axisXTitle,
+      xLabels: categories,
+      chartWidth: width
+    };
+    var cartesianAxis = getCartesianAxis(cartesianAxisOptions);
 
     // 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];
+    var children = seriesMeta.map(function (_ref3) {
+      var item = _ref3.item,
+        yField = _ref3.yField,
+        displayName = _ref3.displayName,
+        color = _ref3.color;
+      var tooltip = {
+        items: [function (datum) {
+          return {
+            name: displayName,
+            value: datum[yField]
+          };
+        }]
+      };
       if (item.type === 'column') {
         return {
           type: 'interval',
@@ -132,21 +184,25 @@ export var DualAxes = function DualAxes(options) {
             y: {
               nice: true,
               zero: startAtZero
-            },
-            color: {
-              range: [color]
             }
           },
+          tooltip: tooltip,
           axis: {
-            y: {
-              title: item.axisYTitle || ''
-            }
+            y: _objectSpread(_objectSpread({}, cartesianAxis.y), {}, {
+              title: item.axisYTitle || '',
+              titleFill: color,
+              titleFontWeight: 500
+            })
           },
-          style: {
-            columnWidthRatio: 0.8,
+          style: _objectSpread({
+            fill: color,
+            fillOpacity: 0.86,
+            columnWidthRatio: CHART_STYLE_DEFAULTS.intervalWidthRatio
+          }, theme !== 'academy' ? {
             radiusTopLeft: 4,
             radiusTopRight: 4
-          }
+          } : {}),
+          animate: getChartAnimation(hasRendered, 'growInY')
         };
       } else {
         // line type
@@ -164,20 +220,26 @@ export var DualAxes = function DualAxes(options) {
             y: {
               independent: true,
               zero: startAtZero
-            },
-            color: {
-              range: [color]
             }
           },
+          tooltip: tooltip,
           axis: {
-            y: {
+            y: _objectSpread(_objectSpread({}, cartesianAxis.y), {}, {
               position: 'right',
-              title: item.axisYTitle || ''
-            }
+              title: item.axisYTitle || '',
+              titleFill: color,
+              titleFontWeight: 500,
+              grid: false
+            })
           },
           style: {
-            lineWidth: 2
-          }
+            stroke: color,
+            lineWidth: CHART_STYLE_DEFAULTS.lineWidth,
+            lineCap: 'round',
+            lineJoin: 'round'
+          },
+          state: getLineHighlightState(CHART_STYLE_DEFAULTS.lineWidth),
+          animate: getChartAnimation(hasRendered, 'pathIn')
         };
       }
     });
@@ -185,38 +247,55 @@ export var DualAxes = function DualAxes(options) {
     // 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,
+    var chartOptions = _objectSpread(_objectSpread({
       type: 'view',
       data: data,
-      title: title !== null && title !== void 0 ? title : '',
-      children: children,
+      title: title || '',
+      children: children
+    }, getCartesianLayout(cartesianAxisOptions)), {}, {
       axis: {
-        x: {
-          title: axisXTitle || false
-        }
+        x: cartesianAxis.x
       },
       scale: {
         y: {
           nice: true
+        },
+        color: {
+          domain: seriesMeta.map(function (_ref4) {
+            var yField = _ref4.yField;
+            return yField;
+          }),
+          range: seriesMeta.map(function (_ref5) {
+            var color = _ref5.color;
+            return color;
+          })
         }
       },
       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';
+          labelFormatter: function labelFormatter(value) {
+            var _seriesByField$get;
+            return ((_seriesByField$get = seriesByField.get(value)) === null || _seriesByField$get === void 0 ? void 0 : _seriesByField$get.displayName) || value;
+          },
+          itemMarker: function itemMarker(value) {
+            var _seriesByField$get2;
+            return ((_seriesByField$get2 = seriesByField.get(value)) === null || _seriesByField$get2 === void 0 ? void 0 : _seriesByField$get2.type) === 'line' ? 'smooth' : 'rect';
           }
         }
       },
-      viewStyle: {
-        viewFill: backgroundColor
-      },
+      interaction: _objectSpread({
+        tooltip: getSharedTooltipInteraction({
+          crosshairs: true
+        })
+      }, getSeriesHighlightByColorInteraction()),
+      viewStyle: style.backgroundColor ? {
+        viewFill: style.backgroundColor
+      } : undefined,
       theme: getThemeObject(theme)
-    };
+    });
     chart.options(chartOptions);
     chart.render();
+    hasRendered = true;
   };
 
   /**
@@ -227,6 +306,7 @@ export var DualAxes = function DualAxes(options) {
       chart.destroy();
       chart = null;
     }
+    hasRendered = false;
   };
   return {
     render: render,

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

@@ -8,7 +8,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 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";
+import { getBackgroundColor, getTheme, normalizePalette } from "../../util/theme";
 
 /**
  * FishboneDiagramConfig defines the configuration for rendering the fishbone diagram.
@@ -126,13 +126,14 @@ export var FishboneDiagram = function FishboneDiagram(options) {
       height: height,
       autoFit: 'view',
       autoResize: true,
-      padding: 20,
-      theme: chartTheme,
+      padding: title ? [46, 20, 20, 20] : 20,
+      theme: getTheme(theme),
       plugins: title ? [{
         key: 'title',
         type: 'title',
         title: title,
-        titleFill: isDark ? '#e0e6ed' : '#1a1a2e'
+        titleFill: isDark ? '#e0e6ed' : '#000',
+        titleFontFamily: 'sans-serif'
       }] : [],
       data: graphData,
       node: {
@@ -141,7 +142,7 @@ export var FishboneDiagram = function FishboneDiagram(options) {
           var _d$depth;
           var depth = (_d$depth = d.depth) !== null && _d$depth !== void 0 ? _d$depth : 0;
           var nodeStyle = {
-            radius: 8,
+            radius: theme === 'academy' ? 0 : 8,
             size: getNodeSize(String(d.id), depth),
             labelText: String(d.id),
             labelPlacement: 'left',

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

@@ -19,7 +19,7 @@ function _assertThisInitialized(self) { if (self === void 0) { throw new Referen
 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";
+import { getBackgroundColor, getTheme, normalizePalette } from "../../util/theme";
 
 /**
  * FlowDiagramConfig defines the configuration for rendering the flow diagram.
@@ -75,13 +75,16 @@ function escapeHtml() {
 function createNodeHTML(d, color) {
   var _d$data, _d$states, _d$states2;
   var selectedBorderColor = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '#000';
+  var theme = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'default';
   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  ");
+  var borderRadius = theme === 'academy' ? '0px' : '8px';
+  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: ").concat(borderRadius, ";\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 theme = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 'default';
   var nodes = graph.getNodeData();
   var updatedNodes = nodes.map(function (node) {
     var dom = container.querySelector("[data-node-key=\"".concat(CSS.escape(String(node.id)), "\"]"));
@@ -95,7 +98,7 @@ function measureAndUpdateNodeSizes(graph, container, nodeColorMap, selectedBorde
         size: [DEFAULT_NODE_WIDTH, height],
         dx: -DEFAULT_NODE_WIDTH / 2,
         dy: -height / 2,
-        innerHTML: createNodeHTML(node, nodeColorMap.get(String(node.id)) || '#1783FF', selectedBorderColor)
+        innerHTML: createNodeHTML(node, nodeColorMap.get(String(node.id)) || '#1783FF', selectedBorderColor, theme)
       }
     };
   });
@@ -235,29 +238,33 @@ export var FlowDiagram = function FlowDiagram(options) {
       container: containerEl,
       width: width,
       height: height,
-      theme: theme,
+      theme: getTheme(theme),
       data: {
         nodes: g6Nodes,
         edges: g6Edges
       },
       autoFit: 'view',
       autoResize: true,
-      padding: 20,
+      padding: title ? [46, 20, 20, 20] : 20,
       plugins: title ? [{
         key: 'title',
         type: 'title',
         title: title,
-        titleFill: isDark ? '#e0e6ed' : '#1a1a2e'
+        titleFill: isDark ? '#e0e6ed' : '#000',
+        titleFontFamily: 'sans-serif'
       }] : [],
       node: {
         type: 'html',
         style: function style(d) {
+          var _d$style;
           var color = nodeColorMap.get(String(d.id)) || colors[0];
+          var size = ((_d$style = d.style) === null || _d$style === void 0 ? void 0 : _d$style.size) || [DEFAULT_NODE_WIDTH, DEFAULT_NODE_HEIGHT];
+          var height = size[1];
           return {
-            size: [DEFAULT_NODE_WIDTH, DEFAULT_NODE_HEIGHT],
+            size: size,
             dx: -DEFAULT_NODE_WIDTH / 2,
-            dy: -DEFAULT_NODE_HEIGHT / 2,
-            innerHTML: createNodeHTML(d, color, selectedBorder),
+            dy: -height / 2,
+            innerHTML: createNodeHTML(d, color, selectedBorder, theme),
             ports: [{
               placement: 'top'
             }, {
@@ -317,7 +324,7 @@ export var FlowDiagram = function FlowDiagram(options) {
     // Measure real node heights after initial render
     graph.once('afterrender', function () {
       if (graph) {
-        measureAndUpdateNodeSizes(graph, containerEl, nodeColorMap, selectedBorder);
+        measureAndUpdateNodeSizes(graph, containerEl, nodeColorMap, selectedBorder, theme);
       }
     });
   };

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

@@ -1,4 +1,4 @@
-import type { VisualizationOptions } from '../../types';
+import type { VisualizationOptions, VisualizationTheme } from '../../types';
 /**
  * FunnelDataItem is the type for each data item in the funnel chart.
  */
@@ -12,8 +12,10 @@ export type FunnelDataItem = {
 export interface FunnelConfig {
     type?: 'funnel';
     data: FunnelDataItem[];
-    theme?: 'default' | 'academy' | 'dark';
+    theme?: VisualizationTheme;
     title?: string;
+    locale?: string;
+    conversionRateLabel?: string;
     style?: {
         backgroundColor?: string;
         palette?: string[];