@axdspub/axiom-charts 0.0.26 → 0.0.28

package/library/Libraries/axiom/index.js

@@ -313,15 +313,21 @@ class ChartRoot {
         const yGroups = this.plotImplementations !== undefined ? this.getPlotImplementationGroups(this.plotImplementations, 'y') : {};
         return this.settings.margin.left * Object.keys(yGroups).length;
     }
+    debouncedResize() {
+        var _a;
+        if (((_a = this.runtime.resizeEventHandler) === null || _a === void 0 ? void 0 : _a.cancel) !== undefined) {
+            this.runtime.resizeEventHandler.cancel();
+            console.log('cancel');
+        }
+        this.runtime.resizeEventHandler = debounce(() => { this.onResize(this.runtime.prevWidth, this.runtime.prevHeight); }, 1000);
+        this.runtime.resizeEventHandler();
+    }
     init(drawImmediately = false) {
+        var _a;
         return __awaiter(this, void 0, void 0, function* () {
-            this.runtime.resizeEventHandler = debounce(() => {
-                this.onResize(this.runtime.prevWidth, this.runtime.prevHeight);
-            }, 1000, {
-                leading: true,
-                trailing: true
-            });
-            // window.addEventListener('resize', this.runtime.resizeEventHandler)
+            this.runtime.resizeEventHandler = debounce(() => { this.onResize(this.runtime.prevWidth, this.runtime.prevHeight); }, 1000);
+            window.addEventListener('resize', () => { this.debouncedResize(); });
+            (_a = this.plotImplementations) === null || _a === void 0 ? void 0 : _a.forEach(plot => { plot.destroy(); });
             this.plotImplementations = this.createPlots();
             // PRELOAD ALL CHART METADATA AND DATA
             /* await Promise.all(this.plotImplementations.map(async p => {
@@ -439,6 +445,34 @@ class AxiomPlotRoot extends PlotRoot {
 }
 
 class AxiomLine extends AxiomPlotRoot {
+    constructor() {
+        super(...arguments);
+        this.onMouseScrub = (event) => {
+            const chart = this.chart;
+            if (chart.onPlotScrub === undefined)
+                return;
+            const xAccessor = this.getAccessorAtAxis('x');
+            const yAccessor = this.getAccessorAtAxis('y');
+            if (this.scrubSettings.axis === undefined ||
+                this.xScale === undefined ||
+                this.yScale === undefined ||
+                xAccessor === undefined ||
+                yAccessor === undefined ||
+                this.parsedData === undefined ||
+                this.offset === undefined) {
+                return;
+            }
+            const scrub = chart.getScrubEvent(event, this.scrubSettings.axis, this.xScale, this.yScale, xAccessor, yAccessor, this.parsedData, this.offset);
+            if (scrub === undefined || scrub.x === undefined)
+                return;
+            this.onScrub(scrub);
+            chart.drawPlotScrubbing(this.id, scrub, this.style, this.scrubSettings);
+        };
+        this.onScrubEnd = () => {
+            this.chart.erasePlotScrub(this.id);
+            super.onScrubEnd();
+        };
+    }
     getDomainAccessor(axis) {
         var _a, _b, _c;
         const accessors = ((_c = (_b = (_a = this.runtime) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.parsed) === null || _c === void 0 ? void 0 : _c.accessors) !== undefined ? this.runtime.data.parsed.accessors : {};
@@ -526,35 +560,10 @@ class AxiomLine extends AxiomPlotRoot {
         var _a, _b, _c;
         const chartElements = this.chart.getChartElements();
         if (chartElements !== undefined) {
-            (_a = chartElements.svg.node()) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseover', event => { this.onMouseScrub(event); });
-            (_b = chartElements.svg.node()) === null || _b === void 0 ? void 0 : _b.addEventListener('mousemove', event => { this.onMouseScrub(event); });
-            (_c = chartElements.svg.node()) === null || _c === void 0 ? void 0 : _c.addEventListener('mouseleave', () => { this.onScrubEnd(); });
-        }
-    }
-    onMouseScrub(event) {
-        const chart = this.chart;
-        if (chart.onPlotScrub === undefined)
-            return;
-        const xAccessor = this.getAccessorAtAxis('x');
-        const yAccessor = this.getAccessorAtAxis('y');
-        if (this.scrubSettings.axis === undefined ||
-            this.xScale === undefined ||
-            this.yScale === undefined ||
-            xAccessor === undefined ||
-            yAccessor === undefined ||
-            this.parsedData === undefined ||
-            this.offset === undefined) {
-            return;
+            (_a = chartElements.svg.node()) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseover', this.onMouseScrub);
+            (_b = chartElements.svg.node()) === null || _b === void 0 ? void 0 : _b.addEventListener('mousemove', this.onMouseScrub);
+            (_c = chartElements.svg.node()) === null || _c === void 0 ? void 0 : _c.addEventListener('mouseleave', this.onScrubEnd);
         }
-        const scrub = chart.getScrubEvent(event, this.scrubSettings.axis, this.xScale, this.yScale, xAccessor, yAccessor, this.parsedData, this.offset);
-        if (scrub === undefined || scrub.x === undefined)
-            return;
-        this.onScrub(scrub);
-        chart.drawPlotScrubbing(this.id, scrub, this.style, this.scrubSettings);
-    }
-    onScrubEnd() {
-        this.chart.erasePlotScrub(this.id);
-        super.onScrubEnd();
     }
     getStrokeStyle() {
         const style = this.style !== undefined ? this.style : {};
@@ -572,6 +581,15 @@ class AxiomLine extends AxiomPlotRoot {
             });
         }
     }
+    destroy() {
+        var _a, _b, _c;
+        const chartElements = this.chart.getChartElements();
+        if (chartElements !== undefined) {
+            (_a = chartElements.svg.node()) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseover', this.onMouseScrub);
+            (_b = chartElements.svg.node()) === null || _b === void 0 ? void 0 : _b.removeEventListener('mousemove', this.onMouseScrub);
+            (_c = chartElements.svg.node()) === null || _c === void 0 ? void 0 : _c.removeEventListener('mouseleave', this.onScrubEnd);
+        }
+    }
 }
 
 class AxiomArea extends AxiomPlotRoot {
@@ -691,6 +709,31 @@ class AxiomScatter extends AxiomPlotRoot {
     constructor() {
         super(...arguments);
         this.circleClass = `${this.id}-scrub-circle`;
+        this.onMouseScrub = (event) => {
+            const chart = this.chart;
+            if (chart.onPlotScrub === undefined)
+                return;
+            const xAccessor = this.getAccessorAtAxis('x');
+            const yAccessor = this.getAccessorAtAxis('y');
+            if (this.scrubSettings.axis === undefined ||
+                this.xScale === undefined ||
+                this.yScale === undefined ||
+                xAccessor === undefined ||
+                yAccessor === undefined ||
+                this.parsedData === undefined ||
+                this.offset === undefined) {
+                return;
+            }
+            const scrub = chart.getScrubEvent(event, this.scrubSettings.axis, this.xScale, this.yScale, xAccessor, yAccessor, this.parsedData, this.offset);
+            if (scrub === undefined || scrub.x === undefined)
+                return;
+            this.onScrub(scrub);
+            chart.drawPlotScrubbing(this.id, scrub, this.style, this.scrubSettings);
+        };
+        this.onScrubEnd = () => {
+            this.chart.erasePlotScrub(this.id);
+            super.onScrubEnd();
+        };
     }
     getDomainAccessor(axis) {
         var _a, _b, _c;
@@ -778,35 +821,19 @@ class AxiomScatter extends AxiomPlotRoot {
         var _a, _b, _c;
         const chartElements = this.chart.getChartElements();
         if (chartElements !== undefined) {
-            (_a = chartElements.svg.node()) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseover', event => { this.onMouseScrub(event); });
-            (_b = chartElements.svg.node()) === null || _b === void 0 ? void 0 : _b.addEventListener('mousemove', event => { this.onMouseScrub(event); });
-            (_c = chartElements.svg.node()) === null || _c === void 0 ? void 0 : _c.addEventListener('mouseleave', () => { this.onScrubEnd(); });
+            (_a = chartElements.svg.node()) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseover', this.onMouseScrub);
+            (_b = chartElements.svg.node()) === null || _b === void 0 ? void 0 : _b.addEventListener('mousemove', this.onMouseScrub);
+            (_c = chartElements.svg.node()) === null || _c === void 0 ? void 0 : _c.addEventListener('mouseleave', this.onScrubEnd);
         }
     }
-    onMouseScrub(event) {
-        const chart = this.chart;
-        if (chart.onPlotScrub === undefined)
-            return;
-        const xAccessor = this.getAccessorAtAxis('x');
-        const yAccessor = this.getAccessorAtAxis('y');
-        if (this.scrubSettings.axis === undefined ||
-            this.xScale === undefined ||
-            this.yScale === undefined ||
-            xAccessor === undefined ||
-            yAccessor === undefined ||
-            this.parsedData === undefined ||
-            this.offset === undefined) {
-            return;
+    destroy() {
+        var _a, _b, _c;
+        const chartElements = this.chart.getChartElements();
+        if (chartElements !== undefined) {
+            (_a = chartElements.svg.node()) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseover', this.onMouseScrub);
+            (_b = chartElements.svg.node()) === null || _b === void 0 ? void 0 : _b.removeEventListener('mousemove', this.onMouseScrub);
+            (_c = chartElements.svg.node()) === null || _c === void 0 ? void 0 : _c.removeEventListener('mouseleave', this.onScrubEnd);
         }
-        const scrub = chart.getScrubEvent(event, this.scrubSettings.axis, this.xScale, this.yScale, xAccessor, yAccessor, this.parsedData, this.offset);
-        if (scrub === undefined || scrub.x === undefined)
-            return;
-        this.onScrub(scrub);
-        chart.drawPlotScrubbing(this.id, scrub, this.style, this.scrubSettings);
-    }
-    onScrubEnd() {
-        this.chart.erasePlotScrub(this.id);
-        super.onScrubEnd();
     }
 }
 
@@ -848,7 +875,8 @@ class AxiomBar extends AxiomPlotRoot {
                 return undefined;
             if (chartElements.svg.select('g') !== undefined)
                 chartElements.svg.select('g').remove();
-            let { width, height } = chart.settings;
+            let { height } = chart.settings;
+            let width = chart.getWidth();
             width = Number(width);
             height = Number(height);
             const oneOrZero = y2Key === undefined ? 0 : 1; // Used to add in space for y2 if exists.
@@ -1428,6 +1456,7 @@ class AxiomChart extends ChartRoot {
         });
     }
     destroy() {
+        console.log('destroy');
         this.chartElements = undefined;
         super.destroy();
     }