using dataset + encode.itemGroupID doesnt seem te work for Drilldown pie chart

[slindersAmsterdam]

Version

52.2

Link to Minimal Reproduction

No response

Steps to Reproduce

The drilldown function doesnt work with encode. When 'data' gets activated, it does work.

---

var container = document.getElementById('main');
var chart = echarts.init(container);

const RV = [['met', 52],['zonder', 14]];
const RA = [['met', 6], ['zonder', 10]];
const GL = [['met', 6], ['zonder', 1]];
const vri = [ ['RV', 5, 'A'], ['RA', 2, 'B'], ['GL', 40, 'C'] ];

chart.setOption({
tooltip: {trigger: 'item'},
dataset: [
{
dimensions: ['status', 'waarde', 'groupId'],
source: vri
}
],

series: [
{
label: {show: false},
emphasis: {label: {show: true,fontSize: 40, fontWeight: 'bold'}
},
type: 'pie',
radius: ['35%', '65%'],
center: ['50%', '55%'],
id: "vri",
//----- itemgroupID doesn't seem to work in encode, drilldownfunction does not work
encode: {
itemName: 'status',
value: 'waarde',
tooltip: ['status', 'waarde','groupId'],
itemGroupID: 'groupId',
},

//----- groupID directly in data does work, drilldownfunction is active
// data: [
// { value: 5, groupId: 'A', name: 'RV' },
// {value: 2, groupId: 'B', name: 'RA'},
// {value: 40, groupId: 'C', name: 'GL'}]

},]}

);

const drilldownData = [
{ dataGroupId: 'A', data: RV},
{ dataGroupId: 'B', data: RA},
{ dataGroupId: 'C', data:GL}
];

mychart.on("click", function (event) {
console.log(event)
if (event.data) {
var subData = drilldownData.find(function (data) {
return data.dataGroupId === event.data.groupId;
});
if (!subData) {
return;
}
myChart.setOption({
series: {
type: "pie",
radius: ['35%', '65%'],
center: ['50%', '55%'],
id: "test",
dataGroupId: subData.dataGroupId,
data: subData.data.map(function (item) {
return {
value: item[1],
groupId: item[0],
name: item[0],
};
}),
universalTransition: {
enabled: true,
divideShape: "clone",
},
},
graphic: [
{
type: "text", left: 50, top: 20,
style: {text: "terug",fontSize: 18},
onclick: function () {myChart.setOption(option, true);
},
},
],
});}
});
// return option

Current Behavior

The drilldown function for this pie works when groupid is included directly in data:

  data: [
   {value: 5, groupId: 'A', name: 'RV' },
   {value: 2, groupId: 'B', name: 'RA'},
   {value: 40, groupId: 'C', name: 'GL'}]

It doesnt seem to work when dataset is used (instead of data) and groupId is included in encode:

  encode: {
    itemName: 'status',
    value: 'waarde',
    tooltip: ['status', 'waarde','groupId'],
    itemGroupID: 'groupId',
  },

Expected Behavior

The drilldown function should work based on a dataset.

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

I copied the code to codepen but I get an error:
'ReferenceError: mychart is not defined'
https://codepen.io/slindersAmsterdam/pen/yLqpbLX

[helgasoft]

It works - Demo Code
Another option is to use a dataset instead of drilldownData - take a look at "all datasets" example code in #18197.

[slindersAmsterdam]

Thanks a lot!

[slindersAmsterdam]

Thanks for the tip on the 'all datasets'. It works.
I tried to add an extra filter on an extra column. But without effect.
For the example I use a fixed value for this second filter.

The wanted outcome should give 2 values on a drilldown based on filter 1 (id) and filter 2 (fixed value). But filter 2 seems to have no effect, so I still get 4 values on the drilldown.

https://codepen.io/slindersAmsterdam/pen/OJwvLaM

[helgasoft]

You were very close to the solution. Take a look at piped trasformations.
Demo Code

[slindersAmsterdam]

Again, thanks a lot. I was close.. but now it works.