Source: data/dasf/handlers/timeseriesPlot.js

import Plotly from 'plotly.js-dist';

import { Window } from '../../../ui/Window.js';
import { displayMessage } from '../../../utils/utils.js';
import { PlotlyDemoFilterPlot } from '../../../plot/templates/PlotlyDemoFilterPlot.js';

let timeseriesElemCount = 0;

/**
 * Represents a timeseries plot.
 */
export class TimeseriesPlot {

    xdata = [];
    ydata = {};
    title = "";
    layoutOptions = {
        hovermode: "x",
        xaxis: { title: { text: "Date/Time" }, autorange: true },
    };

    /**
     * Initializes the plot for the element defined by id and given options.
     * 
     * @param {object} instanceData - The instance data to initialize the plot with.
     */
    constructor(instanceData) {
        if (instanceData) {
            this.deserialize_(instanceData);
        }
    }

    /**
     * Helper function to create a new object from the data.
     * @private
     * @param {object} instanceData - The instance data to deserialize.
     */
    deserialize_(instanceData) {
        const keys = Object.keys(this);

        for (const key of keys) {
            if (instanceData.hasOwnProperty(key)) {
                this[key] = instanceData[key];
            }
        }
    }

    /**
     * Shows the timeseries plot.
     */
    show() {
        let data = [];
        const poi = ["Data [m]"];
        Object.keys(this.ydata).forEach((columnName) => {
            data.push(
                { x: this.xdata, y: this.ydata[columnName], name: columnName }
            );
        })

        const plotDiv = document.createElement("div");
        const elemID = "timeseriesPlot-" + timeseriesElemCount++;
        plotDiv.setAttribute("id", elemID);
        plotDiv.setAttribute("style", "width:900px;height:600px;");

        const plotWindow = new Window(null, {
            width: "1100px",
            height: "unset",
            open: true,
            center: true,
            title: this.title ? this.title : "Plot",
            draggable: true
        });

        plotWindow.setContent(plotDiv.outerHTML);

        const vefPlotly = new PlotlyDemoFilterPlot(elemID, data, this.layoutOptions);
        Plotly.newPlot(vefPlotly.graphDiv, vefPlotly.data, vefPlotly.layout, vefPlotly.config);
        vefPlotly.extensions.apply({ 'redirectNotification': { 'callback': displayMessage } });
        vefPlotly.filterData();
    }

}

/**
 * Handles timeseries data and displays the plot.
 * 
 * @param {object} data - The timeseries data.
 * @param {object} plotWindow - The plot window to display the plot.
 */
export function handleTimeseriesData(data, plotWindow) {
    const handler = new TimeseriesPlot(data);
    // close the current plot window, because we need to generate a new one
    plotWindow.close();
    handler.show();
}