{% extends "base_charts.html" %}

{% block page_title %}{{ system|upper }} - SSD Devices - InfiniMetrics{% endblock %}

{% block header_title %}{{ system|upper }} – SSD Devices{% endblock %}

{% block breadcrumbs %}
    <span><a href="{% url "ssd_devices" system.serial %}">SSD Devices</a></span>
    <span>Aggregate</span>
{% endblock %}

{% block content %}
    {{ block.super }}
    <script>

        // Values are in KiB instead of bytes, so adjust labels accordingly
        Dygraph.KMG2_BIG_LABELS.shift();

        var colors = brightenColors([
            "#FFFF00", "#1CE6FF", "#FF34FF", "#FF4A46", "#008941", "#006FA6", "#A30059",
            "#FFDBE5", "#7A4900", "#0000A6", "#63FFAC", "#B79762", "#004D43", "#8FB0FF", "#997D87",
            "#5A0007", "#809693", "#FEFFE6", "#1B4400", "#4FC601", "#3B5DFF", "#4A3B53", "#FF2F80",
            "#61615A", "#BA0900", "#6B7900", "#00C2A0", "#FFAA92", "#FF90C9", "#B903AA", "#D16100",
            "#DDEFFF", "#00846F", "#7B4F4B", "#A1C299", "#0AA6D8"]);

        $(document).ready(function() {
            $.get('{% url "names" serial ids %}', function(names) {
                var labels = ['timestamp'].concat(names);
                var annotations = new AnnotationFormatter({
                    collection: new ChartAnnotations([], {url: '{% url "annotations" serial %}'})
                });
                var charts = [
                    new ChartView({
                        model: new ChartData({}, {
                            url: '{% url "aggregate_entities_data" serial entity_ids "ssd_device_read_rate" %}',
                            chart_start: chart_start,
                            chart_end: chart_end,
                            polling_interval: {{ polling_interval }}
                        }),
                        annotations: annotations,
                        chart_type: 'stacked',
                        chart_options: {
                            title: 'Read Rate',
                            labels: labels,
                            colors: colors,
                            labelsKMG2: true,
                            axes: {
                                y: {
                                    valueFormatter: formatters.throughput,
                                    axisLabelFormatter: formatters.throughput
                                },
                                x: {
                                    drawGrid: false
                                }
                            }
                        }
                    }),
                    new ChartView({
                        model: new ChartData({}, {
                            url: '{% url "aggregate_entities_data" serial entity_ids "ssd_device_write_rate" %}',
                            chart_start: chart_start,
                            chart_end: chart_end,
                            polling_interval: {{ polling_interval }}
                        }),
                        annotations: annotations,
                        chart_type: 'stacked',
                        chart_options: {
                            title: 'Write Rate',
                            labels: labels,
                            colors: colors,
                            labelsKMG2: true,
                            axes: {
                                y: {
                                    valueFormatter: formatters.throughput,
                                    axisLabelFormatter: formatters.throughput
                                },
                                x: {
                                    drawGrid: false
                                }
                            }
                        }
                    })
                ];
                MainApp.start({charts: charts});
            });
        });
    </script>
{% endblock %}