Source: plot/templates/PlotlyVefPlot.js

import { merge, mergeWith } from "lodash";

import { PlotlyRoot } from "../core/PlotlyRoot.js";
import { LodashCustomizer } from "../utils.js";
export { PlotlyVefPlot }

/**
 * Represents a plot configuration using Plotly with additional features for measurements.
 * @extends PlotlyRoot
 */
class PlotlyVefPlot extends PlotlyRoot {

    /**
     * Constructs a new PlotlyVefPlot object.
     * @param {HTMLElement} graphDiv - The HTML element representing the graph container.
     * @param {Array} [data=[]] - The data to be plotted.
     * @param {Object} [layout={}] - The layout configuration for the plot.
     * @param {Object} [config={}] - The configuration options for the plot.
     */
    constructor(graphDiv, data = [], layout = {}, config = {}) {

        const transparentBGColor = 'rgba(0,0,0,0)';
        const dataVefDefault = [];
        const layoutVefDefault = {
            margin: {
                l: 60,
                r: 10,
                b: 60,
                t: 80,
                pad: 0
            },
            spikedistance: -1,
            xaxis: { showspikes: true, spikethickness: 2, autorange: true },
            yaxis: { showspikes: true, spikethickness: 2, autorange: true },
            modebar: {
                bgcolor: transparentBGColor,
                color: PlotlyVefPlot.getCssVariable('--modebar-button-color'),
                activecolor: PlotlyVefPlot.getCssVariable('--modebar-button-color-active')
            },
            plot_bgcolor: transparentBGColor,
            paper_bgcolor: transparentBGColor
        };

        const configVefDefault = {
            displayModeBar: true,
            displaylogo: false,
            responsive: true,
            modeBarButtonsToAdd: ['pan2d', 'zoom2d', 'zoomIn2d', 'zoomOut2d', 'toImage', 'resetScale2d', 'Change Mode']
        };

        // Merge provided data, layout, and config with defaults
        const dataPreMerged = merge(dataVefDefault, data);
        const layoutPreMerged = merge(layoutVefDefault, layout);
        const configPreMerged = mergeWith(configVefDefault, config, LodashCustomizer.concatArrays);

        super(graphDiv, dataPreMerged, layoutPreMerged, configPreMerged);

        this.graphDiv.classList.add("vef-plot");
    }

    /**
     * Returns a css variable from the theme.
     * 
     * @param {String} name - Name of the css variable.
     * @returns {String} Variable content.
     */
    static getCssVariable(name) {
        // trim() is added because whitespace is included in the string if the property uses "!important"
        return getComputedStyle(document.querySelector(':root')).getPropertyValue(name).trim();
    }
}