dmytro-shulha / obsidian-plotly

Obsidian plugin to embed Plotly charts into markdown notes.

Hi there 👋

obsidian-plotly's Issues

Bug: plugin commands do not appear on palette (sometimes)

OS: Windows 10 Pro version 22H2
Obsidian:

• installer version 1.3.7
• current version 1.4.2
  Plotly plugin: version 0.0.6

I have noticed strange plugin behavior during development.
If I create new empty vault, install plotly plugin, enable it and open command palette, commands do not appear on the list. Even after reloading vault, commands still do not appear.

This bug was reproduced on:

• fresh new vault (with zero other plugins)
• my personal vault (with lots of additional plugins enabled)
• vault dedicated for plugin development (though eventually I have triggered comands to appear somehow)

However, this bug was not reproduced on Obsidian Help sandbox vault - commands appeared on the palette list successfully on first attempt for some reason.

As of now I have no idea what is happenning here, hope I will eventually figure it out.

Implement feature: settings - default layout and config values

There should be an option to define default layout and config values in settings.
Option to create several layouts and choose particular preset for each plot is nice from code reuse perspective.

Separated from #4

Insert chart gui (like obsidian-charts)

Great work getting plotly graph into obsidian! Can't thank you enough =)

A couple of improvement points that would be great:

• Insert chart gui, like obsidian-graphs have to create basic line and scatter charts as a starting point (others can be added later, plotly has a huge amount of setups, but at least basic ones would be wonderful), personally I think yaml works best with obsidian
• Width and height scaling to auto fill, or partially fill screen.
• Standard color scheme to match active theme

Implement feature: autocomplete suggestions (show hints) when editing `plotly` or/and `plotlyjs` block

It would be nice to have autocompletion for plotly and plotlyjs blocks.

Load .plotly or .json file for display

Hi,

At the moment I believe there is only the possibility of displaying Plotly with embedded code inside the dataviewjs. Plotly allows to save a serialized version of their plot (JSON format, with .plotly) extension and was wondering if we could make it possible to load such file for display. This would simply a lot the notes I believe

something like should work I believe

function readTextFile(file, callback) {
    var rawFile = new XMLHttpRequest();
    rawFile.overrideMimeType("application/json");
    rawFile.open("GET", file, true);
    rawFile.onreadystatechange = function() {
        if (rawFile.readyState === 4 && rawFile.status == "200") {
            callback(rawFile.responseText);
        }
    }
    rawFile.send(null);
}

readTextFile("PlotlyFileSomehwere.plotly", function(text){
    var data = JSON.parse(text);
    dv.paragraph(data);
    window.renderPlotly(this.container, data)
});

Latex in Charts

I tried to add LaTex to the graph and failed to do so.

As in the Documentation stated, there is the MathJax Engine to be loaded for correctly loading LaTex with MathJax.js?config=TeX-MML-AM_CHTML. In the Documentation, they load it within the HTML Script. What are the options to make this work in the Plugin?

How to draw gantt chart?

I need to add this codeblocks https://plotly.com/python/gantt/

Dataviewjs does not show title

```dataviewjs
 let path = app.vault.adapter.basePath;//absolute path to your vault
 var d3 = require(path+"\\utils\\d3.v7.min.js");

var trace1 = { 
	x: [1, 2, 3, 4, 5], 
	y: [1, 5, 3, 5, 1], 
	mode: 'lines+markers', 
	name: 'spline', 
	line: {shape: 'spline'}, 
	type: 'scatter' };

var data = [trace1]; 

var layout = {  
	title: {text: 'my title'},
	margin: { l: 20, r: 20, b: 40, t: 20, pad: 4 },
	autosize: false, 
	height: 200,
	showlegend: true,
	yaxis: { title: "y Axis"},
	xaxis: { title: "x Axis"}};
	
window.renderPlotly(this.container, data, layout, {staticPlot: true});
``` ```

is not able to show the title of the graph, neither the axis titles.

Implement feature: settings - custom d3 path; maybe download from settings menu

Since some plotly charts rely on D3 library, which is big and I do not want it to be part of plugin bundle, managing it's usage should be simplified.

As of now, the only way to use D3 is to download .min.js file from official site, place it somewhere in a vault and provide correct path in your dataviewjs block with chart code (using hardcoded output of 'create new chart' command).

Better way would be an option to set path to D3 in settings menu.
Downloading D3 lib also can be done from settings menu, but that might expose user to security risks and needs to be investigated.

This change will eliminate need to explicitly set path to D3 lib in each chart.

Separated from #4

How to create time-series charts?

I would like to use dataviewjs and plot various values on a timeline, be it in a line chart or bar chart or such. But I couldn't figure out how to do that from examples.

If, say, I have a CharacterCount key with some value in several notes, I can use pg.CharacterCount.values to plot the numbers. I don't know how to use inherent metadata, e.g. file.cday, to assign the values to their dates. I found a workaround in providing another key in those notes, e.g. Cdate, with the date value (which works only if surrounded with quotes, as far as i can tell). Not ideal but doable.
I also dont know how to show dates with no values with corresponding 0 values (I mean for days when no note contains CharacterCount, meaning nothing was written).

I would be glad for any help and i am already grateful for the plugin, really cool, thanks.

Syntax error with more complex graphs

Hi! I have tried to get the plotly plugin to work but it only allows me to make basic plots. If I use another example from plotly.com it shows me a syntax error. So, how can we achieve more complex plots with this tool?

Thanks in advance

Implement feature: width and height scaling to auto fill, or partially fill screen

User should be able to set width and height scaling.

For each plot individually, I believe it is possible to do via layout or config properties of each plot.

For all plots, the ability to set global default values will be implemented in #4

Also, in case abovementioned options won't be sufficient, then possibility to provide additional scaling options should be investigated.

docs would be greatly appreciated

Pasting code directly from Plotly website is not working.

• I get things like this. I've been able to figure it out for some basic charts, but for some more complex ones (for example stacked bars, box plot etc) some instructions would be greatly appreciated.

Implement feature: create plot using `plotlyjs` block, so there will be no dependency to dataviewjs plugin.

As of now, obsidian-plotly pluign uses dataviewjs blocks to render charts from JS code.
This is an unnecessary dependency and should be eliminated.
Custom plotlyjs block processor should be implemented to render charts from JS code.

Math support

How can I enable math support?
Currently, the graph does just not render when text contains latex notation. The Obsidian console shows:

The chart-studio.plotly.com -Export contains the following section:

<script type="text/javascript">
    window.MathJax = {
        root: 'mathjax',
        config: 'TeX-AMS-MML_SVG.js',
        extensions: ['Safe.js']
    };
</script>
<script type="text/javascript" src="mathjax/MathJax.js"></script>

I am not certain how Obsidian handles math, maybe there is another/a better way.

Sample Graph (click to open)

let path = app.vault.adapter.basePath;//absolute path to your vault
var d3 = require(path+"\\Attachments\\d3.v7.min.js");

var data = [
        {
            "mode": "markers",
            "type": "scatter",
            "x": [
                "0"
            ],
            "y": [
                "0"
            ]
        }
    ];
var layout = {
        "title": {
            "text": "$Division: \\frac{z1}{z2}$"
        },
        "xaxis": {
            "type": "linear",
            "range": [
                -0.03357993312190732,
                0.601359413680969
            ],
            "title": {
                "text": "$\\text{Re} z$"
            },
        },
        "yaxis": {
            "type": "linear",
            "range": [
                -0.03635300993571011,
                0.002220923436586791
            ],
            "title": {
                "text": "$i \\text{Im} z$"
            },
        },
		"annotations": [
            {
                "x": 0.5862068965517241,
                "y": -0.034482758620689655,
                "ax": 0,
                "ay": 0,
                "font": {
                    "size": 12,
                    "family": "Arial"
                },
                "text": "",
                "xref": "x",
                "yref": "y",
                "align": "center",
                "axref": "x",
                "ayref": "y",
                "xanchor": "left",
                "yanchor": "bottom",
                "arrowhead": 2,
                "arrowsize": 1.5,
                "showarrow": true,
                "arrowcolor": "rgb(51, 129, 228)",
                "arrowwidth": 2
            },
            {
                "x": 0.5862068965517241,
                "y": -0.034482758620689655,
                "text": "$\\frac{34}{58}+\\frac{-2}{58}i$",
                "yanchor": "top",
                "showarrow": false
            }
        ]
    };
var config = {staticPlot: true};

window.renderPlotly(this.container, data, layout, config)

Implement feature: command palette - on create plot - add modal with basic chart examples list

Basically, when 'create plot' command is executed, list of examples should be shown.
User should be able to choose one and click 'Enter", then such example will be pasted at current cursor position.

Since plotly documentation has plenty of examples, some additional hierarchical organizing structure is preferable (such as in "community plugin - browse" view).

However, it is better to start with simple list and basic examples.

Plotly: New Plotly Chart doesn't work

ctrl + P -> Plotly: New Plotly Chart generates and it doesn't render anything

data:
	- x: [0,1,2]
	  y: [0,1,0]

Instead it prints Couldn't render plot:YAMLParseError: Tabs are not allowed as indentation at line 2, column 1: data: - x: [0,1,2] ^

Installed from win obsidian Plotly version 0.0.6

Instead it should be

data:
- x: [0,1,2]
  y: [0,1,0]

Set default values in settings

As a user, I want to be able to define default 'layout' and 'config' values in settings.

Also, dataviewjs-based template now have hardcoded part with path to d3 dependency.
It also should be defined in settings.

Toggling path to lib insertion would be a good addition.

Implement feature: generate chart theme that matches current UI css theme

After #8 dark theme is implemented, there should be way to get chart colors from current Obsidian css theme.

There is more than one way to map UI colors with chart colors, so maybe having option to create custom css->chart color mappings should also be implemented.

Implement feature: settings - dark theme for charts

Is it possible to change the theme of the plot? Preferably to "plotly_dark"