{% block content %}
<div class="container">
    <hr>
    <h4>Email Domain Analysis</h4>
    <div class="container">
        <canvas id="emailChart1" width="600" height="200"></canvas>
        <div class="row">
            <div class="col-6">
                <script>
                var bar_ctx = document.getElementById("emailChart1");
                var bar_chart = new Chart(bar_ctx, {
                    type: 'bar',
                    data: {
                        labels: {{e_stats.domain_list}},
                        datasets: []
                    },
                    options: {
                        plugins: {
                            title: {
                                display: true,
                                text: 'Label Distribution across Domains'
                            },
                            legend: {
                                labels: {
                                    usePointStyle: true,
                                },
                            },
                            zoom: {
                                pan: {
                                    enabled: true,
                                    mode: 'x',
                                },
                                zoom: {
                                    wheel: {
                                        enabled: true
                                    },
                                    mode: 'x',
                                },
                            }
                        },
                        animation: {
                            duration: 10,
                        },
                        scales: {
                            x: {
                                title: {
                                    display: true,
                                    text: 'Email Domain'
                                },
                                stacked: true,
                                grid: {
                                    display: false
                                },
                                ticks: {
                                    callback: function(val, index) {
                                        return this.getLabelForValue(val).toString().slice(0, 12);
                                    },
                                },
                                max: 10,
                            },
                            y1: {
                                title: {
                                    color: '#75f542',
                                    display: true,
                                    text: 'Percentage'
                                },
                                position: 'right',
                                ticks: {
                                    color: '#75f542',
                                },
                                min: 0,
                                max: 1,
                                grid: {
                                    drawOnChartArea: false, // only want the grid lines for one axis to show up
                                },
                            },
                            y: {
                                title: {
                                    display: true,
                                    text: 'Count'
                                },
                                stacked: true,
                            },
                        },
                        legend: {
                            display: true
                        }
                    },
                });
                var majority_cls = {{overview.Majority_label}};
                var pctg = {{e_stats['pctg']}};
                var newDataset = {
                    label: 'Percentage of '.concat('', {{overview.Majority_label}}),
                    data: pctg[majority_cls],
                    hover: {
                        mode: null
                    },
                    backgroundColor: '#75f542',
                    borderColor: '#75f542',
                    type: 'line',
                    yAxisID: 'y1',
                    pointStyle: 'line'
                };
                bar_chart.config.data.datasets.push(newDataset);
                var model = {{e_stats['label_counts']}};
                var colors = {{label_colors}};
                var hover_colors = {{hover_colors}};
                for(label_value in colors) {
                    if(label_value != 'Missing Labels') {
                        var newDataset = {
                            label: label_value,
                            data: [],
                            backgroundColor: colors[label_value],
                            hoverBorderColor: '#ff0000',
                            hoverBorderWidth: 2,
                            hoverBackgroundColor: hover_colors[label_value],
                            yAxisID: 'y',
                            pointStyle: 'rect'
                        };
                        for(value in model[label_value]) {
                            newDataset.data.push(model[label_value][value]);
                        }
                        bar_chart.config.data.datasets.push(newDataset);
                    }
                }
                bar_chart.update();

                function resetZoomChartEmail() {
                    var graph = Chart.getChart('emailChart1')
                    graph.resetZoom();
                }
                </script>
            </div>
        </div>
    </div>
    <button type="button" class="btn btn-outline-primary" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="resetZoomChartEmail()">Reset zoom</button>
    <p></p> {% if e_stats.email_warnings > 0 %}
    <div class="alert alert-warning" role="alert">
        <table class="table table-striped">
            <tbody> {% for key in e_warnings.keys() %}
                <tr>
                    <td>{{ e_warnings[key] }}</td>
                </tr> {% endfor %} </tbody>
        </table>
    </div> 
{% endif %} 
</div> 
{% endblock %}