       (did-mount [_ owner]
         (let [Chart        (.-chart dimple)
               svg          (.newSvg dimple "#chart" 400 350)
-              dimple-chart (Chart. svg (clj->js (:external-humidity mock-data)))]
+              measurements (:data cursor)
+              dimple-chart (Chart. svg (clj->js measurements))]
+          (.log js/console measurements)
           (.setBounds dimple-chart 60 30 300 300)
           (.addCategoryAxis dimple-chart "x" "month")
           (.addMeasureAxis dimple-chart "y" "reading")


;;;;;;;;;;; Data ;;;;;;;;;;;

(def mock-data {:external-humidity     [{"month" "Jan" "reading" 0.8}
                                        {"month" "Feb" "reading" 0.9}
                                        {"month" "Mar" "reading" 0.8}
                                        {"month" "Apr" "reading" 0.75}
                                        {"month" "May" "reading" 0.65}
                                        {"month" "Jun" "reading" 0.50}
                                        {"month" "Jul" "reading" 0.55}
                                        {"month" "Aug" "reading" 0.6}
                                        {"month" "Sep" "reading" 0.66}
                                        {"month" "Oct" "reading" 0.68}
                                        {"month" "Nov" "reading" 0.71}
                                        {"month" "Dec" "reading" 0.9}]
                :external-temperature  [{"month" "january" "reading" 6}
                                        {"month" "february" "reading" 10}
                                        {"month" "march" "reading" 12}
                                        {"month" "april" "reading" 15}
                                        {"month" "may" "reading" 18}
                                        {"month" "june" "reading" 20}
                                        {"month" "july" "reading" 25}
                                        {"month" "august" "reading" 31}
                                        {"month" "september" "reading" 20}
                                        {"month" "october" "reading" 17}
                                        {"month" "november" "reading" 12}
                                        {"month" "december" "reading" 9}]})

(def app-state
  {:selected []
   :devices []})

(defn remove-chart []
  (.remove (first (nodelist-to-seq (.getElementsByTagName js/document "svg")))))

(defn select-device [data device-name]
  (.log js/console device-name)
 ; (remove-chart)
 ;  (om/transact! app [:selected] (constantly device-name))
  )

;;;;;;;;;;; List of devices for axis plots ;;;;;;;;;;

(defn device-list-item
  [devices]
  (fn [data owner]
    (om/component
    (let [device-name  (for [device devices] (get data device))]
      (apply dom/input #js {:type "checkbox" :onClick #(select-device data (str device-name))}
            (str device-name))))))

;;;;;;;;;; Chart UI ;;;;;;;;;;

(defn chart-item
  [device-details]
  (fn [data opts]
    (reify
      om/IRender
      (render [this]
        (dom/div #js {:id "chart"}))

;;;;;;;;;;; Bootstrap ;;;;;;;;;;;;

(defn create-form-and-chart [model-path device-item chart-item]
  (fn [cursor owner]
    (reify
      om/IRender
      (render [_]
        (dom/div #js {:className "devices"}
                 (dom/h3 nil (str "Metering data - " (get-in cursor [:property])))
                 (dom/h4 nil "Select devices to be plotted on the chart:")
                 (dom/form #js {:className "devices-form"}
                           (om/build-all device-item
                                         (get-in cursor model-path)
                                         {:key :hecuba/name})
                           (om/build chart-item cursor)))))))


(om/root chart-state (create-form-and-chart [:devices]
                                                   (device-list-item [:hecuba/name :name])
                                                   (chart-item [:hecuba/name :name :data]))
                 (.getElementById js/document "app"))





