Charts.tsx

Go to the documentation of this file.

'use client';
 
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  LineElement,
  PointElement,
  ArcElement,
  Title,
  Tooltip,
  Legend,
  TimeScale,
} from 'chart.js';
import { Bar, Line, Doughnut, Pie } from 'react-chartjs-2';
 
// Register Chart.js components
ChartJS.register(
  CategoryScale,
  LinearScale,
  BarElement,
  LineElement,
  PointElement,
  ArcElement,
  Title,
  Tooltip,
  Legend,
  TimeScale
);
 
interface SalesHourlyChartProps {
  data?: Array<{ hour: string; sales: number; amount: number }>;
}
 
export function SalesHourlyChart({ data }: SalesHourlyChartProps) {
  // Demo data if no data provided
  const defaultData = [
    { hour: '9am', sales: 0, amount: 0 },
    { hour: '10am', sales: 0, amount: 0 },
    { hour: '11am', sales: 0, amount: 0 },
    { hour: '12pm', sales: 0, amount: 0 },
    { hour: '1pm', sales: 0, amount: 0 },
    { hour: '2pm', sales: 0, amount: 0 },
    { hour: '3pm', sales: 0, amount: 0 },
    { hour: '4pm', sales: 0, amount: 0 },
    { hour: '5pm', sales: 0, amount: 0 },
    { hour: '6pm', sales: 0, amount: 0 },
  ];
 
  const chartData = data && data.length > 0 ? data : defaultData;
 
  const config = {
    labels: chartData.map(item => item.hour),
    datasets: [
      {
        label: 'Sales Count',
        data: chartData.map(item => item.sales),
        backgroundColor: 'rgba(34, 197, 94, 0.8)',
        borderColor: 'rgba(34, 197, 94, 1)',
        borderWidth: 1,
        yAxisID: 'y',
      },
      {
        label: 'Sales Amount ($)',
        data: chartData.map(item => item.amount),
        backgroundColor: 'rgba(59, 130, 246, 0.8)',
        borderColor: 'rgba(59, 130, 246, 1)',
        borderWidth: 1,
        yAxisID: 'y1',
      },
    ],
  };
 
  const options = {
    responsive: true,
    plugins: {
      legend: {
        position: 'top' as const,
      },
      title: {
        display: true,
        text: 'Sales Activity by Hour',
      },
    },
    scales: {
      y: {
        type: 'linear' as const,
        display: true,
        position: 'left' as const,
        title: {
          display: true,
          text: 'Number of Sales',
        },
      },
      y1: {
        type: 'linear' as const,
        display: true,
        position: 'right' as const,
        title: {
          display: true,
          text: 'Sales Amount ($)',
        },
        grid: {
          drawOnChartArea: false,
        },
      },
    },
  };
 
  return <Bar data={config} options={options} />;
}
 
interface PaymentMethodsChartProps {
  data?: Array<{ method: string; amount: number; percentage: number }>;
}
 
export function PaymentMethodsChart({ data }: PaymentMethodsChartProps) {
  const defaultData = [
    { method: 'EFTPOS', amount: 1590, percentage: 65 },
    { method: 'Cash', amount: 612, percentage: 25 },
    { method: 'Mobile Pay', amount: 245, percentage: 10 },
  ];
 
  const chartData = data || defaultData;
 
  const config = {
    labels: chartData.map(item => `${item.method} (${item.percentage}%)`),
    datasets: [
      {
        data: chartData.map(item => item.amount),
        backgroundColor: [
          'rgba(34, 197, 94, 0.8)',
          'rgba(59, 130, 246, 0.8)',
          'rgba(168, 85, 247, 0.8)',
          'rgba(239, 68, 68, 0.8)',
          'rgba(245, 158, 11, 0.8)',
        ],
        borderColor: [
          'rgba(34, 197, 94, 1)',
          'rgba(59, 130, 246, 1)',
          'rgba(168, 85, 247, 1)',
          'rgba(239, 68, 68, 1)',
          'rgba(245, 158, 11, 1)',
        ],
        borderWidth: 1,
      },
    ],
  };
 
  const options = {
    responsive: true,
    plugins: {
      legend: {
        position: 'bottom' as const,
      },
      title: {
        display: true,
        text: 'Payment Methods Today',
      },
    },
  };
 
  return <Doughnut data={config} options={options} />;
}
 
interface TopProductsChartProps {
  data?: Array<{ name: string; quantity: number; value: number }>;
}
 
export function TopProductsChart({ data }: TopProductsChartProps) {
  const defaultData = [
    { name: 'HP 65 Black Ink', quantity: 12, value: 551.88 },
    { name: 'Canon PG-545 Black', quantity: 9, value: 350.91 },
    { name: 'Brother TN-2430 Toner', quantity: 4, value: 359.96 },
    { name: 'Epson 603XL Black', quantity: 7, value: 300.93 },
    { name: 'Samsung MLT-D111S', quantity: 3, value: 197.97 },
  ];
 
  const chartData = data || defaultData;
 
  const config = {
    labels: chartData.map(item => item.name.length > 20 ? item.name.substring(0, 20) + '...' : item.name),
    datasets: [
      {
        label: 'Quantity Sold',
        data: chartData.map(item => item.quantity),
        backgroundColor: 'rgba(34, 197, 94, 0.8)',
        borderColor: 'rgba(34, 197, 94, 1)',
        borderWidth: 1,
      },
    ],
  };
 
  const options = {
    responsive: true,
    indexAxis: 'y' as const,
    plugins: {
      legend: {
        display: false,
      },
      title: {
        display: true,
        text: 'Top Selling Products',
      },
    },
    scales: {
      x: {
        beginAtZero: true,
        title: {
          display: true,
          text: 'Quantity Sold',
        },
      },
    },
  };
 
  return <Bar data={config} options={options} />;
}
 
interface StorePerformanceChartProps {
  data?: Array<{ store: string; sales: number; amount: number }>;
}
 
export function StorePerformanceChart({ data }: StorePerformanceChartProps) {
  const defaultData = [
    { store: 'Main Store', sales: 45, amount: 1890.50 },
    { store: 'North Branch', sales: 32, amount: 1340.25 },
    { store: 'East Store', sales: 28, amount: 1150.75 },
  ];
 
  const chartData = data || defaultData;
 
  const config = {
    labels: chartData.map(item => item.store),
    datasets: [
      {
        label: 'Sales Amount ($)',
        data: chartData.map(item => item.amount),
        backgroundColor: 'rgba(59, 130, 246, 0.8)',
        borderColor: 'rgba(59, 130, 246, 1)',
        borderWidth: 1,
      },
    ],
  };
 
  const options = {
    responsive: true,
    plugins: {
      legend: {
        display: false,
      },
      title: {
        display: true,
        text: 'Store Performance Today',
      },
    },
    scales: {
      y: {
        beginAtZero: true,
        title: {
          display: true,
          text: 'Sales Amount ($)',
        },
      },
    },
  };
 
  return <Bar data={config} options={options} />;
}
 
interface TellerPerformanceChartProps {
  data?: Array<{ teller: string; sales: number; amount: number }>;
}
 
export function TellerPerformanceChart({ data }: TellerPerformanceChartProps) {
  const defaultData = [
    { teller: 'Admin', sales: 25, amount: 1250.50 },
    { teller: 'Sarah', sales: 22, amount: 1100.75 },
    { teller: 'Mike', sales: 18, amount: 890.25 },
    { teller: 'Jenny', sales: 15, amount: 720.00 },
  ];
 
  const chartData = data || defaultData;
 
  const config = {
    labels: chartData.map(item => item.teller),
    datasets: [
      {
        label: 'Number of Sales',
        data: chartData.map(item => item.sales),
        backgroundColor: 'rgba(168, 85, 247, 0.8)',
        borderColor: 'rgba(168, 85, 247, 1)',
        borderWidth: 1,
        yAxisID: 'y',
      },
      {
        label: 'Sales Amount ($)',
        data: chartData.map(item => item.amount),
        backgroundColor: 'rgba(34, 197, 94, 0.8)',
        borderColor: 'rgba(34, 197, 94, 1)',
        borderWidth: 1,
        yAxisID: 'y1',
      },
    ],
  };
 
  const options = {
    responsive: true,
    plugins: {
      legend: {
        position: 'top' as const,
      },
      title: {
        display: true,
        text: 'Teller Performance Today',
      },
    },
    scales: {
      y: {
        type: 'linear' as const,
        display: true,
        position: 'left' as const,
        title: {
          display: true,
          text: 'Number of Sales',
        },
      },
      y1: {
        type: 'linear' as const,
        display: true,
        position: 'right' as const,
        title: {
          display: true,
          text: 'Sales Amount ($)',
        },
        grid: {
          drawOnChartArea: false,
        },
      },
    },
  };
 
  return <Bar data={config} options={options} />;
}
 
interface SalesOverTimeChartProps {
  data?: Array<{ time: string; sales: number }>;
  timeframe?: 'hour' | 'day' | 'week' | 'month';
}
 
export function SalesOverTimeChart({ data, timeframe = 'hour' }: SalesOverTimeChartProps) {
  const defaultData = {
    hour: [
      { time: '9:00', sales: 3 },
      { time: '10:00', sales: 8 },
      { time: '11:00', sales: 12 },
      { time: '12:00', sales: 18 },
      { time: '13:00', sales: 15 },
      { time: '14:00', sales: 22 },
      { time: '15:00', sales: 19 },
      { time: '16:00', sales: 14 },
      { time: '17:00', sales: 9 },
    ],
    day: [
      { time: 'Mon', sales: 85 },
      { time: 'Tue', sales: 92 },
      { time: 'Wed', sales: 78 },
      { time: 'Thu', sales: 105 },
      { time: 'Fri', sales: 120 },
      { time: 'Sat', sales: 95 },
      { time: 'Sun', sales: 70 },
    ],
    week: [
      { time: 'Week 1', sales: 650 },
      { time: 'Week 2', sales: 720 },
      { time: 'Week 3', sales: 580 },
      { time: 'Week 4', sales: 690 },
    ],
    month: [
      { time: 'Jan', sales: 2800 },
      { time: 'Feb', sales: 3200 },
      { time: 'Mar', sales: 2900 },
      { time: 'Apr', sales: 3500 },
      { time: 'May', sales: 3100 },
      { time: 'Jun', sales: 2750 },
    ],
  };
 
  const chartData = data || defaultData[timeframe] || defaultData.hour;
 
  const config = {
    labels: chartData.map(item => item.time),
    datasets: [
      {
        label: 'Sales',
        data: chartData.map(item => item.sales),
        borderColor: 'rgba(34, 197, 94, 1)',
        backgroundColor: 'rgba(34, 197, 94, 0.1)',
        tension: 0.3,
        fill: true,
      },
    ],
  };
 
  const options = {
    responsive: true,
    plugins: {
      legend: {
        display: false,
      },
      title: {
        display: true,
        text: `Sales Over Time (${timeframe})`,
      },
    },
    scales: {
      y: {
        beginAtZero: true,
        title: {
          display: true,
          text: 'Number of Sales',
        },
      },
    },
  };
 
  return <Line data={config} options={options} />;
}
 
// Top Customers Chart
interface TopCustomersChartProps {
  data?: Array<{
    customer: string;
    sales: number;
    amount: number;
  }>;
}
 
export function TopCustomersChart({ data }: TopCustomersChartProps) {
  // Default demo data if none provided
  const defaultData = [
    { customer: 'ABC Office Supplies', sales: 12, amount: 1450.75 },
    { customer: 'City Print Services', sales: 8, amount: 980.50 },
    { customer: 'Local Business Co', sales: 6, amount: 720.25 },
    { customer: 'Quick Copy Shop', sales: 5, amount: 650.00 },
    { customer: 'School District #42', sales: 4, amount: 480.75 }
  ];
 
  const chartData = data && data.length > 0 ? data : defaultData;
 
  const config = {
    labels: chartData.map(item => item.customer),
    datasets: [
      {
        label: 'Sales Amount ($)',
        data: chartData.map(item => item.amount),
        backgroundColor: [
          'rgba(59, 130, 246, 0.8)',
          'rgba(16, 185, 129, 0.8)',
          'rgba(245, 158, 11, 0.8)',
          'rgba(239, 68, 68, 0.8)',
          'rgba(139, 92, 246, 0.8)'
        ],
        borderColor: [
          'rgba(59, 130, 246, 1)',
          'rgba(16, 185, 129, 1)',
          'rgba(245, 158, 11, 1)',
          'rgba(239, 68, 68, 1)',
          'rgba(139, 92, 246, 1)'
        ],
        borderWidth: 1,
      },
    ],
  };
 
  const options = {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      legend: {
        display: false,
      },
      tooltip: {
        callbacks: {
          label: function(context: any) {
            const customer = chartData[context.dataIndex];
            return [
              `Sales: ${customer.sales}`,
              `Amount: $${customer.amount.toFixed(2)}`
            ];
          },
        },
      },
    },
    scales: {
      y: {
        beginAtZero: true,
        ticks: {
          callback: function(value: any) {
            return '$' + value;
          },
        },
        title: {
          display: true,
          text: 'Sales Amount ($)',
        },
      },
      x: {
        ticks: {
          maxRotation: 45,
          minRotation: 45,
        },
        title: {
          display: true,
          text: 'Customer',
        },
      },
    },
  };
 
  return <Bar data={config} options={options} />;
}