Orgchart.js

Permet de créer des jolis organigrammes dans SPIP. Ils sont très modulables et interactifs (drap & drop possibles, se plient et se déplient...).

Présentation

Ce plugin permet d’insérer des Organigrammes dans SPIP.

Ce plugin utilise la bibliothèque javascript https://dabeng.github.io/OrgChart/ crée par Xuebin Dong, alias dabeng. Cette librairie est un plugin de Jquery.

Installation

Le plugin s’installe comme n’importe quel plugin SPIP.

Une fois installé, vous pouvez consulter la page de démonstration spip.php?page=demo/orgchartjs. La description du plugin une fois installé et activé vous propose un lien pour ce faire.

Ce plugin nécessite :

Utiliser le modèle

Le plugin introduit un nouveau modèle pour insérer les organigrammes dans vos squelettes...
#MODELE{orgchartjs,param1=...,param2=...}
...ou vos contenus éditoriaux :
<orgchartjs|param1=...|param2=...>

Les démonstrations vous illustrent comment utiliser le modèle qui vous permet :

  • soit d’incorporer vos propres données pour construire votre organigramme,
  • soit de le construire à partir d’un objet (en ligne hiérarchique).

Utilisation du modèle avec vos données.

Le seul paramètre absolument nécessaire est data.

Le paramètre ocjs est nécessaire uniquement si vous utilisez plus d’un organigramme sur la page ; la valeur que vous donnerez au paramètre permettra de distinguer avec un identifiant unique l’organigramme.

Options communes
ArgumentValeurEffet
ocjs string Identifiant de l’organigramme (ou plus précisément du nom de la class de la DIV dans laquelle sera placée l’organigramme).
direction t2b|b2t|l2r|r2l Orientation de l’organigramme : t2b pour top to bottom, c’est à dire de haut en bas, ce qui est la valeur par défaut. b2t pour bottom to top c’est à dire de bas en haut. l2r pour left to right, soit de gauche à droite. r2l pour right to left, soit de droite à gauche.
visiblelevel integer Chiffre indiquant le niveau de développement de l’organigramme, sachant qu’il peut se déployer pour permettre la visualisation de niveau restant. Par défaut 999.

Dans un squelette :

#SET{data,'Emmanuel Macron/Président,Olivier Véran/Ministre/des Solidarités et de la Santé,Cabinet,Raymond LE MOIGN/Directeur de cabinet#Fabrice PERRIN/Conseiller spécial/chargé du secteur médico-social et de la réforme du grand-âge#Thomas DEROCHE/Directeur adjoint/chargé de la santé#Déborah de LIEME/Cheffe de Cabinet,Clément LACOIN/Conseiller/budgétaire et finances sociales#Laëtitia BUFFET/Conseillère#Grégory EMERY/Conseiller#Valérie MAZEAU-WOYNAR/Conseillère#Matthieu LECLERCQ/Conseiller/en charge de l’organisation des soins et chargé de l’exécution des réformes#Ségolène REDON/Conseillère/presse et communication#Margaux BONNEAU/Conseillère/parlementaire#Antoine TESNIERE/Conseiller/en charge du covid-19|Xavier SCHMITT/Plume'}
 
[(#MODELE{orgchartjs,data=#GET{data}})]

Dans un article :

<orgchartjs|ocjs=3|data=chef/Il sait tout,sous-chef/il croit tout savoir, sous-sous chef/il ne sait pas, cheffaillons1/il va demander#cheffaillon2/il va étudier la question#cheffaillons3/il hésite>
Formatage de vos données
SéparateurSigneObjectifEffet
Séparateur de ligne générationnelle , sépare un ascendant d’un descendant séparation des cases verticalement
Séparateur collatéral # sépare un frère ou une soeur séparation des cases sur la même ligne
Remontée hiérarchique ^ ascension d’un élément permet de sortir une case de sa ligne et de la remonter vers une autre ligne
Séparateur des informations d’une case / données du titre/données du texte en dessous permet de donner un contenu textuel aux cases
Options propres au modele utilisé avec des données
ArgumentValeurObjectif
data string Données nécessaires à la création de l’organigramme (voir le tableau précédent pour le formatage de vos données.
debug true|false permet d’afficher dans les titres des cases concernées le signe de la remontée hiérarchique (^)

Utilisation du modèle avec un objet.

Trois paramètres sont obligatoires. Le paramètre data doit être précisé pour indiquer que l’on transmet un objet. Les deux autres paramètres obligatoires sont ceux précisant l’objet et son identifiant, id_objet.

Dans un squelette :

#MODELE{orgchartjs,
  ocjs=2,
  data=objet,
  objet=article,
  id_objet=1
}

Dans un article :

<orgchartjs|ocjs=2|data=objet|objet=article|id_objet=1>
Options propres au modele utilisé avec des objets
ArgumentValeurEffet
data objet Il est obligatoire de préciser data comme étant de type objet
objet article, rubrique, chat/ etc. Il est obligatoire de préciser le nom de l’objet éditorial que vous allez utiliser
id_objet nombre entier Il est obligatoire de préciser l’identifiant unique de l’objet que vous allez manipuler

Le plugin peut utiliser le plugin Déclarer le parent qui vous permettra d’avoir une expérience enrichie de la hiérarchie des objects éditoriaux sous SPIP.

Erreurs fréquentes.

  1. Afficher plusieurs organigrammes dans la même page peut créer des conflits. Pensez à bien donner, dans ce cas, un identifiant unique à votre organigramme avec le paramètre ocjs.
  2. Pensez au mode debug lorsque vous construisez un organigramme complexe. Placé à true, votre organigramme s’affichera avec les signes ^ vous permettant de mieux comprendre les remontées des cases.
  3. Dans la définition par un #SET de vos données, méfiez-vous des apostrophes ’ (char 29). Si besoin, vous pouvez substituer le caractère par l’apostrophe incurvée ’ (char 226).

Amélioration de la partie privée

Une présentation graphique de la hierarchie est substituée par défaut à la présentation textuelle dans la partie privée de SPIP. Cette présentation reprend vos préférences de couleurs.

Configuration

Le plugin installe la librairie Chart Org et rend compatible les feuilles de styles de SPIP et la feuille de style du plugin pour Jquery.

Il vous est possible de paramétrer ces actions selon la partie, privée ou publique, du site.

La configuration permet aussi de désactiver le remplacement de la présentation graphique de la hiérarchie (prévue à la place de la présentation textuelle par défaut de SPIP).

Limitation

La librairie javascript Orgchartjs est monoparentale ; en d’autres termes, il n’est pas possible de donner à un enfant plus d’un parent. Cette restriction est très contraignante.

Pour contourner cette limitation, il est possible d’inverser l’organigramme (visuellement les enfants deviendront les parents), ce qui permettra d’en avoir autant de parents que vous le souhaitez.

Remerciements

  • Erational pour son inspirant plugin chartjs
  • Têtue pour la limpidité de ses commentaires sur ses lignes de code qui donne envie... de faire de même pour le bonheur des neurones de la communauté.
  • Maïeul sans qui il n’y aurait pas de diffusion de ce plugin à la communauté car il m’a expliqué avec patience notre nouveau Git... et m’a convaincu de faire un MODELE unique facile à utiliser.

C’est une belle famille que celle des écureuils ! Sentez vous libre de participer à l’amélioration de ce plugin.

updated on 19 July 2020

Discussion

Aucune discussion

Ajouter un commentaire

Who are you?
[Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom