Fork me on GitHub
#reagent
<
2016-04-25
>
fabrao13:04:18

Hello all, How to change the https://github.com/reagent-project/reagent-cookbook/tree/master/recipes/highcharts to use with dynamic data in :series? The atom can be : '(defn informations (reagent/atom {:sr [{:name "Year 1800" :data [107 31 635 203 2]} {:name "Year 1900" :data [133 156 947 408 6]} {:name "Year 2008" :data [973 914 4054 732 34]}] })) (defn home-render [] [:div {:style {:min-width "310px" :max-width "800px" :height "400px" :margin "0 auto"}}]) (defn home-did-mount [this] ; How to do here to introduce the atom? (js/Highcharts.Chart. (reagent/dom-node this) (clj->js chart-config)))) (defn home [] (reagent/create-class {:reagent-render home-render :component-did-mount home-did-mount})) ; How to do here to introduce the atom? '

mattsfrey21:04:45

Hey I’m wondering if there has been a best practice established for handling pseudo selectors with inline styling? I’ve been playing around with garden and from research it seems you can create a <style> tag in a parent div or component to get hover,before,after rules set for a child div/component but this seems pretty unideal.

gadfly36121:04:16

@fabrao: You can pass a parameter to component-did-mount like this. However, this will still only work once after initial mount. If you want it to truly be dynamic, you'll need to use component-did-update too.

(def informations (reagent/atom ...))

(defn home-render []
   ...)

(defn home-did-mount [this ratom]
   ...)

(defn home []
  (reagent/create-class
      {:reagent-render home-render
       :component-did-mount #(home-did-mount % informations)}))