❤
npm
Sign UpSign In

people-organigraph

1.3.1 • Public • Published

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 :

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 :

import Promise from 'promise-polyfill'; 

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

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": "eva.freeman@domain.com",
  "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 :
Options
Clé Description Type
initialUserId L'id de l'user qui sera chargé et affiché au démarrage de l'organigraphe Number
endpoints Un objet définissant les endpoints consommé par l'organigraphe
ex : 
{
  graph: id => `/p/${id}/graph_json`,
  user: id => `/p/${id}/user_json`,
}
Chaque fonction de l'objet endpoint prends un id(number) et retourne une url(string) 		Object
links Un objet définissant les liens vers lesquels l'organigraphe renvoie
ex : 
{
  user: id => `/p/${id}`,
}
Chaque fonction de l'objet links prends un id(number) et retourne une url(string) 		Number

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/)

Readme

Keywords

none

Package Sidebar

Install

npm i people-organigraph

Weekly Downloads

0

Version

1.3.1

License

MIT

Unpacked Size

2.19 MB

Total Files

46

Last publish

Collaborators

  • clementoriol
Try on RunKit
Report malware