@antv/gpt-vis 1.0.0 → 1.0.1

package/dist/esm/vis/line/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, getSharedTooltipInteraction, getThemeObject, normalizePalette } from "../../util";
 
 /**
  * LineDataItem is the type for each data item in the line chart.
@@ -52,6 +52,8 @@ export var Line = function Line(options) {
     _options$theme = options.theme,
     chartTheme = _options$theme === void 0 ? 'default' : _options$theme;
   var chart = null;
+  var hasRendered = false;
+  var cleanupCrosshairAxisLabels = null;
 
   /**
    * Render the line chart with the given configuration.
@@ -70,13 +72,35 @@ export var Line = function Line(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 tooltip = {
+      items: [function (d) {
+        return {
+          name: hasGroupField ? d.group : axisYTitle || d.time,
+          value: d.value
+        };
+      }]
+    };
+    var lineAnimation = getChartAnimation(hasRendered, 'pathIn');
+    var pointAnimation = getChartAnimation(hasRendered, 'fadeIn');
+    var cartesianAxisOptions = {
+      axisXTitle: axisXTitle,
+      axisYTitle: axisYTitle,
+      xLabels: data.map(function (_ref) {
+        var time = _ref.time;
+        return time;
+      }),
+      chartWidth: width
+    };
 
     // Create chart
     chart = new Chart({
@@ -108,53 +132,68 @@ export var Line = function Line(options) {
         y: 'value'
       };
     }
+    var children = [{
+      type: 'line',
+      tooltip: tooltip,
+      style: _objectSpread({
+        lineWidth: lineWidth,
+        lineCap: 'round',
+        lineJoin: 'round'
+      }, !hasGroupField ? {
+        stroke: colors[0]
+      } : {}),
+      animate: lineAnimation
+    }];
+    var showPoints = data.length <= (hasGroupField ? 36 : 24);
+    if (showPoints) {
+      children.push({
+        type: 'point',
+        encode: _objectSpread({
+          x: 'time',
+          y: 'value',
+          shape: 'point',
+          size: CHART_STYLE_DEFAULTS.pointSize
+        }, hasGroupField ? {
+          color: 'group'
+        } : {}),
+        animate: pointAnimation,
+        tooltip: false,
+        style: _objectSpread({
+          lineWidth: CHART_STYLE_DEFAULTS.pointLineWidth,
+          stroke: backgroundColor
+        }, !hasGroupField ? {
+          fill: colors[0]
+        } : {})
+      });
+    }
 
     // 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,
-      children: [{
-        type: 'line',
-        style: _objectSpread({
-          lineWidth: lineWidth
-        }, !hasGroupField && style.palette ? {
-          stroke: colors[0]
-        } : {})
-      }],
-      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
-          };
-        }]
+      children: children,
+      scale: scaleConfig
+    }, getCartesianLayout(cartesianAxisOptions)), {}, {
+      axis: getCartesianAxis(cartesianAxisOptions),
+      legend: getColorLegend(hasGroupField),
+      interaction: {
+        tooltip: getSharedTooltipInteraction({
+          crosshairs: true
+        })
       },
-      viewStyle: {
+      viewStyle: style.backgroundColor ? {
         viewFill: backgroundColor
-      },
+      } : undefined,
       theme: getThemeObject(theme)
-    };
+    });
     chart.options(chartOptions);
+    cleanupCrosshairAxisLabels = bindCrosshairAxisLabels(chart, theme);
     chart.render();
+    hasRendered = true;
   };
 
   /**
@@ -162,9 +201,13 @@ export var Line = function Line(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/liquid/index.d.ts

@@ -1,4 +1,4 @@
-import type { VisualizationOptions } from '../../types';
+import type { VisualizationOptions, VisualizationTheme } from '../../types';
 /**
  * LiquidConfig defines the configuration for rendering the liquid chart.
  */
@@ -6,7 +6,7 @@ export interface LiquidConfig {
     type?: 'liquid';
     percent: number;
     shape?: 'rect' | 'circle' | 'pin' | 'triangle';
-    theme?: 'default' | 'academy' | 'dark';
+    theme?: VisualizationTheme;
     title?: string;
     style?: {
         backgroundColor?: string;

package/dist/esm/vis/liquid/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_FONT_FAMILY, getBackgroundColor, getChartVisualTokens, getThemeObject, normalizePalette } from "../../util";
 
 // Default dimensions used for font size calculation when not explicitly provided
 var DEFAULT_WIDTH = 640;
@@ -69,11 +69,19 @@ export var Liquid = function Liquid(options) {
     // Get colors from style.palette or theme defaults
     var colors = normalizePalette(style.palette, theme);
     var backgroundColor = style.backgroundColor || getBackgroundColor(theme);
+    var tokens = getChartVisualTokens(theme);
+    var normalizedPercent = Number.isFinite(percent) ? Math.max(0, Math.min(1, percent)) : 0;
 
     // Calculate dynamic font size based on chart dimensions
     // Use default dimensions for font size calculation when not provided
     var inferFontSize = Math.min(width !== null && width !== void 0 ? width : DEFAULT_WIDTH, height !== null && height !== void 0 ? height : DEFAULT_HEIGHT) / 10;
     var fontSize = Math.min(Math.max(inferFontSize, 24), 64);
+    var chartSize = Math.min(width !== null && width !== void 0 ? width : DEFAULT_WIDTH, height !== null && height !== void 0 ? height : DEFAULT_HEIGHT);
+    var waveLength = Math.min(Math.max(chartSize * 0.4, 96), 192);
+    var formattedPercent = "".concat(Number((normalizedPercent * 100).toFixed(1)), "%");
+    var liquidColor = colors[0];
+    var isAcademy = theme === 'academy';
+    var outlineShadowColor = theme === 'dark' ? 'rgba(0, 0, 0, 0.32)' : 'rgba(15, 23, 42, 0.10)';
 
     // Create chart
     chart = new Chart({
@@ -89,25 +97,44 @@ export var Liquid = function Liquid(options) {
     var chartOptions = {
       animate: false,
       type: 'liquid',
-      data: percent,
-      title: title !== null && title !== void 0 ? title : '',
+      data: normalizedPercent,
+      title: title || '',
+      inset: 20,
       style: _objectSpread({
         shape: shape,
+        contentText: formattedPercent,
         contentFontSize: fontSize,
-        contentFill: '#000',
-        contentStroke: '#fff',
-        contentLineWidth: 2,
-        outlineBorder: 4,
-        outlineDistance: 4,
-        waveLength: 128,
+        contentFill: tokens.textPrimary,
+        contentStroke: backgroundColor,
+        contentStrokeOpacity: 0.92,
+        contentLineWidth: theme === 'dark' ? 3 : 2.5,
+        contentFontFamily: CHART_FONT_FAMILY,
+        contentFontWeight: 600,
+        contentLetterSpacing: -0.8,
+        contentFontVariantNumeric: 'tabular-nums',
+        contentPaintOrder: 'stroke',
+        backgroundFill: liquidColor,
+        backgroundFillOpacity: theme === 'dark' ? 0.14 : isAcademy ? 0.06 : 0.08,
+        backgroundStroke: liquidColor,
+        backgroundStrokeOpacity: theme === 'dark' ? 0.3 : 0.22,
+        backgroundLineWidth: 1,
+        outlineBorder: isAcademy ? 1.5 : 2,
+        outlineDistance: 0,
+        outlineStrokeOpacity: isAcademy ? 0.9 : 0.72,
+        outlineShadowColor: isAcademy ? 'transparent' : outlineShadowColor,
+        outlineShadowBlur: isAcademy ? 0 : 6,
+        outlineShadowOffsetY: isAcademy ? 0 : 2,
+        waveLength: waveLength,
+        waveCount: 2,
+        fillOpacity: isAcademy ? 0.9 : 0.88,
         contentPointerEvents: 'none'
-      }, colors[0] ? {
-        fill: colors[0],
-        outlineStroke: colors[0]
+      }, liquidColor ? {
+        fill: liquidColor,
+        outlineStroke: liquidColor
       } : {}),
-      viewStyle: {
+      viewStyle: style.backgroundColor ? {
         viewFill: backgroundColor
-      },
+      } : undefined,
       theme: getThemeObject(theme),
       tooltip: false
     };

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

@@ -1,4 +1,4 @@
-import type { VisualizationOptions } from '../../types';
+import type { VisualizationOptions, VisualizationTheme } from '../../types';
 /**
  * PieDataItem is the type for each data item in the pie chart.
  */
@@ -13,7 +13,7 @@ export interface PieConfig {
     type?: 'pie';
     data: PieDataItem[];
     innerRadius?: number;
-    theme?: 'default' | 'academy' | 'dark';
+    theme?: VisualizationTheme;
     title?: string;
     style?: {
         backgroundColor?: string;

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

@@ -1,5 +1,5 @@
 import { Chart } from '@antv/g2';
-import { getBackgroundColor, getThemeObject, normalizePalette } from "../../util/theme";
+import { getChartAnimation, getChartVisualTokens, getColorLegend, getThemeObject, normalizePalette } from "../../util";
 
 /**
  * PieDataItem is the type for each data item in the pie chart.
@@ -44,6 +44,7 @@ export var Pie = function Pie(options) {
     _options$theme = options.theme,
     chartTheme = _options$theme === void 0 ? 'default' : _options$theme;
   var chart = null;
+  var hasRendered = false;
 
   // Precision multiplier for rounding percentages to 4 decimal places
   var PERCENTAGE_PRECISION_MULTIPLIER = 10000;
@@ -69,7 +70,7 @@ export var Pie = function Pie(options) {
 
     // Get colors from style.palette or theme defaults
     var colors = normalizePalette(style.palette, theme);
-    var backgroundColor = style.backgroundColor || getBackgroundColor(theme);
+    var tokens = getChartVisualTokens(theme);
 
     // Calculate sum for percentage labels
     var sumValue = data.reduce(function (sum, item) {
@@ -88,10 +89,10 @@ export var Pie = function Pie(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,
+      animate: getChartAnimation(hasRendered, 'waveIn'),
       type: 'interval',
       data: data,
-      title: title !== null && title !== void 0 ? title : '',
+      title: title || '',
       encode: {
         y: 'value',
         color: 'category'
@@ -108,15 +109,12 @@ export var Pie = function Pie(options) {
           range: colors
         }
       },
-      legend: {
-        color: {
-          position: 'top'
-        }
-      },
-      labels: [{
+      legend: getColorLegend(true),
+      labels: data.length > 8 ? [] : [{
         text: function text(d) {
-          var percentage = Math.round(d.value / sumValue * 100 * PERCENTAGE_PRECISION_MULTIPLIER) / PERCENTAGE_PRECISION_MULTIPLIER;
-          return "".concat(d.category, ": ").concat(percentage, "%");
+          var percentage = sumValue ? Math.round(d.value / sumValue * 100 * PERCENTAGE_PRECISION_MULTIPLIER) / PERCENTAGE_PRECISION_MULTIPLIER : 0;
+          var formattedPercentage = Number(percentage.toFixed(1)).toString();
+          return "".concat(d.category, ": ").concat(formattedPercentage, "%");
         },
         position: 'outside',
         transform: [{
@@ -132,20 +130,41 @@ export var Pie = function Pie(options) {
         }]
       },
       interaction: {
+        tooltip: true,
+        elementHighlight: true,
+        elementHoverScale: {
+          shadow: false
+        },
         elementSelect: {
           single: true
         }
       },
-      style: {
-        fillOpacity: 0.8
+      state: {
+        active: {
+          fillOpacity: 1,
+          lineWidth: 3
+        },
+        inactive: {
+          fillOpacity: 0.3
+        },
+        selected: {
+          fillOpacity: 1,
+          lineWidth: 3
+        }
       },
-      viewStyle: {
-        viewFill: backgroundColor
+      style: {
+        fillOpacity: 1,
+        stroke: tokens.separator,
+        lineWidth: 2
       },
+      viewStyle: style.backgroundColor ? {
+        viewFill: style.backgroundColor
+      } : undefined,
       theme: getThemeObject(theme)
     };
     chart.options(chartOptions);
     chart.render();
+    hasRendered = true;
   };
 
   /**
@@ -156,6 +175,7 @@ export var Pie = function Pie(options) {
       chart.destroy();
       chart = null;
     }
+    hasRendered = false;
   };
   return {
     render: render,

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

@@ -1,4 +1,4 @@
-import type { VisualizationOptions } from '../../types';
+import type { VisualizationOptions, VisualizationTheme } from '../../types';
 /**
  * RadarDataItem is the type for each data item in the radar chart.
  */
@@ -15,7 +15,7 @@ export interface RadarConfig {
     data: RadarDataItem[];
     title?: string;
     align?: boolean;
-    theme?: 'default' | 'academy' | 'dark';
+    theme?: VisualizationTheme;
     style?: {
         backgroundColor?: string;
         palette?: string[];

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

@@ -15,7 +15,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { Chart } from '@antv/g2';
-import { getBackgroundColor, getThemeObject, normalizePalette } from "../../util/theme";
+import { CHART_STYLE_DEFAULTS, getColorLegend, getLineHighlightState, getSeriesHighlightByColorInteraction, getThemeObject, normalizePalette } from "../../util";
 
 /**
  * RadarDataItem is the type for each data item in the radar chart.
@@ -118,15 +118,16 @@ export var Radar = function Radar(options) {
       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 colors = normalizePalette(style.palette, theme);
-    var backgroundColor = style.backgroundColor || getBackgroundColor(theme);
 
     // Transform data to parallel format
     var parallelData = transformRadarToParallel(data);
     var position = Object.keys(parallelData[0] || {}).filter(function (key) {
       return key !== 'group';
     });
+    var hasMultipleSeries = parallelData.length > 1;
+    var legend = getColorLegend(hasMultipleSeries);
 
     // Create chart
     chart = new Chart({
@@ -143,11 +144,11 @@ export var Radar = function Radar(options) {
       animate: false,
       type: 'line',
       data: parallelData,
-      title: title !== null && title !== void 0 ? title : '',
+      title: title || '',
       coordinate: {
         type: 'radar'
       },
-      inset: 18,
+      inset: 24,
       encode: {
         position: position,
         color: 'group'
@@ -177,45 +178,31 @@ export var Radar = function Radar(options) {
         length: position.length
       }, function (_, i) {
         return ["position".concat(i === 0 ? '' : i), {
-          zIndex: 1,
-          titleFontSize: 10,
-          titleSpacing: 8,
-          label: true,
-          labelFill: theme === 'dark' ? '#fff' : '#000',
-          labelOpacity: 0.45,
-          labelFontSize: 10,
-          line: true,
-          lineFill: '#000',
-          lineStrokeOpacity: 0.25,
+          label: align ? i === 0 : true,
           tickFilter: function tickFilter(_, idx) {
             return !(i !== 0 && idx === 0);
           },
-          tickCount: 4,
-          gridStrokeOpacity: 0.45,
-          gridStroke: theme === 'dark' ? '#fff' : '#000',
-          gridLineWidth: 1,
-          gridLineDash: [4, 4]
+          grid: i === 0
         }];
       })),
       style: {
         lineWidth: lineWidth,
         lineCap: 'round',
-        lineJoin: 'round'
+        lineJoin: 'round',
+        strokeOpacity: CHART_STYLE_DEFAULTS.lineOpacity
       },
-      legend: parallelData.length > 1 ? {
-        color: {
-          position: 'top',
-          itemMarker: 'point'
-        }
-      } : false,
-      interaction: {
-        tooltip: {
-          series: false
-        }
-      },
-      viewStyle: {
-        viewFill: backgroundColor
+      state: hasMultipleSeries ? getLineHighlightState(lineWidth) : undefined,
+      legend: legend === false ? false : {
+        color: _objectSpread(_objectSpread({}, legend.color), {}, {
+          itemMarker: 'smooth'
+        })
       },
+      interaction: _objectSpread({
+        tooltip: true
+      }, hasMultipleSeries ? getSeriesHighlightByColorInteraction() : {}),
+      viewStyle: style.backgroundColor ? {
+        viewFill: style.backgroundColor
+      } : undefined,
       theme: getThemeObject(theme)
     };
     chart.options(chartOptions);

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

@@ -1,5 +1,5 @@
 import { Chart } from '@antv/g2';
-import { getBackgroundColor, getThemeObject, normalizePalette } from "../../util/theme";
+import { getThemeObject, normalizePalette } from "../../util/theme";
 
 /**
  * SankeyDataItem is the type for each data item in the sankey chart.
@@ -67,7 +67,6 @@ export var Sankey = function Sankey(options) {
 
     // Get colors from style.palette or theme defaults
     var colors = normalizePalette(style.palette, theme);
-    var backgroundColor = style.backgroundColor || getBackgroundColor(theme);
 
     // Create chart
     chart = new Chart({
@@ -109,9 +108,9 @@ export var Sankey = function Sankey(options) {
         nodeLineWidth: 1,
         linkFillOpacity: 0.3
       },
-      viewStyle: {
-        viewFill: backgroundColor
-      },
+      viewStyle: style.backgroundColor ? {
+        viewFill: style.backgroundColor
+      } : undefined,
       theme: getThemeObject(theme),
       legend: false,
       tooltip: false

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

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