I have the following object structure:

date: 01.01.2022,
type: 1,
property: a
value: 0
},{
date: 01.01.2022,
type: 1,
property: b
value: 2
},{
date: 01.01.2022,
type: 2,
property: a
value: 10
},{
date: 02.01.2022,
type: 1,
property: a
value: 0
},{
date: 02.01.2022,
type: 1,
property: b
value: 2
},{
date: 02.01.2022,
type: 2,
property: a
value: 50
},
]

I want to generate a grouped stacked column-chart with this data, where the date defines the category on the x-axis, type represents a group and properties are represented by stacks.

let categoryNames = data.map(function (d) { return d.date });
let groupNames = data.map(function (d) { return d.type] });
let stackNames = data.map(function (d) { return d.property] });
x0.domain(categoryNames);
x1.domain(groupNames).rangeRound([0, x0.bandwidth()]);
[...]
g.append("g")
      .selectAll("g")
      .data(data)
      .enter().append("g")
      .attr("fill", function (d) { return z(d.key); })
      .selectAll("rect")
      .data(d3.stack().keys('property')(data))
      .enter().append("rect")
      .attr("x", function (d) { return x0(d.date]); })
      .attr("y", function (d) { return y(d['value']) })
      .attr("height", function (d) {
        return ((height - y(0)) > 0 ? (height - y(0)) : 0);
      })

I tried the solution from Kyros Koh mentioned here: How to make grouped stacked bar chart in d3js? https://jsfiddle.net/46em2svg/ but there is an error with .stackedBars with d3-version 5.x and I couldn't fix it.

d3.rollup() or d3.group() dont work on this object structure. Do you have any suggestions how I can implement a grouped and stacked column chart with this object structure or how I can redefine the object-structure without bloating the data-structure?

Thanks for your help in advance.