From 27e72d3f4474f83a2017de9e6aad52927995c618 Mon Sep 17 00:00:00 2001 From: Lukas Hermann Date: Mon, 25 Jul 2022 09:35:33 -0700 Subject: [PATCH] feat: Allow for percentages to appear in `stack: "normalize"` theta tooltips (#8308) Co-authored-by: GitHub Actions Bot Co-authored-by: Kanit Wongsuphasawat --- build/vega-lite-schema.json | 16 ++-- .../compiled/arc_pie_normalize_tooltip.png | Bin 0 -> 11236 bytes .../compiled/arc_pie_normalize_tooltip.svg | 1 + .../arc_pie_normalize_tooltip.vg.json | 80 ++++++++++++++++++ .../specs/arc_pie_normalize_tooltip.vl.json | 19 +++++ site/_data/examples.json | 13 ++- site/docs/mark/arc.md | 12 +++ src/channeldef.ts | 2 +- src/compile/mark/encode/tooltip.ts | 29 ++++--- test/compile/mark/encode/tooltip.test.ts | 27 +++++- 10 files changed, 174 insertions(+), 25 deletions(-) create mode 100644 examples/compiled/arc_pie_normalize_tooltip.png create mode 100644 examples/compiled/arc_pie_normalize_tooltip.svg create mode 100644 examples/compiled/arc_pie_normalize_tooltip.vg.json create mode 100644 examples/specs/arc_pie_normalize_tooltip.vl.json diff --git a/build/vega-lite-schema.json b/build/vega-lite-schema.json index bb5982bf22..3b4cfcbb47 100644 --- a/build/vega-lite-schema.json +++ b/build/vega-lite-schema.json @@ -18958,7 +18958,7 @@ "type": "boolean" } ], - "description": "Type of stacking offset if the field should be stacked. `stack` is only applicable for `x`, `y`, `theta`, and `radius` channels with continuous domains. For example, `stack` of `y` can be used to customize stacking for a vertical bar chart.\n\n`stack` can be one of the following values:\n- `\"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).\n- `\"normalize\"` - stacking with normalized domain (for creating [normalized stacked bar and area charts](https://vega.github.io/vega-lite/docs/stack.html#normalized).
\n-`\"center\"` - stacking with center baseline (for [streamgraph](https://vega.github.io/vega-lite/docs/stack.html#streamgraph)).\n- `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.\n\n__Default value:__ `zero` for plots with all of the following conditions are true: (1) the mark is `bar`, `area`, or `arc`; (2) the stacked measure channel (x or y) has a linear scale; (3) At least one of non-position channels mapped to an unaggregated field that is different from x and y. Otherwise, `null` by default.\n\n__See also:__ [`stack`](https://vega.github.io/vega-lite/docs/stack.html) documentation." + "description": "Type of stacking offset if the field should be stacked. `stack` is only applicable for `x`, `y`, `theta`, and `radius` channels with continuous domains. For example, `stack` of `y` can be used to customize stacking for a vertical bar chart.\n\n`stack` can be one of the following values:\n- `\"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).\n- `\"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)).
\n-`\"center\"` - stacking with center baseline (for [streamgraph](https://vega.github.io/vega-lite/docs/stack.html#streamgraph)).\n- `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.\n\n__Default value:__ `zero` for plots with all of the following conditions are true: (1) the mark is `bar`, `area`, or `arc`; (2) the stacked measure channel (x or y) has a linear scale; (3) At least one of non-position channels mapped to an unaggregated field that is different from x and y. Otherwise, `null` by default.\n\n__See also:__ [`stack`](https://vega.github.io/vega-lite/docs/stack.html) documentation." }, "title": { "anyOf": [ @@ -19027,7 +19027,7 @@ "type": "boolean" } ], - "description": "Type of stacking offset if the field should be stacked. `stack` is only applicable for `x`, `y`, `theta`, and `radius` channels with continuous domains. For example, `stack` of `y` can be used to customize stacking for a vertical bar chart.\n\n`stack` can be one of the following values:\n- `\"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).\n- `\"normalize\"` - stacking with normalized domain (for creating [normalized stacked bar and area charts](https://vega.github.io/vega-lite/docs/stack.html#normalized).
\n-`\"center\"` - stacking with center baseline (for [streamgraph](https://vega.github.io/vega-lite/docs/stack.html#streamgraph)).\n- `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.\n\n__Default value:__ `zero` for plots with all of the following conditions are true: (1) the mark is `bar`, `area`, or `arc`; (2) the stacked measure channel (x or y) has a linear scale; (3) At least one of non-position channels mapped to an unaggregated field that is different from x and y. Otherwise, `null` by default.\n\n__See also:__ [`stack`](https://vega.github.io/vega-lite/docs/stack.html) documentation." + "description": "Type of stacking offset if the field should be stacked. `stack` is only applicable for `x`, `y`, `theta`, and `radius` channels with continuous domains. For example, `stack` of `y` can be used to customize stacking for a vertical bar chart.\n\n`stack` can be one of the following values:\n- `\"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).\n- `\"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)).
\n-`\"center\"` - stacking with center baseline (for [streamgraph](https://vega.github.io/vega-lite/docs/stack.html#streamgraph)).\n- `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.\n\n__Default value:__ `zero` for plots with all of the following conditions are true: (1) the mark is `bar`, `area`, or `arc`; (2) the stacked measure channel (x or y) has a linear scale; (3) At least one of non-position channels mapped to an unaggregated field that is different from x and y. Otherwise, `null` by default.\n\n__See also:__ [`stack`](https://vega.github.io/vega-lite/docs/stack.html) documentation." }, "title": { "anyOf": [ @@ -19144,7 +19144,7 @@ "type": "boolean" } ], - "description": "Type of stacking offset if the field should be stacked. `stack` is only applicable for `x`, `y`, `theta`, and `radius` channels with continuous domains. For example, `stack` of `y` can be used to customize stacking for a vertical bar chart.\n\n`stack` can be one of the following values:\n- `\"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).\n- `\"normalize\"` - stacking with normalized domain (for creating [normalized stacked bar and area charts](https://vega.github.io/vega-lite/docs/stack.html#normalized).
\n-`\"center\"` - stacking with center baseline (for [streamgraph](https://vega.github.io/vega-lite/docs/stack.html#streamgraph)).\n- `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.\n\n__Default value:__ `zero` for plots with all of the following conditions are true: (1) the mark is `bar`, `area`, or `arc`; (2) the stacked measure channel (x or y) has a linear scale; (3) At least one of non-position channels mapped to an unaggregated field that is different from x and y. Otherwise, `null` by default.\n\n__See also:__ [`stack`](https://vega.github.io/vega-lite/docs/stack.html) documentation." + "description": "Type of stacking offset if the field should be stacked. `stack` is only applicable for `x`, `y`, `theta`, and `radius` channels with continuous domains. For example, `stack` of `y` can be used to customize stacking for a vertical bar chart.\n\n`stack` can be one of the following values:\n- `\"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).\n- `\"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)).
\n-`\"center\"` - stacking with center baseline (for [streamgraph](https://vega.github.io/vega-lite/docs/stack.html#streamgraph)).\n- `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.\n\n__Default value:__ `zero` for plots with all of the following conditions are true: (1) the mark is `bar`, `area`, or `arc`; (2) the stacked measure channel (x or y) has a linear scale; (3) At least one of non-position channels mapped to an unaggregated field that is different from x and y. Otherwise, `null` by default.\n\n__See also:__ [`stack`](https://vega.github.io/vega-lite/docs/stack.html) documentation." }, "timeUnit": { "anyOf": [ @@ -19237,7 +19237,7 @@ "type": "boolean" } ], - "description": "Type of stacking offset if the field should be stacked. `stack` is only applicable for `x`, `y`, `theta`, and `radius` channels with continuous domains. For example, `stack` of `y` can be used to customize stacking for a vertical bar chart.\n\n`stack` can be one of the following values:\n- `\"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).\n- `\"normalize\"` - stacking with normalized domain (for creating [normalized stacked bar and area charts](https://vega.github.io/vega-lite/docs/stack.html#normalized).
\n-`\"center\"` - stacking with center baseline (for [streamgraph](https://vega.github.io/vega-lite/docs/stack.html#streamgraph)).\n- `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.\n\n__Default value:__ `zero` for plots with all of the following conditions are true: (1) the mark is `bar`, `area`, or `arc`; (2) the stacked measure channel (x or y) has a linear scale; (3) At least one of non-position channels mapped to an unaggregated field that is different from x and y. Otherwise, `null` by default.\n\n__See also:__ [`stack`](https://vega.github.io/vega-lite/docs/stack.html) documentation." + "description": "Type of stacking offset if the field should be stacked. `stack` is only applicable for `x`, `y`, `theta`, and `radius` channels with continuous domains. For example, `stack` of `y` can be used to customize stacking for a vertical bar chart.\n\n`stack` can be one of the following values:\n- `\"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).\n- `\"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)).
\n-`\"center\"` - stacking with center baseline (for [streamgraph](https://vega.github.io/vega-lite/docs/stack.html#streamgraph)).\n- `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.\n\n__Default value:__ `zero` for plots with all of the following conditions are true: (1) the mark is `bar`, `area`, or `arc`; (2) the stacked measure channel (x or y) has a linear scale; (3) At least one of non-position channels mapped to an unaggregated field that is different from x and y. Otherwise, `null` by default.\n\n__See also:__ [`stack`](https://vega.github.io/vega-lite/docs/stack.html) documentation." }, "timeUnit": { "anyOf": [ @@ -23887,7 +23887,7 @@ "type": "boolean" } ], - "description": "Type of stacking offset if the field should be stacked. `stack` is only applicable for `x`, `y`, `theta`, and `radius` channels with continuous domains. For example, `stack` of `y` can be used to customize stacking for a vertical bar chart.\n\n`stack` can be one of the following values:\n- `\"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).\n- `\"normalize\"` - stacking with normalized domain (for creating [normalized stacked bar and area charts](https://vega.github.io/vega-lite/docs/stack.html#normalized).
\n-`\"center\"` - stacking with center baseline (for [streamgraph](https://vega.github.io/vega-lite/docs/stack.html#streamgraph)).\n- `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.\n\n__Default value:__ `zero` for plots with all of the following conditions are true: (1) the mark is `bar`, `area`, or `arc`; (2) the stacked measure channel (x or y) has a linear scale; (3) At least one of non-position channels mapped to an unaggregated field that is different from x and y. Otherwise, `null` by default.\n\n__See also:__ [`stack`](https://vega.github.io/vega-lite/docs/stack.html) documentation." + "description": "Type of stacking offset if the field should be stacked. `stack` is only applicable for `x`, `y`, `theta`, and `radius` channels with continuous domains. For example, `stack` of `y` can be used to customize stacking for a vertical bar chart.\n\n`stack` can be one of the following values:\n- `\"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).\n- `\"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)).
\n-`\"center\"` - stacking with center baseline (for [streamgraph](https://vega.github.io/vega-lite/docs/stack.html#streamgraph)).\n- `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.\n\n__Default value:__ `zero` for plots with all of the following conditions are true: (1) the mark is `bar`, `area`, or `arc`; (2) the stacked measure channel (x or y) has a linear scale; (3) At least one of non-position channels mapped to an unaggregated field that is different from x and y. Otherwise, `null` by default.\n\n__See also:__ [`stack`](https://vega.github.io/vega-lite/docs/stack.html) documentation." }, "timeUnit": { "anyOf": [ @@ -25229,7 +25229,7 @@ "type": "boolean" } ], - "description": "Type of stacking offset if the field should be stacked. `stack` is only applicable for `x`, `y`, `theta`, and `radius` channels with continuous domains. For example, `stack` of `y` can be used to customize stacking for a vertical bar chart.\n\n`stack` can be one of the following values:\n- `\"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).\n- `\"normalize\"` - stacking with normalized domain (for creating [normalized stacked bar and area charts](https://vega.github.io/vega-lite/docs/stack.html#normalized).
\n-`\"center\"` - stacking with center baseline (for [streamgraph](https://vega.github.io/vega-lite/docs/stack.html#streamgraph)).\n- `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.\n\n__Default value:__ `zero` for plots with all of the following conditions are true: (1) the mark is `bar`, `area`, or `arc`; (2) the stacked measure channel (x or y) has a linear scale; (3) At least one of non-position channels mapped to an unaggregated field that is different from x and y. Otherwise, `null` by default.\n\n__See also:__ [`stack`](https://vega.github.io/vega-lite/docs/stack.html) documentation." + "description": "Type of stacking offset if the field should be stacked. `stack` is only applicable for `x`, `y`, `theta`, and `radius` channels with continuous domains. For example, `stack` of `y` can be used to customize stacking for a vertical bar chart.\n\n`stack` can be one of the following values:\n- `\"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).\n- `\"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)).
\n-`\"center\"` - stacking with center baseline (for [streamgraph](https://vega.github.io/vega-lite/docs/stack.html#streamgraph)).\n- `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.\n\n__Default value:__ `zero` for plots with all of the following conditions are true: (1) the mark is `bar`, `area`, or `arc`; (2) the stacked measure channel (x or y) has a linear scale; (3) At least one of non-position channels mapped to an unaggregated field that is different from x and y. Otherwise, `null` by default.\n\n__See also:__ [`stack`](https://vega.github.io/vega-lite/docs/stack.html) documentation." }, "timeUnit": { "anyOf": [ @@ -25624,7 +25624,7 @@ "type": "boolean" } ], - "description": "Type of stacking offset if the field should be stacked. `stack` is only applicable for `x`, `y`, `theta`, and `radius` channels with continuous domains. For example, `stack` of `y` can be used to customize stacking for a vertical bar chart.\n\n`stack` can be one of the following values:\n- `\"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).\n- `\"normalize\"` - stacking with normalized domain (for creating [normalized stacked bar and area charts](https://vega.github.io/vega-lite/docs/stack.html#normalized).
\n-`\"center\"` - stacking with center baseline (for [streamgraph](https://vega.github.io/vega-lite/docs/stack.html#streamgraph)).\n- `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.\n\n__Default value:__ `zero` for plots with all of the following conditions are true: (1) the mark is `bar`, `area`, or `arc`; (2) the stacked measure channel (x or y) has a linear scale; (3) At least one of non-position channels mapped to an unaggregated field that is different from x and y. Otherwise, `null` by default.\n\n__See also:__ [`stack`](https://vega.github.io/vega-lite/docs/stack.html) documentation." + "description": "Type of stacking offset if the field should be stacked. `stack` is only applicable for `x`, `y`, `theta`, and `radius` channels with continuous domains. For example, `stack` of `y` can be used to customize stacking for a vertical bar chart.\n\n`stack` can be one of the following values:\n- `\"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).\n- `\"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)).
\n-`\"center\"` - stacking with center baseline (for [streamgraph](https://vega.github.io/vega-lite/docs/stack.html#streamgraph)).\n- `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.\n\n__Default value:__ `zero` for plots with all of the following conditions are true: (1) the mark is `bar`, `area`, or `arc`; (2) the stacked measure channel (x or y) has a linear scale; (3) At least one of non-position channels mapped to an unaggregated field that is different from x and y. Otherwise, `null` by default.\n\n__See also:__ [`stack`](https://vega.github.io/vega-lite/docs/stack.html) documentation." }, "timeUnit": { "anyOf": [ @@ -26075,7 +26075,7 @@ "type": "boolean" } ], - "description": "Type of stacking offset if the field should be stacked. `stack` is only applicable for `x`, `y`, `theta`, and `radius` channels with continuous domains. For example, `stack` of `y` can be used to customize stacking for a vertical bar chart.\n\n`stack` can be one of the following values:\n- `\"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).\n- `\"normalize\"` - stacking with normalized domain (for creating [normalized stacked bar and area charts](https://vega.github.io/vega-lite/docs/stack.html#normalized).
\n-`\"center\"` - stacking with center baseline (for [streamgraph](https://vega.github.io/vega-lite/docs/stack.html#streamgraph)).\n- `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.\n\n__Default value:__ `zero` for plots with all of the following conditions are true: (1) the mark is `bar`, `area`, or `arc`; (2) the stacked measure channel (x or y) has a linear scale; (3) At least one of non-position channels mapped to an unaggregated field that is different from x and y. Otherwise, `null` by default.\n\n__See also:__ [`stack`](https://vega.github.io/vega-lite/docs/stack.html) documentation." + "description": "Type of stacking offset if the field should be stacked. `stack` is only applicable for `x`, `y`, `theta`, and `radius` channels with continuous domains. For example, `stack` of `y` can be used to customize stacking for a vertical bar chart.\n\n`stack` can be one of the following values:\n- `\"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).\n- `\"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)).
\n-`\"center\"` - stacking with center baseline (for [streamgraph](https://vega.github.io/vega-lite/docs/stack.html#streamgraph)).\n- `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.\n\n__Default value:__ `zero` for plots with all of the following conditions are true: (1) the mark is `bar`, `area`, or `arc`; (2) the stacked measure channel (x or y) has a linear scale; (3) At least one of non-position channels mapped to an unaggregated field that is different from x and y. Otherwise, `null` by default.\n\n__See also:__ [`stack`](https://vega.github.io/vega-lite/docs/stack.html) documentation." }, "timeUnit": { "anyOf": [ diff --git a/examples/compiled/arc_pie_normalize_tooltip.png b/examples/compiled/arc_pie_normalize_tooltip.png new file mode 100644 index 0000000000000000000000000000000000000000..2102442d92938eca353c2805058125fd5cd668ab GIT binary patch literal 11236 zcmXY11yodB*B(l`yQI5e=!T&i6p?O5LR#tW?vfaW7Nkq0K{}*SI;2BVn*aKK|ANI_ zX6?Jr+4bx=Ct6!m2^)g~0|WwLt0+TsK_CPQ;CUMD1@JdL5O)Ficwwog1OYw&`+;?o zrGh}TAQg!0E3e$+m5+X}Y<>ys@4 z4s-t)QdfX@XpgY#h;rzNaA=RRd-7uNGRUe;vTHXte~Vna`>V^={YTjf7=Fq1gL}nm zjJ={)ywJHHN)_g_75L7x^mK}`VNhxU%SL52-rjOOwc7=zs0L*?K4`bO*Gc@vfIh;2 zKKi^V=70|7#0vGL=n7VBzLXZC9Ly#(4$5XES30hSv3Of za-){_)IPqxuBRP;h1NVEpTFBzJ!LYQlvH(-Kj&il+`hRI`Btl0=*RFUqG&I!xtI46qmFoQb{Kw)V z8t8|86O45dH@c?t4r6ODF>(qDF*Kw&X}{3Cy!LsLH1ofDZNN#AHEt_$F(v?T;H8MS zt7&pt5{jb~#(5EnVB0|6vg*SjCME^~efjbQ#){$X?QPKEBS=6%fJaG*83V5ch(R*1 zUlT)f2Ku83JDwzeOYfwhkeuZAximXRR$frnCiqk!ZN9Eq33tXV=xvGALI6z@#>yEiL4d#^)HM}&MN&c;S0&5P0c*2C&= zE;Aa!J?6aY$x1JKu8)^CK75-r-QAliGN?62h*M<9_c>tmdw%?D&=ny0YiX&@b!(tu zkXkx`N>EVH>vBq|P`9Gi?YFAL-(~kKQFrE5zY7f)sz@W}j=96NbjF;3R^Nb-1}92m zYVn>n!x9`Nu;-VR#l}NB$6r?h1Xdno(!FtPMf}Nj37KMzwe_Bd`iqW2RfbI%xKcOk zC^e!~IA9^6&5}%0IVC03T+PXcoMIVMQPv;H&{1>ChloW!a z)ecHri9aAv_xqN=_nkJQ85XCj9d>~o&rkPuW<~ow{>ys0x)aRgpw``d-}MjQTOma(sKA4Y4NB9De17yTt-f^g2Yjb znV~PQlXk{GMFI|E*%yHwm6)jH<0EG8;BYo5{dDFir^B9ZPWFN(;AR8mR6|)=1_;Oe zfV+2TX=&>*9M#>SxKjUVK(AC?*24q*;dIsiLx1rr_OlU=8d?DX!lf4Hu61L()%){N z9tI8$OyBFH;J%ISxi@D1Jz+eaQ_`15KO6Wg`_UX%+K7o1EPjuqOFdWPOTstED33Hw zyM6wMT|T%8=N>Pqq?{oQy55|55x(@la#((v9lY85X64dK2Ix-o_V)G$FgD+ZBLj)Y z%Nc_PTkL~F$%{bYH9vu!iM&`Yqh|B{=@M2pwy*0Q|1_JDntHY#ifcKZBgo3i+70Mk z$G{+JuJVo5&w881ukI`Z@syE;@{yb0NzKCaE58$JNd!+%>;3@8x3-FaWGpP`njL?J zEH4``2R=XEY{v5ZbM7j$uFka^wwPYYzspD2D+X8ZPwqw*&cBeAE_~OQ zO>`p#Xgf1o!tuT=n9ncL8Sv8Ko+*Br-M}M#3j~ikGhw44*FVq7H1$F6dOUWnd%w~K zoBZmqz}W z#=F(WjShZAQPD@IY1Cv-yc%%tWbj2FfGWgzI~PJSwAWX(MuriifM+?w_E3bDu=_139`{HAbnrW0jYc+ zpF^yCiW8Wjg;~%EAi>A2wB5+n$&_S=-SgA?^cNA+MG@U9eKNE_Ea2qFDV1 zum`)R9;EIxC2DI!uT7(v^de;|Xj}A>X*n^j$&65ZDqkYaykYZX z4Wr5Be&OuzO}0i|-IwE_%E!p1d60w_9DW@YVP)>@N9pg$1Ikr9fFcvVXUMr=gJQhV zVDG;YP=XxoMQjDtT)*B*l}s;xzlRL6E*r3X{|=`#e&VF%{4Rp>eYahKe?(du5tW#S za&Z(AX?=7=T|wBF1D#giL{;jT^Nqzow4%{p(dD^$4N0nCs>873ZGk<>r^ux0Si1H@_tvv*@wKgr zkAYEHc4bn}Z-{vYhfIbTDdvAh0ie`7)#$n&8lCiEeaQ9F$q>Doqn#qoTW`kt_iwVV zn9-1}6Va#>29BP^1QluwI^LX}KVI{L+Hd@^?$rc(@*hkOk{C&GoJ6b(pj6{Du>0ND z<|fDgEVUl|P=IIjObiNYXzF{KZ*rmWd9zs_mYPi^u+B#wK*jKpUlUAqcVHUwW#<`` z>$~0;og}=r9J3kmhWmkjE6jb=UZh2mD5E39HggBdZ_K7M@hjl^d``c>K!&4bVL|2T zdf+eEI8)3=@y*5Tc%9hu^C^5b8IOKg=$C8gAr0v8F*4@fj3?;uUBu3aXOJ9|n@4Xp zA2Vj;=bT#quD^556-;ll_?Sm`@7KI{sSD+{(vJY=TKwUD6wvxDFing|j*)^X@|nK_ z^K;4b>e$%SxQmD{>~=0TNcW*5E=)#;Xx>;aBBhD(EJ$RjT2E$Pu6;Z6BJ)9k^pSA73QwQGOkSdhHXLZoFVoTOq=@bq77r} zy{B8v6l?l14N(>(Ren(S{1a%9@=a(%GD?UxT`Ul3Vm}^7P0Sq!OK`&RrWX6(j~(17 zX`k9q;`W{m)F{`ZhkF$w zgmV&l+Wj=*xA??D+59{l@tA(=LgR-TbebLi>zCnJ79SE&t%!<>hT4OO<&CMipb94WI(A`}?G4W;mr1UctkYxzP4uVvK;2Q=kJ_(NrjM-?H_Yd;zOynT* z!|UF&Rg56l^ADPJt+?&K1%^Q&_Zy^tk5_`R-$TyN-9R$Bx&#=Qn3E@%Ou__A6eP_D zO2Y&nkPXe>Dd_Z7wijeptfCJpeT+2LDYzdL_7>e4N@ghk{8{epTXGtUGtCr;mH4gj zWOWh*G7J`T>2T_>{f^b?49nCz4CC>eKlifAe+xAjcb>c%`1deE$Ca28~dB{TkDF zQTLrcffAib2&Zl~$v z#d_bm@nS4boRmYqYF!*`8l3?(P(t$Iph0LIf{4^YRQQ`7T6yyv5>j`u{b#a&LcYd+E< zdVZ~-6cEoReQYy!7N9!iQksqbWbdqi(b4*6DD)qq7&)5;ZdnR7LJLy8|jku|Gg$-q$=4Y z!%huV+uyH|K5U9$o<);_yEeZMZ@985j|d^UUwvPK)@PjJkF8_G3@XdB}Gl$QDlQ zU^!livxUYnTjonmgdJvn2yf!cX7bqu2=B-RU>pTU4f7EeWNGQ?g-uPwSbgg`4%IzC z<+$(OAj*cG0$uJc1o@&k(ARKO4CkpV8hPe~~9)e4stCA<|fL zPkHy@v~zuQ!fJ3`;se%oC@Oy7u8C<{%&|gRdhNRFEpsJpQ?iRs z6N3Q;gJJdc1VCZ8@xK>+9G)-|usiZ;A%8ZDj15Wxbn4;luvSNxfM)#zR*8qNb7xyw zi;D(h`I3}I&5j#%tWRedP-E(E>n9lTs6WvH0E`(Fkc#M~@NqK8-dgH@h2ytG4^IC{ zb;+lpp;0c{p*lA;6+He)c(nf8%kDSu4ddE8pM*?3{6Z_IC)s|Xu=i$k3z>mwe&nXo z{sY~E>Yq-o4)rUEF-bUO?CshA;Sif%>A!l=FLDUeG^6D>{xqa1b!1ezzI!?b|LUA= z1oOp`4;BEFH-2J2>mqJs%{5)uPj|&`d!_1UcZLB0QaCRqSgpO<$vxm3SuYnU z&2||`=pozRMO;F+MBj1|qK-CQptDABA(v#73s5W2og}Qu>AebD<>?BmY@-0dMkXQx z?mYIGHP4-2D($?;gC1emgt~vcz{kW#1gqlUGPR>Lh7AU&8as0=OFtleR{5(!imc$R z$elV;5-V#Snp3o~oaX}Wnta0vK}+)2F~u`pd#29S$e$bAu+)w&t$8ALQAgu)AP9AH ze-8yLIA#+Hq(o(E1p~~x`Dk~~?w|G9lLlzy9BKyxW7q4=HP|R89XzscKZvtxH0~|z zfR4UYe*f4cSblnf2r4Eo;+sf`uG`NDFiiEW<%~rqWR|ITwdp{UI--l|1F>=rz@<7| z7a)-0tM%5p(Xa*C)K%6*7yesu12o{py}LJTb6B#v{vjSCa#|Jm2p zWx_fsK2+)4^+*DAKuQ1zQ{kZg`t_?8Iz|6*QE>ig9?c6Pe_-3Y_7mRT`G<7`GtIZl zYlSW~egGj+h0jac_V`zmi1#@oI|s+vs_&`A(PCY_I=@U1P$diX%-wcq*WvM>t$h{m zt!CxHJ1J<1((e|Y$mLt-v-wwDAuv(c9hQOQtn4J{MOwCJX`3|jmp;ctxc2x%i&!(; zI9EdW-gO!&#Hk2u)q9Kv?Xq!jq&i_^N0HypbcZqizt8|#wVHa?pi@LC7oo_UsY zcWL}N)Fui)j8WB2g7*G%i^KD(ol>Pi^IRsvqM5O$vCX0UwdjErcd|Ii2M0F#IY2b2 zdR$Uaty8-BC!E-ND@2sZp^~m-jq;28`Qe|P8bcyz=u<$j^GhMF2)bw}Fta3sCp<70>x3S=j?%^UZdu7O&g3vgy{AT33r^Syj``Ob-Jn$iS0-fQ7|M zy$YkkgCi}0BI;*LC>a&dPS}kq!6=n=Oku67wzXWuFb$OU0$;^dDk_J^k~OQ+-SO+Y ztAPPUW6!zQd;9yrhF=DpT2>_ZpQw z=UNQ)hZRHOz_rTj2QpuW7_jALDhwXzu03I2A;7ol!F-mB_}hNt*f4Bx3-G_{dzAy;UZg>1b@fmSskMBno ziSfCiygU*x&WdkY3!o%Y$a5m4Qv&!F^+)emk}|)%>+Ro?LTK%9t|wN3Vt6e-X#I${ zUgM$zP{>QVtifiTJ76M%%al;V#)gTL1T%xjEaCC~Z&6hh)}+)uC)Nw3Q&*gfg|nJ&<91pTqFxC z{r6jx>SpOQgI+W$Usv8AEw$i&Ty{kbxZ7s|hN@jpS2gVegQPVKIRht(F2;LAOLd&J zU0=xWmn777R8`}ri!I0q%arufs1@H3cVDVfmDG~F&CxM_5oJ(hGUoYZukPw2@@1FRu=-sXgn_Q~qZNl&uV>HOiX$~*0x zwCH*-B+i_dWX3Grd_wO+w{>Kzs27qoz2WO(nji^gif|#ylhr4dY~o*zHD;6J;|i9R z^gt;U1&7o70VMz#pCz($-P!P96muit_;+qi2@1nV*J1BgPSaSd*DUbdxpjlcM%foC zW!7hriwnv+`N|^FcZ0}sd5w4{2Tz3YzdTAN7fgYX{Ic69SFPcfe+*yx9`OO76uSVK zvA{gNPQaOur^XgsbQLT3%!V|;{2Ru(8sykStW$08QlVBoqeiXRzwTRU ztg&g_`t7>s=XLhN!W?=-p-S%I#iN3P!p#Qit#H{z4%8=aL$bh?k7dx9cXNuvN;@Mr zZWBsfKc^4PeGS@85mM%PKQ0+;t((TeUY&TF%z*uvBrQX%hoN*4Y3`UW_colHCZ{-D zn`KN+pLjS`s{aKvWNiP`SCiX;# z4bleQixBJaUCVZnA&95(G1k=L$)5=n`n<)*CW>NZ`C7S99OgC;%Jm}7RxuPlp;z#p z#$%iclTLw#{5bY7{(;P?m=}azMwnQJzNiAKqFrDHC^j7#r;tO(rv7yM=xj#6W-*z) zPV4HwQ0|c;I{=jaN~9iFU%Q<-=OsU!JS}!9zjSY!S85o%*IZW2s`bL)mJ1^cu_k(8 zIBa10eL1x8YWv%&czZo~qF@GkbEQ|S1< zSv2fbILy;f+fa}-o&Y0{pfLim#3MwGhBcfTTm@P}7cr7)$lDJ1X=a_k%xVo`&=YGy z;JYJ_az{2r8~SQ&URB)?J$x?~eSKN;N}HV+nm6%`pIXUhxy#NPZg_wvmy$Sae!iul zN~BQ8YlC2TpQc=UEgrWK&cb&qZHee6bLauH!h#91Yg15o5Mdi`oij3zAmkh%X3hUm zQ$HAT{48W(N*JGV^3hCG&YWo{8+v?k85m!aX*Y^9Z;RwWSze|^AEK&0!3;Wgtk-x4 z3|H||+HHx7m?@}>5p@Z^M)ysfh%D@}mc~3sEb5|t>W3(TWr3CuUbMZWA(_jxrw&Ws znw$`(cx4Z1g6s_V1T!6p@NvIHmC}sGKIL{1)SDTlHZD7++IqS zFf-(sduf4l$m+JDyx7Ajc5c4zx#WI|(t;BcC=wZpWMZDo3&GZoyW+|MQ8KdD?Ge7` zRcEmLzcnBX&G5@x=>Cl9pC*VMw3!qe1%Zi~owQLF_ZKWw$bkq<|D8lT9@* zDnn|9$xQ1AFW`IhAEd$H;}e9X6(rW7C}uKKOxq!9gsj zO#f3pME-qVzxfX`e5)*kmc&83UYqZ1xvT^P#W-|~-Wp)G0Wh$A5h4XTX>Tc?+*OAR zdhhQl698io0PlS~#42z|3{>up8Wg-&lZaWobs3pespXWG zhC9iDZQAj{?TCZ~1Si_mo}NFqm)3?JZCS36IOIHZZDXnR)gAP_JbDGljhYQ}LA3d; zCYaBbZz~GTF6R7btXpevaA6@94<8@RM(kD{IW`Uod6gzbLydFXjfxmmQAHp^L9adH zah{EqF$u9ssEZ<3TBO`BVx6QcQpMJw?DCZ$3@zhN#n-6yW6sG9^V2S#dCBunD~JDR z2;aJ<(8PqWi~Fu`q1E^?Q*;<=DGEybaEObVy5}Cbh^P`7PUM%QZp@eXN?jFT$Aqaa z|2>9*Q->(LcN=BT6=hyI?jMO5j~1X-!>(xN0>&I!a;NZ3KL+VG;-?wu5x!X#4YKq{{DQCD!ye12-!3#QBJH)+dgxK?TI^b1# z%6M%XYh`Lh+dQ7U`(YR-MLsB62yV zR$;Q@C|JTb$uxi-NuAhkyCzY)2*wRCZ*A}8bcoJV5qbV!hu3cBfd#k$OgUApj#*g4 za)SgZs$=dyY;oHGIqEkVd18tg%j-ib!|A!V|56;;Y+vsaps0L@y8n4&W>KH&pSult zBcyqN*Bh}GZEJYKNwAjx*0yhvT(z|`vvju9t> zv;MVZe(1cE#Ya{~z(>qmEnmJvrwfA3+p*wgM~FCCJAN=VXIHE=xp5K#SX}PykwIBB z)5PLxiC)2V*j{Bxd(f@b4J8aGVJW(biUcoN{|jK=v21KrrsZQ-M$EQNN82ajAC-L{ z``pvz;%65{UHE%(i&BTAG*gP;a99C;HYT+tn%ETdwc*%ASIDG+wL&>u!kJ(gAP_L- zOXPfq3Dp+7e1p|NKv5z>qsT{Gl8LFCwyP$Gy8oGl$*?SRBj(RzAscF_Dwt2F&Vcub zz0)!|eC(gI^*ar{T=+qIa216~UY&*d3$Jqq%dy{-~~M*X(N?PTn+;L6x!&DvS1z(x9P=52J(JJ=7R`1bAF+Ot}JE*e1T zUbErhyxbTygEn%}=Fy6>Y_&eqk3T9d-O#Bs!-}+D9m{bvH$IG*it19oa85#FJ zN`23Y`Nq78sS2k^zaY+1ES%%6F&zYeg{n??1xo?$rL{$vNg(k(Q83f;sa8SGtkf(Y z-ag96@gIUj%S-#eXxtk7SFIA-aC$%P{Z8TX9xVjW<2)|)&#bq1)Z0$u175VKG$>IT z;@>psAOojdvdnKX$#3ue-#J6zR+e~Ow%Gd!oP_Ylti-tii@E-L7_9$Z#WYtx!S<7c z?{CJ&kIDdqz=<&W*E(Lr+#mx7x0-}k0hZRPd;#JX@vNzR*>zv*Sw}9yJ?02C$6|mk7Ic^HjiZpUpnbnMx-9@}+2M=+7!x^5QO-k|lb28jQh&@W|F z1A`T;u8QxIoj08agF}i58l!6ckIj>bSpq8D-IHC`{9$S5)ZZ1wRASX;F$7;`-J$V3 zMx@47m_xmZ|I0czMI$3}y+~cCC3C9O7*n{zm5Xr{3@@{CwpQ9FzyGzR8t(+x%a>P}ZZjyUTD^7%5BnTXJ73m*Eox z$xEo{eq}aNCs%)S;S5l5ZQJ*i&JVRiF*EB>#RSOaDGeh-HXcJIK*<~xDE!+(eJp?a z)U{AMZC3-HS0#d?Cj5>d`vzO5UJVR_>6X{pZ+5f>T)JtS9?%00A*zCD4d6EbL2q3# zA}o5+qrPpmz=k56=~S8vUSSZC0Pw;V@v7?nnoVSRR}ry@)BVRZOTmPHFaRULg|FEA zt6S0AD)fMpNiyW0%sB!h{4BJ9N3(o*KzHi+!m7+J>rl`x28>9nL~av>DDb;>UP2?V zQ^klZlUNhBL@Gl6D1G`uOnEJVTj>yXlw)wqVOTOSPH74RdJ^oPJ^Y{16)g9vSP44A z$5@19Go$WD0ux8aMd`Hf52@d}o+rN76;%&>AXMSEfLym|?&?j0NwBGdm%||KzIz}a zlfot*g14>*G$nKNCmHF*gU)0a6~Og^sA8flmj3nl(0iS^Rc7GogxVf$xKC%fyBl7M zk6@b0FmRTQMr*wTZMP7`F?;p0kM#9mcbJUqIJPvk!t`pO8g)dKHU`x%5;kCAVR;Z-6g%6Xq+TbJHPPIErbzwBQRyNufLqY9$2 zcc{J1WN>L+(T#LRuix~*DbZ)R%W*Kz5-vD;Nlqu{196wakjZ8uL@8x#54^!kXauWJ zPon?`qBOfV6=m{7$(oW<3>*pTEHdT@Y{DB`->I{)|1zxoy~_a1?Nh`UK|#asGsTcq z*k-2j8XU>tF-X2*1!%Yy?uXmhznAoK;F-(nC+Nv+-ejKRrF{Poqo+O{aIe`sLQ0>;tH(MZp#m#$+U%w31d)4fO0& zxf|xoi|z-Eou5Aw{mx)l{4$_%*ysB_Iw2uAU|yZfc9JgdG)gV(>PspQML0n!e87-lV!T5##AK3jGhoY7kC{bY+79P(#x6)VQgh8#&KN%%I-$)*l$Demj!yno zWX|T_fyUySz?i?@xh_Vo@HACuObl?yhvoE+ts-EtA)AnP>m~*+1a4d{O*(qljjGt&l8%#^jih&3`jXTMKCT( z)T<;qKzm`qQTava5FZclbWstXa1GuH4(eyIU)odiF$G3BQ}0eMZac}E46jup<_`mOAx3@0B zg27FO3h}YPl8pwidf?aEE1)15!H_0LTp6!0c5Est>hLi1TLt<_sUk0Rp82=7Zo@C; zRrzb~{{HJ!nl9WdBD?!$+@!4WJ0YdoY0Mb^+BS307vUg&GFVhX1U=o$7ziOzbhI`j zbINp}oRBh{4o%Lbcshm_ttS~Gj~BN7zi \ No newline at end of file diff --git a/examples/compiled/arc_pie_normalize_tooltip.vg.json b/examples/compiled/arc_pie_normalize_tooltip.vg.json new file mode 100644 index 0000000000..eaa71afdf9 --- /dev/null +++ b/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"}] +} diff --git a/examples/specs/arc_pie_normalize_tooltip.vl.json b/examples/specs/arc_pie_normalize_tooltip.vl.json new file mode 100644 index 0000000000..d58e0e88df --- /dev/null +++ b/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"} + } +} diff --git a/site/_data/examples.json b/site/_data/examples.json index 760e1aff13..543c8f69df 100644 --- a/site/_data/examples.json +++ b/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 } ] }, diff --git a/site/docs/mark/arc.md b/site/docs/mark/arc.md index 54017f28e3..bace52b2ac 100644 --- a/site/docs/mark/arc.md +++ b/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` + + + +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 diff --git a/src/channeldef.ts b/src/channeldef.ts index 81c673c33b..5cfe7c8eae 100644 --- a/src/channeldef.ts +++ b/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).
+ * - `"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)).
* -`"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. * diff --git a/src/compile/mark/encode/tooltip.ts b/src/compile/mark/encode/tooltip.ts index e753f29439..9b20c73f99 100644 --- a/src/compile/mark/encode/tooltip.ts +++ b/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}); diff --git a/test/compile/mark/encode/tooltip.test.ts b/test/compile/mark/encode/tooltip.test.ts index 32bf659265..2a71bacbfe 100644 --- a/test/compile/mark/encode/tooltip.test.ts +++ b/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(