Synchronisation de plusieurs graphiques

Dans cet article, nous allons découvrir une mise en œuvre étape par étape sur la façon d'utiliser l'API ScheduleJS pour synchroniser plusieurs graphiques ensemble et utiliser une seule ligne de temps pour deux graphiques ou plus.

Thursday, August 3rd, 2023 - 4 minutes read

Étape 1 : Définir notre objectif

Pour simplifier les choses, fixons d'abord notre objectif :

Nous voulons combiner deux instances de notre <demo-schedule-booking> composant de démonstration. Ce composant est capable d'afficher un diagramme de Gantt ScheduleJS.

Note that the same approach can be used with two completely different graphics.

Étape 2 : Créer un composant « dual-gantt » d'ordre supérieur

Une bonne idée est d'utiliser une version conteneurisée de nos graphiques afin de pouvoir gérer l'affichage de plusieurs graphiques avec facilité, en utilisant des composants.

Commençons par créer un dual-gantt et essayez notre <demo-schedule-booking> de la composante.

<!-- Let's start with one graphic at a time -->
<demo-schedule-booking><demo-schedule-booking/>

Maintenant, si notre <demo-schedule-booking> est fonctionnel, notre dual-gantt affichera l'écran suivant, qui est en fait identique au composant original.

Nous pouvons maintenant créer un <div> et utiliser notre <demo-schedule-booking> deux fois dans notre toute nouvelle dual-gantt de la composante :

<!-- Let's assemble two ScheduleJS demo bookings in our component -->

<div class="gantts-container">

  <demo-schedule-booking class="first-gantt"></demo-schedule-booking>

  <demo-schedule-booking class="second-gantt"></demo-schedule-booking>

</div>

Nous avons ajouté des classes CSS pour afficher correctement un graphique au-dessus de l'autre et les séparer par une bordure. Ici, la classe gantts-container gère l'affichage tandis que la classe first-gantt et le second-gantt classe gère les spécificités, comme la frontière de séparation.

Nous avons maintenant deux graphiques non synchronisés à l'intérieur de notre nouveau fichier dual-gantt de la composante :

Pour améliorer encore l'affichage, nous avons adapté notre <demo-schedule-booking> pour accepter deux nouvelles propriétés d'entrée :

displayTimeline: True par défaut, comme nous allons utiliser une seule ligne de temps, il n'est pas nécessaire de répéter la ligne de temps dans les deux graphiques.
displayButtonBar: True par défaut, permet de masquer la barre de boutons afin de ne conserver qu'une seule barre de boutons pour les deux graphiques.

En tant que ScheduleJS Gantt component, <demo-schedule-booking> accepte également des entrées supplémentaires par défaut. Ici, nous utiliserons l'option dragToResizeInfoColumnPrevented afin d'empêcher tout redimensionnement individuel de la colonne d'information pour les deux graphiques. Le résultat devrait permettre de supprimer la barre de boutons et la ligne de temps pour le deuxième graphique :

<!-- Let's add a few properties to better handle the dual-gantt display -->

<div class="gantts-container">

  <demo-schedule-booking class="first-gantt"
                         [dragtoresizeinfocolumnprevented]="true">
  </demo-schedule-booking>

  <demo-schedule-booking class="second-gantt"
                         [displaytimeline]="false"
                         [displaybuttonbar]="false"
                         [dragtoresizeinfocolumnprevented]="true">
  </demo-schedule-booking>

</div>

Étape 3 : Partager un seul objet de la ligne de temps

Nous voulons créer un nouveau timeline et le transmettre à nos graphiques une fois que notre objet dual-gantt montages de composants. Voici le code source de notre dual-gantt de la composante :

// Our dual-gantt component
import {Component, Injector} from "@angular/core";
import {Timeline} from "schedule";

@Component({
  selector: "dual-gantt",
  templateUrl: "./dual-gantt.component.html",
  styleUrls: ["./dual-gantt.component.scss"]
})
export class DualGanttComponent {

  // Here we create a single timeline, which requires the Angular Injector
  readonly timeline: Timeline = new Timeline(this._injector);

  // Use dependency injection to provide an instance of the Angular Injector
  constructor(private readonly _injector: Injector) { }

}

Nous devons maintenant transmettre notre nouvelle timeline en tant qu'entrée dans notre <demo-schedule-booking> Le composant ScheduleJS Gantt dans le dual-gantt modèle de composant :

<!-- Pass our freshly instanciated timeline object for registration in both components -->

<div class="gantts-container">

  <demo-schedule-booking class="first-gantt"
                         [timeline]="timeline"
                         [dragtoresizeinfocolumnprevented]="true">
  </demo-schedule-booking>

  <demo-schedule-booking class="second-gantt"
                         [timeline]="timeline"           
                         [displaytimeline]="false"
                         [displaybuttonbar]="false"
                         [dragtoresizeinfocolumnprevented]="true">
  </demo-schedule-booking>

</div>

Étape 4 : Enregistrer la chronologie à l'aide de l'API ScheduleJS

La dernière étape consiste à enregistrer la ligne de temps dans le fichier <demo-schedule-booking> de la composante.

Pour ce faire, nous avons décidé de créer un setter qui exécutera le code d'enregistrement lorsque l'entrée sera transmise au composant :

export class DemoBookingComponent extends DefaultScheduleTreeGanttComponentBase<ResourceRow, DefaultScheduleGanttGraphicTreeComponent<ResourceRow>> {

  // [...]

  // Register the given timeline or do nothing 
  @Input()
  set timeline(timeline: Timeline | undefined) {
    if (timeline) {
      this.gantt.setTimeline(timeline);
      this.gantt.getGraphics().setTimeline(timeline);
    }
  }
  
  // [...]

}

Résultat final

La vidéo suivante montre les graphiques synchronisés :

Cet exemple n'est qu'une simple mise en œuvre de graphiques synchronisés. Le but de cet article est d'illustrer comment vous pouvez rapidement combiner plusieurs graphiques pour construire un écran unique. Vous pouvez utiliser les mêmes principes pour combiner différents types de graphiques (histogramme, Gantt, courbe) comme nous le faisons dans le ScheduleJS Viewer par exemple !

S'il vous plaît nous contacter si vous avez des défis UX/UI ou des idées pour ScheduleJS !