{% extends "base_charts.html" %}

{% block content %}
    {{ block.super }}
    <script>
        $(document).ready(function() {
            var io_model = new ChartData({}, {
                url: '{% url "entity_data" serial monitored_entity_id "io_by_size" %}',
                chart_start: chart_start,
                chart_end: chart_end,
                polling_interval: {{ monitored_entity.polling_interval }}
            });
            var labels = ['timestamp', 'Size < 4KiB', '4KiB <= Size < 8KiB', '8KiB <= Size < 32KiB', '32KiB <= Size < 64KiB', '64KiB <= Size < 512KiB', 'Size >= 512KiB'];
            var annotations = new AnnotationFormatter({
                collection: new ChartAnnotations([], {url: '{% url "annotations" serial %}?monitored_entity_id={{ monitored_entity_id }}'})
            });
            var charts = [
                new ChartView({
                    model: new PartialChartData({}, {parent: io_model, column_indices: [0, 1, 2, 3, 4, 5, 6]}),
                    annotations: annotations,
                    key: '{{ monitored_entity.get_class_name }}_1',
                    chart_type: 'line',
                    chart_options: {
                        title: 'READS PER SECOND',
                        labels: labels,
                        errorBars: iu,
                    }
                }),
                new ChartView({
                    model: new PartialChartData({}, {parent: io_model, column_indices: [0, 19, 20, 21, 22, 23, 24]}),
                    annotations: annotations,
                    key: '{{ monitored_entity.get_class_name }}_2',
                    chart_type: 'line',
                    chart_options: {
                        title: 'WRITES PER SECOND',
                        labels: labels,
                        errorBars: iu,
                    }
                }),
                new ChartView({
                    model: new PartialChartData({}, {parent: io_model, column_indices: [0, 7, 8, 9, 10, 11, 12]}),
                    annotations: annotations,
                    key: '{{ monitored_entity.get_class_name }}_3',
                    chart_type: 'line',
                    chart_options: {
                        title: 'READ THROUGHPUT',
                        labels: labels,
                        errorBars: iu,
                        labelsKMG2: true,
                        axes: {
                            y: {
                                valueFormatter: formatters.throughput,
                                axisLabelFormatter: formatters.throughput
                            },
                            x: {
                                drawGrid: false
                            }
                        }
                    }
                }),
                new ChartView({
                    model: new PartialChartData({}, {parent: io_model, column_indices: [0, 25, 26, 27, 28, 29, 30]}),
                    annotations: annotations,
                    key: '{{ monitored_entity.get_class_name }}_4',
                    chart_type: 'line',
                    chart_options: {
                        title: 'WRITE THROUGHPUT',
                        labels: labels,
                        errorBars: iu,
                        labelsKMG2: true,
                        axes: {
                            y: {
                                valueFormatter: formatters.throughput,
                                axisLabelFormatter: formatters.throughput
                            },
                            x: {
                                drawGrid: false
                            }
                        }
                    }
                }),
                new ChartView({
                    model: new PartialChartData({}, {parent: io_model, column_indices: [0, 13, 14, 15, 16, 17, 18]}),
                    annotations: annotations,
                    key: '{{ monitored_entity.get_class_name }}_5',
                    chart_type: 'line',
                    chart_options: {
                        title: 'READ LATENCY',
                        labels: labels,
                        errorBars: iu,
                        axes: {
                            y: {
                                valueFormatter: formatters.latency,
                                axisLabelFormatter: formatters.latency,
                            },
                            x: {
                                drawGrid: false
                            }
                        }
                    }
                }),
                new ChartView({
                    model: new PartialChartData({}, {parent: io_model, column_indices: [0, 31, 32, 33, 34, 35, 36]}),
                    annotations: annotations,
                    key: '{{ monitored_entity.get_class_name }}_6',
                    chart_type: 'line',
                    chart_options: {
                        title: 'WRITE LATENCY',
                        labels: labels,
                        errorBars: iu,
                        axes: {
                            y: {
                                valueFormatter: formatters.latency,
                                axisLabelFormatter: formatters.latency,
                            },
                            x: {
                                drawGrid: false
                            }
                        }
                    }
                })
            ];
            MainApp.start({charts: charts});
        });
    </script>
{% endblock %}