legalgo-FE-reactrouter/app/components/ui/chart.tsx

import {
  Chart as ChartJS,
  ArcElement,
  Tooltip,
  Legend,
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  type ChartOptions,
  type ChartEvent,
  type ActiveElement,
} from 'chart.js'
import { useState } from 'react'
import { Bar, Doughnut, Pie } from 'react-chartjs-2'
ChartJS.register(
  ArcElement,
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend,
)

type HandleChartClick = (event: ChartEvent, elements: ActiveElement[]) => void

export const UiChartPie = () => {
  const data = {
    labels: [
      'Pidana',
      'Perdata',
      'Perceraian',
      'Surat Bisnis',
      'Surat Tanah',
      'Lainnya',
    ],
    datasets: [
      {
        data: [33.7, 13, 22.8, 9.3, 9.3, 21.2],
        backgroundColor: [
          '#FFB300',
          '#4CAF50',
          '#3F51B5',
          '#F44336',
          '#2196F3',
          '#FF9800',
        ],
        hoverOffset: 4,
      },
    ],
  }

  const options: ChartOptions<'pie'> = {
    maintainAspectRatio: true,
    responsive: false,
    plugins: {
      legend: {
        position: 'right',
        labels: {
          usePointStyle: true,
          pointStyle: 'circle',
          padding: 20,
        },
      },
    },
    layout: {
      padding: 0,
    },
  }

  return (
    <div className="h-[300px] w-full items-center justify-center rounded-lg bg-white p-5 px-4 py-6 text-center shadow-sm">
      <h2 className="text-xl font-bold">Top 5 Artikel</h2>
      <Pie
        height={225}
        width={450}
        data={data}
        options={options}
      />
    </div>
  )
}

export const UiChartBar = () => {
  const yearlyData = {
    labels: ['2022', '2023', '2024'],
    datasets: [
      {
        label: 'Total Sales',
        data: [800, 950, 1200],
        backgroundColor: '#1E3A8A',
      },
    ],
  }

  const monthlyData = {
    labels: [
      'Jan',
      'Feb',
      'Mar',
      'Apr',
      'May',
      'Jun',
      'Jul',
      'Aug',
      'Sep',
      'Oct',
      'Nov',
      'Dec',
    ],
    datasets: [
      {
        label: 'Monthly Sales',
        data: [70, 90, 750, 80, 90, 95, 75, 85, 78, 88, 95, 0],
        backgroundColor: '#2E2F7C',
      },
    ],
  }

  const [view, setView] = useState('month') // Default tampil bulanan
  const [selectedYear, setSelectedYear] = useState('')

  const handleChartClick: HandleChartClick = (event, elements) => {
    if (elements.length > 0 && view === 'year') {
      const clickedIndex = elements[0].index
      const year = yearlyData.labels[clickedIndex]
      setSelectedYear(year)
      setView('month')
    }
  }

  const handleBackToYear = () => {
    setView('year')
    setSelectedYear('')
  }

  const options = {
    responsive: true,
    maintainAspectRatio: false,
    onClick: handleChartClick,
    scales: {
      y: {
        beginAtZero: true,
        max: view == 'month' ? 100 : 1500,
        ticks: {
          stepSize: 25,
        },
      },
    },
  }

  return (
    <div className="rounded-lg bg-white p-6 shadow-sm">
      <div className="mb-4 flex items-center justify-between">
        <h2 className="text-xl font-bold">
          {view === 'year'
            ? 'Penjualan Tahunan'
            : `Penjualan Bulanan ${selectedYear || '2024'}`}
        </h2>
        {view === 'month' && (
          <button
            className="rounded-lg bg-gray-200 px-4 py-2"
            onClick={handleBackToYear}
          >
            Tahun
          </button>
        )}
      </div>

      <div>
        <Bar
          data={view === 'year' ? yearlyData : monthlyData}
          options={options}
        />
      </div>
    </div>
  )
}

export const ChartSubscription = () => {
  const data = {
    labels: ['Selesai', 'Belum Selesai'],
    datasets: [
      {
        data: [70, 30],
        backgroundColor: ['#1e3a8a', '#e5e7eb'],
        borderWidth: 0,
        cutout: '70%',
        circumference: 180,
        rotation: 270,
      },
    ],
  }

  const options: ChartOptions<'doughnut'> = {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      legend: {
        position: 'right',
        labels: {
          usePointStyle: true,
          pointStyle: 'circle',
          boxWidth: 10,
        },
      },
      tooltip: {
        enabled: false,
      },
    },
  }

  return (
    <div className="rounded-xl bg-white p-6 shadow-lg">
      <h2 className="mb-4 text-[20px]">Subscription Selesai</h2>
      <div className="flex items-center justify-between">
        <div style={{ height: 'auto', width: '100%' }}>
          <Doughnut
            data={data}
            options={options}
          />
        </div>
      </div>
    </div>
  )
}