VisActor VBI
  • Deutsch

      • Schnellstart

      VSeed ist eine standardisierte DSL (domänenspezifische Sprache) für den Analysebereich. Durch elegante Datenorchestrierung macht sie Datenvisualisierung einfach.

      Installation

      Installiere die Kernbibliothek vseed sowie die zugrunde liegenden Rendering-Engines vchart und vtable.

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

      Registrierung

      Registriere Chart-Funktionen und Themes am Einstiegspunkt der Anwendung (nur einmal erforderlich).

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

// Alle integrierten Chart-Typen und Themes registrieren
registerAll()

      Erstellen

      Verwende Builder, um eine VSeed DSL in eine renderbare Spec-Konfiguration umzuwandeln.

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

// 1. Analyseabsicht definieren (DSL)
const vseed: VSeed = {
  chartType: 'line', // Chart-Typ
  dataset: [
    // Datenquelle
    { date: '2019', profit: 10, sales: 100 },
    { date: '2020', profit: 30, sales: 200 },
    { date: '2021', profit: 30, sales: 300 },
    /* ... */
  ],
}

// 2. Rendering-Konfiguration erzeugen (Spec)
const spec = Builder.from(vseed).build()

      Rendern

      Übergib die erzeugte Spec an die VChart-Komponente, um sie zu rendern.

      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

      Kernkonzepte

      Die Designphilosophie von VSeed trennt „was analysiert werden soll“ (DSL) von „wie der Chart gezeichnet wird“ (Spec).

      1. VSeed DSL

      Das zentrale Konfigurationsobjekt konzentriert sich auf Daten und fachliche Semantik. Du musst dich nicht um visuelle Details wie Achsen oder Legendenlayout kümmern. VSeed stellt je nach Chart-Typ sofort nutzbare visuelle Spezifikationen bereit.

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

      2. Builder

      Die Transformations-Engine übersetzt die knappe DSL in eine detaillierte VChart/VTable Spec. Sie enthält zahlreiche integrierte Datenverarbeitungen und visuelle Spezifikationen.

      // Das Builder-Muster erlaubt verkettete Aufrufe; künftig werden weitere Zwischenschritte unterstützt
const spec = Builder.from(vseed).build()

      Fortgeschritten: Pivot-Analyse

      Die Stärke von VSeed liegt in der mehrdimensionalen Analyse. Ergänze einfach Dimensions- und Measures-Definitionen, um komplexe Pivot-Charts oder kombinierte Charts zu erzeugen.

      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 },
      ],
      // Dimensionen und Kennzahlen definieren
      dimensions: [{ id: 'date', alias: 'Datum' }],
      measures: [
        { id: 'profit', alias: 'Gewinn', parentId: 'profit-group' },
        { id: 'sales', alias: 'Umsatz', parentId: 'sales-group' },
      ],
    }

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

    // Beispiel: interaktive Verknüpfung
    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