VisActor VBI
  • Français

      • Démarrage rapide

      VSeed est un DSL (langage spécifique au domaine) standardisé pour l'analyse. Grâce à une orchestration élégante des données, il simplifie la visualisation de données.

      Installation

      Installez la bibliothèque principale vseed ainsi que les moteurs de rendu sous-jacents vchart et vtable.

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

      Enregistrement

      Enregistrez les capacités de graphiques et les thèmes au point d'entrée de l'application (une seule exécution suffit).

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

// Enregistrer tous les types de graphiques intégrés et les thèmes
registerAll()

      Construction

      Utilisez Builder pour convertir une VSeed DSL en configuration Spec rendable.

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

// 1. Définir l'intention d'analyse (DSL)
const vseed: VSeed = {
  chartType: 'line', // type de graphique
  dataset: [
    // source de données
    { date: '2019', profit: 10, sales: 100 },
    { date: '2020', profit: 30, sales: 200 },
    { date: '2021', profit: 30, sales: 300 },
    /* ... */
  ],
}

// 2. Générer la configuration de rendu (Spec)
const spec = Builder.from(vseed).build()

      Rendu

      Transmettez la Spec générée au composant VChart pour le rendu.

      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

      Concepts clés

      La philosophie de conception de VSeed consiste à séparer « ce que l'on veut analyser » (DSL) de « la manière de dessiner le graphique » (Spec).

      1. VSeed DSL

      L'objet de configuration principal se concentre sur les données et la sémantique métier. Vous n'avez pas à vous préoccuper des détails visuels comme les axes ou la disposition de la légende. VSeed fournit des spécifications visuelles prêtes à l'emploi selon le type de graphique.

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

      2. Builder

      Le moteur de transformation traduit la DSL concise en une Spec VChart/VTable détaillée. Il intègre de nombreux traitements de données et spécifications visuelles.

      // Le modèle Builder permet les appels chaînés ; davantage de traitements intermédiaires seront pris en charge à l'avenir
const spec = Builder.from(vseed).build()

      Avancé : analyse pivot

      La force de VSeed réside dans l'analyse multidimensionnelle. Il suffit d'ajouter des définitions de Dimensions et de Measures pour générer des graphiques pivot ou des graphiques combinés complexes.

      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 },
      ],
      // Définir les dimensions et les mesures
      dimensions: [{ id: 'date', alias: 'Date' }],
      measures: [
        { id: 'profit', alias: 'Profit', parentId: 'profit-group' },
        { id: 'sales', alias: 'Ventes', parentId: 'sales-group' },
      ],
    }

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

    // Exemple : interaction liée
    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