mviz 1.5.4 → 1.6.1

package/dist/charts/funnel.js

@@ -3,49 +3,67 @@
  */
 import { FONT_SIZE_XXS, getThemeColors, getPaletteWithCustom } from '../core/themes.js';
 import { wrapHtml } from '../core/serializer.js';
-import { inferFormat } from '../core/formatting.js';
+import { inferFormat, resolveCurrency } from '../core/formatting.js';
 import { registerChart, registerOptions } from './registry.js';
 /**
  * Get JavaScript formatter for funnel chart labels/tooltips
+ * @param currencySymbol - Symbol to use for currency formats
+ * @param locale - Locale for number formatting (defaults to 'en-US')
  */
-function getFunnelFormatterJs(fmt) {
+function getFunnelFormatterJs(fmt, currencySymbol = '$', locale = 'en-US') {
     // Smart auto-formatting based on magnitude
-    if (fmt === 'auto' || fmt === 'usd_auto' || fmt === null || fmt === undefined) {
-        const isCurrency = fmt === 'usd_auto' ? 'true' : 'false';
+    if (fmt === 'auto' || fmt === 'currency_auto' || fmt === null || fmt === undefined) {
+        const isCurrency = fmt === 'currency_auto' ? 'true' : 'false';
+        const symbolStr = JSON.stringify(currencySymbol);
+        const locStr = JSON.stringify(locale);
+        const lfHelper = fmt === 'currency_auto'
+            ? `var loc = ${locStr}; var lf = function(v, d) { return v.toLocaleString(loc, {minimumFractionDigits:d, maximumFractionDigits:d}); };`
+            : `var lf = function(v, d) { return v.toFixed(d); };`;
         return {
             _js_: `function(params) {
   var v = params.value;
   if (v == null) return params.name;
   var abs = Math.abs(v);
   var neg = v < 0;
-  var p = ${isCurrency} ? '$' : '';
+  var p = ${isCurrency} ? ${symbolStr} : '';
+  ${lfHelper}
   var r;
   if (abs >= 1e9) {
     var s = abs / 1e9;
-    r = s >= 100 ? p + s.toFixed(1) + 'b' : s >= 10 ? p + s.toFixed(2) + 'b' : p + s.toFixed(3) + 'b';
+    r = s >= 100 ? p + lf(s,1) + 'b' : s >= 10 ? p + lf(s,2) + 'b' : p + lf(s,3) + 'b';
   } else if (abs >= 1e6) {
     var s = abs / 1e6;
-    r = s >= 100 ? p + s.toFixed(1) + 'm' : s >= 10 ? p + s.toFixed(2) + 'm' : p + s.toFixed(3) + 'm';
+    r = s >= 100 ? p + lf(s,1) + 'm' : s >= 10 ? p + lf(s,2) + 'm' : p + lf(s,3) + 'm';
   } else if (abs >= 1e4) {
     var s = abs / 1e3;
-    r = s >= 100 ? p + s.toFixed(1) + 'k' : p + s.toFixed(2) + 'k';
+    r = s >= 100 ? p + lf(s,1) + 'k' : p + lf(s,2) + 'k';
   } else if (abs >= 1e3) {
-    r = p + abs.toLocaleString('en-US', {maximumFractionDigits: 0});
+    r = p + abs.toLocaleString(${locStr}, {maximumFractionDigits: 0});
   } else {
-    r = abs === Math.floor(abs) ? p + abs : p + abs.toFixed(2);
+    r = abs === Math.floor(abs) ? p + abs : p + lf(abs,2);
   }
   var formatted = neg ? '(' + r + ')' : r;
   return params.name + ': ' + formatted;
 }`,
         };
     }
+    const sym = JSON.stringify(currencySymbol);
+    const locStr = JSON.stringify(locale);
     // Specific format handlers
     switch (fmt) {
-        case 'usd':
-            return { _js_: "function(params) { return params.name + ': $' + params.value.toLocaleString(); }" };
-        case 'usd0k':
+        case 'currency':
+            return { _js_: `function(params) { return params.name + ': ' + ${sym} + params.value.toLocaleString(${locStr}); }` };
+        case 'currency0k':
             return {
-                _js_: "function(params) { return params.name + ': $' + (params.value/1000).toFixed(0) + 'k'; }",
+                _js_: `function(params) { return params.name + ': ' + ${sym} + (params.value/1000).toFixed(0) + 'k'; }`,
+            };
+        case 'currency0m':
+            return {
+                _js_: `function(params) { return params.name + ': ' + ${sym} + (params.value/1000000).toLocaleString(${locStr}, {minimumFractionDigits:1, maximumFractionDigits:1}) + 'm'; }`,
+            };
+        case 'currency0b':
+            return {
+                _js_: `function(params) { return params.name + ': ' + ${sym} + (params.value/1000000000).toLocaleString(${locStr}, {minimumFractionDigits:1, maximumFractionDigits:1}) + 'b'; }`,
             };
         case 'pct':
         case 'pct1':
@@ -88,8 +106,9 @@ export function buildFunnelOptions(spec) {
     // Infer format from value field name or use explicit format
     const sampleValue = funnelData[0]?.value ?? 0;
     const valueFormat = spec.format ?? inferFormat(valueField, sampleValue);
+    const currency = resolveCurrency(spec.currency);
     // Get JavaScript formatter
-    const formatter = getFunnelFormatterJs(valueFormat);
+    const formatter = getFunnelFormatterJs(valueFormat, currency.symbol, currency.locale);
     return {
         backgroundColor: 'transparent',
         animation: false,

package/dist/charts/heatmap.js

@@ -4,7 +4,7 @@
 import { FONT_SIZE_XXS, getThemeColors, getPaletteWithCustom } from '../core/themes.js';
 import { wrapHtml } from '../core/serializer.js';
 import { registerChart, registerOptions } from './registry.js';
-import { inferFormat } from '../core/formatting.js';
+import { inferFormat, resolveCurrency } from '../core/formatting.js';
 /**
  * Parse a formatted string value like "1.9k" or "$2.5m" to a number.
  * Returns the original value if parsing fails.
@@ -35,45 +35,55 @@ function parseFormattedValue(value) {
 /**
  * Generate a label formatter for heatmap cells.
  * Heatmap data is [x, y, value], so we access params.value[2].
+ * @param currencySymbol - Symbol to use for currency formats
+ * @param locale - Locale for number formatting (defaults to 'en-US')
  */
-function getHeatmapLabelFormatter(fmt) {
+function getHeatmapLabelFormatter(fmt, currencySymbol = '$', locale = 'en-US') {
     if (fmt === null || fmt === undefined) {
         return null;
     }
     // Smart auto-formatting for heatmap labels
-    if (fmt === 'auto' || fmt === 'usd_auto') {
-        const isCurrency = fmt === 'usd_auto' ? 'true' : 'false';
+    if (fmt === 'auto' || fmt === 'currency_auto') {
+        const isCurrency = fmt === 'currency_auto' ? 'true' : 'false';
+        const symbolStr = JSON.stringify(currencySymbol);
+        const locStr = JSON.stringify(locale);
+        const lfHelper = fmt === 'currency_auto'
+            ? `var loc = ${locStr}; var lf = function(v, d) { return v.toLocaleString(loc, {minimumFractionDigits:d, maximumFractionDigits:d}); };`
+            : `var lf = function(v, d) { return v.toFixed(d); };`;
         return {
             _js_: `function(params) {
   var v = params.value[2];
   if (v == null) return '';
   var abs = Math.abs(v);
   var neg = v < 0;
-  var p = ${isCurrency} ? '$' : '';
+  var p = ${isCurrency} ? ${symbolStr} : '';
+  ${lfHelper}
   var r;
   if (abs >= 1e9) {
     var s = abs / 1e9;
-    r = s >= 100 ? p + s.toFixed(1) + 'b' : s >= 10 ? p + s.toFixed(2) + 'b' : p + s.toFixed(3) + 'b';
+    r = s >= 100 ? p + lf(s,1) + 'b' : s >= 10 ? p + lf(s,2) + 'b' : p + lf(s,3) + 'b';
   } else if (abs >= 1e6) {
     var s = abs / 1e6;
-    r = s >= 100 ? p + s.toFixed(1) + 'm' : s >= 10 ? p + s.toFixed(2) + 'm' : p + s.toFixed(3) + 'm';
+    r = s >= 100 ? p + lf(s,1) + 'm' : s >= 10 ? p + lf(s,2) + 'm' : p + lf(s,3) + 'm';
   } else if (abs >= 1e4) {
     var s = abs / 1e3;
-    r = s >= 100 ? p + s.toFixed(1) + 'k' : p + s.toFixed(2) + 'k';
+    r = s >= 100 ? p + lf(s,1) + 'k' : p + lf(s,2) + 'k';
   } else if (abs >= 1e3) {
-    r = p + abs.toLocaleString('en-US', {maximumFractionDigits: 0});
+    r = p + abs.toLocaleString(${locStr}, {maximumFractionDigits: 0});
   } else {
-    r = abs === Math.floor(abs) ? p + abs : p + abs.toFixed(2);
+    r = abs === Math.floor(abs) ? p + abs : p + lf(abs,2);
   }
   return neg ? '(' + r + ')' : r;
 }`,
         };
     }
     // Format-specific formatters (with null checks)
+    const sym = JSON.stringify(currencySymbol);
+    const locStr = JSON.stringify(locale);
     const formatExprs = {
-        usd: "'$' + v.toLocaleString()",
-        usd0k: "'$' + (v/1000).toFixed(0) + 'k'",
-        usd0m: "'$' + (v/1000000).toFixed(1) + 'm'",
+        currency: `${sym} + v.toLocaleString(${locStr})`,
+        currency0k: `${sym} + (v/1000).toFixed(0) + 'k'`,
+        currency0m: `${sym} + (v/1000000).toLocaleString(${locStr}, {minimumFractionDigits:1, maximumFractionDigits:1}) + 'm'`,
         pct: "(v * 100).toFixed(1) + '%'",
         pct0: "(v * 100).toFixed(0) + '%'",
         pct1: "(v * 100).toFixed(1) + '%'",
@@ -149,7 +159,8 @@ export function buildHeatmapOptions(spec) {
     // Infer format for labels
     const sampleValue = values[0] ?? 0;
     const valueFormat = spec.format ?? inferFormat('value', sampleValue);
-    const labelFormatter = getHeatmapLabelFormatter(valueFormat);
+    const currency = resolveCurrency(spec.currency);
+    const labelFormatter = getHeatmapLabelFormatter(valueFormat, currency.symbol, currency.locale);
     // Build label config
     const labelConfig = { show: true, color: colors.text };
     if (labelFormatter) {

package/dist/charts/line.js

@@ -4,7 +4,7 @@
 import { FONT_SIZE_TINY, DEFAULT_CHART_HEIGHT, getThemeColors, getPaletteWithCustom, } from '../core/themes.js';
 import { wrapHtml } from '../core/serializer.js';
 import { registerChart, registerOptions } from './registry.js';
-import { inferFormat, getAxisFormatterJs, inferAxisType } from '../core/formatting.js';
+import { inferFormat, getAxisFormatterJs, inferAxisType, resolveCurrency } from '../core/formatting.js';
 /**
  * Build ECharts options for a line chart
  */
@@ -22,7 +22,8 @@ export function buildLineOptions(spec) {
     const firstYKey = yKeys[0] ?? 'value';
     const sampleValue = data.length > 0 && data[0] ? data[0][firstYKey] ?? 0 : 0;
     const valueFormat = spec.format ?? inferFormat(firstYKey, sampleValue);
-    const axisFormatter = getAxisFormatterJs(valueFormat);
+    const currency = resolveCurrency(spec.currency);
+    const axisFormatter = getAxisFormatterJs(valueFormat, currency.symbol, currency.locale);
     // Detect x-axis type: time, value, or category
     // User can override with xAxisType in spec
     const xAxisType = spec.xAxisType ?? inferAxisType(categories);

package/dist/charts/scatter.js

@@ -4,7 +4,21 @@
 import { SCATTER_SYMBOL_SIZE, FONT_SIZE_TINY, DEFAULT_CHART_HEIGHT, getThemeColors, getPaletteWithCustom, } from '../core/themes.js';
 import { wrapHtml } from '../core/serializer.js';
 import { registerChart, registerOptions } from './registry.js';
-import { inferFormat, getAxisFormatterJs, formatValue } from '../core/formatting.js';
+import { inferFormat, getAxisFormatterJs, formatValue, resolveCurrency } from '../core/formatting.js';
+import { buildPointLabelConfig, groupDataBySeries, buildSeriesLegend } from '../core/chart-helpers.js';
+/** Scatter point opacity */
+const SCATTER_OPACITY = 0.75;
+/** Label sits at index 2 in scatter point arrays: [x, y, label?] */
+const SCATTER_LABEL_INDEX = 2;
+/**
+ * Build a scatter data point: [x, y, label?]
+ */
+function buildScatterPoint(d, xField, yField, labelField) {
+    const point = [d[xField] ?? 0, d[yField] ?? 0];
+    if (labelField)
+        point.push(String(d[labelField] ?? ''));
+    return point;
+}
 /**
  * Build ECharts options for a scatter plot
  */
@@ -14,6 +28,7 @@ export function buildScatterOptions(spec) {
     const yField = spec.y ?? 'y';
     const seriesField = spec.series;
     const labelField = spec.label;
+    const showLabels = spec.showLabels;
     const theme = (spec.theme ?? 'light');
     const colors = getThemeColors(theme);
     const palette = getPaletteWithCustom(theme, spec.customTheme);
@@ -22,54 +37,48 @@ export function buildScatterOptions(spec) {
     const ySample = data.length > 0 && data[0] ? data[0][yField] ?? 0 : 0;
     const xFormat = spec.xFormat ?? inferFormat(xField, xSample);
     const yFormat = spec.yFormat ?? inferFormat(yField, ySample);
-    const xAxisFormatter = getAxisFormatterJs(xFormat);
-    const yAxisFormatter = getAxisFormatterJs(yFormat);
+    const currency = resolveCurrency(spec.currency);
+    const xAxisFormatter = getAxisFormatterJs(xFormat, currency.symbol, currency.locale);
+    const yAxisFormatter = getAxisFormatterJs(yFormat, currency.symbol, currency.locale);
+    // Label config for persistent point labels
+    const labelConfig = showLabels && labelField
+        ? buildPointLabelConfig(SCATTER_LABEL_INDEX, colors)
+        : undefined;
     // Build series - either single series or grouped by seriesField
     let seriesList;
     let legendData = [];
+    const pointBuilder = (d) => buildScatterPoint(d, xField, yField, labelField);
     if (seriesField) {
-        // Group data by the series field
-        const groups = new Map();
-        for (const d of data) {
-            const groupName = String(d[seriesField] ?? 'Unknown');
-            if (!groups.has(groupName)) {
-                groups.set(groupName, []);
-            }
-            const point = [d[xField] ?? 0, d[yField] ?? 0];
-            if (labelField)
-                point.push(String(d[labelField] ?? ''));
-            groups.get(groupName).push(point);
-        }
-        // Create a series for each group
+        const groups = groupDataBySeries(data, seriesField, pointBuilder);
         legendData = [...groups.keys()];
-        seriesList = legendData.map((name, idx) => ({
-            type: 'scatter',
-            name,
-            data: groups.get(name),
-            symbolSize: SCATTER_SYMBOL_SIZE,
-            itemStyle: { color: palette[idx % palette.length], opacity: 0.75 },
-        }));
-    }
-    else {
-        // Single series
-        const scatterData = data.map((d) => {
-            const point = [d[xField] ?? 0, d[yField] ?? 0];
-            if (labelField)
-                point.push(String(d[labelField] ?? ''));
-            return point;
-        });
-        seriesList = [
-            {
+        seriesList = legendData.map((name, idx) => {
+            const seriesObj = {
                 type: 'scatter',
-                data: scatterData,
+                name,
+                data: groups.get(name),
                 symbolSize: SCATTER_SYMBOL_SIZE,
-                itemStyle: { color: palette[0], opacity: 0.75 },
-            },
-        ];
+                itemStyle: { color: palette[idx % palette.length], opacity: SCATTER_OPACITY },
+            };
+            if (labelConfig)
+                seriesObj.label = labelConfig;
+            return seriesObj;
+        });
+    }
+    else {
+        const scatterData = data.map(pointBuilder);
+        const seriesObj = {
+            type: 'scatter',
+            data: scatterData,
+            symbolSize: SCATTER_SYMBOL_SIZE,
+            itemStyle: { color: palette[0], opacity: SCATTER_OPACITY },
+        };
+        if (labelConfig)
+            seriesObj.label = labelConfig;
+        seriesList = [seriesObj];
     }
     // Build tooltip formatter with label support and value formatting
-    const xFormatExpr = formatValue(xFormat);
-    const yFormatExpr = formatValue(yFormat);
+    const xFormatExpr = formatValue(xFormat, currency.symbol, currency.locale);
+    const yFormatExpr = formatValue(yFormat, currency.symbol, currency.locale);
     const tooltipFormatterJs = `function(params) {
     var d = params.value || params.data;
     var result = '';
@@ -128,12 +137,7 @@ export function buildScatterOptions(spec) {
     };
     // Add legend for multi-series
     if (seriesField && legendData.length > 1) {
-        option.legend = {
-            show: true,
-            data: legendData,
-            top: 0,
-            textStyle: { color: colors.textSecondary, fontSize: FONT_SIZE_TINY },
-        };
+        option.legend = buildSeriesLegend(legendData, colors);
     }
     return option;
 }

package/dist/charts/waterfall.js

@@ -3,7 +3,7 @@
  */
 import { FONT_SIZE_TINY, FONT_SIZE_XXS, BAR_MAX_WIDTH, getThemeColors, getPaletteWithCustom, getWaterfallColors, getAxisLabelFormatterJs, } from '../core/themes.js';
 import { wrapHtml } from '../core/serializer.js';
-import { inferFormat } from '../core/formatting.js';
+import { inferFormat, resolveCurrency } from '../core/formatting.js';
 import { registerChart, registerOptions } from './registry.js';
 /**
  * Build ECharts options for a waterfall chart showing cumulative effect
@@ -20,7 +20,8 @@ export function buildWaterfallOptions(spec) {
     // Infer format for y-axis
     const sampleValue = data[0]?.[valueField] ?? 0;
     const valueFormat = spec.format ?? inferFormat(valueField, sampleValue);
-    const isCurrency = valueFormat && (valueFormat.includes('usd') || valueFormat === 'usd_auto');
+    const currency = resolveCurrency(spec.currency);
+    const isCurrency = valueFormat && (valueFormat.includes('currency') || valueFormat === 'currency_auto');
     const categories = [];
     const invisibleData = [];
     const increaseData = [];
@@ -64,30 +65,35 @@ export function buildWaterfallOptions(spec) {
             }
         }
     }
-    // Label formatter JS function
+    // Label formatter JS function - use locale-aware formatting for currency
+    const locStr = JSON.stringify(currency.locale);
+    const lfHelper = isCurrency
+        ? `var loc = ${locStr}; var lf = function(v, d) { return v.toLocaleString(loc, {minimumFractionDigits:d, maximumFractionDigits:d}); };`
+        : `var lf = function(v, d) { return v.toFixed(d); };`;
     const labelFormatter = {
         _js_: `function(params) {
       var value = params.value;
       if (value === '-' || value === null || value === undefined) return '';
       var absVal = Math.abs(value);
       var isNeg = value < 0;
+      ${lfHelper}
       var formatted;
       if (absVal >= 1000000000) {
         var scaled = absVal / 1000000000;
-        if (scaled >= 100) formatted = scaled.toFixed(1) + 'b';
-        else if (scaled >= 10) formatted = scaled.toFixed(2) + 'b';
-        else formatted = scaled.toFixed(3) + 'b';
+        if (scaled >= 100) formatted = lf(scaled,1) + 'b';
+        else if (scaled >= 10) formatted = lf(scaled,2) + 'b';
+        else formatted = lf(scaled,3) + 'b';
       } else if (absVal >= 1000000) {
         var scaled = absVal / 1000000;
-        if (scaled >= 100) formatted = scaled.toFixed(1) + 'm';
-        else if (scaled >= 10) formatted = scaled.toFixed(2) + 'm';
-        else formatted = scaled.toFixed(3) + 'm';
+        if (scaled >= 100) formatted = lf(scaled,1) + 'm';
+        else if (scaled >= 10) formatted = lf(scaled,2) + 'm';
+        else formatted = lf(scaled,3) + 'm';
       } else if (absVal >= 10000) {
         var scaled = absVal / 1000;
-        if (scaled >= 100) formatted = scaled.toFixed(1) + 'k';
-        else formatted = scaled.toFixed(2) + 'k';
+        if (scaled >= 100) formatted = lf(scaled,1) + 'k';
+        else formatted = lf(scaled,2) + 'k';
       } else if (absVal >= 1000) {
-        formatted = absVal.toLocaleString();
+        formatted = absVal.toLocaleString(${locStr});
       } else {
         formatted = absVal.toString();
       }
@@ -155,7 +161,7 @@ export function buildWaterfallOptions(spec) {
             axisLabel: {
                 color: colors.textSecondary,
                 fontSize: FONT_SIZE_TINY,
-                formatter: getAxisLabelFormatterJs(!!isCurrency),
+                formatter: getAxisLabelFormatterJs(!!isCurrency, currency.symbol, currency.locale),
             },
         },
         series: [

package/dist/components/alert.js

@@ -7,7 +7,7 @@ import { registerComponent } from './registry.js';
  * Generate an alert/banner component
  */
 function generateAlert(spec) {
-    const message = spec.message ?? '';
+    const message = spec.message ?? spec.content ?? '';
     const alertType = (spec.alertType ?? 'info');
     const title = spec.title ?? '';
     const theme = (spec.theme ?? 'light');

package/dist/components/big_value.js

@@ -2,7 +2,7 @@
  * Big value display component
  */
 import { COLORS, FONT_STACK, getThemeColors } from '../core/themes.js';
-import { formatNumber, inferFormat } from '../core/formatting.js';
+import { formatNumber, inferFormat, resolveCurrency } from '../core/formatting.js';
 import { registerComponent } from './registry.js';
 import { ValidationError } from '../core/exceptions.js';
 /**
@@ -25,8 +25,9 @@ function generateBigValue(spec) {
     const title = showTitleHeader ? specTitle : '';
     // Auto-infer format from label if not specified
     const fmt = spec.format ?? inferFormat(label, value);
+    const currency = resolveCurrency(spec.currency);
     const colors = getThemeColors(theme);
-    const displayValue = formatNumber(value, fmt);
+    const displayValue = formatNumber(value, fmt, false, currency);
     let comparisonHtml = '';
     if (comparison) {
         const compVal = comparison.value ?? 0;
@@ -34,7 +35,7 @@ function generateBigValue(spec) {
         const isPositive = compVal >= 0;
         const arrow = isPositive ? '↑' : '↓';
         const compColor = isPositive ? COLORS.POSITIVE_GREEN : COLORS.ERROR_RED;
-        const compDisplay = formatNumber(compVal, comparison.format, true);
+        const compDisplay = formatNumber(compVal, comparison.format, true, currency);
         comparisonHtml = `
       <div style="display: flex; align-items: center; gap: 4px; margin-top: 8px;">
         <span style="color: ${compColor}; font-size: 14px;">${arrow} ${compDisplay}</span>

package/dist/components/delta.js

@@ -2,7 +2,7 @@
  * Delta/change indicator component
  */
 import { COLORS, FONT_STACK, getThemeColors } from '../core/themes.js';
-import { formatNumber, inferFormat } from '../core/formatting.js';
+import { formatNumber, inferFormat, resolveCurrency } from '../core/formatting.js';
 import { registerComponent } from './registry.js';
 /**
  * Generate a delta/change indicator
@@ -21,6 +21,7 @@ function generateDelta(spec) {
     const title = showTitleHeader ? specTitle : '';
     // Auto-infer format from label if not specified
     const fmt = spec.format ?? inferFormat(label, value);
+    const currency = resolveCurrency(spec.currency);
     const colors = getThemeColors(theme);
     // Determine direction and color
     const isPositive = value > neutralIs;
@@ -40,7 +41,7 @@ function generateDelta(spec) {
         color = COLORS.ERROR_RED;
         arrow = isPositive ? '↑' : '↓';
     }
-    const displayValue = formatNumber(value, fmt, true);
+    const displayValue = formatNumber(value, fmt, true, currency);
     const titleUpper = title.toUpperCase();
     const titleHtml = title ? `<h2>${titleUpper}</h2>` : '';
     return `<!DOCTYPE html>

package/dist/components/table.d.ts

@@ -3,7 +3,7 @@
  */
 import type { ComponentSpec } from '../types.js';
 import { getThemeColors } from '../core/themes.js';
-import { type FormatType } from '../core/formatting.js';
+import { type FormatType, type CurrencyConfig } from '../core/formatting.js';
 /**
  * Column definition for table configuration
  */
@@ -81,7 +81,7 @@ export declare function formatCell(value: unknown, colDef: ColumnDef, themeColor
 }>, dumbbellRanges: Map<string, {
     min: number;
     max: number;
-}>, defaultHeatmapColors: string[], customPalette?: readonly string[]): CellResult;
+}>, defaultHeatmapColors: string[], customPalette?: readonly string[], currency?: CurrencyConfig): CellResult;
 /**
  * Generate a styled data table
  */

package/dist/components/table.js

@@ -2,7 +2,7 @@
  * Data table component
  */
 import { COLORS, PALETTE, FONT_STACK, SPARKLINE_WIDTH, SPARKLINE_HEIGHT, DUMBBELL_DOT_RADIUS, getThemeColors, getHeatmapColors, getSparklineColors, } from '../core/themes.js';
-import { formatNumber, inferFormat } from '../core/formatting.js';
+import { formatNumber, inferFormat, resolveCurrency } from '../core/formatting.js';
 import { calculateHeatmapColorWithContrast } from '../core/colors.js';
 import { registerComponent } from './registry.js';
 /**
@@ -334,7 +334,7 @@ function formatSparklineCell(rawValue, colDef, colId, themeColors, dumbbellRange
 /**
  * Format a cell value and return content with optional styling
  */
-export function formatCell(value, colDef, themeColors, heatmapRanges, dumbbellRanges, defaultHeatmapColors, customPalette) {
+export function formatCell(value, colDef, themeColors, heatmapRanges, dumbbellRanges, defaultHeatmapColors, customPalette, currency) {
     const colType = colDef.type;
     const colId = colDef.id;
     const palette = customPalette ?? PALETTE;
@@ -350,7 +350,10 @@ export function formatCell(value, colDef, themeColors, heatmapRanges, dumbbellRa
     if (colType === 'heatmap') {
         const range = heatmapRanges.get(colId);
         if (typeof rawValue === 'number' && range) {
-            const heatmapColors = colDef.heatmapColors ?? defaultHeatmapColors;
+            const baseColors = colDef.heatmapColors ?? defaultHeatmapColors;
+            const heatmapColors = colDef.higherIsBetter === false
+                ? [...baseColors].reverse()
+                : baseColors;
             const colorResult = calculateHeatmapColorWithContrast(rawValue, range.min, range.max, heatmapColors);
             bgColor = colorResult.bgColor;
             textColor = colorResult.textColor;
@@ -367,7 +370,7 @@ export function formatCell(value, colDef, themeColors, heatmapRanges, dumbbellRa
         formatted = rawValue;
     }
     else {
-        formatted = formatNumber(rawValue, fmt);
+        formatted = formatNumber(rawValue, fmt, false, currency);
     }
     // Apply bold/italic styling
     if (styles.bold) {
@@ -404,6 +407,7 @@ function parseTableConfig(spec) {
         heatmapRanges: computeHeatmapRanges(columns, data),
         dumbbellRanges: computeDumbbellRanges(columns, data),
         defaultHeatmapColors: getHeatmapColors(theme),
+        currency: resolveCurrency(spec.currency),
     };
 }
 /**
@@ -460,7 +464,7 @@ function buildDataRows(cfg, inlineStyles = false) {
         for (const col of cfg.columns) {
             const value = rowData[col.id];
             const align = col.align ?? 'left';
-            const cellResult = formatCell(value, col, cfg.colors, cfg.heatmapRanges, cfg.dumbbellRanges, cfg.defaultHeatmapColors);
+            const cellResult = formatCell(value, col, cfg.colors, cfg.heatmapRanges, cfg.dumbbellRanges, cfg.defaultHeatmapColors, undefined, cfg.currency);
             if (inlineStyles) {
                 const border = isLast ? `border-bottom: 1px solid ${cfg.colors.text};` : '';
                 const cellBg = cellResult.bgColor ?? rowBg;

package/dist/core/chart-helpers.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Shared helpers for scatter-family charts (scatter, bubble).
+ *
+ * Consolidates series-grouping, label config, and legend patterns
+ * that were duplicated across scatter.ts and bubble.ts.
+ */
+import type { DataPoint, ThemeColors } from '../types.js';
+/**
+ * Build ECharts label config for persistent point labels.
+ * @param labelIndex - Index of the label value in the point array
+ */
+export declare function buildPointLabelConfig(labelIndex: number, colors: ThemeColors): Record<string, unknown>;
+/**
+ * Group data points by a series field, applying a point builder to each.
+ */
+export declare function groupDataBySeries<T>(data: DataPoint[], seriesField: string, buildPoint: (d: DataPoint) => T): Map<string, T[]>;
+/**
+ * Build ECharts legend config for multi-series charts.
+ */
+export declare function buildSeriesLegend(legendData: string[], colors: ThemeColors): Record<string, unknown>;
+//# sourceMappingURL=chart-helpers.d.ts.map

package/dist/core/chart-helpers.js

@@ -0,0 +1,46 @@
+/**
+ * Shared helpers for scatter-family charts (scatter, bubble).
+ *
+ * Consolidates series-grouping, label config, and legend patterns
+ * that were duplicated across scatter.ts and bubble.ts.
+ */
+import { FONT_SIZE_TINY } from './themes.js';
+/**
+ * Build ECharts label config for persistent point labels.
+ * @param labelIndex - Index of the label value in the point array
+ */
+export function buildPointLabelConfig(labelIndex, colors) {
+    return {
+        show: true,
+        formatter: { _js_: `function(params) { return params.value[${labelIndex}] || ""; }` },
+        position: 'right',
+        fontSize: FONT_SIZE_TINY,
+        color: colors.textSecondary,
+    };
+}
+/**
+ * Group data points by a series field, applying a point builder to each.
+ */
+export function groupDataBySeries(data, seriesField, buildPoint) {
+    const groups = new Map();
+    for (const d of data) {
+        const groupName = String(d[seriesField] ?? 'Unknown');
+        if (!groups.has(groupName)) {
+            groups.set(groupName, []);
+        }
+        groups.get(groupName).push(buildPoint(d));
+    }
+    return groups;
+}
+/**
+ * Build ECharts legend config for multi-series charts.
+ */
+export function buildSeriesLegend(legendData, colors) {
+    return {
+        show: true,
+        data: legendData,
+        top: 0,
+        textStyle: { color: colors.textSecondary, fontSize: FONT_SIZE_TINY },
+    };
+}
+//# sourceMappingURL=chart-helpers.js.map