@heroku/react-hk-components/dist/HKBarChartData.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 __());
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var d3array = require("d3-array");
var d3scale = require("d3-scale");
var _ = require("lodash");
var constants_1 = require("./constants");
var helpers_1 = require("./helpers");
var HKGrid_1 = require("./HKGrid");
var HKBarChartData = /** @class */ (function (_super) {
    __extends(HKBarChartData, _super);
    function HKBarChartData(props) {
        var _this = _super.call(this, props) || this;
        _this.handleMouseMove = function (e) {
            if (!_this.ref || !_this.props.onHover) {
                return null;
            }
            var _a = _this.state, data = _a.data, keys = _a.keys, width = _a.width;
            var hoverIndex = e.clientX - _this.ref.getBoundingClientRect().left;
            var interpolateIndex = hoverIndex * data.length / width;
            var index = Math.min(interpolateIndex, data.length - 1);
            var values = data[Math.floor(index)];
            _this.props.onHover(values, keys);
        };
        _this.handleMouseLeave = function (e) {
            var onHover = _this.props.onHover;
            var _a = _this.state, data = _a.data, keys = _a.keys;
            if (onHover) {
                onHover(helpers_1.getMaxValues(data, 'bar'), keys);
            }
        };
        _this.createBar = function (rowIdx, colVal, colIdx) {
            var _a = _this.state, height = _a.height, keys = _a.keys, x0Scale = _a.x0Scale, x1Scale = _a.x1Scale, yScale = _a.yScale;
            return (React.createElement("rect", { key: "row" + rowIdx + "-column" + colIdx, x: x0Scale(rowIdx) + x1Scale(colIdx), y: height - yScale(colVal), height: yScale(colVal), width: x1Scale.bandwidth(), fill: constants_1.colours[keys[colIdx]], className: 'dim' }));
        };
        _this.state = {
            data: null,
            height: 0,
            keys: [],
            width: 0,
            hoverIndex: -1,
            x0Scale: null,
            x1Scale: null,
            yScale: null,
        };
        return _this;
    }
    HKBarChartData.getDerivedStateFromProps = function (newProps, prevState) {
        if (['data', 'width', 'height', 'toggleInfo'].every(function (o) { return newProps[o] === prevState[o]; })) {
            return null;
        }
        var data = newProps.data, height = newProps.height, width = newProps.width, toggleInfo = newProps.toggleInfo;
        var chartHeight = height - constants_1.ChartPadding.Vertical;
        var chartWidth = width - constants_1.ChartPadding.Horizontal;
        // keys: an array of the indexes from bar chart data that are toggled on
        var keys = Object.keys(toggleInfo).filter(function (k) { return toggleInfo[k]; }).map(Number);
        var shownData = data.map(function (rowData) { return rowData.filter(function (colData, i) { return _.includes(keys, i); }); });
        var minValues = d3array.min(shownData, (function (arr) { return d3array.min(arr); }));
        var maxValues = d3array.max(shownData, (function (arr) { return d3array.max(arr); }));
        var x0Scale = d3scale.scaleBand()
            .range([0, chartWidth])
            .domain(shownData.map(function (d, i) { return i; }))
            .paddingInner(0.1);
        var x1Scale = d3scale.scaleBand()
            .range([0, x0Scale.bandwidth()])
            .domain(shownData[0].map(function (d, i) { return i; }))
            .padding(0.08);
        var yScale = d3scale.scaleLinear()
            .rangeRound([0, chartHeight])
            .domain([Math.min(0, minValues), maxValues]);
        return {
            data: shownData,
            height: height,
            keys: keys,
            width: width,
            x0Scale: x0Scale,
            x1Scale: x1Scale,
            yScale: yScale,
        };
    };
    HKBarChartData.prototype.render = function () {
        var _this = this;
        var _a = this.state, data = _a.data, height = _a.height, width = _a.width, x0Scale = _a.x0Scale, yScale = _a.yScale;
        var bars = data.map(function (rowData, rowIdx) { return (React.createElement("g", { key: "row-" + rowIdx, className: 'dim' }, rowData.map(function (colVal, colIdx) { return _this.createBar(rowIdx, colVal, colIdx); }))); });
        return (React.createElement("svg", { preserveAspectRatio: 'none', onMouseMove: this.handleMouseMove, onMouseLeave: this.handleMouseLeave, width: width, height: height, viewBox: "0 0 " + width + " " + height, ref: function (ref) { return _this.ref = ref; } },
            React.createElement("g", { transform: "translate(" + constants_1.ChartPadding.Horizontal + ", 0)" },
                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(HKGrid_1.default, { type: 'bar', height: height, width: width, xScale: x0Scale, yScale: yScale }),
                bars)));
    };
    return HKBarChartData;
}(React.PureComponent));
exports.default = HKBarChartData;
//# sourceMappingURL=HKBarChartData.js.map