Menggunakan Library Chart dengan Claude Code

Memanfaatkan Library Chart dengan Claude Code

Tampilan grafik sangat penting di dashboard dan layar laporan. Ada banyak library seperti Recharts, Chart.js, dan D3.js, dan dengan Claude Code, component chart yang memanfaatkan kekuatan masing-masing library bisa dibangun dengan cepat.

Pemilihan Library

> Ingin menampilkan chart di app React.
> Implementasikan line chart, bar chart, pie chart, dan area chart.
> Gunakan Recharts, dengan dukungan responsif dan dark mode.

• Recharts: Native React, deklaratif dan simpel
• Chart.js: Ringan, dukungan chart yang luas
• D3.js: Fleksibilitas maksimal, biaya belajar tinggi

Berbagai Chart dengan Recharts

// src/components/charts/SalesLineChart.tsx
import {
  LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip,
  Legend, ResponsiveContainer
} from 'recharts';

interface DataPoint {
  date: string;
  revenue: number;
  orders: number;
}

export function SalesLineChart({ data }: { data: DataPoint[] }) {
  return (
    <div className="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm">
      <h3 className="text-lg font-semibold mb-4 dark:text-white">Tren Penjualan</h3>
      <ResponsiveContainer width="100%" height={300}>
        <LineChart data={data}>
          <CartesianGrid strokeDasharray="3 3" stroke="#374151" />
          <XAxis dataKey="date" stroke="#9CA3AF" />
          <YAxis yAxisId="revenue" stroke="#3B82F6" />
          <YAxis yAxisId="orders" orientation="right" stroke="#10B981" />
          <Tooltip
            contentStyle={{
              backgroundColor: '#1F2937',
              border: 'none',
              borderRadius: '8px',
              color: '#fff',
            }}
          />
          <Legend />
          <Line yAxisId="revenue" type="monotone" dataKey="revenue" stroke="#3B82F6" name="Pendapatan" strokeWidth={2} dot={false} />
          <Line yAxisId="orders" type="monotone" dataKey="orders" stroke="#10B981" name="Pesanan" strokeWidth={2} dot={false} />
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
}

Bar Chart

// src/components/charts/CategoryBarChart.tsx
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Cell } from 'recharts';

const COLORS = ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6'];

interface CategoryData {
  name: string;
  value: number;
}

export function CategoryBarChart({ data }: { data: CategoryData[] }) {
  return (
    <div className="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm">
      <h3 className="text-lg font-semibold mb-4 dark:text-white">Penjualan per Kategori</h3>
      <ResponsiveContainer width="100%" height={300}>
        <BarChart data={data} layout="vertical">
          <CartesianGrid strokeDasharray="3 3" horizontal={false} />
          <XAxis type="number" />
          <YAxis type="category" dataKey="name" width={100} />
          <Tooltip />
          <Bar dataKey="value" radius={[0, 4, 4, 0]}>
            {data.map((_, index) => (
              <Cell key={index} fill={COLORS[index % COLORS.length]} />
            ))}
          </Bar>
        </BarChart>
      </ResponsiveContainer>
    </div>
  );
}

Pie Chart

// src/components/charts/DistributionPieChart.tsx
import { PieChart, Pie, Cell, Tooltip, ResponsiveContainer, Legend } from 'recharts';

const COLORS = ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899'];

interface SegmentData {
  name: string;
  value: number;
}

export function DistributionPieChart({ data, title }: { data: SegmentData[]; title: string }) {
  const total = data.reduce((sum, d) => sum + d.value, 0);

  return (
    <div className="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm">
      <h3 className="text-lg font-semibold mb-4 dark:text-white">{title}</h3>
      <ResponsiveContainer width="100%" height={300}>
        <PieChart>
          <Pie
            data={data}
            cx="50%"
            cy="50%"
            innerRadius={60}
            outerRadius={100}
            dataKey="value"
            label={({ name, value }) => `${name} ${((value / total) * 100).toFixed(0)}%`}
          >
            {data.map((_, index) => (
              <Cell key={index} fill={COLORS[index % COLORS.length]} />
            ))}
          </Pie>
          <Tooltip formatter={(v: number) => `${v.toLocaleString()} (${((v / total) * 100).toFixed(1)}%)`} />
          <Legend />
        </PieChart>
      </ResponsiveContainer>
    </div>
  );
}

Merakit Dashboard Chart

// src/app/dashboard/analytics/page.tsx
import { SalesLineChart } from '@/components/charts/SalesLineChart';
import { CategoryBarChart } from '@/components/charts/CategoryBarChart';
import { DistributionPieChart } from '@/components/charts/DistributionPieChart';

export default async function AnalyticsPage() {
  const [salesData, categoryData, channelData] = await Promise.all([
    fetchSalesData(),
    fetchCategoryData(),
    fetchChannelData(),
  ]);

  return (
    <div className="space-y-6">
      <h1 className="text-2xl font-bold dark:text-white">Dashboard Analitik</h1>
      <SalesLineChart data={salesData} />
      <div className="grid md:grid-cols-2 gap-6">
        <CategoryBarChart data={categoryData} />
        <DistributionPieChart data={channelData} title="Traffic per Channel" />
      </div>
    </div>
  );
}

Artikel Terkait

Untuk visualisasi data secara umum, lihat Implementasi Visualisasi Data, dan untuk pembangunan dashboard, lihat Pengembangan Dashboard Admin.

Referensi API bisa diperiksa di dokumentasi resmi Recharts (recharts.org).