@gadfly361: Man, you are the best !!! It worked. So, how about

gauge-consumo-did-mount

gauge-consumo-render

(ns view-fortigate.core
  (:require
     [reagent.core :as reagent]))

(defonce app-state
  (reagent/atom
   {:valor-1 10
    :valor-2 50}))

(defn gauge-consumo-config [vl]
  {:chart {:type "solidgauge"}
   :title {:text "SALA 105"}
   :pane {
          ;:center ["58%" "85%"]
          :size "100%"
          :startAngle -90
          :endAngle 90
          :background {
                       :backgroundColor "#FFF"
                       :innerRadius "60%"
                       :outerRadius "100%"
                       :shape "arc1"
                       }
          }
   :tooltip { :enabled false }
   :credits { :enabled false }
   :yAxis {:stops [[0.1 "#55BF3B"]
                   [0.5 "#DDDF0D"]
                   [0.9 "#DF5353"]]
           :lineWidth 0
           :minorTickInterval nil
           :tickPixelInterval 400
           :tickWidth 0
           :title {:text "" :y -70}
           :labels {:y 16}
           :min 0
           :max 100
           }
   :series [{:name "Consumo"
             :data [vl]
             }]
   :plotOptions {
                 :solidgauge {
                              :dataLabels {:y 15
                                           :borderWidth 0
                                           :useHTML false
                                           :format "{y} %"}
                              }
                 }
   })

(defn gauge-consumo-did-mount [this ratom k]
  (js/Highcharts.Chart. (reagent/dom-node this)
                        (clj->js (gauge-consumo-config (k @ratom)))))

(defn gauge-consumo-render [ratom]
  (let [_ @ratom]
    [:div {:style {:width "200px" :height "200px" :margin "0 auto"}}]))

(defn gauge-consumo [ratom k]
  (reagent/create-class
   {:component-did-mount  #(gauge-consumo-did-mount % ratom k)
    :component-did-update #(gauge-consumo-did-mount % ratom k)
    :reagent-render       #(gauge-consumo-render ratom)}))

(defn home [ratom]
  [:div
   [gauge-consumo ratom :valor-1]
   [gauge-consumo ratom :valor-2]])

(defn reload []
  (reagent/render [home app-state]
                  (.getElementById js/document "app")))

(defn ^:export main []
  (reload))

@gadfly361 is a pillar in the reagent scene. From maintaining reagent templates to always helping out in #C0620C0C8, to maintaining the reagent cookbook. He's the man!!!

@fabrao: try something like this 👆

ha thanks guys:wink:

@escherize: @gadfly361 IS MASTER !!! It worked => gadgent . Thanks a lot, now I understand how it works.

How do you specify the key for an element using (reagent.core/as-element …)?

Ah, never mind. It’s just

(r/as-element
      ^{:key (str section-id "-" row-id)}
      [touchable-highlight {:onPress #()}

Why does one use as-element?

Well, in my case I’m using react native and the listview component takes a “renderRow” argument that specifies this:

renderRow function 

(rowData, sectionID, rowID, highlightRow) => renderable

Thanks for that @seantempesta.

np

@ckarlsen: did you find a solution for your the problem you had with reagent and the react draft-js library?