{% extends "base_general_charts.html" %}

{% block content %}
    {{ block.super }}
    <script>
        $(document).ready(function() {
            var labels = ['timestamp', 'Node 1', 'Node 2', 'Node 3'];
            var annotations = new AnnotationFormatter({
                collection: new ChartAnnotations([], {url: '{% url "annotations" serial %}?monitored_entity_id={{ monitored_entity_id }}'})
            });
            var ssd_model = new ChartData({}, {
                url: '{% url "entity_data" serial monitored_entity_id "ssd_cache" %}',
                chart_start: chart_start,
                chart_end: chart_end,
                polling_interval: {{ monitored_entity.polling_interval }}
            });
            var charts = [
                new ChartView({
                    model: new PartialChartData({}, {parent: ssd_model, column_indices: [0, 1, 7, 13]}),
                    annotations: annotations,
                    key: '{{ monitored_entity.get_class_name }}_1',
                    chart_options: {
                        title: 'HIT RATIO',
                        labels: labels,
                        axes: {
                            y: {
                                valueFormatter: formatters.percent,
                                axisLabelFormatter: formatters.percent
                            },
                            x: {
                                drawGrid: false
                            }
                        }
                    }
                }),
                new ChartView({
                    model: new PartialChartData({}, {parent: ssd_model, column_indices: [0, 3, 9, 15]}),
                    annotations: annotations,
                    key: '{{ monitored_entity.get_class_name }}_2',
                    chart_options: {
                        title: 'READ RATE',
                        labels: labels,
                        labelsKMG2: true,
                        axes: {
                            y: {
                                valueFormatter: formatters.throughput,
                                axisLabelFormatter: formatters.throughput
                            },
                            x: {
                                drawGrid: false
                            }
                        }
                    }
                }),
                new ChartView({
                    model: new PartialChartData({}, {parent: ssd_model, column_indices: [0, 4, 10, 16]}),
                    annotations: annotations,
                    key: '{{ monitored_entity.get_class_name }}_3',
                    chart_options: {
                        title: 'WRITE RATE',
                        labels: labels,
                        labelsKMG2: true,
                        axes: {
                            y: {
                                valueFormatter: formatters.throughput,
                                axisLabelFormatter: formatters.throughput
                            },
                            x: {
                                drawGrid: false
                            }
                        }
                    }
                }),
                new ChartView({
                    model: new PartialChartData({}, {parent: ssd_model, column_indices: [0, 5, 6, 11, 12, 17, 18]}),
                    annotations: annotations,
                    key: '{{ monitored_entity.get_class_name }}_4',
                    chart_options: {
                        title: 'PREFETCH COUNTS',
                        labels: ['timestamp', 'Node 1 Prefetches', 'Node 1 Prefetch Hits', 'Node 2 Prefetches', 'Node 2 Prefetch Hits', 'Node 3 Prefetches', 'Node 3 Prefetch Hits'],
                        colors: brightenColors(['#2ECC71', '#1A7440', '#F64747', '#D60A0A', '#8E44AD', '#542867'])
                    }
                })
            ];
            MainApp.start({charts: charts});
        });
    </script>
{% endblock %}