feat: add transformRatioLocale config for transformRatio text in funnel tooltip, #3704

Author: xiaoluoHe

common/changes/@visactor/vchart/feat-transformRatio-locales_2025-02-11-03-29.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vchart",
+      "comment": "feat: add `transformRatioLocale` config for transformRatio text in funnel tooltip, #3704",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vchart"
+}

docs/assets/option/en/series/funnel.md

@@ -166,3 +166,7 @@ Min length of guide line. Default is 20px. Supported since version `1.12.7`
 ###${prefix} state(Object)
 
 {{ use: mark-state-style() }}
+
+#${prefix} transformRatioLocale(String)
+
+Supported since version `1.13.6`, the built-in tooltip text for the funnel chart conversion layer is set to "Conversion Rate" by default in Chinese.

docs/assets/option/zh/series/funnel.md

@@ -167,3 +167,7 @@
 ###${prefix} state(Object)
 
 {{ use: mark-state-style() }}
+
+#${prefix} transformRatioLocale(String)
+
+自`1.13.6`版本支持，漏斗图转化层的 tooltip 内置文案，默认为“转化率”中文。

packages/vchart/src/chart/funnel/funnel-transformer.ts

@@ -25,7 +25,8 @@ export class FunnelChartSpecTransformer<T extends IFunnelChartSpec> extends Base
       'minSize',
       'gap',
       'isCone',
-      'range'
+      'range',
+      'transformRatioLocale'
     ]);
 
     return series;

packages/vchart/src/series/funnel/interface.ts

@@ -84,6 +84,12 @@ export interface IFunnelSeriesSpec extends ISeriesSpec, IAnimationSpec<FunnelMar
    * @since 1.10.1
    */
   heightRatio?: number;
+  /**
+   * 漏斗图转化率文案，用于转化层 tooltip key 的显示内容
+   *  @since 1.13.5
+   * @default '转化率'
+   * */
+  transformRatioLocale?: string;
   /**
    * 漏斗层样式
    */

packages/vchart/src/series/funnel/tooltip-helper.ts

@@ -7,11 +7,17 @@ import type { TooltipHandlerParams } from '../../component/tooltip/interface';
 import type { Datum } from '@visactor/vgrammar-core';
 
 export class FunnelSeriesTooltipHelper extends BaseSeriesTooltipHelper implements ISeriesTooltipHelper {
+  private _transformRatioLocale;
+
+  constructor(series: IFunnelSeries) {
+    super(series);
+    this._transformRatioLocale = series.getSpec()?.transformRatioLocale ?? `转化率`;
+  }
+
   dimensionTooltipTitleCallback = (datum: Datum, params?: TooltipHandlerParams) => {
     const series = this.series as IFunnelSeries;
     if (params?.mark?.name === SeriesMarkNameEnum.transform) {
-      // TODO: i18n
-      return `转化率`;
+      return this._transformRatioLocale;
     }
     return this._getDimensionData(datum) ?? datum.properties?.[`${series.getCategoryField()}`];
   };
@@ -26,8 +32,7 @@ export class FunnelSeriesTooltipHelper extends BaseSeriesTooltipHelper implement
 
   markTooltipKeyCallback = (datum: Datum, params?: TooltipHandlerParams) => {
     if (params?.mark?.name === SeriesMarkNameEnum.transform) {
-      // TODO: i18n
-      return `转化率`;
+      return this._transformRatioLocale;
     }
     const { dimensionFields, seriesFields } = this._seriesCacheInfo;
     const subDimensionField = dimensionFields[dimensionFields.length - 1];