mviz 1.6.3 → 1.6.6

package/README.md

@@ -156,7 +156,7 @@ title: My Report
 ## Section Name
 
 ```big_value size=[4,2]
-{"value": 125000, "label": "Revenue", "format": "usd0m"}
+{"value": 125000, "label": "Revenue", "format": "currency0m"}
 ```
 ```delta size=[4,2]
 {"value": 0.15, "label": "vs Last Month", "format": "pct0"}
@@ -200,7 +200,7 @@ Tables support inline sparkline columns for trend visualization:
   "type": "table",
   "columns": [
     {"id": "product", "title": "Product"},
-    {"id": "sales", "title": "Sales", "fmt": "usd"},
+    {"id": "sales", "title": "Sales", "fmt": "currency"},
     {"id": "trend", "title": "Trend", "type": "sparkline", "sparkType": "line"},
     {"id": "progress", "title": "Goal", "type": "sparkline", "sparkType": "pct_bar", "width": 100}
   ],
@@ -217,10 +217,10 @@ Sparkline types: `line`, `bar`, `area`, `pct_bar` (progress bar), `dumbbell` (be
 | Format | Output | Description |
 |--------|--------|-------------|
 | `auto` | 1.000m, 10.00k | **Smart auto-format (default)** |
-| `usd_auto` | $1.000m, $10.00k | Smart auto-format with $ |
-| `usd0m` | $1.2m | Millions |
-| `usd0k` | $125k | Compact thousands |
-| `usd` | $1,250,000 | Full dollars |
+| `currency_auto` | $1.000m, $10.00k | Smart auto-format with currency symbol |
+| `currency0m` | $1.2m | Millions |
+| `currency0k` | $125k | Compact thousands |
+| `currency` | $1,250,000 | Full currency |
 | `pct0` | 15% | Percentage integer |
 | `pct` | 15.0% | Percentage with decimal |
 | `pct1` | 15.0% | Percentage with 1 decimal |
@@ -234,7 +234,7 @@ Chart axes automatically detect the appropriate format based on field names:
 
 | Field Pattern | Auto Format | Example |
 |---------------|-------------|---------|
-| revenue, sales, price, cost, profit | `usd_auto` | $1.250m |
+| revenue, sales, price, cost, profit | `currency_auto` | $1.250m |
 | pct, percent, rate, ratio | `pct` or `pct0` | 15.0% |
 | All other fields | `auto` | 1.250m |
 
@@ -375,7 +375,7 @@ The skill is automatically available when working in this project directory.
 
 ## Dependencies
 
-- Node.js 20+
+- Node.js 24.12+
 
 ## Design Philosophy
 

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, resolveCurrency } from '../core/formatting.js';
+import { inferFormat, getAxisFormatterJs, inferAxisType, resolveCurrency, shouldPctMultiply, collectNumericFieldValues, } from '../core/formatting.js';
 /**
  * Build ECharts options for an area chart
  */
@@ -24,7 +24,8 @@ export function buildAreaOptions(spec) {
     const sampleValue = data.length > 0 && data[0] ? data[0][firstYKey] ?? 0 : 0;
     const valueFormat = spec.format ?? inferFormat(firstYKey, sampleValue);
     const currency = resolveCurrency(spec.currency);
-    const axisFormatter = getAxisFormatterJs(valueFormat, currency.symbol, currency.locale);
+    const pctMultiply = shouldPctMultiply(valueFormat, collectNumericFieldValues(data, yKeys));
+    const axisFormatter = getAxisFormatterJs(valueFormat, currency.symbol, currency.locale, pctMultiply);
     // 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, resolveCurrency } from '../core/formatting.js';
+import { inferFormat, getLabelFormatterJs, getAxisFormatterJs, inferAxisType, resolveCurrency, shouldPctMultiply, collectNumericFieldValues, } from '../core/formatting.js';
 /**
  * Build ECharts options for a bar chart
  */
@@ -24,8 +24,9 @@ export function buildBarOptions(spec) {
     const sampleValue = data.length > 0 && data[0] ? data[0][firstYKey] ?? 0 : 0;
     const valueFormat = spec.format ?? inferFormat(firstYKey, sampleValue);
     const currency = resolveCurrency(spec.currency);
-    const labelFormatter = getLabelFormatterJs(valueFormat, currency.symbol, currency.locale);
-    const axisFormatter = getAxisFormatterJs(valueFormat, currency.symbol, currency.locale);
+    const pctMultiply = shouldPctMultiply(valueFormat, collectNumericFieldValues(data, yKeys));
+    const labelFormatter = getLabelFormatterJs(valueFormat, currency.symbol, currency.locale, pctMultiply);
+    const axisFormatter = getAxisFormatterJs(valueFormat, currency.symbol, currency.locale, pctMultiply);
     // 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

@@ -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, formatValue, resolveCurrency } from '../core/formatting.js';
+import { inferFormat, getAxisFormatterJs, formatValue, resolveCurrency, shouldPctMultiply, collectNumericFieldValues, } from '../core/formatting.js';
 import { buildPointLabelConfig, groupDataBySeries, buildSeriesLegend } from '../core/chart-helpers.js';
 /** Min/max bubble pixel sizes */
 const BUBBLE_SIZE_MIN = 10;
@@ -91,10 +91,10 @@ function buildBubbleSeries(data, ctx, seriesField, showLabels, palette, colors)
 /**
  * Build tooltip config for bubble chart.
  */
-function buildBubbleTooltip(ctx, seriesField, xFormat, yFormat, currency, colors) {
+function buildBubbleTooltip(ctx, seriesField, xFormat, yFormat, currency, colors, xPctMultiply = true, yPctMultiply = true) {
     const labelIdx = ctx.labelField ? BUBBLE_LABEL_INDEX : -1;
-    const xFormatExpr = formatValue(xFormat, currency.symbol, currency.locale);
-    const yFormatExpr = formatValue(yFormat, currency.symbol, currency.locale);
+    const xFormatExpr = formatValue(xFormat, currency.symbol, currency.locale, xPctMultiply);
+    const yFormatExpr = formatValue(yFormat, currency.symbol, currency.locale, yPctMultiply);
     const seriesNameLine = seriesField
         ? "if (params.seriesName) result += '<strong>' + params.seriesName + '</strong><br/>';"
         : '';
@@ -157,6 +157,8 @@ export function buildBubbleOptions(spec) {
     const xFormat = spec.xFormat ?? inferFormat(xField, xSample);
     const yFormat = spec.yFormat ?? inferFormat(yField, ySample);
     const currency = resolveCurrency(spec.currency);
+    const xPctMultiply = shouldPctMultiply(xFormat, collectNumericFieldValues(data, [xField]));
+    const yPctMultiply = shouldPctMultiply(yFormat, collectNumericFieldValues(data, [yField]));
     // Build context for point construction
     const xAxis = detectAxisCategories(data, xField);
     const yAxis = detectAxisCategories(data, yField);
@@ -174,14 +176,14 @@ export function buildBubbleOptions(spec) {
         backgroundColor: 'transparent',
         animation: false,
         color: palette,
-        tooltip: buildBubbleTooltip(ctx, seriesField, xFormat, yFormat, currency, colors),
+        tooltip: buildBubbleTooltip(ctx, seriesField, xFormat, yFormat, currency, colors, xPctMultiply, yPctMultiply),
         grid: {
             left: '6%', right: '8%',
             top: hasLegend ? '14%' : '12%',
             bottom: '14%', containLabel: true,
         },
-        xAxis: buildBubbleAxis(xField, xAxis.isCategory, xAxis.categories, getAxisFormatterJs(xFormat, currency.symbol, currency.locale), 24, colors),
-        yAxis: buildBubbleAxis(yField, yAxis.isCategory, yAxis.categories, getAxisFormatterJs(yFormat, currency.symbol, currency.locale), 32, colors),
+        xAxis: buildBubbleAxis(xField, xAxis.isCategory, xAxis.categories, getAxisFormatterJs(xFormat, currency.symbol, currency.locale, xPctMultiply), 24, colors),
+        yAxis: buildBubbleAxis(yField, yAxis.isCategory, yAxis.categories, getAxisFormatterJs(yFormat, currency.symbol, currency.locale, yPctMultiply), 32, colors),
         series: seriesList,
     };
     if (hasLegend) {

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, resolveCurrency } from '../core/formatting.js';
+import { inferAxisType, inferFormat, getAxisFormatterJs, resolveCurrency, shouldPctMultiply, collectNumericFieldValues, } from '../core/formatting.js';
 import { registerChart, registerOptions } from './registry.js';
 /**
  * Build ECharts options for a combo chart (bar + line with optional dual axis)
@@ -24,11 +24,13 @@ export function buildComboOptions(spec) {
     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 currency = resolveCurrency(spec.currency);
-    const primaryAxisFormatter = getAxisFormatterJs(primaryFormat, currency.symbol, currency.locale);
+    const primaryPctMultiply = shouldPctMultiply(primaryFormat, collectNumericFieldValues(data, barKeys));
+    const primaryAxisFormatter = getAxisFormatterJs(primaryFormat, currency.symbol, currency.locale, primaryPctMultiply);
     // 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, currency.symbol, currency.locale);
+    const secondaryPctMultiply = shouldPctMultiply(secondaryFormat, collectNumericFieldValues(data, lineKeys));
+    const secondaryAxisFormatter = getAxisFormatterJs(secondaryFormat, currency.symbol, currency.locale, secondaryPctMultiply);
     // 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, resolveCurrency, localeFixed } from '../core/formatting.js';
+import { inferFormat, getAxisFormatterJs, formatValue, formatNumber, resolveCurrency, localeFixed, shouldPctMultiply, } from '../core/formatting.js';
 import { registerChart, registerOptions } from './registry.js';
 // Directional colors
 const POSITIVE_COLOR = COLORS.POSITIVE_GREEN;
@@ -50,7 +50,7 @@ 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, currencySymbol = '$', locale = 'en-US') {
+function compactFormatLabel(value, fmt, currencySymbol = '$', locale = 'en-US', pctMultiply = true) {
     if (fmt === 'auto' || fmt === 'currency_auto') {
         const abs = Math.abs(value);
         const p = fmt === 'currency_auto' ? currencySymbol : '';
@@ -76,13 +76,13 @@ function compactFormatLabel(value, fmt, currencySymbol = '$', locale = 'en-US')
         }
         return value < 0 ? '(' + r + ')' : r;
     }
-    return formatNumber(value, fmt);
+    return formatNumber(value, fmt, false, undefined, pctMultiply);
 }
 /**
  * Get the appropriate font size for a dumbbell dot label.
  */
-function dumbbellLabelFontSize(value, fmt, currencySymbol = '$', locale = 'en-US') {
-    const label = compactFormatLabel(value, fmt, currencySymbol, locale);
+function dumbbellLabelFontSize(value, fmt, currencySymbol = '$', locale = 'en-US', pctMultiply = true) {
+    const label = compactFormatLabel(value, fmt, currencySymbol, locale, pctMultiply);
     return label.length >= COMPACT_LABEL_CHAR_THRESHOLD
         ? DUMBBELL_LABEL_FONT_SMALL
         : DUMBBELL_LABEL_FONT;
@@ -92,7 +92,7 @@ function dumbbellLabelFontSize(value, fmt, currencySymbol = '$', locale = 'en-US
  * 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, currencySymbol = '$', locale = 'en-US') {
+function buildDumbbellLabelFormatter(fmt, currencySymbol = '$', locale = 'en-US', pctMultiply = true) {
     if (fmt === 'auto' || fmt === 'currency_auto') {
         const isCurrency = fmt === 'currency_auto' ? 'true' : 'false';
         const symbolStr = JSON.stringify(currencySymbol);
@@ -124,14 +124,14 @@ function buildDumbbellLabelFormatter(fmt, currencySymbol = '$', locale = 'en-US'
   return neg ? '(' + r + ')' : r;
 }`;
     }
-    const expr = formatValue(fmt, currencySymbol, locale);
+    const expr = formatValue(fmt, currencySymbol, locale, pctMultiply);
     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, currencySymbol = '$', locale = 'en-US') {
+function buildDumbbellTooltipExpr(fmt, currencySymbol = '$', locale = 'en-US', pctMultiply = true) {
     if (fmt === 'auto' || fmt === 'currency_auto') {
         const isCurrency = fmt === 'currency_auto' ? 'true' : 'false';
         const symbolStr = JSON.stringify(currencySymbol);
@@ -153,7 +153,7 @@ function buildDumbbellTooltipExpr(fmt, currencySymbol = '$', locale = 'en-US') {
     return neg ? '(' + r + ')' : r;
   })(val)`;
     }
-    const expr = formatValue(fmt, currencySymbol, locale);
+    const expr = formatValue(fmt, currencySymbol, locale, pctMultiply);
     // formatValue uses 'value' as the variable name, replace with 'val' for tooltip context
     return expr.replace(/\bvalue\b/g, 'val');
 }
@@ -194,7 +194,8 @@ export function buildDumbbellOptions(spec) {
     const sampleValue = startValues[0] ?? 0;
     const valueFormat = spec.format ?? inferFormat(startField, sampleValue);
     const currency = resolveCurrency(spec.currency);
-    const axisFormatter = getAxisFormatterJs(valueFormat, currency.symbol, currency.locale);
+    const pctMultiply = shouldPctMultiply(valueFormat, [...startValues, ...endValues]);
+    const axisFormatter = getAxisFormatterJs(valueFormat, currency.symbol, currency.locale, pctMultiply);
     // Calculate axis limits
     const allValues = [...startValues, ...endValues];
     let xMin = spec.xMin;
@@ -215,7 +216,7 @@ export function buildDumbbellOptions(spec) {
         }
     }
     // Value formatter for labels inside dots (uses formatValue for all format types)
-    const valueFormatterJs = buildDumbbellLabelFormatter(valueFormat, currency.symbol, currency.locale);
+    const valueFormatterJs = buildDumbbellLabelFormatter(valueFormat, currency.symbol, currency.locale, pctMultiply);
     // Build line data for custom series
     const lineData = startValues.map((s, i) => {
         const e = endValues[i];
@@ -326,7 +327,7 @@ export function buildDumbbellOptions(spec) {
         label: {
             show: showValues,
             position: 'inside',
-            fontSize: dumbbellLabelFontSize(v, valueFormat, currency.symbol, currency.locale),
+            fontSize: dumbbellLabelFontSize(v, valueFormat, currency.symbol, currency.locale, pctMultiply),
             fontWeight: 'bold',
             color: rowColors[i],
             formatter: { _js_: valueFormatterJs },
@@ -349,7 +350,7 @@ export function buildDumbbellOptions(spec) {
         label: {
             show: showValues,
             position: 'inside',
-            fontSize: dumbbellLabelFontSize(v, valueFormat, currency.symbol, currency.locale),
+            fontSize: dumbbellLabelFontSize(v, valueFormat, currency.symbol, currency.locale, pctMultiply),
             fontWeight: 'bold',
             color: '#ffffff',
             formatter: { _js_: valueFormatterJs },
@@ -363,7 +364,7 @@ export function buildDumbbellOptions(spec) {
         z: 10,
     });
     // Tooltip formatter with value formatting
-    const tooltipValueExpr = buildDumbbellTooltipExpr(valueFormat, currency.symbol, currency.locale);
+    const tooltipValueExpr = buildDumbbellTooltipExpr(valueFormat, currency.symbol, currency.locale, pctMultiply);
     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,14 +3,14 @@
  */
 import { FONT_SIZE_XXS, getThemeColors, getPaletteWithCustom } from '../core/themes.js';
 import { wrapHtml } from '../core/serializer.js';
-import { inferFormat, resolveCurrency } from '../core/formatting.js';
+import { inferFormat, resolveCurrency, shouldPctMultiply } 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, currencySymbol = '$', locale = 'en-US') {
+function getFunnelFormatterJs(fmt, currencySymbol = '$', locale = 'en-US', pctMultiply = true) {
     // Smart auto-formatting based on magnitude
     if (fmt === 'auto' || fmt === 'currency_auto' || fmt === null || fmt === undefined) {
         const isCurrency = fmt === 'currency_auto' ? 'true' : 'false';
@@ -66,14 +66,18 @@ function getFunnelFormatterJs(fmt, currencySymbol = '$', locale = 'en-US') {
                 _js_: `function(params) { return params.name + ': ' + ${sym} + (params.value/1000000000).toLocaleString(${locStr}, {minimumFractionDigits:1, maximumFractionDigits:1}) + 'b'; }`,
             };
         case 'pct':
-        case 'pct1':
+        case 'pct1': {
+            const scaleExpr = pctMultiply ? '(params.value * 100)' : 'params.value';
             return {
-                _js_: "function(params) { return params.name + ': ' + (params.value * 100).toFixed(1) + '%'; }",
+                _js_: `function(params) { return params.name + ': ' + ${scaleExpr}.toFixed(1) + '%'; }`,
             };
-        case 'pct0':
+        }
+        case 'pct0': {
+            const scaleExpr = pctMultiply ? '(params.value * 100)' : 'params.value';
             return {
-                _js_: "function(params) { return params.name + ': ' + (params.value * 100).toFixed(0) + '%'; }",
+                _js_: `function(params) { return params.name + ': ' + ${scaleExpr}.toFixed(0) + '%'; }`,
             };
+        }
         case 'num0':
             return { _js_: "function(params) { return params.name + ': ' + params.value.toLocaleString(); }" };
         case 'num1':
@@ -107,8 +111,9 @@ export function buildFunnelOptions(spec) {
     const sampleValue = funnelData[0]?.value ?? 0;
     const valueFormat = spec.format ?? inferFormat(valueField, sampleValue);
     const currency = resolveCurrency(spec.currency);
+    const pctMultiply = shouldPctMultiply(valueFormat, funnelData.map((d) => d.value));
     // Get JavaScript formatter
-    const formatter = getFunnelFormatterJs(valueFormat, currency.symbol, currency.locale);
+    const formatter = getFunnelFormatterJs(valueFormat, currency.symbol, currency.locale, pctMultiply);
     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, resolveCurrency } from '../core/formatting.js';
+import { inferFormat, resolveCurrency, shouldPctMultiply } 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.
@@ -38,7 +38,7 @@ function parseFormattedValue(value) {
  * @param currencySymbol - Symbol to use for currency formats
  * @param locale - Locale for number formatting (defaults to 'en-US')
  */
-function getHeatmapLabelFormatter(fmt, currencySymbol = '$', locale = 'en-US') {
+function getHeatmapLabelFormatter(fmt, currencySymbol = '$', locale = 'en-US', pctMultiply = true) {
     if (fmt === null || fmt === undefined) {
         return null;
     }
@@ -80,13 +80,14 @@ function getHeatmapLabelFormatter(fmt, currencySymbol = '$', locale = 'en-US') {
     // Format-specific formatters (with null checks)
     const sym = JSON.stringify(currencySymbol);
     const locStr = JSON.stringify(locale);
+    const pctExpr = pctMultiply ? '(v * 100)' : 'v';
     const formatExprs = {
         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) + '%'",
+        pct: `${pctExpr}.toFixed(1) + '%'`,
+        pct0: `${pctExpr}.toFixed(0) + '%'`,
+        pct1: `${pctExpr}.toFixed(1) + '%'`,
         num0: "v.toLocaleString()",
         num1: "v.toFixed(1)",
         num0k: "(v/1000).toFixed(0) + 'k'",
@@ -160,7 +161,8 @@ export function buildHeatmapOptions(spec) {
     const sampleValue = values[0] ?? 0;
     const valueFormat = spec.format ?? inferFormat('value', sampleValue);
     const currency = resolveCurrency(spec.currency);
-    const labelFormatter = getHeatmapLabelFormatter(valueFormat, currency.symbol, currency.locale);
+    const pctMultiply = shouldPctMultiply(valueFormat, values);
+    const labelFormatter = getHeatmapLabelFormatter(valueFormat, currency.symbol, currency.locale, pctMultiply);
     // 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, resolveCurrency } from '../core/formatting.js';
+import { inferFormat, getAxisFormatterJs, inferAxisType, resolveCurrency, shouldPctMultiply, collectNumericFieldValues, } from '../core/formatting.js';
 /**
  * Build ECharts options for a line chart
  */
@@ -23,7 +23,8 @@ export function buildLineOptions(spec) {
     const sampleValue = data.length > 0 && data[0] ? data[0][firstYKey] ?? 0 : 0;
     const valueFormat = spec.format ?? inferFormat(firstYKey, sampleValue);
     const currency = resolveCurrency(spec.currency);
-    const axisFormatter = getAxisFormatterJs(valueFormat, currency.symbol, currency.locale);
+    const pctMultiply = shouldPctMultiply(valueFormat, collectNumericFieldValues(data, yKeys));
+    const axisFormatter = getAxisFormatterJs(valueFormat, currency.symbol, currency.locale, pctMultiply);
     // 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, resolveCurrency } from '../core/formatting.js';
+import { inferFormat, getAxisFormatterJs, formatValue, resolveCurrency, shouldPctMultiply, collectNumericFieldValues, } from '../core/formatting.js';
 import { buildPointLabelConfig, groupDataBySeries, buildSeriesLegend } from '../core/chart-helpers.js';
 /** Scatter point opacity */
 const SCATTER_OPACITY = 0.75;
@@ -38,8 +38,10 @@ export function buildScatterOptions(spec) {
     const xFormat = spec.xFormat ?? inferFormat(xField, xSample);
     const yFormat = spec.yFormat ?? inferFormat(yField, ySample);
     const currency = resolveCurrency(spec.currency);
-    const xAxisFormatter = getAxisFormatterJs(xFormat, currency.symbol, currency.locale);
-    const yAxisFormatter = getAxisFormatterJs(yFormat, currency.symbol, currency.locale);
+    const xPctMultiply = shouldPctMultiply(xFormat, collectNumericFieldValues(data, [xField]));
+    const yPctMultiply = shouldPctMultiply(yFormat, collectNumericFieldValues(data, [yField]));
+    const xAxisFormatter = getAxisFormatterJs(xFormat, currency.symbol, currency.locale, xPctMultiply);
+    const yAxisFormatter = getAxisFormatterJs(yFormat, currency.symbol, currency.locale, yPctMultiply);
     // Label config for persistent point labels
     const labelConfig = showLabels && labelField
         ? buildPointLabelConfig(SCATTER_LABEL_INDEX, colors)
@@ -77,8 +79,8 @@ export function buildScatterOptions(spec) {
         seriesList = [seriesObj];
     }
     // Build tooltip formatter with label support and value formatting
-    const xFormatExpr = formatValue(xFormat, currency.symbol, currency.locale);
-    const yFormatExpr = formatValue(yFormat, currency.symbol, currency.locale);
+    const xFormatExpr = formatValue(xFormat, currency.symbol, currency.locale, xPctMultiply);
+    const yFormatExpr = formatValue(yFormat, currency.symbol, currency.locale, yPctMultiply);
     const tooltipFormatterJs = `function(params) {
     var d = params.value || params.data;
     var result = '';

package/dist/cli.js

@@ -177,22 +177,23 @@ async function main() {
         let errors = [];
         // Detect input type
         const trimmed = input.trim();
+        const lintMode = lintOnly ? 'lint' : 'generate';
         if (trimmed.startsWith('{') || trimmed.startsWith('[')) {
             // JSON input - lint then generate
             const spec = JSON.parse(trimmed);
-            lintSpec(spec);
+            lintSpec(spec, lintMode);
             html = await generateChartAsync(spec);
         }
         else if (trimmed.startsWith('---') || trimmed.includes('```')) {
             // Markdown input - parser handles linting internally (async for mermaid)
-            const result = await parseMarkdownToDashboardAsync(input, 'light', baseDir, false, false, customTheme);
+            const result = await parseMarkdownToDashboardAsync(input, 'light', baseDir, false, false, customTheme, lintMode);
             html = result.html;
             errors = result.errors;
         }
         else {
             // Try JSON anyway - lint then generate
             const spec = JSON.parse(trimmed);
-            lintSpec(spec);
+            lintSpec(spec, lintMode);
             html = await generateChartAsync(spec);
         }
         // Check for errors (unless --allow-errors is set)

package/dist/components/table-interactivity.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Table interactivity (sorting and filtering).
+ *
+ * Used by both standalone tables (`renderStandaloneTable`) and dashboard-embedded
+ * tables (`renderTable` in the layout parser). Produces the chrome (global filter
+ * input), the per-cell `data-sort` attribute for numeric sorting, and one
+ * vanilla-JS init function that wires up click/input handlers.
+ */
+export interface TableInteractivity {
+    sortable: boolean;
+    filter: boolean;
+}
+/**
+ * Read sortable/filter options from a spec. Sort defaults ON, filter defaults OFF.
+ */
+export declare function parseTableInteractivity(spec: Record<string, unknown>): TableInteractivity;
+/**
+ * Generate an HTML attribute string for a sortable `<th>`.
+ * `colIdx` maps to the visual column index (including the row-number column if present).
+ */
+export declare function sortableHeaderAttrs(colIdx: number, sortable: boolean): string;
+/**
+ * Generate `data-sort="..."` for a cell so numeric sort doesn't depend on the
+ * rendered text (which may be formatted, contain SVG sparklines, etc.).
+ */
+export declare function cellSortAttr(value: unknown): string;
+/**
+ * Build the filter toolbar (global search input when `filter: true`).
+ */
+export interface TableChrome {
+    toolbarHtml: string;
+}
+export declare function buildTableChrome(tableId: string, interactivity: TableInteractivity, colors: {
+    text: string;
+    textSecondary: string;
+    border: string;
+    background: string;
+}): TableChrome;
+/**
+ * Per-table init call. Invoked after the HTML is in the DOM.
+ */
+export declare function tableInitCall(tableId: string): string;
+/**
+ * Shared JS that defines `window.mvizTableInit`. Include once per output document.
+ * Responsible for sort clicks and the global filter input.
+ */
+export declare function sharedTableScript(): string;
+/**
+ * Shared CSS for sort indicators. Appended once per standalone document or
+ * injected once into dashboard mode alongside the shared script.
+ */
+export declare function sharedTableCss(): string;
+//# sourceMappingURL=table-interactivity.d.ts.map