|
| 1 | +(ns birdwatch.charts.ts-chart |
| 2 | + (:require [birdwatch.util :as util] |
| 3 | + [reagent.core :as r :refer [atom]])) |
| 4 | + |
| 5 | +(enable-console-print!) |
| 6 | + |
| 7 | +(def bars (atom [])) |
| 8 | +(def label (atom {})) |
| 9 | + |
| 10 | +(def ts-elem (util/by-id "timeseries1")) |
| 11 | +(def ts-w (aget ts-elem "offsetWidth")) |
| 12 | +(def ts-h 100) |
| 13 | + |
| 14 | +(defn bar [x y h w idx] |
| 15 | + [:rect {:x x :y (- y h) :fill "steelblue" :width w :height h |
| 16 | + :on-mouse-enter #(reset! label {:idx idx}) |
| 17 | + :on-mouse-leave #(reset! label {})}]) |
| 18 | + |
| 19 | +(defn barchart [indexed mx cnt w] |
| 20 | + (let [gap (/ (/ ts-w 20) cnt)] |
| 21 | + [:svg {:width ts-w :height ts-h} |
| 22 | + [:g |
| 23 | + (for [[idx [k v]] indexed] |
| 24 | + [bar (* idx w) ts-h (* (/ v mx) ts-h) (- w gap) idx])]])) |
| 25 | + |
| 26 | +(defn labels [bars mx cnt w] |
| 27 | + (when-not (empty? @label) |
| 28 | + (let [idx (:idx @label) |
| 29 | + [k v] (get bars idx) |
| 30 | + top (- ts-h (* (/ v mx) ts-h)) |
| 31 | + lr (if (< (/ idx cnt) 0.6) "left" "right")] |
| 32 | + [:div.detail {:style {:left (* idx w)}} |
| 33 | + [:div.x_label {:class lr} (.toString (.unix js/moment k))] |
| 34 | + [:div.item.active {:class lr :style {:top top}} "Tweets: " v] |
| 35 | + [:div.dot.active {:style {:top top :border-color "steelblue"}}]]))) |
| 36 | + |
| 37 | +(defn ts-chart [] |
| 38 | + (let [bars @bars |
| 39 | + indexed (vec (map-indexed vector bars)) |
| 40 | + mx (apply max (map (fn [[k v]] v) bars)) |
| 41 | + cnt (count bars) |
| 42 | + w (/ ts-w cnt)] |
| 43 | + [:div.rickshaw_graph |
| 44 | + [barchart indexed mx cnt w] |
| 45 | + [labels bars mx cnt w]])) |
| 46 | + |
| 47 | +(r/render-component [ts-chart] ts-elem) |
0 commit comments