mviz 1.6.4 → 1.6.7

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, col.fmt) : '';
             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/chart-helpers.d.ts

@@ -1,10 +1,14 @@
 /**
- * Shared helpers for scatter-family charts (scatter, bubble).
+ * Shared helpers for chart builders.
  *
- * Consolidates series-grouping, label config, and legend patterns
- * that were duplicated across scatter.ts and bubble.ts.
+ * Consolidates patterns that were duplicated across multiple chart builders:
+ * - scatter-family series grouping/labels (scatter, bubble)
+ * - value-axis format context (bar, line, area, combo)
+ * - x-axis label config (line, area, combo, bar)
+ * - yMin/yMax application (bar, line, area, combo)
+ * - multi-series legend (bar, area, combo)
  */
-import type { DataPoint, ThemeColors } from '../types.js';
+import type { ChartSpec, CurrencyConfig, DataPoint, FormatType, ThemeColors, AxisType } from '../types.js';
 /**
  * Build ECharts label config for persistent point labels.
  * @param labelIndex - Index of the label value in the point array
@@ -15,7 +19,57 @@ export declare function buildPointLabelConfig(labelIndex: number, colors: ThemeC
  */
 export declare function groupDataBySeries<T>(data: DataPoint[], seriesField: string, buildPoint: (d: DataPoint) => T): Map<string, T[]>;
 /**
- * Build ECharts legend config for multi-series charts.
+ * Build ECharts legend config for scatter-style multi-series charts.
+ * Uses small text and no item-width override.
  */
 export declare function buildSeriesLegend(legendData: string[], colors: ThemeColors): Record<string, unknown>;
+/**
+ * Build ECharts legend config for bar/area/combo style charts.
+ * Uses narrow line-style swatches matching the rest of the chart palette.
+ */
+export declare function buildMultiSeriesLegend(legendData: string[], colors: ThemeColors): Record<string, unknown>;
+/**
+ * Resolved format context for a chart's value axis.
+ *
+ * Wraps the recurring (format, currency, pctMultiply, formatter) tuple
+ * so chart builders don't have to re-derive each piece individually.
+ */
+export interface ValueAxisFormatContext {
+    valueFormat: FormatType;
+    currency: CurrencyConfig;
+    pctMultiply: boolean;
+    axisFormatter: {
+        _js_: string;
+    } | null;
+    labelFormatter?: {
+        _js_: string;
+    } | null;
+}
+export interface BuildValueAxisFormatContextOptions {
+    /** Override the inferred format (e.g. combo's secondaryFormat). */
+    formatOverride?: FormatType;
+    /** Also build a label formatter (used by bar). */
+    withLabelFormatter?: boolean;
+}
+/**
+ * Resolve format/currency/pctMultiply and produce axis (and optionally label)
+ * formatters for a chart's value axis.
+ *
+ * Used by bar, line, area, and combo. Combo calls this twice (once per axis).
+ */
+export declare function buildValueAxisFormatContext(spec: ChartSpec, data: DataPoint[], yKeys: string[], opts?: BuildValueAxisFormatContextOptions): ValueAxisFormatContext;
+/**
+ * Build an ECharts xAxis label config based on the resolved axis type.
+ *
+ * - `category`: 45° rotation with truncation for long labels
+ * - `time`:     month-day formatter ("Jan 5")
+ * - `value`:    just hideOverlap
+ */
+export declare function buildXAxisLabelConfig(xAxisType: AxisType): Record<string, unknown>;
+/**
+ * Apply yMin/yMax from a spec onto a value-axis object in place.
+ * The caller passes the right axis object (xAxis for horizontal bars,
+ * yAxis or yAxis[0] for everything else).
+ */
+export declare function applyValueAxisRange(axisObj: Record<string, unknown>, spec: ChartSpec): void;
 //# sourceMappingURL=chart-helpers.d.ts.map

package/dist/core/chart-helpers.js

@@ -1,10 +1,15 @@
 /**
- * Shared helpers for scatter-family charts (scatter, bubble).
+ * Shared helpers for chart builders.
  *
- * Consolidates series-grouping, label config, and legend patterns
- * that were duplicated across scatter.ts and bubble.ts.
+ * Consolidates patterns that were duplicated across multiple chart builders:
+ * - scatter-family series grouping/labels (scatter, bubble)
+ * - value-axis format context (bar, line, area, combo)
+ * - x-axis label config (line, area, combo, bar)
+ * - yMin/yMax application (bar, line, area, combo)
+ * - multi-series legend (bar, area, combo)
  */
-import { FONT_SIZE_TINY } from './themes.js';
+import { FONT_SIZE_TINY, FONT_SIZE_XXS, LEGEND_ITEM_WIDTH, LEGEND_ITEM_HEIGHT, LEGEND_ITEM_GAP, } from './themes.js';
+import { inferFormat, resolveCurrency, shouldPctMultiply, collectNumericFieldValues, getAxisFormatterJs, getLabelFormatterJs, } from './formatting.js';
 /**
  * Build ECharts label config for persistent point labels.
  * @param labelIndex - Index of the label value in the point array
@@ -33,7 +38,8 @@ export function groupDataBySeries(data, seriesField, buildPoint) {
     return groups;
 }
 /**
- * Build ECharts legend config for multi-series charts.
+ * Build ECharts legend config for scatter-style multi-series charts.
+ * Uses small text and no item-width override.
  */
 export function buildSeriesLegend(legendData, colors) {
     return {
@@ -43,4 +49,77 @@ export function buildSeriesLegend(legendData, colors) {
         textStyle: { color: colors.textSecondary, fontSize: FONT_SIZE_TINY },
     };
 }
+/**
+ * Build ECharts legend config for bar/area/combo style charts.
+ * Uses narrow line-style swatches matching the rest of the chart palette.
+ */
+export function buildMultiSeriesLegend(legendData, colors) {
+    return {
+        data: legendData,
+        top: 0,
+        textStyle: { color: colors.textSecondary, fontSize: FONT_SIZE_XXS },
+        itemWidth: LEGEND_ITEM_WIDTH,
+        itemHeight: LEGEND_ITEM_HEIGHT,
+        itemGap: LEGEND_ITEM_GAP,
+    };
+}
+/**
+ * Resolve format/currency/pctMultiply and produce axis (and optionally label)
+ * formatters for a chart's value axis.
+ *
+ * Used by bar, line, area, and combo. Combo calls this twice (once per axis).
+ */
+export function buildValueAxisFormatContext(spec, data, yKeys, opts = {}) {
+    const firstYKey = yKeys[0] ?? 'value';
+    const sampleValue = data.length > 0 && data[0] ? data[0][firstYKey] ?? 0 : 0;
+    const valueFormat = opts.formatOverride ?? spec.format ?? inferFormat(firstYKey, sampleValue);
+    const currency = resolveCurrency(spec.currency);
+    const pctMultiply = shouldPctMultiply(valueFormat, collectNumericFieldValues(data, yKeys));
+    const axisFormatter = getAxisFormatterJs(valueFormat, currency.symbol, currency.locale, pctMultiply);
+    const ctx = { valueFormat, currency, pctMultiply, axisFormatter };
+    if (opts.withLabelFormatter) {
+        ctx.labelFormatter = getLabelFormatterJs(valueFormat, currency.symbol, currency.locale, pctMultiply);
+    }
+    return ctx;
+}
+/**
+ * Month-day formatter used for time-axis labels (e.g. "Jan 5").
+ * Extracted to a constant so all chart builders share the same JS source.
+ */
+const TIME_AXIS_MONTH_DAY_FORMATTER = {
+    _js_: `function(value) {
+            var d = new Date(value);
+            var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
+            return months[d.getMonth()] + ' ' + d.getDate();
+          }`,
+};
+/**
+ * Build an ECharts xAxis label config based on the resolved axis type.
+ *
+ * - `category`: 45° rotation with truncation for long labels
+ * - `time`:     month-day formatter ("Jan 5")
+ * - `value`:    just hideOverlap
+ */
+export function buildXAxisLabelConfig(xAxisType) {
+    if (xAxisType === 'category') {
+        return { interval: 0, rotate: 45, overflow: 'truncate', ellipsis: '...', width: 100 };
+    }
+    if (xAxisType === 'time') {
+        return { hideOverlap: true, formatter: TIME_AXIS_MONTH_DAY_FORMATTER };
+    }
+    return { hideOverlap: true };
+}
+/**
+ * Apply yMin/yMax from a spec onto a value-axis object in place.
+ * The caller passes the right axis object (xAxis for horizontal bars,
+ * yAxis or yAxis[0] for everything else).
+ */
+export function applyValueAxisRange(axisObj, spec) {
+    if (spec.yMin !== undefined) {
+        axisObj.min = spec.yMin;
+    }
+    if (spec.yMax !== undefined) {
+        axisObj.max = spec.yMax;
+    }
+}
 //# sourceMappingURL=chart-helpers.js.map

package/dist/core/formatting.d.ts

@@ -21,8 +21,65 @@ 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;
+/**
+ * Convert a cell value to a numeric (or string) sort key based on the
+ * declared column format. The result is what the table emits as
+ * `data-sort` so the client-side compare always sees comparable values.
+ *
+ * - `date` → epoch ms (accepts Date, ISO string, or numeric ms)
+ * - `duration` → total seconds (accepts number-of-seconds or `1m7s` style)
+ * - currency / pct / num / auto → underlying numeric value
+ *
+ * Returns null when the value can't be coerced for the declared format —
+ * the caller falls back to its untyped heuristic chain.
+ */
+export declare function formatSortKey(value: unknown, format?: FormatType): number | string | null;
+/**
+ * Parse a duration string like `"10s"`, `"1m7s"`, `"25m39s"`, `"1h2m3s"`
+ * into total seconds. Returns null when the input doesn't match.
+ * Exported for the untyped fallback path in `cellSortAttr`.
+ *
+ * When `requireSeconds` is true, only strings that contain an `s` segment
+ * match — bare `5m` or `1h` are rejected. The untyped fallback uses this
+ * stricter form because a bare magnitude like `5m` is ambiguous (5 minutes
+ * or 5 million?); the lenient form is for columns that explicitly declare
+ * `fmt: "duration"`.
+ */
+export declare function parseDurationString(s: string, options?: {
+    requireSeconds?: boolean;
+}): number | null;
+/**
+ * Parse an ISO-8601 date string (`YYYY-MM-DD` with optional time/timezone)
+ * into epoch ms. Returns null for non-ISO strings so they fall back to
+ * locale sort instead of mis-parsing through `Date.parse`.
+ */
+export declare function parseIsoDateString(s: string): number | null;
+/**
+ * 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 +107,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 +122,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