mviz 1.4.2

package/dist/charts/dumbbell.js

@@ -0,0 +1,368 @@
+/**
+ * Dumbbell chart generator
+ *
+ * Dumbbell plots show comparisons between two values for each category,
+ * connected by a line with directional color-coding.
+ */
+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 } from '../core/formatting.js';
+import { registerChart, registerOptions } from './registry.js';
+// Directional colors
+const POSITIVE_COLOR = COLORS.POSITIVE_GREEN;
+const NEGATIVE_COLOR = COLORS.ERROR_RED;
+const NEUTRAL_COLOR = '#888888';
+// Dark mode variants
+const POSITIVE_COLOR_DARK = '#6ed020';
+const NEGATIVE_COLOR_DARK = '#e05040';
+const NEUTRAL_COLOR_DARK = '#a0a0a0';
+/**
+ * Get a nice floor value for axis
+ */
+function niceFloor(val, step) {
+    return Math.floor(val / step) * step;
+}
+/**
+ * Get a nice ceiling value for axis
+ */
+function niceCeil(val, step) {
+    return Math.ceil(val / step) * step;
+}
+/**
+ * Get a nice step size based on data range
+ */
+function getNiceStep(dataRange) {
+    if (dataRange <= 0)
+        return 1;
+    const magnitude = Math.pow(10, Math.floor(Math.log10(dataRange)));
+    const normalized = dataRange / magnitude;
+    if (normalized <= 2)
+        return magnitude / 5;
+    if (normalized <= 5)
+        return magnitude / 2;
+    return magnitude;
+}
+/**
+ * Build ECharts options for a dumbbell plot with directional coloring
+ */
+export function buildDumbbellOptions(spec) {
+    const data = (spec.data ?? []);
+    const categoryField = spec.category ?? 'category';
+    const startField = spec.start ?? 'start';
+    const endField = spec.end ?? 'end';
+    const startLabel = spec.startLabel ?? startField.replace(/_/g, ' ');
+    const endLabel = spec.endLabel ?? endField.replace(/_/g, ' ');
+    const theme = (spec.theme ?? 'light');
+    const higherIsBetter = spec.higherIsBetter ?? true;
+    const showValues = spec.showValues ?? true;
+    const colors = getThemeColors(theme);
+    const isDark = theme === 'dark';
+    // Get directional colors based on theme
+    const positiveColor = isDark ? POSITIVE_COLOR_DARK : POSITIVE_COLOR;
+    const negativeColor = isDark ? NEGATIVE_COLOR_DARK : NEGATIVE_COLOR;
+    const neutralColor = isDark ? NEUTRAL_COLOR_DARK : NEUTRAL_COLOR;
+    // Extract data
+    const categories = data.map((d) => String(d[categoryField] ?? ''));
+    const startValues = data.map((d) => (d[startField] ?? 0));
+    const endValues = data.map((d) => (d[endField] ?? 0));
+    // Determine color for each row
+    const rowColors = startValues.map((s, i) => {
+        const e = endValues[i];
+        if (s === e)
+            return neutralColor;
+        if (higherIsBetter) {
+            return e > s ? positiveColor : negativeColor;
+        }
+        return e < s ? positiveColor : negativeColor;
+    });
+    // Infer value format
+    const sampleValue = startValues[0] ?? 0;
+    const valueFormat = spec.format ?? inferFormat(startField, sampleValue);
+    const isCurrency = valueFormat?.includes('usd');
+    const axisFormatter = getAxisFormatterJs(valueFormat);
+    // Calculate axis limits
+    const allValues = [...startValues, ...endValues];
+    let xMin = spec.xMin;
+    let xMax = spec.xMax;
+    if (allValues.length > 0) {
+        const minVal = Math.min(...allValues);
+        const maxVal = Math.max(...allValues);
+        const dataRange = maxVal !== minVal ? maxVal - minVal : Math.max(Math.abs(maxVal), 1);
+        const step = getNiceStep(dataRange);
+        const padding = Math.max(dataRange * 0.15, step);
+        const rawMin = minVal - padding;
+        const rawMax = maxVal + padding;
+        if (xMin === undefined) {
+            xMin = minVal >= 0 ? Math.max(0, niceFloor(rawMin, step)) : niceFloor(rawMin, step);
+        }
+        if (xMax === undefined) {
+            xMax = niceCeil(rawMax, step);
+        }
+    }
+    // Value formatter for labels inside dots
+    const valueFormatterJs = `function(params) {
+    var v = params.value[0];
+    var abs = Math.abs(v);
+    var isCurrency = ${isCurrency ? 'true' : 'false'};
+    var prefix = isCurrency ? '$' : '';
+    if (abs >= 1000000) {
+      var val = v / 1000000;
+      var formatted = isCurrency ? Math.round(val) : (Math.abs(val) >= 10 ? Math.round(val) : val.toFixed(1));
+      return prefix + formatted + 'm';
+    }
+    if (abs >= 1000) {
+      var val = v / 1000;
+      var formatted = isCurrency ? Math.round(val) : (Math.abs(val) >= 10 ? Math.round(val) : val.toFixed(1));
+      return prefix + formatted + 'k';
+    }
+    return isCurrency ? prefix + Math.round(v) : v;
+  }`;
+    // Build line data for custom series
+    const lineData = startValues.map((s, i) => {
+        const e = endValues[i];
+        const c = rowColors[i];
+        const isNoChange = s === e ? 1 : 0;
+        return [i, s, e, c, isNoChange];
+    });
+    // Custom render function for connecting lines with arrows
+    const renderItemJs = `function(params, api) {
+    var categoryIndex = api.value(0);
+    var start = api.value(1);
+    var end = api.value(2);
+    var color = api.value(3);
+    var isNoChange = api.value(4);
+    var startCoord = api.coord([start, categoryIndex]);
+    var endCoord = api.coord([end, categoryIndex]);
+
+    var dx = endCoord[0] - startCoord[0];
+    var absDx = Math.abs(dx);
+    var dotRadius = ${Math.floor(DUMBBELL_SYMBOL_SIZE / 2)};
+    var arrowSize = 5;
+    var arrowWidth = 3;
+
+    if (isNoChange || absDx < 1) {
+      return null;
+    }
+
+    var dotDiameter = dotRadius * 2;
+    if (absDx < dotDiameter) {
+      return null;
+    }
+
+    var lineStartX = startCoord[0] + (dx > 0 ? dotRadius : -dotRadius);
+    var lineEndX = endCoord[0] - (dx > 0 ? dotRadius : -dotRadius);
+    var lineClearance = Math.abs(lineEndX - lineStartX);
+
+    if (lineClearance < arrowSize + 2) {
+      return {
+        type: 'line',
+        shape: {
+          x1: lineStartX,
+          y1: startCoord[1],
+          x2: lineEndX,
+          y2: endCoord[1]
+        },
+        style: {
+          stroke: color,
+          lineWidth: 2
+        }
+      };
+    }
+
+    var arrowTipX = lineEndX;
+    var arrowBaseX = arrowTipX - (dx > 0 ? arrowSize : -arrowSize);
+
+    return {
+      type: 'group',
+      children: [
+        {
+          type: 'line',
+          shape: {
+            x1: lineStartX,
+            y1: startCoord[1],
+            x2: arrowBaseX,
+            y2: endCoord[1]
+          },
+          style: {
+            stroke: color,
+            lineWidth: 2
+          }
+        },
+        {
+          type: 'polygon',
+          shape: {
+            points: [
+              [arrowTipX, endCoord[1]],
+              [arrowBaseX, endCoord[1] - arrowWidth],
+              [arrowBaseX, endCoord[1] + arrowWidth]
+            ]
+          },
+          style: {
+            fill: color
+          }
+        }
+      ]
+    };
+  }`;
+    const series = [
+        // Connecting lines with arrows
+        {
+            name: 'range',
+            type: 'custom',
+            renderItem: { _js_: renderItemJs },
+            encode: { x: [1, 2], y: 0 },
+            data: lineData,
+            z: 1,
+        },
+    ];
+    // Start dots - outline style
+    const startData = startValues.map((v, i) => ({
+        value: [v, i],
+        itemStyle: {
+            color: colors.background,
+            borderColor: rowColors[i],
+            borderWidth: 2,
+            opacity: 1,
+        },
+        label: {
+            show: showValues,
+            position: 'inside',
+            fontSize: FONT_SIZE_TINY - 2,
+            fontWeight: 'bold',
+            color: rowColors[i],
+            formatter: { _js_: valueFormatterJs },
+        },
+    }));
+    series.push({
+        name: startLabel,
+        type: 'scatter',
+        data: startData,
+        symbolSize: DUMBBELL_SYMBOL_SIZE,
+        z: 10,
+    });
+    // End dots - filled style
+    const endData = endValues.map((v, i) => ({
+        value: [v, i],
+        itemStyle: {
+            color: rowColors[i],
+            opacity: 1,
+        },
+        label: {
+            show: showValues,
+            position: 'inside',
+            fontSize: FONT_SIZE_TINY - 2,
+            fontWeight: 'bold',
+            color: '#ffffff',
+            formatter: { _js_: valueFormatterJs },
+        },
+    }));
+    series.push({
+        name: endLabel,
+        type: 'scatter',
+        data: endData,
+        symbolSize: DUMBBELL_SYMBOL_SIZE,
+        z: 10,
+    });
+    // Tooltip formatter
+    const tooltipFormatterJs = `function(params) {
+    if (params.seriesName === 'range') return '';
+    var cat = ${JSON.stringify(categories)}[params.data.value ? params.data.value[1] : params.data[1]];
+    var val = params.data.value ? params.data.value[0] : params.data[0];
+    return '<strong>' + cat + '</strong><br/>' + params.seriesName + ': ' + val;
+  }`;
+    return {
+        backgroundColor: 'transparent',
+        animation: false,
+        tooltip: {
+            trigger: 'item',
+            backgroundColor: colors.paper,
+            borderColor: colors.border,
+            textStyle: { color: colors.text },
+            formatter: { _js_: tooltipFormatterJs },
+        },
+        legend: {
+            show: true,
+            data: [
+                {
+                    name: startLabel,
+                    icon: 'circle',
+                    itemStyle: {
+                        color: colors.background,
+                        borderColor: colors.textSecondary,
+                        borderWidth: 2,
+                    },
+                },
+                {
+                    name: endLabel,
+                    icon: 'circle',
+                    itemStyle: {
+                        color: colors.textSecondary,
+                    },
+                },
+            ],
+            bottom: 0,
+            textStyle: { color: colors.textSecondary, fontSize: FONT_SIZE_TINY },
+        },
+        grid: {
+            left: '3%',
+            right: '4%',
+            top: '3%',
+            bottom: '15%',
+            containLabel: true,
+        },
+        xAxis: {
+            type: 'value',
+            min: xMin,
+            max: xMax,
+            axisLine: { show: false },
+            axisTick: { show: false },
+            axisLabel: {
+                color: colors.textSecondary,
+                ...(axisFormatter && { formatter: axisFormatter }),
+            },
+            splitLine: { lineStyle: { color: colors.border, type: [2, 3], opacity: 0.6 } },
+        },
+        yAxis: {
+            type: 'category',
+            data: categories,
+            inverse: true,
+            axisLine: { show: false },
+            axisTick: { show: false },
+            axisLabel: {
+                color: colors.textSecondary,
+                rotate: 0,
+                interval: 0,
+            },
+        },
+        series,
+    };
+}
+/**
+ * Calculate minimum height for dumbbell chart based on number of rows
+ */
+function calculateDumbbellHeight(numRows, specHeight) {
+    // Each row needs symbol size plus small gap to prevent vertical overlap
+    // With 22px symbols, 4px gap gives minimal spacing without excessive whitespace
+    const rowHeight = DUMBBELL_SYMBOL_SIZE + 4; // symbol + small gap
+    const legendHeight = 40;
+    const gridPadding = 60; // top + bottom margins
+    const minHeight = (numRows * rowHeight) + legendHeight + gridPadding;
+    // Use spec height if provided and larger than minimum, otherwise use calculated minimum
+    if (typeof specHeight === 'number') {
+        return Math.max(specHeight, minHeight);
+    }
+    return Math.max(DEFAULT_CHART_HEIGHT, minHeight);
+}
+/**
+ * Generate a dumbbell chart
+ */
+function generateDumbbell(spec) {
+    const data = (spec.data ?? []);
+    const height = calculateDumbbellHeight(data.length, spec.height);
+    return wrapHtml('chart', buildDumbbellOptions(spec), '', '100%', height);
+}
+// Register the chart
+registerChart('dumbbell')(generateDumbbell);
+registerOptions('dumbbell')(buildDumbbellOptions);
+export { generateDumbbell };
+//# sourceMappingURL=dumbbell.js.map

package/dist/charts/dumbbell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dumbbell.js","sourceRoot":"","sources":["../../charts/dumbbell.ts"],"names":[],"mappings":"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"}

package/dist/charts/funnel.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Funnel chart generator
+ */
+import type { ChartSpec } from '../types.js';
+/**
+ * Build ECharts options for a funnel chart
+ */
+export declare function buildFunnelOptions(spec: ChartSpec): Record<string, unknown>;
+/**
+ * Generate a funnel chart
+ */
+declare function generateFunnel(spec: ChartSpec): string;
+export { generateFunnel };
+//# sourceMappingURL=funnel.d.ts.map

package/dist/charts/funnel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"funnel.d.ts","sourceRoot":"","sources":["../../charts/funnel.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAoB,MAAM,aAAa,CAAC;AAmE/D;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAsE3E;AAED;;GAEG;AACH,iBAAS,cAAc,CAAC,IAAI,EAAE,SAAS,GAAG,MAAM,CAG/C;AAMD,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/dist/charts/funnel.js

@@ -0,0 +1,145 @@
+/**
+ * Funnel chart generator
+ */
+import { FONT_SIZE_XXS, getThemeColors, getPalette } from '../core/themes.js';
+import { wrapHtml } from '../core/serializer.js';
+import { inferFormat } from '../core/formatting.js';
+import { registerChart, registerOptions } from './registry.js';
+/**
+ * Get JavaScript formatter for funnel chart labels/tooltips
+ */
+function getFunnelFormatterJs(fmt) {
+    // Smart auto-formatting based on magnitude
+    if (fmt === 'auto' || fmt === 'usd_auto' || fmt === null || fmt === undefined) {
+        const isCurrency = fmt === 'usd_auto' ? 'true' : 'false';
+        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 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);
+  }
+  var formatted = neg ? '(' + r + ')' : r;
+  return params.name + ': ' + formatted;
+}`,
+        };
+    }
+    // Specific format handlers
+    switch (fmt) {
+        case 'usd':
+            return { _js_: "function(params) { return params.name + ': $' + params.value.toLocaleString(); }" };
+        case 'usd0k':
+            return {
+                _js_: "function(params) { return params.name + ': $' + (params.value/1000).toFixed(0) + 'k'; }",
+            };
+        case 'pct':
+        case 'pct1':
+            return {
+                _js_: "function(params) { return params.name + ': ' + (params.value * 100).toFixed(1) + '%'; }",
+            };
+        case 'pct0':
+            return {
+                _js_: "function(params) { return params.name + ': ' + (params.value * 100).toFixed(0) + '%'; }",
+            };
+        case 'num0':
+            return { _js_: "function(params) { return params.name + ': ' + params.value.toLocaleString(); }" };
+        case 'num1':
+            return { _js_: "function(params) { return params.name + ': ' + params.value.toFixed(1); }" };
+        default:
+            return { _js_: "function(params) { return params.name + ': ' + params.value.toLocaleString(); }" };
+    }
+}
+/**
+ * Build ECharts options for a funnel chart
+ */
+export function buildFunnelOptions(spec) {
+    const data = (spec.data ?? []);
+    const valueField = spec.value ?? 'value';
+    const nameField = spec.name ?? 'name';
+    const theme = (spec.theme ?? 'light');
+    const colors = getThemeColors(theme);
+    const palette = getPalette(theme);
+    // Build funnel data
+    const funnelData = data.map((d) => ({
+        name: String(d[nameField] ?? ''),
+        value: (d[valueField] ?? 0),
+    }));
+    // Sort descending by value
+    funnelData.sort((a, b) => b.value - a.value);
+    // Assign colors
+    funnelData.forEach((item, i) => {
+        item.itemStyle = { color: palette[i % palette.length] };
+    });
+    // Infer format from value field name or use explicit format
+    const sampleValue = funnelData[0]?.value ?? 0;
+    const valueFormat = spec.format ?? inferFormat(valueField, sampleValue);
+    // Get JavaScript formatter
+    const formatter = getFunnelFormatterJs(valueFormat);
+    return {
+        backgroundColor: 'transparent',
+        animation: false,
+        tooltip: {
+            trigger: 'item',
+            backgroundColor: colors.paper,
+            borderColor: colors.border,
+            textStyle: { color: colors.text },
+            formatter,
+        },
+        series: [
+            {
+                type: 'funnel',
+                left: '12%',
+                width: '76%',
+                top: '8%',
+                bottom: '8%',
+                min: 0,
+                max: funnelData[0]?.value ?? 100,
+                minSize: '0%',
+                maxSize: '100%',
+                sort: 'descending',
+                gap: 2,
+                label: {
+                    show: true,
+                    position: 'inside',
+                    formatter,
+                    color: '#fff',
+                    fontSize: FONT_SIZE_XXS,
+                },
+                itemStyle: {
+                    borderWidth: 0,
+                },
+                emphasis: {
+                    disabled: true,
+                },
+                data: funnelData,
+            },
+        ],
+    };
+}
+/**
+ * Generate a funnel chart
+ */
+function generateFunnel(spec) {
+    const height = typeof spec.height === 'number' ? spec.height : 300;
+    return wrapHtml('chart', buildFunnelOptions(spec), '', '100%', height);
+}
+// Register the chart
+registerChart('funnel')(generateFunnel);
+registerOptions('funnel')(buildFunnelOptions);
+export { generateFunnel };
+//# sourceMappingURL=funnel.js.map

package/dist/charts/funnel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"funnel.js","sourceRoot":"","sources":["../../charts/funnel.ts"],"names":[],"mappings":"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"}

package/dist/charts/heatmap.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Heatmap chart generator
+ */
+import type { ChartSpec } from '../types.js';
+/**
+ * Build ECharts options for a heatmap
+ */
+export declare function buildHeatmapOptions(spec: ChartSpec): Record<string, unknown>;
+/**
+ * Generate a heatmap chart
+ */
+declare function generateHeatmap(spec: ChartSpec): string;
+export { generateHeatmap };
+//# sourceMappingURL=heatmap.d.ts.map

package/dist/charts/heatmap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"heatmap.d.ts","sourceRoot":"","sources":["../../charts/heatmap.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAgC,MAAM,aAAa,CAAC;AA+F3E;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAsG5E;AAED;;GAEG;AACH,iBAAS,eAAe,CAAC,IAAI,EAAE,SAAS,GAAG,MAAM,CAGhD;AAMD,OAAO,EAAE,eAAe,EAAE,CAAC"}