NOS PROJETS
NOTRE APPROCHE
À PROPOS
CRÉER AVEC NOUS

Visualisation de données de suivi de temps en utilisant Chart.js

December 9, 2019

J’ai commencé à programmer avec Javascript, plus spécifiquement, à travers p5.js, une librairie pour le creative coding popularisée par Daniel Shiffman sur sa chaîne Youtube.

Bien que j’utilise Javascript presque quotidiennement, ce projet m’a permit de retourner à l’usage que j’en faisait lors de mes premiers apprentissages : créer des pages visuelles où j’expérimente en montant des démonstrations rapides.

Motivation

L’application que j’utilise pour faire mon suivi de temps n’offre pas beaucoup d’options de visualisation, et lorsque j’ai atteint le cap du 1 an de collecte de données je désirais avoir de meilleurs outils pour analyser la distribution de mes activités lors de cette dernière année.

Aussi, cela faisait quelques temps que j’essayais de me trouver une excuse pour essayer la librairie Chart.js, qui offre des graphiques simple et esthétiques.

Voir la démo ici (anglais seulement).

Rester organisé

Le code complet se trouve ici.

Même si cette application ne serait utile qu’à moi (puisque les données exportées par mon application de suivi de temps ont une structure particulière), je voulais prendre une approche plus générale pour me laisser la liberté d’y ajouter dans le futur.

//activity probabilities are always defined on the day timescale
var activities = [
  { name : "sleep" , prob : 1 , min : 300 , max : 600 },
  { name : "making dreams come true" , prob : 0.8 , min : 50 , max : 300 },
  { name : "programming" , prob : 0.7 , min : 300 , max : 800 },
  { name : "drinking coffee" , prob : 0.5 , min : 15 , max : 60 },
  { name : "squashing bugs" , prob : 0.4 , min : 60 , max : 330 }
];
var userSettings = new SettingsCollector(0);
var chartLoader = new ChartLoader(userSettings,activities);
const parser = new TimetrackingParser("./data/timetracking.csv");

Le code est séparé en objets clé qui accomplissent tous une tâche spécifique. Puisque le code du parser est étroitement lié à la structure des données, il est important de créer un object qui s’occupe exclusivement du parsing. Dans le futur, des enfants au parser pourront être ajoutés qui accepteront d’autres structures de données afin de rendre l’application plus versatile.

Ce projet est au stade doodle, mais si vous voulez en apprendre plus, contactez-nous .