mviz 1.4.3 → 1.4.5

package/README.md

@@ -166,7 +166,7 @@ mviz is available as a Claude skill for use in Claude.ai, Claude Code, and the C
 Build the skill bundle:
 ```bash
 npm run build
-python3 build_skill.py -o mviz.skill
+python3 build_skill_compact.py -o mviz.skill
 ```
 
 ## License

package/dist/charts/area.js

@@ -5,6 +5,7 @@ import { FONT_SIZE_XXS, LEGEND_ITEM_WIDTH, LEGEND_ITEM_HEIGHT, LEGEND_ITEM_GAP,
 import { wrapHtml } from '../core/serializer.js';
 import { registerChart, registerOptions } from './registry.js';
 import { inferFormat, getAxisFormatterJs, inferAxisType } from '../core/formatting.js';
+import { validateTimeSeriesSorted, generateErrorHtml } from '../core/validation.js';
 /**
  * Build ECharts options for an area chart
  */
@@ -127,7 +128,15 @@ export function buildAreaOptions(spec) {
  * Generate an area chart
  */
 function generateAreaChart(spec) {
+    const data = (spec.data ?? []);
+    const x = spec.x ?? 'name';
+    const theme = (spec.theme ?? 'light');
     const height = typeof spec.height === 'number' ? spec.height : DEFAULT_CHART_HEIGHT;
+    // Validate time series data is sorted
+    const validation = validateTimeSeriesSorted(data, x);
+    if (!validation.isValid) {
+        return generateErrorHtml(validation.errorMessage, theme, '100%', height);
+    }
     return wrapHtml('chart', buildAreaOptions(spec), '', '100%', height);
 }
 // Register the chart

package/dist/charts/bar.js

@@ -5,6 +5,7 @@ import { BAR_MAX_WIDTH, LEGEND_ITEM_WIDTH, LEGEND_ITEM_HEIGHT, LEGEND_ITEM_GAP,
 import { wrapHtml } from '../core/serializer.js';
 import { registerChart, registerOptions } from './registry.js';
 import { inferFormat, getLabelFormatterJs, getAxisFormatterJs, inferAxisType } from '../core/formatting.js';
+import { validateTimeSeriesSorted, generateErrorHtml } from '../core/validation.js';
 /**
  * Build ECharts options for a bar chart
  */
@@ -181,7 +182,17 @@ export function buildBarOptions(spec) {
  * Generate a bar chart
  */
 function generateBarChart(spec) {
+    const data = (spec.data ?? []);
+    const x = spec.x ?? 'name';
+    const theme = (spec.theme ?? 'light');
     const height = typeof spec.height === 'number' ? spec.height : DEFAULT_CHART_HEIGHT;
+    // Validate time series data is sorted (only for non-horizontal bars)
+    if (!spec.horizontal) {
+        const validation = validateTimeSeriesSorted(data, x);
+        if (!validation.isValid) {
+            return generateErrorHtml(validation.errorMessage, theme, '100%', height);
+        }
+    }
     return wrapHtml('chart', buildBarOptions(spec), '', '100%', height);
 }
 // Register the chart

package/dist/charts/line.js

@@ -5,6 +5,7 @@ import { FONT_SIZE_TINY, DEFAULT_CHART_HEIGHT, getThemeColors, getPalette, } fro
 import { wrapHtml } from '../core/serializer.js';
 import { registerChart, registerOptions } from './registry.js';
 import { inferFormat, getAxisFormatterJs, inferAxisType } from '../core/formatting.js';
+import { validateTimeSeriesSorted, generateErrorHtml } from '../core/validation.js';
 /**
  * Build ECharts options for a line chart
  */
@@ -124,7 +125,15 @@ export function buildLineOptions(spec) {
  * Generate a line chart
  */
 function generateLineChart(spec) {
+    const data = (spec.data ?? []);
+    const x = spec.x ?? 'name';
+    const theme = (spec.theme ?? 'light');
     const height = typeof spec.height === 'number' ? spec.height : DEFAULT_CHART_HEIGHT;
+    // Validate time series data is sorted
+    const validation = validateTimeSeriesSorted(data, x);
+    if (!validation.isValid) {
+        return generateErrorHtml(validation.errorMessage, theme, '100%', height);
+    }
     return wrapHtml('chart', buildLineOptions(spec), '', '100%', height);
 }
 // Register the chart

package/dist/core/themes.d.ts

@@ -2,6 +2,7 @@
  * Theme definitions and utilities for mviz
  */
 import type { Theme, ThemeColors, ChartSpec } from '../types.js';
+export declare const ERROR_RED = "#bc1200";
 export declare const COLORS: {
     readonly PRIMARY_BLUE: "#0777b3";
     readonly SECONDARY_ORANGE: "#bd4e35";

package/dist/core/themes.js

@@ -1,6 +1,8 @@
 /**
  * Theme definitions and utilities for mviz
  */
+// Standalone color exports for direct use
+export const ERROR_RED = '#bc1200';
 // Color constants (mdsinabox theme)
 export const COLORS = {
     PRIMARY_BLUE: '#0777b3',

package/dist/core/validation.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Data validation utilities for mviz charts
+ */
+import type { DataPoint, Theme } from '../types.js';
+/**
+ * Result of time series validation
+ */
+export interface TimeSeriesValidation {
+    isValid: boolean;
+    errorMessage?: string;
+}
+/**
+ * Check if time series data is sorted in ascending order.
+ * Returns validation result with error message if unsorted.
+ */
+export declare function validateTimeSeriesSorted(data: DataPoint[], xField: string): TimeSeriesValidation;
+/**
+ * Generate an error HTML component to display instead of a chart
+ * when validation fails.
+ */
+export declare function generateErrorHtml(errorMessage: string, theme: Theme, width: string, height: number): string;
+//# sourceMappingURL=validation.d.ts.map

package/dist/core/validation.js

@@ -0,0 +1,120 @@
+/**
+ * Data validation utilities for mviz charts
+ */
+import { FONT_STACK, getThemeColors, ERROR_RED } from './themes.js';
+import { inferAxisType } from './formatting.js';
+/**
+ * Check if time series data is sorted in ascending order.
+ * Returns validation result with error message if unsorted.
+ */
+export function validateTimeSeriesSorted(data, xField) {
+    if (data.length < 2) {
+        return { isValid: true };
+    }
+    const xValues = data.map((d) => d[xField]);
+    const axisType = inferAxisType(xValues);
+    // Only validate if this is a time axis
+    if (axisType !== 'time') {
+        return { isValid: true };
+    }
+    // Convert values to timestamps for comparison
+    const timestamps = xValues.map((v) => {
+        if (typeof v === 'number')
+            return v;
+        if (typeof v === 'string') {
+            const parsed = Date.parse(v);
+            return isNaN(parsed) ? 0 : parsed;
+        }
+        if (v instanceof Date)
+            return v.getTime();
+        return 0;
+    });
+    // Check if sorted in ascending order
+    for (let i = 1; i < timestamps.length; i++) {
+        if (timestamps[i] < timestamps[i - 1]) {
+            return {
+                isValid: false,
+                errorMessage: `Time series axis is not sorted chronologically. Sort your data before charting.`,
+            };
+        }
+    }
+    return { isValid: true };
+}
+/**
+ * Generate an error HTML component to display instead of a chart
+ * when validation fails.
+ */
+export function generateErrorHtml(errorMessage, theme, width, height) {
+    const colors = getThemeColors(theme);
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <style>
+    * { box-sizing: border-box; }
+    html, body {
+      margin: 0;
+      padding: 0;
+      width: 100%;
+      height: 100%;
+      background-color: ${colors.background};
+      font-family: ${FONT_STACK};
+    }
+    .error-container {
+      width: ${width};
+      height: ${height}px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 24px;
+    }
+    .error-box {
+      border: 2px solid ${ERROR_RED};
+      border-radius: 8px;
+      padding: 20px 24px;
+      background-color: ${theme === 'light' ? '#fff5f5' : '#2d1f1f'};
+      max-width: 500px;
+    }
+    .error-title {
+      color: ${ERROR_RED};
+      font-size: 14px;
+      font-weight: 700;
+      margin: 0 0 8px 0;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .error-icon {
+      font-size: 18px;
+    }
+    .error-message {
+      color: ${colors.text};
+      font-size: 13px;
+      line-height: 1.5;
+      margin: 0;
+    }
+  </style>
+</head>
+<body>
+  <div class="error-container">
+    <div class="error-box">
+      <p class="error-title"><span class="error-icon">⚠</span> Chart Error</p>
+      <p class="error-message">${escapeHtml(errorMessage)}</p>
+    </div>
+  </div>
+</body>
+</html>`;
+}
+/**
+ * Escape HTML special characters
+ */
+function escapeHtml(text) {
+    return text
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+//# sourceMappingURL=validation.js.map

package/dist/layout/parser.js

@@ -11,6 +11,7 @@ import { parseCsv } from './csv.js';
 import { getOptionsBuilder } from '../charts/index.js';
 import { serializeOption } from '../core/serializer.js';
 import { formatNumber, inferFormat } from '../core/formatting.js';
+import { validateTimeSeriesSorted } from '../core/validation.js';
 import { COLORS, GRID_TOTAL_COLUMNS, DEFAULT_SIZES, autoSizeChart, getHeatmapColors, getThemeColors, ALERT_ICONS, } from '../core/themes.js';
 import { formatCell, computeHeatmapRanges, computeDumbbellRanges, } from '../components/table.js';
 // Height per row unit (compact for print) - must match Python's ROW_HEIGHT_PX
@@ -122,6 +123,30 @@ function renderEchartsComponent(compType, spec, chartId, colSpan, itemHeight, an
         return { html: null, script: null };
     }
     const chartHeight = itemHeight - (title ? 24 : 0);
+    // Validate time series data for line, bar (non-horizontal), and area charts
+    const timeSeriesTypes = ['line', 'area'];
+    const isBarNonHorizontal = compType === 'bar' && !spec.horizontal;
+    if (timeSeriesTypes.includes(compType) || isBarNonHorizontal) {
+        const data = (spec.data ?? []);
+        const xField = spec.x ?? 'name';
+        const validation = validateTimeSeriesSorted(data, xField);
+        if (!validation.isValid) {
+            const anchorAttr = anchorId ? ` id="${anchorId}"` : '';
+            const errorContent = `
+        <div style="border: 2px solid #bc1200; border-radius: 8px; padding: 20px 24px; background-color: #fff5f5; max-width: 500px; margin: auto;">
+          <p style="color: #bc1200; font-size: 14px; font-weight: 700; margin: 0 0 8px 0;">⚠ Chart Not Rendered</p>
+          <p style="color: #231f20; font-size: 13px; line-height: 1.5; margin: 0;">Time series axis is not sorted chronologically. Sort your data before charting.</p>
+        </div>`;
+            const html = `
+        <div class="grid-item"${anchorAttr} style="--col-span: ${colSpan}; grid-column: span ${colSpan};">
+          ${titleHtml}
+          <div style="width: 100%; height: ${chartHeight}px; display: flex; align-items: center; justify-content: center;">
+            ${errorContent}
+          </div>
+        </div>`;
+            return { html, script: null };
+        }
+    }
     // Generate light theme options
     const specLight = { ...spec, theme: 'light', height: chartHeight };
     const optionLight = builder(specLight);
@@ -785,9 +810,11 @@ export function parseMarkdownToDashboard(markdown, baseTheme = 'light', _baseDir
                     const builder = getOptionsBuilder(compType);
                     if (builder) {
                         const { html, script } = renderEchartsComponent(compType, spec, chartId, colSpan, itemHeight, anchorId);
-                        if (html && script) {
+                        if (html) {
                             rowItems.push(html);
-                            chartScripts.push(script);
+                            if (script) {
+                                chartScripts.push(script);
+                            }
                         }
                         else {
                             rowItems.push(`<div class="grid-item"><p>Error rendering ${compType}</p></div>`);

package/dist/layout/templates.js

@@ -55,6 +55,7 @@ export function generateDashboardCss() {
       margin: 0 auto;
       padding: 16px;
       position: relative;
+      overflow-x: hidden;
     }
     .title-row {
       display: flex;
@@ -144,6 +145,7 @@ export function generateDashboardCss() {
     @media (max-width: 480px) {
       .row { grid-template-columns: 1fr; }
       .row > * { grid-column: span 1; }
+      .grid-item { overflow-x: auto; -webkit-overflow-scrolling: touch; }
     }
     @media print {
       .dashboard { max-width: 100%; padding: 0; }
@@ -600,6 +602,7 @@ export function generateTestHarnessCss() {
       max-width: 720px;
       margin: 0 auto;
       padding: 16px;
+      overflow-x: hidden;
     }
     .red-line {
       width: 100%;
@@ -644,6 +647,7 @@ export function generateTestHarnessCss() {
     @media (max-width: 480px) {
       .row { grid-template-columns: 1fr; }
       .row > * { grid-column: span 1; }
+      .grid-item { overflow-x: auto; -webkit-overflow-scrolling: touch; }
     }
 
     /* Grid items */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mviz",
-  "version": "1.4.3",
+  "version": "1.4.5",
   "description": "Generate clean, data-focused charts and dashboards from compact JSON specs",
   "type": "module",
   "main": "./dist/index.js",