feature: resizing plot

[timotheecour]

/cc @Vindaar

• looking at generated html file looks like size is hardcoded to 800x600; i think a reasonable and useful feature is ability to drag the bottom right corner of the view to make the plot bigger (ie more pixels on screen)
• and making it easy to do so by adding a border ; right now it's invisible

[Vindaar]

The plot size isn't hardcoded. You can either change it by creating the plot manually, e.g.

  # assuming x, y contains some data
  let d = Trace[float64](mode: PlotMode.LinesMarkers, `type`: PlotType.Scatter,
                         xs: x, ys: y)
  let layout = Layout(width: 1200, height: 400,
                      autosize: false)
  Plot[float64](layout: layout, traces: @[d]).show()

and change the layout to whatever you like. Or if you're using the procs from plotly_sugar, you may modify the code as such:

plotScatter(x, y)
  .width(1200)
  .height(400)
  .show()

If you specifically refer to modifying the plot when it's being shown in the browser, hmm. I don't think making the div in which the plot is shown resizable will actually change the plot size.

[timotheecour]

If you specifically refer to modifying the plot when it's being shown in the browser, hmm.

ya that's exactly what i meant

I don't think making the div in which the plot is shown resizable will actually change the plot size

so there's a few options here, some simple, some less, but still useful and better that status quo, eg:

• easiest: just zooming to fit the dragged div size (so everything will look proportionally bigger, including fonts); it's SVG IIUC so there shd be no pixelation artifacts
• middle: expland canvas but keep font size and scatter plot size (same behavior as say, matlab or matplotlib when u resize a window:

then after resizing window:

since SVG is used, this should all be possible with javascript (and no need for server communication), correct?

• (harder, probably overkill for this particular feature but most flexible for further extensions) using a callback to a proc redraw(state: State) which communicates with the server to redraw eg when dragging happens (instead of file:///private/tmp/x.html it would be localhost:someport) maybe out of scope for nim-plotly, although that functionality would be generally useful and can be made transparently for users, for all uses of nim-plotly

[brentp]

maybe I misunderstand, but we can use e.g.:

window.onresize = function() {
  Plotly.Plots.resize('plot-div');
 };

as here

[timotheecour]

yes, perfect! this shd be the new default IMO

[timotheecour]

@brentp somehow ur suggestion https://github.com/brentp/nim-plotly/issues/38#issuecomment-457788772 didn't work ; but let's followup here https://github.com/brentp/nim-plotly/pull/39