mviz 1.5.4 → 1.6.0

package/dist/charts/area.js

@@ -4,7 +4,7 @@
 import { FONT_SIZE_XXS, LEGEND_ITEM_WIDTH, LEGEND_ITEM_HEIGHT, LEGEND_ITEM_GAP, 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 an area chart
  */
@@ -23,7 +23,8 @@ export function buildAreaOptions(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
     const xAxisType = spec.xAxisType ?? inferAxisType(categories);
     // Get axis label config based on axis type

package/dist/charts/bar.js

@@ -4,7 +4,7 @@
 import { BAR_MAX_WIDTH, LEGEND_ITEM_WIDTH, LEGEND_ITEM_HEIGHT, LEGEND_ITEM_GAP, FONT_SIZE_TINY, FONT_SIZE_XXS, DEFAULT_CHART_HEIGHT, getThemeColors, getPaletteWithCustom, } from '../core/themes.js';
 import { wrapHtml } from '../core/serializer.js';
 import { registerChart, registerOptions } from './registry.js';
-import { inferFormat, getLabelFormatterJs, getAxisFormatterJs, inferAxisType } from '../core/formatting.js';
+import { inferFormat, getLabelFormatterJs, getAxisFormatterJs, inferAxisType, resolveCurrency } from '../core/formatting.js';
 /**
  * Build ECharts options for a bar chart
  */
@@ -23,8 +23,9 @@ export function buildBarOptions(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 labelFormatter = getLabelFormatterJs(valueFormat);
-    const axisFormatter = getAxisFormatterJs(valueFormat);
+    const currency = resolveCurrency(spec.currency);
+    const labelFormatter = getLabelFormatterJs(valueFormat, currency.symbol, currency.locale);
+    const axisFormatter = getAxisFormatterJs(valueFormat, currency.symbol, currency.locale);
     // Detect category axis type (this is x-axis for vertical, y-axis for horizontal)
     const categoryAxisType = spec.xAxisType ?? inferAxisType(categories);
     // For horizontal bars, x-axis is always 'value'; for vertical it's the category axis type

package/dist/charts/bubble.js

@@ -1,7 +1,7 @@
 /**
  * Bubble chart generator
  */
-import { COLORS, FONT_SIZE_TINY, ECHARTS_CDN, FONT_STACK, getThemeColors, getPaletteWithCustom } from '../core/themes.js';
+import { FONT_SIZE_TINY, ECHARTS_CDN, FONT_STACK, getThemeColors, getPaletteWithCustom } from '../core/themes.js';
 import { serializeOption } from '../core/serializer.js';
 import { registerChart, registerOptions } from './registry.js';
 /**
@@ -134,7 +134,7 @@ function generateBubble(spec) {
       background-color: ${colors.background}; font-family: ${FONT_STACK};
     }
     .container { padding: 20px; width: 100%; height: 100%; display: flex; flex-direction: column; }
-    .red-line { width: 100%; height: 3px; background-color: ${COLORS.ERROR_RED}; margin-bottom: 12px; }
+    .red-line { width: 100%; height: 3px; background-color: ${colors.accent}; margin-bottom: 12px; }
     h2 { font-family: ${FONT_STACK}; color: ${colors.text}; font-size: 18px; font-weight: 900; margin: 0 0 4px 0; }
     #chart { width: 100%; flex: 1; min-height: 300px; }
   </style>

package/dist/charts/combo.js

@@ -3,7 +3,7 @@
  */
 import { FONT_SIZE_XXS, BAR_MAX_WIDTH, LEGEND_ITEM_WIDTH, LEGEND_ITEM_HEIGHT, LEGEND_ITEM_GAP, getThemeColors, getPaletteWithCustom, } from '../core/themes.js';
 import { wrapHtml } from '../core/serializer.js';
-import { inferAxisType, inferFormat, getAxisFormatterJs } from '../core/formatting.js';
+import { inferAxisType, inferFormat, getAxisFormatterJs, resolveCurrency } from '../core/formatting.js';
 import { registerChart, registerOptions } from './registry.js';
 /**
  * Build ECharts options for a combo chart (bar + line with optional dual axis)
@@ -23,11 +23,12 @@ export function buildComboOptions(spec) {
     // Infer format for primary y-axis (bars)
     const barSample = data.length > 0 && data[0] && barKeys[0] ? data[0][barKeys[0]] ?? 0 : 0;
     const primaryFormat = spec.format ?? inferFormat(barKeys[0] ?? 'value', barSample);
-    const primaryAxisFormatter = getAxisFormatterJs(primaryFormat);
+    const currency = resolveCurrency(spec.currency);
+    const primaryAxisFormatter = getAxisFormatterJs(primaryFormat, currency.symbol, currency.locale);
     // Infer format for secondary y-axis (line if dual axis)
     const lineSample = data.length > 0 && data[0] && lineKeys[0] ? data[0][lineKeys[0]] ?? 0 : 0;
     const secondaryFormat = spec.secondaryFormat ?? inferFormat(lineKeys[0] ?? 'value', lineSample);
-    const secondaryAxisFormatter = getAxisFormatterJs(secondaryFormat);
+    const secondaryAxisFormatter = getAxisFormatterJs(secondaryFormat, currency.symbol, currency.locale);
     // Detect x-axis type
     const xAxisType = inferAxisType(categories);
     // Get axis label config based on axis type

package/dist/charts/dumbbell.js

@@ -6,7 +6,7 @@
  */
 import { COLORS, FONT_SIZE_TINY, DUMBBELL_SYMBOL_SIZE, DEFAULT_CHART_HEIGHT, getThemeColors, } from '../core/themes.js';
 import { wrapHtml } from '../core/serializer.js';
-import { inferFormat, getAxisFormatterJs, formatValue, formatNumber } from '../core/formatting.js';
+import { inferFormat, getAxisFormatterJs, formatValue, formatNumber, resolveCurrency, localeFixed } from '../core/formatting.js';
 import { registerChart, registerOptions } from './registry.js';
 // Directional colors
 const POSITIVE_COLOR = COLORS.POSITIVE_GREEN;
@@ -50,25 +50,29 @@ const COMPACT_LABEL_CHAR_THRESHOLD = 5;
  * Compute the compact dumbbell label string for a given value.
  * Mirrors the JS formatter logic so we can measure character count at build time.
  */
-function compactFormatLabel(value, fmt) {
-    if (fmt === 'auto' || fmt === 'usd_auto') {
+function compactFormatLabel(value, fmt, currencySymbol = '$', locale = 'en-US') {
+    if (fmt === 'auto' || fmt === 'currency_auto') {
         const abs = Math.abs(value);
-        const p = fmt === 'usd_auto' ? '$' : '';
+        const p = fmt === 'currency_auto' ? currencySymbol : '';
+        const isCurrency = fmt === 'currency_auto';
+        const lf = isCurrency
+            ? (v, d) => localeFixed(v, d, locale)
+            : (v, d) => v.toFixed(d);
         let r;
         if (abs >= 1e9) {
             const s = abs / 1e9;
-            r = p + (s >= 10 ? Math.round(s).toString() : s.toFixed(1)) + 'b';
+            r = p + (s >= 10 ? Math.round(s).toString() : lf(s, 1)) + 'b';
         }
         else if (abs >= 1e6) {
             const s = abs / 1e6;
-            r = p + (s >= 10 ? Math.round(s).toString() : s.toFixed(1)) + 'm';
+            r = p + (s >= 10 ? Math.round(s).toString() : lf(s, 1)) + 'm';
         }
         else if (abs >= 1e3) {
             const s = abs / 1e3;
-            r = p + (s >= 10 ? Math.round(s).toString() : s.toFixed(1)) + 'k';
+            r = p + (s >= 10 ? Math.round(s).toString() : lf(s, 1)) + 'k';
         }
         else {
-            r = abs === Math.floor(abs) ? p + abs.toString() : p + abs.toFixed(1);
+            r = abs === Math.floor(abs) ? p + abs.toString() : p + lf(abs, 1);
         }
         return value < 0 ? '(' + r + ')' : r;
     }
@@ -77,8 +81,8 @@ function compactFormatLabel(value, fmt) {
 /**
  * Get the appropriate font size for a dumbbell dot label.
  */
-function dumbbellLabelFontSize(value, fmt) {
-    const label = compactFormatLabel(value, fmt);
+function dumbbellLabelFontSize(value, fmt, currencySymbol = '$', locale = 'en-US') {
+    const label = compactFormatLabel(value, fmt, currencySymbol, locale);
     return label.length >= COMPACT_LABEL_CHAR_THRESHOLD
         ? DUMBBELL_LABEL_FONT_SMALL
         : DUMBBELL_LABEL_FONT;
@@ -88,56 +92,68 @@ function dumbbellLabelFontSize(value, fmt) {
  * Dumbbell stores values as [value, categoryIndex], so we extract value from params.value[0].
  * Uses compact formatting (~4-5 chars max) to fit inside small dot symbols.
  */
-function buildDumbbellLabelFormatter(fmt) {
-    if (fmt === 'auto' || fmt === 'usd_auto') {
-        const isCurrency = fmt === 'usd_auto' ? 'true' : 'false';
+function buildDumbbellLabelFormatter(fmt, currencySymbol = '$', locale = 'en-US') {
+    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); };`;
         // Compact: max 1 decimal for scaled values to fit in dot labels
         return `function(params) {
   var v = params.value[0];
   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 = p + (s >= 10 ? Math.round(s) : s.toFixed(1)) + 'b';
+    r = p + (s >= 10 ? Math.round(s) : lf(s,1)) + 'b';
   } else if (abs >= 1e6) {
     var s = abs / 1e6;
-    r = p + (s >= 10 ? Math.round(s) : s.toFixed(1)) + 'm';
+    r = p + (s >= 10 ? Math.round(s) : lf(s,1)) + 'm';
   } else if (abs >= 1e3) {
     var s = abs / 1e3;
-    r = p + (s >= 10 ? Math.round(s) : s.toFixed(1)) + 'k';
+    r = p + (s >= 10 ? Math.round(s) : lf(s,1)) + 'k';
   } else {
-    r = abs === Math.floor(abs) ? p + abs : p + abs.toFixed(1);
+    r = abs === Math.floor(abs) ? p + abs : p + lf(abs,1);
   }
   return neg ? '(' + r + ')' : r;
 }`;
     }
-    const expr = formatValue(fmt);
+    const expr = formatValue(fmt, currencySymbol, locale);
     return `function(params) { var value = params.value[0]; if (value == null) return ''; return ${expr}; }`;
 }
 /**
  * Build a tooltip value formatting expression for dumbbell charts.
  * Tooltip can be more verbose than dot labels, so uses full smart formatting.
  */
-function buildDumbbellTooltipExpr(fmt) {
-    if (fmt === 'auto' || fmt === 'usd_auto') {
-        const isCurrency = fmt === 'usd_auto' ? 'true' : 'false';
+function buildDumbbellTooltipExpr(fmt, currencySymbol = '$', locale = 'en-US') {
+    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 `(function(v) {
     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'; }
-    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'; }
-    else if (abs >= 1e4) { var s = abs / 1e3; r = s >= 100 ? p + s.toFixed(1) + 'k' : p + s.toFixed(2) + 'k'; }
-    else if (abs >= 1e3) { r = p + abs.toLocaleString('en-US', {maximumFractionDigits: 0}); }
-    else { r = abs === Math.floor(abs) ? p + abs : p + abs.toFixed(2); }
+    if (abs >= 1e9) { var s = abs / 1e9; 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 + 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 + lf(s,1) + 'k' : p + lf(s,2) + 'k'; }
+    else if (abs >= 1e3) { r = p + abs.toLocaleString(${locStr}, {maximumFractionDigits: 0}); }
+    else { r = abs === Math.floor(abs) ? p + abs : p + lf(abs,2); }
     return neg ? '(' + r + ')' : r;
   })(val)`;
     }
-    const expr = formatValue(fmt);
+    const expr = formatValue(fmt, currencySymbol, locale);
     // formatValue uses 'value' as the variable name, replace with 'val' for tooltip context
     return expr.replace(/\bvalue\b/g, 'val');
 }
@@ -177,7 +193,8 @@ export function buildDumbbellOptions(spec) {
     // Infer value format
     const sampleValue = startValues[0] ?? 0;
     const valueFormat = spec.format ?? inferFormat(startField, sampleValue);
-    const axisFormatter = getAxisFormatterJs(valueFormat);
+    const currency = resolveCurrency(spec.currency);
+    const axisFormatter = getAxisFormatterJs(valueFormat, currency.symbol, currency.locale);
     // Calculate axis limits
     const allValues = [...startValues, ...endValues];
     let xMin = spec.xMin;
@@ -198,7 +215,7 @@ export function buildDumbbellOptions(spec) {
         }
     }
     // Value formatter for labels inside dots (uses formatValue for all format types)
-    const valueFormatterJs = buildDumbbellLabelFormatter(valueFormat);
+    const valueFormatterJs = buildDumbbellLabelFormatter(valueFormat, currency.symbol, currency.locale);
     // Build line data for custom series
     const lineData = startValues.map((s, i) => {
         const e = endValues[i];
@@ -309,7 +326,7 @@ export function buildDumbbellOptions(spec) {
         label: {
             show: showValues,
             position: 'inside',
-            fontSize: dumbbellLabelFontSize(v, valueFormat),
+            fontSize: dumbbellLabelFontSize(v, valueFormat, currency.symbol, currency.locale),
             fontWeight: 'bold',
             color: rowColors[i],
             formatter: { _js_: valueFormatterJs },
@@ -332,7 +349,7 @@ export function buildDumbbellOptions(spec) {
         label: {
             show: showValues,
             position: 'inside',
-            fontSize: dumbbellLabelFontSize(v, valueFormat),
+            fontSize: dumbbellLabelFontSize(v, valueFormat, currency.symbol, currency.locale),
             fontWeight: 'bold',
             color: '#ffffff',
             formatter: { _js_: valueFormatterJs },
@@ -346,7 +363,7 @@ export function buildDumbbellOptions(spec) {
         z: 10,
     });
     // Tooltip formatter with value formatting
-    const tooltipValueExpr = buildDumbbellTooltipExpr(valueFormat);
+    const tooltipValueExpr = buildDumbbellTooltipExpr(valueFormat, currency.symbol, currency.locale);
     const tooltipFormatterJs = `function(params) {
     if (params.seriesName === 'range') return '';
     var cat = ${JSON.stringify(categories)}[params.data.value ? params.data.value[1] : params.data[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,7 @@
 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';
 /**
  * Build ECharts options for a scatter plot
  */
@@ -22,8 +22,9 @@ 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);
     // Build series - either single series or grouped by seriesField
     let seriesList;
     let legendData = [];
@@ -68,8 +69,8 @@ export function buildScatterOptions(spec) {
         ];
     }
     // 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 = '';

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>