Google Diagramm CLJS Clojure

Question

Ich habe versucht, diese example in Google Diagramm anzupassen. Um re-frame Rahmen, reagent. Ich möchte basierend auf Abonnements ein Echtzeitdiagramm erstellen. Ich habe mit einem einfachen Zähler = + - 1 getestet.

Ich habe Fehler: Assert failed: Render must be a function, not nil (ifn? render-fun).

(defn draw-demo-chart 
    [d] 
    (let [[columns vectors options chart] (r/children d) 
     data (new js/google.visualization.DataTable)] 
     (doall ;gotta keep the doall on maps. lazy sequence... 
     (map (fn [[type name]] 
      (.addColumn data type name)) columns)) 
     (.addRows data vectors) 
     (.draw chart data options) 
     (.load js/google "visualization" "1" (clj->js {:packages ["corechart" "orgchart" "calendar" "map" "geochart"]}))  
     (.setOnLoadCallback js/google draw-demo-chart) 
    )) 


(defn draw-demo-chart-container 
    [] 
    (let [count (re-frame/subscribe [:count]) 
      columns (reaction [["date" "X"] ["number" "Y"]]) 
      vectors (reaction (clj->js [[(new js/Date "07/11/14") 145] [(new js/Date "07/12/14") 15] 
             [(new js/Date "07/13/14") 23] [(new js/Date "07/14/14") 234]])) 
      options (reaction (clj->js {:title (str @count)})) 
      chart (reaction (new js/google.visualization.LineChart (.getElementById js/document "linechart"))) ] 
    (fn [] 
     [draw-demo-graph @columns @vectors @options @chart]))) 

(def draw-demo-graph 
     (r/create-class {:reagent-render draw-demo-chart 
         :component-did-mount draw-demo-chart 
         :component-did-update draw-demo-chart})) 

Answer 1

Es gibt mehrere Herausforderungen mit dem Google Charts API:

1. Es asynchron geladen und kann nur, wenn Sie bereit verwendet werden.

Ich empfehle die Verwendung eines Flags, um aufzuzeichnen, ob die API bereit ist oder nicht, damit es auch dann rendern kann, wenn die API nach dem Mounten der Komponente geladen wird.

(defonce ready? 
    (reagent/atom false)) 

(defonce initialize 
    (do 
    (js/google.charts.load (clj->js {:packages ["corechart"]})) 
    (js/google.charts.setOnLoadCallback 
     (fn google-visualization-loaded [] 
     (reset! ready? true))))) 

2. Sie müssen draw auf einem HTML-Elemente nennen:

Das HTML-Element wird nur bestehen, wenn das Bauteil montiert ist. Sie können eine ref verwenden, um das HTML-Element bequem zu erhalten (andernfalls müssen Sie entweder einen Verweis auf in mount speichern oder danach suchen).

(defn draw-chart [chart-type data options] 
    [:div 
    (if @ready? 
    [:div 
     {:ref 
     (fn [this] 
     (when this 
      (.draw (new (aget js/google.visualization chart-type) this) 
        (data-table data) 
        (clj->js options))))}] 
    [:div "Loading..."])]) 

Sie werden jederzeit einen der Eingänge Änderung neu gezeichnet werden soll (die die oben ref Beispiel der Fall ist).

3. die Datenquelle einrichten

ich eine bequeme Methode vorschlagen, die Datenquelle für das Erhalten:

(defn data-table [data] 
    (cond 
    (map? data) (js/google.visualization.DataTable. (clj->js data)) 
    (string? data) (js/google.visualization.Query. data) 
    (seqable? data) (js/google.visualization.arrayToDataTable (clj->js data)))) 

Jetzt können Sie Ihr Diagramm mit reaktiven Werten verwenden!

[draw-chart 
    "LineChart" 
    @some-data 
    {:title (str "Clicks as of day " @day)}] 

Voll Code Auflistung ist bei https://github.com/timothypratley/google-chart-example