<!DOCTYPE html>


<html>
<head>
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}" />
<script type="text/javascript" src="{% static 'js/jquery.chained.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/jquery.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/tableExport.js' %}"></script>
<script type="text/javascript" src="{% static 'js/jquery.base64.js' %}"></script>
<script type="text/javascript" src="{% static 'js/jquery.tablesorter.js' %}"></script>
<!--<script type="text/javascript" src="{% static 'js/jquery-1.11.2.min.js' %}"></script>-->
<script type="text/javascript" src="{% static 'js/sorttable.js' %}"></script>
<script type="text/javascript" src="{% static 'js/excellentexport.js' %}"></script>

<script type="text/javascript" src="{% static 'js/bootstrap.min.js' %}"></script>

<script type="text/javascript" src="{% static 'js/jvenn.min.js' %}"></script>
<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>

<script type="text/javascript" src="{% static 'js/bootstrap-switch.js' %}"></script>
<link rel="stylesheet" type="text/css" href="{% static 'css/toggle-switch.css' %}" />
<script type="text/javascript" src="{% static 'js/downloadSVG.js' %}"></script>
</head>


<body>


    <div id="content">

        <div class="panel panel-success" style="width:80%; top: 200px; margin: 10px 10px 10px 10px">
            <div class="panel-heading" style="width:100%">
                <h3 class="panel-title">Help</h3>
            </div>
            <p style="margin: 10px 10px 10px 10px">COGs selection versus all COGs in all selected genomes<br>
            </p>
        </div>
        <ol>
            <li> number of KO selected: {{match_groups_subset|length}} => counts in {{type}}: {{total_subset}}</li>
            <li> number of COGs in all selected genomes (panel A only): {{match_groups|length}} => counts in {{type}}: {{total_all_include}} </li>
             <li> number of allowed missing data: {{n_missing}} out of a total of {{include|length}} genomes </li>
        </ol>


        <style>

        /*
        .chart rect {
          fill: steelblue;
        }
        */
        .chart .legend {
          fill: black;
          font: 14px sans-serif;
          text-anchor: start;
          font-size: 12px;
        }

        .chart text {
          fill: black;
          font: 10px sans-serif;
          text-anchor: end;
        }

        .chart .label:hover {
          fill: red;
        }

        .chart .label {
          fill: black;
          font: 10px sans-serif;
          text-anchor: end;
        }


        .bar:hover {
          fill: brown;
        }

        .axis path,
        .axis line {
          fill: none;
          stroke: #000;
          shape-rendering: crispEdges;
        }


        </style>


        <div id="mydiv" style="float: left"></div>
        <svg class="chart"></svg>



        <script src="http://d3js.org/d3.v3.min.js"></script>
        <script>

        var data = {
          labels: {{labels|safe}},
          series: {{series|safe}}
        };

        {{category_count_complete|safe}}

        var chartWidth       = 380,
            barHeight        = 10,
            groupHeight      = barHeight * data.series.length,
            gapBetweenGroups = 10,
            spaceForLabels   = 370,
            spaceForLegend   = 180;

        // Zip the series data together (first values, second values, etc.)
        var zippedData = [];
        for (var i=0; i<data.labels.length; i++) {
          for (var j=0; j<data.series.length; j++) {
            zippedData.push(data.series[j].values[i]);
          }
        }

        // Color scale
        var color = d3.scale.category20();
        var chartHeight = barHeight * zippedData.length + gapBetweenGroups * data.labels.length;

        var x = d3.scale.linear()
            .domain([0, d3.max(zippedData)])
            .range([0, chartWidth]);

        var y = d3.scale.linear()
            .range([chartHeight + gapBetweenGroups, 0]);

        var yAxis = d3.svg.axis()
            .scale(y)
            .tickFormat('')
            .tickSize(0)
            .orient("left");

        // Specify the chart area and dimensions
        var chart = d3.select(".chart")
            .attr("width", spaceForLabels + chartWidth + spaceForLegend)
            .attr("height", chartHeight);

        // Create bars
        var bar = chart.selectAll("g")
            .data(zippedData)
            .enter().append("g")
            .attr("transform", function(d, i) {
              return "translate(" + spaceForLabels + "," + (i * barHeight + gapBetweenGroups * (0.5 + Math.floor(i/data.series.length))) + ")";
            }
            )
             //   Math.floor(i/data.series.length)
            .attr("taxon_id", function(d,i) { return (i % data.series.length) ; })
            .attr("category_id", function(d,i) { return (Math.floor(i/data.series.length)) ; });


        // Create rectangles of the correct width
        bar.append("rect")
            .attr("fill", function(d,i) { return color(i % data.series.length); })
            .attr("class", "bar")
            .attr("width", x)
            .attr("height", barHeight - 1)
            .on("click",drill);


        // Add text label in bar
        bar.append("text")
            .attr("x", function() { return -5; })
            .attr("y", barHeight / 2)
            .attr("fill", "red")
            .attr("dy", ".35em")
            .text(function(d) { return d; });

        bar.append("text")
            .attr("x", function(d) { return x(d); })
            .attr("y", barHeight / 2)
            .attr("fill", "red")
            .attr("dy", ".35em")
            .text(function(d, i) { return category_count_complete[data.labels[Math.floor(i/data.series.length)]][i % data.series.length]; }); // category_count_complete[data.labels[Math.floor(i/data.series.length)]]

        // Draw labels
        bar.append("text")
            .attr("class", "label")
            .attr("x", function(d) { return - 55; })
            .attr("y", groupHeight / 2)
            .attr("dy", ".35em")
            .text(function(d,i) {
              if (i % data.series.length === 0)
                return (data.labels[Math.floor(i/data.series.length)] );
              else
                return ""});
                // "/chlamdb/venn_cog/{{biodb}}/" + "/" + category + "{{circos_url|safe}}"
            //.on("click",drill2);

        function drill(d, i) {

            var category = data.labels[d3.select(this.parentNode).attr("category_id")]; //data object
            category = category.split(' ').join('+');
            window.open("/chlamdb/get_ko_multiple/{{type}}/" + category + "{{taxons_in_url|safe}}" + "{{taxon_out_url|safe}}");
        }

        chart.append("g")
              .attr("class", "y axis")
              .attr("transform", "translate(" + spaceForLabels + ", " + -gapBetweenGroups/2 + ")")
              .call(yAxis);

        // Draw legend
        var legendRectSize = 18,
            legendSpacing  = 4;

        var legend = chart.selectAll('.legend')
            .data(data.series)
            .enter()
            .append('g')
            .attr('transform', function (d, i) {
                var height = legendRectSize + legendSpacing;
                var offset = -gapBetweenGroups/2;
                var horz = spaceForLabels + chartWidth + 40 - legendRectSize;
                var vert = i * height - offset;
                return 'translate(' + horz + ',' + vert + ')';
            });

        legend.append('rect')
            .attr('width', legendRectSize)
            .attr('height', legendRectSize)
            .style('fill', function (d, i) { return color(i); })
            .style('stroke', function (d, i) { return color(i); });

        legend.append('text')
            .attr('class', 'legend')
            .attr('x', legendRectSize + legendSpacing)
            .attr('y', legendRectSize - legendSpacing)
            .text(function (d) { return d.label; });

        d3.select("#mydiv").append("button")
                .attr("type","button")
                .attr("class", "btn btn-primary btn-sm")
                .text("Download SVG")
                .on("click", function() {
                    // download the svg
                    downloadSVG();
                });

        </script>
</div>

</body>
</html>
