views.cljs

(ns stats.views
  (:require [reagent.core :as reagent]
            [stats.rpc :as rpc]
            [stats.utils :refer-macros [map<]]
            [reagent.ratom :refer-macros [reaction]]
            [re-frame.core :as rf :refer [subscribe dispatch]]
            [re-com.core :refer [button h-box v-box box gap horizontal-bar-tabs label title p label]]))

(def chart-1 (atom nil))

(defn add-point-order [^Atom chart ^Date date ^Number y]
  (when-let [chart @chart-1]
    (let [series-order  (:series-order  chart)
          point [(.getTime date) y]]
      (.addPoint series-order (clj->js point))
      (map< series-order point))))

(comment
  (add-point-order chart-1 (js/Date.) (rand-int 100))
  
  )

;; https://github.com/reagent-project/reagent-cookbook/tree/master/recipes/highcharts
;; http://www.highcharts.com/demo/dynamic-update
(def chart-config
  {:chart {:type "spline"
           :animation "Highcharts.svg"
           :events {:load (fn [] (this-as this
                                  (let [series-order  (nth (.-series this) 0)
                                        series-cancel (nth (.-series this) 1)]
                                    (swap! chart-1 merge (map< series-order series-cancel)))) nil)}}

   :title {:text "Количество поездок"}
   
   :xAxis {:type "datetime"}
   :yAxis {:title {:text "Количество"
                   :align "high"}}

   :plotOptions {:bar {:dataLabels {:enabled true}}}
   :credits {:enabled false}
   :series [{:name "Заказы":data []}
            {:name "Отмены":data []}]})

(defn home-did-mount [this]
  (js/Highcharts.Chart. (reagent/dom-node this) (clj->js chart-config)))

(defn chart-count-view []
  (reagent/create-class {:reagent-render (fn []
                                           [:div {:style {:margin "20px auto"}}])
                         :component-did-mount home-did-mount}))