ntopng/http_src/vue/timeseries-chart.vue

<!-- (C) 2022 - ntop.org     -->
<template>
    <div class="d-flex">
        <div class="ms-auto"></div>
        <label class="form-check-label form-control-sm" v-for="(item, i) in timeseries_list">
            <input type="checkbox" class="form-check-input align-middle mt-0"
                @click="change_visibility(!item.checked, i)" :checked="item.checked" style="border-color: #0d6efd;"
                :style="{ backgroundColor: item.color }">
            {{ item.name }}
        </label>
    </div>
    <div v-if="disable_pointer_events == true" class="mb-3" style="width:100%;pointer-events:none;" ref="chart"></div>
    <div v-else class="mb-3" style="width:100%;" ref="chart"></div>
</template>

<script>
import { Dygraph } from '../utilities/graph/dygraph';
export default {
    components: {
    },
    props: {
        id: String,
        chart_type: String,
        register_on_status_change: Boolean,
        base_url_request: String,
        get_params_url_request: Function,
        get_custom_chart_options: Function,
        disable_pointer_events: Boolean,
    },
    emits: ["apply", "hidden", "showed", "chart_reloaded", "zoom"],
    /** This method is the first method of the component called, it's called before html template creation. */
    created() { },
    beforeUnmount() { },
    data() {
        return {
            chart: null,
            chart_options: null,
            from_zoom: false,
            timeseries_visibility: null,
            timeseries_list: [],
            //i18n: (t) => i18n(t),
        };
    },
    /** This method is the first method called after html template creation. */
    async mounted() {
        await this.init();
        ntopng_sync.ready(this.$props["id"]);
    },
    methods: {
        init: async function () {
            let status = ntopng_status_manager.get_status();
            let url_request = this.get_url_request(status);
            if (this.register_on_status_change) {
                this.register_status(status);
            }
            await this.draw_chart(url_request);
        },
        get_image: function (image) {
            return Dygraph.Export.asPNG(this.chart, image, this.$refs["chart"]);
        },
        change_visibility: function (visible, id) {
            if (this.timeseries_list[id] != null) {
                this.timeseries_list[id]["checked"] = visible
                this.chart.setVisibility(id, visible);
            }
        },
        register_status: function (status) {
            let url_request = this.get_url_request(status);
            ntopng_status_manager.on_status_change(this.id, (new_status) => {
                if (this.from_zoom == true) {
                    this.from_zoom = false;
                    //return;
                }
                let new_url_request = this.get_url_request(new_status);
                if (new_url_request == url_request) {
                    url_request = new_url_request;
                    return;
                }
                url_request = new_url_request;
                this.update_chart(new_url_request);
            }, false);
        },
        get_url_request: function (status) {
            let url_params;
            if (this.$props.get_params_url_request != null) {
                if (status == null) {
                    status = ntopng_status_manager.get_status();
                }
                url_params = this.$props.get_params_url_request(status);
            } else {
                url_params = ntopng_url_manager.get_url_params();
            }

            return `${this.$props.base_url_request || ''}?${url_params}`;
        },
        get_chart_options: async function (url_request) {
            let chart_options = null;
            const date_format = await ntopng_utility.get_date_format(false, this.$props.csrf, http_prefix);

            /* Retrieve the chart options */
            if (this.$props.get_custom_chart_options == null) {
                chart_options = await ntopng_utility.http_request(url_request);
            } else {
                chart_options = await this.$props.get_custom_chart_options(url_request);
            }
            /* Set the date depending on the server date */
            if (!chart_options?.axes?.x?.axisLabelFormatter) {
                chart_options.axes.x.axisLabelFormatter = function (date) {
                    return ntopng_utility.from_utc_to_server_date_format(date, date_format);
                };
            }
            if (!chart_options?.axes.x?.valueFormatter) {
                chart_options.axes.x.valueFormatter = function (date) {
                    return ntopng_utility.from_utc_to_server_date_format(date, date_format);
                };
            }
            /* Emit the chart_reloaded event */
            this.$emit('chart_reloaded', chart_options);
            return chart_options;
        },
        draw_chart: async function (url_request) {
            let chart_options = await this.get_chart_options(url_request);
            const data = chart_options.data || [];
            chart_options.data = null;
            chart_options.zoomCallback = this.on_zoomed;
            this.timeseries_list = [];
            let visibility = [];
            let id = 0;
            if (!chart_options.disableTsList) {
                for (const key in chart_options.series) {
                    this.timeseries_list.push({ name: key, checked: true, id: id, color: chart_options.colors[id] + "!important" });
                    id = id + 1;
                    visibility.push(true);
                }
            }
            this.chart = new Dygraph(this.$refs["chart"], data, chart_options);
        },
        update_chart: async function (url_request) {
            if (this.chart) {
                let chart_options = await this.get_chart_options(url_request);
                this.chart.updateChart(chart_options);
            }
        },
        update_chart_options: function (chart_options) {
            if (this.chart) {
                this.chart.updateChart(chart_options);
            }
        },
        update_chart_series: function (series) {
            if (series == null) { return; }
            if (this.chart) {
                this.chart.updateOptions({ 'file': series });
            }
        },
        on_zoomed: function (minDate, maxDate) {
            this.from_zoom = true;
            const begin = moment(minDate);
            const end = moment(maxDate);
            // the timestamps are in milliseconds, convert them into seconds
            let new_epoch_status = { epoch_begin: Number.parseInt(begin.unix()), epoch_end: Number.parseInt(end.unix()) };
            ntopng_events_manager.emit_event(ntopng_events.EPOCH_CHANGE, new_epoch_status, this.id);
            this.$emit('zoom', new_epoch_status);
        },
    },
};
</script>

<style>
.dygraph-legend {
    color: #111111;
    background-color: #FFFFFF !important;
    border-color: #a7a6a6;
    border-style: solid;
    border-width: thin;
    z-index: 80 !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .15);
    border-radius: 0.375rem;
    position: fixed;
    width: auto;
    word-wrap: break-word;
    padding: 8px !important;
}

.dygraph-legend>span {
    color: #111111;
    padding-left: 5px;
    padding-right: 2px;
    margin-left: -5px;
    background-color: #FFFFFF !important;
}

.dygraph-legend>span:first-child {
    margin-top: 2px;
}

.dygraph-axis-label {
    z-index: 10;
    line-height: normal;
    overflow: hidden;
    color: var(--ntop-text-color);
}
</style>