{% extends "base_general_charts.html" %}

{% block top_menu_items %}
    <li><a href="{% url "monitored-entity-list" system.serial %}?id=in:{{ all_ids }}" target="_blank">View in API Browser</a></li>
    <li><a href="#" onclick="export_data({{ monitored_entity.id }}, '{{ system.name }} System power consumption'); return false;">Export System Data</a></li>
    {% if pdu_ids %}
        <li><a href="#" onclick="export_data([{{ pdu_ids }}], '{{ system.name }} PDUs power consumption'); return false;">Export PDUs Data </a></li>
    {% endif %}
{% endblock %}


{% block content %}
    {{ block.super }}
    <script>
        $(document).ready(function() {

            // Force the system tab to be selected
            $('#sidebar-system').addClass('active');

            var annotations = new AnnotationFormatter({
                collection: new ChartAnnotations([], {url: '{% url "annotations" serial %}?monitored_entity_id={{ monitored_entity_id }}'})
            });
            var power_consumption_model = new ChartData({}, {
                url: '{% url "entity_data" serial monitored_entity_id "power_consumption" %}',
                chart_start: chart_start,
                chart_end: chart_end,
                polling_interval: {{ monitored_entity.polling_interval }}
            });
            var charts = [
                new ChartView({
                    model: new PartialChartData({}, {parent: power_consumption_model, column_indices: [0, 1]}),
                    annotations: annotations,
                    key: '{{ monitored_entity.get_class_name }}_1',
                    chart_options: {
                        {% if pdu_ids %}
                            title: '<div class="chart-switcher">TOTAL POWER CONSUMPTION<div>POWER CONSUMPTION PER PDU</div></div>',
                        {% else %}
                            title: 'TOTAL POWER CONSUMPTION',
                        {% endif %}
                        labels: ['timestamp', 'Power'],
                        axes: {
                            y: {
                                valueFormatter: formatters.watts,
                                axisLabelFormatter: formatters.watts
                            },
                            x: {
                                drawGrid: false
                            }
                        }
                    }
                }),
                {% if pdu_ids %}
                    new ChartView({
                        model: new ChartData({}, {
                            url: '{% url "aggregate_entities_data" serial pdu_ids "pdu_power_consumption" %}',
                            chart_start: chart_start,
                            chart_end: chart_end,
                            polling_interval: {{ pdus.0.polling_interval }}
                        }),
                        annotations: annotations,
                        key: 'POWER_CONSUMPTION_PER_PDU',
                        show_total: true,
                        total_formatter: formatters.watts,
                        chart_options: {
                            title: '<div class="chart-switcher">POWER CONSUMPTION PER PDU<div>TOTAL POWER CONSUMPTION</div></div>',
                            labels: {{ pdu_lables|safe }},
                            errorBars: false,
                            axes: {
                                y: {
                                    valueFormatter: formatters.watts,
                                    axisLabelFormatter: formatters.watts
                                },
                                x: {
                                    drawGrid: false
                                }
                            }
                        }
                    })
                {% endif %}
            ];
            MainApp.start({charts: charts});
            {% if pdu_ids %}
                set_chart_switcher([charts[0]], [charts[1]]);
            {% endif %}
        });
    </script>
{% endblock %}