feat: Allow for percentages to appear in stack: "normalize" theta t…

…ooltips (#8308)

Co-authored-by: GitHub Actions Bot <vega-actions-bot@users.noreply.github.com>
Co-authored-by: Kanit Wongsuphasawat <kanitw@gmail.com>

examples/compiled/arc_pie_normalize_tooltip.vg.json

@@ -0,0 +1,80 @@
+{
+  "$schema": "https://vega.github.io/schema/vega/v5.json",
+  "description": "Pie Chart with percentage_tooltip",
+  "background": "white",
+  "padding": 5,
+  "width": 200,
+  "height": 200,
+  "data": [
+    {
+      "name": "source_0",
+      "values": [
+        {"category": 1, "value": 4},
+        {"category": 2, "value": 6},
+        {"category": 3, "value": 10},
+        {"category": 4, "value": 3},
+        {"category": 5, "value": 7},
+        {"category": 6, "value": 8}
+      ]
+    },
+    {
+      "name": "data_0",
+      "source": "source_0",
+      "transform": [
+        {
+          "type": "stack",
+          "groupby": [],
+          "field": "value",
+          "sort": {"field": ["category"], "order": ["ascending"]},
+          "as": ["value_start", "value_end"],
+          "offset": "normalize"
+        },
+        {
+          "type": "filter",
+          "expr": "isValid(datum[\"value\"]) && isFinite(+datum[\"value\"])"
+        }
+      ]
+    }
+  ],
+  "marks": [
+    {
+      "name": "marks",
+      "type": "arc",
+      "style": ["arc"],
+      "from": {"data": "data_0"},
+      "encode": {
+        "update": {
+          "tooltip": {
+            "signal": "{\"value\": format(datum[\"value_end\"]-datum[\"value_start\"], \".0%\"), \"category\": isValid(datum[\"category\"]) ? datum[\"category\"] : \"\"+datum[\"category\"]}"
+          },
+          "fill": {"scale": "color", "field": "category"},
+          "description": {
+            "signal": "\"value: \" + (format(datum[\"value_end\"]-datum[\"value_start\"], \".0%\")) + \"; category: \" + (isValid(datum[\"category\"]) ? datum[\"category\"] : \"\"+datum[\"category\"])"
+          },
+          "x": {"signal": "width", "mult": 0.5},
+          "y": {"signal": "height", "mult": 0.5},
+          "outerRadius": {"signal": "min(width,height)/2"},
+          "innerRadius": {"value": 0},
+          "startAngle": {"scale": "theta", "field": "value_end"},
+          "endAngle": {"scale": "theta", "field": "value_start"}
+        }
+      }
+    }
+  ],
+  "scales": [
+    {
+      "name": "theta",
+      "type": "linear",
+      "domain": [0, 1],
+      "range": [0, 6.283185307179586],
+      "zero": true
+    },
+    {
+      "name": "color",
+      "type": "ordinal",
+      "domain": {"data": "data_0", "field": "category", "sort": true},
+      "range": "category"
+    }
+  ],
+  "legends": [{"fill": "color", "symbolType": "circle", "title": "category"}]
+}

examples/specs/arc_pie_normalize_tooltip.vl.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+  "description": "Pie Chart with percentage_tooltip",
+  "data": {
+    "values": [
+      {"category": 1, "value": 4},
+      {"category": 2, "value": 6},
+      {"category": 3, "value": 10},
+      {"category": 4, "value": 3},
+      {"category": 5, "value": 7},
+      {"category": 6, "value": 8}
+    ]
+  },
+  "mark": {"type": "arc", "tooltip": true},
+  "encoding": {
+    "theta": {"field": "value", "type": "quantitative", "stack": "normalize"},
+    "color": {"field": "category", "type": "nominal"}
+  }
+}

site/_data/examples.json

@@ -400,6 +400,11 @@
         "title": "Pie Chart",
         "description": "A pie chart encodes proportional differences among a set of numeric values as the angular extent and area of a circular slice."
       },
+      {
+        "name": "arc_pie_normalize_tooltip",
+        "title": "Pie Chart with percentage_tooltip",
+        "description": "A pie chart with a tooltip that shows the percentage covered by the hovered slice."
+      },
       {
         "name": "arc_donut",
         "title": "Donut Chart",
@@ -778,10 +783,10 @@
         "png": true
       },
       {
-	"name": "interactive_geo_earthquakes",
-	"title": "Earthquakes Example",
-	"description": "Interactive globe visualization of earthquakes",
-	"png": true
+        "name": "interactive_geo_earthquakes",
+        "title": "Earthquakes Example",
+        "description": "Interactive globe visualization of earthquakes",
+        "png": true
       }
     ]
   },

site/docs/mark/arc.md

@@ -67,6 +67,18 @@ You can also add a text layer to add labels to a pie chart.
 
 **Note:** For now, [you need to add `stack: true`](https://github.com/vega/vega-lite/issues/5078) to theta to force the text to apply the same polar stacking layout.
 
+{:#tooltip}
+
+### Pie Charts with Tooltips
+
+To add tooltip, you can set `tooltip: true` in `mark`
+
+<span class="vl-example" data-name="arc_pie_normalize_tooltip"></span>
+
+By default, the tooltip will show actual value of the theta field.
+
+Alternatively, setting `stack: "normalize"` allows for tooltips that display the percentage of the pie taken up by a each slice.
+
 ## Arc Config
 
 ```js

src/channeldef.ts

@@ -463,7 +463,7 @@ export interface PositionBaseMixins {
    *
    * `stack` can be one of the following values:
    * - `"zero"` or `true`: stacking with baseline offset at zero value of the scale (for creating typical stacked [bar](https://vega.github.io/vega-lite/docs/stack.html#bar) and [area](https://vega.github.io/vega-lite/docs/stack.html#area) chart).
-   * - `"normalize"` - stacking with normalized domain (for creating [normalized stacked bar and area charts](https://vega.github.io/vega-lite/docs/stack.html#normalized). <br/>
+   * - `"normalize"` - stacking with normalized domain (for creating [normalized stacked bar and area charts](https://vega.github.io/vega-lite/docs/stack.html#normalized) and pie charts [with percentage tooltip](https://vega.github.io/vega-lite/docs/arc.html#tooltip)). <br/>
    * -`"center"` - stacking with center baseline (for [streamgraph](https://vega.github.io/vega-lite/docs/stack.html#streamgraph)).
    * - `null` or `false` - No-stacking. This will produce layered [bar](https://vega.github.io/vega-lite/docs/stack.html#layered-bar-chart) and area chart.
    *

src/compile/mark/encode/tooltip.ts

@@ -1,6 +1,6 @@
 import {array, isArray, isObject, isString} from 'vega-util';
 import {isBinned} from '../../../bin';
-import {getMainRangeChannel, isXorY, Channel} from '../../../channel';
+import {getMainRangeChannel, isXorY, Channel, THETA, RADIUS} from '../../../channel';
 import {
   defaultTitle,
   getFieldDef,
@@ -101,19 +101,26 @@ export function tooltipData(
         const {format, formatType} = getFormatMixins(fieldDef);
         value = binFormatExpression(startField, endField, format, formatType, config);
         toSkip[channel2] = true;
-      } else if (stack && stack.fieldChannel === channel && stack.offset === 'normalize') {
-        const {format, formatType} = getFormatMixins(fieldDef);
-        value = formatSignalRef({
-          fieldOrDatumDef: fieldDef,
-          format,
-          formatType,
-          expr,
-          config,
-          normalizeStack: true
-        }).signal;
       }
     }
 
+    if (
+      (isXorY(channel) || channel === THETA || channel === RADIUS) &&
+      stack &&
+      stack.fieldChannel === channel &&
+      stack.offset === 'normalize'
+    ) {
+      const {format, formatType} = getFormatMixins(fieldDef);
+      value = formatSignalRef({
+        fieldOrDatumDef: fieldDef,
+        format,
+        formatType,
+        expr,
+        config,
+        normalizeStack: true
+      }).signal;
+    }
+
     value ??= textRef(fieldDef, config, expr).signal;
 
     tuples.push({channel, key, value});

test/compile/mark/encode/tooltip.test.ts

@@ -173,7 +173,7 @@ describe('compile/mark/encode/tooltip', () => {
       });
     });
 
-    it('returns correct tooltip signal for normalized stacked field', () => {
+    it('returns correct tooltip signal for normalized x|y stacked field', () => {
       expect(
         tooltipRefForEncoding(
           {
@@ -198,6 +198,31 @@ describe('compile/mark/encode/tooltip', () => {
       });
     });
 
+    it('returns correct tooltip signal for normalized theta stacked field', () => {
+      expect(
+        tooltipRefForEncoding(
+          {
+            theta: {
+              aggregate: 'sum',
+              field: 'IMDB_Rating',
+              type: 'quantitative'
+            }
+          },
+          {
+            fieldChannel: 'theta',
+            groupbyChannels: [],
+            groupbyFields: new Set(),
+            offset: 'normalize',
+            impute: false,
+            stackBy: []
+          },
+          defaultConfig
+        )
+      ).toEqual({
+        signal: `{"Sum of IMDB_Rating": format(datum["sum_IMDB_Rating_end"]-datum["sum_IMDB_Rating_start"], ".0%")}`
+      });
+    });
+
     it('returns correct tooltip signal for formatted normalized stacked field', () => {
       expect(
         tooltipRefForEncoding(