om + clojurescript + d3 reusable components

graph.cljs

(ns client.views.graph
  (:require-macros [cljs.core.async.macros :refer [go]] )
  (:require [strokes :refer [d3]]
            [dommy.utils :as utils]
            [dommy.core :as dommy]
            [cljs-time.core :as t :refer [now plus minutes hours]]
            [cljs-time.coerce :refer [to-long from-long]]
            [cljs.core.async :as async :refer [<! >! chan]]
            [om.dom :as dom :include-macros true]
            [om.core :as om :include-macros true]
            [sablono.core :as html :refer-macros [html]]))

(strokes/bootstrap)

(defn- random-date [start end]
  (+ start (* (.random js/Math) (- end start))))

(defn- generate-data
  "Generate random set of times (x) between start and end"
  [x start end]
  (for [low (range x )] (random-date start end)))


(defn Band
  "Create Gradient Band"
  [app owner opts]
  (reify
    om/IRender
    (render [_]
      (let [xScale (:x opts)
            offset (xScale app) ]
        (dom/rect #js {:color "red"
                       :height (:height opts)
                       :width 3
                       :x offset
                       }) ))))

(defn GradientSeries [app owner opts]
  (reify
    om/IRender
    (render [_]
      (let [width (:width opts)
            height (:height opts)
            height2 (:height2 opts)
            x (-> d3 .-time (.scale) (.range [0 width]))
            ;; x2 = d3.time.scale().range([0, width]),
            x2 (-> d3 .-time (.scale) (.range [0 width]))
            ;; y = d3.scale.linear().range([height, 0]),
            y (-> d3 .-scale (.linear) (.range [height 0]))
            ;; y2 = d3.scale.linear().range([height2, 0]);
            y2 (-> d3 .-scale (.linear) (.range [height2 0]))
            ;; xAxis = d3.svg.axis().scale(x).orient("bottom"),
            x-axis (-> d3 .-svg (.axis) (.scale x) (.orient "bottom"))
            ;; xAxis2 = d3.svg.axis().scale(x2).orient("bottom"),
            x-axis2 (-> d3 .-svg (.axis) (.scale x2) (.orient "bottom"))
            ;; yAxis = d3.svg.axis().scale(y).orient("left");
            y-axis (-> d3 .-svg (.axis) (.scale y) (.orient "left")) ]
        (-> x (.domain (-> d3
                           (.extent (:bands app)))))
        (-> y (.domain [0 1]))
        (apply dom/div nil
               (om/build-all Band (:bands app) {:opts (assoc opts :x x)})) ))))

(defn SVG [app owner opts]
  (reify
    om/IRender
    (render [_]
      (let [width (:width opts)
            height (:height opts)
            height2 (:height2 opts)
            margin (:margin opts)
            margin2 (:margin2 opts)
            ]
        (dom/svg #js {:width width :height height}
                 ;; (dom/rect #js {:width 100
                 ;;               :height 200
                 ;;               :color "red"})
                 (om/build GradientSeries app {:opts {:width width :height height
                                                      :margin margin :margin2 margin2
                                                      :height2 height2}})
                 )))))


(defn graph-view [app owner]
  (reify
    om/IRender
    (render [_]
      (let [margin {:top 10 :right 10 :bottom 100 :left 40}
            margin2 {:top 430 :right 10 :bottom 20 :left 40}
            height (- 500 (:top margin) (:bottom margin))
            width  (- (-> js/window .-innerWidth) (:left margin) (:right margin))
            height2 (- 500 (:top margin2) (:bottom margin2))
            data (generate-data 100 (to-long (now)) (to-long (plus (now) (minutes 10))))]
        (om/transact! app :bands (fn [_] data))
        (dom/div nil
               (om/build SVG app {:opts {:width width :height height
                                                :margin margin :margin2 margin2
                                                :height2 height2}}))))))