mviz 1.6.3 → 1.6.6

package/dist/components/table-interactivity.js

@@ -0,0 +1,183 @@
+/**
+ * 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.
+ */
+/**
+ * Read sortable/filter options from a spec. Sort defaults ON, filter defaults OFF.
+ */
+export function parseTableInteractivity(spec) {
+    return {
+        sortable: spec.sortable !== false,
+        filter: spec.filter === true,
+    };
+}
+/**
+ * Generate an HTML attribute string for a sortable `<th>`.
+ * `colIdx` maps to the visual column index (including the row-number column if present).
+ */
+export function sortableHeaderAttrs(colIdx, sortable) {
+    if (!sortable)
+        return '';
+    return ` class="sortable" data-col="${colIdx}"`;
+}
+/**
+ * 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 function cellSortAttr(value) {
+    if (value === null || value === undefined)
+        return '';
+    if (typeof value === 'number' && !isNaN(value)) {
+        return ` data-sort="${value}"`;
+    }
+    if (typeof value === 'string') {
+        const n = parseFloat(value);
+        if (!isNaN(n) && String(n) === value.trim()) {
+            return ` data-sort="${n}"`;
+        }
+        return ` data-sort="${escapeAttr(value)}"`;
+    }
+    // Objects/arrays (e.g., sparkline data) are not sortable; omit the attribute.
+    return '';
+}
+function escapeAttr(s) {
+    return s.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;');
+}
+export function buildTableChrome(tableId, interactivity, colors) {
+    if (!interactivity.filter) {
+        return { toolbarHtml: '' };
+    }
+    return {
+        toolbarHtml: `<div class="mviz-table-toolbar" style="margin-bottom: 6px;">` +
+            `<input type="search" class="mviz-filter-global" data-table="${tableId}" placeholder="Filter by any value…" ` +
+            `style="font-family: inherit; font-size: 11px; padding: 4px 8px; width: 240px; max-width: 100%; ` +
+            `border: 1px solid ${colors.border}; border-radius: 3px; background: ${colors.background}; color: ${colors.text};" />` +
+            `</div>`,
+    };
+}
+/**
+ * Per-table init call. Invoked after the HTML is in the DOM.
+ */
+export function tableInitCall(tableId) {
+    return `if (window.mvizTableInit) window.mvizTableInit(${JSON.stringify(tableId)});`;
+}
+/**
+ * Shared JS that defines `window.mvizTableInit`. Include once per output document.
+ * Responsible for sort clicks and the global filter input.
+ */
+export function sharedTableScript() {
+    return `(function() {
+  if (window.mvizTableInit) return;
+  function compareCells(a, b) {
+    var an = parseFloat(a), bn = parseFloat(b);
+    if (!isNaN(an) && !isNaN(bn)) return an - bn;
+    return String(a).localeCompare(String(b));
+  }
+  function getSortKey(cell) {
+    var v = cell.getAttribute('data-sort');
+    return v != null ? v : cell.textContent.trim();
+  }
+  window.mvizTableInit = function(tableId) {
+    var table = document.getElementById(tableId);
+    if (!table) return;
+    var thead = table.tHead;
+    var tbody = table.tBodies[0];
+    if (!thead || !tbody) return;
+    var origRows = Array.prototype.slice.call(tbody.rows);
+    var visibility = {};
+    origRows.forEach(function(r, i) { visibility[i] = true; });
+
+    function applyVisibility() {
+      origRows.forEach(function(r, i) { r.style.display = visibility[i] ? '' : 'none'; });
+    }
+
+    // ---- Sort ----
+    // Shared active sort state (held at the table level, not per-header) so that
+    // clicking header A, then B, then A again always starts A at ascending. A
+    // per-header closure variable would resume A from its previous state even
+    // though the indicator was cleared, producing a confusing cycle.
+    var sortableHeaders = thead.querySelectorAll('th.sortable');
+    var activeTh = null;
+    var activeState = 0; // 0 none, 1 asc, -1 desc
+    sortableHeaders.forEach(function(th) {
+      th.style.cursor = 'pointer';
+      th.style.userSelect = 'none';
+      th.addEventListener('click', function() {
+        var colIdx = parseInt(th.getAttribute('data-col'), 10);
+        if (isNaN(colIdx)) return;
+        if (activeTh === th) {
+          // Same column clicked again — cycle asc → desc → none.
+          activeState = activeState === 1 ? -1 : activeState === -1 ? 0 : 1;
+        } else {
+          // New column — reset the old one, start new one at ascending.
+          if (activeTh) {
+            activeTh.removeAttribute('data-sort-dir');
+            var prevInd = activeTh.querySelector('.mviz-sort-ind');
+            if (prevInd) prevInd.textContent = '';
+          }
+          activeTh = th;
+          activeState = 1;
+        }
+        var ind = th.querySelector('.mviz-sort-ind');
+        if (activeState === 0) {
+          th.removeAttribute('data-sort-dir');
+          if (ind) ind.textContent = '';
+          activeTh = null;
+          origRows.forEach(function(r) { tbody.appendChild(r); });
+          applyVisibility();
+          return;
+        }
+        th.setAttribute('data-sort-dir', activeState === 1 ? 'asc' : 'desc');
+        if (ind) ind.textContent = activeState === 1 ? '▲' : '▼';
+        var sorted = origRows.slice().sort(function(a, b) {
+          var av = getSortKey(a.cells[colIdx]);
+          var bv = getSortKey(b.cells[colIdx]);
+          var cmp = compareCells(av, bv);
+          return activeState === 1 ? cmp : -cmp;
+        });
+        sorted.forEach(function(r) { tbody.appendChild(r); });
+        applyVisibility();
+      });
+    });
+
+    // ---- Global filter ----
+    var container = table.parentElement;
+    var globalInput = container && container.querySelector('.mviz-filter-global[data-table="' + tableId + '"]');
+    if (globalInput) {
+      globalInput.addEventListener('input', function() {
+        var q = globalInput.value.toLowerCase();
+        origRows.forEach(function(r, i) {
+          visibility[i] = !q || r.textContent.toLowerCase().indexOf(q) !== -1;
+        });
+        applyVisibility();
+      });
+    }
+  };
+})();`;
+}
+/**
+ * Shared CSS for sort indicators. Appended once per standalone document or
+ * injected once into dashboard mode alongside the shared script.
+ */
+export function sharedTableCss() {
+    return `th.sortable { cursor: pointer; }
+th.sortable[data-sort-dir] { color: inherit; }
+/*
+ * Reserve the arrow's width always so adding ▲/▼ on sort doesn't widen the
+ * column and push the rest of the header row around.
+ */
+.mviz-sort-ind {
+  display: inline-block;
+  min-width: 0.9em;
+  margin-left: 2px;
+  font-size: 9px;
+  opacity: 0.7;
+  text-align: left;
+  white-space: nowrap;
+}`;
+}
+//# sourceMappingURL=table-interactivity.js.map

package/dist/components/table.d.ts

@@ -65,6 +65,11 @@ export declare function computeHeatmapRanges(columns: ColumnDef[], data: Record<
     min: number;
     max: number;
 }>;
+/**
+ * Compute per-column pctMultiply for pct-formatted columns. A column maps to `false` when
+ * its values are already in percent units (max |v| > 1); otherwise defaults to `true`.
+ */
+export declare function computePctMultiplyRanges(columns: ColumnDef[], data: Record<string, unknown>[]): Map<string, boolean>;
 /**
  * Compute min/max ranges for dumbbell sparkline columns
  */
@@ -81,7 +86,7 @@ export declare function formatCell(value: unknown, colDef: ColumnDef, themeColor
 }>, dumbbellRanges: Map<string, {
     min: number;
     max: number;
-}>, defaultHeatmapColors: string[], customPalette?: readonly string[], currency?: CurrencyConfig): CellResult;
+}>, defaultHeatmapColors: string[], customPalette?: readonly string[], currency?: CurrencyConfig, pctMultiplyByColumn?: Map<string, boolean>): CellResult;
 /**
  * Generate a styled data table
  */

package/dist/components/table.js

@@ -2,9 +2,10 @@
  * 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, resolveCurrency } from '../core/formatting.js';
+import { formatNumber, inferFormat, resolveCurrency, shouldPctMultiply } from '../core/formatting.js';
 import { calculateHeatmapColorWithContrast } from '../core/colors.js';
 import { registerComponent } from './registry.js';
+import { parseTableInteractivity, sortableHeaderAttrs, cellSortAttr, buildTableChrome, sharedTableScript, sharedTableCss, tableInitCall, } from './table-interactivity.js';
 /**
  * Extract raw value and style overrides from cell data
  */
@@ -269,6 +270,26 @@ export function computeHeatmapRanges(columns, data) {
     }
     return ranges;
 }
+/**
+ * Compute per-column pctMultiply for pct-formatted columns. A column maps to `false` when
+ * its values are already in percent units (max |v| > 1); otherwise defaults to `true`.
+ */
+export function computePctMultiplyRanges(columns, data) {
+    const map = new Map();
+    for (const col of columns) {
+        const fmt = col.fmt;
+        if (fmt !== 'pct' && fmt !== 'pct0' && fmt !== 'pct1')
+            continue;
+        const values = [];
+        for (const row of data) {
+            const { value: rawVal } = extractCellValue(row[col.id], col);
+            if (typeof rawVal === 'number')
+                values.push(rawVal);
+        }
+        map.set(col.id, shouldPctMultiply(fmt, values));
+    }
+    return map;
+}
 /**
  * Compute min/max ranges for dumbbell sparkline columns
  */
@@ -334,7 +355,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, currency) {
+export function formatCell(value, colDef, themeColors, heatmapRanges, dumbbellRanges, defaultHeatmapColors, customPalette, currency, pctMultiplyByColumn) {
     const colType = colDef.type;
     const colId = colDef.id;
     const palette = customPalette ?? PALETTE;
@@ -370,7 +391,8 @@ export function formatCell(value, colDef, themeColors, heatmapRanges, dumbbellRa
         formatted = rawValue;
     }
     else {
-        formatted = formatNumber(rawValue, fmt, false, currency);
+        const pctMultiply = pctMultiplyByColumn?.get(colId) ?? true;
+        formatted = formatNumber(rawValue, fmt, false, currency, pctMultiply);
     }
     // Apply bold/italic styling
     if (styles.bold) {
@@ -381,6 +403,7 @@ export function formatCell(value, colDef, themeColors, heatmapRanges, dumbbellRa
     }
     return { content: formatted, bgColor, textColor };
 }
+let tableIdCounter = 0;
 /**
  * Parse and validate table specification
  */
@@ -406,8 +429,11 @@ function parseTableConfig(spec) {
         stripeBg: colors.border + (theme === 'light' ? '30' : '40'),
         heatmapRanges: computeHeatmapRanges(columns, data),
         dumbbellRanges: computeDumbbellRanges(columns, data),
+        pctMultiplyByColumn: computePctMultiplyRanges(columns, data),
         defaultHeatmapColors: getHeatmapColors(theme),
         currency: resolveCurrency(spec.currency),
+        interactivity: parseTableInteractivity(spec),
+        tableId: spec.id ?? `mviz-table-${++tableIdCounter}`,
     };
 }
 /**
@@ -426,17 +452,22 @@ function buildHeaderRow(cfg, inlineStyles = false) {
             cells.push('<th class="row-num">#</th>');
         }
     }
-    for (const col of cfg.columns) {
+    const visualOffset = cfg.showRowNumbers ? 1 : 0;
+    for (let i = 0; i < cfg.columns.length; i++) {
+        const col = cfg.columns[i];
         const colTitle = col.title ?? col.id;
         const align = col.align ?? 'left';
+        const sortIdx = i + visualOffset;
+        const sortAttrs = sortableHeaderAttrs(sortIdx, cfg.interactivity.sortable);
+        const sortInd = cfg.interactivity.sortable ? '<span class="mviz-sort-ind"></span>' : '';
         if (inlineStyles) {
-            cells.push(`<th style="font-family: ${FONT_STACK}; font-size: 10px; font-weight: bold; ` +
+            cells.push(`<th${sortAttrs} style="font-family: ${FONT_STACK}; font-size: 10px; font-weight: bold; ` +
                 `color: ${cfg.colors.textSecondary}; text-transform: uppercase; ` +
                 `letter-spacing: 0.03em; padding: ${cfg.padding}; ` +
-                `border-bottom: 1px solid ${cfg.colors.text}; text-align: ${align};">${colTitle}</th>`);
+                `border-bottom: 1px solid ${cfg.colors.text}; text-align: ${align};">${colTitle}${sortInd}</th>`);
         }
         else {
-            cells.push(`<th style="text-align: ${align};">${colTitle}</th>`);
+            cells.push(`<th${sortAttrs} style="text-align: ${align};">${colTitle}${sortInd}</th>`);
         }
     }
     return `<tr>${cells.join('')}</tr>`;
@@ -464,18 +495,21 @@ 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, undefined, cfg.currency);
+            const cellResult = formatCell(value, col, cfg.colors, cfg.heatmapRanges, cfg.dumbbellRanges, cfg.defaultHeatmapColors, undefined, cfg.currency, cfg.pctMultiplyByColumn);
+            // Unwrap `{value, bold, italic}` overrides so numeric sort sees the real value.
+            const sortRaw = extractCellValue(value, col).value;
+            const sortAttr = cfg.interactivity.sortable ? cellSortAttr(sortRaw) : '';
             if (inlineStyles) {
                 const border = isLast ? `border-bottom: 1px solid ${cfg.colors.text};` : '';
                 const cellBg = cellResult.bgColor ?? rowBg;
                 const cellText = cellResult.textColor ?? cfg.colors.text;
-                cells.push(`<td style="padding: ${cfg.padding}; color: ${cellText}; ` +
+                cells.push(`<td${sortAttr} style="padding: ${cfg.padding}; color: ${cellText}; ` +
                     `${border} text-align: ${align}; background: ${cellBg};">${cellResult.content}</td>`);
             }
             else {
                 const bgStyle = cellResult.bgColor ? ` background-color: ${cellResult.bgColor};` : '';
                 const textStyle = cellResult.textColor ? ` color: ${cellResult.textColor};` : '';
-                cells.push(`<td style="text-align: ${align};${bgStyle}${textStyle}">${cellResult.content}</td>`);
+                cells.push(`<td${sortAttr} style="text-align: ${align};${bgStyle}${textStyle}">${cellResult.content}</td>`);
             }
         }
         if (inlineStyles) {
@@ -556,9 +590,11 @@ function renderEmbeddedTable(cfg) {
     const tableClass = 'data-table' + (cfg.striped ? ' table-striped' : '') + (cfg.compact ? ' table-compact' : '');
     const headerRow = buildHeaderRow(cfg, true);
     const dataRows = buildDataRows(cfg, true);
+    const chrome = buildTableChrome(cfg.tableId, cfg.interactivity, cfg.colors);
     return `<div style="background: ${cfg.colors.background}; font-family: ${FONT_STACK};">
   ${titleHtml}
-  <table class="${tableClass}" style="width: 100%; border-collapse: collapse; font-size: 12px;">
+  ${chrome.toolbarHtml}
+  <table id="${cfg.tableId}" class="${tableClass}" style="width: 100%; border-collapse: collapse; font-size: 12px;">
     <thead>${headerRow}</thead>
     <tbody>${dataRows.join('')}</tbody>
   </table>
@@ -572,6 +608,7 @@ function renderStandaloneTable(cfg) {
     const tableClass = 'data-table' + (cfg.striped ? ' table-striped' : '') + (cfg.compact ? ' table-compact' : '');
     const headerRow = buildHeaderRow(cfg, false);
     const dataRows = buildDataRows(cfg, false);
+    const chrome = buildTableChrome(cfg.tableId, cfg.interactivity, cfg.colors);
     return `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -579,18 +616,22 @@ function renderStandaloneTable(cfg) {
   <title>${cfg.title}</title>
   <style>
     ${generateTableCss(cfg)}
+    ${sharedTableCss()}
   </style>
 </head>
 <body>
   <div class="container">
     <h2>${titleUpper}</h2>
-    <table class="${tableClass}">
+    ${chrome.toolbarHtml}
+    <table id="${cfg.tableId}" class="${tableClass}">
       <thead>${headerRow}</thead>
       <tbody>${dataRows.join('')}</tbody>
     </table>
   </div>
   <script>
     ${generateSparklineScript()}
+    ${sharedTableScript()}
+    ${tableInitCall(cfg.tableId)}
   </script>
 </body>
 </html>`;

package/dist/core/export.js

@@ -37,7 +37,7 @@ export function generateExportCss() {
       box-shadow: 0 2px 8px rgba(0,0,0,0.18);
       padding: 4px 0;
       min-width: 200px;
-      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+      font-family: var(--font-family, 'Helvetica Neue', Helvetica, Arial, sans-serif);
       font-size: 12px;
       color: ${COLORS.TEXT_DARK};
     }
@@ -136,9 +136,14 @@ export function generateExportJs() {
         return { div: tmpDiv, chart: tmpChart };
       }
 
+      function getThemeFont() {
+        var fontFamily = getComputedStyle(document.body).fontFamily;
+        return fontFamily || '"Helvetica Neue", Helvetica, Arial, sans-serif';
+      }
+
       function drawTitle(ctx, title, pixelRatio) {
         ctx.fillStyle = isDarkTheme() ? CFG.TEXT_DARK : CFG.TEXT_LIGHT;
-        ctx.font = 'bold ' + Math.round(CFG.TITLE_FONT_SIZE * pixelRatio) + 'px "Helvetica Neue", Helvetica, Arial, sans-serif';
+        ctx.font = 'bold ' + Math.round(CFG.TITLE_FONT_SIZE * pixelRatio) + 'px ' + getThemeFont();
         ctx.textAlign = 'left';
         ctx.textBaseline = 'top';
         ctx.fillText(

package/dist/core/formatting.d.ts

@@ -21,8 +21,32 @@ export declare function localeFixed(value: number, decimals: number, locale: str
  * Format a number according to the specified format type
  * @param showSign - If true, prefix positive numbers with +
  * @param currency - Optional currency config for currency formats (defaults to USD)
+ * @param pctMultiply - For pct formats: multiply the value by 100 before formatting.
+ *   Default true. Set false when the caller has already determined that the series
+ *   values are in percentage units (via detectPctMultiply).
  */
-export declare function formatNumber(value: number | null | undefined, format?: FormatType, showSign?: boolean, currency?: CurrencyConfig): string;
+export declare function formatNumber(value: number | null | undefined, format?: FormatType, showSign?: boolean, currency?: CurrencyConfig, pctMultiply?: boolean): string;
+/**
+ * Detect whether a series of values needs to be multiplied by 100 for percent formatting.
+ * Returns true when the series looks fractional (max |v| <= 1). Returns false when any
+ * value exceeds 1, indicating the series is already in percentage units (e.g., [15, 22, 38]).
+ *
+ * Empty / all-null series default to true (fractional), matching the legacy behavior.
+ */
+export declare function detectPctMultiply(values: Array<number | null | undefined>): boolean;
+/**
+ * Series-aware pctMultiply for a chart/table column.
+ *
+ * For non-pct formats, always returns true (no effect — the flag is unused for those).
+ * For pct formats, returns false when the series contains a value > 1, so callers can
+ * format already-percent data like [15, 22, 38] as 15%, 22%, 38% instead of 1500% etc.
+ */
+export declare function shouldPctMultiply(format: FormatType | null | undefined, values: Array<number | null | undefined>): boolean;
+/**
+ * Pull numeric values out of a data array for one or more field names.
+ * Used by charts to sample a y-series for pct auto-detection.
+ */
+export declare function collectNumericFieldValues(data: Array<Record<string, unknown>> | undefined, fields: string[]): number[];
 /**
  * Infer format type from field name and sample value
  */
@@ -50,14 +74,14 @@ export declare function parseNumericString(value: string): number | string;
  * @param currencySymbol - Symbol to use for currency formats (defaults to '$')
  * @param locale - Locale for number formatting (defaults to 'en-US')
  */
-export declare function formatValue(fmt: FormatType | null, currencySymbol?: string, locale?: string): string;
+export declare function formatValue(fmt: FormatType | null, currencySymbol?: string, locale?: string, pctMultiply?: boolean): string;
 /**
  * Generate an ECharts label formatter function based on format type.
  * Returns a dict with _js_ key containing the formatter function.
  * @param currencySymbol - Symbol to use for currency formats (defaults to '$')
  * @param locale - Locale for number formatting (defaults to 'en-US')
  */
-export declare function getLabelFormatterJs(fmt: FormatType | null | undefined, currencySymbol?: string, locale?: string): {
+export declare function getLabelFormatterJs(fmt: FormatType | null | undefined, currencySymbol?: string, locale?: string, pctMultiply?: boolean): {
     _js_: string;
 } | null;
 /**
@@ -65,7 +89,7 @@ export declare function getLabelFormatterJs(fmt: FormatType | null | undefined,
  * @param currencySymbol - Symbol to use for currency formats (defaults to '$')
  * @param locale - Locale for number formatting (defaults to 'en-US')
  */
-export declare function getAxisFormatterJs(fmt: FormatType | null | undefined, currencySymbol?: string, locale?: string): {
+export declare function getAxisFormatterJs(fmt: FormatType | null | undefined, currencySymbol?: string, locale?: string, pctMultiply?: boolean): {
     _js_: string;
 } | null;
 //# sourceMappingURL=formatting.d.ts.map

package/dist/core/formatting.js

@@ -40,8 +40,11 @@ export function localeFixed(value, decimals, locale) {
  * Format a number according to the specified format type
  * @param showSign - If true, prefix positive numbers with +
  * @param currency - Optional currency config for currency formats (defaults to USD)
+ * @param pctMultiply - For pct formats: multiply the value by 100 before formatting.
+ *   Default true. Set false when the caller has already determined that the series
+ *   values are in percentage units (via detectPctMultiply).
  */
-export function formatNumber(value, format, showSign = false, currency) {
+export function formatNumber(value, format, showSign = false, currency, pctMultiply = true) {
     if (value === null || value === undefined || isNaN(value)) {
         return '';
     }
@@ -69,10 +72,10 @@ export function formatNumber(value, format, showSign = false, currency) {
             break;
         case 'pct':
         case 'pct1':
-            result = formatPct1(value);
+            result = formatPct1(value, pctMultiply);
             break;
         case 'pct0':
-            result = formatPct0(value);
+            result = formatPct0(value, pctMultiply);
             break;
         case 'num0':
             result = formatNum0(value);
@@ -195,17 +198,70 @@ function formatCurrency0b(value, cur) {
     const formatted = cur.symbol + localeFixed(absValue / 1_000_000_000, 1, cur.locale) + 'b';
     return isNegative ? `(${formatted})` : formatted;
 }
+/**
+ * Detect whether a series of values needs to be multiplied by 100 for percent formatting.
+ * Returns true when the series looks fractional (max |v| <= 1). Returns false when any
+ * value exceeds 1, indicating the series is already in percentage units (e.g., [15, 22, 38]).
+ *
+ * Empty / all-null series default to true (fractional), matching the legacy behavior.
+ */
+export function detectPctMultiply(values) {
+    let max = 0;
+    let sawAny = false;
+    for (const v of values) {
+        if (v === null || v === undefined || isNaN(v))
+            continue;
+        sawAny = true;
+        const abs = Math.abs(v);
+        if (abs > max)
+            max = abs;
+    }
+    if (!sawAny)
+        return true;
+    return max <= 1;
+}
+/**
+ * Series-aware pctMultiply for a chart/table column.
+ *
+ * For non-pct formats, always returns true (no effect — the flag is unused for those).
+ * For pct formats, returns false when the series contains a value > 1, so callers can
+ * format already-percent data like [15, 22, 38] as 15%, 22%, 38% instead of 1500% etc.
+ */
+export function shouldPctMultiply(format, values) {
+    if (format !== 'pct' && format !== 'pct0' && format !== 'pct1')
+        return true;
+    return detectPctMultiply(values);
+}
+/**
+ * Pull numeric values out of a data array for one or more field names.
+ * Used by charts to sample a y-series for pct auto-detection.
+ */
+export function collectNumericFieldValues(data, fields) {
+    const out = [];
+    if (!data)
+        return out;
+    for (const row of data) {
+        for (const f of fields) {
+            const v = row[f];
+            if (typeof v === 'number' && !isNaN(v))
+                out.push(v);
+        }
+    }
+    return out;
+}
 /**
  * Format as percentage with 1 decimal: 15.0%
  */
-function formatPct1(value) {
-    return (value * 100).toFixed(1) + '%';
+function formatPct1(value, pctMultiply = true) {
+    const scaled = pctMultiply ? value * 100 : value;
+    return scaled.toFixed(1) + '%';
 }
 /**
  * Format as percentage with 0 decimals: 15%
  */
-function formatPct0(value) {
-    return Math.round(value * 100) + '%';
+function formatPct0(value, pctMultiply = true) {
+    const scaled = pctMultiply ? value * 100 : value;
+    return Math.round(scaled) + '%';
 }
 /**
  * Format as number with 0 decimals: 1,250
@@ -394,8 +450,9 @@ export function parseNumericString(value) {
  * @param currencySymbol - Symbol to use for currency formats (defaults to '$')
  * @param locale - Locale for number formatting (defaults to 'en-US')
  */
-export function formatValue(fmt, currencySymbol = '$', locale = 'en-US') {
+export function formatValue(fmt, currencySymbol = '$', locale = 'en-US', pctMultiply = true) {
     const locStr = JSON.stringify(locale);
+    const pctExpr = pctMultiply ? '(value * 100)' : 'value';
     switch (fmt) {
         case 'currency':
             return `'${currencySymbol}' + value.toLocaleString(${locStr})`;
@@ -407,9 +464,9 @@ export function formatValue(fmt, currencySymbol = '$', locale = 'en-US') {
             return `'${currencySymbol}' + (value/1000000000).toLocaleString(${locStr}, {minimumFractionDigits:1, maximumFractionDigits:1}) + 'b'`;
         case 'pct':
         case 'pct1':
-            return "(value * 100).toFixed(1) + '%'";
+            return `${pctExpr}.toFixed(1) + '%'`;
         case 'pct0':
-            return "(value * 100).toFixed(0) + '%'";
+            return `${pctExpr}.toFixed(0) + '%'`;
         case 'num0':
             return "value.toLocaleString()";
         case 'num1':
@@ -430,7 +487,7 @@ export function formatValue(fmt, currencySymbol = '$', locale = 'en-US') {
  * @param currencySymbol - Symbol to use for currency formats (defaults to '$')
  * @param locale - Locale for number formatting (defaults to 'en-US')
  */
-export function getLabelFormatterJs(fmt, currencySymbol = '$', locale = 'en-US') {
+export function getLabelFormatterJs(fmt, currencySymbol = '$', locale = 'en-US', pctMultiply = true) {
     if (fmt === null || fmt === undefined) {
         return null;
     }
@@ -473,7 +530,7 @@ export function getLabelFormatterJs(fmt, currencySymbol = '$', locale = 'en-US')
         };
     }
     // Get the formatting expression for specific formats
-    const expr = formatValue(fmt, currencySymbol, locale);
+    const expr = formatValue(fmt, currencySymbol, locale, pctMultiply);
     if (expr === 'value') {
         return null;
     }
@@ -488,7 +545,7 @@ export function getLabelFormatterJs(fmt, currencySymbol = '$', locale = 'en-US')
  * @param currencySymbol - Symbol to use for currency formats (defaults to '$')
  * @param locale - Locale for number formatting (defaults to 'en-US')
  */
-export function getAxisFormatterJs(fmt, currencySymbol = '$', locale = 'en-US') {
+export function getAxisFormatterJs(fmt, currencySymbol = '$', locale = 'en-US', pctMultiply = true) {
     if (fmt === null || fmt === undefined) {
         return null;
     }
@@ -526,19 +583,26 @@ export function getAxisFormatterJs(fmt, currencySymbol = '$', locale = 'en-US')
 }`,
         };
     }
-    // For percentage, multiply by 100
+    // For percentage, multiply by 100 unless the caller signals the series is already in
+    // percent units (pctMultiply === false).
     if (fmt === 'pct' || fmt === 'pct1') {
+        const body = pctMultiply
+            ? `return (value * 100).toFixed(1) + '%';`
+            : `return value.toFixed(1) + '%';`;
         return {
-            _js_: `function(value) { return (value * 100).toFixed(1) + '%'; }`,
+            _js_: `function(value) { ${body} }`,
         };
     }
     if (fmt === 'pct0') {
+        const body = pctMultiply
+            ? `return (value * 100).toFixed(0) + '%';`
+            : `return value.toFixed(0) + '%';`;
         return {
-            _js_: `function(value) { return (value * 100).toFixed(0) + '%'; }`,
+            _js_: `function(value) { ${body} }`,
         };
     }
     // Get the formatting expression for specific formats
-    const expr = formatValue(fmt, currencySymbol, locale);
+    const expr = formatValue(fmt, currencySymbol, locale, pctMultiply);
     if (expr === 'value') {
         return null;
     }

package/dist/core/lint-rules/registry.d.ts

@@ -4,7 +4,7 @@
  * Rules register themselves at module load time. The linter
  * calls executeLintRules() to run all applicable rules.
  */
-import type { LintContext, LintExecutionResult, LintRuleDefinition } from './types.js';
+import type { LintContext, LintExecutionMode, LintExecutionResult, LintRuleDefinition } from './types.js';
 /**
  * Register a lint rule in the global registry.
  * Called at module load time by rule files.
@@ -14,9 +14,11 @@ export declare function registerLintRule(definition: LintRuleDefinition): void;
  * Execute all applicable lint rules for a given context.
  *
  * @param context - The lint context with spec, type, data, etc.
+ * @param mode - 'generate' (default) skips rules flagged `lintOnly: true`;
+ *   'lint' runs every applicable rule.
  * @returns Execution result with errors, warnings, and validity
  */
-export declare function executeLintRules(context: LintContext): LintExecutionResult;
+export declare function executeLintRules(context: LintContext, mode?: LintExecutionMode): LintExecutionResult;
 /**
  * Get all registered rules (for testing/debugging)
  */