In this repository we have a pre-existing app we called Plot App in the plot folder. This app handles multiple basic plot_types and their configuration that can be read about more in the README. To begin, let's start with some of the simpler plot types.
Where to start
The plot_types we should start with are bar, pie, scatterplot, and histogram. In the plot folder, we have a sample configuration file with examples for each of the above plot types. This configuration file should be copied and renamed plot-config.js then deployed alongside the plot code in your user directory on the server (similar to what was done for matrix).
Once deployed, each plot can be accessed similar to matrix by changing the config= query parameter to point to a different configuration from plot-config.js:
All of the existing code for the plot app is written in angularJS and uses the plotly library for rendering plot content. This can be found in plot/plot.app.js. You'll notice there is branching logic in there for fetching data. This is done the same way for most basic plot_types and slightly differently for violin-plot since that relies on fetching data from multiple different APIs that we will handle later.
First steps
Begin with creating a similar page file in src/pages to what was done for matrix (src/pages/plot.tsx). Then follow what was done with components as well src/components/plot/.
Basic functionality of plots can be read about in the user-docs.
In this repository we have a pre-existing app we called
Plot Appin theplotfolder. This app handles multiple basicplot_types and their configuration that can be read about more in the README. To begin, let's start with some of the simpler plot types.Where to start
The
plot_types we should start with arebar,pie,scatterplot, andhistogram. In the plot folder, we have a sample configuration file with examples for each of the above plot types. This configuration file should be copied and renamedplot-config.jsthen deployed alongside the plot code in your user directory on the server (similar to what was done for matrix).Once deployed, each plot can be accessed similar to matrix by changing the
config=query parameter to point to a different configuration fromplot-config.js:Examples:
All of the existing code for the plot app is written in
angularJSand uses theplotlylibrary for rendering plot content. This can be found inplot/plot.app.js. You'll notice there is branching logic in there for fetching data. This is done the same way for most basicplot_types and slightly differently forviolin-plotsince that relies on fetching data from multiple different APIs that we will handle later.First steps
Begin with creating a similar page file in
src/pagesto what was done for matrix (src/pages/plot.tsx). Then follow what was done with components as wellsrc/components/plot/.Basic functionality of plots can be read about in the user-docs.