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

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

@@ -1,5 +1,17 @@
+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); }
+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";
+import { CHART_FONT_FAMILY, getBackgroundColor, getChartVisualTokens, getThemeObject, normalizePalette, resolveChartLocale } from "../../util";
 
 /**
  * FunnelDataItem is the type for each data item in the funnel chart.
@@ -13,6 +25,32 @@ import { getBackgroundColor, getThemeObject, normalizePalette } from "../../util
  * FunnelInstance represents a funnel chart instance with render and destroy methods.
  */
 
+var FUNNEL_LABELS = {
+  'en-US': {
+    baseline: 'Baseline',
+    conversionRate: 'Conversion Rate',
+    currentValue: 'Current value',
+    dropOff: 'Drop-off from previous',
+    overallConversionRate: 'Overall conversion',
+    stageConversion: 'Stage conversion'
+  },
+  'zh-CN': {
+    baseline: '基准',
+    conversionRate: '转化率',
+    currentValue: '当前值',
+    dropOff: '较上一步流失',
+    overallConversionRate: '整体转化率',
+    stageConversion: '阶段转化率'
+  }
+};
+var formatConversionRate = function formatConversionRate(start, end) {
+  if (!Number.isFinite(start) || !Number.isFinite(end) || start === 0) return '—';
+  return "".concat((end / start * 100).toFixed(1), "%");
+};
+var formatMetricLabel = function formatMetricLabel(label, value, locale) {
+  return locale === 'zh-CN' ? "".concat(label, "\uFF1A").concat(value) : "".concat(label, ": ").concat(value);
+};
+
 /**
  * Funnel chart component using G2 5.0.
  *
@@ -42,6 +80,7 @@ export var Funnel = function Funnel(options) {
   var container = options.container,
     width = options.width,
     height = options.height,
+    locale = options.locale,
     _options$theme = options.theme,
     chartTheme = _options$theme === void 0 ? 'default' : _options$theme;
   var chart = null;
@@ -50,14 +89,21 @@ export var Funnel = function Funnel(options) {
    * Render the funnel chart with the given configuration.
    */
   var render = function render(config) {
-    var _data$, _data, _data$2, _data2, _data$3, _data3;
     var _config$data = config.data,
       data = _config$data === void 0 ? [] : _config$data,
       _config$theme = config.theme,
       theme = _config$theme === void 0 ? chartTheme : _config$theme,
       title = config.title,
+      _config$locale = config.locale,
+      renderLocale = _config$locale === void 0 ? locale : _config$locale,
+      conversionRateLabel = config.conversionRateLabel,
       _config$style = config.style,
       style = _config$style === void 0 ? {} : _config$style;
+    var chartLocale = resolveChartLocale(renderLocale);
+    var labels = FUNNEL_LABELS[chartLocale];
+    var numberFormatter = new Intl.NumberFormat(chartLocale);
+    var stageConversionRateLabel = conversionRateLabel !== null && conversionRateLabel !== void 0 ? conversionRateLabel : labels.conversionRate;
+    var overallConversionRateLabel = conversionRateLabel !== null && conversionRateLabel !== void 0 ? conversionRateLabel : labels.overallConversionRate;
 
     // Clean up previous chart if exists
     if (chart) {
@@ -67,10 +113,37 @@ export var Funnel = function Funnel(options) {
     // Get colors from style.palette or theme defaults
     var colors = normalizePalette(style.palette, theme);
     var backgroundColor = style.backgroundColor || getBackgroundColor(theme);
-
-    // Helper function to calculate conversion rate
-    var conversionRate = function conversionRate(start, end) {
-      return "".concat((end / start * 100).toFixed(2), " %");
+    var tokens = getChartVisualTokens(theme);
+    var formatValue = function formatValue(value) {
+      return Number.isFinite(value) ? numberFormatter.format(value) : '—';
+    };
+    var metricsByCategory = new Map(data.map(function (item, index) {
+      var previous = data[index - 1];
+      return [item.category, {
+        conversion: previous ? formatConversionRate(previous.value, item.value) : labels.baseline,
+        dropOff: previous ? Math.max(0, previous.value - item.value) : null
+      }];
+    }));
+    var funnelTooltip = {
+      title: 'category',
+      items: [function (d) {
+        return {
+          name: labels.currentValue,
+          value: formatValue(d.value)
+        };
+      }, function (d) {
+        var _metricsByCategory$ge, _metricsByCategory$ge2;
+        return {
+          name: labels.stageConversion,
+          value: (_metricsByCategory$ge = (_metricsByCategory$ge2 = metricsByCategory.get(d.category)) === null || _metricsByCategory$ge2 === void 0 ? void 0 : _metricsByCategory$ge2.conversion) !== null && _metricsByCategory$ge !== void 0 ? _metricsByCategory$ge : '—'
+        };
+      }, function (d) {
+        var _metricsByCategory$ge3, _metricsByCategory$ge4, _metricsByCategory$ge5;
+        return {
+          name: labels.dropOff,
+          value: ((_metricsByCategory$ge3 = metricsByCategory.get(d.category)) === null || _metricsByCategory$ge3 === void 0 ? void 0 : _metricsByCategory$ge3.dropOff) === null ? '—' : formatValue((_metricsByCategory$ge4 = (_metricsByCategory$ge5 = metricsByCategory.get(d.category)) === null || _metricsByCategory$ge5 === void 0 ? void 0 : _metricsByCategory$ge5.dropOff) !== null && _metricsByCategory$ge4 !== void 0 ? _metricsByCategory$ge4 : Number.NaN)
+        };
+      }]
     };
 
     // Create chart
@@ -79,8 +152,8 @@ export var Funnel = function Funnel(options) {
       width: width,
       height: height,
       autoFit: true,
-      paddingLeft: 40,
-      paddingRight: 68
+      paddingLeft: 56,
+      paddingRight: 118
     });
 
     // Configure chart options
@@ -90,7 +163,7 @@ export var Funnel = function Funnel(options) {
       animate: false,
       type: 'view',
       data: data,
-      title: title !== null && title !== void 0 ? title : '',
+      title: title || '',
       children: [{
         type: 'interval',
         data: data,
@@ -116,73 +189,78 @@ export var Funnel = function Funnel(options) {
             range: colors
           }
         },
-        legend: {
-          color: {
-            position: 'top',
-            layout: {
-              justifyContent: 'center'
-            }
-          }
-        },
-        labels: [
-        // Inside label showing category and value
-        {
+        legend: false,
+        tooltip: funnelTooltip,
+        labels: [{
           text: function text(d) {
-            return "".concat(d.category, "\n").concat(d.value);
+            return "".concat(d.category, "\n").concat(formatValue(d.value));
           },
           position: 'inside',
           transform: [{
             type: 'contrastReverse'
-          }]
-        },
-        // Connecting line for conversion rate
-        {
-          text: function text(d, i) {
-            return i !== 0 ? '———' : '';
-          },
+          }, {
+            type: 'overflowStroke'
+          }],
           style: {
-            'font-size': '1px',
-            color: '#666',
-            'letter-spacing': '0px'
-          },
-          position: 'top-right',
-          fill: '#666',
-          dx: 35,
-          dy: -8
-        },
-        // Conversion rate label text
-        {
-          text: function text(d, i) {
-            return i !== 0 ? '转化率' : '';
+            fontFamily: CHART_FONT_FAMILY,
+            fontSize: 12,
+            fontWeight: 500,
+            lineHeight: 17
+          }
+        }, {
+          text: function text(_d, index) {
+            return index === 0 ? '' : '———';
           },
           position: 'top-right',
-          textAlign: 'left',
-          textBaseline: 'middle',
-          fill: '#666',
-          dx: 40
-        },
-        // Conversion rate percentage
-        {
-          text: function text(d, i, dataArray) {
-            return i !== 0 ? conversionRate(dataArray[i - 1].value, dataArray[i].value) : '';
+          fill: tokens.textSecondary,
+          fillOpacity: 0.72,
+          dx: 18,
+          dy: -6,
+          style: {
+            fontFamily: CHART_FONT_FAMILY,
+            fontSize: 8,
+            fontWeight: 400,
+            letterSpacing: -2
+          }
+        }, {
+          text: function text(_d, index, items) {
+            return index === 0 ? '' : formatMetricLabel(stageConversionRateLabel, formatConversionRate(items[index - 1].value, items[index].value), chartLocale);
           },
           position: 'top-right',
           textAlign: 'left',
           textBaseline: 'middle',
-          dx: 80
+          fill: tokens.textPrimary,
+          dx: 44,
+          style: {
+            fontFamily: CHART_FONT_FAMILY,
+            fontSize: 11,
+            fontWeight: 500
+          }
         }],
-        viewStyle: {
+        style: _objectSpread({
+          fillOpacity: 0.94,
+          stroke: tokens.separator,
+          lineWidth: 2
+        }, theme === 'academy' ? {} : {
+          radius: 4
+        }),
+        state: {
+          active: {
+            fillOpacity: 1,
+            stroke: tokens.separator,
+            lineWidth: 3
+          }
+        },
+        viewStyle: style.backgroundColor ? {
           viewFill: backgroundColor
-        }
-      },
-      // Overall conversion rate connector
-      {
+        } : undefined
+      }].concat(_toConsumableArray(data.length > 1 ? [{
         type: 'connector',
         data: [{
-          startX: (_data$ = data[0]) === null || _data$ === void 0 ? void 0 : _data$.category,
-          startY: (_data = data[data.length - 1]) === null || _data === void 0 ? void 0 : _data.category,
+          startX: data[0].category,
+          startY: data[data.length - 1].category,
           endX: 0,
-          endY: (((_data$2 = data[0]) === null || _data$2 === void 0 ? void 0 : _data$2.value) - ((_data2 = data[data.length - 1]) === null || _data2 === void 0 ? void 0 : _data2.value)) / 2
+          endY: (data[0].value - data[data.length - 1].value) / 2
         }],
         encode: {
           x: 'startX',
@@ -190,41 +268,36 @@ export var Funnel = function Funnel(options) {
           y: 'endX',
           y1: 'endY'
         },
+        tooltip: false,
         style: {
-          stroke: '#666',
+          stroke: tokens.axisLine,
+          strokeOpacity: theme === 'academy' ? 1 : 0.82,
+          lineWidth: theme === 'academy' ? 1 : 0.75,
           markerEnd: false,
-          connectLength1: -12,
-          offset2: -20,
-          connectorStroke: '#0649f2',
-          lineDash: [12, 2]
+          connectLength1: -12
         },
         labels: [{
-          text: '转化率',
+          text: formatMetricLabel(overallConversionRateLabel, formatConversionRate(data[0].value, data[data.length - 1].value), chartLocale),
           position: 'left',
           textAlign: 'start',
           textBaseline: 'middle',
-          fill: '#666',
-          dx: 10
-        }, {
-          text: conversionRate((_data$3 = data[0]) === null || _data$3 === void 0 ? void 0 : _data$3.value, (_data3 = data[data.length - 1]) === null || _data3 === void 0 ? void 0 : _data3.value),
-          position: 'left',
-          textAlign: 'start',
-          dx: 50,
-          fill: '#000'
+          fill: tokens.textPrimary,
+          dx: 8,
+          style: {
+            fontFamily: CHART_FONT_FAMILY,
+            fontSize: 11,
+            fontWeight: 500
+          }
         }]
-      }],
+      }] : [])),
       axis: false,
-      tooltip: {
-        items: [function (d) {
-          return {
-            name: d.category,
-            value: d.value
-          };
-        }]
+      interaction: {
+        tooltip: true,
+        elementHighlight: true
       },
-      viewStyle: {
+      viewStyle: style.backgroundColor ? {
         viewFill: backgroundColor
-      },
+      } : undefined,
       theme: getThemeObject(theme)
     };
     chart.options(chartOptions);

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

@@ -1,5 +1,5 @@
 import { Chart } from '@antv/g2';
-import { getBackgroundColor, getThemeObject, normalizePalette } from "../../util/theme";
+import { getThemeObject, normalizePalette } from "../../util/theme";
 
 /**
  * HistogramConfig defines the configuration for rendering the histogram chart.
@@ -61,7 +61,6 @@ export var Histogram = function Histogram(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({
@@ -122,9 +121,9 @@ export var Histogram = function Histogram(options) {
           name: '频数'
         }]
       },
-      viewStyle: {
-        viewFill: backgroundColor
-      },
+      viewStyle: style.backgroundColor ? {
+        viewFill: style.backgroundColor
+      } : undefined,
       theme: getThemeObject(theme)
     };
     chart.options(chartOptions);

package/dist/esm/vis/indented-tree/index.js

@@ -27,7 +27,7 @@ function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol
 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 _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 { Badge, BaseBehavior, BaseNode, CommonEvent, ExtensionCategory, Graph, NodeEvent, Polyline, iconfont, register, subStyleProps, treeToGraphData } from '@antv/g6';
-import { getBackgroundColor, normalizePalette } from "../../util/theme";
+import { getBackgroundColor, getTheme, normalizePalette } from "../../util/theme";
 
 // ---------------------------------------------------------------------------
 // Official G6 indented-tree implementation (adapted for GPT-Vis)
@@ -449,7 +449,8 @@ export var IndentedTree = function IndentedTree(options) {
       height: height,
       autoFit: 'view',
       autoResize: true,
-      padding: 20,
+      theme: getTheme(theme),
+      padding: title ? [46, 20, 20, 20] : 20,
       data: graphData,
       node: {
         type: GPT_VIS_INDENTED_NODE,
@@ -461,8 +462,11 @@ export var IndentedTree = function IndentedTree(options) {
           labelBackground: function labelBackground(datum) {
             return datum.id === rootId;
           },
-          labelBackgroundRadius: 0,
+          labelBackgroundRadius: theme === 'academy' ? 0 : 4,
           labelBackgroundFill: (_palette$ = palette[0]) !== null && _palette$ !== void 0 ? _palette$ : '#1783FF',
+          labelPadding: function labelPadding(datum) {
+            return datum.id === rootId ? [2, 8] : 0;
+          },
           labelFill: function labelFill(datum) {
             return datum.id === rootId ? '#fff' : isDark ? '#d0d0d0' : '#666';
           },
@@ -538,7 +542,8 @@ export var IndentedTree = function IndentedTree(options) {
         key: 'title',
         type: 'title',
         title: title,
-        titleFill: isDark ? '#e0e6ed' : '#1a1a2e'
+        titleFill: isDark ? '#e0e6ed' : '#000',
+        titleFontFamily: 'sans-serif'
       }] : []
     });
     graph.render();

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

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

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;