@record-evolution/widget-linechart 1.5.3 → 1.5.5

package/dist/widget-linechart.js

@@ -23500,7 +23500,7 @@ class WidgetLinechart extends h {
     constructor() {
         super(...arguments);
         this.canvasList = new Map();
-        this.version = '1.5.3';
+        this.version = '1.5.5';
     }
     update(changedProperties) {
         if (changedProperties.has('inputData') && this.chartContainer) {
@@ -23572,7 +23572,11 @@ class WidgetLinechart extends h {
                 // If the chartName ends with :pivot: then create a seperate chart for each pivoted dataseries
                 if (!this.canvasList.has(chartName)) {
                     // initialize new charts
-                    this.canvasList.set(chartName, { chart: undefined, dataSets: [] });
+                    this.canvasList.set(chartName, {
+                        chartJsInstance: undefined,
+                        // @ts-ignore
+                        dataSets: []
+                    });
                 }
                 (_m = this.canvasList.get(chartName)) === null || _m === void 0 ? void 0 : _m.dataSets.push(pds);
             });
@@ -23581,19 +23585,29 @@ class WidgetLinechart extends h {
         // this.inputData.dataseries = []
         // console.log('new linechart datasets', this.canvasList)
     }
-    applyInputData() {
+    async applyInputData() {
         this.setupCharts();
         this.requestUpdate();
-        this.canvasList.forEach(({ chart, dataSets }) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h;
-            if (chart) {
-                chart.data.datasets = dataSets;
-                chart.options.scales.x.type = this.xAxisType();
-                chart.options.scales.x.title.display = !!((_b = (_a = this.inputData) === null || _a === void 0 ? void 0 : _a.axis) === null || _b === void 0 ? void 0 : _b.xAxisLabel);
-                chart.options.scales.x.title.text = (_d = (_c = this.inputData) === null || _c === void 0 ? void 0 : _c.axis) === null || _d === void 0 ? void 0 : _d.xAxisLabel;
-                chart.options.scales.y.title.display = !!((_f = (_e = this.inputData) === null || _e === void 0 ? void 0 : _e.axis) === null || _f === void 0 ? void 0 : _f.yAxisLabel);
-                chart.options.scales.y.title.text = (_h = (_g = this.inputData) === null || _g === void 0 ? void 0 : _g.axis) === null || _h === void 0 ? void 0 : _h.yAxisLabel;
-                chart === null || chart === void 0 ? void 0 : chart.update('resize');
+        await this.updateComplete;
+        this.canvasList.forEach(({ chartJsInstance, dataSets }) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+            var _o, _p, _q;
+            if (chartJsInstance) {
+                chartJsInstance.data.datasets = dataSets;
+                (_a = chartJsInstance.options) !== null && _a !== void 0 ? _a : (chartJsInstance.options = {});
+                (_b = (_o = chartJsInstance.options).scales) !== null && _b !== void 0 ? _b : (_o.scales = {});
+                (_c = (_p = chartJsInstance.options.scales).x) !== null && _c !== void 0 ? _c : (_p.x = {});
+                (_d = (_q = chartJsInstance.options.scales).y) !== null && _d !== void 0 ? _d : (_q.y = {});
+                chartJsInstance.options.scales.x.type = this.xAxisType();
+                // @ts-ignore
+                chartJsInstance.options.scales.x.title.display = !!((_f = (_e = this.inputData) === null || _e === void 0 ? void 0 : _e.axis) === null || _f === void 0 ? void 0 : _f.xAxisLabel);
+                // @ts-ignore
+                chartJsInstance.options.scales.x.title.text = (_h = (_g = this.inputData) === null || _g === void 0 ? void 0 : _g.axis) === null || _h === void 0 ? void 0 : _h.xAxisLabel;
+                // @ts-ignore
+                chartJsInstance.options.scales.y.title.display = !!((_k = (_j = this.inputData) === null || _j === void 0 ? void 0 : _j.axis) === null || _k === void 0 ? void 0 : _k.yAxisLabel);
+                // @ts-ignore
+                chartJsInstance.options.scales.y.title.text = (_m = (_l = this.inputData) === null || _l === void 0 ? void 0 : _l.axis) === null || _m === void 0 ? void 0 : _m.yAxisLabel;
+                chartJsInstance === null || chartJsInstance === void 0 ? void 0 : chartJsInstance.update('resize');
             }
         });
     }
@@ -23614,7 +23628,7 @@ class WidgetLinechart extends h {
                 this.canvasList.delete(chartName);
                 return;
             }
-            if (chartM.chart)
+            if (chartM.chartJsInstance)
                 return;
             if (!this.chartContainer)
                 throw new Error('chartContainer not found');
@@ -23628,7 +23642,7 @@ class WidgetLinechart extends h {
             if (!canvas)
                 throw new Error('canvas not found');
             // console.log('chartM', canvas, chartM.chart)
-            chartM.chart = new Chart(canvas, {
+            chartM.chartJsInstance = new Chart(canvas, {
                 type: 'line',
                 data: {
                     // @ts-ignore
@@ -23676,6 +23690,7 @@ 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="paging no-data" ?active=${!this.canvasList.size}>No Data</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>
@@ -23740,6 +23755,17 @@ WidgetLinechart.styles = i$1 `
             font-size: 14px;
             line-height: 17px;
         }
+
+        .no-data {
+            font-size: 20px;
+            color: var(--re-text-color, #000);
+            display: flex;
+            height: 100%;
+            width: 100%;
+            text-align: center;
+            align-items: center;
+            justify-content: center;
+        }
     `;
 __decorate([
     n({ type: Object })
@@ -23747,7 +23773,7 @@ __decorate([
 __decorate([
     r()
 ], WidgetLinechart.prototype, "canvasList", void 0);
-window.customElements.define('widget-linechart-1.5.3', WidgetLinechart);
+window.customElements.define('widget-linechart-1.5.5', WidgetLinechart);
 const FORMATS = {
     datetime: 'MMM d, yyyy, h:mm:ss aaaa',
     millisecond: 'h:mm:ss.SSS aaaa',