@record-evolution/widget-linechart 1.5.1 → 1.5.3

package/dist/widget-linechart.js

@@ -32,8 +32,8 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
  * Copyright 2019 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const t$1 = globalThis,
-  e$2 = t$1.ShadowRoot && (void 0 === t$1.ShadyCSS || t$1.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype,
+const t = globalThis,
+  e$1 = t.ShadowRoot && (void 0 === t.ShadyCSS || t.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype,
   s = Symbol(),
   o$2 = new WeakMap();
 let n$3 = class n {
@@ -44,7 +44,7 @@ let n$3 = class n {
   get styleSheet() {
     let t = this.o;
     const s = this.t;
-    if (e$2 && void 0 === t) {
+    if (e$1 && void 0 === t) {
       const e = void 0 !== s && 1 === s.length;
       e && (t = o$2.get(s)), void 0 === t && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), e && o$2.set(s, t));
     }
@@ -55,7 +55,7 @@ let n$3 = class n {
   }
 };
 const r$3 = t => new n$3("string" == typeof t ? t : t + "", void 0, s),
-  i$2 = (t, ...e) => {
+  i$1 = (t, ...e) => {
     const o = 1 === t.length ? t[0] : e.reduce((e, s, o) => e + (t => {
       if (!0 === t._$cssResult$) return t.cssText;
       if ("number" == typeof t) return t;
@@ -64,13 +64,13 @@ const r$3 = t => new n$3("string" == typeof t ? t : t + "", void 0, s),
     return new n$3(o, t, s);
   },
   S$1 = (s, o) => {
-    if (e$2) s.adoptedStyleSheets = o.map(t => t instanceof CSSStyleSheet ? t : t.styleSheet);else for (const e of o) {
+    if (e$1) s.adoptedStyleSheets = o.map(t => t instanceof CSSStyleSheet ? t : t.styleSheet);else for (const e of o) {
       const o = document.createElement("style"),
-        n = t$1.litNonce;
+        n = t.litNonce;
       void 0 !== n && o.setAttribute("nonce", n), o.textContent = e.cssText, s.appendChild(o);
     }
   },
-  c$2 = e$2 ? t => t : t => t instanceof CSSStyleSheet ? (t => {
+  c$2 = e$1 ? t => t : t => t instanceof CSSStyleSheet ? (t => {
     let e = "";
     for (const s of t.cssRules) e += s.cssText;
     return r$3(e);
@@ -82,8 +82,8 @@ const r$3 = t => new n$3("string" == typeof t ? t : t + "", void 0, s),
  * SPDX-License-Identifier: BSD-3-Clause
  */
 const {
-    is: i$1,
-    defineProperty: e$1,
+    is: i,
+    defineProperty: e,
     getOwnPropertyDescriptor: r$2,
     getOwnPropertyNames: h$2,
     getOwnPropertySymbols: o$1,
@@ -126,7 +126,7 @@ const {
       return i;
     }
   },
-  f$2 = (t, s) => !i$1(t, s),
+  f$2 = (t, s) => !i(t, s),
   y = {
     attribute: !0,
     type: String,
@@ -146,7 +146,7 @@ class b extends HTMLElement {
     if (s.state && (s.attribute = !1), this._$Ei(), this.elementProperties.set(t, s), !s.noAccessor) {
       const i = Symbol(),
         r = this.getPropertyDescriptor(t, i, s);
-      void 0 !== r && e$1(this.prototype, t, r);
+      void 0 !== r && e(this.prototype, t, r);
     }
   }
   static getPropertyDescriptor(t, s, i) {
@@ -348,7 +348,7 @@ const n$1 = globalThis,
   m = "?" + v,
   _ = `<${m}>`,
   w = document,
-  lt$1 = () => w.createComment(""),
+  lt = () => w.createComment(""),
   st = t => null === t || "object" != typeof t && "function" != typeof t,
   g = Array.isArray,
   $ = t => g(t) || "function" == typeof t?.[Symbol.iterator],
@@ -430,11 +430,11 @@ class B {
             i = t.length - 1;
           if (i > 0) {
             e.textContent = c ? c.emptyScript : "";
-            for (let s = 0; s < i; s++) e.append(t[s], lt$1()), I.nextNode(), r.push({
+            for (let s = 0; s < i; s++) e.append(t[s], lt()), I.nextNode(), r.push({
               type: 2,
               index: ++h
             });
-            e.append(t[i], lt$1());
+            e.append(t[i], lt());
           }
         }
       } else if (8 === e.nodeType) if (e.data === m) r.push({
@@ -487,7 +487,7 @@ class F {
     for (; void 0 !== r;) {
       if (o === r.index) {
         let i;
-        2 === r.type ? i = new et$1(h, h.nextSibling, this, t) : 1 === r.type ? i = new r.ctor(h, r.name, r.strings, this, t) : 6 === r.type && (i = new K(h, this, t)), this._$AV.push(i), r = s[++n];
+        2 === r.type ? i = new et(h, h.nextSibling, this, t) : 1 === r.type ? i = new r.ctor(h, r.name, r.strings, this, t) : 6 === r.type && (i = new K(h, this, t)), this._$AV.push(i), r = s[++n];
       }
       o !== r?.index && (h = I.nextNode(), o++);
     }
@@ -498,7 +498,7 @@ class F {
     for (const s of this._$AV) void 0 !== s && (void 0 !== s.strings ? (s._$AI(t, s, i), i += s.strings.length - 2) : s._$AI(t[i])), i++;
   }
 }
-let et$1 = class et {
+class et {
   get _$AU() {
     return this._$AM?._$AU ?? this.v;
   }
@@ -549,7 +549,7 @@ let et$1 = class et {
     const i = this._$AH;
     let s,
       e = 0;
-    for (const h of t) e === i.length ? i.push(s = new et(this.O(lt$1()), this.O(lt$1()), this, this.options)) : s = i[e], s._$AI(h), e++;
+    for (const h of t) e === i.length ? i.push(s = new et(this.O(lt()), this.O(lt()), this, this.options)) : s = i[e], s._$AI(h), e++;
     e < i.length && (this._$AR(s && s._$AB.nextSibling, e), i.length = e);
   }
   _$AR(t = this._$AA.nextSibling, i) {
@@ -561,7 +561,7 @@ let et$1 = class et {
   setConnected(t) {
     void 0 === this._$AM && (this.v = t, this._$AP?.(t));
   }
-};
+}
 class G {
   get tagName() {
     return this.element.tagName;
@@ -628,30 +628,14 @@ class K {
     z(this, t);
   }
 }
-const si = {
-    M: f$1,
-    P: v,
-    A: m,
-    C: 1,
-    L: U,
-    R: F,
-    D: $,
-    V: z,
-    I: et$1,
-    H: G,
-    N: Z,
-    U: q,
-    B: Y,
-    F: K
-  },
-  Re = n$1.litHtmlPolyfillSupport;
-Re?.(B, et$1), (n$1.litHtmlVersions ??= []).push("3.2.0");
+const Re = n$1.litHtmlPolyfillSupport;
+Re?.(B, et), (n$1.litHtmlVersions ??= []).push("3.2.0");
 const Q = (t, i, s) => {
   const e = s?.renderBefore ?? i;
   let h = e._$litPart$;
   if (void 0 === h) {
     const t = s?.renderBefore ?? null;
-    e._$litPart$ = h = new et$1(i.insertBefore(lt$1(), t), t, void 0, s ?? {});
+    e._$litPart$ = h = new et(i.insertBefore(lt(), t), t, void 0, s ?? {});
   }
   return h._$AI(t), h;
 };
@@ -694,154 +678,6 @@ f?.({
 });
 (globalThis.litElementVersions ??= []).push("4.1.0");
 
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const t = {
-    ATTRIBUTE: 1,
-    CHILD: 2,
-    PROPERTY: 3,
-    BOOLEAN_ATTRIBUTE: 4,
-    EVENT: 5,
-    ELEMENT: 6
-  },
-  e = t => (...e) => ({
-    _$litDirective$: t,
-    values: e
-  });
-class i {
-  constructor(t) {}
-  get _$AU() {
-    return this._$AM._$AU;
-  }
-  _$AT(t, e, i) {
-    this.t = t, this._$AM = e, this.i = i;
-  }
-  _$AS(t, e) {
-    return this.update(t, e);
-  }
-  update(t, e) {
-    return this.render(...e);
-  }
-}
-
-/**
- * @license
- * Copyright 2020 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const {
-    I: et
-  } = si,
-  lt = () => document.createComment(""),
-  at = (o, t, i) => {
-    const n = o._$AA.parentNode,
-      e = void 0 === t ? o._$AB : t._$AA;
-    if (void 0 === i) {
-      const t = n.insertBefore(lt(), e),
-        l = n.insertBefore(lt(), e);
-      i = new et(t, l, o, o.options);
-    } else {
-      const t = i._$AB.nextSibling,
-        l = i._$AM,
-        c = l !== o;
-      if (c) {
-        let t;
-        i._$AQ?.(o), i._$AM = o, void 0 !== i._$AP && (t = o._$AU) !== l._$AU && i._$AP(t);
-      }
-      if (t !== e || c) {
-        let o = i._$AA;
-        for (; o !== t;) {
-          const t = o.nextSibling;
-          n.insertBefore(o, e), o = t;
-        }
-      }
-    }
-    return i;
-  },
-  ct = (o, t, i = o) => (o._$AI(t, i), o),
-  ht = {},
-  dt = (o, t = ht) => o._$AH = t,
-  ut = o => o._$AH,
-  pt = o => {
-    o._$AP?.(!1, !0);
-    let t = o._$AA;
-    const i = o._$AB.nextSibling;
-    for (; t !== i;) {
-      const o = t.nextSibling;
-      t.remove(), t = o;
-    }
-  };
-
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const Jt = (e, s, t) => {
-    const r = new Map();
-    for (let l = s; l <= t; l++) r.set(e[l], l);
-    return r;
-  },
-  Qt = e(class extends i {
-    constructor(e) {
-      if (super(e), e.type !== t.CHILD) throw Error("repeat() can only be used in text expressions");
-    }
-    dt(e, s, t) {
-      let r;
-      void 0 === t ? t = s : void 0 !== s && (r = s);
-      const l = [],
-        o = [];
-      let i = 0;
-      for (const s of e) l[i] = r ? r(s, i) : i, o[i] = t(s, i), i++;
-      return {
-        values: o,
-        keys: l
-      };
-    }
-    render(e, s, t) {
-      return this.dt(e, s, t).values;
-    }
-    update(e, [s, t, r]) {
-      const l = ut(e),
-        {
-          values: o,
-          keys: i
-        } = this.dt(s, t, r);
-      if (!Array.isArray(l)) return this.ut = i, o;
-      const n = this.ut ??= [],
-        f = [];
-      let u,
-        c,
-        d = 0,
-        p = l.length - 1,
-        a = 0,
-        h = o.length - 1;
-      for (; d <= p && a <= h;) if (null === l[d]) d++;else if (null === l[p]) p--;else if (n[d] === i[a]) f[a] = ct(l[d], o[a]), d++, a++;else if (n[p] === i[h]) f[h] = ct(l[p], o[h]), p--, h--;else if (n[d] === i[h]) f[h] = ct(l[d], o[h]), at(e, f[h + 1], l[d]), d++, h--;else if (n[p] === i[a]) f[a] = ct(l[p], o[a]), at(e, l[d], l[p]), p--, a++;else if (void 0 === u && (u = Jt(i, a, h), c = Jt(n, d, p)), u.has(n[d])) {
-        if (u.has(n[p])) {
-          const s = c.get(i[a]),
-            t = void 0 !== s ? l[s] : null;
-          if (null === t) {
-            const s = at(e, l[d]);
-            ct(s, o[a]), f[a] = s;
-          } else f[a] = ct(t, o[a]), at(e, l[d], t), l[s] = null;
-          a++;
-        } else pt(l[p]), p--;
-      } else pt(l[d]), d++;
-      for (; a <= h;) {
-        const s = at(e, f[h + 1]);
-        ct(s, o[a]), f[a++] = s;
-      }
-      for (; d <= p;) {
-        const e = l[d++];
-        null !== e && pt(e);
-      }
-      return this.ut = i, dt(e, f), R;
-    }
-  });
-
 /**
  * @license
  * Copyright 2017 Google LLC
@@ -23664,16 +23500,19 @@ class WidgetLinechart extends h {
     constructor() {
         super(...arguments);
         this.canvasList = new Map();
-        this.version = '1.5.1';
+        this.version = '1.5.3';
     }
     update(changedProperties) {
-        if (changedProperties.has('inputData')) {
+        if (changedProperties.has('inputData') && this.chartContainer) {
             this.transformInputData();
             this.applyInputData();
         }
         super.update(changedProperties);
     }
     firstUpdated() {
+        var _a;
+        this.chartContainer = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.chart-container');
+        this.transformInputData();
         this.applyInputData();
     }
     transformInputData() {
@@ -23694,9 +23533,10 @@ class WidgetLinechart extends h {
             else {
                 ds.borderDash = undefined;
             }
+            (_c = ds.data) !== null && _c !== void 0 ? _c : (ds.data = []);
             // pivot data
-            const distincts = [...new Set((_c = ds.data) === null || _c === void 0 ? void 0 : _c.map((d) => d.pivot))].sort();
-            tinycolor(ds.backgroundColor)
+            const distincts = [...new Set(ds.data.map((d) => d.pivot))].sort();
+            const derivedBgColors = tinycolor(ds.backgroundColor)
                 .monochromatic(distincts.length)
                 .map((c) => c.toHexString());
             const derivedBdColors = tinycolor(ds.borderColor)
@@ -23715,7 +23555,7 @@ class WidgetLinechart extends h {
                         : derivedBdColors[i],
                     backgroundColor: ((_d = (_c = ds.advanced) === null || _c === void 0 ? void 0 : _c.chartName) === null || _d === void 0 ? void 0 : _d.includes('#split#'))
                         ? ds.backgroundColor
-                        : derivedBdColors[i],
+                        : derivedBgColors[i],
                     styling: ds.styling,
                     pointStyle: (_e = ds.styling) === null || _e === void 0 ? void 0 : _e.pointStyle,
                     radius: (_f = ds.styling) === null || _f === void 0 ? void 0 : _f.radius,
@@ -23727,7 +23567,7 @@ class WidgetLinechart extends h {
                 };
                 let chartName = (_l = (_k = ds.advanced) === null || _k === void 0 ? void 0 : _k.chartName) !== null && _l !== void 0 ? _l : '';
                 if (chartName.includes('#split#')) {
-                    chartName = chartName + '-' + piv;
+                    chartName = prefix + chartName;
                 }
                 // If the chartName ends with :pivot: then create a seperate chart for each pivoted dataseries
                 if (!this.canvasList.has(chartName)) {
@@ -23738,7 +23578,7 @@ class WidgetLinechart extends h {
             });
         });
         // prevent duplicate transformation
-        this.inputData.dataseries = [];
+        // this.inputData.dataseries = []
         // console.log('new linechart datasets', this.canvasList)
     }
     applyInputData() {
@@ -23758,24 +23598,35 @@ class WidgetLinechart extends h {
         });
     }
     xAxisType() {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f;
         if ((_b = (_a = this.inputData) === null || _a === void 0 ? void 0 : _a.axis) === null || _b === void 0 ? void 0 : _b.timeseries)
             return 'time';
-        const onePoint = (_e = (_d = (_c = this.inputData) === null || _c === void 0 ? void 0 : _c.dataseries) === null || _d === void 0 ? void 0 : _d[0].data) === null || _e === void 0 ? void 0 : _e[0];
+        const onePoint = (_f = (_e = (_d = (_c = this.inputData) === null || _c === void 0 ? void 0 : _c.dataseries) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.data) === null || _f === void 0 ? void 0 : _f[0];
         if (!isNaN(Number(onePoint === null || onePoint === void 0 ? void 0 : onePoint.x)))
             return 'linear';
         return 'category';
     }
     setupCharts() {
         this.canvasList.forEach((chartM, chartName) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-            if (!chartM.dataSets.length)
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+            if (!chartM.dataSets.length) {
+                (_b = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`div[name="${chartName}"]`)) === null || _b === void 0 ? void 0 : _b.remove();
                 this.canvasList.delete(chartName);
+                return;
+            }
             if (chartM.chart)
                 return;
-            const canvas = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`[name="${chartName}"]`);
+            if (!this.chartContainer)
+                throw new Error('chartContainer not found');
+            const newContainer = document.createElement('div');
+            newContainer.setAttribute('name', chartName);
+            newContainer.setAttribute('class', 'sizer');
+            const canvas = document.createElement('canvas');
+            canvas.setAttribute('name', chartName);
+            newContainer.appendChild(canvas);
+            this.chartContainer.appendChild(newContainer);
             if (!canvas)
-                return;
+                throw new Error('canvas not found');
             // console.log('chartM', canvas, chartM.chart)
             chartM.chart = new Chart(canvas, {
                 type: 'line',
@@ -23801,14 +23652,14 @@ class WidgetLinechart extends h {
                         x: {
                             type: this.xAxisType(),
                             title: {
-                                display: !!((_c = (_b = this.inputData) === null || _b === void 0 ? void 0 : _b.axis) === null || _c === void 0 ? void 0 : _c.xAxisLabel),
-                                text: (_e = (_d = this.inputData) === null || _d === void 0 ? void 0 : _d.axis) === null || _e === void 0 ? void 0 : _e.xAxisLabel
+                                display: !!((_d = (_c = this.inputData) === null || _c === void 0 ? void 0 : _c.axis) === null || _d === void 0 ? void 0 : _d.xAxisLabel),
+                                text: (_f = (_e = this.inputData) === null || _e === void 0 ? void 0 : _e.axis) === null || _f === void 0 ? void 0 : _f.xAxisLabel
                             }
                         },
                         y: {
                             title: {
-                                display: !!((_g = (_f = this.inputData) === null || _f === void 0 ? void 0 : _f.axis) === null || _g === void 0 ? void 0 : _g.yAxisLabel),
-                                text: (_j = (_h = this.inputData) === null || _h === void 0 ? void 0 : _h.axis) === null || _j === void 0 ? void 0 : _j.yAxisLabel
+                                display: !!((_h = (_g = this.inputData) === null || _g === void 0 ? void 0 : _g.axis) === null || _h === void 0 ? void 0 : _h.yAxisLabel),
+                                text: (_k = (_j = this.inputData) === null || _j === void 0 ? void 0 : _j.axis) === null || _k === void 0 ? void 0 : _k.yAxisLabel
                             }
                         }
                     }
@@ -23825,18 +23676,14 @@ class WidgetLinechart extends h {
                     <p class="paging" ?active=${(_c = this.inputData) === null || _c === void 0 ? void 0 : _c.subTitle}>${(_d = this.inputData) === null || _d === void 0 ? void 0 : _d.subTitle}</p>
                 </header>
 
-                <div class="chart-container ${((_f = (_e = this === null || this === void 0 ? void 0 : this.inputData) === null || _e === void 0 ? void 0 : _e.axis) === null || _f === void 0 ? void 0 : _f.columnLayout) ? 'columnLayout' : ''}">
-                    ${Qt([...this.canvasList.entries()].sort(), ([chartName, chartM]) => chartName, ([chartName]) => ke `
-                            <div class="sizer">
-                                <canvas name="${chartName}"></canvas>
-                            </div>
-                        `)}
-                </div>
+                <div
+                    class="chart-container ${((_f = (_e = this === null || this === void 0 ? void 0 : this.inputData) === null || _e === void 0 ? void 0 : _e.axis) === null || _f === void 0 ? void 0 : _f.columnLayout) ? 'columnLayout' : ''}"
+                ></div>
             </div>
         `;
     }
 }
-WidgetLinechart.styles = i$2 `
+WidgetLinechart.styles = i$1 `
         :host {
             display: block;
             color: var(--re-text-color, #000);
@@ -23900,7 +23747,7 @@ __decorate([
 __decorate([
     r()
 ], WidgetLinechart.prototype, "canvasList", void 0);
-window.customElements.define('widget-linechart-1.5.1', WidgetLinechart);
+window.customElements.define('widget-linechart-1.5.3', WidgetLinechart);
 const FORMATS = {
     datetime: 'MMM d, yyyy, h:mm:ss aaaa',
     millisecond: 'h:mm:ss.SSS aaaa',