hoplon-perf.cljs

(ns shadow-hoplon.perf
  (:require [hoplon.core :as h]
            [javelin.core :as j :refer [defc defc= cell cell=]]
            [hoplon.jquery]))

(defc total-count 10000)
(defc change-count 100)

(defn get-color [n]
  (cond
    (= n 0)   "red"
    (= n 100) "lime"
    (< 0 n 1) "rgb(255,141,0)"
    (<= 1 n 99) (str "rgb(255," (+ 140 (int n)) ",0)")))

(defn make-val []
  (let [n (js/Math.round (* (rand) 100))]
    {:val n :color (get-color n)}))

(defn init-data [n] (vec (for [x (range n)] (make-val))))

(defn change-data [data n]
  (let [ixs  (repeatedly n #(rand-int (count data)))]
    (reduce (fn [acc i] (assoc acc i (make-val))) data ixs)))

(defc data [])

(defn init! [] (reset! data (init-data @total-count)))

(init!)

(defn attach-page []
  (h/html
   (h/head
    (h/title "Hoplon Performance Test")
    (h/link :href "css/perf-bootstrap.css" :rel "stylesheet")
    (h/link :href "css/perf.css" :rel "stylesheet"))
   (h/body
    (h/div :class "container"
      (h/h1 "hoplon performance test")
      (h/br)

      #_(h/div :class "row"
        (h/div :class "col-sm-9"
          (h/ul :class "nav nav-pills"
            (h/li :role "presentation" :class "active"
              (h/a "hoplon")))))

      (h/div :class "row"
        (h/div :class "col-sm-9"
          (h/div :id "dashboard"
            (h/for-tpl [{:keys [val color]} data]
              (h/div :class "item" :css (cell= {:background-color color})
                (h/label val)))))

        (h/div :class "col-sm-3"
          (h/div :class "form-group"
            (h/label :for "total-input" "Total:")
            (h/input :type "text" :class "form-control init" :id "total-input"
              :value total-count
              :change init! ;;#(when (not= @total-count @%) init!)
              :keyup #(some->> @% not-empty js/parseInt (reset! total-count))))
          (h/div :class "form-group"
            (h/label :for "change-input" "Change:")
            (h/input :type "text" :class "form-control init" :id "change-input"
              :value change-count
              ;;:change init!
              :keyup #(some->> @% not-empty js/parseInt (reset! change-count))))
          (h/div :class "form-group"
            (h/button :type "button" :class "btn btn-primary"
              :id "update-btn"
              :click #(time (swap! data change-data @change-count))
              "Update")
            
            )))
      (h/br)
      ))))

perf.css

#dashboard {
	padding-bottom: 50px;
	display: inline-block;
}

#dashboard .item {
	display: inline-block;
}

#dashboard .item label {
	padding-left: 5px;
	padding-right: 5px;
}

#progress-out {
	margin-top: 50px;
	font-size: 4rem;
}