87 lines
2.6 KiB
TypeScript
87 lines
2.6 KiB
TypeScript
|
|
import React from 'react';
|
|
import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer, Tooltip } from 'recharts';
|
|
|
|
interface ProcessChartProps {
|
|
processName: string;
|
|
data: {
|
|
name: string;
|
|
weight: number;
|
|
}[];
|
|
color: string;
|
|
}
|
|
|
|
export const ProcessChart: React.FC<ProcessChartProps> = ({ processName, data, color }) => {
|
|
const formatTooltip = (value: number, name: string) => {
|
|
return [`${value.toFixed(3)}t`, name];
|
|
};
|
|
|
|
// Se não há dados ou todos os valores são zero
|
|
if (!data || data.length === 0 || data.every(item => item.weight === 0)) {
|
|
return (
|
|
<div className="h-full flex flex-col">
|
|
<h4 className="text-[9px] font-semibold text-foreground mb-1 text-center">
|
|
{processName}
|
|
</h4>
|
|
<div className="flex-1 flex items-center justify-center">
|
|
<span className="text-[8px] text-muted-foreground">Sem dados</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
console.log(`Renderizando gráfico ${processName} com dados:`, data);
|
|
|
|
return (
|
|
<div className="h-full w-full flex flex-col">
|
|
<h4 className="text-[9px] font-semibold text-foreground mb-1 text-center truncate">
|
|
{processName}
|
|
</h4>
|
|
<div className="flex-1 w-full" style={{ minHeight: '60px' }}>
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<BarChart
|
|
data={data}
|
|
margin={{ top: 5, right: 5, left: 5, bottom: 20 }}
|
|
barCategoryGap="10%"
|
|
>
|
|
<XAxis
|
|
dataKey="name"
|
|
tick={{ fontSize: 6, fill: 'hsl(var(--foreground))' }}
|
|
interval={0}
|
|
angle={-45}
|
|
textAnchor="end"
|
|
height={15}
|
|
axisLine={false}
|
|
tickLine={false}
|
|
/>
|
|
<YAxis
|
|
tick={{ fontSize: 6, fill: 'hsl(var(--foreground))' }}
|
|
tickFormatter={(value) => `${value}t`}
|
|
width={20}
|
|
axisLine={false}
|
|
tickLine={false}
|
|
/>
|
|
<Tooltip
|
|
formatter={formatTooltip}
|
|
labelStyle={{ color: 'black', fontSize: '8px' }}
|
|
contentStyle={{
|
|
backgroundColor: 'rgba(0,0,0,0.8)',
|
|
border: 'none',
|
|
borderRadius: '4px',
|
|
fontSize: '8px',
|
|
padding: '4px 8px'
|
|
}}
|
|
/>
|
|
<Bar
|
|
dataKey="weight"
|
|
fill={color}
|
|
radius={[2, 2, 0, 0]}
|
|
maxBarSize={25}
|
|
/>
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|