{% extends "base_general_charts.html" %}

{% block page_title %}{{ system|upper }} - Dedup Engine Ports (Experimental) - InfiniMetrics{% endblock %}

{% block header_title %}{{ system|upper }} – Dedup Engine Ports (Experimental){% endblock %}

{% block breadcrumbs %}
    <span>Dedup Engine Ports</span>
{% endblock %}
{% block top_menu_items %}
    {% if system.enabled %}
        <li><a class="menu-view" href="{% block system_gui_url %}{{ system.api_url }}{% endblock %}" target="_blank">Open System GUI</a></li>
    {% endif %}
    <li><a class="menu-api"  href="{% url "monitored-entity-list" system.serial %}?id=in:{{port_entity_ids}}" target="_blank">View in API Browser</a></li>
{% endblock %}
{% block content %}
    {{ block.super }}
    <style>
        .legend {
            width: 400px;
        }
        .legend-item {
            display: inline-block;
            width: 190px;
            margin-right: 20px;
        }
        .legend-item:nth-child(even) {
            margin-right: 0;
        }

        .legend-item:nth-last-child(2) {
            /* Remove the bottom-border of the bottom legend items (last one is being done in charts.css) */
            border: none;
        }
    </style>
    <script>
        $(document).ready(function() {
            var port_colors = [
                "#F0F000", "#1CE6FF", "#FF34FF", "#FF4A46", "#008941", "#006FA6", "#A30059", "#61615A",
                "#FFDBE5", "#7A4900", "#0000A6", "#63FFAC", "#B79762", "#004D43", "#8FB0FF", "#997D87",
                "#0AA6D8", "#809693", "#D16100", "#1B4400", "#4FC601", "#3B5DFF", "#4A3B53", "#FF2F80"
            ];
            var port_labels = ['timestamp', {% for p in port_labels %}"{{ p }}",{% endfor %}];
            DDEPortChartView = ChartView.extend({
                calcHeight: function() {
                    return 30 * (port_labels.length / 2) - 12;
                },
            });
            var dde_port_receive_model = new ChartData({}, {
                url: '{% url "aggregate_entities_data" serial port_entity_ids "dde_port_read" %}',
                chart_start: chart_start,
                chart_end: chart_end,
                polling_interval: 60,
            });
            var dde_port_transmit_model = new ChartData({}, {
                url: '{% url "aggregate_entities_data" serial port_entity_ids "dde_port_write" %}',
                chart_start: chart_start,
                chart_end: chart_end,
                polling_interval: 60,
            });
            var annotations = new AnnotationFormatter({
                collection: new ChartAnnotations([], {url: '{% url "annotations" serial %}'})
            });
            var charts = [
                new DDEPortChartView({
                    model: dde_port_receive_model,
                    annotations: annotations,
                    chart_type: 'line',
                    chart_options: {
                        title: 'PORT RECEIVE THROUGHPUT',
                        errorBars: false,
                        labels: port_labels,
                        colors: port_colors,
                        labelsKMG2: true,
                        axes: {
                            y: {
                                valueFormatter: formatters.throughput,
                                axisLabelFormatter: formatters.throughput
                            },
                            x: {
                                drawGrid: false
                            }
                        }
                    },
                    id: 'dde_ports_receive',
                }),
                new DDEPortChartView({
                    model: dde_port_transmit_model,
                    annotations: annotations,
                    chart_type: 'line',
                    chart_options: {
                        title: 'PORT TRANSMIT THROUGHPUT',
                        errorBars: false,
                        labels: port_labels,
                        colors: port_colors,
                        labelsKMG2: true,
                        axes: {
                            y: {
                                valueFormatter: formatters.throughput,
                                axisLabelFormatter: formatters.throughput
                            },
                            x: {
                                drawGrid: false
                            }
                        }
                    },
                    id: 'dde_ports_transmit',
                }),

            ];
            MainApp.start({charts: charts});

        });
    </script>
{% endblock %}