@antv/gpt-vis 1.0.0 → 1.0.1

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

@@ -1,4 +1,4 @@
-import type { VisualizationOptions } from '../../types';
+import type { VisualizationOptions, VisualizationTheme } from '../../types';
 /**
  * AreaDataItem is the type for each data item in the area chart.
  */
@@ -17,7 +17,7 @@ export interface AreaConfig {
     title?: string;
     axisXTitle?: string;
     axisYTitle?: string;
-    theme?: 'default' | 'academy' | 'dark';
+    theme?: VisualizationTheme;
     style?: {
         backgroundColor?: string;
         palette?: string[];

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

@@ -5,7 +5,7 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 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); }
 import { Chart } from '@antv/g2';
-import { getBackgroundColor, getThemeObject, normalizePalette } from "../../util/theme";
+import { CHART_STYLE_DEFAULTS, bindCrosshairAxisLabels, getBackgroundColor, getCartesianAxis, getCartesianLayout, getChartAnimation, getColorLegend, getLineHighlightState, getSeriesHighlightByColorInteraction, getSharedTooltipInteraction, getThemeObject, normalizePalette } from "../../util";
 
 /**
  * AreaDataItem is the type for each data item in the area chart.
@@ -20,7 +20,8 @@ import { getBackgroundColor, getThemeObject, normalizePalette } from "../../util
  */
 
 var getLinearGradientColor = function getLinearGradientColor(color) {
-  return "linear-gradient(-90deg, white 0%, ".concat(color, " 100%)");
+  var backgroundColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'white';
+  return "linear-gradient(-90deg, ".concat(backgroundColor, " 0%, ").concat(color, " 100%)");
 };
 var DEFAULT_COLOR = '#3A95FF';
 
@@ -57,6 +58,8 @@ export var Area = function Area(options) {
     _options$theme = options.theme,
     chartTheme = _options$theme === void 0 ? 'default' : _options$theme;
   var chart = null;
+  var hasRendered = false;
+  var cleanupCrosshairAxisLabels = null;
 
   /**
    * Render the area chart with the given configuration.
@@ -77,14 +80,36 @@ export var Area = function Area(options) {
 
     // Clean up previous chart if exists
     if (chart) {
+      var _cleanupCrosshairAxis;
+      (_cleanupCrosshairAxis = cleanupCrosshairAxisLabels) === null || _cleanupCrosshairAxis === void 0 || _cleanupCrosshairAxis();
+      cleanupCrosshairAxisLabels = null;
       chart.destroy();
     }
     var _style$lineWidth = style.lineWidth,
-      lineWidth = _style$lineWidth === void 0 ? 2 : _style$lineWidth;
+      lineWidth = _style$lineWidth === void 0 ? CHART_STYLE_DEFAULTS.lineWidth : _style$lineWidth;
     var hasGroupField = data.length > 0 && ((_data$ = data[0]) === null || _data$ === void 0 ? void 0 : _data$.group) !== undefined;
     var colors = normalizePalette(style.palette, theme);
     var backgroundColor = style.backgroundColor || getBackgroundColor(theme);
-    var fillColor = getLinearGradientColor(colors[0] || DEFAULT_COLOR);
+    var fillColor = getLinearGradientColor(colors[0] || DEFAULT_COLOR, backgroundColor);
+    var areaOpacity = CHART_STYLE_DEFAULTS.areaOpacity;
+    var lineOpacity = CHART_STYLE_DEFAULTS.lineOpacity;
+    var cartesianAxisOptions = {
+      axisXTitle: axisXTitle,
+      axisYTitle: axisYTitle,
+      xLabels: data.map(function (_ref) {
+        var time = _ref.time;
+        return time;
+      }),
+      chartWidth: width
+    };
+    var tooltip = {
+      items: [function (d) {
+        return {
+          name: hasGroupField ? d.group : axisYTitle || d.time,
+          value: d.value
+        };
+      }]
+    };
 
     // Create chart
     chart = new Chart({
@@ -119,13 +144,13 @@ export var Area = function Area(options) {
       children = [{
         type: 'area',
         style: {
-          fillOpacity: 0.6
+          fillOpacity: areaOpacity
         }
       }, {
         type: 'line',
         style: {
           lineWidth: lineWidth,
-          strokeOpacity: 0.6
+          strokeOpacity: lineOpacity
         }
       }];
     } else if (hasGroupField) {
@@ -141,13 +166,13 @@ export var Area = function Area(options) {
       children = [{
         type: 'area',
         style: {
-          fillOpacity: 0.6
+          fillOpacity: areaOpacity
         }
       }, {
         type: 'line',
         style: {
           lineWidth: lineWidth,
-          strokeOpacity: 0.6
+          strokeOpacity: lineOpacity
         }
       }];
     } else {
@@ -159,60 +184,81 @@ export var Area = function Area(options) {
       children = [{
         type: 'area',
         style: {
-          fillOpacity: 0.6,
+          fillOpacity: areaOpacity,
           fill: fillColor
         }
       }, {
         type: 'line',
-        style: _objectSpread({
+        style: {
           lineWidth: lineWidth,
-          strokeOpacity: 0.6
-        }, style.palette ? {
+          strokeOpacity: lineOpacity,
+          lineCap: 'round',
+          lineJoin: 'round',
           stroke: colors[0]
-        } : {})
+        }
       }];
     }
+    children = children.map(function (child) {
+      return _objectSpread(_objectSpread({}, child), {}, {
+        animate: getChartAnimation(hasRendered, child.type === 'line' ? 'pathIn' : 'fadeIn'),
+        tooltip: child.type === 'line' ? tooltip : false,
+        state: hasGroupField ? child.type === 'area' ? {
+          active: {
+            fillOpacity: Math.min(areaOpacity + 0.1, 1)
+          },
+          inactive: {
+            fillOpacity: 0.07
+          }
+        } : getLineHighlightState(lineWidth) : undefined
+      });
+    });
+    if (!hasGroupField && data.length <= 24) {
+      children.push({
+        type: 'point',
+        encode: {
+          x: 'time',
+          y: 'value',
+          shape: 'point',
+          size: CHART_STYLE_DEFAULTS.pointSize
+        },
+        animate: getChartAnimation(hasRendered, 'fadeIn'),
+        tooltip: false,
+        style: {
+          lineWidth: CHART_STYLE_DEFAULTS.pointLineWidth,
+          fill: colors[0],
+          stroke: backgroundColor
+        }
+      });
+    }
 
     // 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 : '',
+      title: title || '',
       encode: encode,
       transform: transform,
       children: children,
-      scale: scaleConfig,
-      axis: {
-        x: {
-          title: axisXTitle || false
-        },
-        y: {
-          title: axisYTitle || false
-        }
-      },
-      legend: hasGroupField ? {
-        color: {
-          position: 'top'
-        }
-      } : false,
-      tooltip: {
-        items: [function (d) {
-          return {
-            name: axisYTitle || d.time,
-            value: d.value
-          };
-        }]
-      },
-      viewStyle: {
+      scale: scaleConfig
+    }, getCartesianLayout(cartesianAxisOptions)), {}, {
+      axis: getCartesianAxis(cartesianAxisOptions),
+      legend: getColorLegend(hasGroupField),
+      interaction: _objectSpread({
+        tooltip: getSharedTooltipInteraction({
+          crosshairs: true
+        })
+      }, hasGroupField ? getSeriesHighlightByColorInteraction() : {}),
+      viewStyle: style.backgroundColor ? {
         viewFill: backgroundColor
-      },
+      } : undefined,
       theme: getThemeObject(theme)
-    };
+    });
     chart.options(chartOptions);
+    cleanupCrosshairAxisLabels = bindCrosshairAxisLabels(chart, theme);
     chart.render();
+    hasRendered = true;
   };
 
   /**
@@ -220,9 +266,13 @@ export var Area = function Area(options) {
    */
   var destroy = function destroy() {
     if (chart) {
+      var _cleanupCrosshairAxis2;
+      (_cleanupCrosshairAxis2 = cleanupCrosshairAxisLabels) === null || _cleanupCrosshairAxis2 === void 0 || _cleanupCrosshairAxis2();
+      cleanupCrosshairAxisLabels = null;
       chart.destroy();
       chart = null;
     }
+    hasRendered = false;
   };
   return {
     render: render,

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

@@ -1,4 +1,4 @@
-import type { VisualizationOptions } from '../../types';
+import type { VisualizationOptions, VisualizationTheme } from '../../types';
 /**
  * BarDataItem is the type for each data item in the bar chart.
  */
@@ -18,7 +18,7 @@ export interface BarConfig {
     title?: string;
     axisXTitle?: string;
     axisYTitle?: string;
-    theme?: 'default' | 'academy' | 'dark';
+    theme?: VisualizationTheme;
     style?: {
         backgroundColor?: string;
         palette?: string[];

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

@@ -5,7 +5,7 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 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); }
 import { Chart } from '@antv/g2';
-import { getBackgroundColor, getThemeObject, normalizePalette } from "../../util/theme";
+import { CHART_STYLE_DEFAULTS, getCartesianAxis, getCategoryBackgroundHighlightState, getCategoryHighlightInteraction, getChartAnimation, getColorLegend, getThemeObject, normalizePalette } from "../../util";
 
 /**
  * BarDataItem is the type for each data item in the bar chart.
@@ -52,6 +52,7 @@ export var Bar = function Bar(options) {
     _options$theme = options.theme,
     chartTheme = _options$theme === void 0 ? 'default' : _options$theme;
   var chart = null;
+  var hasRendered = false;
 
   /**
    * Render the bar chart with the given configuration.
@@ -78,7 +79,6 @@ export var Bar = function Bar(options) {
     }
     var hasGroupField = data.length > 0 && ((_data$ = data[0]) === null || _data$ === void 0 ? void 0 : _data$.group) !== undefined;
     var colors = normalizePalette(style.palette, theme);
-    var backgroundColor = style.backgroundColor || getBackgroundColor(theme);
 
     // Create chart
     chart = new Chart({
@@ -93,11 +93,10 @@ export var Bar = function Bar(options) {
     var transform = [];
     var radiusStyle = {};
 
-    // academy theme uses no rounded corners; other themes use rounded top corners
+    // Academy uses square corners; other themes use a subtle radius on every corner.
     if (theme !== 'academy') {
       radiusStyle = {
-        radiusTopLeft: 4,
-        radiusTopRight: 4
+        radius: 4
       };
     }
 
@@ -123,8 +122,7 @@ export var Bar = function Bar(options) {
     } else {
       encode = {
         x: 'category',
-        y: 'value',
-        color: 'category'
+        y: 'value'
       };
     }
 
@@ -133,7 +131,7 @@ export var Bar = function Bar(options) {
       y: {
         nice: true
       }
-    }, style.palette ? {
+    }, hasGroupField ? {
       color: {
         range: colors
       }
@@ -143,10 +141,10 @@ export var Bar = function Bar(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,
+      animate: getChartAnimation(hasRendered, 'growInX'),
       type: 'interval',
       data: data,
-      title: title !== null && title !== void 0 ? title : '',
+      title: title || '',
       encode: encode,
       transform: transform,
       coordinate: {
@@ -155,37 +153,37 @@ export var Bar = function Bar(options) {
         }]
       },
       scale: scaleConfig,
-      axis: {
-        x: {
-          title: axisXTitle || false
-        },
-        y: {
-          title: axisYTitle || false
-        }
-      },
-      legend: hasGroupField ? {
-        color: {
-          position: 'top'
-        }
-      } : false,
+      axis: getCartesianAxis({
+        axisXTitle: axisXTitle,
+        axisYTitle: axisYTitle
+      }),
+      legend: getColorLegend(hasGroupField),
       tooltip: {
         items: [function (d) {
           return {
-            name: axisYTitle || d.category,
+            name: hasGroupField ? d.group : axisYTitle || d.category,
             value: d.value
           };
         }]
       },
-      style: _objectSpread(_objectSpread({}, radiusStyle), {}, {
-        columnWidthRatio: 0.8
-      }),
-      viewStyle: {
-        viewFill: backgroundColor
+      state: getCategoryBackgroundHighlightState(theme),
+      interaction: {
+        tooltip: true,
+        elementHighlight: getCategoryHighlightInteraction()
       },
+      style: _objectSpread(_objectSpread({}, radiusStyle), {}, {
+        columnWidthRatio: CHART_STYLE_DEFAULTS.intervalWidthRatio
+      }, !hasGroupField ? {
+        fill: colors[0]
+      } : {}),
+      viewStyle: style.backgroundColor ? {
+        viewFill: style.backgroundColor
+      } : undefined,
       theme: getThemeObject(theme)
     };
     chart.options(chartOptions);
     chart.render();
+    hasRendered = true;
   };
 
   /**
@@ -196,6 +194,7 @@ export var Bar = function Bar(options) {
       chart.destroy();
       chart = null;
     }
+    hasRendered = false;
   };
   return {
     render: render,

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

@@ -5,7 +5,7 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 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); }
 import { Chart } from '@antv/g2';
-import { getBackgroundColor, getThemeObject, normalizePalette } from "../../util/theme";
+import { getThemeObject, normalizePalette } from "../../util/theme";
 
 /**
  * BoxplotDataItem is the type for each data item in the boxplot chart.
@@ -75,7 +75,6 @@ export var Boxplot = function Boxplot(options) {
 
     // Get colors from style.palette or theme defaults
     var colors = normalizePalette(style.palette, theme);
-    var backgroundColor = style.backgroundColor || getBackgroundColor(theme);
     var startAtZero = style.startAtZero || false;
 
     // Determine if data has group field for grouped boxplot
@@ -152,9 +151,9 @@ export var Boxplot = function Boxplot(options) {
           position: 'top'
         } : false
       },
-      viewStyle: {
-        viewFill: backgroundColor
-      },
+      viewStyle: style.backgroundColor ? {
+        viewFill: style.backgroundColor
+      } : undefined,
       theme: getThemeObject(theme)
     };
     chart.options(chartOptions);

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

@@ -1,4 +1,4 @@
-import type { VisualizationOptions } from '../../types';
+import type { VisualizationOptions, VisualizationTheme } from '../../types';
 /**
  * ColumnDataItem is the type for each data item in the column chart.
  */
@@ -18,7 +18,7 @@ export interface ColumnConfig {
     title?: string;
     axisXTitle?: string;
     axisYTitle?: string;
-    theme?: 'default' | 'academy' | 'dark';
+    theme?: VisualizationTheme;
     style?: {
         backgroundColor?: string;
         palette?: string[];

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

@@ -5,7 +5,7 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 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); }
 import { Chart } from '@antv/g2';
-import { getBackgroundColor, getThemeObject, normalizePalette } from "../../util/theme";
+import { CHART_STYLE_DEFAULTS, getCartesianAxis, getCartesianLayout, getCategoryBackgroundHighlightState, getCategoryHighlightInteraction, getChartAnimation, getColorLegend, getThemeObject, normalizePalette } from "../../util";
 
 /**
  * ColumnDataItem is the type for each data item in the column chart.
@@ -52,6 +52,7 @@ export var Column = function Column(options) {
     _options$theme = options.theme,
     chartTheme = _options$theme === void 0 ? 'default' : _options$theme;
   var chart = null;
+  var hasRendered = false;
 
   /**
    * Render the column chart with the given configuration.
@@ -78,7 +79,6 @@ export var Column = function Column(options) {
     }
     var hasGroupField = data.length > 0 && ((_data$ = data[0]) === null || _data$ === void 0 ? void 0 : _data$.group) !== undefined;
     var colors = normalizePalette(style.palette, theme);
-    var backgroundColor = style.backgroundColor || getBackgroundColor(theme);
 
     // Create chart
     chart = new Chart({
@@ -123,8 +123,7 @@ export var Column = function Column(options) {
     } else {
       encode = {
         x: 'category',
-        y: 'value',
-        color: 'category'
+        y: 'value'
       };
     }
 
@@ -133,54 +132,61 @@ export var Column = function Column(options) {
       y: {
         nice: true
       }
-    }, style.palette ? {
+    }, hasGroupField ? {
       color: {
         range: colors
       }
     } : {});
+    var cartesianAxisOptions = {
+      axisXTitle: axisXTitle,
+      axisYTitle: axisYTitle,
+      xLabels: data.map(function (_ref) {
+        var category = _ref.category;
+        return category;
+      }),
+      chartWidth: width
+    };
 
     // 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({
+      animate: getChartAnimation(hasRendered, 'growInY'),
       type: 'interval',
       data: data,
-      title: title !== null && title !== void 0 ? title : '',
+      title: title || '',
       encode: encode,
       transform: transform,
-      scale: scaleConfig,
-      axis: {
-        x: {
-          title: axisXTitle || false
-        },
-        y: {
-          title: axisYTitle || false
-        }
-      },
-      legend: hasGroupField ? {
-        color: {
-          position: 'top'
-        }
-      } : false,
+      scale: scaleConfig
+    }, getCartesianLayout(cartesianAxisOptions)), {}, {
+      axis: getCartesianAxis(cartesianAxisOptions),
+      legend: getColorLegend(hasGroupField),
       tooltip: {
         items: [function (d) {
           return {
-            name: axisYTitle || d.category,
+            name: hasGroupField ? d.group : axisYTitle || d.category,
             value: d.value
           };
         }]
       },
-      style: _objectSpread(_objectSpread({}, radiusStyle), {}, {
-        columnWidthRatio: 0.8
-      }),
-      viewStyle: {
-        viewFill: backgroundColor
+      state: getCategoryBackgroundHighlightState(theme),
+      interaction: {
+        tooltip: true,
+        elementHighlight: getCategoryHighlightInteraction()
       },
+      style: _objectSpread(_objectSpread({}, radiusStyle), {}, {
+        columnWidthRatio: CHART_STYLE_DEFAULTS.intervalWidthRatio
+      }, !hasGroupField ? {
+        fill: colors[0]
+      } : {}),
+      viewStyle: style.backgroundColor ? {
+        viewFill: style.backgroundColor
+      } : undefined,
       theme: getThemeObject(theme)
-    };
+    });
     chart.options(chartOptions);
     chart.render();
+    hasRendered = true;
   };
 
   /**
@@ -191,6 +197,7 @@ export var Column = function Column(options) {
       chart.destroy();
       chart = null;
     }
+    hasRendered = false;
   };
   return {
     render: render,

package/dist/esm/vis/dual-axes/index.d.ts

@@ -1,4 +1,4 @@
-import type { VisualizationOptions } from '../../types';
+import type { VisualizationOptions, VisualizationTheme } from '../../types';
 /**
  * DualAxesSeriesItem defines a single series in the dual-axes chart.
  */
@@ -16,7 +16,7 @@ export interface DualAxesConfig {
     series: DualAxesSeriesItem[];
     title?: string;
     axisXTitle?: string;
-    theme?: 'default' | 'academy' | 'dark';
+    theme?: VisualizationTheme;
     style?: {
         backgroundColor?: string;
         palette?: string[];