// noinspection TsLint
import * as d3 from "d3";
import BarOptions from './BarOptions';
/**
 * Implementation of the 'line' markup element.
 */
var Bar = /** @class */ (function () {
    function Bar(options) {
        if (options === void 0) { options = new BarOptions(); }
        this.options = options;
    }
    /**
     * @inheritDoc
     */
    Bar.prototype.render = function () {
        var div = document.createElement("div");
        div.classList.add("lto-vis-bar");
        div.innerHTML = "<svg width=\"" + this.options.width + "\" height=\"" + this.options.height + "\" viewBox=\"0,0," + this.options.width + "," + this.options.height + "\" />";
        return div;
    };
    Bar.prototype.init = function (element) {
        var _this = this;
        this.options.data.then(function (data) {
            var svg = d3.select(element.querySelector("svg"));
            var x = _this.xBand(data);
            var y = _this.yBand();
            svg.append("g")
                .attr("fill", "rgb(0, 200, 220)")
                .selectAll("rect")
                .data(data)
                // @ts-ignore
                .join("rect")
                //@ts-ignore
                .attr("x", function (d) { return x(d.name); })
                .attr("y", function (d) { return y(d.value); })
                .attr("height", function (d) { return y(0) - y(d.value); })
                .attr("width", x.bandwidth());
            svg.append("g").call(_this.xAxis(x));
            svg.append("g").call(_this.yAxis(y));
            return svg.node();
        });
    };
    Bar.prototype.xBand = function (data) {
        return d3.scaleBand()
            .domain(data.map(function (d) { return d.name; }))
            .range([this.options.margin.left, this.options.width - this.options.margin.right])
            .padding(0.1);
    };
    Bar.prototype.yBand = function () {
        return d3.scaleLinear()
            // @ts-ignore
            .domain([0, d3.max(data, function (d) { return d.value; })]).nice()
            .range([this.options.height - this.options.margin.bottom, this.options.margin.top]);
    };
    Bar.prototype.xAxis = function (x) {
        var _this = this;
        return function (g) { return g
            .attr("transform", "translate(0," + (_this.options.height - _this.options.margin.bottom) + ")")
            .call(d3.axisBottom(x).tickSizeOuter(0)); };
    };
    Bar.prototype.yAxis = function (y) {
        var _this = this;
        return function (g) { return g
            .attr("transform", "translate(" + _this.options.margin.left + ",0)")
            .call(d3.axisLeft(y))
            .call(function (g) { return g.select(".domain").remove(); }); };
    };
    return Bar;
}());
export { Bar };
//# sourceMappingURL=Bar.js.map