Example form-3 functions for redefining TreeMap in Recharts

form-3-functions.cljs

(defn treemap-label
  []
  (r/create-class
   {:reagent-render (fn
                      []
                      (let [props (r/props this)]
                        [:g
                         [:text
                          {:x (/ (+ (:x props) (:width props)) 2)
                           :y (+ (/ (+ (:y props) (:height props)) 2) 7)
                           :textAnchor "middle"
                           :fill "#FFFFFF"
                           :fontSize 14}
                          (:name props)
                          [:br]
                          (:size props)]]))}))

(defn labelled-treemap
  [order]
  (r/create-class
   {:reagent-render (fn
                      [order]
                      [:> js/Recharts.Treemap
                       {:width 550
                        :height 350
                        :data (clj->js (prepare-performance-treemap-data order))
                        :dataKey "size"
                        :nameKey "name"
                        :ratio (/ 4 3)
                        :stroke "#fff"
                        :content [treemap-label]}
                       ])}))