                     "y1" (int y-middle)
                     "y2" (int y-middle)
                     "x1" 0
-                    "x2" width}))
+                    "x2" (:width plot-info)}))
 
     ;; horizontal grid-lines
     (doseq [tick (remove zero? y-tick-values)

        x-scale (-> (js/d3.scale.ordinal)
                    (.domain (clj->js
                              (map :build_num builds)))
                    (.rangeBands #js[0 width] 0.5))
        legend-dimensions {:square-size 10
                           :item-width 80
                           :item-height 14   ; assume font is 14px
                           :spacing 4
                           }
        left-legend [{:class_name "success"
                      :text "Passed"}
                     {:class_name "failed"
                      :text "Failed"}
                     {:class_name "canceled"
                      :text "Canceled"}]
        right-legend [{:class "queue"
                      :text "Queue time"}]
        svg (-> js/d3
                (.select elem)
                (.html "")
                (.append "svg")
                (.attr "width" svg-width)
                (.attr "height" svg-height)
                (.append "g")
                (.attr "transform" (gstring/format "translate(%s,%s)"
                                                   (:left margins)
                                                   (:top margins))))
        enter (-> svg
                  (.selectAll "rect")
                  (.data (clj->js builds))

(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-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 plot-info) 0])
                    (.nice))
        y-pos-scale (-> (js/d3.scale.linear)
                        (.domain #js[0 y-max])
