mviz 1.6.2 → 1.6.3

package/dist/core/export.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Client-side PNG export for ECharts charts.
+ *
+ * Generates JavaScript that adds a right-click context menu to each chart,
+ * allowing users to save high-resolution PNGs in three presets:
+ *   - Square:    1080 x 1080
+ *   - Portrait:  1080 x 1350  (4:5)
+ *   - Landscape: 1920 x 1080  (16:9)
+ *
+ * The chart reflows to fill the full target canvas, with the title
+ * drawn above. Text scales proportionally via pixelRatio.
+ */
+/**
+ * Return the CSS for the export context menu.
+ */
+export declare function generateExportCss(): string;
+/**
+ * Return the JavaScript that powers chart PNG export.
+ *
+ * Injected once into the page. Relies on `window.chartInstances`
+ * and `window.chartOptions` being populated by the renderer.
+ */
+export declare function generateExportJs(): string;
+//# sourceMappingURL=export.d.ts.map

package/dist/core/export.js

@@ -0,0 +1,257 @@
+/**
+ * Client-side PNG export for ECharts charts.
+ *
+ * Generates JavaScript that adds a right-click context menu to each chart,
+ * allowing users to save high-resolution PNGs in three presets:
+ *   - Square:    1080 x 1080
+ *   - Portrait:  1080 x 1350  (4:5)
+ *   - Landscape: 1920 x 1080  (16:9)
+ *
+ * The chart reflows to fill the full target canvas, with the title
+ * drawn above. Text scales proportionally via pixelRatio.
+ */
+import { COLORS } from './themes.js';
+/** Logical base width for export — matches typical mobile screen width. */
+const LOGICAL_BASE = 360;
+/** Title layout in logical pixels (scale with pixelRatio for output). */
+const TITLE_FONT_SIZE = 14;
+const TITLE_PADDING_TOP = 12;
+const TITLE_PADDING_BOTTOM = 8;
+const TITLE_PADDING_LEFT = 12;
+const EXPORT_PRESETS = {
+    square: { width: 1080, height: 1080, label: 'Square (1080 × 1080)' },
+    portrait: { width: 1080, height: 1350, label: 'Portrait (1080 × 1350)' },
+    landscape: { width: 1920, height: 1080, label: 'Landscape (1920 × 1080)' },
+};
+/**
+ * Return the CSS for the export context menu.
+ */
+export function generateExportCss() {
+    return `
+    .mviz-export-menu {
+      position: fixed;
+      z-index: 10000;
+      background: ${COLORS.WHITE};
+      border: 1px solid ${COLORS.GRAY_300};
+      border-radius: 4px;
+      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-size: 12px;
+      color: ${COLORS.TEXT_DARK};
+    }
+    body.theme-dark .mviz-export-menu {
+      background: ${COLORS.GRAY_800};
+      border-color: ${COLORS.GRAY_600};
+      color: ${COLORS.GRAY_200};
+    }
+    .mviz-export-menu-header {
+      padding: 6px 12px 4px;
+      font-size: 10px;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: ${COLORS.GRAY_500};
+    }
+    body.theme-dark .mviz-export-menu-header { color: ${COLORS.GRAY_600}; }
+    .mviz-export-menu-item {
+      padding: 6px 12px;
+      cursor: pointer;
+    }
+    .mviz-export-menu-item:hover {
+      background: ${COLORS.GRAY_100};
+    }
+    body.theme-dark .mviz-export-menu-item:hover {
+      background: ${COLORS.GRID_DARK};
+    }
+    @media print {
+      .mviz-export-menu { display: none; }
+    }`;
+}
+/**
+ * Return the JavaScript that powers chart PNG export.
+ *
+ * Injected once into the page. Relies on `window.chartInstances`
+ * and `window.chartOptions` being populated by the renderer.
+ */
+export function generateExportJs() {
+    const presets = JSON.stringify(EXPORT_PRESETS);
+    // Inject TypeScript constants into the JS runtime
+    const config = JSON.stringify({
+        LOGICAL_BASE,
+        TITLE_FONT_SIZE,
+        TITLE_PADDING_TOP,
+        TITLE_PADDING_BOTTOM,
+        TITLE_PADDING_LEFT,
+        BG_LIGHT: COLORS.BG_LIGHT,
+        BG_DARK: COLORS.DARK,
+        TEXT_LIGHT: COLORS.TEXT_DARK,
+        TEXT_DARK: COLORS.GRAY_200,
+    });
+    return `
+    // --- mviz PNG export ---
+    (function() {
+      var PRESETS = ${presets};
+      var CFG = ${config};
+      var menu = null;
+
+      function removeMenu() {
+        if (menu && menu.parentNode) { menu.parentNode.removeChild(menu); menu = null; }
+      }
+
+      function isDarkTheme() {
+        return document.body.classList.contains('theme-dark');
+      }
+
+      function getChartBg() {
+        var bg = getComputedStyle(document.body).backgroundColor;
+        return (bg && bg !== 'rgba(0, 0, 0, 0)') ? bg : (isDarkTheme() ? CFG.BG_DARK : CFG.BG_LIGHT);
+      }
+
+      function getChartTitle(chartEl) {
+        var gridItem = chartEl.closest('.grid-item');
+        if (gridItem) {
+          var h3 = gridItem.querySelector('.chart-title');
+          if (h3) return h3.textContent.trim();
+        }
+        return '';
+      }
+
+      function slugify(text) {
+        return text.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '') || 'chart';
+      }
+
+      function renderChart(chartId, drawW, drawH) {
+        var tmpDiv = document.createElement('div');
+        tmpDiv.style.cssText = 'position:absolute;left:-9999px;top:-9999px;width:' + drawW + 'px;height:' + drawH + 'px;';
+        document.body.appendChild(tmpDiv);
+
+        var tmpChart = echarts.init(tmpDiv, null, {renderer: 'canvas', width: drawW, height: drawH});
+        var currentTheme = isDarkTheme() ? 'dark' : 'light';
+        var opts = window.chartOptions && window.chartOptions[chartId];
+        var instance = window.chartInstances[chartId];
+        tmpChart.setOption(opts ? opts[currentTheme] : instance.getOption());
+
+        return { div: tmpDiv, chart: tmpChart };
+      }
+
+      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.textAlign = 'left';
+        ctx.textBaseline = 'top';
+        ctx.fillText(
+          title.toUpperCase(),
+          Math.round(CFG.TITLE_PADDING_LEFT * pixelRatio),
+          Math.round(CFG.TITLE_PADDING_TOP * pixelRatio)
+        );
+      }
+
+      function triggerDownload(canvas, filename) {
+        var a = document.createElement('a');
+        a.href = canvas.toDataURL('image/png');
+        a.download = filename;
+        a.click();
+      }
+
+      function exportChart(chartId, presetKey) {
+        if (!window.chartInstances || !window.chartInstances[chartId]) return;
+
+        var preset = PRESETS[presetKey];
+        var targetW = preset.width;
+        var targetH = preset.height;
+        var pixelRatio = targetW / CFG.LOGICAL_BASE;
+        var logicalH = Math.round(targetH / pixelRatio);
+
+        // Reserve space for title
+        var chartEl = document.getElementById(chartId);
+        var title = getChartTitle(chartEl);
+        var titleLogicalH = title ? (CFG.TITLE_PADDING_TOP + CFG.TITLE_FONT_SIZE + CFG.TITLE_PADDING_BOTTOM) : 0;
+
+        // ECharts reflows to fill its container — give it the full space
+        var tmp = renderChart(chartId, CFG.LOGICAL_BASE, logicalH - titleLogicalH);
+
+        // Wait a frame for render, then composite
+        setTimeout(function() {
+          var chartDataUrl = tmp.chart.getDataURL({type: 'png', pixelRatio: pixelRatio, backgroundColor: 'transparent'});
+          var titlePxH = Math.round(titleLogicalH * pixelRatio);
+
+          var canvas = document.createElement('canvas');
+          canvas.width = targetW;
+          canvas.height = targetH;
+          var ctx = canvas.getContext('2d');
+
+          ctx.fillStyle = getChartBg();
+          ctx.fillRect(0, 0, targetW, targetH);
+
+          if (title) { drawTitle(ctx, title, pixelRatio); }
+
+          var img = new Image();
+          img.onload = function() {
+            ctx.drawImage(img, 0, titlePxH, targetW, targetH - titlePxH);
+            triggerDownload(canvas, slugify(title || 'chart') + '-' + presetKey + '.png');
+            tmp.chart.dispose();
+            document.body.removeChild(tmp.div);
+          };
+          img.src = chartDataUrl;
+        }, 100);
+      }
+
+      function showMenu(e, chartId) {
+        e.preventDefault();
+        removeMenu();
+
+        menu = document.createElement('div');
+        menu.className = 'mviz-export-menu';
+
+        var header = document.createElement('div');
+        header.className = 'mviz-export-menu-header';
+        header.textContent = 'Save as PNG';
+        menu.appendChild(header);
+
+        var keys = ['square', 'portrait', 'landscape'];
+        for (var i = 0; i < keys.length; i++) {
+          (function(key) {
+            var item = document.createElement('div');
+            item.className = 'mviz-export-menu-item';
+            item.textContent = PRESETS[key].label;
+            item.addEventListener('click', function() {
+              removeMenu();
+              exportChart(chartId, key);
+            });
+            menu.appendChild(item);
+          })(keys[i]);
+        }
+
+        // Position near cursor, clamped to viewport
+        var x = e.clientX;
+        var y = e.clientY;
+        document.body.appendChild(menu);
+        var mw = menu.offsetWidth;
+        var mh = menu.offsetHeight;
+        if (x + mw > window.innerWidth) x = window.innerWidth - mw - 4;
+        if (y + mh > window.innerHeight) y = window.innerHeight - mh - 4;
+        menu.style.left = x + 'px';
+        menu.style.top = y + 'px';
+      }
+
+      // Dismiss on click elsewhere
+      document.addEventListener('click', removeMenu);
+      document.addEventListener('contextmenu', function(e) {
+        // Only show for chart containers that have an ECharts instance
+        var target = e.target;
+        var el = target.closest ? target.closest('[id]') : null;
+        while (el) {
+          if (window.chartInstances && window.chartInstances[el.id]) {
+            showMenu(e, el.id);
+            return;
+          }
+          el = el.parentElement ? el.parentElement.closest('[id]') : null;
+        }
+        // Not a chart — let default context menu through
+        removeMenu();
+      });
+    })();`;
+}
+//# sourceMappingURL=export.js.map

package/dist/core/serializer.js

@@ -1,6 +1,7 @@
 /**
  * JSON serialization with JavaScript function embedding for ECharts
  */
+import { generateExportCss, generateExportJs } from './export.js';
 /**
  * Special markers for JS functions that need to be embedded in JSON
  */
@@ -61,6 +62,8 @@ export function createJsFunction(code) {
  */
 export function wrapHtml(chartId, option, css, width, height) {
     const optionJson = serializeOption(option);
+    const exportCss = generateExportCss();
+    const exportJs = generateExportJs();
     return `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -69,15 +72,22 @@ export function wrapHtml(chartId, option, css, width, height) {
   <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
   <style>
     ${css}
+    ${exportCss}
   </style>
 </head>
 <body>
   <div id="${chartId}" style="width: ${width}; height: ${height}px;"></div>
   <script>
-    var chart = echarts.init(document.getElementById('${chartId}'), null, {renderer: 'svg'});
     var option = ${optionJson};
+    var chart = echarts.init(document.getElementById('${chartId}'), null, {renderer: 'svg'});
+    window.chartInstances = window.chartInstances || {};
+    window.chartOptions = window.chartOptions || {};
+    window.chartInstances['${chartId}'] = chart;
+    window.chartOptions['${chartId}'] = { light: option, dark: option };
     chart.setOption(option);
     window.addEventListener('resize', function() { chart.resize(); });
+
+    ${exportJs}
   </script>
 </body>
 </html>`;

package/dist/layout/templates.js

@@ -2,6 +2,7 @@
  * HTML templates for dashboard generation.
  */
 import { ECHARTS_CDN, PALETTE, COLORS, getThemeColors, getThemeColorsWithCustom, getPaletteWithCustom, getFontsWithCustom, getLinkColor, PRINT_PORTRAIT_WIDTH, PRINT_LANDSCAPE_WIDTH, } from '../core/themes.js';
+import { generateExportCss, generateExportJs } from '../core/export.js';
 /**
  * Escape HTML special characters
  */
@@ -360,6 +361,8 @@ export function generateDashboardHtml(pageTitle, componentsHtml, chartScripts, t
     const initialThemeClass = theme === 'dark' ? 'theme-dark' : 'theme-light';
     const continuousClass = continuous ? ' dashboard-continuous' : '';
     const css = generateDashboardCss(customTheme, orientation);
+    const exportCss = generateExportCss();
+    const exportJs = generateExportJs();
     return `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -369,6 +372,7 @@ export function generateDashboardHtml(pageTitle, componentsHtml, chartScripts, t
   <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
   ${extraScripts}
   <style>${css}
+    ${exportCss}
   </style>
 </head>
 <body class="${initialThemeClass}">
@@ -416,6 +420,8 @@ export function generateDashboardHtml(pageTitle, componentsHtml, chartScripts, t
         }
       });
     });
+
+    ${exportJs}
   </script>
 </body>
 </html>`;
@@ -974,6 +980,8 @@ export function generateTestHarnessHtml(pageTitle, navItems, totalCharts, typesC
     const initialThemeClass = theme === 'dark' ? 'theme-dark' : 'theme-light';
     const css = generateTestHarnessCss();
     const sparklineJs = generateSparklineTooltipJs();
+    const exportCss = generateExportCss();
+    const exportJs = generateExportJs();
     return `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -983,6 +991,7 @@ export function generateTestHarnessHtml(pageTitle, navItems, totalCharts, typesC
   <script src="${ECHARTS_CDN}"></script>
   <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
   <style>${css}
+    ${exportCss}
   </style>
 </head>
 <body class="${initialThemeClass}">
@@ -1036,6 +1045,8 @@ export function generateTestHarnessHtml(pageTitle, navItems, totalCharts, typesC
     ${chartScripts}
 
     ${sparklineJs}
+
+    ${exportJs}
   </script>
 </body>
 </html>`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mviz",
-  "version": "1.6.2",
+  "version": "1.6.3",
   "description": "A chart & report builder designed for use by AI.",
   "type": "module",
   "main": "./dist/index.js",