diff --git a/.loki/reference/chrome_laptop_static_viz_PieChart_Labels_With_Percent.png b/.loki/reference/chrome_laptop_static_viz_PieChart_Labels_With_Percent.png
index d19eced54933cd8a20a0d9e38ad8e497008b01c1..552d336d62b51807a1bf3f8aac2430d52f99f83b 100644
Binary files a/.loki/reference/chrome_laptop_static_viz_PieChart_Labels_With_Percent.png and b/.loki/reference/chrome_laptop_static_viz_PieChart_Labels_With_Percent.png differ
diff --git a/.loki/reference/chrome_laptop_static_viz_PieChart_Three_Rings_Percentages_And_Labels.png b/.loki/reference/chrome_laptop_static_viz_PieChart_Three_Rings_Percentages_And_Labels.png
new file mode 100644
index 0000000000000000000000000000000000000000..e348e00fa79f2c184f4016335e5c0e47d03a1c75
Binary files /dev/null and b/.loki/reference/chrome_laptop_static_viz_PieChart_Three_Rings_Percentages_And_Labels.png differ
diff --git a/.loki/reference/chrome_laptop_static_viz_PieChart_Three_Rings_Percentages_On_Chart.png b/.loki/reference/chrome_laptop_static_viz_PieChart_Three_Rings_Percentages_On_Chart.png
new file mode 100644
index 0000000000000000000000000000000000000000..db65ebc2f43a69fd424f24fc6f5dfd893eeadc5a
Binary files /dev/null and b/.loki/reference/chrome_laptop_static_viz_PieChart_Three_Rings_Percentages_On_Chart.png differ
diff --git a/e2e/test/scenarios/visualizations-charts/pie_chart.cy.spec.js b/e2e/test/scenarios/visualizations-charts/pie_chart.cy.spec.js
index b7c4d176ff3cf31f092014869933a8b42f45e21b..1c28ea52da48753958a71a7d5646414a36a71536 100644
--- a/e2e/test/scenarios/visualizations-charts/pie_chart.cy.spec.js
+++ b/e2e/test/scenarios/visualizations-charts/pie_chart.cy.spec.js
@@ -392,36 +392,43 @@ describe("scenarios > visualizations > pie chart", () => {
color: "#51528D",
name: "Saturday",
value: "2,747",
+ secondaryValue: "14.64 %",
},
{
color: "#ED8535",
name: "Thursday",
value: "2,698",
+ secondaryValue: "14.38 %",
},
{
color: "#E75454",
name: "Tuesday",
value: "2,695",
+ secondaryValue: "14.37 %",
},
{
color: "#689636",
name: "Sunday",
value: "2,671",
+ secondaryValue: "14.24 %",
},
{
color: "#8A5EB0",
name: "Monday",
value: "2,664",
+ secondaryValue: "14.20 %",
},
{
color: "#69C8C8",
name: "Friday",
value: "2,662",
+ secondaryValue: "14.19 %",
},
{
color: "#F7C41F",
name: "Wednesday",
value: "2,623",
+ secondaryValue: "13.98 %",
},
],
});
@@ -464,18 +471,22 @@ describe("scenarios > visualizations > pie chart", () => {
{
name: "Doohickey",
value: "606",
+ secondaryValue: "22.06 %",
},
{
name: "Gadget",
value: "740",
+ secondaryValue: "26.94 %",
},
{
name: "Gizmo",
value: "640",
+ secondaryValue: "23.30 %",
},
{
name: "Widget",
value: "761",
+ secondaryValue: "27.70 %",
},
],
});
diff --git a/frontend/src/metabase/components/Triggerable/Triggerable.jsx b/frontend/src/metabase/components/Triggerable/Triggerable.jsx
index 85d15f4e8806debd619db0537f5ecd013646f6fb..d1bf2dec1a7a9ae1c37fe1b605c4536d40597fa6 100644
--- a/frontend/src/metabase/components/Triggerable/Triggerable.jsx
+++ b/frontend/src/metabase/components/Triggerable/Triggerable.jsx
@@ -157,7 +157,7 @@ const Triggerable = ComposedComponent =>
!isOpen && triggerClassesClose,
CS.noDecoration,
{
- [CS.cursorDefault]: this.props.disabled,
+ [CS.cursorInherit]: this.props.disabled,
},
)}
aria-disabled={this.props.disabled}
diff --git a/frontend/src/metabase/css/core/cursor.module.css b/frontend/src/metabase/css/core/cursor.module.css
index a89c68741b9ece0a9624096b7d6128c45b96a2ba..53b2c59ab759df7acec489365d9daa77f86bbc7b 100644
--- a/frontend/src/metabase/css/core/cursor.module.css
+++ b/frontend/src/metabase/css/core/cursor.module.css
@@ -9,3 +9,7 @@
.cursorDefault {
cursor: default;
}
+
+.cursorInherit {
+ cursor: inherit;
+}
diff --git a/frontend/src/metabase/static-viz/components/PieChart/PieChart.stories.tsx b/frontend/src/metabase/static-viz/components/PieChart/PieChart.stories.tsx
index 1397357a23cbf7f7603b3af4bd820cb5a99f0238..813a8b0cb0c4d5058d83db4c55c1ed0a4027fa68 100644
--- a/frontend/src/metabase/static-viz/components/PieChart/PieChart.stories.tsx
+++ b/frontend/src/metabase/static-viz/components/PieChart/PieChart.stories.tsx
@@ -424,6 +424,18 @@ ThreeRingsNoLabels.args = {
renderingContext,
};
+export const ThreeRingsPercentagesAndLabels = Template.bind({});
+ThreeRingsPercentagesAndLabels.args = {
+ rawSeries: data.threeRingsPercentagesAndLabels as any,
+ renderingContext,
+};
+
+export const ThreeRingsPercentagesOnChart = Template.bind({});
+ThreeRingsPercentagesOnChart.args = {
+ rawSeries: data.threeRingsPercentagesOnChart as any,
+ renderingContext,
+};
+
export const ThreeRingsOtherSlices = Template.bind({});
ThreeRingsOtherSlices.args = {
rawSeries: data.threeRingsOtherSlices as any,
diff --git a/frontend/src/metabase/static-viz/components/PieChart/stories-data/index.ts b/frontend/src/metabase/static-viz/components/PieChart/stories-data/index.ts
index 6a9e9a93591a0cbaf1321def922c57f7a21c5441..d94786064832220c7baf39aa9d13aee2d071cab9 100644
--- a/frontend/src/metabase/static-viz/components/PieChart/stories-data/index.ts
+++ b/frontend/src/metabase/static-viz/components/PieChart/stories-data/index.ts
@@ -39,6 +39,8 @@ import singleDimension from "./single-dimension.json";
import smallMinimumSlicePercentage from "./small-min-slice-percentage.json";
import threeRingsNoLabels from "./three-rings-no-labels.json";
import threeRingsOtherSlices from "./three-rings-other-slices.json";
+import threeRingsPercentagesAndLabels from "./three-rings-percentages-and-labels.json";
+import threeRingsPercentagesOnChart from "./three-rings-percentages-on-chart.json";
import threeRings from "./three-rings.json";
import tinySlicesDisappear43766 from "./tiny-slices-disappear-43766.json";
import truncatedTotal from "./truncated-total.json";
@@ -92,6 +94,8 @@ export const data = {
threeRings,
threeRingsNoLabels,
threeRingsOtherSlices,
+ threeRingsPercentagesAndLabels,
+ threeRingsPercentagesOnChart,
labelsWithPercent,
labelsOnChart,
};
diff --git a/frontend/src/metabase/static-viz/components/PieChart/stories-data/three-rings-percentages-and-labels.json b/frontend/src/metabase/static-viz/components/PieChart/stories-data/three-rings-percentages-and-labels.json
new file mode 100644
index 0000000000000000000000000000000000000000..b7ba1c0c10cbd2cceeda38b747c67b6edc435103
--- /dev/null
+++ b/frontend/src/metabase/static-viz/components/PieChart/stories-data/three-rings-percentages-and-labels.json
@@ -0,0 +1,1017 @@
+[
+ {
+ "card": {
+ "original_card_id": 455,
+ "can_delete": false,
+ "public_uuid": null,
+ "parameter_usage_count": 0,
+ "created_at": "2024-10-03T21:34:37.697381Z",
+ "parameters": [],
+ "metabase_version": "v0.1.35-SNAPSHOT (fc423b1)",
+ "collection": {
+ "authority_level": null,
+ "description": null,
+ "archived": false,
+ "trashed_from_location": null,
+ "slug": "sunburst",
+ "archive_operation_id": null,
+ "name": "Sunburst",
+ "personal_owner_id": null,
+ "type": null,
+ "is_sample": false,
+ "id": 32,
+ "archived_directly": null,
+ "entity_id": "yivDsLk9XUmdCWr0lt9GJ",
+ "location": "/5/23/",
+ "namespace": null,
+ "is_personal": false,
+ "created_at": "2024-08-25T18:16:32.499168Z"
+ },
+ "visualization_settings": {
+ "table.pivot_column": "generation",
+ "table.cell_column": "count",
+ "pie.dimension": [
+ "generation",
+ "type_1",
+ "type_2"
+ ],
+ "pie.percent_visibility": "both",
+ "pie.show_labels": true
+ },
+ "last-edit-info": {
+ "id": 1,
+ "email": "emmad@metabase.com",
+ "first_name": "Emmad",
+ "last_name": "Usmani",
+ "timestamp": "2024-10-03T21:34:37.969909Z"
+ },
+ "collection_preview": true,
+ "entity_id": "v3VeD5Yog4EQxFyZlQKh9",
+ "archived_directly": false,
+ "display": "pie",
+ "parameter_mappings": [],
+ "id": 455,
+ "dataset_query": {
+ "database": 2,
+ "type": "query",
+ "query": {
+ "aggregation": [
+ [
+ "count"
+ ]
+ ],
+ "breakout": [
+ [
+ "field",
+ "generation",
+ {
+ "base-type": "type/BigInteger"
+ }
+ ],
+ [
+ "field",
+ "type_1",
+ {
+ "base-type": "type/Text"
+ }
+ ],
+ [
+ "field",
+ "type_2",
+ {
+ "base-type": "type/Text"
+ }
+ ]
+ ],
+ "order-by": [
+ [
+ "desc",
+ [
+ "aggregation",
+ 0
+ ]
+ ]
+ ],
+ "source-table": "card__104",
+ "filter": [
+ "and",
+ [
+ "=",
+ [
+ "field",
+ "type_1",
+ {
+ "base-type": "type/Text"
+ }
+ ],
+ "Water",
+ "Grass",
+ "Fire"
+ ],
+ [
+ "not-empty",
+ [
+ "field",
+ "type_2",
+ {
+ "base-type": "type/Text"
+ }
+ ]
+ ]
+ ]
+ }
+ },
+ "cache_ttl": null,
+ "embedding_params": null,
+ "made_public_by_id": null,
+ "updated_at": "2024-10-03T21:34:37.697381Z",
+ "moderation_reviews": [],
+ "can_restore": false,
+ "creator_id": 1,
+ "average_query_time": 490.6666666666667,
+ "type": "question",
+ "last_used_at": "2024-10-03T21:36:39.715109Z",
+ "dashboard_count": 1,
+ "last_query_start": "2024-10-03T21:41:44.035179Z",
+ "name": "Sunburst - Percentages and Labels on Chart - Poke Count by Gen, Type 1, Type 2 - Modified",
+ "query_type": "query",
+ "collection_id": 32,
+ "enable_embedding": false,
+ "database_id": 2,
+ "trashed_from_collection_id": null,
+ "can_write": true,
+ "initially_published_at": null,
+ "creator": {
+ "email": "emmad@metabase.com",
+ "first_name": "Emmad",
+ "last_login": "2024-09-27T17:38:30.264582Z",
+ "is_qbnewb": false,
+ "is_superuser": true,
+ "id": 1,
+ "last_name": "Usmani",
+ "date_joined": "2023-11-21T21:25:41.062104Z",
+ "common_name": "Emmad Usmani"
+ },
+ "result_metadata": [
+ {
+ "semantic_type": "type/Category",
+ "name": "generation",
+ "field_ref": [
+ "field",
+ "generation",
+ {
+ "base-type": "type/BigInteger"
+ }
+ ],
+ "effective_type": "type/BigInteger",
+ "id": 1503,
+ "visibility_type": "normal",
+ "display_name": "Generation",
+ "fingerprint": {
+ "global": {
+ "distinct-count": 8,
+ "nil%": 0
+ },
+ "type": {
+ "type/Number": {
+ "min": 1,
+ "q1": 2.1045160333142734,
+ "q3": 5.716989271844637,
+ "max": 8,
+ "sd": 2.234937326790694,
+ "avg": 4.034046692607004
+ }
+ }
+ },
+ "base_type": "type/BigInteger"
+ },
+ {
+ "semantic_type": "type/Category",
+ "name": "type_1",
+ "field_ref": [
+ "field",
+ "type_1",
+ {
+ "base-type": "type/Text"
+ }
+ ],
+ "effective_type": "type/Text",
+ "id": 1475,
+ "visibility_type": "normal",
+ "display_name": "Type 1",
+ "fingerprint": {
+ "global": {
+ "distinct-count": 18,
+ "nil%": 0
+ },
+ "type": {
+ "type/Text": {
+ "percent-json": 0,
+ "percent-url": 0,
+ "percent-email": 0,
+ "percent-state": 0,
+ "average-length": 5.281128404669261
+ }
+ }
+ },
+ "base_type": "type/Text"
+ },
+ {
+ "semantic_type": "type/Category",
+ "name": "type_2",
+ "field_ref": [
+ "field",
+ "type_2",
+ {
+ "base-type": "type/Text"
+ }
+ ],
+ "effective_type": "type/Text",
+ "id": 1499,
+ "visibility_type": "normal",
+ "display_name": "Type 2",
+ "fingerprint": {
+ "global": {
+ "distinct-count": 19,
+ "nil%": 0.4727626459143969
+ },
+ "type": {
+ "type/Text": {
+ "percent-json": 0,
+ "percent-url": 0,
+ "percent-email": 0,
+ "percent-state": 0,
+ "average-length": 2.9474708171206228
+ }
+ }
+ },
+ "base_type": "type/Text"
+ },
+ {
+ "display_name": "Count",
+ "semantic_type": "type/Quantity",
+ "field_ref": [
+ "aggregation",
+ 0
+ ],
+ "base_type": "type/BigInteger",
+ "effective_type": "type/BigInteger",
+ "name": "count",
+ "fingerprint": {
+ "global": {
+ "distinct-count": 6,
+ "nil%": 0
+ },
+ "type": {
+ "type/Number": {
+ "min": 1,
+ "q1": 1,
+ "q3": 2.2964690541943424,
+ "max": 10,
+ "sd": 1.2898977338673652,
+ "avg": 1.8076923076923077
+ }
+ }
+ }
+ }
+ ],
+ "can_run_adhoc_query": true,
+ "table_id": 156,
+ "source_card_id": 104,
+ "collection_position": null,
+ "view_count": 1,
+ "archived": false,
+ "description": null,
+ "cache_invalidated_at": null,
+ "displayIsLocked": true
+ },
+ "data": {
+ "rows": [
+ [
+ 1,
+ "Grass",
+ "Poison",
+ 10
+ ],
+ [
+ 3,
+ "Water",
+ "Ground",
+ 5
+ ],
+ [
+ 1,
+ "Water",
+ "Psychic",
+ 4
+ ],
+ [
+ 3,
+ "Water",
+ "Dark",
+ 4
+ ],
+ [
+ 1,
+ "Fire",
+ "Flying",
+ 3
+ ],
+ [
+ 1,
+ "Water",
+ "Ice",
+ 3
+ ],
+ [
+ 2,
+ "Grass",
+ "Flying",
+ 3
+ ],
+ [
+ 3,
+ "Fire",
+ "Fighting",
+ 3
+ ],
+ [
+ 3,
+ "Fire",
+ "Ground",
+ 3
+ ],
+ [
+ 3,
+ "Grass",
+ "Dark",
+ 3
+ ],
+ [
+ 3,
+ "Water",
+ "Grass",
+ 3
+ ],
+ [
+ 4,
+ "Grass",
+ "Ice",
+ 3
+ ],
+ [
+ 7,
+ "Grass",
+ "Fairy",
+ 3
+ ],
+ [
+ 8,
+ "Grass",
+ "Dragon",
+ 3
+ ],
+ [
+ 1,
+ "Grass",
+ "Psychic",
+ 2
+ ],
+ [
+ 1,
+ "Water",
+ "Poison",
+ 2
+ ],
+ [
+ 2,
+ "Water",
+ "Electric",
+ 2
+ ],
+ [
+ 2,
+ "Water",
+ "Fairy",
+ 2
+ ],
+ [
+ 2,
+ "Water",
+ "Ground",
+ 2
+ ],
+ [
+ 3,
+ "Water",
+ "Flying",
+ 2
+ ],
+ [
+ 4,
+ "Fire",
+ "Fighting",
+ 2
+ ],
+ [
+ 4,
+ "Grass",
+ "Poison",
+ 2
+ ],
+ [
+ 5,
+ "Fire",
+ "Fighting",
+ 2
+ ],
+ [
+ 5,
+ "Grass",
+ "Fairy",
+ 2
+ ],
+ [
+ 5,
+ "Grass",
+ "Poison",
+ 2
+ ],
+ [
+ 5,
+ "Grass",
+ "Steel",
+ 2
+ ],
+ [
+ 5,
+ "Water",
+ "Fighting",
+ 2
+ ],
+ [
+ 5,
+ "Water",
+ "Flying",
+ 2
+ ],
+ [
+ 5,
+ "Water",
+ "Ghost",
+ 2
+ ],
+ [
+ 5,
+ "Water",
+ "Ground",
+ 2
+ ],
+ [
+ 5,
+ "Water",
+ "Rock",
+ 2
+ ],
+ [
+ 6,
+ "Fire",
+ "Flying",
+ 2
+ ],
+ [
+ 6,
+ "Fire",
+ "Normal",
+ 2
+ ],
+ [
+ 6,
+ "Water",
+ "Dark",
+ 2
+ ],
+ [
+ 7,
+ "Grass",
+ "Flying",
+ 2
+ ],
+ [
+ 7,
+ "Water",
+ "Bug",
+ 2
+ ],
+ [
+ 7,
+ "Water",
+ "Fairy",
+ 2
+ ],
+ [
+ 8,
+ "Fire",
+ "Bug",
+ 2
+ ],
+ [
+ 1,
+ "Fire",
+ "Dragon",
+ 1
+ ],
+ [
+ 1,
+ "Fire",
+ "Ghost",
+ 1
+ ],
+ [
+ 1,
+ "Grass",
+ "Dragon",
+ 1
+ ],
+ [
+ 1,
+ "Water",
+ "Dark",
+ 1
+ ],
+ [
+ 1,
+ "Water",
+ "Fighting",
+ 1
+ ],
+ [
+ 1,
+ "Water",
+ "Flying",
+ 1
+ ],
+ [
+ 2,
+ "Fire",
+ "Flying",
+ 1
+ ],
+ [
+ 2,
+ "Fire",
+ "Rock",
+ 1
+ ],
+ [
+ 2,
+ "Water",
+ "Dragon",
+ 1
+ ],
+ [
+ 2,
+ "Water",
+ "Flying",
+ 1
+ ],
+ [
+ 2,
+ "Water",
+ "Poison",
+ 1
+ ],
+ [
+ 2,
+ "Water",
+ "Psychic",
+ 1
+ ],
+ [
+ 2,
+ "Water",
+ "Rock",
+ 1
+ ],
+ [
+ 3,
+ "Grass",
+ "Dragon",
+ 1
+ ],
+ [
+ 3,
+ "Grass",
+ "Fighting",
+ 1
+ ],
+ [
+ 3,
+ "Grass",
+ "Flying",
+ 1
+ ],
+ [
+ 3,
+ "Grass",
+ "Poison",
+ 1
+ ],
+ [
+ 3,
+ "Water",
+ "Rock",
+ 1
+ ],
+ [
+ 4,
+ "Fire",
+ "Steel",
+ 1
+ ],
+ [
+ 4,
+ "Grass",
+ "Flying",
+ 1
+ ],
+ [
+ 4,
+ "Grass",
+ "Ground",
+ 1
+ ],
+ [
+ 4,
+ "Water",
+ "Dragon",
+ 1
+ ],
+ [
+ 4,
+ "Water",
+ "Flying",
+ 1
+ ],
+ [
+ 4,
+ "Water",
+ "Ground",
+ 1
+ ],
+ [
+ 4,
+ "Water",
+ "Steel",
+ 1
+ ],
+ [
+ 5,
+ "Fire",
+ "Psychic",
+ 1
+ ],
+ [
+ 5,
+ "Grass",
+ "Fighting",
+ 1
+ ],
+ [
+ 6,
+ "Fire",
+ "Psychic",
+ 1
+ ],
+ [
+ 6,
+ "Fire",
+ "Water",
+ 1
+ ],
+ [
+ 6,
+ "Grass",
+ "Fighting",
+ 1
+ ],
+ [
+ 7,
+ "Fire",
+ "Dark",
+ 1
+ ],
+ [
+ 7,
+ "Fire",
+ "Dragon",
+ 1
+ ],
+ [
+ 7,
+ "Fire",
+ "Flying",
+ 1
+ ],
+ [
+ 7,
+ "Fire",
+ "Ghost",
+ 1
+ ],
+ [
+ 7,
+ "Grass",
+ "Ghost",
+ 1
+ ],
+ [
+ 7,
+ "Grass",
+ "Steel",
+ 1
+ ],
+ [
+ 7,
+ "Water",
+ "Psychic",
+ 1
+ ],
+ [
+ 8,
+ "Water",
+ "Dragon",
+ 1
+ ],
+ [
+ 8,
+ "Water",
+ "Ice",
+ 1
+ ],
+ [
+ 8,
+ "Water",
+ "Rock",
+ 1
+ ]
+ ],
+ "cols": [
+ {
+ "database_type": "int8",
+ "semantic_type": "type/Category",
+ "table_id": 156,
+ "name": "generation",
+ "source": "breakout",
+ "field_ref": [
+ "field",
+ "generation",
+ {
+ "base-type": "type/BigInteger"
+ }
+ ],
+ "effective_type": "type/BigInteger",
+ "id": 1503,
+ "position": 5,
+ "visibility_type": "normal",
+ "display_name": "Generation",
+ "fingerprint": {
+ "global": {
+ "distinct-count": 8,
+ "nil%": 0
+ },
+ "type": {
+ "type/Number": {
+ "min": 1,
+ "q1": 2.1045160333142734,
+ "q3": 5.716989271844637,
+ "max": 8,
+ "sd": 2.234937326790694,
+ "avg": 4.034046692607004
+ }
+ }
+ },
+ "base_type": "type/BigInteger"
+ },
+ {
+ "database_type": "varchar",
+ "semantic_type": "type/Category",
+ "table_id": 156,
+ "name": "type_1",
+ "source": "breakout",
+ "field_ref": [
+ "field",
+ "type_1",
+ {
+ "base-type": "type/Text"
+ }
+ ],
+ "effective_type": "type/Text",
+ "id": 1475,
+ "position": 9,
+ "visibility_type": "normal",
+ "display_name": "Type 1",
+ "fingerprint": {
+ "global": {
+ "distinct-count": 18,
+ "nil%": 0
+ },
+ "type": {
+ "type/Text": {
+ "percent-json": 0,
+ "percent-url": 0,
+ "percent-email": 0,
+ "percent-state": 0,
+ "average-length": 5.281128404669261
+ }
+ }
+ },
+ "base_type": "type/Text"
+ },
+ {
+ "database_type": "varchar",
+ "semantic_type": "type/Category",
+ "table_id": 156,
+ "name": "type_2",
+ "source": "breakout",
+ "field_ref": [
+ "field",
+ "type_2",
+ {
+ "base-type": "type/Text"
+ }
+ ],
+ "effective_type": "type/Text",
+ "id": 1499,
+ "position": 10,
+ "visibility_type": "normal",
+ "display_name": "Type 2",
+ "fingerprint": {
+ "global": {
+ "distinct-count": 19,
+ "nil%": 0.4727626459143969
+ },
+ "type": {
+ "type/Text": {
+ "percent-json": 0,
+ "percent-url": 0,
+ "percent-email": 0,
+ "percent-state": 0,
+ "average-length": 2.9474708171206228
+ }
+ }
+ },
+ "base_type": "type/Text"
+ },
+ {
+ "database_type": "int8",
+ "semantic_type": "type/Quantity",
+ "name": "count",
+ "source": "aggregation",
+ "field_ref": [
+ "aggregation",
+ 0
+ ],
+ "effective_type": "type/BigInteger",
+ "aggregation_index": 0,
+ "display_name": "Count",
+ "base_type": "type/BigInteger"
+ }
+ ],
+ "native_form": {
+ "query": "SELECT \"source\".\"generation\" AS \"generation\", \"source\".\"type_1\" AS \"type_1\", \"source\".\"type_2\" AS \"type_2\", COUNT(*) AS \"count\" FROM (SELECT \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"_mb_row_id\" AS \"_mb_row_id\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"pokedex_number\" AS \"pokedex_number\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"name\" AS \"name\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"german_name\" AS \"german_name\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"japanese_name\" AS \"japanese_name\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"generation\" AS \"generation\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"status\" AS \"status\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"species\" AS \"species\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"type_number\" AS \"type_number\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"type_1\" AS \"type_1\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"type_2\" AS \"type_2\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"height_m\" AS \"height_m\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"weight_kg\" AS \"weight_kg\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"abilities_number\" AS \"abilities_number\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"ability_1\" AS \"ability_1\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"ability_2\" AS \"ability_2\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"ability_hidden\" AS \"ability_hidden\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"total_points\" AS \"total_points\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"hp\" AS \"hp\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"attack\" AS \"attack\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"defense\" AS \"defense\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"sp_attack\" AS \"sp_attack\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"sp_defense\" AS \"sp_defense\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"speed\" AS \"speed\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"catch_rate\" AS \"catch_rate\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"base_friendship\" AS \"base_friendship\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"base_experience\" AS \"base_experience\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"growth_rate\" AS \"growth_rate\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"egg_type_number\" AS \"egg_type_number\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"egg_type_1\" AS \"egg_type_1\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"egg_type_2\" AS \"egg_type_2\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"percentage_male\" AS \"percentage_male\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"egg_cycles\" AS \"egg_cycles\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"against_normal\" AS \"against_normal\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"against_fire\" AS \"against_fire\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"against_water\" AS \"against_water\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"against_electric\" AS \"against_electric\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"against_grass\" AS \"against_grass\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"against_ice\" AS \"against_ice\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"against_fight\" AS \"against_fight\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"against_poison\" AS \"against_poison\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"against_ground\" AS \"against_ground\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"against_flying\" AS \"against_flying\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"against_psychic\" AS \"against_psychic\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"against_bug\" AS \"against_bug\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"against_rock\" AS \"against_rock\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"against_ghost\" AS \"against_ghost\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"against_dragon\" AS \"against_dragon\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"against_dark\" AS \"against_dark\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"against_steel\" AS \"against_steel\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"against_fairy\" AS \"against_fairy\" FROM \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\") AS \"source\" WHERE ((\"source\".\"type_1\" = 'Water') OR (\"source\".\"type_1\" = 'Grass') OR (\"source\".\"type_1\" = 'Fire')) AND (\"source\".\"type_2\" IS NOT NULL) AND ((\"source\".\"type_2\" <> '') OR (\"source\".\"type_2\" IS NULL)) GROUP BY \"source\".\"generation\", \"source\".\"type_1\", \"source\".\"type_2\" ORDER BY \"count\" DESC, \"source\".\"generation\" ASC, \"source\".\"type_1\" ASC, \"source\".\"type_2\" ASC",
+ "params": null
+ },
+ "dataset": true,
+ "model": true,
+ "format-rows?": true,
+ "results_timezone": "America/Los_Angeles",
+ "results_metadata": {
+ "columns": [
+ {
+ "semantic_type": "type/Category",
+ "name": "generation",
+ "field_ref": [
+ "field",
+ "generation",
+ {
+ "base-type": "type/BigInteger"
+ }
+ ],
+ "effective_type": "type/BigInteger",
+ "id": 1503,
+ "visibility_type": "normal",
+ "display_name": "Generation",
+ "fingerprint": {
+ "global": {
+ "distinct-count": 8,
+ "nil%": 0
+ },
+ "type": {
+ "type/Number": {
+ "min": 1,
+ "q1": 2.1045160333142734,
+ "q3": 5.716989271844637,
+ "max": 8,
+ "sd": 2.234937326790694,
+ "avg": 4.034046692607004
+ }
+ }
+ },
+ "base_type": "type/BigInteger"
+ },
+ {
+ "semantic_type": "type/Category",
+ "name": "type_1",
+ "field_ref": [
+ "field",
+ "type_1",
+ {
+ "base-type": "type/Text"
+ }
+ ],
+ "effective_type": "type/Text",
+ "id": 1475,
+ "visibility_type": "normal",
+ "display_name": "Type 1",
+ "fingerprint": {
+ "global": {
+ "distinct-count": 18,
+ "nil%": 0
+ },
+ "type": {
+ "type/Text": {
+ "percent-json": 0,
+ "percent-url": 0,
+ "percent-email": 0,
+ "percent-state": 0,
+ "average-length": 5.281128404669261
+ }
+ }
+ },
+ "base_type": "type/Text"
+ },
+ {
+ "semantic_type": "type/Category",
+ "name": "type_2",
+ "field_ref": [
+ "field",
+ "type_2",
+ {
+ "base-type": "type/Text"
+ }
+ ],
+ "effective_type": "type/Text",
+ "id": 1499,
+ "visibility_type": "normal",
+ "display_name": "Type 2",
+ "fingerprint": {
+ "global": {
+ "distinct-count": 19,
+ "nil%": 0.4727626459143969
+ },
+ "type": {
+ "type/Text": {
+ "percent-json": 0,
+ "percent-url": 0,
+ "percent-email": 0,
+ "percent-state": 0,
+ "average-length": 2.9474708171206228
+ }
+ }
+ },
+ "base_type": "type/Text"
+ },
+ {
+ "display_name": "Count",
+ "semantic_type": "type/Quantity",
+ "field_ref": [
+ "aggregation",
+ 0
+ ],
+ "base_type": "type/BigInteger",
+ "effective_type": "type/BigInteger",
+ "name": "count",
+ "fingerprint": {
+ "global": {
+ "distinct-count": 6,
+ "nil%": 0
+ },
+ "type": {
+ "type/Number": {
+ "min": 1,
+ "q1": 1,
+ "q3": 2.2964690541943424,
+ "max": 10,
+ "sd": 1.2898977338673652,
+ "avg": 1.8076923076923077
+ }
+ }
+ }
+ }
+ ]
+ },
+ "insights": null
+ }
+ }
+]
diff --git a/frontend/src/metabase/static-viz/components/PieChart/stories-data/three-rings-percentages-on-chart.json b/frontend/src/metabase/static-viz/components/PieChart/stories-data/three-rings-percentages-on-chart.json
new file mode 100644
index 0000000000000000000000000000000000000000..176f86419b7f98c48a74691332c3a87ca32534cc
--- /dev/null
+++ b/frontend/src/metabase/static-viz/components/PieChart/stories-data/three-rings-percentages-on-chart.json
@@ -0,0 +1,1017 @@
+[
+ {
+ "card": {
+ "original_card_id": 454,
+ "can_delete": false,
+ "public_uuid": null,
+ "parameter_usage_count": 0,
+ "created_at": "2024-10-03T21:34:23.611863Z",
+ "parameters": [],
+ "metabase_version": "v0.1.35-SNAPSHOT (fc423b1)",
+ "collection": {
+ "authority_level": null,
+ "description": null,
+ "archived": false,
+ "trashed_from_location": null,
+ "slug": "sunburst",
+ "archive_operation_id": null,
+ "name": "Sunburst",
+ "personal_owner_id": null,
+ "type": null,
+ "is_sample": false,
+ "id": 32,
+ "archived_directly": null,
+ "entity_id": "yivDsLk9XUmdCWr0lt9GJ",
+ "location": "/5/23/",
+ "namespace": null,
+ "is_personal": false,
+ "created_at": "2024-08-25T18:16:32.499168Z"
+ },
+ "visualization_settings": {
+ "table.pivot_column": "generation",
+ "table.cell_column": "count",
+ "pie.dimension": [
+ "generation",
+ "type_1",
+ "type_2"
+ ],
+ "pie.percent_visibility": "both",
+ "pie.show_labels": false
+ },
+ "last-edit-info": {
+ "id": 1,
+ "email": "emmad@metabase.com",
+ "first_name": "Emmad",
+ "last_name": "Usmani",
+ "timestamp": "2024-10-03T21:34:23.892642Z"
+ },
+ "collection_preview": true,
+ "entity_id": "V1t5ILXiehN_X8fq9-Zv4",
+ "archived_directly": false,
+ "display": "pie",
+ "parameter_mappings": [],
+ "id": 454,
+ "dataset_query": {
+ "database": 2,
+ "type": "query",
+ "query": {
+ "aggregation": [
+ [
+ "count"
+ ]
+ ],
+ "breakout": [
+ [
+ "field",
+ "generation",
+ {
+ "base-type": "type/BigInteger"
+ }
+ ],
+ [
+ "field",
+ "type_1",
+ {
+ "base-type": "type/Text"
+ }
+ ],
+ [
+ "field",
+ "type_2",
+ {
+ "base-type": "type/Text"
+ }
+ ]
+ ],
+ "order-by": [
+ [
+ "desc",
+ [
+ "aggregation",
+ 0
+ ]
+ ]
+ ],
+ "source-table": "card__104",
+ "filter": [
+ "and",
+ [
+ "=",
+ [
+ "field",
+ "type_1",
+ {
+ "base-type": "type/Text"
+ }
+ ],
+ "Water",
+ "Grass",
+ "Fire"
+ ],
+ [
+ "not-empty",
+ [
+ "field",
+ "type_2",
+ {
+ "base-type": "type/Text"
+ }
+ ]
+ ]
+ ]
+ }
+ },
+ "cache_ttl": null,
+ "embedding_params": null,
+ "made_public_by_id": null,
+ "updated_at": "2024-10-03T21:34:23.611863Z",
+ "moderation_reviews": [],
+ "can_restore": false,
+ "creator_id": 1,
+ "average_query_time": 487.6666666666667,
+ "type": "question",
+ "last_used_at": "2024-10-03T21:37:56.715682Z",
+ "dashboard_count": 1,
+ "last_query_start": "2024-10-03T21:37:56.514755Z",
+ "name": "Sunburst - Percentages on Chart - Poke Count by Gen, Type 1, Type 2",
+ "query_type": "query",
+ "collection_id": 32,
+ "enable_embedding": false,
+ "database_id": 2,
+ "trashed_from_collection_id": null,
+ "can_write": true,
+ "initially_published_at": null,
+ "creator": {
+ "email": "emmad@metabase.com",
+ "first_name": "Emmad",
+ "last_login": "2024-09-27T17:38:30.264582Z",
+ "is_qbnewb": false,
+ "is_superuser": true,
+ "id": 1,
+ "last_name": "Usmani",
+ "date_joined": "2023-11-21T21:25:41.062104Z",
+ "common_name": "Emmad Usmani"
+ },
+ "result_metadata": [
+ {
+ "semantic_type": "type/Category",
+ "name": "generation",
+ "field_ref": [
+ "field",
+ "generation",
+ {
+ "base-type": "type/BigInteger"
+ }
+ ],
+ "effective_type": "type/BigInteger",
+ "id": 1503,
+ "visibility_type": "normal",
+ "display_name": "Generation",
+ "fingerprint": {
+ "global": {
+ "distinct-count": 8,
+ "nil%": 0
+ },
+ "type": {
+ "type/Number": {
+ "min": 1,
+ "q1": 2.1045160333142734,
+ "q3": 5.716989271844637,
+ "max": 8,
+ "sd": 2.234937326790694,
+ "avg": 4.034046692607004
+ }
+ }
+ },
+ "base_type": "type/BigInteger"
+ },
+ {
+ "semantic_type": "type/Category",
+ "name": "type_1",
+ "field_ref": [
+ "field",
+ "type_1",
+ {
+ "base-type": "type/Text"
+ }
+ ],
+ "effective_type": "type/Text",
+ "id": 1475,
+ "visibility_type": "normal",
+ "display_name": "Type 1",
+ "fingerprint": {
+ "global": {
+ "distinct-count": 18,
+ "nil%": 0
+ },
+ "type": {
+ "type/Text": {
+ "percent-json": 0,
+ "percent-url": 0,
+ "percent-email": 0,
+ "percent-state": 0,
+ "average-length": 5.281128404669261
+ }
+ }
+ },
+ "base_type": "type/Text"
+ },
+ {
+ "semantic_type": "type/Category",
+ "name": "type_2",
+ "field_ref": [
+ "field",
+ "type_2",
+ {
+ "base-type": "type/Text"
+ }
+ ],
+ "effective_type": "type/Text",
+ "id": 1499,
+ "visibility_type": "normal",
+ "display_name": "Type 2",
+ "fingerprint": {
+ "global": {
+ "distinct-count": 19,
+ "nil%": 0.4727626459143969
+ },
+ "type": {
+ "type/Text": {
+ "percent-json": 0,
+ "percent-url": 0,
+ "percent-email": 0,
+ "percent-state": 0,
+ "average-length": 2.9474708171206228
+ }
+ }
+ },
+ "base_type": "type/Text"
+ },
+ {
+ "display_name": "Count",
+ "semantic_type": "type/Quantity",
+ "field_ref": [
+ "aggregation",
+ 0
+ ],
+ "base_type": "type/BigInteger",
+ "effective_type": "type/BigInteger",
+ "name": "count",
+ "fingerprint": {
+ "global": {
+ "distinct-count": 6,
+ "nil%": 0
+ },
+ "type": {
+ "type/Number": {
+ "min": 1,
+ "q1": 1,
+ "q3": 2.2964690541943424,
+ "max": 10,
+ "sd": 1.2898977338673652,
+ "avg": 1.8076923076923077
+ }
+ }
+ }
+ }
+ ],
+ "can_run_adhoc_query": true,
+ "table_id": 156,
+ "source_card_id": 104,
+ "collection_position": null,
+ "view_count": 1,
+ "archived": false,
+ "description": null,
+ "cache_invalidated_at": null,
+ "displayIsLocked": true
+ },
+ "data": {
+ "rows": [
+ [
+ 1,
+ "Grass",
+ "Poison",
+ 10
+ ],
+ [
+ 3,
+ "Water",
+ "Ground",
+ 5
+ ],
+ [
+ 1,
+ "Water",
+ "Psychic",
+ 4
+ ],
+ [
+ 3,
+ "Water",
+ "Dark",
+ 4
+ ],
+ [
+ 1,
+ "Fire",
+ "Flying",
+ 3
+ ],
+ [
+ 1,
+ "Water",
+ "Ice",
+ 3
+ ],
+ [
+ 2,
+ "Grass",
+ "Flying",
+ 3
+ ],
+ [
+ 3,
+ "Fire",
+ "Fighting",
+ 3
+ ],
+ [
+ 3,
+ "Fire",
+ "Ground",
+ 3
+ ],
+ [
+ 3,
+ "Grass",
+ "Dark",
+ 3
+ ],
+ [
+ 3,
+ "Water",
+ "Grass",
+ 3
+ ],
+ [
+ 4,
+ "Grass",
+ "Ice",
+ 3
+ ],
+ [
+ 7,
+ "Grass",
+ "Fairy",
+ 3
+ ],
+ [
+ 8,
+ "Grass",
+ "Dragon",
+ 3
+ ],
+ [
+ 1,
+ "Grass",
+ "Psychic",
+ 2
+ ],
+ [
+ 1,
+ "Water",
+ "Poison",
+ 2
+ ],
+ [
+ 2,
+ "Water",
+ "Electric",
+ 2
+ ],
+ [
+ 2,
+ "Water",
+ "Fairy",
+ 2
+ ],
+ [
+ 2,
+ "Water",
+ "Ground",
+ 2
+ ],
+ [
+ 3,
+ "Water",
+ "Flying",
+ 2
+ ],
+ [
+ 4,
+ "Fire",
+ "Fighting",
+ 2
+ ],
+ [
+ 4,
+ "Grass",
+ "Poison",
+ 2
+ ],
+ [
+ 5,
+ "Fire",
+ "Fighting",
+ 2
+ ],
+ [
+ 5,
+ "Grass",
+ "Fairy",
+ 2
+ ],
+ [
+ 5,
+ "Grass",
+ "Poison",
+ 2
+ ],
+ [
+ 5,
+ "Grass",
+ "Steel",
+ 2
+ ],
+ [
+ 5,
+ "Water",
+ "Fighting",
+ 2
+ ],
+ [
+ 5,
+ "Water",
+ "Flying",
+ 2
+ ],
+ [
+ 5,
+ "Water",
+ "Ghost",
+ 2
+ ],
+ [
+ 5,
+ "Water",
+ "Ground",
+ 2
+ ],
+ [
+ 5,
+ "Water",
+ "Rock",
+ 2
+ ],
+ [
+ 6,
+ "Fire",
+ "Flying",
+ 2
+ ],
+ [
+ 6,
+ "Fire",
+ "Normal",
+ 2
+ ],
+ [
+ 6,
+ "Water",
+ "Dark",
+ 2
+ ],
+ [
+ 7,
+ "Grass",
+ "Flying",
+ 2
+ ],
+ [
+ 7,
+ "Water",
+ "Bug",
+ 2
+ ],
+ [
+ 7,
+ "Water",
+ "Fairy",
+ 2
+ ],
+ [
+ 8,
+ "Fire",
+ "Bug",
+ 2
+ ],
+ [
+ 1,
+ "Fire",
+ "Dragon",
+ 1
+ ],
+ [
+ 1,
+ "Fire",
+ "Ghost",
+ 1
+ ],
+ [
+ 1,
+ "Grass",
+ "Dragon",
+ 1
+ ],
+ [
+ 1,
+ "Water",
+ "Dark",
+ 1
+ ],
+ [
+ 1,
+ "Water",
+ "Fighting",
+ 1
+ ],
+ [
+ 1,
+ "Water",
+ "Flying",
+ 1
+ ],
+ [
+ 2,
+ "Fire",
+ "Flying",
+ 1
+ ],
+ [
+ 2,
+ "Fire",
+ "Rock",
+ 1
+ ],
+ [
+ 2,
+ "Water",
+ "Dragon",
+ 1
+ ],
+ [
+ 2,
+ "Water",
+ "Flying",
+ 1
+ ],
+ [
+ 2,
+ "Water",
+ "Poison",
+ 1
+ ],
+ [
+ 2,
+ "Water",
+ "Psychic",
+ 1
+ ],
+ [
+ 2,
+ "Water",
+ "Rock",
+ 1
+ ],
+ [
+ 3,
+ "Grass",
+ "Dragon",
+ 1
+ ],
+ [
+ 3,
+ "Grass",
+ "Fighting",
+ 1
+ ],
+ [
+ 3,
+ "Grass",
+ "Flying",
+ 1
+ ],
+ [
+ 3,
+ "Grass",
+ "Poison",
+ 1
+ ],
+ [
+ 3,
+ "Water",
+ "Rock",
+ 1
+ ],
+ [
+ 4,
+ "Fire",
+ "Steel",
+ 1
+ ],
+ [
+ 4,
+ "Grass",
+ "Flying",
+ 1
+ ],
+ [
+ 4,
+ "Grass",
+ "Ground",
+ 1
+ ],
+ [
+ 4,
+ "Water",
+ "Dragon",
+ 1
+ ],
+ [
+ 4,
+ "Water",
+ "Flying",
+ 1
+ ],
+ [
+ 4,
+ "Water",
+ "Ground",
+ 1
+ ],
+ [
+ 4,
+ "Water",
+ "Steel",
+ 1
+ ],
+ [
+ 5,
+ "Fire",
+ "Psychic",
+ 1
+ ],
+ [
+ 5,
+ "Grass",
+ "Fighting",
+ 1
+ ],
+ [
+ 6,
+ "Fire",
+ "Psychic",
+ 1
+ ],
+ [
+ 6,
+ "Fire",
+ "Water",
+ 1
+ ],
+ [
+ 6,
+ "Grass",
+ "Fighting",
+ 1
+ ],
+ [
+ 7,
+ "Fire",
+ "Dark",
+ 1
+ ],
+ [
+ 7,
+ "Fire",
+ "Dragon",
+ 1
+ ],
+ [
+ 7,
+ "Fire",
+ "Flying",
+ 1
+ ],
+ [
+ 7,
+ "Fire",
+ "Ghost",
+ 1
+ ],
+ [
+ 7,
+ "Grass",
+ "Ghost",
+ 1
+ ],
+ [
+ 7,
+ "Grass",
+ "Steel",
+ 1
+ ],
+ [
+ 7,
+ "Water",
+ "Psychic",
+ 1
+ ],
+ [
+ 8,
+ "Water",
+ "Dragon",
+ 1
+ ],
+ [
+ 8,
+ "Water",
+ "Ice",
+ 1
+ ],
+ [
+ 8,
+ "Water",
+ "Rock",
+ 1
+ ]
+ ],
+ "cols": [
+ {
+ "database_type": "int8",
+ "semantic_type": "type/Category",
+ "table_id": 156,
+ "name": "generation",
+ "source": "breakout",
+ "field_ref": [
+ "field",
+ "generation",
+ {
+ "base-type": "type/BigInteger"
+ }
+ ],
+ "effective_type": "type/BigInteger",
+ "id": 1503,
+ "position": 5,
+ "visibility_type": "normal",
+ "display_name": "Generation",
+ "fingerprint": {
+ "global": {
+ "distinct-count": 8,
+ "nil%": 0
+ },
+ "type": {
+ "type/Number": {
+ "min": 1,
+ "q1": 2.1045160333142734,
+ "q3": 5.716989271844637,
+ "max": 8,
+ "sd": 2.234937326790694,
+ "avg": 4.034046692607004
+ }
+ }
+ },
+ "base_type": "type/BigInteger"
+ },
+ {
+ "database_type": "varchar",
+ "semantic_type": "type/Category",
+ "table_id": 156,
+ "name": "type_1",
+ "source": "breakout",
+ "field_ref": [
+ "field",
+ "type_1",
+ {
+ "base-type": "type/Text"
+ }
+ ],
+ "effective_type": "type/Text",
+ "id": 1475,
+ "position": 9,
+ "visibility_type": "normal",
+ "display_name": "Type 1",
+ "fingerprint": {
+ "global": {
+ "distinct-count": 18,
+ "nil%": 0
+ },
+ "type": {
+ "type/Text": {
+ "percent-json": 0,
+ "percent-url": 0,
+ "percent-email": 0,
+ "percent-state": 0,
+ "average-length": 5.281128404669261
+ }
+ }
+ },
+ "base_type": "type/Text"
+ },
+ {
+ "database_type": "varchar",
+ "semantic_type": "type/Category",
+ "table_id": 156,
+ "name": "type_2",
+ "source": "breakout",
+ "field_ref": [
+ "field",
+ "type_2",
+ {
+ "base-type": "type/Text"
+ }
+ ],
+ "effective_type": "type/Text",
+ "id": 1499,
+ "position": 10,
+ "visibility_type": "normal",
+ "display_name": "Type 2",
+ "fingerprint": {
+ "global": {
+ "distinct-count": 19,
+ "nil%": 0.4727626459143969
+ },
+ "type": {
+ "type/Text": {
+ "percent-json": 0,
+ "percent-url": 0,
+ "percent-email": 0,
+ "percent-state": 0,
+ "average-length": 2.9474708171206228
+ }
+ }
+ },
+ "base_type": "type/Text"
+ },
+ {
+ "database_type": "int8",
+ "semantic_type": "type/Quantity",
+ "name": "count",
+ "source": "aggregation",
+ "field_ref": [
+ "aggregation",
+ 0
+ ],
+ "effective_type": "type/BigInteger",
+ "aggregation_index": 0,
+ "display_name": "Count",
+ "base_type": "type/BigInteger"
+ }
+ ],
+ "native_form": {
+ "query": "SELECT \"source\".\"generation\" AS \"generation\", \"source\".\"type_1\" AS \"type_1\", \"source\".\"type_2\" AS \"type_2\", COUNT(*) AS \"count\" FROM (SELECT \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"_mb_row_id\" AS \"_mb_row_id\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"pokedex_number\" AS \"pokedex_number\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"name\" AS \"name\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"german_name\" AS \"german_name\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"japanese_name\" AS \"japanese_name\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"generation\" AS \"generation\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"status\" AS \"status\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"species\" AS \"species\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"type_number\" AS \"type_number\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"type_1\" AS \"type_1\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"type_2\" AS \"type_2\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"height_m\" AS \"height_m\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"weight_kg\" AS \"weight_kg\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"abilities_number\" AS \"abilities_number\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"ability_1\" AS \"ability_1\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"ability_2\" AS \"ability_2\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"ability_hidden\" AS \"ability_hidden\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"total_points\" AS \"total_points\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"hp\" AS \"hp\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"attack\" AS \"attack\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"defense\" AS \"defense\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"sp_attack\" AS \"sp_attack\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"sp_defense\" AS \"sp_defense\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"speed\" AS \"speed\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"catch_rate\" AS \"catch_rate\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"base_friendship\" AS \"base_friendship\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"base_experience\" AS \"base_experience\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"growth_rate\" AS \"growth_rate\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"egg_type_number\" AS \"egg_type_number\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"egg_type_1\" AS \"egg_type_1\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"egg_type_2\" AS \"egg_type_2\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"percentage_male\" AS \"percentage_male\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"egg_cycles\" AS \"egg_cycles\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"against_normal\" AS \"against_normal\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"against_fire\" AS \"against_fire\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"against_water\" AS \"against_water\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"against_electric\" AS \"against_electric\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"against_grass\" AS \"against_grass\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"against_ice\" AS \"against_ice\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"against_fight\" AS \"against_fight\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"against_poison\" AS \"against_poison\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"against_ground\" AS \"against_ground\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"against_flying\" AS \"against_flying\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"against_psychic\" AS \"against_psychic\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"against_bug\" AS \"against_bug\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"against_rock\" AS \"against_rock\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"against_ghost\" AS \"against_ghost\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"against_dragon\" AS \"against_dragon\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"against_dark\" AS \"against_dark\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"against_steel\" AS \"against_steel\", \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\".\"against_fairy\" AS \"against_fairy\" FROM \"csv_upload_data\".\"csv_upload_pokedex_20231202112932\") AS \"source\" WHERE ((\"source\".\"type_1\" = 'Water') OR (\"source\".\"type_1\" = 'Grass') OR (\"source\".\"type_1\" = 'Fire')) AND (\"source\".\"type_2\" IS NOT NULL) AND ((\"source\".\"type_2\" <> '') OR (\"source\".\"type_2\" IS NULL)) GROUP BY \"source\".\"generation\", \"source\".\"type_1\", \"source\".\"type_2\" ORDER BY \"count\" DESC, \"source\".\"generation\" ASC, \"source\".\"type_1\" ASC, \"source\".\"type_2\" ASC",
+ "params": null
+ },
+ "dataset": true,
+ "model": true,
+ "format-rows?": true,
+ "results_timezone": "America/Los_Angeles",
+ "results_metadata": {
+ "columns": [
+ {
+ "semantic_type": "type/Category",
+ "name": "generation",
+ "field_ref": [
+ "field",
+ "generation",
+ {
+ "base-type": "type/BigInteger"
+ }
+ ],
+ "effective_type": "type/BigInteger",
+ "id": 1503,
+ "visibility_type": "normal",
+ "display_name": "Generation",
+ "fingerprint": {
+ "global": {
+ "distinct-count": 8,
+ "nil%": 0
+ },
+ "type": {
+ "type/Number": {
+ "min": 1,
+ "q1": 2.1045160333142734,
+ "q3": 5.716989271844637,
+ "max": 8,
+ "sd": 2.234937326790694,
+ "avg": 4.034046692607004
+ }
+ }
+ },
+ "base_type": "type/BigInteger"
+ },
+ {
+ "semantic_type": "type/Category",
+ "name": "type_1",
+ "field_ref": [
+ "field",
+ "type_1",
+ {
+ "base-type": "type/Text"
+ }
+ ],
+ "effective_type": "type/Text",
+ "id": 1475,
+ "visibility_type": "normal",
+ "display_name": "Type 1",
+ "fingerprint": {
+ "global": {
+ "distinct-count": 18,
+ "nil%": 0
+ },
+ "type": {
+ "type/Text": {
+ "percent-json": 0,
+ "percent-url": 0,
+ "percent-email": 0,
+ "percent-state": 0,
+ "average-length": 5.281128404669261
+ }
+ }
+ },
+ "base_type": "type/Text"
+ },
+ {
+ "semantic_type": "type/Category",
+ "name": "type_2",
+ "field_ref": [
+ "field",
+ "type_2",
+ {
+ "base-type": "type/Text"
+ }
+ ],
+ "effective_type": "type/Text",
+ "id": 1499,
+ "visibility_type": "normal",
+ "display_name": "Type 2",
+ "fingerprint": {
+ "global": {
+ "distinct-count": 19,
+ "nil%": 0.4727626459143969
+ },
+ "type": {
+ "type/Text": {
+ "percent-json": 0,
+ "percent-url": 0,
+ "percent-email": 0,
+ "percent-state": 0,
+ "average-length": 2.9474708171206228
+ }
+ }
+ },
+ "base_type": "type/Text"
+ },
+ {
+ "display_name": "Count",
+ "semantic_type": "type/Quantity",
+ "field_ref": [
+ "aggregation",
+ 0
+ ],
+ "base_type": "type/BigInteger",
+ "effective_type": "type/BigInteger",
+ "name": "count",
+ "fingerprint": {
+ "global": {
+ "distinct-count": 6,
+ "nil%": 0
+ },
+ "type": {
+ "type/Number": {
+ "min": 1,
+ "q1": 1,
+ "q3": 2.2964690541943424,
+ "max": 10,
+ "sd": 1.2898977338673652,
+ "avg": 1.8076923076923077
+ }
+ }
+ }
+ }
+ ]
+ },
+ "insights": null
+ }
+ }
+]
diff --git a/frontend/src/metabase/visualizations/components/settings/ChartSettingFieldPicker.jsx b/frontend/src/metabase/visualizations/components/settings/ChartSettingFieldPicker.jsx
index 64ecf7a194ba39bc2a8f396fb4b1ea29081bde0c..8caa8715de0f8d1a02d668ae01f3cff871e1ad6b 100644
--- a/frontend/src/metabase/visualizations/components/settings/ChartSettingFieldPicker.jsx
+++ b/frontend/src/metabase/visualizations/components/settings/ChartSettingFieldPicker.jsx
@@ -8,8 +8,8 @@ import { getColumnKey } from "metabase-lib/v1/queries/utils/column-key";
import {
ChartSettingFieldPickerRoot,
FieldPickerColorPicker,
+ GrabberHandle,
SettingsButton,
- SettingsIcon,
} from "./ChartSettingFieldPicker.styled";
import ChartSettingSelect from "./ChartSettingSelect";
@@ -51,9 +51,10 @@ const ChartSettingFieldPicker = ({
<ChartSettingFieldPickerRoot
className={className}
disabled={options.length === 1 && options[0].value === value}
+ showDragHandle={showDragHandle}
data-testid="chartsettings-field-picker"
>
- {showDragHandle && <SettingsIcon name="grabber" noPointer noMargin />}
+ {showDragHandle && <GrabberHandle name="grabber" noPointer noMargin />}
{showColorPicker && seriesKey && (
<FieldPickerColorPicker
pillSize="small"
diff --git a/frontend/src/metabase/visualizations/components/settings/ChartSettingFieldPicker.styled.tsx b/frontend/src/metabase/visualizations/components/settings/ChartSettingFieldPicker.styled.tsx
index a8756d8a38598147a38d10be1e63d17f1d7c360a..28b5d1c5ab2f165f859e8436428cdc2e67a834ee 100644
--- a/frontend/src/metabase/visualizations/components/settings/ChartSettingFieldPicker.styled.tsx
+++ b/frontend/src/metabase/visualizations/components/settings/ChartSettingFieldPicker.styled.tsx
@@ -7,8 +7,28 @@ import { Icon } from "metabase/ui";
import { ChartSettingColorPicker } from "./ChartSettingColorPicker";
+export const SettingsButton = styled(Button)`
+ margin-left: 0.75rem;
+ padding: 0;
+
+ &:hover {
+ background-color: unset;
+ }
+`;
+
+export const GrabberHandle = styled(Icon)`
+ color: var(--mb-color-text-medium);
+ cursor: inherit;
+`;
+
+export const FieldPickerColorPicker = styled(ChartSettingColorPicker)`
+ margin-bottom: 0;
+ margin-left: 0.25rem;
+`;
+
interface ChartSettingFieldPickerRootProps {
disabled: boolean;
+ showDragHandle: boolean;
}
export const ChartSettingFieldPickerRoot = styled.div<ChartSettingFieldPickerRootProps>`
@@ -19,6 +39,7 @@ export const ChartSettingFieldPickerRoot = styled.div<ChartSettingFieldPickerRoo
padding-right: 1rem;
padding-left: 0.5rem;
background: var(--mb-color-bg-white);
+ cursor: ${props => (props.showDragHandle ? "grab" : "default")};
${Triggerable.Trigger} {
flex: 1;
@@ -52,33 +73,10 @@ export const ChartSettingFieldPickerRoot = styled.div<ChartSettingFieldPickerRoo
${SelectButton.Root}:disabled {
background-color: var(--mb-color-bg-white);
}
-`;
-
-interface SettingsIconProps {
- noPointer?: boolean;
- noMargin?: boolean;
-}
-
-export const SettingsButton = styled(Button)<SettingsIconProps>`
- margin-left: ${props => (props.noMargin ? "0" : "0.75rem")};
- padding: 0;
-
- &:hover {
- background-color: unset;
- }
-`;
-
-export const SettingsIcon = styled(Icon)<SettingsIconProps>`
- margin-left: ${props => (props.noMargin ? "0" : "0.75rem")};
- color: var(--mb-color-text-medium);
- cursor: ${props => (props.noPointer ? "inherit" : "pointer")};
&:hover {
- color: var(--mb-color-brand);
+ ${GrabberHandle} {
+ color: var(--mb-color-brand);
+ }
}
`;
-
-export const FieldPickerColorPicker = styled(ChartSettingColorPicker)`
- margin-bottom: 0;
- margin-left: 0.25rem;
-`;
diff --git a/frontend/src/metabase/visualizations/echarts/pie/model/index.ts b/frontend/src/metabase/visualizations/echarts/pie/model/index.ts
index e7947bd4f5b2d0deeddf50e1c373438c518b6c97..148ae5c3ff9dd6749048b345ee4bedd7d64c2297 100644
--- a/frontend/src/metabase/visualizations/echarts/pie/model/index.ts
+++ b/frontend/src/metabase/visualizations/echarts/pie/model/index.ts
@@ -128,14 +128,14 @@ function createOrUpdateNode(
name: formatter(dimensionValue),
value: metricValue,
displayValue: metricValue,
- normalizedPercentage: metricValue / total,
+ normalizedPercentage: 0, // placeholder
color,
visible: true,
column: colDesc.column,
rowIndex,
- isOther: false,
+ isOther: false, // placeholder
children: new Map(),
- startAngle: 0,
+ startAngle: 0, // placeholders
endAngle: 0,
};
parentNode.children.set(dimensionKey, dimensionNode);
@@ -144,7 +144,6 @@ function createOrUpdateNode(
// to it.
dimensionNode.value += metricValue;
dimensionNode.displayValue += metricValue;
- dimensionNode.normalizedPercentage = dimensionNode.value / total;
showWarning?.(unaggregatedDataWarningPie(colDesc.column).text);
}
@@ -152,16 +151,20 @@ function createOrUpdateNode(
return dimensionNode;
}
-function markOtherNodes(
+function calculatePercentageAndIsOther(
node: SliceTreeNode,
parent: SliceTreeNode,
settings: ComputedVisualizationSettings,
) {
+ const relativePercentage = node.displayValue / parent.displayValue;
+
+ node.normalizedPercentage = relativePercentage;
node.isOther =
- node.displayValue / parent.displayValue <
- (settings["pie.slice_threshold"] ?? 0) / 100;
+ relativePercentage < (settings["pie.slice_threshold"] ?? 0) / 100;
- node.children.forEach(child => markOtherNodes(child, node, settings));
+ node.children.forEach(child =>
+ calculatePercentageAndIsOther(child, node, settings),
+ );
}
function aggregateSlices(
@@ -434,7 +437,9 @@ export function getPieChartModel(
}
sliceTree.forEach(node =>
- node.children.forEach(child => markOtherNodes(child, node, settings)),
+ node.children.forEach(child =>
+ calculatePercentageAndIsOther(child, node, settings),
+ ),
);
// Only add "other" slice if there are slices below threshold with non-zero total
diff --git a/frontend/src/metabase/visualizations/visualizations/PieChart/DimensionsWidget.tsx b/frontend/src/metabase/visualizations/visualizations/PieChart/DimensionsWidget.tsx
index 7e12384e89387cc89e7c0e18d73ef32663fded97..b5294a8bca8bf62e1f5e8206445d4144c24a0b9d 100644
--- a/frontend/src/metabase/visualizations/visualizations/PieChart/DimensionsWidget.tsx
+++ b/frontend/src/metabase/visualizations/visualizations/PieChart/DimensionsWidget.tsx
@@ -16,6 +16,7 @@ import { useState } from "react";
import { t } from "ttag";
import { Sortable } from "metabase/core/components/Sortable";
+import GrabberS from "metabase/css/components/grabber.module.css";
import { Button, Text } from "metabase/ui";
import ChartSettingFieldPicker from "metabase/visualizations/components/settings/ChartSettingFieldPicker";
import { getOptionFromColumn } from "metabase/visualizations/lib/settings/utils";
@@ -128,12 +129,16 @@ export function DimensionsWidget({
const [draggedDimensionIndex, setDraggedDimensionIndex] = useState<number>();
const onDragStart = (event: DragStartEvent) => {
+ document.body.classList.add(GrabberS.grabbing);
+
setDraggedDimensionIndex(
dimensions.findIndex(d => d === String(event.active.id)),
);
};
const onDragEnd = (event: DragEndEvent) => {
+ document.body.classList.remove(GrabberS.grabbing);
+
setDraggedDimensionIndex(undefined);
const over = event.over;
diff --git a/frontend/src/metabase/visualizations/visualizations/PieChart/use-chart-events.ts b/frontend/src/metabase/visualizations/visualizations/PieChart/use-chart-events.ts
index 7b53ab6dc090cc52275e62249cc7cb1d59367af3..a4bf5b6747aef4658671f68771660915eca6eeda 100644
--- a/frontend/src/metabase/visualizations/visualizations/PieChart/use-chart-events.ts
+++ b/frontend/src/metabase/visualizations/visualizations/PieChart/use-chart-events.ts
@@ -9,10 +9,7 @@ import type {
EChartsTooltipModel,
EChartsTooltipRow,
} from "metabase/visualizations/components/ChartTooltip/EChartsTooltip";
-import {
- getPercent,
- getTotalValue,
-} from "metabase/visualizations/components/ChartTooltip/StackedDataTooltip/utils";
+import { getTotalValue } from "metabase/visualizations/components/ChartTooltip/StackedDataTooltip/utils";
import type { PieChartFormatters } from "metabase/visualizations/echarts/pie/format";
import type { PieChartModel } from "metabase/visualizations/echarts/pie/model/types";
import type { EChartsSunburstSeriesMouseEvent } from "metabase/visualizations/echarts/pie/types";
@@ -57,6 +54,7 @@ export const getTooltipModel = (
color: nodes.length === 1 ? slice.color : undefined,
formatter: formatters.formatMetric,
key: slice.key,
+ normalizedPercentage: slice.normalizedPercentage,
}));
const rowsTotal = getTotalValue(rows);
@@ -70,7 +68,7 @@ export const getTooltipModel = (
name: row.name,
values: [
row.formatter(row.value),
- formatPercent(getPercent(chartModel.total, row.value) ?? 0),
+ formatPercent(row.normalizedPercentage),
],
};
});
@@ -88,10 +86,7 @@ export const getTooltipModel = (
rows.length > 1
? {
name: t`Total`,
- values: [
- formatters.formatMetric(rowsTotal),
- formatPercent(getPercent(chartModel.total, rowsTotal) ?? 0),
- ],
+ values: [formatters.formatMetric(rowsTotal), formatPercent(1)],
}
: undefined,
};