getting started with plotly

[superjai]

So, let's get started thinking about how we might implement plotly for interactive figures.

Here, you'll find a zipped html and json file. If you extract those two in the same folder and then open the html file via localhost, you should see the plot of the json file.

This is the simplest possible plot we could see - time series data in plotly. I haven't changed many of the defaults, so this plot could look way better.

The question to start thinking about is: how could this be implemented within the wordpress site?

1. Get the "plot" div working within a modal, with some nice options set for an appealing look.
2. Think about what would be needed to be stored on the plugin side to make this work. The first thing you'd need would be a pointer to the relevant json, but you'd also need a list of function arguments. What would be the best way to store these arguments on the plugin side?

[skanda-vasishta]

Plotly class idea (subject to change):

class Plot {
    constructor(params) {
       //init all params
        this.actions = {
            plot1: this.doAction1,
            plot2: this.doAction2,
            plot3: this.doAction3,
        };
    }

    doAction1() {
        ....
        console.log("plot1 plotted");
    }

    doAction2() {
        ....
        console.log("plot2 plotted");
    }

    doAction3() {
        ....
        console.log("plot3 plotted");
    }

    execute(action) {
        // Use the mapping to call the function dynamically
        if (this.actions[action]) {
            this.actions[action].call(this); // `call(this)` ensures correct `this` context
        } else {
            console.log("Invalid action");
        }
    }
}

// Usage example
const myClassInstance = new Plot(params); //where params are function arguments for plot
myClassInstance.execute('plot1'); // plot1 plotted
myClassInstance.execute('plot2'); // plot2 plotted

where the parameter is pulled directly from WP backend

[skanda-vasishta]

Plotly workflow:

Backend:

1. User inputs json file into Wordpress
2. Json is parsed in the backend, the labels of each series are parsed
   1. ex: given {Year: 2001, Whales: 398582, Fish: 180719}, the labels would be Year, Whales, Fish
3. User selects plot type
   1. This should be fixed as well, finite amount of options defined that exactly match the class callback dictionary
4. User has option to select dropdown options for x-axis and y-axis, as well as a slider for how many
   1. Ex: the user is selects Year as the x-axis, Whales and Fish as the y-axis
5. Other look and feel stuff (name of plot, labels, color) all inputted

Frontend:

1. Given json input, fetch data for figure (wp meta). Within the figure json, ideally a pointer to actual data json
2. Create new plot instance initialized with fetch link (the pointer) for the data itself, other wp meta details (the user inputs)
3. Given params, call execute member function with type of plot as parameter