Grafik tanpa membengkakkan bundel

Satu library grafik bisa lebih besar dari seluruh sisa JavaScript halamanmu. Pilihannya bukan library mana, tapi apakah kamu benar-benar membutuhkan satu.

Pertanyaan pertama: apakah butuh library?

Sparkline sebagai SVG murni di Astro

---
// src/components/Sparkline.astro — tanpa JavaScript sama sekali
interface Props { nilai: number[]; lebar?: number; tinggi?: number; }
const { nilai, lebar = 120, tinggi = 32 } = Astro.props;

const min = Math.min(...nilai);
const maks = Math.max(...nilai);
const rentang = maks - min || 1;

const titik = nilai
  .map((v, i) => {
    const x = (i / (nilai.length - 1)) * lebar;
    const y = tinggi - ((v - min) / rentang) * tinggi;
    return `${x.toFixed(1)},${y.toFixed(1)}`;
  })
  .join(" ");

const naik = nilai[nilai.length - 1]! >= nilai[0]!;
const persen = (((nilai.at(-1)! - nilai[0]!) / nilai[0]!) * 100).toFixed(2);
---
<svg width={lebar} height={tinggi} viewBox={`0 0 ${lebar} ${tinggi}`}
     role="img" aria-label={`Tren ${naik ? "naik" : "turun"} ${persen} persen`}>
  <polyline points={titik} fill="none" stroke-width="1.5"
            stroke={naik ? "#0a7d3f" : "#c0392b"}
            stroke-linejoin="round" stroke-linecap="round" />
</svg>

Dua puluh baris, nol kilobyte JavaScript, dirender di server, ikut di HTML yang di-cache, dan terbaca pembaca layar lewat aria-label. Untuk tabel berisi 300 emiten yang masing-masing punya sparkline, ini bedanya antara halaman ringan dan halaman yang membekukan ponsel.

Kalau memang butuh library: muat malas

// src/components/GrafikHarga.vue
<script setup lang="ts">
import { ref, onMounted, onUnmounted, shallowRef } from "vue";

const props = defineProps<{ kode: string }>();

const kanvas = ref<HTMLCanvasElement | null>(null);
const memuat = ref(true);
const galat = ref(false);

// shallowRef: instance Chart tidak perlu jadi reaktif dalam-dalam.
// Membungkusnya dengan ref() biasa membuat Vue menelusuri seluruh
// isi objeknya dan itu mahal sekali.
const chart = shallowRef<any>(null);

onMounted(async () => {
  try {
    // Dinamis: library-nya baru diunduh SEKARANG, bukan saat halaman dimuat.
    const [{ Chart, registerables }, data] = await Promise.all([
      import("chart.js"),
      fetch(`/api/harga/${props.kode}.json`, { signal: AbortSignal.timeout(5000) })
        .then((r) => { if (!r.ok) throw new Error(); return r.json(); }),
    ]);

    Chart.register(...registerables);

    chart.value = new Chart(kanvas.value!, {
      type: "line",
      data: {
        labels: data.tanggal,
        datasets: [{ data: data.harga, borderWidth: 1.5, pointRadius: 0 }],
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        animation: false,          // hemat CPU di ponsel
        plugins: { legend: { display: false } },
      },
    });
  } catch {
    galat.value = true;
  } finally {
    memuat.value = false;
  }
});

onUnmounted(() => chart.value?.destroy());
</script>

<template>
  <!-- Tinggi tetap SEBELUM grafik ada: tidak ada pergeseran tata letak -->
  <figure class="grafik" style="height: 320px; position: relative">
    <canvas ref="kanvas" v-show="!memuat && !galat"></canvas>

    <p v-if="memuat" class="tengah">Memuat grafik…</p>
    <p v-if="galat" class="tengah">
      Grafik tidak dapat dimuat. <a :href="`/perusahaan/${kode}/harga`">Lihat sebagai tabel</a>
    </p>
  </figure>
</template>

Tiga hal yang membuat perbedaan besar

Selalu sediakan versi non-grafik

<GrafikHarga client:visible kode={emiten.kode} />

<details class="data-mentah">
  <summary>Lihat data sebagai tabel</summary>
  <table>
    <caption>Harga penutupan {emiten.kode}, 30 hari terakhir</caption>
    <thead><tr><th>Tanggal</th><th>Penutupan</th></tr></thead>
    <tbody>
      {harga.map((h) => (
        <tr><td>{formatTanggal(h.tanggal)}</td><td>{h.tutup.toLocaleString("id-ID")}</td></tr>
      ))}
    </tbody>
  </table>
</details>

Tabel di dalam <details> ini melayani empat hal sekaligus: pembaca layar, pembaca tanpa JavaScript, mesin pencari — yang tidak bisa membaca canvas sama sekali — dan pembaca yang memang ingin angkanya. Untuk portal data, angka yang bisa disalin sering lebih berharga daripada grafiknya.