[Exercice 50] Graphiques AngularCharts, édition temps réel, MultiObjets…

Introductionint


Exercice durant 3 h, comprenant une table éditable et triable, des graphiques qui s’auto modifient en temps réel.

Pour le tester en ligne , c’est ici
On peut choisir les objets dans le modèle de données avec un select html, le modèle de données est  d’un format classique de tableau d’objets JSON.

Par contre, j’ai mis beaucoup trop de 2 way binding(par contrainte de temps), il faudra demain faire une version presque sans 2 way binding et qui actualise les graphiques après clic sur un bouton, sans cela , pbs de perfs si beaucoup d’objets.Le modèle de données multi-objets est censé émuler un Back End, cependant, le fait qu’il soit sous $scope n’est pas trop bien même pour une démo, ça prends trop de ressources mais cela fonctionne, et permet de travailler les tableaux d’objets JSON. Après reflexion, il faut de préfèrence « puiser » dans le modèle multi objet présent sur une base de données back-end,puis ensuite , on peut injecter un objet unique dans le $scope, de cette façon, il n’y a pas trop de 2 way bindings, dans cet exemple, les graphiques devraient être alimentés par une requête sur la base de données, et pas sur le modèle présent en mémoire vive, mais si il y a peu d’objets en mémoire vive, cela peut être envisageable de faire cela.. La liste des objets devrait provenir d’une requête sur un système back end.

J’ai aussi repéré un SUPER système de graphiques que l’on peut modifierpar drag n drop ici :
http://jsfiddle.net/edgarszagorskis/HgtS9/

A exploiter ces jours ci !

Photo de l’exercice :


exo50

Explication sommaire du code :


$scope.listeObjets est un modèle de données pouvant provenir d’un back-End, structuré de manière classique.

Lorsqu’on clique sur un objet dans le menu déroulant, ça retrouve son index dans le modèle de donnée et affiche l’objet dans la table.

Les graphiques eux recapitulent les données de chaque objets. On pourrait ajouter des objets, les graphiques fonctionneraient encore.

Le code :


Lire la suite

Publicités

#mes