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

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/mindmap/index.js

@@ -15,7 +15,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, idOf, positionOf, treeToGraphData } from '@antv/g6';
-import { getBackgroundColor, normalizePalette } from "../../util/theme";
+import { getBackgroundColor, getTheme, normalizePalette } from "../../util/theme";
 
 /**
  * MindmapConfig defines the configuration for rendering the mindmap.
@@ -179,16 +179,17 @@ export var Mindmap = function Mindmap(options) {
       height: height,
       autoFit: 'view',
       autoResize: true,
-      padding: 20,
+      padding: title ? [46, 20, 20, 20] : 20,
       zoomRange: [0.1, 5],
       zoom: 1,
-      theme: chartTheme,
+      theme: getTheme(theme),
       data: graphData,
       plugins: title ? [{
         key: 'title',
         type: 'title',
         title: title,
-        titleFill: isDark ? '#e0e6ed' : '#1a1a2e'
+        titleFill: isDark ? '#e0e6ed' : '#000',
+        titleFontFamily: 'sans-serif'
       }] : [],
       node: {
         type: 'rect',
@@ -219,7 +220,7 @@ export var Mindmap = function Mindmap(options) {
           var base = {
             size: [nodeWidth, nodeHeight],
             dx: dx,
-            radius: 8,
+            radius: theme === 'academy' ? 0 : 8,
             labelText: label,
             labelPlacement: 'center',
             labelFontSize: fontSize,

package/dist/esm/vis/network-graph/index.js

@@ -1,5 +1,5 @@
 import { Graph } from '@antv/g6';
-import { getBackgroundColor, normalizePalette } from "../../util/theme";
+import { getBackgroundColor, getTheme, normalizePalette } from "../../util/theme";
 
 /**
  * NetworkGraphConfig defines the configuration for rendering the network graph.
@@ -180,7 +180,8 @@ export var NetworkGraph = function NetworkGraph(options) {
       height: height,
       autoFit: 'view',
       autoResize: true,
-      padding: 24,
+      theme: getTheme(theme),
+      padding: title ? [46, 20, 20, 20] : 20,
       data: {
         nodes: nodeData,
         edges: edgeData
@@ -197,7 +198,8 @@ export var NetworkGraph = function NetworkGraph(options) {
         key: 'title',
         type: 'title',
         title: title,
-        titleFill: isDark ? '#e0e6ed' : '#1a1a2e'
+        titleFill: isDark ? '#e0e6ed' : '#000',
+        titleFontFamily: 'sans-serif'
       }] : []
     });
     graph.render();

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

@@ -5,7 +5,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 { Graph } from '@antv/g6';
-import { getBackgroundColor, normalizePalette } from "../../util/theme";
+import { getBackgroundColor, getTheme, normalizePalette } from "../../util/theme";
 
 /**
  * OrganizationChartConfig defines the configuration for rendering the organization chart.
@@ -153,7 +153,8 @@ export var OrganizationChart = function OrganizationChart(options) {
       height: height,
       autoFit: 'view',
       autoResize: true,
-      padding: 24,
+      theme: getTheme(theme),
+      padding: title ? [46, 20, 20, 20] : 20,
       data: {
         nodes: nodeData,
         edges: edgeData
@@ -189,7 +190,8 @@ export var OrganizationChart = function OrganizationChart(options) {
         key: 'title',
         type: 'title',
         title: title,
-        titleFill: isDark ? '#e0e6ed' : '#1a1a2e'
+        titleFill: isDark ? '#e0e6ed' : '#000',
+        titleFontFamily: 'sans-serif'
       }] : [])),
       node: {
         type: 'rect',
@@ -203,7 +205,7 @@ export var OrganizationChart = function OrganizationChart(options) {
           },
           stroke: isDark ? '#555' : '#e8ebf0',
           lineWidth: 1,
-          radius: 8,
+          radius: theme === 'academy' ? 0 : 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) {

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.
  */
@@ -14,7 +14,9 @@ export interface ScatterConfig {
     type?: 'scatter';
     data: ScatterDataItem[];
     title?: string;
-    theme?: 'default' | 'academy' | 'dark';
+    axisXTitle?: string;
+    axisYTitle?: string;
+    theme?: VisualizationTheme;
     style?: {
         backgroundColor?: string;
         palette?: string[];

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

@@ -1,5 +1,11 @@
+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); }
 import { Chart } from '@antv/g2';
-import { getBackgroundColor, getThemeObject, normalizePalette } from "../../util/theme";
+import { CHART_STYLE_DEFAULTS, getBackgroundColor, getCartesianAxis, getChartAnimation, getColorLegend, getPointHighlightState, getThemeObject, normalizePalette } from "../../util";
 
 /**
  * ScatterDataItem is the type for each data item in the scatter chart.
@@ -44,6 +50,7 @@ export var Scatter = function Scatter(options) {
     _options$theme = options.theme,
     chartTheme = _options$theme === void 0 ? 'default' : _options$theme;
   var chart = null;
+  var hasRendered = false;
 
   /**
    * Render the scatter chart with the given configuration.
@@ -55,6 +62,8 @@ export var Scatter = function Scatter(options) {
       _config$theme = config.theme,
       theme = _config$theme === void 0 ? chartTheme : _config$theme,
       title = config.title,
+      axisXTitle = config.axisXTitle,
+      axisYTitle = config.axisYTitle,
       _config$style = config.style,
       style = _config$style === void 0 ? {} : _config$style;
 
@@ -83,13 +92,18 @@ export var Scatter = function Scatter(options) {
     var scaleConfig = {
       y: {
         nice: true
+      },
+      x: {
+        nice: true
       }
     };
     if (hasGroupField) {
       encode = {
         x: 'x',
         y: 'y',
-        color: 'group'
+        color: 'group',
+        shape: 'point',
+        size: CHART_STYLE_DEFAULTS.scatterPointSize
       };
       scaleConfig.color = {
         range: colors
@@ -98,9 +112,8 @@ export var Scatter = function Scatter(options) {
       encode = {
         x: 'x',
         y: 'y',
-        color: function color() {
-          return 'all';
-        }
+        shape: 'point',
+        size: CHART_STYLE_DEFAULTS.scatterPointSize
       };
     }
 
@@ -108,39 +121,51 @@ export var Scatter = function Scatter(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, 'fadeIn'),
       type: 'point',
       data: data,
-      title: title !== null && title !== void 0 ? title : '',
+      title: title || '',
       encode: encode,
-      legend: hasGroupField ? {
-        color: {
-          position: 'top'
-        }
-      } : false,
+      legend: getColorLegend(hasGroupField),
       scale: scaleConfig,
-      style: {
-        lineWidth: 1
-      },
+      axis: getCartesianAxis({
+        axisXTitle: axisXTitle,
+        axisYTitle: axisYTitle
+      }),
+      style: _objectSpread({
+        lineWidth: CHART_STYLE_DEFAULTS.pointLineWidth,
+        fillOpacity: 0.88,
+        stroke: backgroundColor
+      }, !hasGroupField ? {
+        fill: colors[0]
+      } : {}),
+      // A same-color stroke enlarges the rendered path without changing its transform or
+      // hit area, so repeated pointer events cannot accumulate scale.
+      state: getPointHighlightState(),
       tooltip: {
         title: function title(d) {
           return d !== null && d !== void 0 && d.group ? d.group : false;
         },
         items: [{
           channel: 'x',
-          name: 'x'
+          name: axisXTitle !== null && axisXTitle !== void 0 ? axisXTitle : 'x'
         }, {
           channel: 'y',
-          name: 'y'
+          name: axisYTitle !== null && axisYTitle !== void 0 ? axisYTitle : 'y'
         }]
       },
-      viewStyle: {
-        viewFill: backgroundColor
+      interaction: {
+        tooltip: true,
+        elementHighlight: true
       },
+      viewStyle: style.backgroundColor ? {
+        viewFill: backgroundColor
+      } : undefined,
       theme: getThemeObject(theme)
     };
     chart.options(chartOptions);
     chart.render();
+    hasRendered = true;
   };
 
   /**
@@ -151,6 +176,7 @@ export var Scatter = function Scatter(options) {
       chart.destroy();
       chart = null;
     }
+    hasRendered = false;
   };
   return {
     render: render,

package/dist/esm/vis/treemap/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";
 
 /**
  * TreemapDataItem is the type for each data item in the treemap chart.
@@ -84,7 +84,6 @@ export var Treemap = function Treemap(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({
@@ -129,9 +128,9 @@ export var Treemap = function Treemap(options) {
           };
         }]
       },
-      viewStyle: {
-        viewFill: backgroundColor
-      },
+      viewStyle: style.backgroundColor ? {
+        viewFill: style.backgroundColor
+      } : undefined,
       theme: getThemeObject(theme),
       scale: _objectSpread({}, colors.length > 0 ? {
         color: {