Breakdown

Introduction

Le composant Breakdown est une implémentation React permettant de visualiser des graphes avec des nœuds et des liens. Il est construit avec GoJS, une bibliothèque JavaScript pour la création de diagrammes et de graphes interactifs. Ce composant permet de personnaliser facilement l'apparence des nœuds, des liens, ainsi que les flèches, avec des options pour modifier les styles de ligne, de remplissage et d'interactions (comme le clic et le survol). Il prend en charge des mises en page horizontales, verticales, ou dynamiques, offrant ainsi une flexibilité pour différents types de représentations graphiques. Les fonctionnalités incluent également la gestion des événements pour les liens et les nœuds.

Integration

Simple

Cet exemple illustre un cas basique d'utilisation du composant Breakdown, où un seul nœud est affiché dans le diagramme. Ce type de configuration est idéal pour les tests initiaux ou pour représenter une simple entité dans un organigramme ou un diagramme de processus.

With Relation

Cet exemple montre comment connecter des nœuds dans un diagramme en définissant des relations via des liens. Cela permet de visualiser des hiérarchies, des flux de données, ou des connexions logiques entre entités.

import { Breakdown } from '@infrasoftbe/infrasoft-ui-components';

<React.Fragment>
  <Breakdown
    nodeDataArray = {[...]}
    linkDataArray = {[
      {
        from : 0,
        to : 1
      }
    ]}
  />
<React.Fragment>

Layouts

Horizontal

Ce layout organise les nœuds de manière horizontale, créant une disposition linéaire de gauche à droite. C’est utile pour représenter des flux d'information ou des processus se déroulant de manière séquentielle.

import { Breakdown } from '@infrasoftbe/infrasoft-ui-components';

<React.Fragment>
  <Breakdown
    nodeDataArray = {[...]}
    linkDataArray = {[...]}
    initOptions = {{ layout : 'horizontal' }}
  />
<React.Fragment>

Vertical

import { Breakdown } from '@infrasoftbe/infrasoft-ui-components';

<React.Fragment>
  <Breakdown
    nodeDataArray = {[...]}
    linkDataArray = {[...]}
    initOptions = {{ layout : 'vertical'}}
  />
<React.Fragment>

Dynamic

La disposition dynamique permet de définir un layout personnalisé en utilisant une fonction. Vous pouvez tirer parti de bibliothèques GoJS pour configurer des agencements complexes. Cet exemple montre un layout horizontal basé sur un arbre, configuré dynamiquement.

import { Breakdown } from '@infrasoftbe/infrasoft-ui-components';

<React.Fragment>
  <Breakdown
    nodeDataArray = {[...]}
    linkDataArray = {[...]}
    initOptions = {{
      layout : function( go ){
        // Horizontal layout
        return go.GraphObject.make(
          go.TreeLayout,
          {
            treeStyle: go.TreeLayout.StyleLastParents,
            angle: 0,
            layerSpacing: 80,
            alignment: go.TreeLayout.AlignmentEnd,
          }
        );
      }
    }}
  />
<React.Fragment>

Overview Map

import { Breakdown } from '@infrasoftbe/infrasoft-ui-components';

<React.Fragment>
  <Breakdown
    nodeDataArray = {[...]}
    linkDataArray = {[...]}
    initOptions = {{
      overview : true
    }}
  />
<React.Fragment>

Grid

import { Breakdown } from '@infrasoftbe/infrasoft-ui-components';

<React.Fragment>
  <Breakdown
    nodeDataArray = {[...]}
    linkDataArray = {[...]}
    initOptions = {{
      grid : { visible : true }
    }}
  />
<React.Fragment>

Dynamic

import { Breakdown } from '@infrasoftbe/infrasoft-ui-components';

<React.Fragment>
  <Breakdown
    nodeDataArray = {[...]}
    linkDataArray = {[...]}
    initOptions = {{
      grid : {
        visible : true,
        template : function( go ){

          let maker = go.GraphObject.make;

          return maker(
            go.Panel,
            "Grid",
            // Taille de chaque cellule
            {
              gridCellSize: new go.Size(25, 25)
            },
            // Lignes horizontales
            maker(go.Shape, "LineH", {
              strokeWidth: 1,
              stroke: "orange",
              strokeDashArray: [0, 2, 3, 0]
            }),
            // Lignes verticales
            maker(go.Shape, "LineV", {
              strokeWidth: 1,
              stroke: "darkred" // Couleur des lignes
            })
          )

        }
      }
    }}
  />
<React.Fragment>

Themes

import { Breakdown } from '@infrasoftbe/infrasoft-ui-components';

// createTheme

Breakdown.themes.set( 'light' , {
  name : 'light',
  colors : {

  },
  font : {

  }
} )

<React.Fragment>
  <Breakdown
    nodeDataArray = {[...]}
    linkDataArray = {[...]}
    initOptions = {{
      themes : [
        Breakdown.themes.get('light')
      ],
      defaultTheme : 'light'
    }}
  />
<React.Fragment/>

Legend

import { Breakdown } from '@infrasoftbe/infrasoft-ui-components';

<React.Fragment>
  <Breakdown
    nodeDataArray = {[...]}
    linkDataArray = {[...]}
    initOptions = {{ legend : true }}
  />
<React.Fragment/>

Listeners

Voici une explication des principaux événements disponibles :

Événement	Description
InitialAnimationStarting	Déclenché au début d'une animation initiale (lorsque le diagramme est affiché pour la première fois).
AnimationStarting	Déclenché à chaque début d'une animation (par exemple, pendant un changement de mise en page).
AnimationFinished	Déclenché une fois qu'une animation est terminée.
BackgroundSingleClicked	Déclenché lorsqu'un clic simple est effectué sur l'arrière-plan du diagramme (hors des nœuds et des liens).
BackgroundDoubleClicked	Déclenché lorsqu'un double-clic est effectué sur l'arrière-plan.
BackgroundContextClicked	Déclenché lorsqu'un clic droit (ou équivalent) est effectué sur l'arrière-plan.
ChangingSelection	Déclenché juste avant un changement de sélection. Permet d'annuler ou de personnaliser cette action.
ChangedSelection	Déclenché après un changement dans la sélection d'un ou plusieurs éléments.
ClipboardChanged	Déclenché lorsque le contenu du presse-papiers du diagramme est modifié (copie, coupe ou suppression).
ClipboardPasted	Déclenché après que des objets ont été collés depuis le presse-papiers dans le diagramme.
DocumentBoundsChanged	Déclenché lorsque les limites du diagramme sont modifiées (par exemple, ajout ou suppression de nœuds).
InitialLayoutCompleted	Déclenché après la fin de la disposition initiale du diagramme (après son affichage).
LayoutCompleted	Déclenché après qu'une mise en page ou un repositionnement est terminé.
LinkDrawn	Déclenché lorsqu'un nouveau lien est créé.
LinkRelinked	Déclenché lorsqu'un lien existant est reconfiguré pour pointer vers de nouveaux nœuds.
Modified	Déclenché lorsque le diagramme est modifié de quelque manière que ce soit (ajout, suppression, modification).
ObjectSingleClicked	Déclenché lorsqu'un objet du diagramme (nœud ou lien) est cliqué une fois.
ObjectDoubleClicked	Déclenché lorsqu'un objet est double-cliqué.
SelectionMoved	Déclenché lorsqu'un ou plusieurs objets sélectionnés sont déplacés.
TextEdited	Déclenché après qu'un utilisateur a modifié le texte dans un objet (par exemple, le texte d'un nœud ou d'un lien).
ViewportBoundsChanged	Déclenché lorsqu'il y a un changement dans les limites visibles du diagramme (défilement ou zoom).

ChangedSelection

Cet exemple utilise ChangedSelection pour afficher une alerte à chaque fois qu'un élément est sélectionné ou désélectionné dans le diagramme.

import { Breakdown } from '@infrasoftbe/infrasoft-ui-components';

<React.Fragment>
  <Breakdown
    nodeDataArray = {[...]}
    linkDataArray = {[...]}
    initOptions = {{
      isReadOnly : false,
      isEnabled : true,
      allowSelect : true,
      listeners : {
        ChangedSelection(){
          alert('Selection changed')
        }
      }
    }}
  />
<React.Fragment>

Nodes

Style

Dans cette section, nous abordons la personnalisation du style des nœuds dans un diagramme en utilisant l'option nodeHooks. Cette approche permet de définir des styles spécifiques pour les nœuds, y compris les couleurs, les bordures, et autres propriétés de style graphique.

import { Breakdown } from '@infrasoftbe/infrasoft-ui-components';

<React.Fragment>
  <Breakdown
    nodeDataArray = {[...]}
    linkDataArray = {[...]}
    initOptions = {{
      nodeHooks : {
        textColor : "white",
        style : {
          fill : "red",
          strokeWidth : 0,
          stroke : "black",
        }
      }
    }}
  />
<React.Fragment>

Dynamic

Dans cette section, nous explorons comment personnaliser les nœuds d'un diagramme en utilisant un panel dynamique. Le panel est un composant de type "table" où vous pouvez organiser différents éléments comme des formes et des textes à l’intérieur du nœud. Cette approche est très flexible et permet de personnaliser la structure du nœud à l'aide de GoJS via des panneaux (panels), des lignes (rows) et des colonnes (columns).

import { Breakdown } from '@infrasoftbe/infrasoft-ui-components';

<React.Fragment>
  <Breakdown
    nodeDataArray = {[...]}
    linkDataArray = {[...]}
    initOptions = {{
      isReadOnly : false,
      isEnabled : true,
      allowSelect : true,
      nodeHooks : {
        textColor : "white",
        style : {
          fill : "#f2f2f2",
          strokeWidth : 0,
        },
        panel( go ){

          let maker = go.GraphObject.make;

          return maker(go.Panel, "Table", {
              defaultAlignment: go.Spot.Top,
              stretch: go.GraphObject.Vertical,
              width: 250,
              click: () => alert('onNodeClick'),
            },
            maker(go.RowColumnDefinition, { row: 0, height: 40 }),
            maker(go.RowColumnDefinition, { row: 1, height: 40 }),
            maker(go.Panel, "Auto",
              {
                row: 0,
                column: 1,
                stretch: go.GraphObject.Vertical,
                alignment: go.Spot.Top,
                width: 300,
              },
              maker(go.Shape, "RoundedRectangle",
                {
                  parameter1: 1,
                  strokeWidth: 0,
                  fill: "#f2f2f2"
                }
              ),
              maker(
                go.TextBlock,
                {
                  stroke : "dimgray"
                },
                new go.Binding("text", "name")
              )
            ),
            maker(go.Panel, "Auto",
              {
                row: 1,
                column: 1,
                stretch: go.GraphObject.Vertical,
                alignment: go.Spot.Bottom,
                width: 300,
              },
              maker(go.Shape, "RoundedRectangle",
                {
                  name: 'content',
                  parameter1: 1,
                  strokeWidth: 0,
                  fill: "#f2f2f2"
                }
              ),
              maker(
                go.TextBlock,
                {
                  stroke : "dimgray",
                  text : "Text"
                }
              )
            )
          )
        }
      }
    }}
  />
<React.Fragment>

Hover stroke

Le hoverStroke est une fonctionnalité permettant d'ajouter un effet visuel de surbrillance (par exemple, une bordure colorée) autour des nœuds lorsqu'ils sont survolés avec la souris. Cela permet de rendre les nœuds plus interactifs et de guider l'utilisateur, en mettant en évidence un nœud spécifique lorsqu'il passe la souris dessus. Par défaut, cette fonctionnalité est désactivée.

import { Breakdown } from '@infrasoftbe/infrasoft-ui-components';

<React.Fragment>
  <Breakdown
    nodeDataArray = {[...]}
    linkDataArray = {[...]}
    initOptions = {{
      isEnabled : true,
      nodeHooks : { hoverStroke : true }
    }}
  />
<React.Fragment>

Hover stroke style

Le hoverStroke permet de personnaliser l'apparence de l'effet de surbrillance appliqué au nœud lorsque la souris le survole. Cette fonctionnalité offre une plus grande flexibilité en permettant de modifier non seulement la couleur du contour mais aussi des propriétés comme la largeur, le style de la ligne, et d'autres aspects visuels de la bordure. Cela permet d'adapter l'interface aux besoins esthétiques et ergonomiques de votre projet.

import { Breakdown } from '@infrasoftbe/infrasoft-ui-components';

<React.Fragment>
  <Breakdown
    nodeDataArray = {[...]}
    linkDataArray = {[...]}
    initOptions = {{
      isEnabled : true,
      nodeHooks : {
        hoverStroke : {
          stroke : 'royalblue',
          strokeDashArray : [],
          strokeWidth : 2
        }
      }
    }}
  />
<React.Fragment>

Listeners

Le paramètre nodeHooks se s'occupe en partie des interactions liées aux nœuds du diagramme, comme le clic, le survol ou la modification.

Événement	Description
addNode	Déclenché lorsqu'un nouveau nœud est ajouté au diagramme. Utilisez cet événement pour effectuer des actions personnalisées après l'ajout d'un nœud, comme définir des propriétés par défaut ou lier des données supplémentaires.
editNode	Déclenché lorsqu'un nœud est modifié. Cet événement peut être utilisé pour valider ou synchroniser les modifications avec une source de données externe.
enterNode	Déclenché lorsque le curseur de la souris entre dans la zone d'un nœud. Idéal pour afficher des surbrillances, des infobulles ou des animations visuelles.
leaveNode	Déclenché lorsque le curseur de la souris quitte la zone d'un nœud. Utilisez-le pour réinitialiser l'état visuel des nœuds ou cacher des éléments contextuels.
clickNode	Déclenché lorsqu'un nœud est cliqué. Utile pour gérer la sélection d'un nœud, ouvrir des formulaires de détails ou déclencher des actions spécifiques.

ClickNode

Cet exemple montre comment implémenter un gestionnaire d'événement pour capturer les clics sur les nœuds.

import { Breakdown } from '@infrasoftbe/infrasoft-ui-components';

<React.Fragment>
  <Breakdown
    nodeDataArray = {[...]}
    linkDataArray = {[...]}
    initOptions = {{
      isReadOnly : false,
      isEnabled : true,
      allowSelect : true,
      nodeHooks : {
        clickNode(){
          alert('onNodeClick');
        }
      }
    }}
  />
<React.Fragment>

import { Breakdown } from '@infrasoftbe/infrasoft-ui-components';
import { PencilAltIcon } from '@patternfly/react-icons';

<React.Fragment>
  <Breakdown
    nodeDataArray = {[...]}
    linkDataArray = {[...]}
    initOptions = {{
      nodeHooks : {
        contextMenu : [
          {
            title : 'editNode',
            icon : PencilAltIcon,
            action( this:go.Diagram , e: go.InputEvent, thisObj: go.GraphObject ){
              alert('editNode');
            }
          },
          { title : 'clearNode' },
          { title : 'removeNode' },
        ]
      }
    }}
  />
<React.Fragment>

Links

Style

La personnalisation des liens permet de modifier l'apparence des connexions entre les nœuds dans un diagramme. En ajustant le style des liens, vous pouvez influencer l'esthétique des lignes ou courbes qui relient les éléments. Cela peut être utile pour rendre vos diagrammes plus lisibles, intuitifs, ou visuellement plus attractifs, en fonction de l'objectif de l'application.

import { Breakdown } from '@infrasoftbe/infrasoft-ui-components';

<React.Fragment>
  <Breakdown
    nodeDataArray = {[...]}
    linkDataArray = {[...]}
    initOptions = {{
      linkHooks : {
        line : {
          strokeWidth : 3,
          stroke : 'red',
          fill : 'red'
        }
      }
    }}
  />
<React.Fragment>

Dynamic

La personnalisation dynamique des liens permet de définir des comportements plus flexibles et dynamiques pour les connexions entre les nœuds. Cette approche permet de créer des liens ayant des propriétés qui peuvent être calculées à la volée, plutôt que d'être statiquement définies à l'avance. Dans cet exemple, le style des liens est défini à l'aide de fonctions, offrant une grande souplesse.

import { Breakdown } from '@infrasoftbe/infrasoft-ui-components';

<React.Fragment>
  <Breakdown
    nodeDataArray = {[...]}
    linkDataArray = {[...]}
    initOptions = {{
      linkHooks : {
        line : function( go ){
          return go.GraphObject.make(
            go.Shape,
            {
              strokeWidth: 3,
              stroke: "royalblue",
            }
          );
        }
      }
    }}
  />
<React.Fragment>

Arrow

Dans cette configuration statique, nous utilisons l'option linkHooks.arrow pour personnaliser l'apparence de la flèche sur les liens. Ici, la flèche a un style spécifique avec une forme (triangle), une couleur et une largeur de bordure.

import { Breakdown } from '@infrasoftbe/infrasoft-ui-components';

<React.Fragment>
  <Breakdown
    nodeDataArray = {[...]}
    linkDataArray = {[...]}
    initOptions = {{
      linkHooks : {
        arrow : {
          toArrow: "Triangle",
          strokeWidth : 3,
          stroke : 'red',
          fill : 'red'
        }
      }
    }}
  />
<React.Fragment>

Dynamic

La configuration dynamique permet de personnaliser les flèches en fonction des besoins, en utilisant une fonction pour créer la flèche de manière plus flexible. Dans cet exemple, la flèche a une forme de Chevron, avec une couleur bleue et une épaisseur de ligne plus grande.

import { Breakdown } from '@infrasoftbe/infrasoft-ui-components';

<React.Fragment>
  <Breakdown
    nodeDataArray = {[...]}
    linkDataArray = {[...]}
    initOptions = {{
      linkHooks : {
        arrow : function( go ){
          return go.GraphObject.make(
            go.Shape,
            {
              toArrow: "Chevron",
              strokeWidth: 5,
              stroke: "royalblue",
              fill: "royalblue",
            }
          );
        }
      }
    }}
  />
<React.Fragment>

Listeners

Les listeners ou écouteurs d'événements permettent de définir des actions ou des comportements en réponse aux interactions avec les éléments d'un graphique, tels que les nœuds ou les liens. Dans ce cas, l'exemple montre comment ajouter un écouteur d'événements pour détecter un clic sur un lien et exécuter une action spécifique, comme afficher une alerte.

Click

L'exemple suivant montre comment ajouter un écouteur d'événements pour capturer un clic sur un lien entre deux nœuds. Lorsque l'utilisateur clique sur un lien, une alerte s'affiche, indiquant que le lien a été cliqué.

import { Breakdown } from '@infrasoftbe/infrasoft-ui-components';

<React.Fragment>
  <Breakdown
    nodeDataArray = {[...]}
    linkDataArray = {[...]}
    initOptions = {{
      linkHooks : {
        click(){
          alert('Link clicked');
        }
      }
    }}
  />
<React.Fragment>

Advance

Init

import { Breakdown } from '@infrasoftbe/infrasoft-ui-components';

<React.Fragment>
  <Breakdown
    nodeDataArray = {[
      { myKey : 0, name : 'Alpha' },
      { myKey : 1, name : 'Beta' },
      { myKey : 2, name : 'Gamma' }
    ]}
    modelData = {{
      nodeKeyProperty : "myKey",
      linkDataArray : [
        { from : 0, to : 1 },
        { from : 0, to : 2 }
      ]
    }}
    initOptions = {{ isEnabled : true }}
    initDiagram = {function( initOptions ){

      const maker = go.GraphObject.make;

      const diagram = maker(go.Diagram);

      // Configuration basique du diagramme
      diagram.initialContentAlignment = go.Spot.Center; // Centrer les nœuds
      diagram.layout = maker(go.TreeLayout);

      // Définition des modèles de nœuds
      diagram.nodeTemplate = maker(go.Node, "Auto")
      .add(
        maker(go.Shape, "RoundedRectangle", {
          fill: "lightgreen",
          stroke: null,
        })
      )
      .add(
        maker(go.TextBlock, {
          margin: 8,
          editable: false,
        }).bind("text", "name")
      );

      // Modèle de liens
      diagram.linkTemplate = maker(go.Link)
      .add(maker(go.Shape)) // Ligne de base
      .add(maker(go.Shape, { toArrow: "Standard" })); // Flèche

      // Setup de nodeKeyProperty et des links
      diagram.model.linkDataArray = this.props.modelData.linkDataArray;
      diagram.model.nodeKeyProperty = this.props.modelData.nodeKeyProperty;

      return () => diagram;

    }}
  />
<React.Fragment>

Utilities

BuildIn - Init

Default

import { Breakdown } from '@infrasoftbe/infrasoft-ui-components';

<React.Fragment>
  <Breakdown
    nodeDataArray = {[...]}
  />
<React.Fragment>

Default initialisation function

import { Breakdown } from '@infrasoftbe/infrasoft-ui-components';

<React.Fragment>
  <Breakdown
    nodeDataArray = {[...]}
    initDiagram = { Breakdown.default_initDiagram_function }
  />
<React.Fragment>

BuildIn - NodeTemplate

Default Node Breakdown Template

import { Breakdown } from '@infrasoftbe/infrasoft-ui-components';

<React.Fragment>
  <Breakdown
    nodeDataArray = {[
      {
        token : "PR0000",
        name : 'MyProject',
        type : 'project'
      }
    ]}
    initOptions = {{
      nodeHooks : { panel : Breakdown.default_node_template() }
    }}
  />
<React.Fragment>

BuildIn - NodeTemplate Utilities

External Excel Token Info

import { Breakdown } from '@infrasoftbe/infrasoft-ui-components';

<React.Fragment>
  <Breakdown
    nodeDataArray = {[
      {
        token : "PR0000",
        name : 'MyProject',
        type : 'project',
        meta : {
          external : {
            excel : { token : 'external-excel-token' }
          }
        }
      }
    ]}
    initOptions = {{
      nodeHooks : {
        panel : Breakdown.default_node_template(),
        spots : [
          Breakdown.default_externalExcelTokenInfo_template()
        ]
      },
    }}
  />
<React.Fragment>

External Excel Token Info - Customize

import { Breakdown } from '@infrasoftbe/infrasoft-ui-components';

<React.Fragment>
  <Breakdown
    nodeDataArray = {[
      {
        token : "PR0000",
        name : 'MyProject',
        type : 'project',
        meta : {
          external : {
            excel : { token : 'external-excel-token' }
          }
        }
      }
    ]}
    initOptions = {{
      nodeHooks : {
        panel : Breakdown.default_node_template(),
        spots : [
          Breakdown.default_externalExcelTokenInfo_template({ background : "red" })
        ]
      },
    }}
  />
<React.Fragment>

Node Edit button

import { Breakdown } from '@infrasoftbe/infrasoft-ui-components';

<React.Fragment>
  <Breakdown
    nodeDataArray = {[
      {
        token : "PR0000",
        name : 'MyProject',
        type : 'project',
        meta : {
          external : {
            excel : { token : 'external-excel-token' }
          }
        }
      }
    ]}
    initOptions = {{
      nodeHooks : {
        panel : Breakdown.default_node_template(),
        spots : [
          Breakdown.default_externalExcelTokenInfo_template(),
          Breakdown.default_node_editButton_spot(),
        ]
      },
    }}
  />
<React.Fragment>

Node Add button

import { Breakdown } from '@infrasoftbe/infrasoft-ui-components';

<React.Fragment>
  <Breakdown
    nodeDataArray = {[
      {
        token : "PR0000",
        name : 'MyProject',
        type : 'project',
        meta : {
          external : {
            excel : { token : 'external-excel-token' }
          }
        }
      }
    ]}
    initOptions = {{
      nodeHooks : {
        panel : Breakdown.default_node_template(),
        spots : [
          Breakdown.default_externalExcelTokenInfo_template(),
          Breakdown.default_node_addButton_spot(),
        ]
      },
    }}
  />
<React.Fragment>

import { Breakdown } from '@infrasoftbe/infrasoft-ui-components';

<React.Fragment>
  <Breakdown
    nodeDataArray = {[
      {
        token : "PR0000",
        name : 'MyProject',
        type : 'project'
      },
      {
        token : "DEL0000",
        name : 'MyDeliverable',
        type : 'deliverable'
      },
      {
        token : "ORD0000",
        name : 'MyOrder',
        type : 'order'
      }
    ]}
    linkDataArray = {[
      { from : "PR0000" , to : "DEL0000" },
      { from : "DEL0000" , to : "ORD0000" },
    ]}
    initOptions = {{
      nodeHooks : {
        panel : Breakdown.default_node_template(),
        spots : [
          Breakdown.default_externalExcelTokenInfo_template()
        ]
      },
    }}
  />
<React.Fragment>

Default Structure Breakdown Template

import { Breakdown } from '@infrasoftbe/infrasoft-ui-components';

<React.Fragment>
  <Breakdown
    nodeDataArray = {[
      {
        token : "STR0000",
        name : 'Structure',
        type : 'structure',
        meta : {
          external : {
            excel : { token : 'external-excel-token' }
          }
        }
      },
      {
        token : "STR0000-001",
        name : 'Child-1',
        child : "1",
        type : 'structure_child',
        meta : {
          external : {
            excel : { token : 'external-excel-token' }
          }
        }
      },
      {
        token : "STR0000-001-001",
        name : 'Child-1.1',
        child : "1.1",
        type : 'structure_child',
        meta : {
          external : {
            excel : { token : 'external-excel-token' }
          }
        }
      }
    ]}
    linkDataArray = {[
      { from : "STR0000" , to : "STR0000-001" },
      { from : "STR0000-001" , to : "STR0000-001-001" },
    ]}
    initOptions = {{
      nodeHooks : {
        panel : Breakdown.default_node_template(),
        spots : [
          Breakdown.default_externalExcelTokenInfo_template()
        ]
      },
    }}
  />
<React.Fragment>

BuildIn - LinkTemplate

import { Breakdown } from '@infrasoftbe/infrasoft-ui-components';

<React.Fragment>
  <Breakdown
    nodeDataArray = {[...]}
    linkDataArray = {[...]}
    initOptions = {{
      linkHooks : {
        line : Breakdown.default_link_template(),
        arrow : Breakdown.default_arrow_template()
      },
    }}
  />
<React.Fragment>

TestZone

Details

import { Breakdown } from '@infrasoftbe/infrasoft-ui-components';

<React.Fragment>
  <Breakdown
    nodeDataArray = {nodes}
    linkDataArray = {links}
    initOptions = {{ 
      isReadOnly : false,
      isEnabled : true,
      allowSelect : true,
      allowMove : true,
      allowZoom : true,
      allowHorizontalScroll : true,
      allowVerticalScroll : true,
      layout : 'vertical',
      overview : true,
      nodeHooks : { 
        panel : Breakdown.default_node_template(),
        spots : [
          Breakdown.default_externalExcelTokenInfo_template(),
          Breakdown.default_node_addButton_spot(),
          Breakdown.default_node_editButton_spot(),
        ]
      },
      linkHooks : { 
        line : Breakdown.default_link_template(),
        arrow : Breakdown.default_arrow_template()
      }
    }}
  />
<React.Fragment>

Introduction​

Integration​

Simple​

With Relation​

Layouts​

Horizontal​

Vertical​

Dynamic​

Overview Map​

Grid​

Dynamic​

Themes ​

Legend ​

Listeners​

ChangedSelection​

Nodes​

Style​

Dynamic​

Hover stroke​

Hover stroke style​

Listeners​

ClickNode​

Contextual Menu​

Links​

Style​

Dynamic​

Arrow​

Dynamic​

Listeners​

Click​

Advance​

Init​

Utilities​

BuildIn - Init ​

Default​

Default initialisation function​

BuildIn - NodeTemplate ​

Default Node Breakdown Template​

BuildIn - NodeTemplate Utilities ​

External Excel Token Info​

External Excel Token Info - Customize​

Node Edit button​

Node Add button​

Default Structure Breakdown Template​

BuildIn - LinkTemplate ​

TestZone​

Introduction

Integration

Simple

With Relation

Layouts

Horizontal

Vertical

Dynamic

Overview Map

Grid

Dynamic

Themes

Legend

Listeners

ChangedSelection

Nodes

Style

Dynamic

Hover stroke

Hover stroke style

Listeners

ClickNode

Contextual Menu

Links

Style

Dynamic

Arrow

Dynamic

Listeners

Click

Advance

Init

Utilities

BuildIn - Init

Default

Default initialisation function

BuildIn - NodeTemplate

Default Node Breakdown Template

BuildIn - NodeTemplate Utilities

External Excel Token Info

External Excel Token Info - Customize

Node Edit button

Node Add button

Default Structure Breakdown Template

BuildIn - LinkTemplate

TestZone