reagent 2016-05-16 | Slack Archive

fabrao23:05:00

Hello all, I´m trying to use Reagent with highcharts but I don´t know how to update data information with ragent atom. What I´m missing? Change valor -> update gauge

(def valor (reagent/atom 10))

(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]
  (js/Highcharts.Chart. (reagent/dom-node this) (clj->js (gauge-consumo-config @valor))))

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

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

(defn reload []
  (reagent/render [#'gauge-consumo]
                  (.getElementById js/document "app")))

gadfly36123:05:45

@fabrao: I am getting an error when running your code (`highcharts.js:8 Uncaught Error: Highcharts error #17`), what scripts are in your index.html file to bring in highcharts?

fabrao23:05:44

@gadfly361:

index.html 
<html>
<head>
    <meta charset="utf-8" />
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0" name="viewport" />
    <title>Central de Serviços</title>
    <link rel="stylesheet" type="text/css" href="css/app.css">
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/highcharts-more.js"></script>
    <script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
</head>
<body>
        <div id="app"></div>
        <script src="js/compiled/app.js"></script>
        <script>view_fortigate.core.main();</script>
</body>
</html>

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

(def valor (reagent/atom 10))

(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]
  (js/Highcharts.Chart. (reagent/dom-node this) (clj->js (gauge-consumo-config @valor))))

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

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

(defn reload []
  (reagent/render [#'gauge-consumo]
                  (.getElementById js/document "app")))

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

2016-05-16

Channels