{% extends "base.html" %}

{% block content %}
    <h2>{{ _('Statistics') }}</h2>

    {% include 'numbers.html' %}


    <h2>{{ _s('Browser updates') }}</h2>


    <style>
        .node rect {
            fill-opacity: .9;
            shape-rendering: crispEdges;
        }

        .link:hover {
            stroke-opacity: .5;
        }

        .node text {
            text-shadow: none;
            pointer-events: none;
            font-family: 'Open Sans', sans-serif;
        }

        .link {
            fill: none;
            stroke: #000;
            stroke: url(#grad1);
            stroke-opacity: 0.3;
        }

        .hnode {
            position: absolute;
            background-position: center center;
            background-repeat: no-repeat;
            opacity: 0.3;
            background-size: 120px;
            filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
            filter: gray; /* IE6-9 */
            -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */

        }

        #chart {
            height: 500px;
            position: relative;
            margin-bottom: 100px;
        }
    </style>
    <script>
        var data = {
            "nodes": [
                {"name": "Other"}, {"name": "IE/Edge"}, {"name": "Firefox"}, {"name": "Opera"}, {"name": "Safari"}, {"name": "Chrome"},
                {"name": "Other"}, {"name": "IE/Edge"}, {"name": "Firefox"}, {"name": "Opera"}, {"name": "Safari"}, {"name": "Chrome"}
            ],
            "links": [
                {{ updates_js|safe }}
            ]
        };
    </script>
    <div id="chart"></div>

    <script src="https://d3js.org/d3.v2.min.js?2.9.1"></script>
    <script src="/static/sankey.js"></script>


    <script>

        var margin = {top: 1, right: 1, bottom: 6, left: 1},
            width = 700 - margin.left - margin.right,
            height = 500 - margin.top - margin.bottom;

        var format = function (d) {
            return d;
        };
        var colors = {
            "IE/Edge": "#6D95B9"/*"#00CCFF"*/,
            "Firefox": "#F2951F",
            "Opera": "#CC0F16",
            "Safari": "#2abce0",
            "Chrome": "#4CB849"
        };
        var bs = {"IE/Edge": "ie", "Firefox": "ff", "Opera": "op", "Safari": "sa", "Chrome": "ch"};

        var svg = d3.select("#chart").append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        var defs = svg.append('defs');
        var grad = defs.append('linearGradient')
            .attr('id', 'grad1')
            .attr('x1', '0')
            .attr('x2', '1')
            .attr('y1', '0')
            .attr('y2', '0');
        grad.append('stop').attr('class', 'grad1Stop1').attr('offset', '1%');
        grad.append('stop').attr('class', 'grad1Stop2').attr('offset', '100%');


        var elc = d3.select("#chart");

        var sankey = d3.sankey()
            .nodeWidth(55)
            .nodePadding(10)
            .size([width, height]);

        var path = sankey.link();


        function run(data) {
            sankey
                .nodes(data.nodes)
                .links(data.links)
                .layout(32);

            var link = svg.append("g").selectAll(".link")
                .data(data.links)
                .enter().append("path")
                .attr("class", "link")
                .attr("d", path)
                .style("stroke-width", function (d) {
                    return Math.max(1, d.dy);
                })
                .style("stroke", function (d) {
                    return d.color = colors[d.source.name];
                })
                //.style("stroke","url(#grad1)")
                //.style("stroke","")
                .style("stroke-opacity", "")
                .sort(function (a, b) {
                    return b.dy - a.dy;
                });

            link.append("title")
                .text(function (d) {
                    return d.source.name + " → " + d.target.name + "\n" + format(d.value);
                });

            var node = svg.append("g").selectAll(".node")
                .data(data.nodes)
                .enter().append("g")
                .attr("class", "node")
                .attr("transform", function (d) {
                    return "translate(" + d.x + "," + d.y + ")";
                });

            node.append("rect")
                .attr("height", function (d) {
                    return d.dy;
                })
                .attr("width", sankey.nodeWidth())
                .style("fill", function (d) {
                    return d.color = colors[d.name];
                })
                .append("title")
                .text(function (d) {
                    return d.name + " " + d.value;
                });

            /* var hnode = elc.selectAll(".hnode")
                 .data(data.nodes)
                 .enter().append("div")
                 .attr("class", "hnode")
                 .style("left", function(d) { return d.x +"px";})
                 .style("top", function(d) { return d.y+"px";})
                 .style("height", function(d) { return d.dy+"px"; })
                 .style("width", sankey.nodeWidth()+"px");
                 //.style("background-color", function(d) { return d.color = colors[d.name]; })
                 //.style("background-image", function(d) { if (d.dy>50) return "url(../img/big/"+bs[d.name]+ ".png)"})
           */
            node.append("text")
                .attr("x", -6)
                .attr("y", function (d) {
                    return d.dy / 2;
                })
                .attr("dy", ".45em")
                .attr("text-anchor", "end")
                .attr("transform", null)
                .text(function (d) {
                    return d.name;
                })
                .filter(function (d) {
                    return d.x < width / 2;
                })
                .attr("x", 6 + sankey.nodeWidth())
                .attr("text-anchor", "start");
        }

        run(data);

    </script>















    <table>
        <thead>
        <tr>
            <td>{{ _x('From') }}</td>
            <td> {{ _x('To') }}</td>
            <td></td>
        </tr>
        </thead>
        <tbody>
        {% for u in updates %}
            <tr>
                <td>{{ u.from }}</td>
                <td>{{ u.to }}</td>
                <td>{{ u.num }}</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>

{% endblock %}