dashboard-patterns

Dashboard Patterns for Somali Dialect Classifier

Chart.js Integration

Pattern 1: Bar Chart Component

function DialectDistributionChart({ data }) {
  const chartRef = useRef(null);
  const chartInstance = useRef(null);

  useEffect(() => {
    if (!chartRef.current) return;

    // Destroy previous chart
    if (chartInstance.current) {
      chartInstance.current.destroy();
    }

    const ctx = chartRef.current.getContext('2d');

    chartInstance.current = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ['Northern', 'Southern', 'Central'],
        datasets: [{
          label: 'Records',
          data: [data.northern, data.southern, data.central],
          backgroundColor: ['#33BBEE', '#0077BB', '#66CCEE']  // Data colors
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: {
            display: false
          }
        }
      }
    });

    return () => {
      if (chartInstance.current) {
        chartInstance.current.destroy();
      }
    };
  }, [data]);

  return (
    <div className="chart-container" style={{ height: '300px' }}>
      <canvas ref={chartRef}></canvas>
    </div>
  );
}

Pattern 2: Line Chart with Time Series

function MetricsOverTimeChart({ timeSeriesData }) {
  const chartRef = useRef(null);

  useEffect(() => {
    if (!chartRef.current) return;

    const ctx = chartRef.current.getContext('2d');

    new Chart(ctx, {
      type: 'line',
      data: {
        labels: timeSeriesData.map(d => d.date),
        datasets: [{
          label: 'Accuracy',
          data: timeSeriesData.map(d => d.accuracy),
          borderColor: '#33BBEE',  // Data cyan
          backgroundColor: 'rgba(51, 187, 238, 0.1)',
          tension: 0.4
        }]
      },
      options: {
        responsive: true,
        plugins: {
          tooltip: {
            callbacks: {
              label: (context) => `Accuracy: ${(context.parsed.y * 100).toFixed(1)}%`
            }
          }
        }
      }
    });
  }, [timeSeriesData]);

  return <canvas ref={chartRef}></canvas>;
}