@malinconico/nmcharts 2.3.0 → 2.5.0

package/nmcharts-extras.js

@@ -1,320 +0,0 @@
-/**
- * NMCharts Extras — Themes, SVG Export, ResizeObserver, Accessibility
- * Load after nmcharts.js and nmcharts-categories.js
- */
-(function (root) {
-  'use strict';
-
-  var NM = root.NMCharts;
-  if (!NM) throw new Error('NMCharts-Extras: NMCharts must be loaded first.');
-
-  // ---------------------------------------------------------------------------
-  // 1. PREDEFINED THEMES
-  // ---------------------------------------------------------------------------
-
-  NM.themes = {
-    corporate:   ['#1e3a5f', '#2d6a9f', '#4a90d9', '#7cb5ec', '#a8d1f0', '#2f4858', '#547a96', '#8fb3c9'],
-    pastel:      ['#a8d8ea', '#aa96da', '#fcbad3', '#ffffd2', '#b5ead7', '#c7ceea', '#ffdac1', '#e2f0cb'],
-    vibrant:     ['#ff6b6b', '#feca57', '#48dbfb', '#ff9ff3', '#54a0ff', '#5f27cd', '#01a3a4', '#f368e0'],
-    monochrome:  ['#1a1a2e', '#3d3d5c', '#5f5f8a', '#8282b8', '#a5a5d0', '#c8c8e6', '#e0e0f0', '#f0f0f8'],
-    colorblind:  ['#0072B2', '#E69F00', '#009E73', '#D55E00', '#CC79A7', '#56B4E9', '#F0E442', '#999999']
-  };
-
-  // ---------------------------------------------------------------------------
-  // 2. HELPERS
-  // ---------------------------------------------------------------------------
-
-  /** Debounce: returns a function that delays invoking fn until after wait ms. */
-  function debounce(fn, wait) {
-    var timer;
-    return function () {
-      var ctx = this, args = arguments;
-      clearTimeout(timer);
-      timer = setTimeout(function () { fn.apply(ctx, args); }, wait);
-    };
-  }
-
-  /**
-   * Inject theme colors into opts.series entries that lack explicit colors,
-   * and into opts.colors if not already set.
-   * Mutates a shallow clone of opts to avoid modifying the caller's object.
-   */
-  function applyTheme(opts) {
-    if (!opts || !opts.theme) return opts;
-    var palette = NM.themes[opts.theme];
-    if (!palette) return opts;
-
-    // Shallow clone
-    var o = Object.assign({}, opts);
-
-    // Apply colors array if not explicitly provided
-    if (!o.colors) {
-      o.colors = palette;
-    }
-
-    // Apply per-series colors where missing
-    if (o.series) {
-      o.series = o.series.map(function (s, i) {
-        if (s.color) return s;
-        return Object.assign({}, s, { color: palette[i % palette.length] });
-      });
-    }
-
-    return o;
-  }
-
-  // ---------------------------------------------------------------------------
-  // 3. ACCESSIBILITY HELPERS
-  // ---------------------------------------------------------------------------
-
-  /** Inject ARIA attributes and a visually-hidden data table for screen readers. */
-  function injectA11y(instance, chartType) {
-    var root = instance._root;
-    if (!root) return;
-
-    var opts = instance.opts || {};
-    var title = opts.title || '';
-    var label = title ? (title + ' — ' + chartType + ' chart') : (chartType + ' chart');
-
-    root.setAttribute('role', 'img');
-    root.setAttribute('aria-label', label);
-    root.setAttribute('tabindex', '0');
-
-    // Build a visually-hidden table from series data when available
-    var series = instance.series;
-    var categories = instance.categories;
-    if (!series || !series.length) return;
-
-    // Only build if categories exist (category charts), or data arrays exist
-    var table = document.createElement('table');
-    table.style.cssText = [
-      'position:absolute',
-      'width:1px',
-      'height:1px',
-      'padding:0',
-      'margin:-1px',
-      'overflow:hidden',
-      'clip:rect(0,0,0,0)',
-      'white-space:nowrap',
-      'border:0'
-    ].join(';');
-
-    // Caption
-    var caption = document.createElement('caption');
-    caption.textContent = label;
-    table.appendChild(caption);
-
-    if (categories && categories.length) {
-      // Header row: category labels
-      var thead = document.createElement('thead');
-      var headerRow = document.createElement('tr');
-      var thEmpty = document.createElement('th');
-      thEmpty.textContent = 'Series';
-      headerRow.appendChild(thEmpty);
-      categories.forEach(function (cat) {
-        var th = document.createElement('th');
-        th.setAttribute('scope', 'col');
-        th.textContent = String(cat);
-        headerRow.appendChild(th);
-      });
-      thead.appendChild(headerRow);
-      table.appendChild(thead);
-
-      // Body rows: one row per series
-      var tbody = document.createElement('tbody');
-      series.forEach(function (s) {
-        var tr = document.createElement('tr');
-        var th = document.createElement('th');
-        th.setAttribute('scope', 'row');
-        th.textContent = s.name || '';
-        tr.appendChild(th);
-        (s.data || []).forEach(function (v) {
-          var td = document.createElement('td');
-          td.textContent = v != null ? String(v) : '';
-          tr.appendChild(td);
-        });
-        tbody.appendChild(tr);
-      });
-      table.appendChild(tbody);
-    } else {
-      // Single-value series (gauge, donut-like): just list name + value
-      var tbody2 = document.createElement('tbody');
-      series.forEach(function (s) {
-        var tr = document.createElement('tr');
-        var tdName = document.createElement('td');
-        tdName.textContent = s.name || '';
-        var tdVal = document.createElement('td');
-        tdVal.textContent = s.value != null ? String(s.value) : (Array.isArray(s.data) ? s.data.join(', ') : '');
-        tr.appendChild(tdName);
-        tr.appendChild(tdVal);
-        tbody2.appendChild(tr);
-      });
-      table.appendChild(tbody2);
-    }
-
-    // Append to root (positioned so it doesn't affect layout)
-    root.style.position = root.style.position || 'relative';
-    root.appendChild(table);
-  }
-
-  // ---------------------------------------------------------------------------
-  // 4. SVG EXPORT
-  // ---------------------------------------------------------------------------
-
-  /**
-   * Export chart as SVG by wrapping the canvas data URL in an SVG <image> element.
-   * Works on any chart instance that has a .canvas property.
-   * @param {string} [filename] - Download filename (default: 'chart.svg')
-   */
-  function exportSVG(filename) {
-    var canvas = this.canvas;
-    if (!canvas) {
-      console.warn('NMCharts exportSVG: no canvas found on instance');
-      return;
-    }
-
-    var w = canvas.width / (window.devicePixelRatio || 1);
-    var h = canvas.height / (window.devicePixelRatio || 1);
-    var dataURL = canvas.toDataURL('image/png');
-
-    var svg = [
-      '<?xml version="1.0" encoding="UTF-8"?>',
-      '<svg xmlns="http://www.w3.org/2000/svg"',
-      '     xmlns:xlink="http://www.w3.org/1999/xlink"',
-      '     width="' + w + '" height="' + h + '"',
-      '     viewBox="0 0 ' + w + ' ' + h + '">',
-      '  <title>' + ((this.opts && this.opts.title) ? escapeXml(this.opts.title) : 'Chart') + '</title>',
-      '  <image x="0" y="0" width="' + w + '" height="' + h + '"',
-      '         xlink:href="' + dataURL + '"',
-      '         href="' + dataURL + '"/>',
-      '</svg>'
-    ].join('\n');
-
-    var blob = new Blob([svg], { type: 'image/svg+xml;charset=utf-8' });
-    var url = URL.createObjectURL(blob);
-    var a = document.createElement('a');
-    a.download = filename || 'chart.svg';
-    a.href = url;
-    a.click();
-    setTimeout(function () { URL.revokeObjectURL(url); }, 1000);
-  }
-
-  function escapeXml(str) {
-    return String(str)
-      .replace(/&/g, '&amp;')
-      .replace(/</g, '&lt;')
-      .replace(/>/g, '&gt;')
-      .replace(/"/g, '&quot;')
-      .replace(/'/g, '&apos;');
-  }
-
-  // Attach exportSVG to the time-series prototype
-  NM.prototype.exportSVG = exportSVG;
-
-  // ---------------------------------------------------------------------------
-  // 5. FACTORY METHOD WRAPPING
-  //    Wraps each factory method to:
-  //      a) apply theme colors from opts.theme
-  //      b) attach ResizeObserver for re-render on container resize
-  //      c) inject accessibility attributes
-  //      d) expose exportSVG on the returned instance
-  // ---------------------------------------------------------------------------
-
-  var FACTORY_METHODS = [
-    'create',
-    'bar',
-    'column',
-    'barStacked',
-    'lollipop',
-    'combo',
-    'donut',
-    'gauge',
-    'heatmap',
-    'radar',
-    'lineBar',
-    'waterfall',
-    'bullet',
-    'timeline',
-    'treemap',
-    'funnel',
-    'polar',
-    'scatter',
-    'sankey',
-    'boxplot',
-    'sparkline'
-  ];
-
-  var RESIZE_DEBOUNCE_MS = 150;
-
-  FACTORY_METHODS.forEach(function (method) {
-    var original = NM[method];
-    if (typeof original !== 'function') return;
-
-    NM[method] = function (selector, opts) {
-      // a) Apply theme if specified
-      var themedOpts = applyTheme(opts);
-
-      // b) Create chart via original factory
-      var instance = original.call(NM, selector, themedOpts);
-      if (!instance) return instance;
-
-      // c) Expose exportSVG if not already present
-      if (typeof instance.exportSVG !== 'function') {
-        instance.exportSVG = exportSVG.bind(instance);
-      }
-
-      // d) Accessibility
-      var chartType = method === 'create' ? 'line' : method;
-      injectA11y(instance, chartType);
-
-      // e) ResizeObserver
-      if (typeof ResizeObserver !== 'undefined' && instance._root) {
-        var debouncedRender = debounce(function () {
-          if (typeof instance._initSize === 'function') {
-            instance._initSize();
-          }
-          if (typeof instance.render === 'function') {
-            instance.render();
-          }
-          // Time-series also needs navigator re-render
-          if (typeof instance._renderNav === 'function') {
-            instance._renderNav();
-          }
-        }, RESIZE_DEBOUNCE_MS);
-
-        var observer = new ResizeObserver(function (entries) {
-          if (!entries || !entries.length) return;
-          debouncedRender();
-        });
-
-        // Observe the root element (the mc-root div)
-        observer.observe(instance._root);
-
-        // Store on instance for cleanup
-        instance._resizeObserver = observer;
-
-        // Patch destroy to disconnect observer
-        var originalDestroy = instance.destroy;
-        instance.destroy = function () {
-          if (instance._resizeObserver) {
-            instance._resizeObserver.disconnect();
-            instance._resizeObserver = null;
-          }
-          if (typeof originalDestroy === 'function') {
-            originalDestroy.call(instance);
-          }
-        };
-      }
-
-      return instance;
-    };
-  });
-
-  // ---------------------------------------------------------------------------
-  // UMD export (mirror pattern from nmcharts.js / nmcharts-categories.js)
-  // ---------------------------------------------------------------------------
-  if (typeof module === 'object' && module.exports) {
-    module.exports = NM;
-  }
-
-})(typeof window !== 'undefined' ? window : typeof globalThis !== 'undefined' ? globalThis : this);