   (-> d3
       .-scale
       (.ordinal)
-      (.domain (vec (range (count data))))
+      (.domain (vec (keys data)))
       (.rangeRoundBands [0 width] 0.5)))
 
 



(deftemplate stat-screen "templates/stats.html" [app]
  {[:#selected-stat] (content "Tweets Count")
   [:#tweets-count] (listen
                     :on-mount
                     #(let [data [23 34 99 34 11]
                            margin {:top 50 :right 50 :bottom 50 :left 50}
                            width (- (.-clientWidth (. js/document (getElementById "tweets-count"))) (margin :left) (margin :right))
                            height (- 500  (margin :top) (margin :bottom))]
                        (draw-bars data height width margin)))})


(deftemplate tweet-list "templates/tweet-list.html" [data owner]

  (-> d3
      .-scale
      (.linear)
      (.domain [0 (apply max data)])
      (.range [height 0])))


(defn create-x-axis [x]
  (-> d3
      .-svg
      (.axis)
      (.scale x)
      (.orient "bottom")))

(defn create-y-axis [y]
  (-> d3
      .-svg
      (.axis)
      (.scale y)
      (.orient "left")))


(defn create-svg [target margin width height]
  (-> d3
      (.select target)
      (.append "svg")
      (.attr {:width  (+ width (margin :left) (margin :right))
              :height (+ height (margin :top) (margin :bottom))
              :id "tweet-count-chart"})
      (.append "g")
      (.attr {:transform (str "translate(" (margin :left) "," (margin :top) ")")})))


(defn create-bars [target data text height width margin]
  (let [svg (create-svg target margin width height)
        x1 (x data width)
        y1 (y (vals data) height)
        x-axis (create-x-axis x1)
        y-axis (create-y-axis y1)]
    (do
      (-> svg
          (.append "g")
          (.attr {:class "x axis"
                  :transform (str "translate(0," height ")")})
          (.call x-axis))
      (-> svg
          (.append "g")
          (.attr {:class "y axis"})
          (.call y-axis))
      (-> svg
          (.selectAll "g.bar")
          (.data data)
          (.enter)
          (.append "g")
          (.attr (clj->js {:class "bar"
                           :transform #(str "translate(" (x1 (key %1)) ",0)" )}))
          (.style {:fill "steelblue"})))))


(defn draw-bars [target data text height width margin]
  (let [bars (create-bars target data text height width margin)
        x1 (x data width)
        y1 (y (vals data) height)]
    (do
      (-> bars
          (.append "rect")
          (.attr {:height  #(- height  (y1 (val %1)))
                  :y #(y1 (val %1 ))
                  :width (.rangeBand x1)})))))

;; --- D3 end ---


(defsnippet tweet-item "templates/tweet-list.html" [:.tweet-item]
  [tweet owner]
  {[:.tweet-text] (content (:text tweet))
