@malinconico/nmcharts 2.4.0 → 2.5.0

package/nmcharts.d.ts

@@ -39,8 +39,8 @@ interface NMChartsOptions {
 interface NMChartsInstance {
   render(): void;
   exportPNG(filename?: string): void;
-  /** Export chart as SVG file (raster image embedded in SVG wrapper) */
-  exportSVG(filename?: string): void;
+  /** Export chart as SVG file (requires nmcharts-extras.js) */
+  exportSVG?(filename?: string): void;
   setDarkMode(enabled: boolean): void;
   updateSeries(series: NMChartsSeries[]): void;
   destroy(): void;
@@ -79,6 +79,8 @@ interface NMCategoryOptions {
   gridColor?: string;
   gridDashed?: boolean;
   colors?: string[];
+  zoomPan?: boolean;
+  annotations?: NMAnnotation[];
   barWidth?: number;
   barGap?: number;
   groupPadding?: number;
@@ -314,6 +316,69 @@ interface NMLinkInstance {
   destroy(): void;
 }
 
+interface NMBookingTimelineOptions {
+  title?: string;
+  month?: number;
+  year?: number;
+  properties?: Array<{
+    name: string;
+    location?: string;
+    rating?: number;
+    avatar?: string;
+    color?: string;
+  }>;
+  bookings?: Array<{
+    property: number;
+    guest?: string;
+    checkIn: string;
+    checkOut: string;
+    status?: 'confirmed' | 'pending' | 'checked-in' | 'checked-out' | 'cancelled' | 'blocked';
+    price?: string;
+    platform?: 'airbnb' | 'booking' | 'direct' | string;
+    color?: string;
+    guestAvatar?: string;
+    nights?: number;
+  }>;
+  cellWidth?: number;
+  rowHeight?: number;
+  avatarSize?: number;
+  statusColors?: Record<string, string>;
+  onBookingClick?: (booking: any) => void;
+}
+
+interface NMBookingTimelineInstance {
+  destroy(): void;
+}
+
+interface NMAnnotation {
+  type: 'line' | 'band' | 'vline' | 'marker';
+  value?: number;
+  from?: number;
+  to?: number;
+  category?: string | number;
+  color?: string;
+  label?: string;
+  labelColor?: string;
+  labelAlign?: string;
+  lineWidth?: number;
+  dash?: number[];
+  radius?: number;
+}
+
+interface NMDiagnosticResult {
+  nmchartsLoaded: boolean;
+  version: string;
+  debug: boolean;
+  cspFallback: boolean;
+  stylesInjected: boolean;
+  nmchartsStyleTag: boolean;
+  dpr: number;
+  roundRectNative: boolean;
+  container: any;
+  cssVars?: any;
+  chartMethods: string[];
+}
+
 // --- Theme definitions ---
 
 interface NMChartsThemes {
@@ -348,7 +413,11 @@ interface NMChartsStatic {
   boxplot(selector: string | HTMLElement, options: NMBoxplotOptions): NMCategoryInstance;
   sparkline(selector: string | HTMLElement, data: number[], options?: NMSparklineOptions): NMSparklineInstance;
   link(charts: NMCategoryInstance[], options?: NMLinkOptions): NMLinkInstance;
+  bookingTimeline(selector: string | HTMLElement, options: NMBookingTimelineOptions): NMBookingTimelineInstance;
   lttb(data: any[], threshold: number): any[];
+  diagnose(selector?: string | HTMLElement): NMDiagnosticResult;
+  debug: boolean;
+  _cspNonce: string;
   themes: NMChartsThemes;
 }
 
@@ -364,6 +433,10 @@ export {
   NMBulletOptions, NMTimelineOptions, NMWaterfallOptions,
   NMTreemapOptions, NMFunnelOptions, NMPolarOptions,
   NMScatterOptions, NMSankeyOptions, NMBoxplotOptions,
+  NMSparklineOptions, NMSparklineInstance,
+  NMLinkOptions, NMLinkInstance,
+  NMBookingTimelineOptions, NMBookingTimelineInstance,
+  NMAnnotation, NMDiagnosticResult,
   NMChartsThemes
 };
 export default NMCharts;

package/nmcharts.js

@@ -177,7 +177,10 @@
           e = !0;
           _styleEl = document.createElement("style");
           _styleEl.setAttribute("data-nmcharts", "");
-          ((_styleEl.textContent = i), document.head.appendChild(_styleEl));
+          var _nonce = (t.NMCharts && t.NMCharts._cspNonce) || "";
+          if (_nonce) _styleEl.setAttribute("nonce", _nonce);
+          _styleEl.textContent = i;
+          try { document.head.appendChild(_styleEl); } catch(ex) { console.warn("[NMCharts] CSP blocked style injection:", ex.message); }
         }
         _instanceCount++;
       })(),
@@ -186,9 +189,12 @@
       !this.el)
     )
       throw new Error("NMCharts: container not found");
+    if (t.NMCharts && t.NMCharts.debug) console.log("[NMCharts:create] Creating time-series chart", { container: this.el.id || this.el.tagName, width: this.el.getBoundingClientRect().width, series: (n.series||[]).length, title: n.title || '' });
     ((this.opts = n),
       (this.bands = n.bands || []),
-      (this.forecastFrom = n.forecastFrom || null));
+      (this.forecastFrom = n.forecastFrom || null),
+      (this._externalListeners = []),
+      (this._destroyed = !1));
     var a = n.toolbar || {};
     ((this.series = (n.series || []).map(function (t) {
       return {
@@ -230,14 +236,15 @@
   }
   ((v.prototype._buildDOM = function (t, e) {
     var i = p("div", "mc-root", this.el);
+    i.style.maxWidth = "100%"; i.style.overflow = "hidden"; i.style.boxSizing = "border-box";
     this._root = i;
     var n = p("div", "mc-header", i);
     p("div", "", n).style.width = "120px";
     var a = p("div", "mc-titles", n);
     ((p("div", "mc-title", a).textContent = t.title || ""),
-      (p("div", "mc-subtitle", a).innerHTML =
+      (p("div", "mc-subtitle", a).textContent =
         t.subtitle ||
-        "Drag to zoom · Shift+drag to pan · Scroll to zoom · Double-click to reset"));
+        "Drag to zoom \u00B7 Shift+drag to pan \u00B7 Scroll to zoom \u00B7 Double-click to reset"));
     var o = p("div", "mc-toolbar", n),
       r = this;
     if (!1 !== e.dark) {
@@ -317,6 +324,20 @@
       var t = window.devicePixelRatio || 1,
         e = this._wrap.getBoundingClientRect().width,
         i = Math.round(0.42 * e);
+      if (e <= 0) {
+        var self = this;
+        if (!this._sizeRetry) this._sizeRetry = 0;
+        if (this._sizeRetry < 20) {
+          this._sizeRetry++;
+          if (window.NMCharts && window.NMCharts.debug) console.log("[NMCharts:create] Width=0, retrying (" + this._sizeRetry + "/20)");
+          this._sizeTimer = setTimeout(function () { self._initSize(); if (self.W > 0) { if (window.NMCharts && window.NMCharts.debug) console.log("[NMCharts:create] Container now visible, width=" + self.W); self._entryProgress = 0; self._startEntryAnim(); } }, 66);
+        } else {
+          if (window.NMCharts && window.NMCharts.debug) console.warn("[NMCharts:create] WARNING: Container still 0px after 20 retries", { el: this.el.id || this.el.tagName, display: getComputedStyle(this.el).display });
+        }
+        return;
+      }
+      this._sizeRetry = 0;
+      if (window.NMCharts && window.NMCharts.debug && !this._sizeLogged) { this._sizeLogged = true; console.log("[NMCharts:create] Size OK", { width: e, height: i, dpr: t }); }
       ((this.canvas.width = e * t),
         (this.canvas.height = i * t),
         (this.canvas.style.height = i + "px"),
@@ -336,7 +357,7 @@
     }),
     (v.prototype._buildLegend = function () {
       var t = this;
-      ((this._legendEl.innerHTML = ""),
+      ((this._legendEl.textContent = ""),
         this.series.forEach(function (e) {
           var i = p(
               "div",
@@ -355,12 +376,12 @@
                   e.color +
                   ";height:0;margin-top:1px"
                 : "background:" + e.color;
-          ((i.innerHTML =
-            '<div class="mc-legend-swatch" style="' +
-            n +
-            '"></div><span>' +
-            e.name +
-            "</span>"),
+          (i.textContent = "",
+            (function() {
+              var sw = document.createElement("div"); sw.className = "mc-legend-swatch"; sw.style.cssText = n;
+              var sp = document.createElement("span"); sp.textContent = e.name;
+              i.appendChild(sw); i.appendChild(sp);
+            })(),
             i.addEventListener("click", function () {
               ((e.visible = !e.visible),
                 i.classList.toggle("disabled", !e.visible),
@@ -1024,42 +1045,31 @@
     (v.prototype._showTooltip = function (t, e) {
       if (e < 0) this._hideTooltip();
       else {
-        var i = "",
-          o = null;
-        if (
-          (this.series.forEach(function (t) {
-            !t.visible ||
-              e >= t.data.length ||
-              (o || (o = t.data[e][0]),
-              (i +=
-                '<div class="mc-tooltip-row"><div class="mc-tooltip-dot" style="background:' +
-                t.color +
-                '"></div><span>' +
-                t.name +
-                '</span><span class="mc-tooltip-val">' +
-                l(t.data[e][1]) +
-                "</span></div>"));
-          }),
-          o)
-        ) {
-          ((i =
-            '<div class="mc-tooltip-date">' +
-            (function (t) {
-              var e = new Date(t);
-              return (
-                a[e.getUTCDay()] +
-                ", " +
-                n[e.getUTCMonth()] +
-                " " +
-                e.getUTCDate() +
-                ", " +
-                e.getUTCFullYear()
-              );
-            })(o) +
-            "</div>" +
-            i),
-            (this._tooltipEl.innerHTML = i),
-            this._tooltipEl.classList.add("visible"));
+        var o = null;
+        var entries = [];
+        this.series.forEach(function (t) {
+          if (!t.visible || e >= t.data.length) return;
+          if (!o) o = t.data[e][0];
+          entries.push({ color: t.color, name: t.name, value: l(t.data[e][1]) });
+        });
+        if (o) {
+          // Build tooltip with safe DOM methods (no innerHTML)
+          this._tooltipEl.textContent = "";
+          var dateDiv = document.createElement("div"); dateDiv.className = "mc-tooltip-date";
+          dateDiv.textContent = (function (t) {
+            var e = new Date(t);
+            return a[e.getUTCDay()] + ", " + n[e.getUTCMonth()] + " " + e.getUTCDate() + ", " + e.getUTCFullYear();
+          })(o);
+          this._tooltipEl.appendChild(dateDiv);
+          entries.forEach(function (entry) {
+            var row = document.createElement("div"); row.className = "mc-tooltip-row";
+            var dot = document.createElement("div"); dot.className = "mc-tooltip-dot"; dot.style.background = entry.color;
+            var nm = document.createElement("span"); nm.textContent = entry.name;
+            var val = document.createElement("span"); val.className = "mc-tooltip-val"; val.textContent = entry.value;
+            row.appendChild(dot); row.appendChild(nm); row.appendChild(val);
+            this._tooltipEl.appendChild(row);
+          }.bind(this));
+          this._tooltipEl.classList.add("visible");
           var s = this._tooltipEl.offsetWidth,
             c = this._tooltipEl.offsetHeight,
             d = t.x + 16,
@@ -1116,6 +1126,7 @@
       if (this._rafId) { cancelAnimationFrame(this._rafId); this._rafId = null; }
       // Clear resize debounce timer
       if (this._resizeTimer) { clearTimeout(this._resizeTimer); this._resizeTimer = null; }
+      if (this._sizeTimer) { clearTimeout(this._sizeTimer); this._sizeTimer = null; }
       // Remove all external listeners (window/document)
       if (this._externalListeners) {
         for (var i = 0; i < this._externalListeners.length; i++) {
@@ -1128,13 +1139,9 @@
       if (this._root && this._root.parentNode) {
         this._root.parentNode.removeChild(this._root);
       }
-      // Decrement instance count; remove global CSS when last instance is destroyed
+      // Decrement instance count (keep styles — category charts may depend on them)
       _instanceCount--;
-      if (_instanceCount <= 0 && _styleEl && _styleEl.parentNode) {
-        _styleEl.parentNode.removeChild(_styleEl);
-        _styleEl = null;
-        e = !1;
-        _instanceCount = 0;
+      if (_instanceCount < 0) _instanceCount = 0;
       }
       // Null out references to aid GC
       this.canvas = null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@malinconico/nmcharts",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "description": "NM Charts — Zero-dependency Canvas charting library with 23 chart types",
   "type": "module",
   "main": "nmcharts.js",