"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
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 chart_js_1 = require("chart.js");
var lodash_1 = require("lodash");
var React = require("react");
var recompose_1 = require("recompose");
var styled_components_1 = require("styled-components");
var asRendition_1 = require("../asRendition");
var chartPlugins_1 = require("../chartPlugins");
var theme_1 = require("../theme");
var font = theme_1.default.font;
var StatusGaugeWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: block;\n\tcolor: ", ";\n\n\t.gauge__graph {\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\tmax-width: 180px;\n\t\tmargin: 0px auto 10px;\n\t}\n\n\t.gauge__legend {\n\t\tlist-style: none;\n\t\tpadding: 5px;\n\t\tmargin: 16px auto 0;\n\t\tbackground: white;\n\t\tborder-radius: 5px;\n\t\tmax-width: 240px;\n\t\tborder: 1px solid #ececec;\n\t\toverflow: hidden;\n\t}\n\n\t.gauge__legend-item {\n\t\tdisplay: flex;\n\t\tpadding: 3px 0 3px 2px;\n\t\tline-height: 9px;\n\t\twidth: 50%;\n\t\tfloat: left;\n\t}\n\n\t.gauge__legend-color {\n\t\tdisplay: inline-block;\n\t\tflex: 0 0 auto;\n\t\twidth: 10px;\n\t\theight: 10px;\n\t\tmargin-right: 4px;\n\t}\n\n\t.gauge__legend-name {\n\t\tfont-size: 11px;\n\t}\n"], ["\n\tdisplay: block;\n\tcolor: ", ";\n\n\t.gauge__graph {\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\tmax-width: 180px;\n\t\tmargin: 0px auto 10px;\n\t}\n\n\t.gauge__legend {\n\t\tlist-style: none;\n\t\tpadding: 5px;\n\t\tmargin: 16px auto 0;\n\t\tbackground: white;\n\t\tborder-radius: 5px;\n\t\tmax-width: 240px;\n\t\tborder: 1px solid #ececec;\n\t\toverflow: hidden;\n\t}\n\n\t.gauge__legend-item {\n\t\tdisplay: flex;\n\t\tpadding: 3px 0 3px 2px;\n\t\tline-height: 9px;\n\t\twidth: 50%;\n\t\tfloat: left;\n\t}\n\n\t.gauge__legend-color {\n\t\tdisplay: inline-block;\n\t\tflex: 0 0 auto;\n\t\twidth: 10px;\n\t\theight: 10px;\n\t\tmargin-right: 4px;\n\t}\n\n\t.gauge__legend-name {\n\t\tfont-size: 11px;\n\t}\n"])), function (_a) {
    var theme = _a.theme;
    return theme.colors.text.main;
});
var StatusGauge = (function (_super) {
    __extends(StatusGauge, _super);
    function StatusGauge(props) {
        return _super.call(this, props) || this;
    }
    StatusGauge.prototype.componentDidMount = function () {
        this.generateDoughnut(this.props);
    };
    StatusGauge.prototype.componentWillReceiveProps = function (nextProps) {
        this.generateDoughnut(nextProps);
    };
    StatusGauge.prototype.componentWillUnmount = function () {
        this.destroyChart();
    };
    StatusGauge.prototype.generateDoughnut = function (props) {
        if (!this.doughnutRef) {
            return false;
        }
        this.destroyChart();
        var ctx = this.doughnutRef.getContext('2d');
        var title = props.title;
        var data = this.getGraphData(props.data);
        var options = this.getGraphOptions(props.data, title);
        this.doughnutChart = new chart_js_1.Chart(ctx, {
            type: 'doughnut',
            data: data,
            options: options,
            plugins: [chartPlugins_1.doughnutLabel],
        });
    };
    StatusGauge.prototype.getGraphData = function (data) {
        var _a = lodash_1.reduce(data, function (carry, item) {
            carry.values.push(item.value);
            carry.labels.push(item.name);
            carry.colors.push(item.color);
            carry.count += item.value;
            return carry;
        }, {
            values: [],
            labels: [],
            colors: [],
            count: 0,
        }), values = _a.values, colors = _a.colors, labels = _a.labels, count = _a.count;
        return {
            labels: labels,
            datasets: [
                {
                    backgroundColor: count > 0 ? colors : this.props.placeholderColor,
                    data: count > 0 ? values : [1],
                },
            ],
        };
    };
    StatusGauge.prototype.getGraphOptions = function (data, title) {
        var count = lodash_1.reduce(data, function (carry, item) { return carry + item.value; }, 0);
        var pluginOptions = this.getLabelOptions(count, title);
        var options = {
            responsive: true,
            maintainAspectRatio: false,
            legend: {
                display: false,
            },
            elements: {
                arc: {
                    borderWidth: 0,
                },
            },
            tooltips: { enabled: count > 0 },
            plugins: { doughnutLabel: pluginOptions },
        };
        if (this.props.disableAnimation) {
            options.animation = {
                duration: 0,
            };
        }
        return options;
    };
    StatusGauge.prototype.getLabelOptions = function (count, title) {
        return {
            primaryLabel: __assign({}, chartPlugins_1.doughnutDefaults.primaryLabel, { font: font, size: count > 999 ? 22 : count > 99 ? 30 : 38, offsetFromCenter: count > 999 ? 8 : 12, text: count }),
            secondaryLabel: __assign({}, chartPlugins_1.doughnutDefaults.secondaryLabel, { font: font, text: title.toUpperCase() }),
        };
    };
    StatusGauge.prototype.destroyChart = function () {
        if (this.doughnutChart) {
            this.doughnutChart.destroy();
            this.doughnutChart = null;
        }
    };
    StatusGauge.prototype.render = function () {
        var _this = this;
        return (React.createElement(StatusGaugeWrapper, __assign({}, this.props),
            React.createElement("div", { className: "gauge__graph" },
                React.createElement("canvas", { ref: function (canv) { return (_this.doughnutRef = canv); }, width: "165", height: "165" })),
            React.createElement("ul", { className: "gauge__legend" }, lodash_1.map(this.props.data, function (item) {
                return (React.createElement("li", { key: item.key || item.name, className: "gauge__legend-item" },
                    React.createElement("span", { className: "gauge__legend-color", style: { backgroundColor: item.color } }, "\u00A0"),
                    React.createElement("span", { className: "gauge__legend-name" }, item.name)));
            }))));
    };
    return StatusGauge;
}(React.Component));
exports.default = recompose_1.compose(styled_components_1.withTheme, asRendition_1.default)(StatusGauge);
var templateObject_1;
