@axdspub/axiom-charts 0.0.19 → 0.0.23

package/library/Libraries/axiom/index.js

@@ -1,11 +1,12 @@
 import { RequestItem } from '@axdspub/axiom-ui-data-services';
-import { extent, bisector, sum } from 'd3-array';
+import { extent, sum } from 'd3-array';
 import { groupBy, debounce } from 'lodash';
 import { create } from 'd3-selection';
+import * as d3 from 'd3';
+import { bisector } from 'd3';
 import { scaleUtc, scaleLinear, scaleRadial } from 'd3-scale';
 import { axisLeft, axisBottom } from 'd3-axis';
 import { line, area, lineRadial, curveLinearClosed, pointRadial, areaRadial } from 'd3-shape';
-import * as d3 from 'd3';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -66,6 +67,10 @@ var EPlotTypes;
 class PlotRoot extends RequestItem {
     constructor(props) {
         super(props);
+        this.scrubSettingsDefaults = {
+            enabled: true,
+            axis: EChartAxes.x
+        };
         this.id = props.id;
         this.type = props.type;
         this.chart = props.chart;
@@ -74,6 +79,7 @@ class PlotRoot extends RequestItem {
         this.scrubbing = props.scrubbing;
         this.onDataLoad = props.onDataLoad;
         this.axisSettings = props.axisSettings;
+        this.scrubSettings = Object.assign(Object.assign({}, this.scrubSettingsDefaults), props.scrubSettings);
         this.runtime = {};
     }
     getAxisSetting(axis) {
@@ -167,12 +173,17 @@ class PlotRoot extends RequestItem {
             this.data = yield this.getData();
         });
     }
-    drawScrubbing(mouseX) {
-        console.log('drawScrubbing not implemented');
+    onLegendReady(legendItems) {
+        const chart = this.chart;
+        chart.emitPlotLegendReady(this.id, legendItems);
     }
-    getScrubPosition(mouseX) {
-        console.log('getScrubPosition not implemented');
-        return undefined;
+    onScrub(scrubData) {
+        const chart = this.chart;
+        chart.emitPlotScrub(this.id, scrubData);
+    }
+    onScrubEnd() {
+        const chart = this.chart;
+        chart.emitPlotScrubEnd(this.id);
     }
     destroy() {
     }
@@ -184,8 +195,9 @@ class ChartRoot {
         this.settings = props.settings;
         this.element = props.element;
         this.onPlotDataLoad = props.onPlotDataLoad;
-        this.onScrub = props.onScrub;
-        this.onScrubEnd = props.onScrubEnd;
+        this.onPlotLegendReady = props.onPlotLegendReady;
+        this.onPlotScrub = props.onPlotScrub;
+        this.onPlotScrubEnd = props.onPlotScrubEnd;
         this.runtime = {
             prevWidth: 0,
             prevHeight: 0
@@ -201,6 +213,21 @@ class ChartRoot {
             })
         } */
     }
+    emitPlotLegendReady(plotId, legendItems) {
+        if (this.onPlotLegendReady === undefined)
+            return;
+        this.onPlotLegendReady(plotId, legendItems);
+    }
+    emitPlotScrub(plotId, scrubData) {
+        if (this.onPlotScrub === undefined)
+            return;
+        this.onPlotScrub(plotId, scrubData);
+    }
+    emitPlotScrubEnd(plotId) {
+        if (this.onPlotScrubEnd === undefined)
+            return;
+        this.onPlotScrubEnd(plotId);
+    }
     onError(e) {
     }
     onResize(prevWidth, prevHeight) {
@@ -412,10 +439,6 @@ class AxiomPlotRoot extends PlotRoot {
 }
 
 class AxiomLine extends AxiomPlotRoot {
-    constructor() {
-        super(...arguments);
-        this.addedScrubbingListener = false;
-    }
     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 : {};
@@ -427,7 +450,10 @@ class AxiomLine extends AxiomPlotRoot {
         };
     }
     draw() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        const _super = Object.create(null, {
+            onLegendReady: { get: () => super.onLegendReady }
+        });
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
         return __awaiter(this, void 0, void 0, function* () {
             const style = this.style !== undefined ? this.style : {};
             if (this.parsedData === undefined) {
@@ -486,75 +512,49 @@ class AxiomLine extends AxiomPlotRoot {
             }
             line$1(this.parsedData);
             ctx.stroke();
+            if (((_m = this.axes) === null || _m === void 0 ? void 0 : _m.y) !== undefined) {
+                _super.onLegendReady.call(this, [{
+                        id: this.axes.y.key,
+                        label: (_o = chart.getAxisLabel(this.axes.y, 'y')) !== null && _o !== void 0 ? _o : this.axes.y.key,
+                        style: { backgroundColor: ctx.strokeStyle }
+                    }]);
+            }
+            this.setupScrubbing();
         });
     }
-    getScrubPosition(mouseX) {
-        if (this.xScale === undefined || this.yScale === undefined || this.parsedData === undefined || this.offset === undefined) {
-            return undefined;
-        }
-        const xAccessor = this.getAccessorAtAxis('x');
-        const yAccessor = this.getAccessorAtAxis('y');
-        if (xAccessor === undefined || yAccessor === undefined) {
-            return undefined;
-        }
-        const scrubValue = this.xScale.invert(mouseX - this.offset.x);
-        const bisect = bisector((row) => xAccessor(row)).center;
-        const bisectIndex = bisect(this.parsedData, scrubValue);
-        const nearestRow = this.getNearestRow(bisectIndex, scrubValue, this.parsedData, xAccessor, yAccessor);
-        const bisected = nearestRow;
-        const xValue = xAccessor(bisected);
-        const xPosition = this.xScale(xValue) + this.offset.x;
-        const yValue = yAccessor(nearestRow);
-        const yPosition = this.yScale(yValue) + this.offset.y;
-        return {
-            xPosition,
-            xValue,
-            yPosition,
-            yValue
-        };
-    }
-    getNearestRow(bisectIndex, scrubValue, parsedData, xAccessor, yAccessor) {
-        const nonEmptyRows = parsedData.filter(row => yAccessor(row) !== null && yAccessor(row) !== undefined);
-        let minDistance = Number.MAX_VALUE;
-        let nearestRow = parsedData[bisectIndex];
-        for (let i = 0; i < nonEmptyRows.length; i += 1) {
-            const current = xAccessor(nonEmptyRows[i]);
-            const distance = Math.abs(+current - +scrubValue);
-            if (distance < minDistance) {
-                minDistance = distance;
-                nearestRow = nonEmptyRows[i];
-            }
+    setupScrubbing() {
+        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(); });
         }
-        return nearestRow;
     }
-    drawScrubbing(mouseX) {
+    onMouseScrub(event) {
         const chart = this.chart;
-        const ctx = chart.getCanvasContext();
-        if (ctx === null) {
-            return undefined;
+        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 scrubPosition = this.getScrubPosition(mouseX);
-        if (scrubPosition === undefined)
+        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;
-        const { xPosition, yPosition } = scrubPosition;
-        this.drawScrubCircle(xPosition, yPosition, ctx);
-        this.drawScrubLine(xPosition, ctx);
-    }
-    drawScrubCircle(x, y, ctx) {
-        ctx.beginPath();
-        ctx.setLineDash([]);
-        ctx.arc(x, y, 6, 0, 2 * Math.PI, true);
-        ctx.strokeStyle = this.getStrokeStyle();
-        ctx.lineWidth = this.getLineWidth();
-        ctx.stroke();
-    }
-    drawScrubLine(x, ctx) {
-        const lineHeight = this.chart.settings.height - this.chart.settings.margin.bottom;
-        ctx.setLineDash([1, 1]);
-        ctx.beginPath();
-        ctx.moveTo(x, 0);
-        ctx.lineTo(x, lineHeight);
-        ctx.stroke();
+        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 : {};
@@ -605,7 +605,10 @@ class AxiomArea extends AxiomPlotRoot {
         };
     }
     draw() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        const _super = Object.create(null, {
+            onLegendReady: { get: () => super.onLegendReady }
+        });
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
         return __awaiter(this, void 0, void 0, function* () {
             const style = this.style !== undefined ? this.style : {};
             const data = yield this.getData();
@@ -673,18 +676,22 @@ class AxiomArea extends AxiomPlotRoot {
             ctx.beginPath();
             area$1(parsedData);
             ctx.fill();
+            if (((_m = this.axes) === null || _m === void 0 ? void 0 : _m.y) !== undefined) {
+                _super.onLegendReady.call(this, [{
+                        id: this.axes.y.key,
+                        label: (_o = chart.getAxisLabel(this.axes.y, 'y')) !== null && _o !== void 0 ? _o : this.axes.y.key,
+                        style: { backgroundColor: ctx.fillStyle }
+                    }]);
+            }
         });
     }
-    drawScrubbing(mouseX) {
-        console.error('AxiomArea.drawScrubbing not implemented');
-    }
-    getScrubPosition(mouseX) {
-        console.error('AxiomArea.getScrubPosition not implemented');
-        return undefined;
-    }
 }
 
 class AxiomScatter extends AxiomPlotRoot {
+    constructor() {
+        super(...arguments);
+        this.circleClass = `${this.id}-scrub-circle`;
+    }
     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 : {};
@@ -696,11 +703,14 @@ class AxiomScatter extends AxiomPlotRoot {
         };
     }
     draw() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        const _super = Object.create(null, {
+            onLegendReady: { get: () => super.onLegendReady }
+        });
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
         return __awaiter(this, void 0, void 0, function* () {
             const style = this.style !== undefined ? this.style : {};
             const data = yield this.getData();
-            const parsedData = (_a = data === null || data === void 0 ? void 0 : data.parsed) === null || _a === void 0 ? void 0 : _a.data;
+            this.parsedData = (_a = data === null || data === void 0 ? void 0 : data.parsed) === null || _a === void 0 ? void 0 : _a.data;
             const xAccessor = this.getAccessorAtAxis('x');
             const yAccessor = this.getAccessorAtAxis('y');
             const chart = this.chart;
@@ -710,24 +720,28 @@ class AxiomScatter extends AxiomPlotRoot {
             }
             const xAxisScale = (_c = (_b = this === null || this === void 0 ? void 0 : this.axes) === null || _b === void 0 ? void 0 : _b.x) === null || _c === void 0 ? void 0 : _c.scale;
             const yAxisScale = (_e = (_d = this === null || this === void 0 ? void 0 : this.axes) === null || _d === void 0 ? void 0 : _d.y) === null || _e === void 0 ? void 0 : _e.scale;
-            if (xAxisScale === undefined || yAxisScale === undefined || parsedData === undefined || xAccessor === undefined || yAccessor === undefined) {
+            if (xAxisScale === undefined || yAxisScale === undefined || this.parsedData === undefined || xAccessor === undefined || yAccessor === undefined) {
                 return undefined;
             }
-            const offset = {
+            this.offset = {
                 x: ((_h = (_g = (_f = this === null || this === void 0 ? void 0 : this.axes) === null || _f === void 0 ? void 0 : _f.x) === null || _g === void 0 ? void 0 : _g.offset) === null || _h === void 0 ? void 0 : _h.x) !== undefined ? this.axes.x.offset.x : 0,
                 y: ((_l = (_k = (_j = this === null || this === void 0 ? void 0 : this.axes) === null || _j === void 0 ? void 0 : _j.y) === null || _k === void 0 ? void 0 : _k.offset) === null || _l === void 0 ? void 0 : _l.y) !== undefined ? this.axes.y.offset.y : 0
             };
-            const xScale = chart.getD3XScale(xAxisScale);
+            this.xScale = chart.getD3XScale(xAxisScale);
             const xPosition = (d) => {
+                if (this.xScale === undefined || this.offset === undefined)
+                    return 0;
                 const v = xAccessor(d);
-                const p = xScale(v);
-                return p === undefined ? 0 : (p + offset.x);
+                const p = this.xScale(v);
+                return p === undefined ? 0 : (p + this.offset.x);
             };
-            const yScale = chart.getD3YScale(yAxisScale);
+            this.yScale = chart.getD3YScale(yAxisScale);
             const yPosition = (d) => {
+                if (this.yScale === undefined || this.offset === undefined)
+                    return 0;
                 const v = yAccessor(d);
-                const p = yScale(v);
-                return p === undefined ? 0 : (p + offset.y);
+                const p = this.yScale(v);
+                return p === undefined ? 0 : (p + this.offset.y);
             };
             const isDefined = (d) => {
                 const v = yAccessor(d);
@@ -739,7 +753,7 @@ class AxiomScatter extends AxiomPlotRoot {
             const radius = style.radius !== undefined ? style.radius : 2;
             ctx.lineWidth = (style.strokeWidth !== undefined || style.strokeColor !== undefined) ? ((style.strokeWidth !== undefined ? style.strokeWidth : 1) + radius) : 0;
             ctx.fillStyle = style.fill !== undefined ? style.fill : '#666';
-            parsedData.forEach(d => {
+            this.parsedData.forEach(d => {
                 if (isDefined(d)) {
                     ctx.beginPath();
                     ctx.arc(xPosition(d), yPosition(d), radius, 0, 2 * Math.PI);
@@ -747,13 +761,52 @@ class AxiomScatter extends AxiomPlotRoot {
                     ctx.fill();
                 }
             });
+            if (((_m = this.axes) === null || _m === void 0 ? void 0 : _m.y) !== undefined) {
+                _super.onLegendReady.call(this, [{
+                        id: this.axes.y.key,
+                        label: (_o = chart.getAxisLabel(this.axes.y, 'y')) !== null && _o !== void 0 ? _o : this.axes.y.key,
+                        style: {
+                            backgroundColor: ctx.fillStyle,
+                            border: `1px solid ${ctx.strokeStyle}`
+                        }
+                    }]);
+            }
+            this.setupScrubbing();
         });
     }
-    getScrubPosition(mouseX) {
-        throw new Error('Method not implemented.');
+    setupScrubbing() {
+        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(); });
+        }
     }
-    drawScrubbing(mouseX) {
-        throw new Error('Method not implemented.');
+    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);
+    }
+    onScrubEnd() {
+        this.chart.erasePlotScrub(this.id);
+        super.onScrubEnd();
     }
 }
 
@@ -770,6 +823,9 @@ class AxiomBar extends AxiomPlotRoot {
         }
     }
     draw() {
+        const _super = Object.create(null, {
+            onLegendReady: { get: () => super.onLegendReady }
+        });
         var _a, _b, _c, _d, _e;
         return __awaiter(this, void 0, void 0, function* () {
             const dataResponse = yield this.getData();
@@ -815,9 +871,6 @@ class AxiomBar extends AxiomPlotRoot {
             // Colors
             const fillColors = (_e = (_d = this.style) === null || _d === void 0 ? void 0 : _d.colors) !== null && _e !== void 0 ? _e : d3.schemeTableau10;
             const color = d3.scaleOrdinal(fillColors).domain(subgroups);
-            // TODO use real data
-            // @ts-expect-error just for testing
-            this.emitDataLoad(parsedData, color);
             const svg = chartElements.svg;
             const g = svg.insert('g');
             const x = this.getXScale(plotXStart, plotXEnd, groups);
@@ -828,24 +881,6 @@ class AxiomBar extends AxiomPlotRoot {
                 .domain(subgroups)
                 .range([0, x.bandwidth()])
                 .padding(0.05);
-            const onMouseEnterOrMove = (event, data) => {
-                if (this.chart.onScrub === undefined)
-                    return;
-                const scrubPositions = {
-                    [this.id]: {
-                        xPosition: event.offsetX,
-                        xValue: null,
-                        yPosition: event.offsetY,
-                        yValue: data.value
-                    }
-                };
-                this.chart.onScrub(scrubPositions);
-            };
-            const onMouseLeave = () => {
-                if (this.chart.onScrubEnd === undefined)
-                    return;
-                this.chart.onScrubEnd();
-            };
             // Make Bar Groups
             g.append('g')
                 .attr('width', plotWidth)
@@ -857,11 +892,12 @@ class AxiomBar extends AxiomPlotRoot {
                 .attr('transform', d => `translate(${Number(x(xAccessor(d)))}, 0)`)
                 .selectAll('rect')
                 .data(d => Object.keys(this.dimensions).filter(key => key !== 'x').map((key) => {
-                var _a, _b, _c;
+                var _a, _b, _c, _d, _e;
                 return {
                     label: (_a = this.dimensions[key].label) !== null && _a !== void 0 ? _a : key,
                     key: (_b = this.dimensions[key].property) !== null && _b !== void 0 ? _b : '',
-                    value: d[(_c = this.dimensions[key].property) !== null && _c !== void 0 ? _c : '']
+                    x: d[(_d = (_c = this.dimensions.x) === null || _c === void 0 ? void 0 : _c.property) !== null && _d !== void 0 ? _d : 'x'],
+                    value: d[(_e = this.dimensions[key].property) !== null && _e !== void 0 ? _e : '']
                 };
             }))
                 .enter()
@@ -872,9 +908,9 @@ class AxiomBar extends AxiomPlotRoot {
                 .attr('height', d => plotHeight - Number(subgroupScales[d.key](d.value)))
                 .attr('fill', d => color(d.key))
                 .classed('bar', true)
-                .on('mouseover', onMouseEnterOrMove)
-                .on('mousemove', onMouseEnterOrMove)
-                .on('mouseleave', onMouseLeave);
+                .on('mouseover', (event, data) => { this.onMouseScrub(event, data); })
+                .on('mousemove', (event, data) => { this.onMouseScrub(event, data); })
+                .on('mouseleave', () => { this.onScrubEnd(); });
             // X Axis
             const xAxis = g.append('g')
                 .attr('transform', `translate(0, ${plotHeight})`)
@@ -911,6 +947,28 @@ class AxiomBar extends AxiomPlotRoot {
                     .attr('font-weight', 800)
                     .text(y2Label);
             }
+            _super.onLegendReady.call(this, Object.keys(this.dimensions).filter(key => key !== 'x').map(key => {
+                var _a, _b;
+                return ({
+                    id: key,
+                    label: (_a = this.dimensions[key].label) !== null && _a !== void 0 ? _a : key,
+                    style: { backgroundColor: this.dimensions[key].property === undefined ? '' : color((_b = this.dimensions[key].property) !== null && _b !== void 0 ? _b : '') }
+                });
+            }));
+        });
+    }
+    onMouseScrub(event, data) {
+        if (this.chart.onPlotScrub === undefined)
+            return;
+        this.onScrub({
+            x: {
+                position: event.offsetX,
+                value: data.x
+            },
+            y: {
+                position: event.offsetY,
+                value: data.value
+            }
         });
     }
     getXScale(plotXStart, plotXEnd, groups) {
@@ -949,26 +1007,6 @@ class AxiomBar extends AxiomPlotRoot {
         }
         return subgroupScales;
     }
-    getScrubPosition(mouseX) { return undefined; }
-    drawScrubbing(mouseX) { }
-    emitDataLoad(data, color) {
-        if (this.onDataLoad !== undefined) {
-            const legend = Object.keys(this.dimensions).filter(key => key !== 'x').map(key => {
-                var _a, _b;
-                return ({
-                    key,
-                    label: (_a = this.dimensions[key].label) !== null && _a !== void 0 ? _a : key,
-                    color: color((_b = this.dimensions[key].property) !== null && _b !== void 0 ? _b : '')
-                });
-            });
-            const barPlotLoadEvent = {
-                plotId: this.id,
-                data,
-                properties: { legend }
-            };
-            this.onDataLoad(barPlotLoadEvent);
-        }
-    }
 }
 
 const chartTypes = {
@@ -1101,13 +1139,15 @@ class AxiomChart extends ChartRoot {
                 axisSelection.append('g').call(axisG);
             }
         });
-        this.showYLabels(axes, this.plots);
+        if (this.settings.layout === 'timeseries') {
+            this.showYLabelsForTimeSeries(axes, this.plots);
+        }
     }
     getAxisLabel(axis, dimensionKey) {
         var _a;
         return (_a = axis.plots[0]) === null || _a === void 0 ? void 0 : _a.dimensions[dimensionKey].label;
     }
-    showYLabels(axes, plots) {
+    showYLabelsForTimeSeries(axes, plots) {
         const yLabelsAreSupportedForPlotType = [EPlotTypes.line, EPlotTypes.scatter, EPlotTypes.seasonal, EPlotTypes.area]
             .find(type => type === plots[0].type) !== undefined;
         if (plots.length === 0 || !yLabelsAreSupportedForPlotType) {
@@ -1202,7 +1242,8 @@ class AxiomChart extends ChartRoot {
             .attr('viewBox', [0, 0, width, height])
             .attr('width', width)
             .attr('height', height)
-            .style('position', 'absolute');
+            .style('position', 'absolute')
+            .style('z-index', 20);
         const canvas = create('canvas')
             .attr('width', width)
             .attr('height', height)
@@ -1219,6 +1260,128 @@ class AxiomChart extends ChartRoot {
         }
         return this.chartElements;
     }
+    drawPlotScrubbing(plotId, scrubPosition, style, scrubSettings) {
+        const chartElements = this.getChartElements();
+        if (chartElements === undefined)
+            return;
+        if (scrubPosition === undefined || scrubPosition.x === undefined || scrubPosition.y === undefined)
+            return;
+        const { x, y } = scrubPosition;
+        this.drawScrubLine(plotId, scrubPosition, chartElements.svg, style, scrubSettings);
+        this.drawPlotScrubCircle(plotId, x === null || x === void 0 ? void 0 : x.position, y === null || y === void 0 ? void 0 : y.position, chartElements.svg, style);
+    }
+    drawScrubLine(plotId, scrubPosition, svg, style, scrubSettings) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const scrubLineClass = this.getPlotScrubLineClass(plotId);
+        svg.select(`.${scrubLineClass}`).remove();
+        const line = svg.insert('line')
+            .classed(scrubLineClass, true);
+        if ((scrubSettings === null || scrubSettings === void 0 ? void 0 : scrubSettings.axis) === EChartAxes.x) {
+            const lineLength = this.settings.height - this.settings.margin.bottom;
+            line.attr('x1', (_b = (_a = scrubPosition.x) === null || _a === void 0 ? void 0 : _a.position) !== null && _b !== void 0 ? _b : 0)
+                .attr('y1', 0)
+                .attr('x2', (_d = (_c = scrubPosition.x) === null || _c === void 0 ? void 0 : _c.position) !== null && _d !== void 0 ? _d : 0)
+                .attr('y2', lineLength)
+                .attr('stroke', this.getPlotStrokeColor(style))
+                .style('stroke-width', this.getPlotStrokeWidth(style));
+        }
+        else {
+            const width = this.getChartWidth();
+            const left = this.settings.margin.left;
+            const lineLength = width - left;
+            line.attr('x1', this.settings.margin.left)
+                .attr('y1', (_f = (_e = scrubPosition.y) === null || _e === void 0 ? void 0 : _e.position) !== null && _f !== void 0 ? _f : 0)
+                .attr('x2', width + lineLength)
+                .attr('y2', (_h = (_g = scrubPosition.y) === null || _g === void 0 ? void 0 : _g.position) !== null && _h !== void 0 ? _h : 0)
+                .attr('stroke', this.getPlotStrokeColor(style))
+                .style('stroke-width', this.getPlotStrokeWidth(style));
+        }
+    }
+    drawPlotScrubCircle(plotId, x, y, svg, style) {
+        svg.select(`.${this.getPlotScrubCircleClass(plotId)}`).remove();
+        svg.insert('circle')
+            .classed(this.getPlotScrubCircleClass(plotId), true)
+            .attr('r', 6)
+            .attr('cx', x)
+            .attr('cy', y)
+            .style('stroke', this.getPlotStrokeColor(style))
+            .style('stroke-width', this.getPlotStrokeWidth(style))
+            .style('fill-opacity', '0');
+    }
+    erasePlotScrub(plotId) {
+        if (this.chartElements === undefined)
+            return;
+        this.chartElements.svg.select(`.${this.getPlotScrubCircleClass(plotId)}`).remove();
+        this.chartElements.svg.select(`.${this.getPlotScrubLineClass(plotId)}`).remove();
+    }
+    getScrubEvent(event, scrubAxis, xScale, yScale, xAccessor, yAccessor, rows, offsetSettings) {
+        let mousePosition;
+        let offset;
+        let scrubbingScale;
+        let scrubbingAccessor;
+        let valueAccessor;
+        if (scrubAxis === EChartAxes.x) {
+            mousePosition = event.offsetX;
+            offset = offsetSettings.x;
+            scrubbingScale = xScale;
+            scrubbingAccessor = xAccessor;
+            valueAccessor = yAccessor;
+        }
+        else {
+            mousePosition = event.offsetY;
+            offset = offsetSettings.y;
+            scrubbingScale = yScale;
+            scrubbingAccessor = yAccessor;
+            valueAccessor = xAccessor;
+        }
+        const scrubValue = scrubbingScale.invert(mousePosition - offset);
+        const bisect = bisector((row) => scrubbingAccessor(row)).center;
+        const bisectIndex = bisect(rows, scrubValue);
+        const nearestRow = this.getDataRowNearestToScrub(bisectIndex, scrubValue, rows, valueAccessor, scrubbingAccessor);
+        const bisected = nearestRow;
+        const xValue = xAccessor(bisected);
+        const xPosition = xScale(xValue) + offsetSettings.x;
+        const yValue = yAccessor(nearestRow);
+        const yPosition = yScale(yValue) + offsetSettings.y;
+        return {
+            x: {
+                position: xPosition,
+                value: xValue
+            },
+            y: {
+                position: yPosition,
+                value: yValue
+            }
+        };
+    }
+    getDataRowNearestToScrub(bisectIndex, scrubValue, parsedData, valueAccessor, scrubbingAccessor) {
+        const nonEmptyRows = parsedData.filter(row => valueAccessor(row) !== null && valueAccessor(row) !== undefined);
+        let minDistance = Number.MAX_VALUE;
+        let nearestRow = parsedData[bisectIndex];
+        for (let i = 0; i < nonEmptyRows.length; i += 1) {
+            const current = scrubbingAccessor(nonEmptyRows[i]);
+            const distance = Math.abs(+current - +scrubValue);
+            if (distance < minDistance) {
+                minDistance = distance;
+                nearestRow = nonEmptyRows[i];
+            }
+        }
+        return nearestRow;
+    }
+    getPlotStrokeColor(style) {
+        var _a;
+        return (_a = style === null || style === void 0 ? void 0 : style.strokeColor) !== null && _a !== void 0 ? _a : '#333';
+    }
+    getPlotStrokeWidth(style) {
+        var _a;
+        return (_a = style === null || style === void 0 ? void 0 : style.strokeWidth) !== null && _a !== void 0 ? _a : 1;
+    }
+    getPlotScrubCircleClass(plotId) {
+        return `${plotId}-scrub-circle`;
+    }
+    getPlotScrubLineClass(plotId) {
+        return `${plotId}-scrub-line`;
+    }
     attachChartElements() {
         const chartElements = this.getChartElements();
         if (this.element !== undefined && chartElements !== undefined) {
@@ -1231,7 +1394,6 @@ class AxiomChart extends ChartRoot {
                 this.element.append(canvasNode);
             }
         }
-        this.addScrubbing();
     }
     createPlot(plot) {
         const props = this.getPlotImplementationProps(plot);
@@ -1255,67 +1417,6 @@ class AxiomChart extends ChartRoot {
             ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
         }
     }
-    addScrubbing() {
-        const ctx = this.getCanvasContext();
-        if (ctx === null) {
-            return;
-        }
-        ctx.canvas.addEventListener('touchmove', event => {
-            const touch = event.touches[0];
-            const touchOffset = 20; // TODO: figure out why touch.clientX is always off to the right
-            this.onScrubTriggered(touch.clientX - touchOffset);
-        });
-        ctx.canvas.addEventListener('touchend', event => { this.onScrubEndTriggered(); });
-        ctx.canvas.addEventListener('mousemove', event => { this.onScrubTriggered(event.offsetX); });
-        ctx.canvas.addEventListener('mouseleave', event => { this.onScrubEndTriggered(); });
-    }
-    onScrubTriggered(cursorX) {
-        if (this.plotImplementations === undefined)
-            return;
-        const plotsWithScrubbingEnabled = this.plotImplementations.filter(plot => {
-            return plot.scrubbing !== undefined && plot.scrubbing && plot.type === EPlotTypes.line;
-        });
-        const plotScrubPositions = this.getScrubPositions(cursorX, plotsWithScrubbingEnabled);
-        if (this.onScrub !== undefined) {
-            this.onScrub(plotScrubPositions);
-        }
-        this.runtime.busy = true;
-        this.clearCanvas();
-        const drawPromises = this.plotImplementations.map((plot) => __awaiter(this, void 0, void 0, function* () { yield plot.draw(); }));
-        Promise.all(drawPromises).then(() => {
-            plotsWithScrubbingEnabled.forEach(plot => {
-                const position = plotScrubPositions[plot.id];
-                plot.drawScrubbing(position.xPosition);
-            });
-            this.runtime.busy = false;
-        }).catch(error => {
-            console.error(error);
-        });
-    }
-    onScrubEndTriggered() {
-        this.removeScrubbers();
-        if (this.onScrubEnd !== undefined) {
-            this.onScrubEnd();
-        }
-    }
-    removeScrubbers() {
-        if (this.plotImplementations === undefined)
-            return;
-        this.runtime.busy = true;
-        this.clearCanvas();
-        const drawPromises = this.plotImplementations.map((plot) => __awaiter(this, void 0, void 0, function* () { yield plot.draw(); }));
-        void Promise.all(drawPromises);
-    }
-    getScrubPositions(mouseX, plots) {
-        const plotScrubPositions = {};
-        plots.forEach(plot => {
-            const scrubPosition = plot.getScrubPosition(mouseX);
-            if (scrubPosition !== undefined) {
-                plotScrubPositions[plot.id] = scrubPosition;
-            }
-        });
-        return plotScrubPositions;
-    }
     init(drawImmediately = false) {
         const _super = Object.create(null, {
             init: { get: () => super.init }
@@ -1334,7 +1435,10 @@ class AxiomChart extends ChartRoot {
 
 class AxiomRadialLine extends AxiomLine {
     draw() {
-        var _a, _b, _c, _d, _e;
+        const _super = Object.create(null, {
+            onLegendReady: { get: () => super.onLegendReady }
+        });
+        var _a, _b, _c, _d, _e, _f, _g;
         return __awaiter(this, void 0, void 0, function* () {
             const style = this.style !== undefined ? this.style : {};
             const data = yield this.getData();
@@ -1378,21 +1482,32 @@ class AxiomRadialLine extends AxiomLine {
                 .curve(curveLinearClosed);
             const radialData = parsedData.slice();
             const chartOffset = chart.getChartOffset();
+            const stroke = style.strokeColor !== undefined ? style.strokeColor : '#333';
             svg.append('g')
                 .attr('transform', `translate(${chartOffset.x},${chartOffset.y})`)
                 .attr('class', 'radial-line')
                 .append('path')
                 .attr('fill', 'none')
-                .attr('stroke', style.strokeColor !== undefined ? style.strokeColor : '#333')
+                .attr('stroke', stroke)
                 .attr('stroke-width', style.strokeWidth !== undefined ? style.strokeWidth : 1)
                 .attr('d', line(radialData));
+            if (((_f = this.axes) === null || _f === void 0 ? void 0 : _f.y) !== undefined) {
+                _super.onLegendReady.call(this, [{
+                        id: this.axes.y.key,
+                        label: (_g = chart.getAxisLabel(this.axes.y, 'y')) !== null && _g !== void 0 ? _g : this.axes.y.key,
+                        style: { backgroundColor: stroke }
+                    }]);
+            }
         });
     }
 }
 
 class AxiomRadialScatter extends AxiomLine {
     draw() {
-        var _a, _b, _c, _d, _e;
+        const _super = Object.create(null, {
+            onLegendReady: { get: () => super.onLegendReady }
+        });
+        var _a, _b, _c, _d, _e, _f, _g;
         return __awaiter(this, void 0, void 0, function* () {
             // const style = this.style !== undefined ? this.style : {}
             const data = yield this.getData();
@@ -1431,23 +1546,38 @@ class AxiomRadialScatter extends AxiomLine {
                 .attr('class', 'radial-scatter');
             const style = this.style !== undefined ? this.style : {};
             const radius = style.radius !== undefined ? style.radius : 2;
+            const fill = style.fill !== undefined ? style.fill : '#333';
+            const stroke = style.strokeColor !== undefined ? style.strokeColor : '#CCC';
             parsedData.forEach(d => {
                 const pt = pointRadial(xPosition(d), yPosition(d));
                 g.append('circle')
                     .attr('r', radius * 2)
-                    .attr('fill', style.fill !== undefined ? style.fill : '#333')
-                    .attr('stroke', style.strokeColor !== undefined ? style.strokeColor : '#CCC')
+                    .attr('fill', fill)
+                    .attr('stroke', stroke)
                     .attr('stroke-width', (style.strokeWidth !== undefined || style.strokeColor !== undefined) ? ((style.strokeWidth !== undefined ? style.strokeWidth : 1)) : 0)
                     .attr('cx', pt[0] + chart.settings.margin.left)
                     .attr('cy', pt[1] + chart.settings.margin.top);
             });
+            if (((_f = this.axes) === null || _f === void 0 ? void 0 : _f.y) !== undefined) {
+                _super.onLegendReady.call(this, [{
+                        id: this.axes.y.key,
+                        label: (_g = chart.getAxisLabel(this.axes.y, 'y')) !== null && _g !== void 0 ? _g : this.axes.y.key,
+                        style: {
+                            backgroundColor: fill,
+                            border: `1px solid ${stroke}`
+                        }
+                    }]);
+            }
         });
     }
 }
 
 class AxiomRadialArea extends AxiomArea {
     draw() {
-        var _a, _b, _c, _d, _e;
+        const _super = Object.create(null, {
+            onLegendReady: { get: () => super.onLegendReady }
+        });
+        var _a, _b, _c, _d, _e, _f, _g;
         return __awaiter(this, void 0, void 0, function* () {
             const style = this.style !== undefined ? this.style : {};
             const data = yield this.getData();
@@ -1502,21 +1632,172 @@ class AxiomRadialArea extends AxiomArea {
                 .curve(curveLinearClosed);
             const radialData = parsedData.slice();
             const chartOffset = chart.getChartOffset();
+            const fill = style.fill !== undefined ? style.fill : '#EDEDED99';
             svg.insert('g', 'g.axis')
                 .attr('transform', `translate(${chartOffset.x},${chartOffset.y})`)
                 .attr('class', 'radial-area')
                 .append('path')
-                .attr('fill', style.fill !== undefined ? style.fill : '#EDEDED99')
+                .attr('fill', fill)
                 .attr('stroke-width', style.strokeWidth !== undefined ? style.strokeWidth : 1)
                 .attr('d', area(radialData));
+            if (((_f = this.axes) === null || _f === void 0 ? void 0 : _f.y) !== undefined) {
+                _super.onLegendReady.call(this, [{
+                        id: this.axes.y.key,
+                        label: (_g = chart.getAxisLabel(this.axes.y, 'y')) !== null && _g !== void 0 ? _g : this.axes.y.key,
+                        style: { backgroundColor: fill }
+                    }]);
+            }
         });
     }
-    drawScrubbing(mouseX) {
-        console.error('AxiomRadialArea.drawScrubbing not implemented');
+}
+
+class AxiomRadialRose extends AxiomPlotRoot {
+    constructor() {
+        super(...arguments);
+        this.data = undefined;
+        this.numBins = 16;
+        this.speedBins = d3.range(1, 8, 1);
+        this.stacks = undefined;
     }
-    getScrubPosition(mouseX) {
-        console.error('AxiomRadialArea.getScrubPosition not implemented');
-        return undefined;
+    setStackedData() {
+        var _a, _b;
+        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);
+            }
+        });
+    }
+    getDomain(_axis) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.setStackedData();
+            if (this.stacks === undefined)
+                return [0, 10];
+            return [0, this.getMaxStackTotal(this.stacks)];
+        });
+    }
+    getStackedData(parsedData) {
+        const degreesPerBin = 360 / this.numBins;
+        const directionBins = d3.range(0, 360, degreesPerBin);
+        const speedBins = this.speedBins;
+        const stacks = [];
+        directionBins.forEach(direction => {
+            const newBin = {
+                minDirection: direction
+            };
+            speedBins.forEach(bin => { newBin[bin] = 0; });
+            stacks.push(newBin);
+        });
+        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);
+                stack[speedBin] += 1;
+            }
+        });
+        return stacks;
+    }
+    getMaxStackTotal(stacks) {
+        var _a;
+        return (_a = d3.max(stacks, stack => {
+            return this.speedBins.reduce((sum, current) => sum + stack[current], 0);
+        })) !== null && _a !== void 0 ? _a : 0;
+    }
+    draw() {
+        const _super = Object.create(null, {
+            onLegendReady: { get: () => super.onLegendReady }
+        });
+        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;
+            const x1Accessor = xAccessors.x1;
+            const yAccessors = this.getAccessorsAtAxis('y');
+            const yAccessor = this.getAccessorAtAxis('y');
+            const y0Accessor = yAccessors.y0;
+            const y1Accessor = yAccessors.y1;
+            const chart = this.chart;
+            const chartElements = chart.getChartElements();
+            if (chartElements === undefined || chartElements.svg === null) {
+                return undefined;
+            }
+            const svg = chartElements.svg;
+            const xAxisScale = (_b = (_a = this === null || this === void 0 ? void 0 : this.axes) === null || _a === void 0 ? void 0 : _a.x) === null || _b === void 0 ? void 0 : _b.scale;
+            const yAxisScale = (_d = (_c = this === null || this === void 0 ? void 0 : this.axes) === null || _c === void 0 ? void 0 : _c.y) === null || _d === void 0 ? void 0 : _d.scale;
+            if (xAxisScale === undefined ||
+                yAxisScale === undefined ||
+                (xAccessor === undefined && x0Accessor === undefined && x1Accessor === undefined) ||
+                (yAccessor === undefined && y0Accessor === undefined && y1Accessor === undefined)) {
+                console.log('Missing one of: xAxisScale, yAxisScale, parsedData, xAccessor(s), yAccessor(s)');
+                return undefined;
+            }
+            const maxStackTotal = this.getMaxStackTotal(this.stacks);
+            const xScale = d3.scaleBand()
+                .domain(d3.range(0, 360, 360 / this.numBins))
+                .range([0, 2 * Math.PI]);
+            const yScale = d3.scaleRadial()
+                .domain([0, maxStackTotal])
+                .range([chart.getInnerRadius(), chart.getOuterRadius()]);
+            const fillColors = (_f = (_e = this.style) === null || _e === void 0 ? void 0 : _e.colors) !== null && _f !== void 0 ? _f : d3.schemeTableau10;
+            const zScale = d3
+                .scaleOrdinal()
+                .range(fillColors);
+            const data = d3.stack().keys(this.speedBins.map(bin => String(bin)))(this.stacks);
+            const chartOffset = chart.getChartOffset();
+            const bandwidth = 2 * Math.PI / this.numBins;
+            svg.insert('g', 'g.axis')
+                .attr('transform', `translate(${chartOffset.x},${chartOffset.y})`)
+                .selectAll('g')
+                .data(data)
+                .enter().append('g')
+                .attr('fill', (d) => zScale(d.key))
+                .selectAll('path')
+                .data(d => d)
+                .enter().append('path')
+                .on('mouseover', (event, data) => { this.onMouseScrub(event, data); })
+                .on('mousemove', (event, data) => { this.onMouseScrub(event, data); })
+                .on('mouseleave', () => { this.onScrubEnd(); })
+                .attr('d', d3.arc()
+                .innerRadius(d => yScale(d[0]))
+                .outerRadius(d => yScale(d[1]))
+                .startAngle(d => { var _a; return ((_a = xScale(d.data.minDirection)) !== null && _a !== void 0 ? _a : 0) - (bandwidth / 2); })
+                .endAngle(d => { var _a; return ((_a = xScale(d.data.minDirection)) !== null && _a !== void 0 ? _a : 0) + bandwidth / 2; })
+                .padAngle(0.01)
+                .padRadius(chart.getInnerRadius()));
+            _super.onLegendReady.call(this, data.map((d, i) => {
+                var _a, _b;
+                return ({
+                    id: d.key,
+                    label: `< ${this.speedBins[i]} ${(_b = (_a = this.dimensions.z.displayUnits) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : ''}`,
+                    style: {
+                        backgroundColor: zScale(d.key)
+                    }
+                });
+            }));
+        });
+    }
+    onMouseScrub(event, data) {
+        if (this.chart.onPlotScrub === undefined)
+            return;
+        this.onScrub({
+            x: {
+                position: event.offsetX,
+                value: data.data.angle
+            },
+            y: {
+                position: event.offsetY,
+                value: Object.assign({}, data)
+            }
+        });
     }
 }
 
@@ -1617,6 +1898,7 @@ class AxiomRadialChart extends AxiomChart {
         return this.getChartOffset();
     }
     getXAxis(axis, _axisSettings) {
+        var _a, _b, _c;
         if (axis.scale === undefined) {
             return g => g;
         }
@@ -1627,7 +1909,7 @@ class AxiomRadialChart extends AxiomChart {
         const tickFormat = d3Scale.tickFormat();
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-expect-error
-        const ticks = d3Scale.ticks().map(tickFormat);
+        const ticks = (_c = (_b = (_a = this.settings.axes) === null || _a === void 0 ? void 0 : _a.x) === null || _b === void 0 ? void 0 : _b.ticks) !== null && _c !== void 0 ? _c : d3Scale.ticks().map(tickFormat);
         const rotateOffset = -90;
         const getRotate = (index, len) => {
             const r = (index * 360 / len);
@@ -1653,6 +1935,7 @@ class AxiomRadialChart extends AxiomChart {
                 .attr('x1', -5)
                 .attr('x2', outerRadius - innerRadius + 10))
                 .call(g => g.append('text')
+                .attr('text-anchor', 'middle')
                 .attr('transform', 'rotate(90)translate(0,16)')
                 .text((d) => d)));
             return g;
@@ -1670,553 +1953,10 @@ class AxiomRadialChart extends AxiomChart {
         else if (plot.type === 'area') {
             return new AxiomRadialArea(props);
         }
-        return new AxiomRadialLine(props);
-    }
-}
-
-var Direction;
-(function (Direction) {
-    Direction["N"] = "N";
-    Direction["NNE"] = "NNE";
-    Direction["NE"] = "NE";
-    Direction["ENE"] = "ENE";
-    Direction["E"] = "E";
-    Direction["ESE"] = "ESE";
-    Direction["SE"] = "SE";
-    Direction["SSE"] = "SSE";
-    Direction["S"] = "S";
-    Direction["SSW"] = "SSW";
-    Direction["SW"] = "SW";
-    Direction["WSW"] = "WSW";
-    Direction["W"] = "W";
-    Direction["WNW"] = "WNW";
-    Direction["NW"] = "NW";
-    Direction["NNW"] = "NNW";
-})(Direction || (Direction = {}));
-
-const DEFAULT_COLUMNS = ['angle', '0-1', '1-2', '2-3', '3-4', '4-5', '5-6', '6-7', '7+'];
-function classifyDir(direction) {
-    const dTh = 11.25;
-    let dir;
-    if (direction >= 360 - dTh || direction < dTh) {
-        dir = Direction.N;
-    }
-    else if (direction >= dTh && direction < dTh * 3) {
-        dir = Direction.NNE;
-    }
-    else if (direction >= dTh * 3 && direction < dTh * 5) {
-        dir = Direction.NE;
-    }
-    else if (direction >= dTh * 5 && direction < dTh * 7) {
-        dir = Direction.ENE;
-    }
-    else if (direction >= dTh * 7 && direction < dTh * 9) {
-        dir = Direction.E;
-    }
-    else if (direction >= dTh * 9 && direction < dTh * 11) {
-        dir = Direction.ESE;
-    }
-    else if (direction >= dTh * 11 && direction < dTh * 13) {
-        dir = Direction.SE;
-    }
-    else if (direction >= dTh * 13 && direction < dTh * 15) {
-        dir = Direction.SSE;
-    }
-    else if (direction >= dTh * 15 && direction < dTh * 17) {
-        dir = Direction.S;
-    }
-    else if (direction >= dTh * 17 && direction < dTh * 19) {
-        dir = Direction.SSW;
-    }
-    else if (direction >= dTh * 19 && direction < dTh * 21) {
-        dir = Direction.SW;
-    }
-    else if (direction >= dTh * 21 && direction < dTh * 23) {
-        dir = Direction.WSW;
-    }
-    else if (direction >= dTh * 23 && direction < dTh * 25) {
-        dir = Direction.W;
-    }
-    else if (direction >= dTh * 25 && direction < dTh * 27) {
-        dir = Direction.WNW;
-    }
-    else if (direction >= dTh * 27 && direction < dTh * 29) {
-        dir = Direction.NW;
-    }
-    else if (direction >= dTh * 29 && direction < dTh * 31) {
-        dir = Direction.NNW;
-    }
-    else {
-        throw new Error('over 360 or under 0');
-    }
-    return dir;
-}
-function getNewCounts() {
-    return {
-        N: {
-            '0-1': 0,
-            '1-2': 0,
-            '2-3': 0,
-            '3-4': 0,
-            '4-5': 0,
-            '5-6': 0,
-            '6-7': 0,
-            '7+': 0
-        },
-        NNE: {
-            '0-1': 0,
-            '1-2': 0,
-            '2-3': 0,
-            '3-4': 0,
-            '4-5': 0,
-            '5-6': 0,
-            '6-7': 0,
-            '7+': 0
-        },
-        NE: {
-            '0-1': 0,
-            '1-2': 0,
-            '2-3': 0,
-            '3-4': 0,
-            '4-5': 0,
-            '5-6': 0,
-            '6-7': 0,
-            '7+': 0
-        },
-        ENE: {
-            '0-1': 0,
-            '1-2': 0,
-            '2-3': 0,
-            '3-4': 0,
-            '4-5': 0,
-            '5-6': 0,
-            '6-7': 0,
-            '7+': 0
-        },
-        E: {
-            '0-1': 0,
-            '1-2': 0,
-            '2-3': 0,
-            '3-4': 0,
-            '4-5': 0,
-            '5-6': 0,
-            '6-7': 0,
-            '7+': 0
-        },
-        ESE: {
-            '0-1': 0,
-            '1-2': 0,
-            '2-3': 0,
-            '3-4': 0,
-            '4-5': 0,
-            '5-6': 0,
-            '6-7': 0,
-            '7+': 0
-        },
-        SE: {
-            '0-1': 0,
-            '1-2': 0,
-            '2-3': 0,
-            '3-4': 0,
-            '4-5': 0,
-            '5-6': 0,
-            '6-7': 0,
-            '7+': 0
-        },
-        SSE: {
-            '0-1': 0,
-            '1-2': 0,
-            '2-3': 0,
-            '3-4': 0,
-            '4-5': 0,
-            '5-6': 0,
-            '6-7': 0,
-            '7+': 0
-        },
-        S: {
-            '0-1': 0,
-            '1-2': 0,
-            '2-3': 0,
-            '3-4': 0,
-            '4-5': 0,
-            '5-6': 0,
-            '6-7': 0,
-            '7+': 0
-        },
-        SSW: {
-            '0-1': 0,
-            '1-2': 0,
-            '2-3': 0,
-            '3-4': 0,
-            '4-5': 0,
-            '5-6': 0,
-            '6-7': 0,
-            '7+': 0
-        },
-        SW: {
-            '0-1': 0,
-            '1-2': 0,
-            '2-3': 0,
-            '3-4': 0,
-            '4-5': 0,
-            '5-6': 0,
-            '6-7': 0,
-            '7+': 0
-        },
-        WSW: {
-            '0-1': 0,
-            '1-2': 0,
-            '2-3': 0,
-            '3-4': 0,
-            '4-5': 0,
-            '5-6': 0,
-            '6-7': 0,
-            '7+': 0
-        },
-        W: {
-            '0-1': 0,
-            '1-2': 0,
-            '2-3': 0,
-            '3-4': 0,
-            '4-5': 0,
-            '5-6': 0,
-            '6-7': 0,
-            '7+': 0
-        },
-        WNW: {
-            '0-1': 0,
-            '1-2': 0,
-            '2-3': 0,
-            '3-4': 0,
-            '4-5': 0,
-            '5-6': 0,
-            '6-7': 0,
-            '7+': 0
-        },
-        NW: {
-            '0-1': 0,
-            '1-2': 0,
-            '2-3': 0,
-            '3-4': 0,
-            '4-5': 0,
-            '5-6': 0,
-            '6-7': 0,
-            '7+': 0
-        },
-        NNW: {
-            '0-1': 0,
-            '1-2': 0,
-            '2-3': 0,
-            '3-4': 0,
-            '4-5': 0,
-            '5-6': 0,
-            '6-7': 0,
-            '7+': 0
-        }
-    };
-}
-function countPush(count, dir, speed) {
-    if (speed < 1) {
-        count[dir]['0-1'] = count[dir]['0-1'] + 1;
-    }
-    else if (speed < 2) {
-        count[dir]['1-2'] = count[dir]['1-2'] + 1;
-    }
-    else if (speed < 3) {
-        count[dir]['2-3'] = count[dir]['2-3'] + 1;
-    }
-    else if (speed < 4) {
-        count[dir]['3-4'] = count[dir]['3-4'] + 1;
-    }
-    else if (speed < 5) {
-        count[dir]['5-6'] = count[dir]['5-6'] + 1;
-    }
-    else if (speed < 6) {
-        count[dir]['6-7'] = count[dir]['6-7'] + 1;
-    }
-    else {
-        count[dir]['7+'] = count[dir]['7+'] + 1;
-    }
-}
-function calculateWindRoseFrequency(data) {
-    // const dataLength = data.direction.length
-    const count = getNewCounts();
-    data.direction.map((direction, index) => {
-        const speed = data.speed[index];
-        const dir = classifyDir(direction);
-        countPush(count, dir, speed);
-        return null;
-    });
-    const ret = Object.keys(count).map((key) => {
-        let total = 0;
-        const elements = Object.keys(count[key]).map((subkey) => {
-            // const E = count[key as Direction][subkey as SubKey] / data.direction.length
-            const E = count[key][subkey];
-            total += E;
-            return { [subkey]: E };
-        });
-        const obj = {};
-        elements.map((val) => {
-            const [elKey] = Object.keys(val);
-            const [elVal] = Object.values(val);
-            obj[elKey] = elVal;
-            return obj;
-        });
-        return Object.assign(Object.assign({ angle: key }, obj), { total });
-    });
-    return ret;
-}
-function calculateWindRoseProportions(data) {
-    const frequency = calculateWindRoseFrequency(data);
-    frequency.forEach(direction => {
-        Object.keys(direction).forEach(key => {
-            if (key === 'angle' || key === 'total')
-                return;
-            direction[key] = direction[key] / direction.total;
-        });
-    });
-    return frequency;
-}
-
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-class AxiomWindrose extends AxiomPlotRoot {
-    constructor(props) {
-        super(props);
-        this.Y_DOMAIN_TYPE = 'frequency';
-        this.raw = {
-            direction: [],
-            speed: []
-        };
-        this.columns = DEFAULT_COLUMNS;
-        const chart = this.chart;
-        const chartElements = chart.getChartElements();
-        if ((chartElements === null || chartElements === void 0 ? void 0 : chartElements.svg) !== undefined) {
-            chartElements.svg.style('z-index', 20);
-            // TODO find better way ^. Doing this so that svg can get events.
-        }
-    }
-    initializeData() {
-        if (this.Y_DOMAIN_TYPE === 'frequency') {
-            return calculateWindRoseFrequency(this.raw);
-        }
-        else {
-            return calculateWindRoseProportions(this.raw);
+        else if (plot.type === 'windrose') {
+            return new AxiomRadialRose(props);
         }
-    }
-    draw() {
-        var _a, _b, _c, _d, _e;
-        return __awaiter(this, void 0, void 0, function* () {
-            const chart = this.chart;
-            const chartElements = chart.getChartElements();
-            if (chartElements === undefined || chartElements.svg === null) {
-                return undefined;
-            }
-            let { width, height } = chart.settings;
-            width = Number(width);
-            height = Number(height);
-            const { margin } = chart.settings;
-            const innerRadius = 20;
-            const chartWidth = width - margin.left - margin.right;
-            const chartHeight = height - margin.top - margin.bottom;
-            const legendGap = 10;
-            const outerRadius = Math.min(chartWidth, chartHeight) / 2.4 - legendGap / 2;
-            this.raw = {
-                direction: [],
-                speed: []
-            };
-            this.runtime.data.parsed.data.forEach((row) => {
-                this.raw.direction.push(row.direction);
-                this.raw.speed.push(row.speed);
-            });
-            const data = this.initializeData();
-            if (this.g !== undefined) {
-                this.g.remove();
-            }
-            const svg = chartElements.svg;
-            const g = svg
-                .insert('g')
-                .attr('transform', `translate(${width / 2},${height / 2})`);
-            this.g = g;
-            const angle = d3.scaleLinear().range([0, 2 * Math.PI]);
-            const radius = d3.scaleLinear().range([innerRadius, outerRadius]);
-            const x = d3
-                .scaleBand()
-                .range([0, 2 * Math.PI])
-                .align(0);
-            const y = d3
-                .scaleLinear() // you can try scaleRadial but it scales differently
-                .range([innerRadius, outerRadius]);
-            const fillColors = (_b = (_a = this.style) === null || _a === void 0 ? void 0 : _a.colors) !== null && _b !== void 0 ? _b : d3.schemeTableau10;
-            const z = d3
-                .scaleOrdinal()
-                .range(fillColors);
-            x.domain(data.map((d) => String(d.angle)));
-            if (this.Y_DOMAIN_TYPE === 'frequency') {
-                y.domain([
-                    0,
-                    ((_c = d3.max(data, (d) => d.total)) !== null && _c !== void 0 ? _c : 0) > 1
-                        ? (_d = d3.max(data, (d) => d.total)) !== null && _d !== void 0 ? _d : 0
-                        : 1
-                ]);
-            }
-            else if (this.Y_DOMAIN_TYPE === 'proportion') {
-                y.domain([0, 1]);
-            }
-            z.domain(this.columns.slice(1));
-            // Extend the domain slightly to match the range of [0, 2π].
-            angle.domain([0, (_e = d3.max(data, (_, i) => i + 1)) !== null && _e !== void 0 ? _e : 0]);
-            // radius.domain([0, d3.max(data, (): number => 0) || 0])
-            radius.domain([0, 0]);
-            // radius.domain([innerRadius, outerRadius]);
-            const angleOffset = -360.0 / data.length / 2.0;
-            // @ts-expect-error
-            const stackGen = d3
-                .stack()
-                .keys(this.columns.slice(1));
-            const arcVal = d3 // d3.DefaultArcObject
-                .arc()
-                // @ts-expect-error
-                .innerRadius((d) => Number(y(d[0])))
-                // @ts-expect-error
-                .outerRadius((d) => Number(y(d[1])))
-                // @ts-expect-error
-                .startAngle((d) => Number(x(d.data.angle)))
-                // .startAngle((d) => x(String(d.startAngle)) || 0)
-                // @ts-expect-error
-                .endAngle((d) => Number(x(d.data.angle)) + x.bandwidth())
-                // .endAngle((d) => x(String(d.endAngle)) || 0 + x.bandwidth())
-                .padAngle(0.0)
-                .padRadius(innerRadius);
-            const arcParent = g
-                .append('g')
-                .selectAll('g')
-                // @ts-expect-error
-                .data(stackGen(data))
-                .enter()
-                .append('g')
-                .attr('fill', (d) => {
-                return z(d.key);
-            });
-            // @ts-expect-error
-            const arc = arcParent
-                .selectAll('path')
-                .data((d) => d)
-                .enter()
-                .append('path');
-            arc
-                // @ts-expect-error
-                .attr('d', arcVal)
-                .attr('transform', `rotate(${angleOffset})`)
-                .on('mouseover', (event, data) => { this.onMouseEnterOrMove(event, data); })
-                .on('mousemove', (event, data) => { this.onMouseEnterOrMove(event, data); })
-                .on('mouseleave', () => { this.onMouseLeave(); });
-            const label = g
-                .append('g')
-                .selectAll('g')
-                .data(data)
-                .enter()
-                .append('g')
-                .attr('text-anchor', 'middle')
-                .attr('transform', (d) => {
-                return `rotate(${((Number(x(d.angle)) + x.bandwidth() / 2) * 180) / Math.PI -
-                    (90 - angleOffset)})translate(${outerRadius + 30},0)`;
-            });
-            label
-                .append('text')
-                // eslint-disable-next-line no-confusing-arrow
-                .attr('transform', (d, _i) => {
-                var _a;
-                // @ts-expect-error
-                return (!Number.isNaN((((_a = x(d.angle)) !== null && _a !== void 0 ? _a : 0 + x.bandwidth() / 2 + Math.PI / 2) % (2 * Math.PI < Math.PI))))
-                    ? 'rotate(90)translate(0,16)'
-                    : 'rotate(-90)translate(0,-9)';
-            })
-                .attr('transform', 'rotate(90)translate(0,-9)')
-                .text((d) => d.angle)
-                .style('font-size', 14);
-            g.selectAll('.axis')
-                .data(d3.range(angle.domain()[1]))
-                .enter()
-                .append('g')
-                .attr('class', 'axis')
-                .attr('transform', (d) => `rotate(${(angle(d) * 180) / Math.PI})`)
-                .call(d3
-                // @ts-expect-error
-                .axisLeft()
-                // @ts-expect-error
-                .scale(radius.copy().range([-innerRadius, -(outerRadius + 10)])));
-            const yAxis = g.append('g').attr('text-anchor', 'middle');
-            const yTick = yAxis
-                .selectAll('g')
-                .data(y.ticks(5).slice(1))
-                .enter()
-                .append('g');
-            yTick
-                .append('circle')
-                .attr('fill', 'none')
-                .attr('stroke', 'gray')
-                .attr('stroke-dasharray', '4,4')
-                .attr('r', y);
-            yTick
-                .append('text')
-                .attr('y', (d) => -y(d))
-                .attr('dy', '-0.35em')
-                .attr('x', () => -10)
-                .text(y.tickFormat(5, 's'))
-                .style('font-size', 14);
-            const legend = g
-                .append('g')
-                .selectAll('g')
-                .data(this.columns.slice(1).reverse())
-                .enter()
-                .append('g')
-                .attr('transform', (d, i) => `translate(${outerRadius + 45 + legendGap / 2},${-outerRadius + 40 + (i - (this.columns.length - 1) / 2) * 20})`);
-            legend
-                .append('rect')
-                .attr('width', 18)
-                .attr('height', 18)
-                // @ts-expect-error
-                .attr('fill', z);
-            legend
-                .append('text')
-                .attr('x', -24)
-                .attr('y', 9)
-                .attr('dy', '0.35em')
-                .text((d) => d)
-                .style('font-size', 12);
-            g.exit().remove();
-        });
-    }
-    getScrubPosition(mouseX) {
-        return undefined;
-    }
-    drawScrubbing(mouseX) {
-    }
-    onMouseEnterOrMove(event, data) {
-        if (this.chart.onScrub === undefined)
-            return;
-        const scrubPositions = {
-            [this.id]: {
-                xPosition: event.offsetX,
-                xValue: data.data.angle,
-                yPosition: event.offsetY,
-                yValue: data[1] - data[0],
-                properties: Object.assign({}, data)
-            }
-        };
-        this.chart.onScrub(scrubPositions);
-    }
-    onMouseLeave() {
-        if (this.chart.onScrubEnd === undefined)
-            return;
-        this.chart.onScrubEnd();
-    }
-}
-
-class AxiomWindroseChart extends AxiomChart {
-    createPlot(plot) {
-        const props = this.getPlotImplementationProps(plot);
-        return new AxiomWindrose(props);
+        return new AxiomRadialLine(props);
     }
 }
 
@@ -2255,7 +1995,6 @@ const axiomPlotTypes = Object.assign(Object.assign({}, plotsOb), { line: AxiomLi
 const axiomLibrary = {
     Chart: AxiomChart,
     RadialChart: AxiomRadialChart,
-    WindroseChart: AxiomWindroseChart,
     plotTypes: axiomPlotTypes
 };