@antv/gpt-vis 1.0.1 → 1.0.2

package/dist/cjs/vis/dual-axes/index.js

@@ -38,9 +38,12 @@ var DualAxes = (options) => {
   const { container, width, height, theme: chartTheme = "default" } = options;
   let chart = null;
   let hasRendered = false;
+  let cleanupCrosshairAxisLabels = null;
   const render = (config) => {
     const { categories, series, theme = chartTheme, title, axisXTitle, style = {} } = config;
     if (chart) {
+      cleanupCrosshairAxisLabels == null ? void 0 : cleanupCrosshairAxisLabels();
+      cleanupCrosshairAxisLabels = null;
       chart.destroy();
     }
     const { startAtZero = false } = style;
@@ -181,11 +184,26 @@ var DualAxes = (options) => {
       theme: (0, import_util.getThemeObject)(theme)
     };
     chart.options(chartOptions);
+    const lineYFields = seriesMeta.filter(({ item }) => item.type === "line").map(({ yField }) => yField);
+    if (lineYFields.length) {
+      const currentChart = chart;
+      const cleanups = lineYFields.map(
+        (yField, index) => (0, import_util.bindCrosshairAxisLabels)(currentChart, theme, {
+          showXLabel: index === 0,
+          useStandaloneYLabel: true,
+          yAxisPosition: "right",
+          yField
+        })
+      );
+      cleanupCrosshairAxisLabels = () => cleanups.forEach((cleanup) => cleanup());
+    }
     chart.render();
     hasRendered = true;
   };
   const destroy = () => {
     if (chart) {
+      cleanupCrosshairAxisLabels == null ? void 0 : cleanupCrosshairAxisLabels();
+      cleanupCrosshairAxisLabels = null;
       chart.destroy();
       chart = null;
     }

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

@@ -14,7 +14,6 @@ export interface FunnelConfig {
     data: FunnelDataItem[];
     theme?: VisualizationTheme;
     title?: string;
-    locale?: string;
     conversionRateLabel?: string;
     style?: {
         backgroundColor?: string;

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

@@ -52,15 +52,8 @@ var Funnel = (options) => {
   const { container, width, height, locale, theme: chartTheme = "default" } = options;
   let chart = null;
   const render = (config) => {
-    const {
-      data = [],
-      theme = chartTheme,
-      title,
-      locale: renderLocale = locale,
-      conversionRateLabel,
-      style = {}
-    } = config;
-    const chartLocale = (0, import_util.resolveChartLocale)(renderLocale);
+    const { data = [], theme = chartTheme, title, conversionRateLabel, style = {} } = config;
+    const chartLocale = (0, import_util.resolveChartLocale)(locale);
     const labels = FUNNEL_LABELS[chartLocale];
     const numberFormatter = new Intl.NumberFormat(chartLocale);
     const stageConversionRateLabel = conversionRateLabel ?? labels.conversionRate;
@@ -72,6 +65,7 @@ var Funnel = (options) => {
     const backgroundColor = style.backgroundColor || (0, import_util.getBackgroundColor)(theme);
     const tokens = (0, import_util.getChartVisualTokens)(theme);
     const formatValue = (value) => Number.isFinite(value) ? numberFormatter.format(value) : "—";
+    const isInverted = data.length > 1 && data[0].value < data[data.length - 1].value;
     const metricsByCategory = new Map(
       data.map((item, index) => {
         const previous = data[index - 1];
@@ -153,12 +147,12 @@ ${formatValue(d.value)}`,
               }
             },
             {
-              text: (_d, index) => index === 0 ? "" : "———",
-              position: "top-right",
+              text: (_d, index, items) => (isInverted ? index < items.length - 1 : index > 0) ? "———" : "",
+              position: isInverted ? "bottom-right" : "top-right",
               fill: tokens.textSecondary,
               fillOpacity: 0.72,
-              dx: 18,
-              dy: -6,
+              dx: 8,
+              dy: isInverted ? 6 : -6,
               style: {
                 fontFamily: import_util.CHART_FONT_FAMILY,
                 fontSize: 8,
@@ -167,16 +161,20 @@ ${formatValue(d.value)}`,
               }
             },
             {
-              text: (_d, index, items) => index === 0 ? "" : formatMetricLabel(
-                stageConversionRateLabel,
-                formatConversionRate(items[index - 1].value, items[index].value),
-                chartLocale
-              ),
-              position: "top-right",
+              text: (_d, index, items) => {
+                const from = isInverted ? items[index] : items[index - 1];
+                const to = isInverted ? items[index + 1] : items[index];
+                return from && to ? formatMetricLabel(
+                  stageConversionRateLabel,
+                  formatConversionRate(from.value, to.value),
+                  chartLocale
+                ) : "";
+              },
+              position: isInverted ? "bottom-right" : "top-right",
               textAlign: "left",
               textBaseline: "middle",
               fill: tokens.textPrimary,
-              dx: 44,
+              dx: 26,
               style: {
                 fontFamily: import_util.CHART_FONT_FAMILY,
                 fontSize: 11,
@@ -204,10 +202,10 @@ ${formatValue(d.value)}`,
             type: "connector",
             data: [
               {
-                startX: data[0].category,
-                startY: data[data.length - 1].category,
+                startX: isInverted ? data[data.length - 1].category : data[0].category,
+                startY: isInverted ? data[0].category : data[data.length - 1].category,
                 endX: 0,
-                endY: (data[0].value - data[data.length - 1].value) / 2
+                endY: Math.abs(data[0].value - data[data.length - 1].value) / 2
               }
             ],
             encode: { x: "startX", x1: "startY", y: "endX", y1: "endY" },

package/dist/cjs/vis/table/index.js

@@ -24,6 +24,7 @@ __export(table_exports, {
 });
 module.exports = __toCommonJS(table_exports);
 var import_measury = require("measury");
+var import_html = require("../../util/html");
 var SCOPE_ID = "__gpt-vis-table__";
 var FONT_FAMILY = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';
 var CELL_PADDING = 16;
@@ -43,6 +44,12 @@ var TABLE_STYLES = `
     color: #1d2129;
   }
 
+  .${SCOPE_ID} .table-empty {
+    padding: 20px;
+    text-align: center;
+    color: #999;
+  }
+
   .${SCOPE_ID} table {
     border-collapse: separate;
     border-spacing: 0;
@@ -167,10 +174,11 @@ var Table = (options) => {
     if (theme === "dark") {
       tableWrapper.setAttribute("data-theme", "dark");
     }
+    const titleHTML = title ? `<div class="table-title">${(0, import_html.escapeHtml)(title)}</div>` : "";
     if (data.length === 0) {
       tableWrapper.innerHTML = `
-        ${title ? `<div class="table-title">${title}</div>` : ""}
-        <div style="padding: 20px; text-align: center; color: #999;">No data available</div>
+        ${titleHTML}
+        <div class="table-empty">No data available</div>
       `;
       container.appendChild(tableWrapper);
       return;
@@ -178,12 +186,12 @@ var Table = (options) => {
     const columns = Object.keys(data[0]);
     let minWidth = calculateTableMinWidth(data, columns);
     minWidth = Math.max(minWidth, columns.length * 100);
-    const headerHTML = columns.map((col) => `<th>${col}</th>`).join("");
+    const headerHTML = columns.map((column) => `<th>${(0, import_html.escapeHtml)(column)}</th>`).join("");
     const bodyHTML = data.map(
-      (row) => `<tr>${columns.map((col) => `<td>${row[col] != null ? row[col] : ""}</td>`).join("")}</tr>`
+      (row) => `<tr>${columns.map((column) => `<td>${(0, import_html.escapeHtml)(row[column])}</td>`).join("")}</tr>`
     ).join("");
     tableWrapper.innerHTML = `
-      ${title ? `<div class="table-title">${title}</div>` : ""}
+      ${titleHTML}
       <table style="min-width: ${minWidth}px;">
         <thead><tr>${headerHTML}</tr></thead>
         <tbody>${bodyHTML}</tbody>

package/dist/esm/util/crosshair-axis-labels.d.ts

@@ -1,9 +1,15 @@
 import { type Chart } from '@antv/g2';
 import type { VisualizationTheme } from '../types';
+export type CrosshairAxisLabelsOptions = {
+    showXLabel?: boolean;
+    useStandaloneYLabel?: boolean;
+    yAxisPosition?: 'left' | 'right';
+    yField?: string;
+};
 /**
  * Bridges G2 tooltip crosshairs to axis value tags.
  *
  * G2 does not currently expose axis tags for tooltip crosshairs, so this adapter
  * reads the rule geometry created by G2 5.4 and renders labels with LineCrosshair.
  */
-export declare const bindCrosshairAxisLabels: (chart: Chart, theme: VisualizationTheme) => (() => void);
+export declare const bindCrosshairAxisLabels: (chart: Chart, theme: VisualizationTheme, { showXLabel, useStandaloneYLabel, yAxisPosition, yField, }?: CrosshairAxisLabelsOptions) => (() => void);

package/dist/esm/util/crosshair-axis-labels.js

@@ -11,27 +11,38 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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; }
 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 { LineCrosshair } from '@antv/component';
+import { LineCrosshair, Tag } from '@antv/component';
 import { selectPlotArea } from '@antv/g2';
 import { CHART_FONT_FAMILY, getChartVisualTokens } from "./tokens";
+var MAX_CROSSHAIR_DECIMAL_PLACES = 6;
 var formatCrosshairAxisValue = function formatCrosshairAxisValue(value, formatter, precision) {
   if (value === undefined || value === null || value === '') return '';
+  var displayValue = value;
   try {
     var formatted = formatter === null || formatter === void 0 ? void 0 : formatter(value);
-    if (formatted !== undefined && formatted !== null) return String(formatted);
+    if (formatted !== undefined && formatted !== null) {
+      var numericFormatted = typeof formatted === 'number' || typeof formatted === 'string' && formatted.trim() !== '' && Number.isFinite(Number(formatted)) ? Number(formatted) : undefined;
+      if (numericFormatted === undefined) return String(formatted);
+      displayValue = numericFormatted;
+    }
   } catch (_unused) {
     // Fall back to the original value when a scale formatter rejects it.
   }
-  if (value instanceof Date) return value.toLocaleString();
-  if (typeof value === 'number' && Number.isFinite(value) && precision !== undefined) {
-    return value.toFixed(precision);
+  if (displayValue instanceof Date) return displayValue.toLocaleString();
+  if (typeof displayValue === 'number' && Number.isFinite(displayValue)) {
+    if (displayValue !== 0 && Math.abs(displayValue) < Math.pow(10, -MAX_CROSSHAIR_DECIMAL_PLACES)) {
+      return Number(displayValue.toPrecision(4)).toString();
+    }
+    var decimalPlaces = Math.min(Math.max(precision !== null && precision !== void 0 ? precision : MAX_CROSSHAIR_DECIMAL_PLACES, 0), MAX_CROSSHAIR_DECIMAL_PLACES);
+    return Number(displayValue.toFixed(decimalPlaces)).toString();
   }
-  return String(value);
+  return String(displayValue);
 };
 var getNumberPrecision = function getNumberPrecision(value) {
   var _coefficient$split$;
   if (!Number.isFinite(value) || value === 0) return 0;
-  var _Math$abs$toExponenti = Math.abs(value).toExponential().split('e'),
+  var normalizedValue = Number(value.toPrecision(12));
+  var _Math$abs$toExponenti = Math.abs(normalizedValue).toExponential().split('e'),
     _Math$abs$toExponenti2 = _slicedToArray(_Math$abs$toExponenti, 2),
     coefficient = _Math$abs$toExponenti2[0],
     _Math$abs$toExponenti3 = _Math$abs$toExponenti2[1],
@@ -51,7 +62,7 @@ var getCrosshairScalePrecision = function getCrosshairScalePrecision(scale) {
     if (Number.isFinite(difference) && difference > 0) interval = Math.min(interval, difference);
   }
   if (!Number.isFinite(interval)) return undefined;
-  return Math.min(getNumberPrecision(interval) + 2, 20);
+  return Math.min(getNumberPrecision(interval) + 2, MAX_CROSSHAIR_DECIMAL_PLACES);
 };
 var getCrosshairTagStyle = function getCrosshairTagStyle(theme, tokens) {
   return {
@@ -75,6 +86,27 @@ var getCrosshairTagStyle = function getCrosshairTagStyle(theme, tokens) {
     tagPointerEvents: 'none'
   };
 };
+var getStandaloneTagStyle = function getStandaloneTagStyle(theme, tokens) {
+  return {
+    align: 'start',
+    verticalAlign: 'middle',
+    padding: [4, 7],
+    radius: 6,
+    backgroundFill: tokens.textPrimary,
+    backgroundStroke: 'transparent',
+    backgroundLineWidth: 0,
+    backgroundShadowColor: theme === 'dark' ? 'rgba(0, 0, 0, 0.38)' : 'rgba(15, 23, 42, 0.18)',
+    backgroundShadowBlur: 8,
+    backgroundShadowOffsetY: 2,
+    labelFill: tokens.background,
+    labelFillOpacity: 1,
+    labelFontFamily: CHART_FONT_FAMILY,
+    labelFontSize: 11,
+    labelFontWeight: 500,
+    labelLineWidth: 0,
+    pointerEvents: 'none'
+  };
+};
 var clamp = function clamp(value, min, max) {
   return Math.min(Math.max(value, Math.min(min, max)), Math.max(min, max));
 };
@@ -124,13 +156,49 @@ var getTooltipPlot = function getTooltipPlot(context) {
   // detail isolated here while using the public plot selector for discovery.
   return selectPlotArea(root);
 };
-var getCartesianView = function getCartesianView(context) {
+var getScaleField = function getScaleField(scale) {
+  var _scale$getOptions2;
+  return scale === null || scale === void 0 || (_scale$getOptions2 = scale.getOptions) === null || _scale$getOptions2 === void 0 || (_scale$getOptions2 = _scale$getOptions2.call(scale)) === null || _scale$getOptions2 === void 0 ? void 0 : _scale$getOptions2.field;
+};
+var findYScaleByField = function findYScaleByField(view, yField) {
+  var _Object$entries$find;
+  return (_Object$entries$find = Object.entries(view.scale).find(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      scaleName = _ref2[0],
+      scale = _ref2[1];
+    return /^y\d*$/.test(scaleName) && getScaleField(scale) === yField;
+  })) === null || _Object$entries$find === void 0 ? void 0 : _Object$entries$find[1];
+};
+var getYScale = function getYScale(view, yField) {
+  return yField ? findYScaleByField(view, yField) : view.scale.y;
+};
+var getCartesianView = function getCartesianView(context, yField) {
   var _context$views;
-  return (_context$views = context.views) === null || _context$views === void 0 ? void 0 : _context$views.find(function (_ref) {
-    var coordinate = _ref.coordinate,
-      scale = _ref.scale;
-    return Boolean((scale === null || scale === void 0 ? void 0 : scale.x) && (scale === null || scale === void 0 ? void 0 : scale.y)) && typeof (coordinate === null || coordinate === void 0 ? void 0 : coordinate.invert) === 'function';
+  return (_context$views = context.views) === null || _context$views === void 0 ? void 0 : _context$views.find(function (view) {
+    var _view$scale, _view$coordinate;
+    return Boolean(((_view$scale = view.scale) === null || _view$scale === void 0 ? void 0 : _view$scale.x) && getYScale(view, yField)) && typeof ((_view$coordinate = view.coordinate) === null || _view$coordinate === void 0 ? void 0 : _view$coordinate.invert) === 'function';
+  });
+};
+var hasAxisField = function hasAxisField(field, yField) {
+  return Array.isArray(field) ? field.includes(yField) : field === yField;
+};
+var getYAxisLinePosition = function getYAxisLinePosition(view, yField, position, fallback, plotX) {
+  var _view$components;
+  if (!yField) return fallback;
+  var axis = (_view$components = view.components) === null || _view$components === void 0 ? void 0 : _view$components.find(function (_ref3) {
+    var bbox = _ref3.bbox,
+      axisPosition = _ref3.position,
+      scales = _ref3.scales,
+      type = _ref3.type;
+    return type === 'axisY' && axisPosition === position && Number.isFinite(Number(bbox === null || bbox === void 0 ? void 0 : bbox.x)) && (scales === null || scales === void 0 ? void 0 : scales.some(function (scale) {
+      return hasAxisField(scale.field, yField);
+    }));
   });
+  if (!(axis !== null && axis !== void 0 && axis.bbox)) return fallback;
+  var x = Number(axis.bbox.x);
+  var width = Number(axis.bbox.width);
+  var axisX = position === 'right' || !Number.isFinite(width) ? x : x + width;
+  return axisX - plotX;
 };
 var getRuleLine = function getRuleLine(rule) {
   var _rule$style, _rule$style2, _rule$style3, _rule$style4;
@@ -148,12 +216,12 @@ var getRuleLine = function getRuleLine(rule) {
 };
 var getPlotOffset = function getPlotOffset(plot) {
   var _plot$getLocalPositio;
-  var _ref2 = ((_plot$getLocalPositio = plot.getLocalPosition) === null || _plot$getLocalPositio === void 0 ? void 0 : _plot$getLocalPositio.call(plot)) || [],
-    _ref3 = _slicedToArray(_ref2, 2),
-    _ref3$ = _ref3[0],
-    x = _ref3$ === void 0 ? 0 : _ref3$,
-    _ref3$2 = _ref3[1],
-    y = _ref3$2 === void 0 ? 0 : _ref3$2;
+  var _ref4 = ((_plot$getLocalPositio = plot.getLocalPosition) === null || _plot$getLocalPositio === void 0 ? void 0 : _plot$getLocalPositio.call(plot)) || [],
+    _ref5 = _slicedToArray(_ref4, 2),
+    _ref5$ = _ref5[0],
+    x = _ref5$ === void 0 ? 0 : _ref5$,
+    _ref5$2 = _ref5[1],
+    y = _ref5$2 === void 0 ? 0 : _ref5$2;
   return [Number.isFinite(Number(x)) ? Number(x) : 0, Number.isFinite(Number(y)) ? Number(y) : 0];
 };
 var invertCoordinate = function invertCoordinate(view, point) {
@@ -175,25 +243,37 @@ var invertCoordinate = function invertCoordinate(view, point) {
  * reads the rule geometry created by G2 5.4 and renders labels with LineCrosshair.
  */
 export var bindCrosshairAxisLabels = function bindCrosshairAxisLabels(chart, theme) {
+  var _ref6 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
+    _ref6$showXLabel = _ref6.showXLabel,
+    showXLabel = _ref6$showXLabel === void 0 ? true : _ref6$showXLabel,
+    _ref6$useStandaloneYL = _ref6.useStandaloneYLabel,
+    useStandaloneYLabel = _ref6$useStandaloneYL === void 0 ? false : _ref6$useStandaloneYL,
+    _ref6$yAxisPosition = _ref6.yAxisPosition,
+    yAxisPosition = _ref6$yAxisPosition === void 0 ? 'left' : _ref6$yAxisPosition,
+    yField = _ref6.yField;
   if (!chart || typeof chart.on !== 'function') return function () {
     return undefined;
   };
   var tagStyle = getCrosshairTagStyle(theme, getChartVisualTokens(theme));
+  var standaloneTagStyle = getStandaloneTagStyle(theme, getChartVisualTokens(theme));
   var boundPlot = null;
   var xCrosshair = null;
   var yCrosshair = null;
+  var standaloneYTag = null;
   var latestPointerY = null;
   var latestXValue;
   var destroyCrosshairs = function destroyCrosshairs() {
-    var _xCrosshair, _yCrosshair;
+    var _xCrosshair, _yCrosshair, _standaloneYTag;
     (_xCrosshair = xCrosshair) === null || _xCrosshair === void 0 || _xCrosshair.destroy();
     (_yCrosshair = yCrosshair) === null || _yCrosshair === void 0 || _yCrosshair.destroy();
+    (_standaloneYTag = standaloneYTag) === null || _standaloneYTag === void 0 || _standaloneYTag.destroy();
     xCrosshair = null;
     yCrosshair = null;
+    standaloneYTag = null;
     boundPlot = null;
   };
   var hideCrosshairs = function hideCrosshairs() {
-    for (var _i = 0, _arr = [xCrosshair, yCrosshair]; _i < _arr.length; _i++) {
+    for (var _i = 0, _arr = [xCrosshair, yCrosshair, standaloneYTag]; _i < _arr.length; _i++) {
       var crosshair = _arr[_i];
       if (crosshair) crosshair.style.visibility = 'hidden';
     }
@@ -215,7 +295,7 @@ export var bindCrosshairAxisLabels = function bindCrosshairAxisLabels(chart, the
     var xEnd = [xLine.x2 + plotX, xLine.y2 + plotY];
     var yStart = [yLine.x1 + plotX, yLine.y1 + plotY];
     var yEnd = [yLine.x2 + plotX, yLine.y2 + plotY];
-    if (!xCrosshair) {
+    if (showXLabel && !xCrosshair) {
       xCrosshair = new LineCrosshair({
         style: _objectSpread(_objectSpread({}, tagStyle), {}, {
           startPos: xStart,
@@ -228,30 +308,41 @@ export var bindCrosshairAxisLabels = function bindCrosshairAxisLabels(chart, the
       xCrosshair.style.pointerEvents = 'none';
       layer.appendChild(xCrosshair);
     }
-    if (!yCrosshair) {
+    if (showXLabel && !useStandaloneYLabel && !yCrosshair) {
       yCrosshair = new LineCrosshair({
         style: _objectSpread(_objectSpread({}, tagStyle), {}, {
           startPos: yStart,
           endPos: yEnd,
           tagText: yText,
-          tagPosition: 'start'
+          tagPosition: yAxisPosition === 'right' ? 'end' : 'start'
         })
       });
       yCrosshair.style.zIndex = 7;
       yCrosshair.style.pointerEvents = 'none';
       layer.appendChild(yCrosshair);
     }
+    if ((useStandaloneYLabel || !showXLabel) && !standaloneYTag) {
+      standaloneYTag = new Tag({
+        style: _objectSpread(_objectSpread({}, standaloneTagStyle), {}, {
+          text: yText
+        })
+      });
+      standaloneYTag.style.zIndex = 7;
+      standaloneYTag.style.pointerEvents = 'none';
+      layer.appendChild(standaloneYTag);
+    }
     boundPlot = plot;
   };
   var updateCrosshairs = function updateCrosshairs(event) {
-    var _event$offsetY, _latestXValue, _invertCrosshairValue, _event$data, _view$scale$x$getForm, _view$scale$x, _view$scale$y$getForm, _view$scale$y, _plot$ruleY, _plot$ruleX;
+    var _event$offsetY, _latestXValue, _invertCrosshairValue, _event$data, _view$scale$x$getForm, _view$scale$x, _yScale$getFormatter, _plot$ruleY, _plot$ruleX;
     var context = chart.getContext();
     var plot = getTooltipPlot(context);
-    var view = getCartesianView(context);
+    var view = getCartesianView(context, yField);
     if (!plot || !view) {
       hideCrosshairs();
       return;
     }
+    var yScale = getYScale(view, yField);
     var verticalRule = getRuleLine(plot.ruleY);
     var horizontalRule = getRuleLine(plot.ruleX);
     if (!verticalRule || !horizontalRule) {
@@ -269,9 +360,9 @@ export var bindCrosshairAxisLabels = function bindCrosshairAxisLabels(chart, the
     var y = clamp(pointerY, verticalRule.y1, verticalRule.y2);
     var invertedPosition = invertCoordinate(view, [x, y]);
     var xValue = (_latestXValue = latestXValue) !== null && _latestXValue !== void 0 ? _latestXValue : invertCrosshairValue(view.scale.x, invertedPosition === null || invertedPosition === void 0 ? void 0 : invertedPosition[0]);
-    var yValue = (_invertCrosshairValue = invertCrosshairValue(view.scale.y, invertedPosition === null || invertedPosition === void 0 ? void 0 : invertedPosition[1])) !== null && _invertCrosshairValue !== void 0 ? _invertCrosshairValue : (_event$data = event.data) === null || _event$data === void 0 || (_event$data = _event$data.items) === null || _event$data === void 0 || (_event$data = _event$data[0]) === null || _event$data === void 0 ? void 0 : _event$data.value;
+    var yValue = (_invertCrosshairValue = invertCrosshairValue(yScale, invertedPosition === null || invertedPosition === void 0 ? void 0 : invertedPosition[1])) !== null && _invertCrosshairValue !== void 0 ? _invertCrosshairValue : (_event$data = event.data) === null || _event$data === void 0 || (_event$data = _event$data.items) === null || _event$data === void 0 || (_event$data = _event$data[0]) === null || _event$data === void 0 ? void 0 : _event$data.value;
     var xText = formatCrosshairAxisValue(xValue, (_view$scale$x$getForm = (_view$scale$x = view.scale.x).getFormatter) === null || _view$scale$x$getForm === void 0 ? void 0 : _view$scale$x$getForm.call(_view$scale$x));
-    var yText = formatCrosshairAxisValue(yValue, (_view$scale$y$getForm = (_view$scale$y = view.scale.y).getFormatter) === null || _view$scale$y$getForm === void 0 ? void 0 : _view$scale$y$getForm.call(_view$scale$y), getCrosshairScalePrecision(view.scale.y));
+    var yText = formatCrosshairAxisValue(yValue, yScale === null || yScale === void 0 || (_yScale$getFormatter = yScale.getFormatter) === null || _yScale$getFormatter === void 0 ? void 0 : _yScale$getFormatter.call(yScale), getCrosshairScalePrecision(yScale));
     if (!xText || !yText) {
       hideCrosshairs();
       return;
@@ -293,13 +384,25 @@ export var bindCrosshairAxisLabels = function bindCrosshairAxisLabels(chart, the
       y2: y
     });
     ensureCrosshairs(plot, displayVerticalRule, displayHorizontalRule, xText, yText);
-    if (!xCrosshair || !yCrosshair) return;
-    xCrosshair.setText(xText);
-    xCrosshair.setPointer([x + plotX, verticalRule.y2 + plotY]);
-    xCrosshair.style.visibility = 'visible';
-    yCrosshair.setText(yText);
-    yCrosshair.setPointer([horizontalRule.x1 + plotX, y + plotY]);
-    yCrosshair.style.visibility = 'visible';
+    if (showXLabel && !xCrosshair || (useStandaloneYLabel ? !standaloneYTag : !yCrosshair && !standaloneYTag)) return;
+    if (xCrosshair) {
+      xCrosshair.setText(xText);
+      xCrosshair.setPointer([x + plotX, verticalRule.y2 + plotY]);
+      xCrosshair.style.visibility = 'visible';
+    }
+    if (yCrosshair) {
+      yCrosshair.setText(yText);
+      yCrosshair.setPointer([(yAxisPosition === 'right' ? horizontalRule.x2 : horizontalRule.x1) + plotX, y + plotY]);
+      yCrosshair.style.visibility = 'visible';
+    }
+    if (standaloneYTag) {
+      var yAxisX = getYAxisLinePosition(view, yField, yAxisPosition, yAxisPosition === 'right' ? horizontalRule.x2 : horizontalRule.x1, plotX);
+      standaloneYTag.update({
+        text: yText
+      });
+      standaloneYTag.setLocalPosition([yAxisX + plotX, y + plotY]);
+      standaloneYTag.style.visibility = 'visible';
+    }
   };
   var onPointerMove = function onPointerMove(event) {
     var _event$offsetY2;

package/dist/esm/util/html.d.ts

@@ -0,0 +1 @@
+export declare const escapeHtml: (value: unknown) => string;

package/dist/esm/util/html.js

@@ -0,0 +1,3 @@
+export var escapeHtml = function escapeHtml(value) {
+  return (value == null ? '' : String(value)).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+};

package/dist/esm/util/theme.js

@@ -113,12 +113,12 @@ var createTheme = function createTheme(type) {
       gridLineDash: [0, 0]
     } : {}),
     axisY: {
-      lineLineWidth: isAcademy ? 1 : 0.75,
+      lineLineWidth: 1,
       grid: true,
       gridStroke: tokens.axisGrid,
       gridStrokeOpacity: 1,
-      gridLineWidth: isAcademy ? 1 : 0.5,
-      gridLineDash: isAcademy ? [0, 0] : [2, 4],
+      gridLineWidth: isAcademy ? 1 : 0.75,
+      gridLineDash: isAcademy ? [0, 0] : [3, 3],
       gridFilter: filterBaselineGrid
     },
     axisRadar: {

package/dist/esm/util/tokens.js

@@ -17,8 +17,8 @@ var LIGHT_TOKENS = {
   textPrimary: '#1F2937',
   textSecondary: '#667085',
   grid: '#E7EAF0',
-  axisGrid: '#EAECF0',
-  axisLine: '#D0D5DD',
+  axisGrid: '#D0D5DD',
+  axisLine: '#98A2B3',
   axisTick: '#98A2B3',
   separator: '#FFFFFF',
   tooltipBackground: 'rgba(255, 255, 255, 0.96)',
@@ -32,8 +32,8 @@ var DARK_TOKENS = {
   textPrimary: '#F3F4F6',
   textSecondary: '#A7AFBE',
   grid: '#343841',
-  axisGrid: '#2B2F36',
-  axisLine: '#454B56',
+  axisGrid: '#475467',
+  axisLine: '#667085',
   axisTick: '#596170',
   separator: '#141414',
   tooltipBackground: 'rgba(26, 27, 31, 0.96)',

package/dist/esm/vis/dual-axes/index.js

@@ -11,7 +11,7 @@ function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symb
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 import { Chart } from '@antv/g2';
-import { CHART_STYLE_DEFAULTS, getCartesianAxis, getCartesianLayout, getChartAnimation, getLineHighlightState, getSeriesHighlightByColorInteraction, getSharedTooltipInteraction, getThemeObject, normalizePalette } from "../../util";
+import { CHART_STYLE_DEFAULTS, bindCrosshairAxisLabels, getCartesianAxis, getCartesianLayout, getChartAnimation, getLineHighlightState, getSeriesHighlightByColorInteraction, getSharedTooltipInteraction, getThemeObject, normalizePalette } from "../../util";
 
 /**
  * DualAxesSeriesItem defines a single series in the dual-axes chart.
@@ -83,6 +83,7 @@ export var DualAxes = function DualAxes(options) {
     chartTheme = _options$theme === void 0 ? 'default' : _options$theme;
   var chart = null;
   var hasRendered = false;
+  var cleanupCrosshairAxisLabels = null;
 
   /**
    * Render the dual-axes chart with the given configuration.
@@ -99,6 +100,9 @@ export var DualAxes = function DualAxes(options) {
 
     // Clean up previous chart if exists
     if (chart) {
+      var _cleanupCrosshairAxis;
+      (_cleanupCrosshairAxis = cleanupCrosshairAxisLabels) === null || _cleanupCrosshairAxis === void 0 || _cleanupCrosshairAxis();
+      cleanupCrosshairAxisLabels = null;
       chart.destroy();
     }
     var _style$startAtZero = style.startAtZero,
@@ -294,6 +298,29 @@ export var DualAxes = function DualAxes(options) {
       theme: getThemeObject(theme)
     });
     chart.options(chartOptions);
+    var lineYFields = seriesMeta.filter(function (_ref6) {
+      var item = _ref6.item;
+      return item.type === 'line';
+    }).map(function (_ref7) {
+      var yField = _ref7.yField;
+      return yField;
+    });
+    if (lineYFields.length) {
+      var currentChart = chart;
+      var cleanups = lineYFields.map(function (yField, index) {
+        return bindCrosshairAxisLabels(currentChart, theme, {
+          showXLabel: index === 0,
+          useStandaloneYLabel: true,
+          yAxisPosition: 'right',
+          yField: yField
+        });
+      });
+      cleanupCrosshairAxisLabels = function cleanupCrosshairAxisLabels() {
+        return cleanups.forEach(function (cleanup) {
+          return cleanup();
+        });
+      };
+    }
     chart.render();
     hasRendered = true;
   };
@@ -303,6 +330,9 @@ export var DualAxes = function DualAxes(options) {
    */
   var destroy = function destroy() {
     if (chart) {
+      var _cleanupCrosshairAxis2;
+      (_cleanupCrosshairAxis2 = cleanupCrosshairAxisLabels) === null || _cleanupCrosshairAxis2 === void 0 || _cleanupCrosshairAxis2();
+      cleanupCrosshairAxisLabels = null;
       chart.destroy();
       chart = null;
     }

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

@@ -14,7 +14,6 @@ export interface FunnelConfig {
     data: FunnelDataItem[];
     theme?: VisualizationTheme;
     title?: string;
-    locale?: string;
     conversionRateLabel?: string;
     style?: {
         backgroundColor?: string;