Memilih library chart dengan Claude Code

Mulai dari risiko produk

Memilih library chart dengan Claude Code bukan sekadar meminta Claude Code membuat layar lebih menarik. Tujuannya adalah memperbaiki interface nyata tanpa merusak conversion, keterbacaan, aksesibilitas, dan tampilan mobile. Di produksi, empty state, loading, error, keyboard focus, teks panjang, slot iklan, code block, dan posisi CTA sangat menentukan.

Baca juga claude code dashboard development, claude code data visualization, claude code accessibility. Referensi resmi: Claude Code docs, Recharts, Chart.js, D3, WCAG 2.2. Prompt untuk Claude Code harus menjelaskan tujuan, batas perubahan, use case, pitfall, dan cara verifikasi.

Prompt yang disarankan

Implementasikan perbaikan ini dengan perubahan aman paling kecil.
Hormati komponen, design token, dan routing yang sudah ada.
Cakup use case, pitfall, aksesibilitas, tampilan mobile, dan failure state.
Kembalikan kode yang bisa disalin serta review checklist.

Use case checklist

1. Landing page dan artikel, saat pembaca perlu menemukan langkah berikutnya tanpa merasa terganggu.
2. Dashboard SaaS dengan loading, empty data, error, dan success state.
3. Checkout, signup, dan konsultasi, saat tombol utama harus tetap jelas.
4. Review tim, ketika Claude Code harus memberi kode sekaligus kriteria pengecekan.

Kode implementasi

npm i recharts chart.js react-chartjs-2 d3
npm i -D @types/d3

"use client";

import {
  CartesianGrid,
  Line,
  LineChart,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from "recharts";

type Point = {
  date: string;
  revenue: number | null;
  orders: number;
};

const money = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  maximumFractionDigits: 0,
});

function normalize(points: Point[]) {
  return points
    .filter((point) => Number.isFinite(Date.parse(point.date)))
    .sort((a, b) => Date.parse(a.date) - Date.parse(b.date))
    .map((point) => ({
      ...point,
      label: new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric" }).format(
        new Date(point.date),
      ),
      revenue: point.revenue ?? 0,
      orders: Number.isFinite(point.orders) ? point.orders : 0,
    }));
}

export function RevenueChart({ data }: { data: Point[] }) {
  const rows = normalize(data);

  if (rows.length === 0) {
    return <p role="status">No chart data yet. Check the date range or filters.</p>;
  }

  return (
    <figure aria-labelledby="revenue-chart-title">
      <h2 id="revenue-chart-title">Revenue trend</h2>
      <ResponsiveContainer width="100%" height={320}>
        <LineChart data={rows} margin={{ top: 16, right: 24, bottom: 8, left: 8 }}>
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="label" />
          <YAxis tickFormatter={(value) => money.format(Number(value))} />
          <Tooltip formatter={(value) => money.format(Number(value))} />
          <Line type="monotone" dataKey="revenue" stroke="#2563eb" strokeWidth={3} dot={false} />
        </LineChart>
      </ResponsiveContainer>
      <figcaption>Data is sorted by date and null revenue is rendered as zero.</figcaption>
    </figure>
  );
}

Pitfall checklist

• Mengoptimalkan hanya untuk screenshot bisa merusak alur pengguna nyata.
• Mengandalkan warna atau gerakan saja akan menurunkan aksesibilitas.
• Tidak mengecek lebar 375px dapat membuat horizontal scroll.
• Mengabaikan data kosong, label panjang, jaringan lambat, dan reload memicu bug produksi.
• Membiarkan Claude Code mengubah file tidak terkait membuat review mahal.

Verifikasi

Setelah implementasi, minta Claude Code melakukan review pass terpisah. Minta daftar file berubah, risiko, browser check, dan manual check. Lalu buka mobile width dan cek overflow, scroll code block, CTA, focus style, dan teks bantuan.

Sudut monetisasi

Topik ini memengaruhi iklan, kartu produk, link konsultasi, tabel harga, dan lead form. Untuk menerapkannya di repository nyata, halaman training dan konsultasi Claude Code membantu membuat workflow berulang.

Catatan uji praktik

Saya mengujinya dalam tiga langkah: implementasi, review, dan pengecekan mobile. Diff lebih kecil daripada redesign besar, dan masalah layout serta aksesibilitas terlihat sebelum deploy.

Catatan review tambahan

• Bandingkan screenshot sebelum/sesudah dan cek CTA, iklan, teks, form, dan code block.
• Tanyakan ke Claude Code apa yang bisa dihapus, nama apa yang tidak cocok, dan asumsi apa yang berisiko.
• Sebelum deploy, uji mobile, desktop, keyboard, jaringan lambat, data kosong, dan reload.

Catatan review tambahan

• Bandingkan screenshot sebelum/sesudah dan cek CTA, iklan, teks, form, dan code block.
• Tanyakan ke Claude Code apa yang bisa dihapus, nama apa yang tidak cocok, dan asumsi apa yang berisiko.
• Sebelum deploy, uji mobile, desktop, keyboard, jaringan lambat, data kosong, dan reload.

Catatan review tambahan

• Bandingkan screenshot sebelum/sesudah dan cek CTA, iklan, teks, form, dan code block.
• Tanyakan ke Claude Code apa yang bisa dihapus, nama apa yang tidak cocok, dan asumsi apa yang berisiko.
• Sebelum deploy, uji mobile, desktop, keyboard, jaringan lambat, data kosong, dan reload.