Ajout de graphiques Kendo UI à notre application To-Do

Un aperçu rapide pour vous aider à ajouter des graphiques Kendo UI à l'application de tâches que nous avons créée la dernière fois. Découvrez la série complète de vidéos pour en savoir plus.

Bonjour et bienvenue dans Angular et Kendo UI Unite! Si vous êtes nouveau dans cette série, je vous suggère fortement de commencer par le premier post ici ou par la série de vidéos sur lesquelles ils s'appuient ! Dans la vidéo d'aujourd'hui, j'ai pensé qu'il serait très amusant d'ajouter un graphique à notre application de tâches qui indique le moment le plus occupé de la journée. Faisons un saut.

Voici notre application telle que nous l'avons laissée. Nous avons notre liste de tâches géniales à utiliser avec les entrées et les boutons de Kendo UI, et nous utilisons des animations angulaires personnalisées lors du chargement, ajoutons un élément et supprimons un élément pour rendre l'application super élégante. Nous avons également ajouté un sélecteur de temps lors du dernier épisode, ce qui nous permet de définir une heure pour chaque tâche à effectuer.

] Suivez le code qui se trouve ici.

Nous allons utiliser les données de tâches à effectuer de notre application pour créer un graphique indiquant les heures les plus occupées de notre journée. Pour ce faire, nous devons utiliser un Kendo UI Chart.

Le Kendo UI propose de nombreux graphiques avec de nombreuses options impressionnantes. Je vous suggère fortement de consulter notre documentation et de voir tous les exemples très intéressants que nous avons là-bas.

Mais pour commencer avec le nôtre, dans notre application, nous devons simplement: faites l’installation et, grâce à la version 6 de l’Annular CLI, vous pouvez simplement utiliser cette commande NG add: ng add @ progress / Kendo-Angular-charts .

Si nous revenons à notre page todo.component.ts je vais vous montrer quelques éléments qui ont changé depuis notre dernière rencontre. Je suis allé de l'avant et j'ai créé une interface avec item due et hour.

 interface Todo {
  article: chaîne;
  date d'échéance;
  heure: nombre;
}

Maintenant, article et dû étaient déjà là depuis l'épisode du sélecteur de temps, mais si nous allons chez notre To-Do, ouvrons-le et vérifiez-le, vous verrez que j'ai aussi ajouté une heure clé. Ceci utilise une nouvelle date identique à due, mais utilise également un tuyau personnalisé que j'ai créé.

Donc, pour ceux d'entre vous qui ne savaient pas, Angular permet vous pouvez utiliser un canal dans un modèle, ou bien vous pouvez l’utiliser avec une méthode .transform à l’intérieur de votre composant lui-même. Laissez-moi vous montrer le tuyau personnalisé que j'ai créé très rapidement.

Super simple. Littéralement, tout ce qu'il fait, c'est prendre la valeur, qui est une valeur de date, et obtenir l'heure de cette valeur. Donc, si l'heure limite est 2h30, elle passera à 2. Si l'heure limite est 22h15, cela nous donnera la valeur 22.

La prochaine étape est l'organisation de nos tâches par: l'heure. Qu'est ce que je veux dire? Eh bien, nous ne pouvons pas utiliser les données de nos tâches telles quelles. Nous devons en fait le regrouper à l'heure. Ainsi, par exemple, si 1:00 a.m. contient plusieurs éléments, nous devons les regrouper et les regrouper. De cette façon, nous pouvons créer un graphique et indiquer clairement aux utilisateurs: "Hé, regardez, il est très occupé."

Donc, Kendo UI a en fait un groupe par méthode et je suis

Pour utiliser notre groupe de graphiques par méthode, nous avons besoin de NPM pour installer et importer le paquet de requête de données!

Installez Kendo Data Query

 npm install --save @ progress / kendo-data-query

Importer une requête de données Kendo

 importer {groupBy, GroupResult} à partir de '@ progress / kendo-data-query';

Au sommet de notre todo.component.ts j'importe groupBy et GroupResult de Kendo Data Query. Ce que cela va nous permettre de faire, c'est à peu près exactement ce que la fonction s'appelle: organiser les tâches à effectuer par heure.

S'il n'y a pas de tâches à faire, continuez et revenez à zéro. Sinon, nous allons prendre ceci.Hourlyto-dos et nous le configurons par groupe.

 organiserTodosByHour (todos) {
    if (! todos) renvoie null;
    this.hourlyTodos = groupBy (this.todos, [{ field: "hour" }]);
    console.log (JSON.stringify (this.hourlyTodos, null, 2));
  }
  

Je consulte la console avec JSON.stringify pour que nous puissions voir exactement ce que notre méthode fait pour le tableau de notre tâche. Comment se réorganise-t-il? Si nous retournons à la console, nous pouvons voir les journaux:

 [
  {
    "aggregates": {},
    "field": "hour",
    "items": [
      {
        "item": "Take dog to vet",
        "due": "2019-04-10T06:10:00.000Z",
        "hour": 1
      },
      {
        "item": "Create to-do app",
        "due": "2019-04-10T06:00:00.000Z",
        "hour": 1
      }
    ],
    "valeur": 1
  },
  {
    "agrégats": {},
    "champ": "heure",
    "articles": [
      {
        "item": "Get oil change",
        "due": "2019-04-11T03:15:00.000Z",
        "hour": 22
      }
    ],
    "valeur": 22
  },
  {
    "agrégats": {},
    "champ": "heure",
    "articles": [
      {
        "item": "Finish super hard puzzle",
        "due": "2019-04-10T07:30:00.000Z",
        "hour": 2
      }
    ],
    "valeur": 2
  },
  {
    "agrégats": {},
    "champ": "heure",
    "articles": [
      {
        "item": "Pack for Denver",
        "due": "2019-04-11T00:00:00.000Z",
        "hour": 19
      }
    ],
    "valeur": 19
  }
]

Nous pouvons donc maintenant voir ce que ce groupe par méthode a exactement fait pour nos données. Nous voyons qu'il a effectivement fait ce que nous avions espéré et a divisé nos articles par heure. Vous pouvez voir que nous avons deux 1 qu'il a mis ensemble. Et puis, en dessous de cela, nous avons trois moments individuels différents. Mais, c’est exactement ce que nous voulions et exactement ce dont nous avions besoin pour notre graphique.

Maintenant, je suis sûr que nous sommes tous impatients d’obtenir quelque chose — TOUT sur l’écran car nous avons parlé de graphiques. Nous avons manipulé nos données, mais vous vous dites "Alyssa, laisse-moi voir le graphique!" Alors, je te donne la carte! Ici, dans notre todo.component.html, nous devons ajouter le balisage de notre graphique:

 // todo.component.html


   

À l'intérieur de notre carte d'interface utilisateur Kendo, nous allons avoir un titre de carte de Kendo – l'heure la plus occupée de la journée – car c'est ce que nous enregistrons ici. Et puis, nous avons deux éléments intérieurs à discuter.

 // todo.component.html


   
  
    
    
  

Le premier est la série de cartes Kendo. Vous pouvez penser à cela comme à votre wrapper de graphique externe. Ensuite, vous avez les éléments individuels réels dans le graphique. Donc, les données sont les heures à faire. Le nom est field. Nous avons également défini le champ sur items.length. C'est parce que nous voulons que les heures qui ont plus de temps à faire soient plus longues. Nous aimerions que le champ de catégorie soit défini sur value, qui correspond à l'heure (avec quoi nous avons regroupé chacune d'elles).

Enfin, le type de colonne, qui peut être un type de bulle, un type de barre , qui comme colonne, mais venant des côtés. Nous pourrions faire beaucoup de graphiques, mais pour l’instant, nous nous en tenons à notre colonne. Si nous allons de l'avant et enregistrez cela et laissez-le rafraîchir – yay! Nous avons ici notre tableau et vous pouvez voir que 1:00 est en fait plus occupé qu'une autre partie de ma journée.

Merveilleux, fonctionnant parfaitement. Cependant, je ne sais pas pour vous, mais je pense que nous pourrions tout nettoyer un peu. Lorsque vous ajoutez, supprimez ou modifiez des tâches (comme modifier leur heure), le graphique ne change pas. Maintenant, si nous réfléchissons à cela, il serait en fait très logique que le diagramme ne change pas.

Les tâches à effectuer toutes les heures sont en cours de création ou égales à celles de notre ensemble de tâches à faire organisées par heure.

 organiserTodosByHour (todos) {
  if (! todos) renvoie null;
  this.hourlyTodos = groupBy (this.todos, [{ field: "hour" }]);
} 
 

Ce que nous devons faire, c'est appeler la tâche à organiser par heure d'ajout et de suppression si nous souhaitons voir nos données dans la mise à jour du graphique.

Nous allons donc supprimer quelque chose. Vous pouvez voir que cela est supprimé du graphique et si nous ajoutons quelque chose de nouveau, vous pouvez le voir aussi. Cependant, notre sélecteur de temps ne change pas.

La façon dont nous récupérons l'événement hors du sélecteur de temps va en fait être très facile. À l’intérieur du sélecteur de temps Kendo, nous allons lier le changement de valeur et le définir à une méthode de notre choix. J'ai nommé le nôtre "à changement d'heure".

 // todo.component.html

 // todo.component.ts
  
  public onTimeChange () {
    this.todos.map ((todo) => {
      todo.hour = this.hour.transform (todo.due);
      revenir todo;
    });
    this.organizeTodosByHour (this.todos);
  }

Dans la méthode onTimeChange () nous cartographions nos tâches à effectuer. Pour chaque tâche à faire, nous créons une propriété heure et définissons cette valeur sur todo.due ce qui correspond à la même date d'échéance, mais nous l'exécutons dans notre canal horaire personnalisé. Nous n'avons pas encore créé de backend pour pouvoir mettre à jour, supprimer et ajouter. Ainsi, chaque fois que l'heure change, nous devons recréer manuellement cette propriété hour ici sur nos tâches à faire après avoir utilisé le canal horaire pour transformer l'heure. Nous appelons également nos tâches organisées par heure, ce que nous faisions pour ajouter et supprimer. C’est pour que nos tâches à faire toutes les heures soient mises à jour, ce qui est nécessaire pour que notre graphique change.

Maintenant, lorsque nous mettrons à jour l’heure de nos tâches, notre graphique le sera également! Il y a deux autres retouches que je voudrais faire à notre graphique, alors accrochez-vous avec moi – vous êtes presque un maître des graphiques vous-même.

Tout d'abord, je ne suis pas très bon en temps militaire. Lorsque je regarde notre tableau et que je vois 15 pour l’heure de la journée, mon cerveau s’embrouille et je dois faire une pause pour faire le calcul. Je pense que ce serait mieux si nous présentions notre graphique au format 12 heures au lieu de 24 heures. Donc, à l’intérieur de notre méthode organiseTodosByHour () je vais ajouter un peu de logique qui changera notre temps en une horloge de 12 heures. En fait, j'utilise modulo ici pour dire que si la valeur, modulo 12 n'est pas égale à zéro, vous allez définir une valeur égale à cette valeur. Si vous ne vous en souvenez pas, Modulo retire le reste de la division.

 organiserTodosByHour (todos) {
    if (! todos) renvoie null;
    this.hourlyTodos = groupBy (this.todos, [{ field: "hour" }]);
    

     // Humanise le champ de catégorie !!
     pour (laissez groupe de this.hourlyTodos) {
       // transforme le todos en horloge de 12 heures, pas 24
       soit heure: nombre = 12;
       if (group.value% 12! = 0) {
         heure = valeur.groupe% 12
       }
       
       // ajoute AM ou PM aux tâches pour la vue graphique
       si (valeur.groupe <12) {
         group.humanizedValue = `$ {hour} AM`
       } autre {
         group.humanizedValue = `$ {hour} PM`
       }
    }
  
  }

Nous avons également ajouté AM ou PM à notre liste de choses à faire. Super simple, non? S'il est supérieur à 12 ou inférieur à 12, définissez AM ou PM. Pour utiliser notre nouvelle humanizedValue nous l'avons utilisée dans notre tableau de l'interface du Kendo de la categoryField au lieu de de la valeur :

Deuxièmement, je pense que si nous triions nos heures dans l’ordre le plus tôt dans la journée, nous aurions peut-être plus de sens à la lecture du graphique.

 organiserTodosByHour (todos) {
    if (! todos) renvoie null;
    this.hourlyTodos = groupBy (this.todos, [{ field: "hour" }]);

     // transforme le todos en horloge de 12 heures, pas 24
     pour (laissez groupe de this.hourlyTodos) {
       soit heure: nombre = 12;
       if (group.value% 12! = 0) {
         heure = valeur.groupe% 12
       }
       
       // ajoute AM ou PM aux tâches pour la vue graphique
       si (valeur.groupe  {
       if (a.value  b.value) {
         retourne 1;
       } autre {
         retourne 0;
       }
     });
  }

Vous voyez donc que nous utilisons la méthode .sort () pour réorganiser notre époque. Si nous vérifions maintenant notre graphique, nous pouvons voir que les heures sont toutes des heures de 12 heures, avec am ou pm, et organisées dans l’ordre!

Je me suis éclaté dans cette série et j’espère que vous avez eu autant de plaisir à apprendre à propos de Angular et de Kendo UI! Découvrez la série de vidéos ou rendez-vous sur