VisActor VBI
  • Bahasa Indonesia

      • Mulai Cepat

      VSeed adalah DSL (Domain Specific Language) terstandar untuk ranah analitik. Melalui orkestrasi data yang rapi, visualisasi data menjadi sederhana.

      Instalasi

      Instal pustaka inti vseed serta mesin rendering dasar vchart dan vtable.

      npm
      yarn
      pnpm
      bun
      deno
      npm install @visactor/vseed @visactor/vchart @visactor/vtable

      Registrasi

      Daftarkan kemampuan chart dan tema di entry point aplikasi (cukup dijalankan sekali).

      App.tsx
      import { registerAll } from '@visactor/vseed'

// Daftarkan semua tipe chart bawaan dan tema
registerAll()

      Build

      Gunakan Builder untuk mengubah VSeed DSL menjadi konfigurasi Spec yang dapat dirender.

      logic.ts
      import { VSeed, Builder } from '@visactor/vseed'

// 1. Definisikan tujuan analisis (DSL)
const vseed: VSeed = {
  chartType: 'line', // tipe chart
  dataset: [
    // sumber data
    { date: '2019', profit: 10, sales: 100 },
    { date: '2020', profit: 30, sales: 200 },
    { date: '2021', profit: 30, sales: 300 },
    /* ... */
  ],
}

// 2. Buat konfigurasi render (Spec)
const spec = Builder.from(vseed).build()

      Render

      Berikan Spec yang dihasilkan ke komponen VChart untuk dirender.

      import { useRef, useEffect } from 'react'
import VChart from '@visactor/vchart'
import { registerAll, VSeed, Builder } from '@visactor/vseed'

registerAll()

const Demo = () => {
  const containerRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    if (!containerRef.current) return

    const vseed: VSeed = {
      chartType: 'line',
      dataset: [
        { date: '2019', profit: 10, sales: 100 },
        { date: '2020', profit: 30, sales: 200 },
        { date: '2021', profit: 30, sales: 300 },
        { date: '2022', profit: 50, sales: 400 },
        { date: '2023', profit: 40, sales: 500 },
      ],
    }

    const spec = Builder.from(vseed).build()
    const vchart = new VChart(spec, { dom: containerRef.current })

    vchart.renderSync()
    return () => vchart.release()
  }, [])

  return <div ref={containerRef} style={{ height: 300 }} />
}

export default Demo

      Konsep Inti

      Filosofi desain VSeed adalah memisahkan "apa yang ingin dianalisis" (DSL) dari "bagaimana chart digambar" (Spec).

      1. VSeed DSL

      Objek konfigurasi inti yang berfokus pada data dan semantik bisnis. Anda tidak perlu memikirkan detail visual seperti sumbu atau tata letak legenda. VSeed menyediakan spesifikasi visual siap pakai berdasarkan tipe chart.

      const vseed: VSeed = {
  chartType: 'line',
  dataset: [
    { date: '2019', profit: 10, sales: 100 },
    { date: '2020', profit: 30, sales: 200 },
  ],
  dimensions: [{ id: 'date', alias: 'Tanggal' }],
}

      2. Builder

      Mesin transformasi yang menerjemahkan DSL ringkas menjadi Spec VChart/VTable yang terperinci. Di dalamnya tersedia banyak pemrosesan data dan spesifikasi visual bawaan.

      // Pola Builder mendukung pemanggilan berantai; lebih banyak proses antara akan didukung di masa mendatang
const spec = Builder.from(vseed).build()

      Lanjutan: Analisis Pivot

      Kekuatan VSeed ada pada analisis multidimensi. Cukup tambahkan definisi Dimensions dan Measures untuk menghasilkan pivot chart atau chart kombinasi yang kompleks.

      import { useRef, useEffect } from 'react'
import VChart from '@visactor/vchart'
import { register, PivotChart } from '@visactor/vtable'
import { registerAll, VSeed, Builder, ColorIdEncoding } from '@visactor/vseed'

register.chartModule('vchart', VChart)
registerAll()

const Demo = () => {
  const containerRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    if (!containerRef.current) return

    const vseed: VSeed = {
      chartType: 'line',
      dataset: [
        { date: '2019', profit: 10, sales: 100 },
        { date: '2020', profit: 30, sales: 200 },
        { date: '2021', profit: 30, sales: 300 },
        { date: '2022', profit: 50, sales: 400 },
        { date: '2023', profit: 40, sales: 500 },
      ],
      // Definisikan dimensi dan metrik
      dimensions: [{ id: 'date', alias: 'Tanggal' }],
      measures: [
        { id: 'profit', alias: 'Laba', parentId: 'profit-group' },
        { id: 'sales', alias: 'Penjualan', parentId: 'sales-group' },
      ],
    }

    const spec = Builder.from(vseed).build()
    const tableInstance = new PivotChart(containerRef.current, spec)

    // Contoh: interaksi tertaut
    tableInstance.on('legend_item_click', (args) => {
      tableInstance.updateFilterRules([
        {
          filterKey: ColorIdEncoding,
          filteredValues: args.value,
        },
      ])
    })

    return () => tableInstance.release()
  }, [])

  return <div ref={containerRef} style={{ height: 300 }} />
}

export default Demo