cognitedata/graph-viewer

Que fait graph-viewer ?

Intégrez le visualiseur de graphes réutilisable CDF (useGraphViewer) dans une application Flows en copiant le bundle de code local. Utilisez-le pour intégrer une visualisation de graphe, ajouter un graphe de connaissances, ou afficher les relations et instances du modèle de données CDF.

Prérequis

• Une application Flows existante
• Accès au bundle de code local du visualiseur de graphes

Installation

1. Copiez le bundle de code local (graph-viewer-bundle) dans le répertoire de votre application Flows.
2. Importez le hook useGraphViewer depuis le bundle :

import { useGraphViewer } from './graph-viewer-bundle';

3. Utilisez le hook dans votre composant React :

function MyGraphComponent() {
  const { graphContainer, graphData } = useGraphViewer({
    nodes: data.nodes,
    edges: data.edges,
  });

  return <div ref={graphContainer} style={{ width: '100%', height: '500px' }} />;
}

Configuration

Le hook useGraphViewer accepte les options suivantes :

Option	Type	Description
nodes	Array	Tableau des nœuds du graphe
edges	Array	Tableau des arêtes du graphe
options	Object	Options de configuration supplémentaires (optionnel)

Exemple d'utilisation

import React from 'react';
import { useGraphViewer } from './graph-viewer-bundle';

const sampleData = {
  nodes: [
    { id: '1', label: 'Asset A' },
    { id: '2', label: 'Asset B' },
  ],
  edges: [
    { source: '1', target: '2', label: 'connected' },
  ],
};

function App() {
  const { graphContainer } = useGraphViewer({
    nodes: sampleData.nodes,
    edges: sampleData.edges,
  });

  return (
    <div>
      <h1>Visualisation de graphe CDF</h1>
      <div ref={graphContainer} style={{ width: '100%', height: '600px' }} />
    </div>
  );
}

export default App;

Notes

• Assurez-vous que toutes les dépendances requises par le bundle sont installées (voir package.json du bundle).
• Ce visualiseur est optimisé pour les données de modèle CDF, mais peut être adapté à d'autres graphes.
• Pour des cas d'utilisation avancés (interactivité, filtrage), référez-vous à la documentation du bundle.