added plotting within Atom plotpane

queryverse · Feb 18, 2017 · 051b56d · 051b56d
1 parent f2bcba3
commit 051b56d
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 66 deletions.
diff --git a/TODO.txt b/TODO.txt
@@ -3,6 +3,6 @@
 - use CSS to separate actions buttons (see vega-lite site) - DONE
 - how to change the font of axes ? with CSS ?
 - finish implementation (transform, bin, ), check against schema spec
-- try to have it work on JUNO, hint : check Base.Multimedia.displays to know where we are displaying html
+- try to have it work on JUNO, hint : check Base.Multimedia.displays to know where we are displaying html - DONE
 - explain better the behaviour for each backend. Mention the need to push!(window.assets, ("VegaLite", "vega-lite-plot"))
 - ....
diff --git a/src/atom_integration.jl b/src/atom_integration.jl
@@ -9,78 +9,32 @@
 
 @require Atom begin  # define only if/when Atom is loaded
 
-  function writemime(io::IO, m::MIME"text/html", v::VegaLiteVis)
-    divid = "vl" * randstring(10) # generated id for this plot
-
-    fh = """
-    <div>
-      <div id="$divid"></div>
-
-      <style media="screen">
-        .vega-actions a {
-          margin-right: 10px;
-          font-family: sans-serif;
-          font-size: x-small;
-          font-style: italic;
-        }
-      </style>
-
-      <meta charset="utf-8">
-
-      <script type="text/javascript">
-        require.config({
-          paths: {
-            d3:        "https://d3js.org/d3.v3.min",
-            vega:      "https://vega.github.io/vega/vega",
-            vegalite:  "https://vega.github.io/vega-lite/vega-lite",
-            vegaembed: "https://vega.github.io/vega-editor/vendor/vega-embed"
-          }
-        });
-
-        require(["d3"], function(d3){
-          window.d3 = d3;
-
-          require(["vega"], function(vg) {
-            window.vg = vg
-
-            require(["vegalite"], function(vgl) {
-
-              require(["vegaembed"], function(vge) {
-
-                var embedSpec = {
-                  mode: "vega-lite",
-                  renderer: "$(SVG ? "svg" : "canvas")",
-                  actions: $SAVE_BUTTONS,
-                  spec: $(JSON.json(v.vis))
-                }
-
-            //    vg.embed("#$divid", embedSpec, function(error, result) {
-            //    });
+  import Atom, Media
 
-                var vgSpec = vgl.compile(embedSpec.spec).spec;
-                vg.parse.spec(vgSpec, function(chart) { chart({el:\"#$divid\"}).update(); });
+  Media.media(VegaLiteVis, Media.Plot)
 
-              });
-            });
-          });
-        });
+  function Media.render(e::Atom.Editor, plt::VegaLiteVis)
 
-      </script>
+    Media.render(e, nothing)
+  end
 
-    </div>
-    """
-    # FIXME : understand why vega-embed can't be loaded
-    #   SVG and SAVE_BUTTONS flags are ignored
-    # vg.embed("#$divid", embedSpec, function(error, result) {
+  # tests if wkhtmltoimage is in the path, if yes define rendering in plot pane
+  try
+    run(`wkhtmltoimage -V`)
 
-    write(io, fh)
-  end
-  import Atom, Media
+    function Media.render(pane::Atom.PlotPane, plt::VegaLiteVis)
+      # create a temporary file
+      tmppath = string(tempname(), ".vegalite.html")
+      open(tmppath, "w") do io
+        writehtml(io, plt)
+      end
 
-  Media.media(VegaLiteVis, Media.Plot)
+      sz = (400,400)
+      png_fn = string(tempname(), ".png")
+      run(`wkhtmltoimage -f png -q --width $(sz[1]) --height $(sz[2]) $tmppath $png_fn`)
 
-  function Media.render(e::Atom.Editor, plt::VegaLiteVis)
-    Media.render(e, nothing)
+      Media.render(pane, Atom.div(Atom.img(src=png_fn)))
+    end
   end
 
 end