import * as d3 from "d3";
import SunburstOptions from './SunburstOptions';
import { getDigit, getLetter } from "../../../support/Strings";
/**
 * Implementation of the 'sunburst' vis markup element.
 */
var Sunburst = /** @class */ (function () {
    function Sunburst(options) {
        if (options === void 0) { options = new SunburstOptions(); }
        this.idMap = new Map();
        this.totalSize = 0;
        this.options = options;
        this.radius = Math.min(options.width, options.height - 50) / 2;
    }
    // noinspection JSMethodCanBeStatic
    Sunburst.prototype.render = function () {
        var div = document.createElement("div");
        div.classList.add("lto-vis-sunburst");
        div.innerHTML = "\n            <div id=\"chart\">\n                <section id=\"legend\" />\n            </div>";
        return div;
    };
    Sunburst.prototype.init = function (element) {
        var _this = this;
        this.options.data.then(function (data) {
            var vis = d3.select(element.querySelector("#chart")).append("svg:svg")
                .attr("width", _this.options.width)
                .attr("height", _this.options.height - 20)
                .append("svg:g")
                .attr("id", "container")
                .attr("transform", "translate(" + _this.options.width / 2 + "," + (_this.options.height - 20) / 2 + ")");
            var partition = d3.partition().size([2 * Math.PI, _this.radius * _this.radius]);
            var arc = d3.arc()
                .startAngle(function (d) { return d.x0; })
                .endAngle(function (d) { return d.x1; })
                .innerRadius(function (d) { return Math.sqrt(d["y0"]); })
                .outerRadius(function (d) { return Math.sqrt(d["y1"]); });
            // @ts-ignore
            _this.createVisualization(data, vis, partition, arc, element);
        });
    };
    Sunburst.prototype.createVisualization = function (data, vis, partition, arc, element) {
        var _this = this;
        this.initializeBreadcrumbTrail(element);
        // Bounding circle underneath the sunburst, to make it easier to detect when the mouse leaves the parent g.
        vis.append("svg:circle").attr("r", this.radius).style("opacity", 0);
        var root = d3.hierarchy(data)
            .sum(function (d) { return d.size; })
            .sort(function (a, b) { return b.value - a.value; });
        var nodes = partition(root).descendants().filter(function (d) { return (d.x1 - d.x0 > _this.options.filter); });
        var path = vis.data([data]).selectAll("path")
            .data(nodes)
            .enter().append("svg:path")
            .attr("display", function (d) { return d.depth ? null : "none"; })
            .attr("d", arc)
            .attr("class", function (d) { return "lto-vis-" + getDigit(_this.idMap, d.data.name) + " lto-vis-" + getLetter(_this.idMap, d.data.name) + " " + (d.data.class || ""); })
            .attr("fill-rule", "evenodd")
            .on("mouseover", function (d) { return _this.mouseover(d, vis, _this.totalSize, element); });
        path
            .transition()
            .duration(1000)
            .style("opacity", 1);
        d3.select("#container").on("mouseleave", this.mouseleave);
        this.totalSize = path.datum().value;
    };
    Sunburst.prototype.initializeBreadcrumbTrail = function (element) {
        var trail = d3.select(element.querySelector("#legend")).append("svg:svg")
            .attr("width", this.options.width)
            .attr("height", 20)
            .attr("id", "trail");
        trail.append("svg:text")
            .attr("id", "endlabel")
            .style("fill", "#000");
    };
    // noinspection JSMethodCanBeStatic
    Sunburst.prototype.mouseleave = function () {
        d3.select(".lto-vis-sunburst #trail").style("visibility", "hidden");
        d3.selectAll(".lto-vis-sunburst path")
            .transition()
            .duration(1000)
            .style("opacity", 1)
            .on("end", function () {
        });
    };
    Sunburst.prototype.mouseover = function (d, vis, totalSize, element) {
        var percentage = parseFloat((100 * d.value / totalSize).toPrecision(3));
        var percentageString = (percentage < 0.1) ? "< 0.1%" : percentage + "%";
        var sequenceArray = d.ancestors().reverse();
        sequenceArray.shift(); // remove root node from the array
        this.updateBreadcrumbs(sequenceArray, percentageString, element);
        d3.selectAll(".lto-vis-sunburst #chart > svg path").style("opacity", 0.3);
        vis.selectAll("path")
            .filter(function (node) { return (sequenceArray.indexOf(node) >= 0); })
            .style("opacity", 1);
    };
    // noinspection JSUnusedLocalSymbols
    Sunburst.prototype.breadcrumbPoints = function (d, i) {
        var points = [];
        points.push("0,0");
        points.push(this.options.b.w + ",0");
        points.push(this.options.b.w + this.options.b.t + "," + (this.options.b.h / 2));
        points.push(this.options.b.w + "," + this.options.b.h);
        points.push("0," + this.options.b.h);
        if (i > 0) { // Leftmost breadcrumb; don't include 6th vertex.
            points.push(this.options.b.t + "," + (this.options.b.h / 2));
        }
        return points.join(" ");
    };
    Sunburst.prototype.updateBreadcrumbs = function (nodeArray, percentageString, element) {
        var _this = this;
        var trail = d3.select(element.querySelector("#trail"))
            .selectAll("g")
            .data(nodeArray, function (d) { return d.data.name + d.depth; });
        trail.exit().remove();
        var entering = trail.enter().append("svg:g");
        entering.append("svg:polygon")
            .attr("points", this.breadcrumbPoints.bind(this))
            .attr("class", function (d) { return "lto-vis-" + getDigit(_this.idMap, d.data.name) + " lto-vis-" + getLetter(_this.idMap, d.data.name); });
        entering.append("svg:text")
            .attr("x", (this.options.b.w + this.options.b.t) / 2)
            .attr("y", this.options.b.h / 2)
            .attr("dy", "0.35em")
            .attr("text-anchor", "middle")
            .text(function (d) { return _this.options.mapText(d.data.name); });
        entering.merge(trail).attr("transform", function (d, i) { return "translate(" + i * (_this.options.b.w + _this.options.b.s) + ", 0)"; });
        d3.select(element.querySelector("#trail")).select("#endlabel")
            .attr("x", (nodeArray.length + 0.5) * (this.options.b.w + this.options.b.s))
            .attr("y", this.options.b.h / 2)
            .attr("dy", "0.35em")
            .attr("text-anchor", "middle")
            .text(percentageString);
        d3.select(".lto-vis-sunburst #trail").style("visibility", "");
    };
    return Sunburst;
}());
export { Sunburst };
//# sourceMappingURL=Sunburst.js.map