 (defn build-graphable [{:keys [outcome]}]
   (#{"success" "failed" "canceled"} outcome))
 
+(defn add-legend [svg {chart-width :width}]
+  (let [left-legend-array [{:classname "success"
+                            :text "Passed"}
+                           {:classname "failed"
+                            :text "Failed"}
+                           {:classname "canceled"
+                            :text "Canceled"}]
+        {:keys [square-size item-width item-height spacing]} {:square-size 10
+                                                              :item-width 80
+                                                              :item-height 14   ; assume font is 14px
+                                                              :spacing 4}
+        right-legend-array [{:classname "queue"
+                             :text "Queue time"}]
+        left-legend-item (-> svg
+                             (.selectAll ".legend")
+                             (.data (clj->js left-legend-array))
+                             (.enter)
+                             (.append "g")
+                             (.attr #js {"class" "legend left"
+                                         "transform"
+                                         (fn [item i]
+                                           (let [tr-x (* i item-width)
+                                                 tr-y (- (- item-height
+                                                            (/ (- item-height square-size)
+                                                               2)))]
+                                             (gstring/format "translate(%s,%s)" tr-x  tr-y)))}))
+        right-legend-item (-> svg
+                              (.selectAll ".legend-right")
+                              (.data (clj->js right-legend-array))
+                              (.enter)
+                              (.append "g")
+                              (.attr #js {"class" "legend right"
+                                          "transform"
+                                          (fn [item i]
+                                            (let [tr-x (- chart-width (* (inc i) item-width))
+                                                  tr-y (- (- item-height
+                                                             (/ (- item-height square-size)
+                                                                2)))]
+                                              (gstring/format "translate(%s,%s)" tr-x  tr-y)))}))]
+    ;; left legend
+    (-> left-legend-item
+        (.append "rect")
+        (.attr #js {"width" square-size
+                    "height" square-size
+                    "class" #(.-classname %)
+                    "transform"
+                    (fn [item i]
+                      (gstring/format "translate(%s,%s)" 0  (- (+ square-size))))}))
+    (-> left-legend-item
+        (.append "text")
+        (.attr #js {"x" (+ square-size spacing)})
+        (.text #(.-text %)))
+
+    ;; right legend
+    (-> right-legend-item
+        (.append "rect")
+        (.attr #js {"width" square-size
+                    "height" square-size
+                    "class" #(.-classname %)
+                    "transform"
+                    (fn [item i]
+                      (gstring/format "translate(%s,%s)" 0  (- (+ square-size))))}))
+    (-> right-legend-item
+        (.append "text")
+        (.attr #js {"x" (+ square-size
+                           spacing)})
+        (.text #(.-text %)))))
+
 (defn visualize-insights-bar! [elem builds]
   (let [y-max (apply max (mapcat #((juxt :queued_time_minutes :build_time_minutes) %)
                                  builds))
-        svg-width 900
-        svg-height 180
-        margins {:top 30, :right 10, :bottom 10, :left 70}
-        width (- svg-width (:left margins) (:right margins))
-        height (- svg-height (:top margins) (:bottom margins))
+        svg-info {:width 900
+                  :height 180
+                  :top 30, :right 10, :bottom 10, :left 70}
+        plot-info {:width (- (:width svg-info) (:left svg-info) (:right svg-info))
+                   :height (- (:height svg-info) (:top svg-info) (:bottom svg-info))}
         y-scale (-> (js/d3.scale.linear)
                     (.domain #js[(- y-max) y-max])
-                    (.range #js[height 0])
+                    (.range #js[(:height plot-info) 0])
                     (.nice))
         y-pos-scale (-> (js/d3.scale.linear)
                         (.domain #js[0 y-max])

                      "y1" y-pos
                      "y2" y-pos
                      "x1" 0
                      "x2" width})))

    ;; positive bar
    (-> enter

                        (.nice))
        y-neg-scale (-> (js/d3.scale.linear)
                        (.domain #js[0 y-max])
                        (.range #js[(y-scale 0) (:height plot-info)])
                        (.nice))
        y-middle (y-scale 0)
        y-tick-values (map js/Math.round
