people-organigraph

v1.3.1

Published

2 years ago

## Dépendances L'organigraphe nécessite d'inclure le CSS de bootstrap (v3) à votre projet

Downloads

0High
0Medium
0Low

clementoriol

People Organigraph

Dépendances

L'organigraphe nécessite d'inclure le CSS de bootstrap (v3) à votre projet

L'organigraphe s'appuie également sur d'autres dépendances, qui sont directement incluses dans la librairie :

Certaines parties de D3.js
React

Les prochaines étapes de développement du projet seront de se débarrasser des dépendances superflues (React, Bootstrap...)

Polyfills

L'organigraphe utilise l'API fetch du navagiteur et les Promises.

Le support de ces deux API navigateur étant actuellement limité, il est fortement recommandé d'installer différents polyfills dans votre projet pour garantir un support navigateur stable, comme :

promise-polyfill

import Promise from 'promise-polyfill'; 

// To add to window
if (!window.Promise) {
  window.Promise = Promise;
}

github/fetch

import "whatwg-fetch";

Utiliser l'organigraphe

Installer l'organigraphe dans votre projet via npm ou yarn

yarn add people-organigraph
# ou
npm install people-organigraph

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <base href="/">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>People Organigraph</title>
  <!-- L'organigraphe nécessite bootstrap comme dépendance -->
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <!-- Import du CSS de l'organigraphe -->
  <link rel="stylesheet" href="organigraph.css">
  <style>
    /* Style le container de l'organigraph (ici en fullscreen) */
    #js-organigraph {
      position: absolute;
      overflow: hidden;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
  </style>
</head>
<body>
  <!-- Le container ou l'organigraphe va être crée -->
  <div id="js-organigraph">
  </div>
</body>
</html>

application.js

import PeopleOrganigraph from 'people-organigraph';

// Crée un objet définissant les endpoint que l'organigraphe va consommer
const organigraphEndpoints = {
  graph: id => `/p/${id}/graph_json`,
  user: id => `/p/${id}/user_json`,
};

// Crée un objet définissant les liens vers lequels l'organigraphe peut renvoyer
const organigraphLinks = {
  user: id => `/p/${id}`,
};

// Initialise l'organigraphe
PeopleOrganigraph("#js-organigraph", {
  initialUserId: 1, // L'id de l'user sur lequel l'organigraphe sera initialisé
  endpoints: organigraphEndpoints, // Les endpoints
  links: organigraphLinks, // Les liens
});

API Serveur

L'organigraphe est pensé pour consommer une API REST. Il faut à minima deux endpoints :

Un endpoint graph exposant les informations d'un user et celles de ses enfants directs :

GET /api/user/1/graph

{
  "id": 1,
  "first_name": "Brennan",
  "last_name": "Hanson",
  "picture_url": "https://randomuser.me/api/portraits/men/73.jpg",
  "children": [
    {
      "id": 2,
      "first_name": "Eva",
      "last_name": "Freeman",
      "picture_url": "https://randomuser.me/api/portraits/women/94.jpg",
    },
    {
      "id": 3,
      "first_name": "Felix",
      "last_name": "Russel",
      "picture_url": "https://randomuser.me/api/portraits/men/54.jpg",
    },
  ]
}

Un endpoint user exposant les informations d'un user en particulier:

GET /api/user/2

{
  "id": 2,
  "email": "[email protected]",
  "slugged_id": "evafreeman",
  "first_name": "Eva",
  "last_name": "Freeman",
  "job_title": "Manager",
  "office_address": null,
  "entity": "GTS",
  "phone": "+33123456789",
  "picture_url": "https://randomuser.me/api/portraits/women/94.jpg",
}

Ces endpoint seront fourni à l'organigraph via l'API client

API Client

Initialiser l'organigraphe

PeopleOrganigraph(selector, options)

selector: (String) le sélecteur de l'élément destiné à contenir l'organigraphe
options (Object) un objet d'options :

Contribuer et démarrer le projet localement

Prérequis

Installer NVM pour gérer sa version de Node :

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash

(Dans le projet) Installer la version courante de Node :

nvm install

(Optionel) Installer AVN pour gérer le switch automatique de version de Node:

Config :

Pour que la démo de développement fonctionne correctement, il est nécessaire de préciser quelques valeurs dans un fichier demo/config.json :

{
  "apiUrl": "https://people.total/api/v1",
  "accessToken": "YOUR-ACCESS-TOKEN"
}

apiUrl: l'url de l'api
accesToken(optionnel): l'access token nécessaire pour s'authentifier à l'api (sera par défaut passé en paramètre d'url (?access_token=ACCESS_TOKEN)

Installation des dépendances :

Via Npm

yarn install

Développement

Lancer le serveur local :

yarn start

Le serveur est accessible sur http://localhost:3000

Compilation

Compiler le projet, et préparer un dossier /dist :

yarn build

Compiler le projet et analyser les dépendances :

yarn build:analyze

(ouvre le bundle analyzer sur http://127.0.0.1:8888/)