@axdspub/axiom-charts 0.0.10 → 0.0.12

package/library/Libraries/axiom/index.js

@@ -1,5 +1,5 @@
 import { RequestItem } from '@axdspub/axiom-ui-data-services';
-import { extent, sum } from 'd3-array';
+import { extent, bisectCenter, sum } from 'd3-array';
 import { groupBy, debounce } from 'lodash';
 import { create } from 'd3-selection';
 import { scaleUtc, scaleLinear, scaleRadial } from 'd3-scale';
@@ -123,6 +123,7 @@ var PlotRoot = /** @class */ (function (_super) {
         _this.chart = props.chart;
         _this.dimensions = props.dimensions;
         _this.style = props.style;
+        _this.scrubbing = props.scrubbing;
         _this.axisSettings = props.axisSettings;
         _this.runtime = {};
         return _this;
@@ -249,6 +250,13 @@ var PlotRoot = /** @class */ (function (_super) {
             });
         });
     };
+    PlotRoot.prototype.drawScrubbing = function (mouseX) {
+        console.log('drawScrubbing not implemented');
+    };
+    PlotRoot.prototype.getScrubPosition = function (mouseX) {
+        console.log('getScrubPosition not implemented');
+        return undefined;
+    };
     PlotRoot.prototype.destroy = function () {
     };
     return PlotRoot;
@@ -259,6 +267,7 @@ var ChartRoot = /** @class */ (function () {
         this.plots = props.plots.map(function (p) { return (__assign({}, p)); });
         this.settings = props.settings;
         this.element = props.element;
+        this.onScrub = props.onScrub;
         this.runtime = {
             prevWidth: 0,
             prevHeight: 0
@@ -434,7 +443,6 @@ var ChartRoot = /** @class */ (function () {
                     case 1:
                         _a.sent();
                         this.showYAxes(yAxes);
-                        this.showYLabels(yAxes, this.plots);
                         yAxesWidth = this.getYAxesWidth();
                         chartWidth = this.getChartWidth();
                         xRange = this.getXRange(chartWidth);
@@ -492,10 +500,10 @@ var ChartRoot = /** @class */ (function () {
     };
     ChartRoot.prototype.showYAxes = function (yAxes) {
     };
-    ChartRoot.prototype.showYLabels = function (yAxes, plots) {
-    };
     ChartRoot.prototype.showXAxes = function (xAxes) {
     };
+    ChartRoot.prototype.adjustYAxis = function () {
+    };
     ChartRoot.prototype.draw = function () {
         return __awaiter(this, void 0, void 0, function () {
             var plotImplementations;
@@ -552,7 +560,9 @@ var AxiomPlotRoot = /** @class */ (function (_super) {
 var AxiomLine = /** @class */ (function (_super) {
     __extends(AxiomLine, _super);
     function AxiomLine() {
-        return _super !== null && _super.apply(this, arguments) || this;
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.addedScrubbingListener = false;
+        return _this;
     }
     AxiomLine.prototype.getDomainAccessor = function (axis) {
         var _a, _b, _c;
@@ -567,15 +577,19 @@ var AxiomLine = /** @class */ (function (_super) {
     AxiomLine.prototype.draw = function () {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
         return __awaiter(this, void 0, void 0, function () {
-            var style, data, parsedData, xAccessor, yAccessor, chart, ctx, xAxisScale, yAxisScale, offset, xScale, xPosition, yScale, yPosition, isDefined, line$1;
+            var style, data, xAccessor, yAccessor, chart, ctx, xAxisScale, yAxisScale, xPosition, yPosition, isDefined, line$1;
+            var _this = this;
             return __generator(this, function (_m) {
                 switch (_m.label) {
                     case 0:
                         style = this.style !== undefined ? this.style : {};
+                        if (!(this.parsedData === undefined)) return [3 /*break*/, 2];
                         return [4 /*yield*/, this.getData()];
                     case 1:
                         data = _m.sent();
-                        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;
+                        _m.label = 2;
+                    case 2:
                         xAccessor = this.getAccessorAtAxis('x');
                         yAccessor = this.getAccessorAtAxis('y');
                         chart = this.chart;
@@ -585,33 +599,36 @@ var AxiomLine = /** @class */ (function (_super) {
                         }
                         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;
                         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 [2 /*return*/, undefined];
                         }
-                        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
                         };
-                        xScale = chart.getD3XScale(xAxisScale);
+                        this.xScale = chart.getD3XScale(xAxisScale);
                         xPosition = function (d) {
+                            if (_this.xScale === undefined || _this.offset === undefined)
+                                return 0;
                             var v = xAccessor(d);
-                            var p = xScale(v);
-                            return p === undefined ? 0 : (p + offset.x);
+                            var p = _this.xScale(v);
+                            return p === undefined ? 0 : (p + _this.offset.x);
                         };
-                        yScale = chart.getD3YScale(yAxisScale);
+                        this.yScale = chart.getD3YScale(yAxisScale);
                         yPosition = function (d) {
+                            if (_this.yScale === undefined || _this.offset === undefined)
+                                return 0;
                             var v = yAccessor(d);
-                            var p = yScale(v);
-                            return p === undefined ? 0 : (p + offset.y);
+                            var p = _this.yScale(v);
+                            return p === undefined ? 0 : (p + _this.offset.y);
                         };
                         isDefined = function (d) {
                             var v = yAccessor(d);
                             return !!((v !== undefined && v !== null && !isNaN(+v)));
                         };
-                        // settings?.style?.strokeColor !== undefined ? settings.style.strokeColor :
-                        // settings?.style?.strokeWidth ||
-                        ctx.strokeStyle = style.strokeColor !== undefined ? style.strokeColor : '#333';
-                        ctx.lineWidth = style.strokeWidth !== undefined ? style.strokeWidth : 1;
+                        ctx.strokeStyle = this.getStrokeStyle();
+                        ctx.lineWidth = this.getLineWidth();
+                        ctx.setLineDash([]);
                         line$1 = line()
                             .x(xPosition)
                             .y(yPosition)
@@ -621,13 +638,65 @@ var AxiomLine = /** @class */ (function (_super) {
                         if ((style === null || style === void 0 ? void 0 : style.strokeDash) !== undefined) {
                             ctx.setLineDash(style.strokeDash);
                         }
-                        line$1(parsedData);
+                        line$1(this.parsedData);
                         ctx.stroke();
                         return [2 /*return*/];
                 }
             });
         });
     };
+    AxiomLine.prototype.getScrubPosition = function (mouseX) {
+        if (this.xScale === undefined || this.yScale === undefined || this.parsedData === undefined || this.offset === undefined)
+            return undefined;
+        var newDate = this.xScale.invert(mouseX - this.offset.x);
+        var i = bisectCenter(this.parsedData.map(function (row) { return row.time; }), newDate);
+        var lineX = this.xScale(this.parsedData[i].time) + this.offset.x;
+        var yValue = this.parsedData[i].value;
+        var yPx = this.yScale(yValue) + this.offset.y;
+        return {
+            xPosition: lineX,
+            xValue: newDate,
+            yPosition: yPx,
+            yValue: yValue
+        };
+    };
+    AxiomLine.prototype.drawScrubbing = function (mouseX) {
+        var chart = this.chart;
+        var ctx = chart.getCanvasContext();
+        if (ctx === null) {
+            return undefined;
+        }
+        var scrubPosition = this.getScrubPosition(mouseX);
+        if (scrubPosition === undefined)
+            return;
+        var xPosition = scrubPosition.xPosition, yPosition = scrubPosition.yPosition;
+        this.drawScrubCircle(xPosition, yPosition, ctx);
+        this.drawScrubLine(xPosition, ctx);
+    };
+    AxiomLine.prototype.drawScrubCircle = function (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();
+    };
+    AxiomLine.prototype.drawScrubLine = function (x, ctx) {
+        var 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();
+    };
+    AxiomLine.prototype.getStrokeStyle = function () {
+        var style = this.style !== undefined ? this.style : {};
+        return style.strokeColor !== undefined ? style.strokeColor : '#333';
+    };
+    AxiomLine.prototype.getLineWidth = function () {
+        var style = this.style !== undefined ? this.style : {};
+        return style.strokeWidth !== undefined ? style.strokeWidth : 1;
+    };
     return AxiomLine;
 }(AxiomPlotRoot));
 
@@ -745,6 +814,13 @@ var AxiomArea = /** @class */ (function (_super) {
             });
         });
     };
+    AxiomArea.prototype.drawScrubbing = function (mouseX) {
+        console.error('AxiomArea.drawScrubbing not implemented');
+    };
+    AxiomArea.prototype.getScrubPosition = function (mouseX) {
+        console.error('AxiomArea.getScrubPosition not implemented');
+        return undefined;
+    };
     return AxiomArea;
 }(AxiomPlotRoot));
 
@@ -826,6 +902,12 @@ var AxiomScatter = /** @class */ (function (_super) {
             });
         });
     };
+    AxiomScatter.prototype.getScrubPosition = function (mouseX) {
+        throw new Error('Method not implemented.');
+    };
+    AxiomScatter.prototype.drawScrubbing = function (mouseX) {
+        throw new Error('Method not implemented.');
+    };
     return AxiomScatter;
 }(AxiomPlotRoot));
 
@@ -932,6 +1014,22 @@ var AxiomChart = /** @class */ (function (_super) {
         };
         return axisG;
     };
+    AxiomChart.prototype.adjustYAxis = function () {
+        console.log('here');
+        var chartElements = this.getChartElements();
+        if (chartElements === undefined)
+            return;
+        var svg = chartElements.svg, canvas = chartElements.canvas;
+        var node = svg.selectAll('.y-axis').nodes()[0];
+        if (node === null || node === undefined)
+            return;
+        node = node;
+        // const yAxisWidth = node.getBoundingClientRect()
+        console.log(node);
+        svg.selectAll('.y-axis').attr('translate', 'transform(100px, 100px)').attr('width', 100);
+        canvas.attr('width', this.getWidth() - 45.7);
+        canvas.attr('transform', "translate(".concat(45.7, ", 0)"));
+    };
     AxiomChart.prototype.showYAxes = function (axes) {
         var _this = this;
         var chartElements = this.getChartElements();
@@ -947,29 +1045,39 @@ var AxiomChart = /** @class */ (function (_super) {
                 axisSelection.append('g').call(axisG);
             }
         });
+        this.showYLabels(axes, this.plots);
     };
-    AxiomChart.prototype.showYLabels = function (axes, plots) {
+    AxiomChart.prototype.getAxisLabel = function (axis, dimensionKey) {
         var _a;
-        if (plots.length > 1) {
-            return;
-        }
-        if (plots[0].type !== EPlotTypes.line) {
+        return (_a = axis.plots[0]) === null || _a === void 0 ? void 0 : _a.dimensions[dimensionKey].label;
+    };
+    AxiomChart.prototype.showYLabels = function (axes, plots) {
+        var _this = this;
+        var yLabelsAreSupportedForPlotType = [EPlotTypes.line, EPlotTypes.scatter, EPlotTypes.seasonal, EPlotTypes.area]
+            .find(function (type) { return type === plots[0].type; }) !== undefined;
+        if (plots.length === 0 || !yLabelsAreSupportedForPlotType) {
             return;
         }
         var chartElements = this.getChartElements();
-        var label = (_a = axes[0].plots[0].dimensions.y.label) !== null && _a !== void 0 ? _a : '';
         if (chartElements === undefined) {
-            return undefined;
+            return;
         }
         var svg = chartElements.svg;
         var axisSelection = svg.select('.y-axis').size() > 0 ? svg.select('.y-axis') : svg.append('g').attr('class', 'y-axis axis');
-        axisSelection.append('text')
-            .attr('class', 'y-label')
-            .attr('text-anchor', 'end')
-            .attr('dy', '.75rem')
-            .attr('font-size', '.75rem')
-            .attr('transform', 'rotate(-90)')
-            .text(label);
+        // TODO: Don't hardcode these two vars
+        var axisWidth = 24;
+        var labelMargin = 3;
+        axes.forEach(function (axis) {
+            var _a;
+            axisSelection.append('text')
+                .attr('class', 'y-label')
+                .attr('transform', 'rotate(-90)')
+                .style('text-anchor', 'middle')
+                .attr('x', -1 * Math.floor(_this.getChartHeight() / 2))
+                .attr('y', "".concat(_this.getyAxisOffset(axis).x - axisWidth - labelMargin))
+                .attr('font-size', '.75rem')
+                .text((_a = _this.getAxisLabel(axis, 'y')) !== null && _a !== void 0 ? _a : '');
+        });
     };
     AxiomChart.prototype.getXAxisOffset = function (axis) {
         return __assign({ x: this.settings.margin.left, y: this.settings.height - this.settings.margin.bottom }, axis.offset);
@@ -1070,6 +1178,8 @@ var AxiomChart = /** @class */ (function (_super) {
                 this.element.append(canvasNode);
             }
         }
+        // TODO: conditional
+        this.addScrubbing();
     };
     AxiomChart.prototype.createPlot = function (plot) {
         var props = this.getPlotImplementationProps(plot);
@@ -1084,6 +1194,65 @@ var AxiomChart = /** @class */ (function (_super) {
         }
         return new PlotRoot(props);
     };
+    AxiomChart.prototype.clearCanvas = function () {
+        var ctx = this.getCanvasContext();
+        if (ctx !== null) {
+            ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+        }
+    };
+    AxiomChart.prototype.addScrubbing = function () {
+        var _this = this;
+        var ctx = this.getCanvasContext();
+        if (ctx === null) {
+            return;
+        }
+        ctx.canvas.addEventListener('touchmove', function (event) {
+            var touch = event.touches[0];
+            var touchOffset = 20; // TODO: figure out why touch.clientX is always off to the right
+            _this.onScrubTriggered(touch.clientX - touchOffset);
+        });
+        ctx.canvas.addEventListener('mousemove', function (event) { _this.onScrubTriggered(event.offsetX); });
+    };
+    AxiomChart.prototype.onScrubTriggered = function (cursorX) {
+        var _this = this;
+        if (this.plotImplementations === undefined)
+            return;
+        var plotsWithScrubbingEnabled = this.plotImplementations.filter(function (plot) { var _a; return ((_a = plot.scrubbing) !== null && _a !== void 0 ? _a : false) && plot.type === EPlotTypes.line; });
+        var plotScrubPositions = this.getScrubPositions(cursorX, plotsWithScrubbingEnabled);
+        // console.log(plotScrubPositions)
+        if (this.onScrub !== undefined) {
+            this.onScrub(plotScrubPositions);
+        }
+        this.runtime.busy = true;
+        this.clearCanvas();
+        var drawPromises = this.plotImplementations.map(function (plot) { return __awaiter(_this, void 0, void 0, function () { return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, plot.draw()];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        }); }); });
+        Promise.all(drawPromises).then(function () {
+            plotsWithScrubbingEnabled.forEach(function (plot) {
+                var position = plotScrubPositions[plot.id];
+                plot.drawScrubbing(position.xPosition);
+            });
+            _this.runtime.busy = false;
+        }).catch(function (error) {
+            console.error(error);
+        });
+    };
+    AxiomChart.prototype.getScrubPositions = function (mouseX, plots) {
+        var plotScrubPositions = {};
+        plots.forEach(function (plot) {
+            var scrubPosition = plot.getScrubPosition(mouseX);
+            if (scrubPosition !== undefined) {
+                plotScrubPositions[plot.id] = scrubPosition;
+            }
+        });
+        return plotScrubPositions;
+    };
     AxiomChart.prototype.init = function (drawImmediately) {
         if (drawImmediately === void 0) { drawImmediately = false; }
         return __awaiter(this, void 0, void 0, function () {
@@ -1311,6 +1480,13 @@ var AxiomRadialArea = /** @class */ (function (_super) {
             });
         });
     };
+    AxiomRadialArea.prototype.drawScrubbing = function (mouseX) {
+        console.error('AxiomRadialArea.drawScrubbing not implemented');
+    };
+    AxiomRadialArea.prototype.getScrubPosition = function (mouseX) {
+        console.error('AxiomRadialArea.getScrubPosition not implemented');
+        return undefined;
+    };
     return AxiomRadialArea;
 }(AxiomArea));