@axdspub/axiom-charts 0.0.25 → 0.0.27

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();
     }
@@ -1660,15 +1689,16 @@ class AxiomRadialRose extends AxiomPlotRoot {
         this.stacks = undefined;
     }
     setStackedData() {
-        var _a, _b;
+        var _a, _b, _c;
         return __awaiter(this, void 0, void 0, function* () {
             let parsedData = [];
             if (this.data === undefined) {
                 this.data = yield this.getData();
                 parsedData = (_b = (_a = this.data.parsed) === null || _a === void 0 ? void 0 : _a.data) !== null && _b !== void 0 ? _b : [];
             }
-            if (this.stacks === undefined) {
-                this.stacks = this.getStackedData(parsedData);
+            const y = (_c = this.data.parsed) === null || _c === void 0 ? void 0 : _c.accessors.y;
+            if (this.stacks === undefined && y !== undefined) {
+                this.stacks = this.getStackedData(parsedData, y);
             }
         });
     }
@@ -1680,7 +1710,7 @@ class AxiomRadialRose extends AxiomPlotRoot {
             return [0, this.getMaxStackTotal(this.stacks)];
         });
     }
-    getStackedData(parsedData) {
+    getStackedData(parsedData, yAccessor) {
         const degreesPerBin = 360 / this.numBins;
         const directionBins = d3.range(0, 360, degreesPerBin);
         const speedBins = this.speedBins;
@@ -1695,8 +1725,8 @@ class AxiomRadialRose extends AxiomPlotRoot {
         parsedData.forEach(row => {
             const directionBinIndex = Math.floor(row.direction / degreesPerBin);
             const stack = stacks[directionBinIndex];
-            if (row.speed < speedBins[speedBins.length - 1]) {
-                const speedBin = Math.floor(row.speed);
+            if (Number(yAccessor(row)) < speedBins[speedBins.length - 1]) {
+                const speedBin = Math.floor(Number(yAccessor(row)));
                 stack[speedBin] += 1;
             }
         });
@@ -1714,9 +1744,6 @@ class AxiomRadialRose extends AxiomPlotRoot {
         });
         var _a, _b, _c, _d, _e, _f;
         return __awaiter(this, void 0, void 0, function* () {
-            yield this.setStackedData();
-            if (this.stacks === undefined || this.speedBins === undefined)
-                return;
             const xAccessors = this.getAccessorsAtAxis('x');
             const xAccessor = this.getAccessorAtAxis('x');
             const x0Accessor = xAccessors.x0;
@@ -1725,6 +1752,7 @@ class AxiomRadialRose extends AxiomPlotRoot {
             const yAccessor = this.getAccessorAtAxis('y');
             const y0Accessor = yAccessors.y0;
             const y1Accessor = yAccessors.y1;
+            yield this.setStackedData();
             const chart = this.chart;
             const chartElements = chart.getChartElements();
             if (chartElements === undefined || chartElements.svg === null) {
@@ -1740,6 +1768,8 @@ class AxiomRadialRose extends AxiomPlotRoot {
                 console.log('Missing one of: xAxisScale, yAxisScale, parsedData, xAccessor(s), yAccessor(s)');
                 return undefined;
             }
+            if (this.stacks === undefined || this.speedBins === undefined)
+                return;
             const maxStackTotal = this.getMaxStackTotal(this.stacks);
             const xScale = d3.scaleBand()
                 .domain(d3.range(0, 360, 360 / this.numBins))