mantao/Plots.jl
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Allow plotly plots to auto-resize to fill the window.

Browse Source 
- Remove w and h from plotly_layout
 - Add window.onresize function to produced javascript, calling
    Plotly.Plots.resize (copied from this commit):
    ab0e5c4f92
This commit is contained in:
Nathan Daly 2018-10-03 11:08:47 -04:00
parent 63bc3a2b88
commit 4aca65f6ae
1 changed files with 29 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/backends/plotly.jl
View File

@ -309,7 +309,6 @@ function plotly_layout(plt::Plot)
plotattributes_out = KW() plotattributes_out = KW()
w, h = plt[:size] w, h = plt[:size]
plotattributes_out[:width], plotattributes_out[:height] = w, h
plotattributes_out[:paper_bgcolor] = rgba_string(plt[:background_color_outside]) plotattributes_out[:paper_bgcolor] = rgba_string(plt[:background_color_outside])
plotattributes_out[:margin] = KW(:l=>0, :b=>20, :r=>0, :t=>20) plotattributes_out[:margin] = KW(:l=>0, :b=>20, :r=>0, :t=>20)
@ -892,27 +891,41 @@ end
function html_body(plt::Plot{PlotlyBackend}, style = nothing) function html_body(plt::Plot{PlotlyBackend}, style = nothing)
if style == nothing if style == nothing
w, h = plt[:size] style = "width:100%;height:100%;"
style = "width:$(w)px;height:$(h)px;"
end end
uuid = UUIDs.uuid4() uuid = UUIDs.uuid4()
html = """
<div id=\"$(uuid)\" style=\"$(style)\"></div>
<script>
PLOT = document.getElementById('$(uuid)');
Plotly.plot(PLOT, $(plotly_series_json(plt)), $(plotly_layout_json(plt)));
</script>
""" """
html <div id=\"$(uuid)\" style=\"$(style)\"></div>
end <script>
$(js_body(plt, uuid))
function js_body(plt::Plot{PlotlyBackend}, uuid) </script>
js = """
PLOT = document.getElementById('$(uuid)');
Plotly.plot(PLOT, $(plotly_series_json(plt)), $(plotly_layout_json(plt)));
""" """
end end
function js_body(plt::Plot{PlotlyBackend}, divid)
"""
gd = (function() {
var WIDTH_IN_PERCENT_OF_PARENT = 100;
var HEIGHT_IN_PERCENT_OF_PARENT = 100;
var gd = Plotly.d3.select('body')
.append('div').attr("id", "$(divid)")
.style({
width: WIDTH_IN_PERCENT_OF_PARENT + '%',
'margin-left': (100 - WIDTH_IN_PERCENT_OF_PARENT) / 2 + '%',
height: HEIGHT_IN_PERCENT_OF_PARENT + 'vh',
'margin-top': (100 - HEIGHT_IN_PERCENT_OF_PARENT) / 2 + 'vh'
})
.node();
var data = $(plotly_series_json(plt));
var layout = $(plotly_layout_json(plt));
Plotly.newPlot(gd, data, layout);
window.onresize = function() {
Plotly.Plots.resize(gd);
};
return gd;
})();
"""
end
# ---------------------------------------------------------------- # ----------------------------------------------------------------