current_component_api.cljs

;; Reusable component. Expects some side effect to go and put data in the right place,
;; so it's accessible by the sub ::chart/chart-js.
;; 
;; Side effect to retrieve data will be triggered by code outside of this component.
;;
;; Cons:
;; - Containing code needs to know where in client db to put data for component to find it.
;;
;; Pros:
;; - No knowledge or requirement on how to get data
;; - Easily testable
(defn chart-outer
  [{:keys [:widget/entity] :as props}]
  (f/with-ref {:component/uuid [widget/self]
               :js/uuid        [dom/chart-node]
               :in             props}
              ;; Chart-js-config sub is derived from the viz config that will be initialised in the project code.
              (r/with-let [chart-js-config (f/subscribe [::chart/chart-js self entity chart-node])]
                          [chart-inner (merge props @chart-js-config)])))


;; Project code using component. Uses component above, adds data init.
(when-let [h @hallmarks]
      (f/dispatch [::impl/init-chart config-entity h])
      [chart/chart-outer (assoc props :widget/self chart-self
                                      :widget/entity config-entity)])

;; Event for getting chart data. Simply takes data we already have and puts it into a pre-baked viz config.
;; 
(f/reg-event-db ::init-chart
  (fn [db [_ entity hallmarks]]
    (let [refs       (map #(find % :system/uuid) hallmarks)
          config     (make-radar-config entity refs)]
      (db/mergen db config))))

future_component_api.cljs

(defn chart-outer
  [{:keys [:widget/entity] :as props}]
  (f/with-ref {:component/uuid [widget/self]
               :js/uuid        [dom/chart-node]
               :in             props}        
              (r/with-let [chart-js-config (f/subscribe [::chart/chart-js self entity chart-node])]
                          [chart-inner (merge props @chart-js-config)])))