add :view-callback option to reagent components to expose vega view api

fixes #167
metasoarous · Oct 4, 2021 · 747187e · 747187e
1 parent b633918
commit 747187e
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 6 deletions.
diff --git a/src/cljs/oz/core.cljs b/src/cljs/oz/core.cljs
@@ -27,17 +27,21 @@
 
 (defn ^:no-doc embed-vega
   ([elem doc] (embed-vega elem doc {}))
-  ([elem doc opts]
+  ([elem doc {:as opts :keys [view-callback]}]
    (when doc
      (let [doc (clj->js doc)
-           opts (->> opts
-                     (merge {:renderer :canvas
-                             :mode "vega-lite"})
-                     (apply-log-level))
+           opts (-> opts
+                    (dissoc :view-callback)
+                    (->> (merge {:renderer :canvas
+                                 :mode "vega-lite"}))
+                    (apply-log-level))
            opts (merge {:renderer :canvas}
                         ;; Have to think about how we want the defaults here to behave
                        opts)]
        (-> (vegaEmbed elem doc (clj->js opts))
+           (.then (fn [res]
+                    (when view-callback
+                      (view-callback (.-view res)))))
            (.catch (fn [err]
                      (js/console.log err))))))))
 

diff --git a/src/cljs/oz/core_devcards.cljs b/src/cljs/oz/core_devcards.cljs
@@ -43,6 +43,23 @@
                :size {:value 80}}}
    {:log-level :debug}])
 
+(defn view-callback-example []
+  [oz/vega-lite
+   {:data {:values sample-data}
+    :mark {:type :point
+           :tooltip true}
+    :width 500
+    :height 400
+    :encoding {:x {:field :power}
+               :y {:field :speed}
+               :color {:field :engine}
+               :size {:value 80}}}
+   {:view-callback
+    (fn [view]
+      (js/console.log "executing view-callback option to oz/vega-lite component")
+      (js/console.log "view object" view))}])
+
+
 (defn simple-data-table-example []
   [oz/data-table
    sample-data
@@ -61,9 +78,13 @@
   (devcards/reagent simple-vega-lite-example))
 
 (defcard log-level-card
-  "Simple vega-lite example"
+  "vega-lite spec with log-level set"
   (devcards/reagent log-level-example))
 
+(defcard view-callback-example-card
+  "vega-lite visualization executing a callback with the view object (check console log for logging result)"
+  (devcards/reagent view-callback-example))
+
 (defcard data-table-card
   "Simple data-table example"
   (devcards/reagent simple-data-table-example))