VisActor VBI
  • 한국어

      • 빠른 시작

      VSeed는 분석 영역을 위한 표준화된 DSL(도메인 특화 언어)입니다. 우아한 데이터 오케스트레이션을 통해 데이터 시각화를 단순하게 만듭니다.

      설치

      핵심 라이브러리 vseed와 하위 렌더링 엔진인 vchart, vtable을 설치합니다.

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

      등록

      애플리케이션 진입점에서 차트 기능과 테마를 등록합니다(한 번만 실행하면 됩니다).

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

// 모든 내장 차트 유형과 테마 등록
registerAll()

      빌드

      Builder를 사용해 VSeed DSL을 렌더링 가능한 Spec 구성으로 변환합니다.

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

// 1. 분석 의도(DSL) 정의
const vseed: VSeed = {
  chartType: 'line', // 차트 유형
  dataset: [
    // 데이터 소스
    { date: '2019', profit: 10, sales: 100 },
    { date: '2020', profit: 30, sales: 200 },
    { date: '2021', profit: 30, sales: 300 },
    /* ... */
  ],
}

// 2. 렌더링 구성(Spec) 생성
const spec = Builder.from(vseed).build()

      렌더링

      생성된 Spec을 VChart 컴포넌트에 전달하여 렌더링합니다.

      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

      핵심 개념

      VSeed의 설계 철학은 "무엇을 분석할 것인가"(DSL)와 "차트를 어떻게 그릴 것인가"(Spec)를 분리하는 것입니다.

      1. VSeed DSL

      데이터와 비즈니스 의미에 집중하는 핵심 구성 객체입니다. 축이나 범례 레이아웃 같은 시각적 세부 사항을 신경 쓸 필요가 없습니다. VSeed는 차트 유형에 따라 바로 사용할 수 있는 시각 규격을 제공합니다.

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

      2. Builder

      간결한 DSL을 상세한 VChart/VTable Spec으로 변환하는 엔진입니다. 많은 데이터 처리와 시각 규격이 내장되어 있습니다.

      // Builder 패턴은 체이닝 호출을 지원하며, 앞으로 더 많은 중간 처리를 지원할 예정입니다
const spec = Builder.from(vseed).build()

      고급: 피벗 분석

      VSeed의 강점은 다차원 분석에 있습니다. Dimensions와 Measures 정의만 추가하면 복잡한 피벗 차트나 조합 차트를 생성할 수 있습니다.

      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 },
      ],
      // 차원과 지표 정의
      dimensions: [{ id: 'date', alias: '날짜' }],
      measures: [
        { id: 'profit', alias: '이익', parentId: 'profit-group' },
        { id: 'sales', alias: '매출', parentId: 'sales-group' },
      ],
    }

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

    // 예: 상호작용 연동
    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