{% extends "base_general_charts.html" %}

{% block extra_head %}
    {{ block.super }}
    {% load static %}
    {% load compress %}
    {% compress css %}
        <link type="text/css" href='{% static "css/chart_3_cols_legend.css" %}' rel="stylesheet">
        <style>
            /* Legend columns lengths */
            :root {
                --legend-item-width: 160px;
                --legend-item-margin-right: 20px;
            }
        </style>
    {% endcompress %}
{% endblock %}

{% block content %}
    {{ block.super }}
    <script>
        $(document).ready(function() {
            var io_model = new ChartData({}, {
                url: '{% url "entity_data" serial monitored_entity_id "nas_io_by_protocol" %}',
                chart_start: chart_start,
                chart_end: chart_end,
                polling_interval: {{ monitored_entity.polling_interval }}
            });
            let baseLabels = ['timestamp',
                              'SMB Read', 'NFSv3 Read', 'NFSv4 Read',
                              'SMB Write', 'NFSv3 Write', 'NFSv4 Write',
                              'SMB Metadata', 'NFSv3 Metadata', 'NFSv4 Metadata'];
            let totalLabels = ['SMB Total', 'NFSv3 Total', 'NFSv4 Total'];
            let averageLabels = ['SMB Average', 'NFSv3 Average', 'NFSv4 Average'];
            var colors = brightenColors([
                "#F0F000", "#1CE6FF", "#FF34FF", "#FF4A46", "#008941", "#006FA6",
                "#A30059", "#61615A", "#FFDBE5", "#7A4900", "#0000A6", "#63FFAC"]);
            let annotations = new AnnotationFormatter({
                collection: new ChartAnnotations([], {url: '{% url "annotations" serial %}?monitored_entity_id={{ monitored_entity_id }}'})
            });

            IOByProtocolChartView = ChartView.extend({
                calcHeight: function() {
                    return 200;
                },
            });
            var charts = [
                new IOByProtocolChartView({
                    model: new NASIOByProtocolChartData({parent: io_model, type: 'OPS'}),
                    annotations: annotations,
                    key: '{{ monitored_entity.get_class_name }}_1',
                    chart_type: 'line',
                    chart_options: {
                        title: 'OPS <span class="experimental">EXPERIMENTAL</span>',
                        labels: [...baseLabels, ...totalLabels],
                        errorBars: iu,
                        colors: colors
                    }
                }),
                new IOByProtocolChartView({
                    model: new NASIOByProtocolChartData({parent: io_model, type: 'THROUGHPUT'}),
                    annotations: annotations,
                    key: '{{ monitored_entity.get_class_name }}_2',
                    chart_type: 'line',
                    chart_options: {
                        title: 'THROUGHPUT <span class="experimental">EXPERIMENTAL</span>',
                        labels: [...baseLabels, ...totalLabels],
                        errorBars: iu,
                        labelsKMG2: true,
                        colors: colors,
                        axes: {
                            y: {
                                valueFormatter: formatters.compact_throughput,
                                axisLabelFormatter: formatters.throughput
                            },
                            x: {
                                drawGrid: false
                            }
                        }
                    }
                }),
                new IOByProtocolChartView({
                    model: new NASIOByProtocolChartData({parent: io_model, type: 'LATENCY'}),
                    annotations: annotations,
                    key: '{{ monitored_entity.get_class_name }}_3',
                    chart_type: 'line',
                    chart_options: {
                        title: 'LATENCY <span class="experimental">EXPERIMENTAL</span>',
                        labels: [...baseLabels, ...averageLabels],
                        errorBars: iu,
                        colors: colors,
                        labelsKMG2: true,
                        axes: {
                            y: {
                                valueFormatter: formatters.compact_latency,
                                axisLabelFormatter: formatters.latency,
                            },
                            x: {
                                drawGrid: false
                            }
                        },
                    }
                }),
                new IOByProtocolChartView({
                    model: new NASIOByProtocolChartData({parent: io_model, type: 'BLOCKSIZE'}),
                    annotations: annotations,
                    key: '{{ monitored_entity.get_class_name }}_4',
                    chart_type: 'line',
                    chart_options: {
                        title: 'AVERAGE BLOCK SIZE <span class="experimental">EXPERIMENTAL</span>',
                        labels: [...baseLabels.slice(0, -3), ...averageLabels],
                        errorBars: iu,
                        colors: colors,
                        labelsKMG2: true,
                        axes: {
                            y: {
                                valueFormatter: formatters.compact_blocksize,
                                axisLabelFormatter: formatters.blocksize
                            },
                            x: {
                                drawGrid: false
                            }
                        }
                    }
                }),
            ];
            MainApp.start({charts: charts});
        });
    </script>
{% endblock %}