{% load i18n %}
{% if widget.data.pending %}
<div id="requests-percentages" style="width: 190px; height: 140px;"></div>
<div id="requests-labels"></div>
<script type="text/javascript">
$(document).ready(function() {
    // Review Request percentage by status data.
    var data = [
        {
            label: "Draft ({{widget.data.draft}})",
            data: {{widget.data.pending}}
        },
        {
            label: "Pending ({{widget.data.pending}})",
            data: {{widget.data.pending}}
        },
        {
            label: "Discarded ({{widget.data.discarded}})",
            data: {{widget.data.discarded}}
        },
        {
            label: "Submitted ({{widget.data.submit}})",
            data: {{widget.data.submit}}
        }
    ];

    $("#review-request-statuses-widget").one("widget-shown", function() {
        // Pie chart plotting function.
        $.plot($("#requests-percentages"), data, {
            series: {
                pie: {
                    show: true,
                    radius: 0.8,
                    label: {
                        show: true,
                        radius: 1,
                        formatter: function(label, series) {
                            return '<div class="request-percentage-label">' +
                                   Math.round(series.percent) + '%</div>';
                        },
                        background: { opacity: 0.8 }
                    }
                }
            },
            legend: {
                container: $("#requests-labels"),
                show: true
            },
            hooks: {
                draw: [
                    function() {
                        /*
                         * Because drawing ends up packing in new elements
                         * after Masonry has set up the layout, this widget
                         * and the one below will partially stack unless we
                         * emit this.
                         */
                        $(window).triggerHandler('reflowWidgets');
                    }
                ]
            }
        });
    });
});
</script>
{% else %}
<p class="no-result">{% trans "No Data Available" %}</p>
{% endif %}
