@lightdash/common 0.2129.0 → 0.2130.0

package/dist/cjs/visualizations/helpers/styles/valueLabelStyles.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getValueLabelStyle = void 0;
+const savedCharts_1 = require("../../../types/savedCharts");
+const themeColors_1 = require("./themeColors");
+/**
+ * Get value label styling for any chart series (line, bar, area, scatter, etc.)
+ * Inside: White on dark backgrounds, gray.9 on light backgrounds, weight 400
+ * Outside: gray.9 text with colored border matching series, weight 500
+ * Size: 11px
+ * @param position - Label position relative to data point
+ * @param type - Series type
+ */
+const getValueLabelStyle = (position, type) => {
+    const isInside = position === 'inside';
+    const base = {
+        fontSize: 11,
+        fontWeight: '500',
+    };
+    if (
+    // inside labels for line and area series should have a white border - similar way to bar series for legibility
+    isInside &&
+        (type === savedCharts_1.CartesianSeriesType.LINE || type === savedCharts_1.CartesianSeriesType.AREA)) {
+        return {
+            ...base,
+            textBorderColor: themeColors_1.WHITE,
+            textBorderWidth: 2,
+            textBorderType: 'solid',
+        };
+    }
+    return base;
+};
+exports.getValueLabelStyle = getValueLabelStyle;
+//# sourceMappingURL=valueLabelStyles.js.map

package/dist/cjs/visualizations/helpers/styles/valueLabelStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"valueLabelStyles.js","sourceRoot":"","sources":["../../../../../src/visualizations/helpers/styles/valueLabelStyles.ts"],"names":[],"mappings":";;;AAAA,4DAA8E;AAC9E,+CAAsC;AAEtC;;;;;;;GAOG;AACI,MAAM,kBAAkB,GAAG,CAC9B,QAAoE,EACpE,IAAoB,EACtB,EAAE;IACA,MAAM,QAAQ,GAAG,QAAQ,KAAK,QAAQ,CAAC;IAEvC,MAAM,IAAI,GAAG;QACT,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,KAAK;KACX,CAAC;IAEX;IACI,+GAA+G;IAC/G,QAAQ;QACR,CAAC,IAAI,KAAK,iCAAmB,CAAC,IAAI,IAAI,IAAI,KAAK,iCAAmB,CAAC,IAAI,CAAC,EAC1E,CAAC;QACC,OAAO;YACH,GAAG,IAAI;YACP,eAAe,EAAE,mBAAK;YACtB,eAAe,EAAE,CAAC;YAClB,cAAc,EAAE,OAAO;SAC1B,CAAC;IACN,CAAC;IAED,OAAO,IAAI,CAAC;AAChB,CAAC,CAAC;AAzBW,QAAA,kBAAkB,sBAyB7B"}

package/dist/cjs/visualizations/{chartTransformations.d.ts → helpers/tooltipFormatter.d.ts}

@@ -1,22 +1,15 @@
-/**
- * ECharts tooltip parameter types
- * These represent the structure of params passed to tooltip formatters
- */
-export interface TooltipParam {
-    seriesName?: string;
-    marker?: string;
-    encode?: {
-        x?: string | number | (string | number)[];
-        y?: string | number | (string | number)[];
-    };
-    dimensionNames?: string[];
-    data?: Record<string, unknown>;
-    value?: Record<string, unknown> | unknown[];
-    axisValue?: string | number;
-    axisValueLabel?: string | number;
-}
-type TooltipParams = TooltipParam | TooltipParam[];
-type GetDimensionNameFn = (param: TooltipParam) => string | undefined;
+import { type DefaultLabelFormatterCallbackParams, type LineSeriesOption, type TooltipComponentFormatterCallback } from 'echarts';
+import { type ItemsMap } from '../../types/field';
+import { type ParametersValuesMap } from '../../types/parameters';
+import { type EChartsSeries, type PivotValuesColumn } from '../types';
+type TooltipFormatterParams = DefaultLabelFormatterCallbackParams & {
+    axisId: string;
+    axisIndex: number;
+    axisType: string;
+    axisValue: string | number;
+    axisValueLabel: string;
+};
+export declare const isLineSeriesOption: (obj: unknown) => obj is LineSeriesOption;
 /**
  * Creates a tooltip formatter for 100% stacked charts
  * This formatter shows both the percentage and the original count value
@@ -66,5 +59,45 @@ export declare function transformToPercentageStacking<T extends Record<string, u
     transformedResults: T[];
     originalValues: Map<string, Map<string, number>>;
 };
+/**
+ * Build a simplified tooltip formatter for SQL Runner Cartesian charts
+ * This formatter doesn't require itemsMap and works directly with the dataset
+ */
+export declare const buildSqlRunnerCartesianTooltipFormatter: ({ stackValue, flipAxes, xFieldId, originalValues, }: {
+    stackValue: string | boolean | undefined;
+    flipAxes: boolean | undefined;
+    xFieldId: string | undefined;
+    originalValues?: Map<string, Map<string, number>> | undefined;
+}) => TooltipComponentFormatterCallback<TooltipFormatterParams | TooltipFormatterParams[]>;
+export declare const buildCartesianTooltipFormatter: ({ itemsMap, stackValue, flipAxes, xFieldId, originalValues, series, tooltipHtmlTemplate, pivotValuesColumnsMap, parameters, }: {
+    itemsMap?: ItemsMap;
+    stackValue: string | boolean | undefined;
+    flipAxes: boolean | undefined;
+    xFieldId: string | undefined;
+    originalValues?: Map<string, Map<string, number>> | undefined;
+    series?: EChartsSeries[];
+    tooltipHtmlTemplate?: string;
+    pivotValuesColumnsMap?: Record<string, PivotValuesColumn>;
+    parameters?: ParametersValuesMap;
+}) => TooltipComponentFormatterCallback<TooltipFormatterParams | TooltipFormatterParams[]>;
+/**
+ * ECharts tooltip parameter types
+ * These represent the structure of params passed to tooltip formatters
+ */
+export interface TooltipParam {
+    seriesName?: string;
+    marker?: string;
+    encode?: {
+        x?: string | number | (string | number)[];
+        y?: string | number | (string | number)[];
+    };
+    dimensionNames?: string[];
+    data?: Record<string, unknown>;
+    value?: Record<string, unknown> | unknown[];
+    axisValue?: string | number;
+    axisValueLabel?: string | number;
+}
+type TooltipParams = TooltipParam | TooltipParam[];
+type GetDimensionNameFn = (param: TooltipParam) => string | undefined;
 export {};
-//# sourceMappingURL=chartTransformations.d.ts.map
+//# sourceMappingURL=tooltipFormatter.d.ts.map

package/dist/cjs/visualizations/helpers/tooltipFormatter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltipFormatter.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/helpers/tooltipFormatter.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,KAAK,mCAAmC,EACxC,KAAK,gBAAgB,EACrB,KAAK,iCAAiC,EACzC,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAE,KAAK,QAAQ,EAA+B,MAAM,mBAAmB,CAAC;AAC/E,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAIlE,OAAO,EACH,KAAK,aAAa,EAClB,KAAK,iBAAiB,EAEzB,MAAM,UAAU,CAAC;AAWlB,KAAK,sBAAsB,GAAG,mCAAmC,GAAG;IAChE,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,cAAc,EAAE,MAAM,CAAC;CAC1B,CAAC;AA4KF,eAAO,MAAM,kBAAkB,QAAS,OAAO,KAAG,GAAG,IAAI,gBACS,CAAC;AAEnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,8BAA8B,CAC1C,cAAc,EAAE,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,EAChD,gBAAgB,EAAE,kBAAkB,EACpC,UAAU,EAAE,MAAM,YAEF,aAAa,YAwDhC;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,6BAA6B,CACzC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAEjC,IAAI,EAAE,CAAC,EAAE,EACT,UAAU,EAAE,MAAM,EAClB,UAAU,EAAE,MAAM,EAAE,GACrB;IACC,kBAAkB,EAAE,CAAC,EAAE,CAAC;IACxB,cAAc,EAAE,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;CACpD,CAsCA;AAED;;;GAGG;AACH,eAAO,MAAM,uCAAuC,wDAM7C;IACC,UAAU,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;IACzC,QAAQ,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,cAAc,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,GAAG,SAAS,CAAC;CACjE,KAAG,iCAAiC,CACjC,sBAAsB,GAAG,sBAAsB,EAAE,CAmEpD,CAAC;AAEN,eAAO,MAAM,8BAA8B,kIAWpC;IACC,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,UAAU,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;IACzC,QAAQ,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,cAAc,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,GAAG,SAAS,CAAC;IAC9D,MAAM,CAAC,EAAE,aAAa,EAAE,CAAC;IACzB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,qBAAqB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC;IAC1D,UAAU,CAAC,EAAE,mBAAmB,CAAC;CACpC,KAAG,iCAAiC,CACjC,sBAAsB,GAAG,sBAAsB,EAAE,CAkUpD,CAAC;AAEN;;;GAGG;AACH,MAAM,WAAW,YAAY;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE;QACL,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;QAC1C,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;KAC7C,CAAC;IACF,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,OAAO,EAAE,CAAC;IAC5C,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACpC;AAED,KAAK,aAAa,GAAG,YAAY,GAAG,YAAY,EAAE,CAAC;AAEnD,KAAK,kBAAkB,GAAG,CAAC,KAAK,EAAE,YAAY,KAAK,MAAM,GAAG,SAAS,CAAC"}

package/dist/cjs/visualizations/helpers/tooltipFormatter.js

@@ -0,0 +1,510 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildCartesianTooltipFormatter = exports.buildSqlRunnerCartesianTooltipFormatter = exports.isLineSeriesOption = void 0;
+exports.createStack100TooltipFormatter = createStack100TooltipFormatter;
+exports.transformToPercentageStacking = transformToPercentageStacking;
+const lodash_1 = require("lodash");
+const field_1 = require("../../types/field");
+const savedCharts_1 = require("../../types/savedCharts");
+const formatting_1 = require("../../utils/formatting");
+const sanitizeHtml_1 = require("../../utils/sanitizeHtml");
+const types_1 = require("../types");
+const tooltipStyles_1 = require("./styles/tooltipStyles");
+const valueFormatter_1 = require("./valueFormatter");
+/**
+ * Get the tooltip context
+ * When series are bar stacked, then it's tuple mode(@reference to applyRoundedCornersToStackData), otherwise it's dataset mode.
+ * @param params - The params
+ * @param stackValue - The stack value
+ * @param flipAxes - Whether the axes are flipped
+ * @returns The tooltip context
+ */
+const getTooltipCtx = (params, stackValue, flipAxes) => {
+    const v0 = params?.[0]?.value;
+    const dataMode = v0 && typeof v0 === 'object' && !Array.isArray(v0)
+        ? 'dataset'
+        : 'tuple';
+    let mode = 'plain';
+    if (stackValue === types_1.StackType.PERCENT) {
+        mode = 'stack100';
+    }
+    else if (stackValue) {
+        mode = 'stackRegular';
+    }
+    return { flipAxes: !!flipAxes, mode, dataMode };
+};
+const getRawVal = (param, dim, yIdx, ctx) => {
+    const v = param.value;
+    if (Array.isArray(v)) {
+        if (typeof yIdx === 'number')
+            return v[yIdx];
+        // ultimate fallback for tuple in regular stacks
+        if (ctx.dataMode === 'tuple' && ctx.mode === 'stackRegular') {
+            return ctx.flipAxes ? v[0] : v[1];
+        }
+        return undefined; // array but no valid index
+    }
+    if (v && typeof v === 'object' && dim) {
+        // Only return the value if the key exists, otherwise undefined
+        return v[dim];
+    }
+    // For non-object, non-array values (plain number/string), return as-is
+    // But if we have a dim and v is an object, we already handled it above
+    return typeof v === 'object' ? undefined : v;
+};
+/**
+ * Get the header from the params
+ * @param params - The params
+ * @returns The header
+ */
+const getHeader = (params) => {
+    // First try the standard axisValueLabel or name
+    const standardHeader = params[0]?.axisValueLabel ?? params[0]?.name;
+    if (standardHeader)
+        return standardHeader;
+    // For tuple mode (stacked bars) with time axis, extract x-value from data array
+    const firstParam = params[0];
+    if (firstParam?.value && Array.isArray(firstParam.value)) {
+        // In tuple mode, first element is typically the x-axis value
+        const xValue = firstParam.value[0];
+        if (xValue !== undefined && xValue !== null) {
+            // Format date strings nicely
+            if (typeof xValue === 'string' &&
+                xValue.match(/^\d{4}-\d{2}-\d{2}/)) {
+                try {
+                    return new Date(xValue).toLocaleDateString(undefined, {
+                        year: 'numeric',
+                        month: 'short',
+                        day: 'numeric',
+                    });
+                }
+                catch {
+                    return String(xValue);
+                }
+            }
+            return String(xValue);
+        }
+    }
+    return '';
+};
+const extractColor = (marker) => {
+    const s = typeof marker === 'string' ? marker : '';
+    const m = s.match(/background-color:\s*([^;'"]+)/);
+    return m ? m[1].trim() : '#000';
+};
+const unwrapValue = (v) => {
+    if (v && typeof v === 'object') {
+        if ('value' in v)
+            return unwrapValue(v.value);
+        if ('raw' in v)
+            return v.raw;
+        if ('formatted' in v)
+            return v.formatted;
+    }
+    return v;
+};
+/**
+ * Helper function to get the dimension from the encode
+ */
+const getDimFromEncodeAxis = (encode, dimensionNames, axis = 'y') => {
+    if (!encode)
+        return undefined;
+    const e = encode[axis];
+    if (typeof e === 'string')
+        return e; // dataset: field hash
+    if (Array.isArray(e) && typeof e[0] === 'number') {
+        const idx = e[0];
+        return dimensionNames && typeof idx === 'number'
+            ? dimensionNames[idx]
+            : undefined;
+    }
+    if (typeof e === 'number' && dimensionNames) {
+        return dimensionNames[e];
+    }
+    return undefined;
+};
+const getValueIdxFromEncode = (encode, ctx, flipAxes) => {
+    const axis = flipAxes ? 'x' : 'y';
+    if (!encode) {
+        let result;
+        // tuple fallback for regular stacks
+        if (ctx.dataMode === 'tuple' && ctx.mode === 'stackRegular') {
+            result = flipAxes ? 0 : 1;
+        }
+        return result;
+    }
+    const e = encode[axis];
+    if (typeof e === 'number')
+        return e;
+    if (Array.isArray(e) && typeof e[0] === 'number')
+        return e[0];
+    // tuple fallback for regular stacks
+    if (ctx.dataMode === 'tuple' && ctx.mode === 'stackRegular') {
+        return flipAxes ? 0 : 1;
+    }
+    return undefined;
+};
+const isLineSeriesOption = (obj) => typeof obj === 'object' && obj !== null && 'showSymbol' in obj;
+exports.isLineSeriesOption = isLineSeriesOption;
+/**
+ * Creates a tooltip formatter for 100% stacked charts
+ * This formatter shows both the percentage and the original count value
+ *
+ * @param originalValues - Map of x-axis values to their original y-values
+ * @param getDimensionName - Function to extract the dimension name from a param
+ * @param xAxisField - The x-axis field name to extract the raw x value from param data
+ * @returns A formatter function compatible with ECharts tooltip
+ *
+ * @example
+ * // SQL Runner usage
+ * const formatter = createStack100TooltipFormatter(
+ *     originalValues,
+ *     (param) => {
+ *         const { encode, dimensionNames } = param;
+ *         const yFieldIndex = Array.isArray(encode.y) ? encode.y[0] : encode.y;
+ *         return dimensionNames?.[yFieldIndex];
+ *     },
+ *     xFieldId
+ * );
+ *
+ * @example
+ * // Explorer usage with flip axes
+ * const formatter = createStack100TooltipFormatter(
+ *     originalValues,
+ *     (param) => {
+ *         const { encode, dimensionNames } = param;
+ *         if (!dimensionNames || !encode) return undefined;
+ *         return flipAxes ? dimensionNames[1] : dimensionNames[encode.y?.[0]];
+ *     },
+ *     xFieldId
+ * );
+ */
+function createStack100TooltipFormatter(originalValues, getDimensionName, xAxisField) {
+    return (params) => {
+        if (!Array.isArray(params))
+            return '';
+        const header = getHeader(params);
+        const rowsHtml = params
+            .map((param) => {
+            const { seriesName = '', marker = '' } = param;
+            const dimensionName = getDimensionName(param);
+            if (!dimensionName)
+                return '';
+            // Access value - try both data and value for compatibility
+            // SQL Runner uses 'data', Explorer uses 'value'
+            const valueObject = param.data ||
+                (typeof param.value === 'object' &&
+                    !Array.isArray(param.value)
+                    ? param.value
+                    : undefined);
+            if (!valueObject || typeof valueObject !== 'object')
+                return '';
+            const percentage = valueObject[dimensionName];
+            // Get the raw x-axis value from the data for originalValues lookup
+            const rawXValue = String(valueObject[xAxisField] ?? '');
+            const originalValue = originalValues?.get(rawXValue)?.get(dimensionName) || 0;
+            // Format percentage and count
+            const percentageStr = typeof percentage === 'number' && !Number.isNaN(percentage)
+                ? `${percentage.toFixed(1)}%`
+                : '0.0%';
+            const countStr = typeof originalValue === 'number'
+                ? originalValue.toLocaleString()
+                : '0';
+            const colorIndicator = (0, tooltipStyles_1.formatColorIndicator)(extractColor(marker));
+            return (0, tooltipStyles_1.formatCartesianTooltipRow)(colorIndicator, seriesName, (0, tooltipStyles_1.formatTooltipValue)(`${percentageStr} (${countStr})`));
+        })
+            .filter(Boolean)
+            .join('');
+        const divider = (0, tooltipStyles_1.getTooltipDivider)();
+        return `${(0, tooltipStyles_1.formatTooltipHeader)(header)}${divider}${rowsHtml}`;
+    };
+}
+/**
+ * Transform data for 100% stacked charts
+ *
+ * Converts absolute values to percentages where each stacked group totals 100%.
+ * Also preserves original values for tooltip display.
+ *
+ * @param rows - Array of data rows to transform
+ * @param xAxisField - Field reference for the x-axis (grouping key)
+ * @param yFieldRefs - Array of field references for y-axis values to convert to percentages
+ * @returns Object containing transformed data and original values map
+ */
+function transformToPercentageStacking(rows, xAxisField, yFieldRefs) {
+    const originalValues = new Map();
+    const totals = new Map();
+    // Calculate totals for each x-axis value
+    rows.forEach((row) => {
+        const xValue = String(row[xAxisField]);
+        let total = 0;
+        yFieldRefs.forEach((yField) => {
+            const value = (0, lodash_1.toNumber)(row[yField]) || 0;
+            total += value;
+            // Store original value
+            if (!originalValues.has(xValue)) {
+                originalValues.set(xValue, new Map());
+            }
+            originalValues.get(xValue).set(yField, value);
+        });
+        totals.set(xValue, total);
+    });
+    // Transform data to percentages
+    const transformedResults = rows.map((row) => {
+        const xValue = String(row[xAxisField]);
+        const total = totals.get(xValue) || 1; // Avoid division by zero
+        const newRow = { ...row };
+        yFieldRefs.forEach((yField) => {
+            const value = (0, lodash_1.toNumber)(row[yField]) || 0;
+            newRow[yField] = (value / total) * 100;
+        });
+        return newRow;
+    });
+    return { transformedResults, originalValues };
+}
+/**
+ * Build a simplified tooltip formatter for SQL Runner Cartesian charts
+ * This formatter doesn't require itemsMap and works directly with the dataset
+ */
+const buildSqlRunnerCartesianTooltipFormatter = ({ stackValue, flipAxes, xFieldId, originalValues, }) => (params) => {
+    if (!Array.isArray(params))
+        return '';
+    const ctx = getTooltipCtx(params, stackValue, flipAxes);
+    // 100% stacks: use special formatter that shows percentage + original values
+    if (ctx.mode === 'stack100' && xFieldId && originalValues) {
+        return createStack100TooltipFormatter(originalValues, (param) => {
+            const { encode, dimensionNames } = param;
+            if (!dimensionNames || !encode)
+                return undefined;
+            if (flipAxes)
+                return dimensionNames[1];
+            const yIndex = Array.isArray(encode.y)
+                ? encode.y[0]
+                : encode.y;
+            return typeof yIndex === 'number'
+                ? dimensionNames[yIndex]
+                : undefined;
+        }, xFieldId)(params);
+    }
+    const header = getHeader(params);
+    // Build tooltip rows
+    const rowsHtml = params
+        .map((param) => {
+        const { marker, seriesName, dimensionNames, encode } = param;
+        const metricAxis = flipAxes ? 'x' : 'y';
+        const dim = getDimFromEncodeAxis(encode, dimensionNames, metricAxis);
+        const valueIdx = getValueIdxFromEncode(encode, ctx, !!flipAxes);
+        const rawVal = getRawVal(param, dim, valueIdx, ctx);
+        const valueForFormat = unwrapValue(rawVal);
+        if (valueForFormat === undefined || valueForFormat === null)
+            return '';
+        // Format the value - for SQL Runner, we'll use the raw number
+        const formattedValue = typeof valueForFormat === 'number'
+            ? valueForFormat.toLocaleString()
+            : String(valueForFormat);
+        const colorIndicator = (0, tooltipStyles_1.formatColorIndicator)(extractColor(marker));
+        return (0, tooltipStyles_1.formatCartesianTooltipRow)(colorIndicator, seriesName || '', (0, tooltipStyles_1.formatTooltipValue)(formattedValue));
+    })
+        .join('');
+    const divider = (0, tooltipStyles_1.getTooltipDivider)();
+    return `${(0, tooltipStyles_1.formatTooltipHeader)(header)}${divider}${rowsHtml}`;
+};
+exports.buildSqlRunnerCartesianTooltipFormatter = buildSqlRunnerCartesianTooltipFormatter;
+const buildCartesianTooltipFormatter = ({ itemsMap, stackValue, flipAxes, xFieldId, originalValues, series, tooltipHtmlTemplate, pivotValuesColumnsMap, parameters, }) => (params) => {
+    if (!Array.isArray(params) || !itemsMap)
+        return '';
+    const ctx = getTooltipCtx(params, stackValue, flipAxes);
+    // 100% stacks: use special formatter that shows percentage + original values
+    if (ctx.mode === 'stack100' && xFieldId && originalValues) {
+        return createStack100TooltipFormatter(originalValues, (param) => {
+            const { encode, dimensionNames } = param;
+            if (!dimensionNames || !encode)
+                return undefined;
+            if (flipAxes)
+                return dimensionNames[1];
+            const yIndex = Array.isArray(encode.y)
+                ? encode.y[0]
+                : encode.y;
+            return typeof yIndex === 'number'
+                ? dimensionNames[yIndex]
+                : undefined;
+        }, xFieldId)(params);
+    }
+    const header = getHeader(params);
+    // rows
+    const rowsHtml = params
+        .map((param) => {
+        const { marker, seriesName, dimensionNames, encode, seriesIndex, } = param;
+        const seriesOption = typeof seriesIndex === 'number'
+            ? series?.[seriesIndex]
+            : undefined;
+        const effectiveEncode = encode ?? seriesOption?.encode ?? undefined;
+        const yRefField = seriesOption?.encode?.yRef?.field ?? undefined;
+        const yFieldHash = seriesOption?.encode?.yRef &&
+            typeof seriesOption.encode.yRef === 'object'
+            ? (0, savedCharts_1.hashFieldReference)(seriesOption.encode.yRef)
+            : undefined;
+        const seriesDimensionNames = Array.isArray(seriesOption?.dimensions)
+            ? seriesOption?.dimensions.map((dimension) => typeof dimension === 'string'
+                ? dimension
+                : dimension?.name)
+            : undefined;
+        const metricAxis = flipAxes ? 'x' : 'y';
+        const encodeDim = getDimFromEncodeAxis(effectiveEncode, dimensionNames, metricAxis) ??
+            getDimFromEncodeAxis(effectiveEncode, seriesDimensionNames, metricAxis);
+        const tooltipEncode = seriesOption?.encode?.tooltip;
+        let tooltipDim;
+        if (Array.isArray(tooltipEncode)) {
+            // eslint-disable-next-line prefer-destructuring
+            tooltipDim = tooltipEncode[0];
+        }
+        else if (typeof tooltipEncode === 'string') {
+            tooltipDim = tooltipEncode;
+        }
+        const pivotDim = seriesOption?.pivotReference && pivotValuesColumnsMap
+            ? Object.values(pivotValuesColumnsMap).find((column) => {
+                const reference = seriesOption.pivotReference;
+                if (!reference)
+                    return false;
+                if (column.referenceField !== reference.field)
+                    return false;
+                if (column.pivotValues.length !==
+                    reference.pivotValues?.length)
+                    return false;
+                return column.pivotValues.every((pivotValue, index) => pivotValue.value ===
+                    reference.pivotValues?.[index]?.value);
+            })?.pivotColumnName
+            : undefined;
+        // Prefer the real field hash from encode.y (works for pivot)
+        const dim = encodeDim ??
+            tooltipDim ??
+            pivotDim ??
+            // final fallback: the second dimension name normally is the Y series
+            param?.dimensionNames?.[1] ??
+            undefined;
+        const valueIdx = getValueIdxFromEncode(effectiveEncode, ctx, !!flipAxes);
+        const rawValueKeys = [
+            dim,
+            pivotDim,
+            tooltipDim,
+            yFieldHash,
+            yRefField,
+        ].filter((k) => !!k && typeof k === 'string');
+        // Extract raw cell value in both dataset/tuple modes
+        let rawVal = getRawVal(param, dim, valueIdx, ctx);
+        const needsPivotFallback = pivotDim &&
+            dim &&
+            pivotDim !== dim &&
+            typeof param?.value === 'object' &&
+            !Array.isArray(param?.value) &&
+            param.value[dim] === undefined;
+        if (needsPivotFallback ||
+            (pivotDim && pivotDim !== dim && rawVal === param?.value)) {
+            rawVal = getRawVal(param, pivotDim, valueIdx, ctx);
+        }
+        if ((rawVal === param?.value ||
+            (rawVal &&
+                typeof rawVal === 'object' &&
+                !Array.isArray(rawVal))) &&
+            rawValueKeys.length > 0) {
+            for (const key of rawValueKeys) {
+                const candidate = getRawVal(param, key, valueIdx, ctx);
+                if (candidate !== undefined &&
+                    candidate !== null &&
+                    candidate !== param?.value &&
+                    !(candidate === rawVal &&
+                        typeof candidate === 'object')) {
+                    rawVal = candidate;
+                    break;
+                }
+                if (param?.value &&
+                    typeof param.value === 'object' &&
+                    !Array.isArray(param.value) &&
+                    param.value[key] !==
+                        undefined) {
+                    rawVal =
+                        param.value[key];
+                    break;
+                }
+                if (param?.data &&
+                    typeof param.data === 'object' &&
+                    !Array.isArray(param.data) &&
+                    param.data[key] !==
+                        undefined) {
+                    rawVal = param.data[key];
+                    break;
+                }
+            }
+        }
+        const valueForFormat = unwrapValue(rawVal);
+        if (valueForFormat === undefined || valueForFormat === null)
+            return '';
+        const formatKey = (typeof dim === 'string' &&
+            pivotValuesColumnsMap?.[dim]?.referenceField) ??
+            (pivotDim &&
+                pivotValuesColumnsMap?.[pivotDim]?.referenceField) ??
+            yRefField ??
+            dim ??
+            pivotDim ??
+            '';
+        const formattedValue = (0, valueFormatter_1.getFormattedValue)(valueForFormat, formatKey, itemsMap, undefined, pivotValuesColumnsMap, parameters);
+        const colorIndicator = (0, tooltipStyles_1.formatColorIndicator)(extractColor(marker));
+        return (0, tooltipStyles_1.formatCartesianTooltipRow)(colorIndicator, seriesName || '', (0, tooltipStyles_1.formatTooltipValue)(formattedValue));
+    })
+        .join('');
+    // custom HTML template
+    let tooltipHtml = tooltipHtmlTemplate ?? '';
+    if (tooltipHtml) {
+        tooltipHtml = (0, sanitizeHtml_1.sanitizeHtml)(tooltipHtml);
+        const firstParam = params[0];
+        const firstValue = firstParam?.value;
+        const fields = tooltipHtml.match(/\${(.*?)}/g);
+        if (ctx.dataMode === 'tuple' && Array.isArray(firstValue)) {
+            // Tuple mode (stacked bars): map dimension names to array indices
+            fields?.forEach((field) => {
+                const ref = field.slice(2, -1);
+                const dimensionIndex = firstParam.dimensionNames?.indexOf(ref);
+                if (dimensionIndex !== undefined && dimensionIndex >= 0) {
+                    const val = unwrapValue(firstValue[dimensionIndex]);
+                    const formatted = (0, valueFormatter_1.getFormattedValue)(val, ref, itemsMap, undefined, pivotValuesColumnsMap, parameters);
+                    tooltipHtml = tooltipHtml.replace(field, formatted);
+                }
+                else {
+                    tooltipHtml = tooltipHtml.replace(field, '');
+                }
+            });
+        }
+        else if (ctx.dataMode === 'dataset' &&
+            firstValue &&
+            typeof firstValue === 'object') {
+            // Dataset mode: direct property access
+            fields?.forEach((field) => {
+                const ref = field.slice(2, -1);
+                const val = unwrapValue(firstValue[ref]);
+                const formatted = (0, valueFormatter_1.getFormattedValue)(val, ref, itemsMap, undefined, pivotValuesColumnsMap, parameters);
+                tooltipHtml = tooltipHtml.replace(field, formatted);
+            });
+        }
+        else {
+            tooltipHtml = '';
+        }
+    }
+    const divider = (0, tooltipStyles_1.getTooltipDivider)();
+    const dimensionId = params[0]?.dimensionNames?.[0];
+    if (dimensionId !== undefined) {
+        const field = itemsMap[dimensionId];
+        if ((0, field_1.isTableCalculation)(field)) {
+            const headerText = (0, formatting_1.formatItemValue)(field, header, false, parameters);
+            return `${(0, tooltipStyles_1.formatTooltipHeader)(headerText)}${divider}${rowsHtml}`;
+        }
+        const hasFormat = (0, field_1.isField)(field)
+            ? field.format !== undefined
+            : false;
+        if (hasFormat) {
+            const headerText = (0, valueFormatter_1.getFormattedValue)(header, dimensionId, itemsMap, undefined, pivotValuesColumnsMap, parameters);
+            return `${(0, tooltipStyles_1.formatTooltipHeader)(headerText)}${divider}${tooltipHtml}${rowsHtml}`;
+        }
+    }
+    return `${(0, tooltipStyles_1.formatTooltipHeader)(header)}${divider}${tooltipHtml}${rowsHtml}`;
+};
+exports.buildCartesianTooltipFormatter = buildCartesianTooltipFormatter;
+//# sourceMappingURL=tooltipFormatter.js.map