import * as d3 from 'd3';
import D3Support from '../D3Support';
import HeatmapOptions from './HeatmapOptions';
/**
 * Implementation of the 'heatmap' markup element.
 */
var Heatmap = /** @class */ (function () {
    // private colorCalibration:string[];
    function Heatmap(options) {
        if (options === void 0) { options = new HeatmapOptions(); }
        this.margin = { top: 20, right: 20, bottom: 20, left: 25 };
        this.options = options;
        this.width = options.itemSizeX * 25 + this.margin.top;
        this.height = options.itemSizeY * 25 + this.margin.left;
        this.itemSizeX = options.itemSizeX;
        this.itemSizeY = options.itemSizeY;
        this.cellSizeX = options.itemSizeX - 1;
        this.cellSizeY = options.itemSizeY - 1;
        // this.colorCalibration = options.color;
    }
    /**
     * @inheritDoc
     */
    Heatmap.prototype.render = function () {
        var div = document.createElement("div");
        div.classList.add("lto-vis-heatmap");
        div.innerHTML = '<svg />';
        return div;
    };
    Heatmap.prototype.init = function (element) {
        var _this = this;
        var dailyValueExtent = {};
        console.debug(element.querySelector("svg"));
        var svg = d3.select(element.querySelector("svg"));
        var heatmap = D3Support.initSvg(svg, this.width, this.height, this.margin);
        this.options.data.then(function (data) {
            data.forEach(function (valueObj) {
                valueObj['date'] = new Date(valueObj['timestamp']);
                var day = valueObj['day'] = D3Support.getMonthAndDay(valueObj.date);
                var dayData = dailyValueExtent[day] = (dailyValueExtent[day] || [1000, -1]);
                var pmValue = valueObj['value'];
                dayData[0] = d3.min([dayData[0], pmValue]);
                dayData[1] = d3.max([dayData[1], pmValue]);
            });
            var dateExtent = d3.extent(data, function (d) { return d.date; });
            // @ts-ignore
            var dayOffset = D3Support.getDayOfYear(dateExtent[0]);
            _this.renderAxis(dateExtent, svg, _this.margin);
            var rect = _this.renderRects(heatmap.selectAll('rect'), data, dayOffset);
            _this.renderColor(dayOffset, dailyValueExtent, rect);
            d3.select(self.frameElement).style('height', '600px');
        });
    };
    Heatmap.prototype.renderAxis = function (dateExtent, svg, margin) {
        var axisWidth = this.itemSizeX * (D3Support.getDayOfYear(dateExtent[1]) - D3Support.getDayOfYear(dateExtent[0]) + 1);
        var axisHeight = this.itemSizeY * 24;
        var xAxisScale = d3.scaleTime();
        var yAxisScale = d3.scaleLinear().range([0, axisHeight]).domain([0, 24]);
        var xAxis = d3.axisTop(xAxisScale).ticks(d3.timeDay.every(3)).tickFormat(function (a) { return D3Support.getMonthAndDay(a); });
        var yAxis = d3.axisLeft(yAxisScale).ticks(5).tickFormat(function (a) { return d3.format('02d')(a); });
        xAxis.scale(xAxisScale.range([0, axisWidth]).domain([dateExtent[0], dateExtent[1]]));
        svg.append('g')
            .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
            .attr('class', 'x axis')
            .call(xAxis);
        svg.append('g')
            .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
            .attr('class', 'y axis')
            .call(yAxis);
    };
    Heatmap.prototype.renderColor = function (dayOffset, dailyValueExtent, rect) {
        var _this = this;
        rect.filter(function (d) { return (d.value >= 0); })
            .transition()
            .delay(function (d) { return (D3Support.getDayOfYear(d.date) - dayOffset) * 15; })
            .duration(500)
            .attr('class', function (d) {
            var colorIndex = d3.scaleQuantize()
                .range([0, 1, 2, 3, 4, 5])
                .domain((_this.options.colorGroup !== "auto" ? _this.options.colorGroup : dailyValueExtent[d.day]));
            return "lto-vis-color-" + colorIndex(d.value);
        });
        // .attrTween('fill', (d: any, i: any, a: any) => {
        //     const colorIndex = d3.scaleQuantize()
        //         .range([0, 1, 2, 3, 4, 5])
        //         .domain((this.options.colorGroup !== "auto" ? this.options.colorGroup : dailyValueExtent[d.day]));
        //
        //     return d3.interpolate(a, this.colorCalibration[colorIndex(d.value)]);
        // });
    };
    Heatmap.prototype.renderRects = function (rect, data, dayOffset) {
        var _this = this;
        var newRect = rect
            .data(data)
            .enter()
            .append('rect')
            .attr('width', this.cellSizeX)
            .attr('height', this.cellSizeY)
            .attr('x', function (d) { return _this.itemSizeX * (D3Support.getDayOfYear(d.date) - dayOffset); })
            .attr('y', function (d) { return parseInt(d.timestamp.substr(11, 2), 10) * _this.itemSizeY; })
            .attr('fill', '#ffffff');
        rect.filter(function (d) { return d.value > 0; })
            .append('title')
            .text(function (d) { return D3Support.getMonthAndDay(d.date) + ' ' + d.value; });
        return newRect;
    };
    return Heatmap;
}());
export { Heatmap };
//# sourceMappingURL=Heatmap.js.map