"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        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 extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var __read = (this && this.__read) || function (o, n) {
    var m = typeof Symbol === "function" && o[Symbol.iterator];
    if (!m) return o;
    var i = m.call(o), r, ar = [], e;
    try {
        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
    }
    catch (error) { e = { error: error }; }
    finally {
        try {
            if (r && !r.done && (m = i["return"])) m.call(i);
        }
        finally { if (e) throw e.error; }
    }
    return ar;
};
var __spread = (this && this.__spread) || function () {
    for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
    return ar;
};
Object.defineProperty(exports, "__esModule", { value: true });
var D3Chart_1 = require("../D3Chart");
var ToolTip_1 = require("../common/ToolTip");
var DefUtil_1 = require("../common/DefUtil");
var d3 = require("d3");
var _ = require("lodash");
var HOURS = _.range(24);
var TimeFormat = ['凌晨0点', '凌晨1点', '凌晨2点', '凌晨3点', '凌晨4点', '凌晨5点', '上午6点', '上午7点', '上午8点', '上午9点', '上午10点', '上午11点', '中午12点', '下午1点', '下午2点', '下午3点', '下午4点', '下午5点', '下午6点', '晚上7点', '晚上8点', '晚上9点', '晚上10点', '晚上11点'];
var hourRender = function (num) { return TimeFormat[parseInt(num)]; };
/**
 * 日期趋势
*/
var default_1 = /** @class */ (function (_super) {
    __extends(default_1, _super);
    function default_1() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.__ClassName = '_vc_line_datetrend';
        _this.__Grid = { left: 12, right: 30, top: 12, bottom: 45 };
        _this.type = 'line';
        _this.marginLeft = 0; //左Label宽度
        _this.showYAxis = false;
        _this.HourMap = new Map();
        _this.labelRotate = -300;
        _this.itemWidth = 0; // 一格的大小
        _this.barWidth = 12; // 一列的大小，最大为12
        _this.diff = 0;
        _this.widthScale = null;
        _this.heightScale = null;
        _this.lineTween = null;
        return _this;
    }
    default_1.prototype.init = function () {
        this.type = this.props.type || 'line';
        if (this.props.showYAxis) {
            this.showYAxis = true;
            this.marginLeft = this.props.marginLeft || this.marginLeft;
        }
        this.labelRotate = this.props.labelRotate || this.labelRotate;
    };
    default_1.prototype.sort = function () {
        var _a;
        var _this = this;
        this.HourMap.clear();
        HOURS.map(function (item) { return _this.HourMap.set(item, { value: 0 }); });
        this.props.data.map(function (item) {
            var key = parseInt(item[_this.props.labelField]);
            if (_this.HourMap.has(key)) {
                var obj = _this.HourMap.get(key);
                obj.value = item[_this.props.valueField];
                obj.data = item;
                _this.HourMap.set(key, obj);
            }
        });
        this.DATA = __spread(this.HourMap.keys()).map(function (key) { return { label: key, value: _this.HourMap.get(key).value, data: _this.HourMap.get(key).data || {} }; });
        this.DATA = _.orderBy(this.DATA, 'label', 'asc');
        var _b = __read([0, 1], 2), min = _b[0], max = _b[1];
        if (this.props.data.length > 0) {
            _a = __read(d3.extent(this.props.data, function (item) { return item[_this.props.valueField]; }), 2), min = _a[0], max = _a[1];
            if (min == max) {
                min = 0;
            }
        }
        this.widthScale = d3.scaleLinear().domain([0, this.DATA.length]).range([0, this.LAYOUT.w]);
        this.heightScale = d3.scaleLinear().domain([max, 0]).range([this.LAYOUT.h, 0]);
        this.itemWidth = this.LAYOUT.w / this.DATA.length;
        this.barWidth = this.itemWidth > this.barWidth ? this.barWidth : this.itemWidth;
        this.diff = (this.itemWidth - this.barWidth) / 2;
    };
    default_1.prototype.build = function () {
        this.SVG.append('defs').html(DefUtil_1.default.BuildLineDistribution());
        this.SVG.append('g').attr('class', '_line')
            .attr('transform', "translate(" + (this.LAYOUT.x + this.marginLeft) + "," + this.LAYOUT.y + ")")
            .append('path');
        this.SVG.append('g').attr('class', '_items')
            .attr('transform', "translate(" + (this.LAYOUT.x + this.marginLeft) + "," + this.LAYOUT.y + ")")
            .classed('_group_hover', this.props.onClick ? true : false);
        this.SVG.append("g")
            .attr("class", "_x_axis")
            .attr("transform", "translate(" + (this.LAYOUT.x + this.marginLeft) + "," + (this.LAYOUT.h + this.LAYOUT.y) + ")");
        this.SVG.append("g")
            .attr("class", "_y_axis")
            .attr("transform", "translate(" + (this.LAYOUT.x + this.marginLeft) + "," + this.LAYOUT.y + ")");
        this.update();
    };
    default_1.prototype.updateLine = function () {
        var _this = this;
        var lineTween = function (t) { return d3.line()
            .curve(d3.curveMonotoneX)
            .x(function (d, i) { return _this.itemWidth * i + _this.itemWidth / 2; })
            .y(function (d, i) { return _this.LAYOUT.h - (_this.heightScale(d['value'])) * t; }); };
        this.SVG.select('g._line path').datum(this.DATA)
            .transition()
            .duration(this.DURATION)
            .attrTween('d', function (d) { return function (t) { return lineTween(t)(d); }; });
    };
    default_1.prototype.updateArea = function () {
    };
    default_1.prototype.updateBar = function () {
        var _this = this;
        var group = this.SVG.select('g._items').selectAll('g._item').data(this.DATA, function (d) { return d['label']; });
        var enter = group.enter().append('g').attr('class', '_item');
        enter.append('rect')
            .merge(group.select('rect'))
            .attr('x', function (d, i) { return _this.diff + _this.itemWidth * i; })
            .transition()
            .duration(this.DURATION)
            .attr('width', this.barWidth)
            // @ts-ignore
            .attrTween('y', function (d) { return function (t) { return _this.LAYOUT.h - t * _this.heightScale(d['value']); }; })
            // @ts-ignore
            .attrTween('height', function (d) { return function (t) { return t * _this.heightScale(d['value']); }; });
        if (this.props.onClick) {
            enter.on('click', function (d, i, u) {
                if (d['data']) {
                    enter.classed('_item_selected', false);
                    d3.select(u[i]).classed('_item_selected', true);
                    _this.props.onClick(d['label'], d['data']);
                }
            });
        }
        enter.on('mouseover', function (d) {
            if (d['data']) {
                if (_this.props.tip) {
                    ToolTip_1.default.show(_this.props.tip(_.assign({}, d['data'], { __hour: hourRender(d['label']) })));
                }
                else {
                    ToolTip_1.default.show("<h2 class=\"vapfont\">" + hourRender(d['label']) + " : " + d['value'] + "</h2>");
                }
            }
        }).on('mouseout', function () { return ToolTip_1.default.hide(); });
        group.exit().remove();
    };
    default_1.prototype.update = function () {
        var _this = this;
        switch (this.type) {
            case 'line':
                this.updateLine();
                break;
            case 'area':
                this.updateArea();
                break;
            case 'bar':
                this.updateBar();
                break;
            case 'linebar':
                this.updateLine();
                this.updateBar();
                break;
        }
        var xAxis = this.SVG.select('g._x_axis').call(d3.axisBottom(this.widthScale).ticks(23).tickSize(1).tickFormat(hourRender));
        xAxis.selectAll("text")
            .style("text-anchor", "start")
            .attr("dx", "8")
            .attr("dy", "-6")
            .attr("transform", "rotate(" + this.labelRotate + ")");
        if (this.showYAxis) {
            this.SVG.select('g._y_axis').call(d3.axisLeft(this.heightScale).ticks(4).tickSize(1).tickFormat(function (e) { return _this.FormatValue(e); }));
        }
    };
    return default_1;
}(D3Chart_1.default));
exports.default = default_1;
