changes in graph
This commit is contained in:
parent
7cee26ccdb
commit
0011dc16f6
@ -318,72 +318,9 @@ const ProductChart = ({ product, establishmentId }) => {
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
// Hide the default legend since we're using a custom ColorLegend component
|
||||
legend: {
|
||||
position: 'top',
|
||||
align: 'center',
|
||||
labels: {
|
||||
usePointStyle: true,
|
||||
boxWidth: 12,
|
||||
boxHeight: 12,
|
||||
padding: 12,
|
||||
font: {
|
||||
size: 12,
|
||||
lineHeight: '16px'
|
||||
},
|
||||
generateLabels: function(chart) {
|
||||
const data = chart.data;
|
||||
if (data.labels.length && data.datasets.length) {
|
||||
return chart.data.datasets.map((dataset, i) => {
|
||||
const meta = chart.getDatasetMeta(i);
|
||||
let label = dataset.label || '';
|
||||
label = ' ' + label.trim();
|
||||
|
||||
// For Annual Capacity (dashed line)
|
||||
if (label.includes('Annual Capacity')) {
|
||||
return {
|
||||
text: label,
|
||||
fillStyle: 'transparent',
|
||||
hidden: !meta.visible,
|
||||
lineDash: [3, 3],
|
||||
lineWidth: 2,
|
||||
strokeStyle: dataset.borderColor,
|
||||
pointStyle: 'line',
|
||||
rotation: 0,
|
||||
datasetIndex: i
|
||||
};
|
||||
}
|
||||
|
||||
// For Quantity (solid line)
|
||||
if (label.includes('Quantity')) {
|
||||
return {
|
||||
text: label,
|
||||
fillStyle: 'transparent',
|
||||
hidden: !meta.visible,
|
||||
lineDash: [],
|
||||
lineWidth: 2,
|
||||
strokeStyle: dataset.borderColor,
|
||||
pointStyle: 'line',
|
||||
rotation: 0,
|
||||
datasetIndex: i
|
||||
};
|
||||
}
|
||||
|
||||
// For bar items (Previous, Current, Forecast) - square boxes
|
||||
return {
|
||||
text: label,
|
||||
fillStyle: dataset.backgroundColor,
|
||||
hidden: !meta.visible,
|
||||
lineWidth: 0,
|
||||
strokeStyle: 'transparent',
|
||||
pointStyle: 'rect',
|
||||
rotation: 0,
|
||||
datasetIndex: i
|
||||
};
|
||||
});
|
||||
}
|
||||
return [];
|
||||
}
|
||||
}
|
||||
display: false
|
||||
},
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
@ -438,7 +375,7 @@ const ProductChart = ({ product, establishmentId }) => {
|
||||
);
|
||||
}
|
||||
|
||||
// Color legend component
|
||||
// Color legend component - This is the only legend we want to show
|
||||
const ColorLegend = () => (
|
||||
<div className="flex flex-wrap gap-6 mb-4 p-3 bg-gray-50 rounded-md">
|
||||
<div className="flex items-center">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user