@axdspub/axiom-charts 0.0.18 → 0.0.20

package/library/Libraries/axiom/index.js

@@ -757,10 +757,225 @@ class AxiomScatter extends AxiomPlotRoot {
     }
 }
 
+class AxiomBar extends AxiomPlotRoot {
+    constructor(props) {
+        super(props);
+        this.legendHeight = 12;
+        this.legendPaddingTop = 8;
+        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.
+        }
+    }
+    draw() {
+        var _a, _b, _c, _d, _e;
+        return __awaiter(this, void 0, void 0, function* () {
+            const dataResponse = yield this.getData();
+            const parsedData = (_a = dataResponse === null || dataResponse === void 0 ? void 0 : dataResponse.parsed) === null || _a === void 0 ? void 0 : _a.data;
+            if (parsedData === undefined)
+                return;
+            const xAccessor = this.getAccessorAtAxis('x');
+            const yAccessor = (_b = dataResponse.parsed) === null || _b === void 0 ? void 0 : _b.accessors.y;
+            if (xAccessor === undefined || yAccessor === undefined)
+                return;
+            const y2Accessor = (_c = dataResponse.parsed) === null || _c === void 0 ? void 0 : _c.accessors.y2;
+            const yGroups = this.dimensions;
+            const yKey = yGroups.y.property;
+            const yLabel = yGroups.y.label;
+            const y2Key = this.dimensions.y2.property;
+            const y2Label = this.dimensions.y2.label;
+            const chart = this.chart;
+            const chartElements = chart.getChartElements();
+            if (chartElements === undefined || chartElements.svg === null || yKey === undefined || yLabel === undefined)
+                return undefined;
+            if (chartElements.svg.select('g') !== undefined)
+                chartElements.svg.select('g').remove();
+            let { width, height } = chart.settings;
+            width = Number(width);
+            height = Number(height);
+            const oneOrZero = y2Key === undefined ? 0 : 1; // Used to add in space for y2 if exists.
+            const xAxisHeight = 48; // HOW TO GET DYNAMICALLY?
+            const yAxisWidth = 36; // HOW TO GET DYNAMICALLY?
+            const y2AxisWidth = yAxisWidth * oneOrZero;
+            const chartPaddingTop = 4;
+            const yLabelWidth = 24;
+            const y1TotalWidth = yAxisWidth + yLabelWidth;
+            const y2LabelWidth = yLabelWidth * oneOrZero;
+            const y2TotalWidth = y2AxisWidth * oneOrZero + y2LabelWidth;
+            const plotHeight = height - xAxisHeight - this.legendHeight - this.legendPaddingTop - chartPaddingTop;
+            const plotWidth = width - yAxisWidth - yLabelWidth - y2TotalWidth;
+            const plotXStart = width - plotWidth - y2TotalWidth;
+            const plotXEnd = width - y2TotalWidth;
+            const groups = parsedData.map(d => xAccessor(d));
+            const subgroups = [yKey];
+            if (y2Key !== undefined && y2Accessor !== undefined)
+                subgroups.push(y2Key);
+            // 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);
+            const y = this.getYScale(plotHeight, chartPaddingTop, parsedData, yAccessor);
+            const y2 = this.getY2Scale(plotHeight, chartPaddingTop, parsedData, y2Accessor);
+            const subgroupScales = this.getSubgroupScales(yKey, y, y2Key, y2);
+            const xSubgroup = d3.scaleBand()
+                .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)
+                .attr('height', plotHeight)
+                .selectAll('g')
+                .data(parsedData)
+                .enter()
+                .append('g')
+                .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;
+                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 : '']
+                };
+            }))
+                .enter()
+                .append('rect')
+                .attr('x', d => Number(xSubgroup(d.key)))
+                .attr('y', d => Number(subgroupScales[d.key](d.value)))
+                .attr('width', xSubgroup.bandwidth())
+                .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);
+            // X Axis
+            const xAxis = g.append('g')
+                .attr('transform', `translate(0, ${plotHeight})`)
+                .call(d3.axisBottom(x));
+            // X Labels
+            xAxis.selectAll('text')
+                .attr('text-anchor', 'end')
+                .attr('transform', 'rotate(-45)translate(-10, 0)');
+            // Y Axis
+            g.append('g')
+                .call(d3.axisLeft(y))
+                .attr('transform', `translate(${y1TotalWidth}, 0)`);
+            if (y2 !== undefined) {
+                // Y2 Axis
+                g.append('g')
+                    .call(d3.axisRight(y2))
+                    .attr('transform', `translate(${width - y2TotalWidth}, 0)`);
+            }
+            // Y Label
+            g.append('text')
+                .attr('text-anchor', 'middle')
+                .attr('transform', 'rotate(-90)')
+                .attr('x', -1 * plotHeight / 2)
+                .attr('y', yLabelWidth)
+                .attr('font-weight', 800)
+                .text(yLabel);
+            if (y2Label !== undefined) {
+                // Y2 Label
+                g.append('text')
+                    .attr('text-anchor', 'middle')
+                    .attr('transform', 'rotate(90)')
+                    .attr('x', 1 * plotHeight / 2)
+                    .attr('y', -1 * (width - y2LabelWidth))
+                    .attr('font-weight', 800)
+                    .text(y2Label);
+            }
+        });
+    }
+    getXScale(plotXStart, plotXEnd, groups) {
+        return d3.scaleBand()
+            .domain(groups)
+            .range([plotXStart, plotXEnd])
+            .padding(0.25);
+    }
+    getYScale(plotHeight, chartPaddingTop, data, yAccessor) {
+        return d3.scaleLinear()
+            .domain([
+            0,
+            Number(d3.max(data, d => yAccessor(d)))
+        ])
+            .range([plotHeight, chartPaddingTop]);
+    }
+    getY2Scale(plotHeight, chartPaddingTop, data, y2Accessor) {
+        if (y2Accessor === undefined)
+            return undefined;
+        return this.getYScale(plotHeight, chartPaddingTop, data, y2Accessor);
+    }
+    /**
+     *
+     * Returns a map from Y key to Y scale. E.g.
+     * {
+     *    "frequency": Y,
+     *    "proportion": Y2
+     * }
+     */
+    getSubgroupScales(yKey, y, y2Key, y2) {
+        const subgroupScales = {
+            [yKey]: y
+        };
+        if (y2Key !== undefined && y2 !== undefined) {
+            subgroupScales[y2Key] = y2;
+        }
+        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 = {
     Line: AxiomLine,
     Area: AxiomArea,
-    Scatter: AxiomScatter
+    Scatter: AxiomScatter,
+    Bar: AxiomBar
 };
 
 function styleInject(css, ref) {
@@ -1029,6 +1244,9 @@ class AxiomChart extends ChartRoot {
         else if (plot.type === EPlotTypes.scatter) {
             return new chartTypes.Scatter(props);
         }
+        else if (plot.type === EPlotTypes.bar) {
+            return new chartTypes.Bar(props);
+        }
         return new PlotRoot(props);
     }
     clearCanvas() {
@@ -1762,14 +1980,20 @@ function calculateWindRoseProportions(data) {
 
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 class AxiomWindrose extends AxiomPlotRoot {
-    constructor() {
-        super(...arguments);
+    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') {
@@ -1780,7 +2004,7 @@ class AxiomWindrose extends AxiomPlotRoot {
         }
     }
     draw() {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e;
         return __awaiter(this, void 0, void 0, function* () {
             const chart = this.chart;
             const chartElements = chart.getChartElements();
@@ -1822,25 +2046,16 @@ class AxiomWindrose extends AxiomPlotRoot {
             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([
-                '#8e44ad',
-                '#4242f4',
-                '#42c5f4',
-                '#42f4ce',
-                '#42f456',
-                '#adf442',
-                '#f4e242',
-                '#f4a142',
-                '#f44242'
-            ]);
+                .range(fillColors);
             x.domain(data.map((d) => String(d.angle)));
             if (this.Y_DOMAIN_TYPE === 'frequency') {
                 y.domain([
                     0,
-                    ((_a = d3.max(data, (d) => d.total)) !== null && _a !== void 0 ? _a : 0) > 1
-                        ? (_b = d3.max(data, (d) => d.total)) !== null && _b !== void 0 ? _b : 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
                 ]);
             }
@@ -1849,7 +2064,7 @@ class AxiomWindrose extends AxiomPlotRoot {
             }
             z.domain(this.columns.slice(1));
             // Extend the domain slightly to match the range of [0, 2π].
-            angle.domain([0, (_c = d3.max(data, (_, i) => i + 1)) !== null && _c !== void 0 ? _c : 0]);
+            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]);
@@ -1891,7 +2106,10 @@ class AxiomWindrose extends AxiomPlotRoot {
             arc
                 // @ts-expect-error
                 .attr('d', arcVal)
-                .attr('transform', `rotate(${angleOffset})`);
+                .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')
@@ -1974,6 +2192,25 @@ class AxiomWindrose extends AxiomPlotRoot {
     }
     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 {