mkdocs-charts-plugin icon indicating copy to clipboard operation
mkdocs-charts-plugin copied to clipboard

Add support for plotly.js

Open timvink opened this issue 2 years ago • 2 comments

Could be cool to add and probably relatively low effort.

timvink avatar Dec 08 '21 17:12 timvink

Reading in data files is slightly more involved though: https://plotly.com/javascript/ajax-call/ That also means support for data_path will be trickier. Actually the entire syntax seems more contrived because javascript doesn't have the concept of dataframes.

Instead, we could use plotly python.

import plotly.express as px
long_df = px.data.medals_long()

fig = px.bar(long_df, x="nation", y="count", color="medal", title="Long-Form Input")
fig.show()

we can drop the import, and the fig.show() and do that automatically in fence_plotly().

The data loading is trickier to solve, as the fence_plotly function wouldn't know about the project root.

timvink avatar Dec 09 '21 13:12 timvink

So back to plotly.js.

If we require data to be stored a .json files, we can ask user to point to it.

var plot_data = custom_load_data_function("...")

var trace1 = {
  x: plot_data['x'],
  y: plot_data['y'],
  type: 'scatter',
};

var data = [trace1];

For for each block we can run the javascript and

Plotly.newPlot('myDiv', data, {}, {showSendToCloud: true});

https://stackoverflow.com/questions/58576662/django-plotly-js-pass-pandas-dataframe-columns-to-template-chart

timvink avatar Dec 09 '21 13:12 timvink

Hello, I've actively used plotly and mkdocs for creating notebooks. Thanks for this great work!

I got innovated by this repo and implemented a Plotly charts version. The mechanism of mine is a bit different. I left the URL updates in mkdocs' on_page_content stage. Therefore, I did not bother to send a pull request and merge with your implementation.

Feel free to check my implementation here and give some suggestions!
https://github.com/haoda-li/mkdocs-plotly-plugin

haoda-li avatar Jan 11 '23 05:01 haoda-li

Nice work!

Make sure to add your plugin to the plugins wiki (https://github.com/mkdocs/mkdocs/wiki/MkDocs-Plugins) for more exposure.

Closing this issue, no point to add plotly support to this plugin

timvink avatar Jan 16 '23 10:01 timvink