Intégration Vanilla JS

Graphic Walker fournit des fonctions embed* qui vous permettent d'utiliser tous les composants sans écrire de code React. Ces fonctions affichent les composants directement dans un élément DOM.

import {
  embedGraphicWalker,
  embedGraphicRenderer,
  embedPureRenderer,
  embedTableWalker,
} from '@kanaries/graphic-walker';

Fonctions

embedGraphicWalker

Affiche une instance complète de GraphicWalker dans un élément DOM.

embedGraphicWalker(element: HTMLElement, props?: ILocalVizAppProps | IRemoteVizAppProps | IGWProps): void

Si vous passez data et fields, le rendu se fait en mode lié aux données. Si vous ne passez aucune prop de données, il affiche un gestionnaire de sources de données intégré où les utilisateurs peuvent télécharger des fichiers CSV.

embedGraphicRenderer

Affiche une instance de GraphicRenderer.

embedGraphicRenderer(element: HTMLElement, props?: ILocalVizAppProps | IRemoteVizAppProps): void

embedPureRenderer

Affiche une instance de PureRenderer.

embedPureRenderer(element: HTMLElement, props: ILocalPureRendererProps | IRemotePureRendererProps): void

embedTableWalker

Affiche une instance de TableWalker.

embedTableWalker(element: HTMLElement, props?: ILocalTableProps | IRemoteTableProps): void

Utilisation avec des bundlers

import { embedGraphicWalker } from '@kanaries/graphic-walker';
 
const data = [
  { city: 'New York', population: 8336817, area: 302.6 },
  { city: 'Los Angeles', population: 3979576, area: 468.7 },
  { city: 'Chicago', population: 2693976, area: 227.3 },
];
 
const fields = [
  { fid: 'city', name: 'City', semanticType: 'nominal', analyticType: 'dimension' },
  { fid: 'population', name: 'Population', semanticType: 'quantitative', analyticType: 'measure' },
  { fid: 'area', name: 'Area (sq mi)', semanticType: 'quantitative', analyticType: 'measure' },
];
 
embedGraphicWalker(document.getElementById('app'), {
  data,
  fields,
  appearance: 'media',
});

Utilisation via CDN

Vous pouvez charger Graphic Walker via un CDN pour des prototypes rapides ou des pages statiques. Utilisez le build UMD :

<!DOCTYPE html>
<html>
<head>
  <title>Graphic Walker</title>
  <script src="https://unpkg.com/@kanaries/graphic-walker/dist/umd/graphic-walker.umd.js"></script>
</head>
<body>
  <div id="app" style="width: 100%; height: 100vh;"></div>
  <script>
    const data = [
      { product: 'Widget', q1: 100, q2: 150, q3: 130, q4: 200 },
      { product: 'Gadget', q1: 200, q2: 180, q3: 220, q4: 250 },
    ];
 
    const fields = [
      { fid: 'product', name: 'Product', semanticType: 'nominal', analyticType: 'dimension' },
      { fid: 'q1', name: 'Q1 Sales', semanticType: 'quantitative', analyticType: 'measure' },
      { fid: 'q2', name: 'Q2 Sales', semanticType: 'quantitative', analyticType: 'measure' },
      { fid: 'q3', name: 'Q3 Sales', semanticType: 'quantitative', analyticType: 'measure' },
      { fid: 'q4', name: 'Q4 Sales', semanticType: 'quantitative', analyticType: 'measure' },
    ];
 
    GraphicWalker.embedGraphicWalker(document.getElementById('app'), {
      data,
      fields,
    });
  </script>
</body>
</html>

Sans données (mode téléchargement de fichier)

Si vous appelez embedGraphicWalker sans data ni fields, il affiche l'expérience complète avec un gestionnaire de sources de données intégré. Les utilisateurs peuvent télécharger des fichiers CSV, gérer les jeux de données et créer des visualisations.

embedGraphicWalker(document.getElementById('app'));

Notes d'intégration avec les frameworks

Ces fonctions d'intégration fonctionnent avec n'importe quel framework -- Vue, Svelte, Angular ou du HTML simple. Montez-les dans un hook de cycle de vie :

Vue 3 :

<template>
  <div ref="gwContainer" style="width: 100%; height: 600px" />
</template>
 
<script setup>
import { ref, onMounted } from 'vue';
import { embedGraphicWalker } from '@kanaries/graphic-walker';
 
const gwContainer = ref(null);
 
onMounted(() => {
  embedGraphicWalker(gwContainer.value, { data, fields });
});
</script>

Svelte :

<script>
  import { onMount } from 'svelte';
  import { embedGraphicWalker } from '@kanaries/graphic-walker';
 
  let container;
 
  onMount(() => {
    embedGraphicWalker(container, { data, fields });
  });
</script>
 
<div bind:this={container} style="width: 100%; height: 600px;" />