Source: plot/buttons/PlotlyPlotModeButton.js

import Plotly from 'plotly.js-dist';

export { PlotlyPlotModeButton }

/**
 * Class representing a plot mode button that switches different plot modes.
 */
class PlotlyPlotModeButton {
    /**
     * Creates a plot mode button. 
     * @param {Array} data - Plotly data configuration.
     * @param {Boolean} [overwritePlotModeOnInit] - Indicates if the plot mode should already be overwritten with the first pre-configured plot mode on class initialization.
     */
    constructor(data, overwritePlotModeOnInit = true) {
        this.modeIndex = 0;
        this.type = "scattergl";
        this.plotModes = ["markers", "lines", "lines+markers"];

        let showTypeWarning = false;
        for (let i = 0; i < data.length; ++i) {
            if (overwritePlotModeOnInit) {
                data[i].mode = this.plotModes[this.modeIndex];
            }
            data[i].type = data[i].type || this.type;
            if (data[i]?.type != this.type)
                showTypeWarning = true;
        }

        if (showTypeWarning)
            console.warn(`For better performance when changing plot mode, it is recommended to set the plot type to "${this.type}"`);

        this.button = {
            name: 'Change Mode',
            icon: () => {
                const icon = document.createElement("i");
                icon.classList.add("vef", "vef-switch-state");
                return icon;
            },
            click: this._switchPlotMode.bind(this)
        };
    }

    /**
     * Restyle the plot data with respect to the next plot mode.
     * @param {HTMLElement} graphDiv - Plotly graphDiv configuration.
     */
    _switchPlotMode(graphDiv) {
        this.modeIndex = (this.modeIndex + 1) % this.plotModes.length;
        Plotly.restyle(graphDiv, { 'mode': this.plotModes[this.modeIndex] });
    }
}