frendeitpt

chart-org

chart-org

Cette action permet, par exemple, de réaliser l'organigramme en pyramide d'une société.
Son utilisation peut être étendue à toutes les structures arborescentes.

🆙 chart_org : Affiche le graphe d'une organisation

Cliquer pour lire la documentation

syntaxe {up chart-org} liste UL / OL {/up chart-org}
version UP-2.2 license GNU/GPLv3 author Lomart credit script Responsive Hierarchical Organization Chart In Pure CSS de erinesullivan tags Widget
  • chart_org: aucun argument
  • line-color: couleur liaisons entre bloc
  • color-bg: couleur arrière-plan par défaut des blocs
  • color-text: couleur par défaut des textes
  • border: bordure (outline) par défaut des blocs. ex: 1px red solid
  • radius: arrondi des blocs. border doit être none
  • color-bg-*: couleur des blocs de niveau 1 à 6
  • color-text-*: couleur des blocs de niveau 1 à 6
  • border-*: bordure (outline) des blocs de niveau 1 à 6. ex: 1px red solid
  • class: classe(s) pour bloc
  • style: style inline pour bloc
  • css-head (base-css): style ajouté dans le HEAD de la page

    le principe

    Pour obtenir le diagramme ci-contre, il suffit de saisir la structure sous la forme d'une liste.

    L'action gère 6 niveaux d'inclusion.

    Il est possible d'utiliser des listes à puces (UL) ou numérotées (OL) et même un mélange des 2 types.

    La représentation s'adapte aux petits écrans.
    Redimensionnez votre navigateur pour le tester.
    1. niveau 1
      1. niveau 2 A
        1. niveau 3 A
          1. niveau 4 A
            1. niveau 5 A
              1. niveau 6 A
      2. niveau 2 B
        1. niveau 3 B1
        2. niveau 3 B2

     

    un organigramme


    1. Jean MOREL
      Président Directeur Général


      1. Grégoire LANGLOIS
        Directeur technique

        1. Yves-Marc JULIEN
          Responsable production
          1. Chef service A
            1. Chef d'équipe A1
              1. Resp A1.1
          2. Chef service B
          3. Chef service C

      2. Lucy PINEAU
        Directrice marketing et ventes

        1. Virginie BARON
          Assistante marketing

        2. Pierre MATHIEU
          Responsable des ventes

          1. Frank RENAULT
            Commercial zone nord

          2. Margaux DEVAUX

            Commerciale zone est

          3. Tristan COSTA

            Commercial zone sud

          4. Sabine COUTURIER

            Commerciale zone ouest

      3. Maurice PERRIER

        Directeur administratif et financier

        1. Audrey GALLET
          Chef comptable

    Pour réaliser cet organigramme, il suffit de créer une structure de liste UL ou OL sur 6 niveaux maximum.

    Il est important que toutes les données pour une personne soient dans la même balise LI.
    Avec un éditeur wysiwyg, utiliser la combinaison de touches MAJ+ENTER pour créer un saut de ligne simple.

    {up chart-org}
    <ol>
      <li>
          <img src="/images/actions-demo/chart-org/jean-morel.jpg">
          <br><strong>Jean MOREL</strong>
          <br>Président Directeur Général
      <ol>
          <li>
              <img src="/images/actions-demo/chart-org/gregoire-langlois.jpg">
              <br><strong>Grégoire LANGLOIS</strong>
              <br>Directeur technique
          </li>
    ...
    {/up chart-org

    Note : les photos des personnes "imaginaires" ont été générées à l'aide du site thispersondoesnotexist.com

    Personnalisations

    Nous utilisons la représentation de l'arborescence des fichiers de UP pour montrer les différentes méthodes pour adapter l'organigramme à ses besoins.
    Une explication détaillée est fournie après l'exemple.


    1. up
      : dossier racine dans plugins/content
      1. FICHIERS PRINCIPAUX
        1. up.php.php
          script principal du plugin
        2. upAction.php
          classe parente pour les actions
        3. up.xml
          manifest pour l'installation
        4. up_install.php
          script pour préserver les fichiers de configuration lors des mises à jour
        5. dico.ini
          définition des équivalences des termes utilisés pour construire dico.json. (préservé lors mises à jour.)
        6. dico.json
          Equivalences des termes.
          construit par UP avec {up upactionslist | make-dico}.
          Ne jamais modifier directement ce fichier
        7. changelog.md
          journal des modifications
      2. actions
        Contient les dossiers des actions
        1. _example
          dossier d'une action modèle avec toutes les options.
          1. _example.php
            script de l'action
          2. xxx.js, xxx.css, xxx.scss, ...
            les ressources pour le script de l'action.
            Selon vos préférences, elles peuvent être dans des sous-dossiers. La seule contrainte est que les fichiers SCSS et CSS soient dans le même sous-dossier pour être pris en compte lors de la génération des CSS.
          3. index.html
          4. custom
            dossier des personnalisations.
            Le contenu de ce fichier n'est jamais modifié.
            1. prefs.ini.dist
              fichier modèle pour créer votre fichier prefs.ini
            2. prefs.ini
              le fichier contenant vos préférences
            3. info.ini.dist, info.txt.dist
              fichier modèle pour créer vos fichiers d'informations utilisées par le script
            4. info.ini, info.txt
              le fichier contenant vos informations
            5. xxx.js, xxx.css, xxx.scss, ...
              les versions spécifiques au site des fichiers de l'action.
              Si un fichier appelé par l'action figure aussi dans ce sous-dossier, c'est lui qui sera chargé.
          5. up
            dossier des fichiers pour usage interne de UP
            1. dico.ini
              équivalences des termes pour l'action. Ils seront ajoutés au fichier principal dico.json
            2. en-GB.ini
              traductions de la documentation et des messages affichés par l'action.
            3. xx-XX.ini
              idem en-GB dans une autre langue
            4. options.ini
              définition des options pour le plugin editor-xtd UP-btn
            5. index.html
        2. les autres actions
      3. assets
        ressources pour le script principal de UP
        1. img
          images pour la feuille de style principale
        2. js
          scripts javascript/jquery partagés par plusieurs actions
        3. scss
          partiels SCSS importés par up.scss
        4. _variables.scss
          utiliser ce fichier pour définir vos préférences couleurs et espacements qui seront utilisées par up.scss
          up.scss
          fichier principal pour la génération de la feuille de style up.css
          up.css
          feuille de style du plugin
          index.html
      4. language
        fichiers pour la traduction des messages du script principal de UP et lors de l'installation (méthode Joomla!)
        1. fr-FR
          1. fr-FR.plg_content_up.ini
            traduction des messages
          2. fr-FR.plg_content_up.sys.ini
            message lors de l'installation
          3. index.html
        2. xx-XX : autre langue
      5. upbtn
        fichiers pour le plugin editor-xtd de UP
        1. fr-FR.actions-list.html
          en-GB.actions-list.html
          xx-XX.actions-list.html
          contenu HTML affiché par le plugin
        2. upbtn.js
          script pour retourner le shortcode
        3. uptbn.css
          feuille de style pour afficher le plugin

    Les explications

    1 / Le style général est défini par les options du shortcode

    {up chart-org
     | line-color=peru | border=2px peru solid | radius=0
     | color-bg=white | color-text=#333
     | color-text-1=peru
     | border-2=3px sienna solid 
     | class=bg-grisPale p1
     | css-head=#id .titre > div[background:none;outline:none;color:#333] #id .folder > div[background:#FFE896]
    }
    1. l'option principale sans aucun argument
    2. line-color & border colorent les liaisons et bordures  en peru. radius supprime l'arrondi qui est incompatible avec une bordure outline
    3. on définit la couleur de fond et du texte de tous les pavés
    4. le bloc de niveau 1 aura son texte dans la couleur peru
    5. tous les blocs de niveau 2 auront une bordure plus marquée
    6. ajoute un fond gris pale et un padding pour l'ensemble du diagramme
    7. la définition de classes spécifiques à cet organigramme (voir "les cas particuliers"). Petit rappel: UP remplace #id par l'id réelle de l'action.

    Les options permettent de jouer globalement sur les lignes de liaison (line-color) le fond (color-bg), le texte (color-text) et les bordures (border). Pour agir sur un niveau spécifique, on ajoute le niveau au options color-text-, color-bg- et border-

    Attention : les bordures n'utilisent pas l'attribut CCS border, mais outline qui présente l'avantage d'être inclus dans la largeur du bloc. C'est pour cette raison qu'il n'est pas possible d'avoir des angles arrondis sur les pavés.

    2 / Les cas particuliers

    J'utilise les classes créées par l'option css-head de chart-org

    Les pavés représentant des dossiers sont sur fond jaune par l'ajout de la classe folder dans la balise li

    Les blocs de niveau 2 sont toujours affichés horizontalement. Pour avoir la liste des fichiers en racine dans la première colonne, je crée un pseudo-niveau 2 que je transforme en titre en ajoutant la classe titre à sa balise li

    Astuce !

    Pour conserver les noms de fichiers sur la même ligne, j'utilise l'action span comme ceci :

    {up span=nowrap}xx-XX.actions-list.html{/up span}
    

    Cette façon de procéder permet avec un éditeur wysiwyg de mettre en évidence l'utilisation de la classe nowrap.

    Fichier SCSS

    Pour adapter les règles CSS de base, faites une copie du dossier chat_org.scss dans le sous dossier custom.

    Modifier les variables en tête de ce fichier devrait suffire.

    La seule méthode pour modifier la largeur des lignes de liaison est de passer par ce fichier qui va recalculer toutes les règles CSS. Ne pas modifier le fichier CSS directement.