Svg/percentages (#17415)

* Backend SVG rendering proof of concept [ci skip]

* Update cssbox to 5.0.0

* Render bar, line, and pie charts in js to svg

sparkline is now done in js, bar is now recognized and done in js, new
:categorical/donut as well

* Remove api route for render

* pass along render-type, not hardcoded to :inline

* Move bar chart above sparkline and remove line check

In order to introduce the bar chart type need it above the sparkline
check since it is otherwise the same except for display property of
the card. But lots of tests assume that this will get hit with a nil
display type set in testing so remove checking for `:line` allows all
the testing cases to hit the right type

* Fix tests now that bar graphs aren't html but images

* Include attachments for bar charts

* Move over to in-tree bundle

* Force everything [ci noskip]

trying to ensure that the built jar includes the newer
"resources/frontend_client/app/dist/lib-static-viz.bundle.js"

* Run `yarn build-static-viz` in backend-deps in CI

this js file is now a hard dependency of the backend so it fits in
this tsk. All such things that depend on the backend sources will need
it. Makes me think perhaps we want a checked in version but i'm not
sure yet.

* Look on classpath not filesystem for js bundle [ci noskip]

* Move yarn build-static-viz into the checkout step

* License information for antlr4-runtime

* create attachment for categorical donuts

* add ordinal legend to donuts (#17177)

* set widths of html image and svg image to 1200

* Revert "add ordinal legend to donuts (#17177)"

This reverts commit 1eb81d2e.

* Helper functions to render html easily

* readme in dev

* readme ensure that static viz bundle exists

* Cleanup ns after removing proxy

* Donut chart colors and legend (#17251)

* use external color map for fill per dimension

* Add support new color legend for donut

* Ensure text doesn't appear as link

entire thing is actually the body of a link tag for emails but we want
a decent text color rather than a default link color

* use chart colors from https://stats.metabase.com/_internal/colors



* Make checkers happy

- remove unused imports
- add a docstring
- don't shadow fn with a local

* cleanup ns import

* Remove reflective call

* Cleanup ns on correct branch

Co-authored-by: dan sutton <dan@dpsutton.com>

* X-axis: just use (approx) 5 ticks to avoid overlapping labels (#17287)

* increase gap between arcs (#17271)

* Set rendering hints on html->image

* ignore width for now and make them larger

* Ns deprecation and some cleanup

* make namespace checker happy

* Simple tests for detecting chart type

* Rename from poc

* Tests for scalar/smartscalar

* cleanup js svg namespace a bit

* Tests of svg engine

* ns sorting after renaming

* Unify our two different js engine usages

settled on the js context. Has typed returns `(.asString ^Value ...)`
instead of perhaps capturing std out?
https://www.graalvm.org/sdk/javadoc/org/graalvm/polyglot/Value.html



Context is a bit more friendly for getting source into it. One
downside is that the invocable bit isn't quite as nice. The old way
would return a java.util.functionFunction but the difference is

(.apply function (object-array args))

vs

(.execute fn-ref (object-array args))

* Don't io/resource the io/resource

* js engine tests

* Ns cleanup in js-svg

type hints in the js-engine ns mean we don't need as many classes from
polyglot here

* Include percentages in rendered donut charts

* Testing for percentages

Co-authored-by: Cam Saul <github@camsaul.com>
Co-authored-by: Kyle Doherty <5248953+kdoh@users.noreply.github.com>
Co-authored-by: Ariya Hidayat <ariya@metabase.com>

src/metabase/pulse/render/body.clj

@@ -242,13 +242,19 @@
 (s/defmethod render :categorical/donut :- common/RenderedPulseCard
   [_ render-type _timezone-id :- (s/maybe s/Str) card {:keys [rows] :as data}]
   (let [[x-axis-rowfn y-axis-rowfn] (common/graphing-column-row-fns card data)
-        rows                        (common/non-nil-rows x-axis-rowfn y-axis-rowfn rows)
-        legend-colors               (zipmap (map (comp str x-axis-rowfn) rows) (cycle colors))
+        rows                        (map (juxt (comp str x-axis-rowfn) y-axis-rowfn)
+                                         (common/non-nil-rows x-axis-rowfn y-axis-rowfn rows))
+        legend-colors               (zipmap (map first rows) (cycle colors))
+        total                       (apply + (map second rows))
+        percentages                 (into {}
+                                          (for [[label value] rows]
+                                            [label (if (zero? total)
+                                                     (tru "N/A")
+                                                     (let [f (DecimalFormat. "###,###.##%")]
+                                                       (.format f (double (/ value total)))))]))
         image-bundle                (image-bundle/make-image-bundle
-                                      render-type
-                                      (js-svg/categorical-donut
-                                        (mapv (juxt x-axis-rowfn y-axis-rowfn) rows)
-                                        legend-colors))]
+                                     render-type
+                                     (js-svg/categorical-donut rows legend-colors))]
     {:attachments
      (when image-bundle
        (image-bundle/image-bundle->attachment image-bundle))
@@ -258,14 +264,16 @@
       [:img {:style (style/style {:display :block :width :100%})
              :src   (:image-src image-bundle)}]
       (into [:div {:style (style/style {:clear :both :width "540px" :color "#4C5773"})}]
-            (for [label (map (comp str x-axis-rowfn) rows)]
+            (for [label (map first rows)]
               [:div {:style (style/style {:float       :left :margin-right "12px"
                                           :font-family "Lato, sans-serif"
                                           :font-size   "24px"})}
                [:span {:style (style/style {:color (legend-colors label)})}
                 "•"]
                [:span {:style (style/style {:margin-left "6px"})}
-                label]]))]}))
+                label]
+               [:span {:style (style/style {:margin-left "6px"})}
+                (percentages label)]]))]}))
 
 (s/defmethod render :scalar :- common/RenderedPulseCard
   [_ _ timezone-id card {:keys [cols rows]}]

test/metabase/pulse/render/body_test.clj

@@ -447,3 +447,33 @@
          (render-sparkline
           {:cols default-columns
            :rows [[10.0 1] [11.0 2] [nil 20] [1.25 nil]]})))))
+
+(deftest render-categorical-donut-test
+  (let [columns [{:name          "category",
+                  :display_name  "Category",
+                  :base_type     :type/Text
+                  :semantic_type nil}
+                 {:name          "NumPurchased",
+                  :display_name  "NumPurchased",
+                  :base_type     :type/Integer
+                  :semantic_type nil}]
+        render  (fn [rows]
+                  (body/render :categorical/donut :inline pacific-tz
+                               render.tu/test-card
+                               {:cols columns :rows rows}))
+        prune   (fn prune [html-tree]
+                  (walk/prewalk (fn no-maps [x]
+                                  (if (vector? x)
+                                    (filterv (complement map?) x)
+                                    x))
+                                html-tree))]
+    (testing "Renders without error"
+      (let [rendered-info (render [["Doohickey" 75] ["Widget" 25]])]
+        (is (has-inline-image? rendered-info))))
+    (testing "Includes percentages"
+      (is (= [:div
+              [:img]
+              [:div
+               [:div [:span "•"] [:span "Doohickey"] [:span "75%"]]
+               [:div [:span "•"] [:span "Widget"] [:span "25%"]]]]
+             (prune (:content (render [["Doohickey" 75] ["Widget" 25]]))))))))