@record-evolution/widget-linechart 1.4.10 → 1.4.11

package/dist/widget-linechart.js

@@ -23979,7 +23979,7 @@ class WidgetLinechart extends s$1 {
     constructor() {
         super(...arguments);
         this.canvasList = new Map();
-        this.version = '1.4.10';
+        this.version = '1.4.11';
     }
     update(changedProperties) {
         if (changedProperties.has('inputData')) {
@@ -23996,8 +23996,8 @@ class WidgetLinechart extends s$1 {
         if (!((_b = (_a = this === null || this === void 0 ? void 0 : this.inputData) === null || _a === void 0 ? void 0 : _a.dataseries) === null || _b === void 0 ? void 0 : _b.length))
             return;
         // reset all existing chart dataseries
-        this.canvasList.forEach(chartM => chartM.dataSets = []);
-        this.inputData.dataseries.forEach(ds => {
+        this.canvasList.forEach((chartM) => (chartM.dataSets = []));
+        this.inputData.dataseries.forEach((ds) => {
             var _a, _b, _c;
             ds.chartName = (_a = ds.chartName) !== null && _a !== void 0 ? _a : '';
             if (ds.borderDash && typeof ds.borderDash === 'string') {
@@ -24008,8 +24008,12 @@ class WidgetLinechart extends s$1 {
             }
             // pivot data
             const distincts = [...new Set((_b = ds.data) === null || _b === void 0 ? void 0 : _b.map((d) => d.pivot))];
-            const derivedBgColors = tinycolor(ds.backgroundColor).monochromatic(distincts.length).map((c) => c.toHexString());
-            const derivedBdColors = tinycolor(ds.borderColor).monochromatic(distincts.length).map((c) => c.toHexString());
+            const derivedBgColors = tinycolor(ds.backgroundColor)
+                .monochromatic(distincts.length)
+                .map((c) => c.toHexString());
+            const derivedBdColors = tinycolor(ds.borderColor)
+                .monochromatic(distincts.length)
+                .map((c) => c.toHexString());
             if (distincts.length > 1) {
                 distincts.forEach((piv, i) => {
                     var _a, _b, _c, _d;
@@ -24024,10 +24028,12 @@ class WidgetLinechart extends s$1 {
                         borderWidth: ds.borderWidth,
                         borderDash: ds.borderDash,
                         fill: ds.fill,
-                        data: (_a = ds.data) === null || _a === void 0 ? void 0 : _a.filter(d => d.pivot === piv)
+                        data: (_a = ds.data) === null || _a === void 0 ? void 0 : _a.filter((d) => d.pivot === piv)
                     };
                     // If the chartName ends with :pivot: then create a seperate chart for each pivoted dataseries
-                    const chartName = ((_b = ds.chartName) === null || _b === void 0 ? void 0 : _b.endsWith('#pivot#')) ? ds.chartName + piv : (_c = ds.chartName) !== null && _c !== void 0 ? _c : '';
+                    const chartName = ((_b = ds.chartName) === null || _b === void 0 ? void 0 : _b.endsWith('#pivot#'))
+                        ? ds.chartName + piv
+                        : (_c = ds.chartName) !== null && _c !== void 0 ? _c : '';
                     if (!this.canvasList.has(chartName)) {
                         // initialize new charts
                         this.canvasList.set(chartName, { chart: undefined, dataSets: [] });
@@ -24049,6 +24055,7 @@ class WidgetLinechart extends s$1 {
     }
     applyInputData() {
         this.setupCharts();
+        this.requestUpdate();
         this.canvasList.forEach(({ chart, dataSets }) => {
             var _a, _b, _c, _d, _e, _f, _g, _h;
             if (chart) {
@@ -24092,13 +24099,13 @@ class WidgetLinechart extends s$1 {
                     responsive: true,
                     maintainAspectRatio: false,
                     animations: {
-                        "colors": false,
-                        "x": false,
+                        colors: false,
+                        x: false
                     },
                     transitions: {
-                        "active": {
-                            "animation": {
-                                "duration": 100
+                        active: {
+                            animation: {
+                                duration: 100
                             }
                         }
                     },
@@ -24116,94 +24123,100 @@ class WidgetLinechart extends s$1 {
                                 text: (_j = (_h = this.inputData) === null || _h === void 0 ? void 0 : _h.settings) === null || _j === void 0 ? void 0 : _j.yAxisLabel
                             }
                         }
-                    },
-                },
+                    }
+                }
             });
         });
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         return x `
-      <div class="wrapper">
-        <header>
-          <h3 class="paging" ?active=${(_b = (_a = this.inputData) === null || _a === void 0 ? void 0 : _a.settings) === null || _b === void 0 ? void 0 : _b.title}>${(_d = (_c = this.inputData) === null || _c === void 0 ? void 0 : _c.settings) === null || _d === void 0 ? void 0 : _d.title}</h3>
-          <p class="paging" ?active=${(_f = (_e = this.inputData) === null || _e === void 0 ? void 0 : _e.settings) === null || _f === void 0 ? void 0 : _f.subTitle}>${(_h = (_g = this.inputData) === null || _g === void 0 ? void 0 : _g.settings) === null || _h === void 0 ? void 0 : _h.subTitle}</p>
-        </header>
-
-        <div class="chart-container ${((_k = (_j = this === null || this === void 0 ? void 0 : this.inputData) === null || _j === void 0 ? void 0 : _j.settings) === null || _k === void 0 ? void 0 : _k.columnLayout) ? 'columnLayout' : ''}">
-          ${c(this.canvasList, ([chartName, chartM]) => chartName, ([chartName]) => x `
-            <div class="sizer">
-              <canvas name="${chartName}"></canvas>
+            <div class="wrapper">
+                <header>
+                    <h3 class="paging" ?active=${(_b = (_a = this.inputData) === null || _a === void 0 ? void 0 : _a.settings) === null || _b === void 0 ? void 0 : _b.title}>
+                        ${(_d = (_c = this.inputData) === null || _c === void 0 ? void 0 : _c.settings) === null || _d === void 0 ? void 0 : _d.title}
+                    </h3>
+                    <p class="paging" ?active=${(_f = (_e = this.inputData) === null || _e === void 0 ? void 0 : _e.settings) === null || _f === void 0 ? void 0 : _f.subTitle}>
+                        ${(_h = (_g = this.inputData) === null || _g === void 0 ? void 0 : _g.settings) === null || _h === void 0 ? void 0 : _h.subTitle}
+                    </p>
+                </header>
+
+                <div class="chart-container ${((_k = (_j = this === null || this === void 0 ? void 0 : this.inputData) === null || _j === void 0 ? void 0 : _j.settings) === null || _k === void 0 ? void 0 : _k.columnLayout) ? 'columnLayout' : ''}">
+                    ${c([...this.canvasList.entries()].sort(), ([chartName, chartM]) => chartName, ([chartName]) => x `
+                            <div class="sizer">
+                                <canvas name="${chartName}"></canvas>
+                            </div>
+                        `)}
+                </div>
             </div>
-          `)}
-        </div>
-      </div>
-    `;
+        `;
     }
 }
 WidgetLinechart.styles = i$3 `
-  :host {
-    display: block;
-    color: var(--re-text-color, #000);
-    
-    font-family: sans-serif;
-    padding: 16px;
-    box-sizing: border-box;
-    margin: auto;
-  }
+        :host {
+            display: block;
+            color: var(--re-text-color, #000);
+
+            font-family: sans-serif;
+            padding: 16px;
+            box-sizing: border-box;
+            margin: auto;
+        }
 
-  .paging:not([active]) { display: none !important; }
+        .paging:not([active]) {
+            display: none !important;
+        }
 
-  .columnLayout {
-    flex-direction: column;
-  }
+        .columnLayout {
+            flex-direction: column;
+        }
 
-  .wrapper {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    width: 100%;
-  }
+        .wrapper {
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+            width: 100%;
+        }
 
-  .chart-container {
-      display: flex;
-      flex: 1;
-      overflow: hidden;
-      position: relative;
-    }
+        .chart-container {
+            display: flex;
+            flex: 1;
+            overflow: hidden;
+            position: relative;
+        }
 
-  .sizer {
-    flex: 1;
-    overflow: hidden;
-    position: relative;
-  }
+        .sizer {
+            flex: 1;
+            overflow: hidden;
+            position: relative;
+        }
 
-  header {
-    display: flex;
-    flex-direction: column;
-    margin: 0 0 16px 0;
-  }
-  h3 {
-    margin: 0;
-    max-width: 300px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  p {
-    margin: 10px 0 0 0;
-    max-width: 300px;
-    font-size: 14px;
-    line-height: 17px;
-  }
-`;
+        header {
+            display: flex;
+            flex-direction: column;
+            margin: 0 0 16px 0;
+        }
+        h3 {
+            margin: 0;
+            max-width: 300px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+        p {
+            margin: 10px 0 0 0;
+            max-width: 300px;
+            font-size: 14px;
+            line-height: 17px;
+        }
+    `;
 __decorate([
     n({ type: Object })
 ], WidgetLinechart.prototype, "inputData", void 0);
 __decorate([
     r()
 ], WidgetLinechart.prototype, "canvasList", void 0);
-window.customElements.define('widget-linechart-1.4.10', WidgetLinechart);
+window.customElements.define('widget-linechart-1.4.11', WidgetLinechart);
 const FORMATS = {
     datetime: 'MMM d, yyyy, h:mm:ss aaaa',
     millisecond: 'h:mm:ss.SSS aaaa',
@@ -24249,60 +24262,99 @@ adapters._date.override({
     // @ts-ignore
     add: function (time, amount, unit) {
         switch (unit) {
-            case 'millisecond': return addMilliseconds(time, amount);
-            case 'second': return addSeconds(time, amount);
-            case 'minute': return addMinutes(time, amount);
-            case 'hour': return addHours(time, amount);
-            case 'day': return addDays(time, amount);
-            case 'week': return addWeeks(time, amount);
-            case 'month': return addMonths(time, amount);
-            case 'quarter': return addQuarters(time, amount);
-            case 'year': return addYears(time, amount);
-            default: return time;
+            case 'millisecond':
+                return addMilliseconds(time, amount);
+            case 'second':
+                return addSeconds(time, amount);
+            case 'minute':
+                return addMinutes(time, amount);
+            case 'hour':
+                return addHours(time, amount);
+            case 'day':
+                return addDays(time, amount);
+            case 'week':
+                return addWeeks(time, amount);
+            case 'month':
+                return addMonths(time, amount);
+            case 'quarter':
+                return addQuarters(time, amount);
+            case 'year':
+                return addYears(time, amount);
+            default:
+                return time;
         }
     },
     diff: function (max, min, unit) {
         switch (unit) {
-            case 'millisecond': return differenceInMilliseconds(max, min);
-            case 'second': return differenceInSeconds(max, min);
-            case 'minute': return differenceInMinutes(max, min);
-            case 'hour': return differenceInHours(max, min);
-            case 'day': return differenceInDays(max, min);
-            case 'week': return differenceInWeeks(max, min);
-            case 'month': return differenceInMonths(max, min);
-            case 'quarter': return differenceInQuarters(max, min);
-            case 'year': return differenceInYears(max, min);
-            default: return 0;
+            case 'millisecond':
+                return differenceInMilliseconds(max, min);
+            case 'second':
+                return differenceInSeconds(max, min);
+            case 'minute':
+                return differenceInMinutes(max, min);
+            case 'hour':
+                return differenceInHours(max, min);
+            case 'day':
+                return differenceInDays(max, min);
+            case 'week':
+                return differenceInWeeks(max, min);
+            case 'month':
+                return differenceInMonths(max, min);
+            case 'quarter':
+                return differenceInQuarters(max, min);
+            case 'year':
+                return differenceInYears(max, min);
+            default:
+                return 0;
         }
     },
     // @ts-ignore
     startOf: function (time, unit, weekday) {
         switch (unit) {
-            case 'second': return startOfSecond(time);
-            case 'minute': return startOfMinute(time);
-            case 'hour': return startOfHour(time);
-            case 'day': return startOfDay(time);
-            case 'week': return startOfWeek(time);
-            // @ts-ignore
-            case 'isoWeek': return startOfWeek(time, { weekStartsOn: +weekday });
-            case 'month': return startOfMonth(time);
-            case 'quarter': return startOfQuarter(time);
-            case 'year': return startOfYear(time);
-            default: return time;
+            case 'second':
+                return startOfSecond(time);
+            case 'minute':
+                return startOfMinute(time);
+            case 'hour':
+                return startOfHour(time);
+            case 'day':
+                return startOfDay(time);
+            case 'week':
+                return startOfWeek(time);
+            case 'isoWeek':
+                // @ts-ignore
+                return startOfWeek(time, { weekStartsOn: +weekday });
+            case 'month':
+                return startOfMonth(time);
+            case 'quarter':
+                return startOfQuarter(time);
+            case 'year':
+                return startOfYear(time);
+            default:
+                return time;
         }
     },
     // @ts-ignore
     endOf: function (time, unit) {
         switch (unit) {
-            case 'second': return endOfSecond(time);
-            case 'minute': return endOfMinute(time);
-            case 'hour': return endOfHour(time);
-            case 'day': return endOfDay(time);
-            case 'week': return endOfWeek(time);
-            case 'month': return endOfMonth(time);
-            case 'quarter': return endOfQuarter(time);
-            case 'year': return endOfYear(time);
-            default: return time;
+            case 'second':
+                return endOfSecond(time);
+            case 'minute':
+                return endOfMinute(time);
+            case 'hour':
+                return endOfHour(time);
+            case 'day':
+                return endOfDay(time);
+            case 'week':
+                return endOfWeek(time);
+            case 'month':
+                return endOfMonth(time);
+            case 'quarter':
+                return endOfQuarter(time);
+            case 'year':
+                return endOfYear(time);
+            default:
+                return time;
         }
     }
 });