Cet article montre notre processus de création de diagrammes à l'aide de React, SVG, et Facebook mise en page CSS bibliothèque. À Redimensionner, nous fournissons une interface utilisateur Web à nos clients pour configurer un serveur proxy de licence pour la communication entre nos nœuds de calcul et leurs serveurs de licences sur site. Un diagramme est un excellent moyen de montrer à nos utilisateurs comment ces serveurs communiquent entre eux.
Voici un exemple du diagramme que nous avons créé avec cette technique. Les contrôles servent simplement à montrer que React peut restituer le diagramme lorsque l'état change.

SVG est un bon choix pour créer des diagrammes dans React car il fait simplement partie du DOM. Cependant, la présentation des éléments SVG n'est pas aussi simple que l'utilisation de CSS avec HTML car SVG utilise son propre système de coordonnées. C'est là que Facebook mise en page CSS entre en jeu. Cela nous permet d'utiliser les CSS boîte souple modèle pour disposer nos éléments SVG.
Avec React, SVG et css-layout, nous sommes capables de :

• Modifier dynamiquement le diagramme en raison de changements dans les accessoires ou l'état d'un composant
• Itérer rapidement sur les changements d'exigences
• Localisez dans d'autres langues en utilisant notre méthode existante de localisation de l'interface utilisateur

Wireframing

Pour commencer à créer le diagramme, nous le filons en utilisant HTML avec les styles par défaut tels qu'écrits dans css-layout. README:

div, span { dimensionnement de la boîte : border-box ;  position : relative ;  affichage : flexible ;  direction flexible : colonne ;  aligner les éléments : étirer ;  flex-rétrécissement : 0 ;  align-content : flex-start ; bordure : 0 noir uni ; marge : 0 ; remplissage : 0 ; }

Le wireframe du diagramme en HTML ressemble à ceci :

Cela produit:

Des bordures ont été ajoutées à chaque div juste pour montrer leurs limites. Quelques points à garder à l'esprit :

• Nous ne devrions utiliser que les CSS-layout attributs pris en charge.
• Le positionnement du texte en SVG sera toujours un processus quelque peu manuel, notamment le centrage vertical.

Création de l'arborescence CSS à partir du wireframe

Dans CSS-layout, un nœud est juste un objet avec { style : { … }, enfants : [nœuds ] }. Le nœud racine est considéré comme l’arbre. En cours d'exécution calculateLayout() sur l'arborescence remplira tous ses nœuds avec un objet de mise en page contenant la largeur, la hauteur, le haut, la gauche, la droite et le bas. C'est ce que nous utiliserons pour positionner les éléments SVG.
La création de l'arborescence à partir du wireframe n'est qu'une simple lecture du code HTML et de l'identifiant.des s sont donnés à chaque nœud afin que nous puissions accéder au disposition propriété de chaque nœud par identifiant plus tard.

const calculateLayout = require('css-layout'); const range = require('lodash/utility/range'); fonction em(n) { return n * 12; } const numServeurs = 2; const nodeTree = { id : 'root', style : { alignItems : 'center' }, enfants : [ { id : 'rescaleBox', style : { padding : em(1), width : em(12) }, enfants : [ { id : 'rescaleLabel', style : { hauteur : em(1) } }, { id : 'computeNodes', style : { hauteur : em(3), marginBottom : em(2), marginTop : em(1) }, }, { id : 'licenseProxy', style : { hauteur : em(3) } }, ], }, { id : 'onPremiseBox', style : { marginTop : em(3), }, enfants : [ { id : 'onPremiseLabel', style : { hauteur : em(1), margin : em(1) } }, { id : 'onPremiseServers', style : { flexDirection : 'row', marginBottom : em(1), paddingLeft : em(0.5), paddingRight : em(0.5), }, enfants : range(0, numServers).map(i => { return { id : `server${i}`, style : { hauteur : em(6) , marginLeft : em(0.5), marginRight : em(0.5), largeur : em(8), }, }), }, ], }, ], } ; calculateLayout(nodeTree);

Rendu avec React

Nous avons chacun de nos nœuds rempli avec le disposition propriété. Faire ces disposition objets accessibles par id c'est assez simple :

function createLayoutMap(obj, map={}) { if (obj.id) { map[obj.id] = obj.layout; } if (obj.children) { for (let i = 0; i < obj.children.length; i++) { createLayoutMap(obj.children[i], map); } } retourner la carte ; } const l = createLayoutMap(nodeTree);

Le l L'objet contient toutes les informations de mise en page accessibles par l'identifiant donné à chaque nœud. Avec lui, nous pouvons désormais utiliser une combinaison de , et pour rendre le diagramme dans React :

render() { // ... tous les autres éléments ci-dessus ... const l = createLayoutMap(nodeTree); return ( {gettext('Rescale')} {gettext('Compute Nodes')} {gettext('License Proxy')} {licenseProxyIp} // ... et ainsi de suite, le reste est laissé en exercice au lecteur ); }

Comme vous pouvez le voir, nous utilisons le disposition propriétés calculées par css-layout pour positionner les éléments ou définir leurs largeurs et hauteurs. Choses à noter :

• Le top, bien, bas et à gauche propriétés dans le disposition les objets sont relatifs à son nœud parent. En SVG, on utilise afin que chaque enfant du L'élément est positionné par rapport à cette transformation.
• Le positionnement du texte est quelque peu manuel comme mentionné ci-dessus. Le texteAncre La propriété peut gérer le centrage horizontal, mais nous devons utiliser la propriété dy propriété avec quelques nombres magiques pour gérer le centrage vertical.

Cette technique a été inspirée par ceci blog récents qui utilise CSS-layout pour présenter les graphiques D3.