Static viz waterfall, including backend bits (#18915)

Static viz waterfall needs BE bits. Here are the BE bits. Color and total summation coming...

resources/frontend_shared/static_viz_interface.js

@@ -47,6 +47,15 @@ function timeseries_bar(data, labels, settings) {
   });
 }
 
+function timeseries_waterfall(data, labels, settings) {
+  return StaticViz.RenderChart("timeseries/waterfall", {
+    data: toJSArray(data),
+    labels: toJSMap(labels),
+    accessors: date_accessors,
+    settings: JSON.parse(settings),
+  });
+}
+
 function categorical_bar(data, labels, settings) {
   return StaticViz.RenderChart("categorical/bar", {
     data: toJSArray(data),
@@ -72,3 +81,12 @@ function categorical_donut(rows, colors) {
     accessors: dimension_accessors,
   });
 }
+
+function categorical_waterfall(data, labels, settings) {
+  return StaticViz.RenderChart("categorical/waterfall", {
+    data: toJSArray(data),
+    labels: toJSMap(labels),
+    accessors: positional_accessors,
+    settings: JSON.parse(settings),
+  });
+}

src/metabase/pulse/render.clj

@@ -83,6 +83,9 @@
         (#{:pin_map :state :country} display-type)
         (chart-type nil "display-type is %s" display-type)
 
+        (#{:waterfall} display-type)
+        (chart-type display-type "display-type is %s" display-type)
+
         (= @col-sample-count @row-sample-count 1)
         (chart-type :scalar "result has one row and one column")
 

src/metabase/pulse/render/body.clj

@@ -493,6 +493,35 @@
                                    :font-size :16px})}
          (second labels)]]]]}))
 
+(s/defmethod render :waterfall :- common/RenderedPulseCard
+  [_ render-type timezone-id card {:keys [rows cols viz-settings] :as data}]
+  (let [[x-axis-rowfn
+         y-axis-rowfn] (common/graphing-column-row-fns card data)
+        [x-col y-col]  ((juxt x-axis-rowfn y-axis-rowfn) cols)
+        rows           (map (juxt x-axis-rowfn y-axis-rowfn)
+                            (common/non-nil-rows x-axis-rowfn y-axis-rowfn rows))
+        last-rows      (reverse (take-last 2 rows))
+        values         (for [row last-rows]
+                         (some-> row y-axis-rowfn common/format-number))
+        labels         (x-and-y-axis-label-info x-col y-col viz-settings)
+        render-fn      (if (isa? (-> cols x-axis-rowfn :effective_type) :type/Temporal)
+                         js-svg/timelineseries-waterfall
+                         js-svg/categorical-waterfall)
+        image-bundle   (image-bundle/make-image-bundle
+                        render-type
+                        (render-fn rows
+                                   labels
+                                   (->js-viz x-col y-col viz-settings)))]
+    {:attachments
+     (when image-bundle
+       (image-bundle/image-bundle->attachment image-bundle))
+
+     :content
+     [:div
+      [:img {:style (style/style {:display :block :width :100%})
+             :src   (:image-src image-bundle)}]]}))
+
+
 (s/defmethod render :empty :- common/RenderedPulseCard
   [_ render-type _ _ _]
   (let [image-bundle (image-bundle/no-results-image-bundle render-type)]

src/metabase/pulse/render/js_svg.clj

@@ -109,6 +109,15 @@
                                                   (json/generate-string settings)))]
     (svg-string->bytes svg-string)))
 
+(defn timelineseries-waterfall
+  "Clojure entrypoint to render a timeseries waterfall chart. Rows should be tuples of [datetime numeric-value]. Labels is
+  a map of {:left \"left-label\" :botton \"bottom-label\". Returns a byte array of a png file."
+  [rows labels settings]
+  (let [svg-string (.asString (js/execute-fn-name @context "timeseries_waterfall" rows
+                                                  (map (fn [[k v]] [(name k) v]) labels)
+                                                  (json/generate-string settings)))]
+    (svg-string->bytes svg-string)))
+
 (defn timelineseries-bar
   "Clojure entrypoint to render a timeseries bar char. Rows should be tuples of [datetime numeric-value]. Labels is a
   map of {:left \"left-label\" :botton \"bottom-label\"}. Returns a byte array of a png file."
@@ -127,6 +136,15 @@
                                                   (json/generate-string settings)))]
     (svg-string->bytes svg-string)))
 
+(defn categorical-waterfall
+  "Clojure entrypoint to render a categorical waterfall chart. Rows should be tuples of [stringable numeric-value]. Labels is
+  a map of {:left \"left-label\" :botton \"bottom-label\". Returns a byte array of a png file."
+  [rows labels settings]
+  (let [svg-string (.asString (js/execute-fn-name @context "categorical_waterfall" rows
+                                                  (map (fn [[k v]] [(name k) v]) labels)
+                                                  (json/generate-string settings)))]
+    (svg-string->bytes svg-string)))
+
 (defn categorical-bar
   "Clojure entrypoint to render a categorical bar chart. Rows should be tuples of [stringable numeric-value]. Labels is
   a map of {:left \"left-label\" :botton \"bottom-label\". Returns a byte array of a png file."

test/metabase/pulse/render/body_test.clj

@@ -412,6 +412,28 @@
          (render-bar-graph {:cols default-columns
                             :rows [[10.0 1] [5.0 10] [nil 20] [1.25 nil]]})))))
 
+
+(defn- render-waterfall [results]
+  (body/render :waterfall :inline pacific-tz render.tu/test-card results))
+
+(deftest render-waterfall-test
+  (testing "Render a waterfall graph with non-nil values for the x and y axis"
+    (is (has-inline-image?
+         (render-waterfall {:cols default-columns
+                            :rows [[10.0 1] [5.0 10] [2.50 20] [1.25 30]]}))))
+  (testing "Check to make sure we allow nil values for the y-axis"
+    (is (has-inline-image?
+         (render-waterfall {:cols default-columns
+                            :rows [[10.0 1] [5.0 10] [2.50 20] [1.25 nil]]}))))
+  (testing "Check to make sure we allow nil values for the y-axis"
+    (is (has-inline-image?
+         (render-waterfall {:cols default-columns
+                            :rows [[10.0 1] [5.0 10] [2.50 20] [nil 30]]}))))
+  (testing "Check to make sure we allow nil values for both x and y on different rows"
+    (is (has-inline-image?
+         (render-waterfall {:cols default-columns
+                            :rows [[10.0 1] [5.0 10] [nil 20] [1.25 nil]]})))))
+
 ;; Test rendering a sparkline
 ;;
 ;; Sparklines are a binary image either in-line or as an attachment, so there's not much introspection that we can do

test/metabase/pulse/render/js_svg_test.clj

@@ -140,6 +140,21 @@
           (is (= true (s/valid? spec text-nodes))
               text-nodes))))))
 
+(deftest timelineseries-waterfall-test
+  (let [rows     [[#t "2020" 2]
+                  [#t "2021" 3]]
+        labels   {:left "count" :bottom "year"}
+        settings (json/generate-string {:y {:prefix   "prefix"
+                                            :decimals 4}})]
+    (testing "It returns bytes"
+      (let [svg-bytes (js-svg/timelineseries-waterfall rows labels settings)]
+        (is (bytes? svg-bytes))))
+    (let [svg-string (.asString (js/execute-fn-name @context "timeseries_waterfall" rows labels settings))
+          svg-hiccup (-> svg-string parse-svg document-tag-hiccup)]
+      (testing "it returns a valid svg string (no html in it)"
+        (validate-svg-string :timelineseries-waterfall svg-string)))))
+
+
 (deftest categorical-donut-test
   (let [rows [["apples" 2]
               ["bananas" 3]]
@@ -149,3 +164,14 @@
         (is (bytes? svg-bytes))))
     (let [svg-string (.asString ^Value (js/execute-fn-name @context "categorical_donut" rows (seq colors)))]
       (validate-svg-string :categorical/donut svg-string))))
+
+(deftest categorical-waterfall-test
+  (let [rows     [["apples" 2]
+                  ["bananas" 3]]
+        labels   {:left "bob" :right "dobbs"}
+        settings (json/generate-string {})]
+    (testing "It returns bytes"
+      (let [svg-bytes (js-svg/categorical-waterfall rows labels {})]
+        (is (bytes? svg-bytes))))
+    (let [svg-string (.asString ^Value (js/execute-fn-name @context "categorical_waterfall" rows labels settings))]
+      (validate-svg-string :categorical/waterfall svg-string))))