Help with the heatmap

[mpvilasboas]

I'm creating a chart 24x7 where the y axis represent the days of the week and the x axis represent the hours of the day.

This is the graph I need:

image.png

But when communicating with API, I'm not getting it right.

I have 3 values, "hora" which means "hour of the day", "quantidadeVenda" which means "amount of sales" and "chave" which means "day of the week".

I'm not really finding where to add all this information. I understand it works as x, y and z, but don't really know how to translate it into my code.

const data = {
series: [
{
name: (valores ?? []).map((calor: any) => {
return calor.chave;
}),
data: (valores.detalhamento ?? []).map((calor: any) => {
return calor.quantidadeVenda;
}),
},
],
options: {
chart: {
height: 350,
type: 'heatmap',
toolbar: {
show: false,
},
zoom: {
enabled: false,
},
},
plotOptions: {
heatmap: {
colorScale: {
ranges: [
{
from: 0,
to: 20,
color: '#ffc9b8',
},
{
from: 20,
to: 40,
color: '#fcbba7',
},
{
from: 40,
to: 60,
color: '#fcaf97',
},
{
from: 60,
to: 80,
color: '#ffa327',
},
{
from: 80,
to: 100,
color: '#ff9777',
},
],
},
},
},
dataLabels: {
enabled: false,
},
legend: {
show: false,
},
xaxis: {
categories: (valores.detalhamento ?? []).map((calor: any) => {
return calor.hora;
}),
labels: {
style: {
colors: theme.palette.grey[isLight ? 800 : 300],
},
},
},
yaxis: {
labels: {
style: {
colors: theme.palette.grey[isLight ? 800 : 300],
},
},
},
},
} as any;

This is what I have right now, but it's not really working.

Please, I would really appreciate your help!