/*=========================================================================================

    File Name: line.js

    Description: D3 simple line chart

    ----------------------------------------------------------------------------------------

    Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template

    Author: PIXINVENT

    Author URL: http://www.themeforest.net/user/pixinvent

==========================================================================================*/



// Line chart

// ------------------------------

$(window).on("load", function(){



    var ele = d3.select("#zoomable-sunburst"),

    width = ele.node().getBoundingClientRect().width,

    height = 400;

    radius = (Math.min(width, height) / 2) - 10;



    var formatNumber = d3.format(",d");



    var x = d3.scale.linear()

        .range([0, 2 * Math.PI]);



    var y = d3.scale.sqrt()

        .range([0, radius]);



    // Color

    var color = d3.scale.ordinal()

        .range(["#99B898", "#FECEA8", "#FF847C", "#E84A5F", "#C06C84", "#6C5B7B", "#355C7D"]);



    var partition = d3.layout.partition()

        .value(function(d) { return d.size; });



    var arc = d3.svg.arc()

        .startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); })

        .endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); })

        .innerRadius(function(d) { return Math.max(0, y(d.y)); })

        .outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); });



    var svg = ele.append("svg")

        .attr("width", width)

        .attr("height", height)

      .append("g")

        .attr("transform", "translate(" + width / 2 + "," + (height / 2) + ")");



    d3.json("../../../app-assets/data/d3/circle/flare.json", function(error, root) {

      if (error) throw error;



      svg.selectAll("path")

          .data(partition.nodes(root))

        .enter().append("path")

          .attr("d", arc)

          .style("fill", function(d) { return color((d.children ? d : d.parent).name); })

          .on("click", click)

        .append("title")

          .text(function(d) { return d.name + "\n" + formatNumber(d.value); });

    });



    function click(d) {

      svg.transition()

          .duration(750)

          .tween("scale", function() {

            var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),

                yd = d3.interpolate(y.domain(), [d.y, 1]),

                yr = d3.interpolate(y.range(), [d.y ? 20 : 0, radius]);

            return function(t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); };

          })

        .selectAll("path")

          .attrTween("d", function(d) { return function() { return arc(d); }; });

    }



    d3.select(self.frameElement).style("height", height + "px");



});