@heroku/react-hk-components/dist/HKLineChartData.js

"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
        s = arguments[i];
        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
            t[p] = s[p];
    }
    return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var d3array = require("d3-array");
var d3scale = require("d3-scale");
var d3shape = require("d3-shape");
var _ = require("lodash");
var moment = require("moment");
var constants_1 = require("./constants");
var helpers_1 = require("./helpers");
var HKGrid_1 = require("./HKGrid");
var HKLine_1 = require("./HKLine");
var HKTooltip_1 = require("./HKTooltip");
var HKLineChartData = /** @class */ (function (_super) {
    __extends(HKLineChartData, _super);
    function HKLineChartData(props) {
        var _this = _super.call(this, props) || this;
        _this.handleMouseMove = function (e) {
            var _a = _this.state, measurements = _a.measurements, xScale = _a.xScale;
            if (!_this.ref) {
                return null;
            }
            // TODO: Optimize rendering performance here
            var hoverIndex = e.clientX - _this.ref.getBoundingClientRect().left - constants_1.ChartPadding.Horizontal;
            var bisectX = d3array.bisector(function (d) { return d.x; }).left;
            var newIdx = bisectX(measurements, xScale.invert(hoverIndex));
            _this.setState({ idx: newIdx, hoverIndex: hoverIndex });
            if (measurements[newIdx]) {
                var values = measurements[newIdx].y; // Remember to figure out empty case
                _this.props.onHover(values);
            }
        };
        _this.handleMouseLeave = function (e) {
            var _a = _this.props, onHover = _a.onHover, data = _a.data;
            _this.setState({ hoverIndex: -1, idx: -1 });
            onHover(helpers_1.getMaxValues(data));
        };
        _this.state = {
            height: props.height,
            width: props.width,
            hoverIndex: -1,
            idx: -1,
            /* Initializes in getDerivedStateFromProps**/
            data: null,
            measurements: null,
            area: null,
            line: null,
            xScale: null,
            yScale: null,
        };
        return _this;
    }
    // setState based on new props passed
    HKLineChartData.getDerivedStateFromProps = function (newProps, prevState) {
        if (['data', 'width', 'height'].every(function (o) { return newProps[o] === prevState[o]; })) {
            return null;
        }
        var width = newProps.width, height = newProps.height, data = newProps.data;
        var chartHeight = height - constants_1.ChartPadding.Vertical;
        var chartWidth = width - constants_1.ChartPadding.Horizontal;
        var values = _.flatMap(data.map(function (d) { return d[1]; }));
        // Cleanse data into valid format(date and values)
        // Make sure our coordinates are sorted by date asscending
        var measurements = formatData(data)
            .sort(function (a, b) { return moment(a.x).diff(moment(b.x)); });
        // Domain of x coordinates (date)
        var timeExtent = [
            _.head(measurements).x,
            _.last(measurements).x,
        ];
        // Domain of y coordinates (value)
        var valueExtent = d3array.extent(values);
        var xScale = d3scale.scaleTime()
            .domain(timeExtent)
            .range([0, chartWidth]);
        var yScale = d3scale.scaleLinear()
            .domain([Math.min(valueExtent[0], 0), valueExtent[1]])
            .range([chartHeight, 0]);
        var line = d3shape.line()
            .x(function (d) { return xScale(d.x); })
            .y(function (d) { return yScale(d.y); })
            .curve(d3shape.curveStepBefore);
        var area = d3shape.area()
            .x(function (d) { return xScale(d.x); })
            .y0(yScale(valueExtent[0] < 0 ? yScale(valueExtent) : 0))
            .y1(function (d) { return yScale(d.y); })
            .curve(d3shape.curveStepBefore);
        return {
            data: data,
            measurements: measurements,
            height: height,
            width: width,
            area: area,
            line: line,
            xScale: xScale,
            yScale: yScale,
        };
    };
    HKLineChartData.prototype.render = function () {
        var _this = this;
        var _a = this.state, height = _a.height, width = _a.width, xScale = _a.xScale, yScale = _a.yScale, line = _a.line, area = _a.area, measurements = _a.measurements, idx = _a.idx, hoverIndex = _a.hoverIndex;
        var _b = this.props, toggleInfo = _b.toggleInfo, labels = _b.labels;
        var isHovering = hoverIndex > 0; // we only want to hover if onMouseMove is on the chart (exclude axis)
        var hoverPos = hoverIndex + constants_1.ChartPadding.Horizontal; // hover positioning taking into account padding from axis
        var valueIndexes = [];
        labels.forEach(function (label, i) {
            if (toggleInfo[label + "-" + i]) {
                valueIndexes.push(i);
            }
        });
        var timeseries = valueIndexes.map(function (i) {
            var lineProps = {
                area: area,
                data: measurements.map(function (m) { return ({
                    x: m.x,
                    y: m.y[i],
                }); }),
                line: line,
            };
            return React.createElement(HKLine_1.default, __assign({ key: i }, lineProps));
        });
        var indicatorPoints = valueIndexes.map(function (v) {
            // check if y-values exist and check if specific line is toggled on
            return measurements[idx] && Object.keys(toggleInfo).map(function (key) { return toggleInfo[key]; })[v]
                ? (React.createElement("circle", { key: v, className: 'indicatorPoints', cx: hoverIndex + constants_1.ChartPadding.Horizontal, cy: yScale(measurements[idx].y[v]) + constants_1.ChartPadding.Vertical, r: 2 })) : null;
        });
        var timeStamp = moment(xScale.invert(hoverIndex)).format('llll');
        var indicator = isHovering && (React.createElement("g", null,
            React.createElement("line", { x1: hoverPos, y1: '0', x2: hoverPos, y2: height, stroke: '#79589f', strokeWidth: '1' }),
            indicatorPoints));
        return (React.createElement("div", null,
            isHovering && (React.createElement(HKTooltip_1.default, { xPos: hoverPos, yPos: height / 3, children: "" + timeStamp })),
            React.createElement("svg", { preserveAspectRatio: 'none', width: width, height: height, viewBox: "0 0 " + width + " " + height, onMouseMove: this.handleMouseMove, onMouseLeave: this.handleMouseLeave, ref: function (ref) { return _this.ref = ref; } },
                indicator,
                React.createElement("g", { transform: "translate(" + constants_1.ChartPadding.Horizontal + ", 0)" },
                    React.createElement(HKGrid_1.default, { type: 'line', height: height, width: width, xScale: xScale, yScale: yScale }),
                    React.createElement("rect", { x: '0', y: '0', width: width - constants_1.ChartPadding.Horizontal, height: height, className: 'br0 ba b--silver z-1', fill: 'none', stroke: 'silver' }),
                    React.createElement("g", { transform: "translate(0, " + constants_1.ChartPadding.Vertical + ")" }, timeseries)))));
    };
    return HKLineChartData;
}(React.PureComponent));
exports.default = HKLineChartData;
function formatData(dataSet) {
    if (!dataSet) {
        return null;
    }
    return dataSet.map(function (d) { return ({
        x: moment.utc(d[0]).toDate(),
        y: d[1].map(function (v) { return _.isFinite(v) ? v : 0; }),
    }); });
}
//# sourceMappingURL=HKLineChartData.js.map