ProcessingTimeHistogram.tsx

/**
 * Histogram showing distribution of processing times
 */
import { useMemo } from 'react';
import { Box, Typography, Paper, Stack } from '@mui/material';
import { Bar } from 'react-chartjs-2';
import type { HistogramData } from '../../types/simulation';

interface ProcessingTimeHistogramProps {
  histogramData: HistogramData;
}

export default function ProcessingTimeHistogram({ histogramData }: ProcessingTimeHistogramProps) {
  const chartData = useMemo(() => {
    const { bins, frequencies } = histogramData;

    // Create labels for bin ranges
    const labels = bins.slice(0, -1).map((binStart, i) => {
      const binEnd = bins[i + 1];
      return `${binStart.toFixed(0)}-${binEnd.toFixed(0)}`;
    });

    return {
      labels,
      datasets: [
        {
          label: 'Fréquence',
          data: frequencies,
          backgroundColor: 'rgba(156, 39, 176, 0.6)',
          borderColor: 'rgb(156, 39, 176)',
          borderWidth: 1,
        },
      ],
    };
  }, [histogramData]);

  const options = {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      legend: {
        display: false,
      },
      title: {
        display: true,
        text: 'Distribution des temps de traitement',
        font: {
          size: 16,
          weight: 600,
        },
      },
      tooltip: {
        callbacks: {
          title: (context: any) => {
            return `Intervalle: ${context[0].label} unités de temps`;
          },
          label: (context: any) => {
            return `Fréquence: ${context.parsed.y} requêtes`;
          },
        },
      },
    },
    scales: {
      x: {
        title: {
          display: true,
          text: 'Temps de traitement (unités)',
        },
        ticks: {
          maxRotation: 45,
          minRotation: 45,
        },
      },
      y: {
        title: {
          display: true,
          text: 'Fréquence',
        },
        beginAtZero: true,
        ticks: {
          precision: 0,
        },
      },
    },
  };

  return (
    <Paper elevation={2} sx={{ p: 3 }}>
      <Box sx={{ height: 400 }}>
        <Bar data={chartData} options={options} />
      </Box>

      <Stack direction="row" spacing={4} sx={{ mt: 3, justifyContent: 'center' }}>
        <Box>
          <Typography variant="caption" color="text.secondary">
            Min
          </Typography>
          <Typography variant="body2" fontWeight={600} fontFamily="monospace">
            {histogramData.min_value.toFixed(2)}
          </Typography>
        </Box>
        <Box>
          <Typography variant="caption" color="text.secondary">
            Moyenne
          </Typography>
          <Typography variant="body2" fontWeight={600} fontFamily="monospace">
            {histogramData.mean.toFixed(2)}
          </Typography>
        </Box>
        <Box>
          <Typography variant="caption" color="text.secondary">
            Écart-type
          </Typography>
          <Typography variant="body2" fontWeight={600} fontFamily="monospace">
            {histogramData.std_dev.toFixed(2)}
          </Typography>
        </Box>
        <Box>
          <Typography variant="caption" color="text.secondary">
            Max
          </Typography>
          <Typography variant="body2" fontWeight={600} fontFamily="monospace">
            {histogramData.max_value.toFixed(2)}
          </Typography>
        </Box>
      </Stack>

      <Typography variant="caption" color="text.secondary" sx={{ mt: 2, display: 'block' }}>
        Ce graphique montre la distribution des temps de traitement total pour toutes les requêtes
        complétées. La forme devrait refléter la distribution exponentielle caractéristique des systèmes M/M/1.
      </Typography>
    </Paper>
  );
}