datalocale / dataviz-finances-gironde Goto Github PK

C'est un peu une méta-issue à découper si nécessaire le jour où les idées/usages sont plus claires.

Le besoin s'est fait sentir à l'occasion de https://github.com/dtc-innovation/dataviz-finances-gironde/pull/76
Dans cette PR, on fetch 6 csv côté client. Ces 6 csv ont chacun du markdown qui est transformé en HTML côté client. Donc on perd en perf de chargement parce :

• 6 requêtes HTTP
• on parse du csv (+ coût du code du parser)
• on parse du markdown (+ coût du code du parser)
• on modifie la structure de données (de 6 tableaux vers des map nestées). Ce point est mineur vu que la transformation est linéaire, mais existe.

On pourrait imaginer un outil qui prend les 6 csv, génère une seule structure de données avec les markdown déjà transformés en HTML.

Un autre sujet à discuter, c'est les calculs financiers faits côté client pour chaque utilisateur. On pourrait les faire dans une étape de build.

Le premier qui correspond plus ou moins à https://github.com/dtc-innovation/dataviz-finances-gironde/tree/d51f36a27512297db02faaca0e1f69a07ca959cf qui est un outil d'analyse d'une instruction M52.
Le second correspond plus à une dataviz avec éditorialisation.

Elles sont actuellement dans un .odt

Ajouter un bouton d'export, générer le CSV à la volée à partir des données (calculer et ajouter les totaux des catégories hierarchiques). Ne pas formatter les nombres (contrairement à l'affichage).

Dans l'outil de validation des données M52 et agrégées, la sélection d'un morceau sur n'importe lequel des 2 sunburst permet de voir dans le tableau situé en dessous et intitulé morceau de la M52 sélectionné les articles correspondant à cette sélection.
Il pourrait être utile d'avoir le même fonctionnement pour connaître les morceaux du tableau agrégé sélectionné par la sélection.
Actuellement sur firefox 51 rien ne se modifie à part le tableau Morceau de la M52 sélectionné.

IE9 et Firefox 49 minimum

Pour le moment, nous utilisons assez violemment ES6. Ce n'est pas très grave, ça peut se compenser avec Babel.

Essayons Sprint 1, mais pas forcément urgentissime.

Pas sûr de la valeur à court terme de cette idée, mais cette issue est le résultat d'une réflexion de fond qui est applicable à ce projet.

Objectifs :

• Un site avec des plein d'urls (historique navigateur, bookmarkabilité, moteurs de recherche)
• Un SPA avec des composants
• Temps de chargement initial rapide pour les pages de contenu
• Facilité de contribution au site
• Maintenabilité

Jekyll résout "Un site avec des plein d'urls" et "Facilité de contribution au site" et en partie "Temps de chargement initial rapide" (au sens où c'est très cache-able).
React résout "Un SPA avec des composants", mais on perd le temps de chargement rapide (3AR avant du contenu).

La combinaison naïve des deux aurait une seule page avec du React côté front-end. On perdrait au moins les URLs.
Pour avoir tous les points, on peut imaginer que l'on a des layout jekyll et qu'on génère (Server-Side Rendering) des morceaux de contenu avec React auquels on applique un layout Jekyll.

Le petit point de maintenabilité que l'on predrait serait de devoir maintenir/garder synchronisé le routing côté client et serveur.

Alors qu'on est bon sur Firefox.
Sûrement une mauvaise interaction flexbox + svg.

Dans le déploiement final, doit-on aller chercher :

• Les données copiées sur le serveur
• Les données depuis datalocale (si les headers CORS sont ouverts)
  ?

Cache avec ServiceWorker ?

Inspiration :

• http://bl.ocks.org/kerryrodden/7090426

Pouvoir donner des données hiérarchiques.

Interactions possibles :

• survol d'une section
• clic/touch d'une section

Dépend de #2

L'outil actuellement déployé est un outil métier qui a prouvé ne pas être une bonne base pour un dataviz publique. Il nous faut une autre page.

Definition of Done : une seconde page sur une autre URL montre le total des dépenses et recettes pour le CA 2015. Cette page contient un faux squelette qui ressemble au site de la gironde.

• Créer un dossier/fichier
• Hardcoder le squelette
• Créer le boilerplate redux/react qui permet le rendu des recettes dépenses calculées à partir des vraies données.
• Ajouter les tâches de build associées

Idée / Je ne sais pas si c'est le lieu mais cela m'oblique à l'écrire ? Et peut-être que c'est ce que vous avez prévu ?

Générer des fichiers avec la liste des codes M52, aggrégé, type markdown, pour que l'on puisse commencer à remplir des "zones" de texte, qui seront ensuite être "affiché" dans la viz ou dans un composant ?

Par exemple, on a par défaut dans le fichier des codes de la DFI :
le code, le titre métier, le titre public, l'explication, le contexte
Par défaut on a donc code et titre métier.
On peut commencer à surcharger avec des titres plus compréhensibles sur les thématiques demandées ?

Idem pour la M52
par défaut un fichier brut avec la nomenclature officielle mais avec des possibilités de rajouter des infos titre public, explication, le contexte

peut-être que c'est juste pour clarifier dans ma tête :) donc on peut effacer en suivant !

J'aime bien page.js.

Notamment la norme M52, les fichiers cedi, la vision agrégée, etc.

Début de travail dans un commentaire d'une autre issue : https://github.com/dtc-innovation/dataviz-finances-gironde/issues/1#issuecomment-279131883

Re https://github.com/dtc-innovation/dataviz-finances-gironde/pull/64#discussion_r104354008
Je n'ai pas complètement compris le commentaire, mais je sens qu'il y a un truc à faire. Je pose ça là et y reviendrai plus tard.

Entre autres, mettre les reduceurs dans un fichier séparé.

Suite à https://github.com/dtc-innovation/dataviz-finances-gironde/pull/10#discussion_r96269512
Soit on utilise des PropTypes, soit TypeScript.
TypeScript est plus complet et profond, mais de mémoire, l'outillage n'était pas parfait. Essayer et voir.

Besoin d'une intégration avec un navigateur.
On peut commencer avec seulement les modernes.

à la place des codes comme "R21"

https://github.com/dtc-innovation/dataviz-finances-gironde/pull/9#discussion_r96239261

• https://github.com/stackcss/sheetify

Pour le moment, c'est très lent.
Des shouldComponentUpdate devraient aider

Elles devraient l'être

La navigation "validée" jusque-là ressemble à ça :

Il n'y a pas une arborescence triviale.
Les dépenses sont découpées selon le premier niveau des fonctions de la M52. Les recettes selon le découpage agrégé. Le social a pour l'instant un découpage, mais pourrait en avoir deux de l'aggrégé (par prestation/par public)... ou pas. On sait pas trop.

Dans tous les cas, il faudrait pouvoir exprimer le découpage de la navigation facilement. Pour le moment, on ne va décider d'un découpage par élément. Mais ce découpage sera "libre" au sens où il pourra piocher des éléments de la M52 ou de l'agrégée.
Il n'est pas clair comment on va s'assurer que les totaux font bien 100%. On se cognera au problème quand il arrivera.

Priorité assez haute puisque permet de mettre dans les mains de plus de gens et d'avoir des retours.

• M52 : ajouter un sélecteur R/D + F/I
• Agg : ajouter un sélecteur "vue par prestation"/"vue par public"
• adoucir les couleurs

Visiblement, watchify ne fonctionne pas. Il build une fois et trouve des erreurs ensuite (package dans node_modules qu'il ne trouve pas alors qu'il y sont). Peut-être une mauvaise interaction avec rollupify.

Le plus important de rollupify, c'est pouvoir utiliser la syntaxe des modules ES6. Si nous utilisons TypeScript ( comme pour #18 ), on peut se passer de rollupify.

Tout un tas de fichiers avec 2 colonnes :

• identifiant
• texte

Liste des fichiers :
Pour chaque identifiant de rubrique fonctionnelle M52 :

• Un fichier qui associe une étiquette
• Un fichier qui associe un texte d'explication atemporel
• Un fichier par année qui associe un texte d'explication pour l'année concernée

Pour chaque identifiant de la vision agrégée :

• Un fichier qui associe une étiquette
• Un fichier qui associe un texte d'explication atemporel
• Un fichier par année qui associe un texte d'explication pour l'année concernée

Soit au moins 4 fichiers + 2 fichiers pour 2015 (=6) à ce stade.

Les fichiers seront fournis en format .csv. Les textes peuvent être fournis sous format markdown. L'outil fera le rendu.

Pour un élément de la M52 ou un élément de l'aggrégée

En essence, rajouter un input@type=file.

Impossible d'accéder au contenu de Dataviz Finances Gironde. La page reste blanche sous Firefox et Chrome. Problème rencontré le 6 mars 2017 à partir de 18h. Plusieurs connexions même résultat.

J'utilise Firefox 51.0.1 (64 bits)

et Chrome Version 56.0.2924.87 (64-bit)

Les captures d'écran ça sert à rien mais c'est cadeau.

• Ajouter les montants à côté des M52 qui ne sont dans aucun aggrégé
• Ne pas mentionner les non-Ordre Réél dans les M52 manquants
• Tableau avec bordure
• Dans les lignes M52 qui apparaissent au moins 2 fois, ne pas compter celles qui apparaissent exactement 2 fois dans les DF entre "par prestation" et "par publique"

Le survol de l'un allume l'autre ou un truc comme ça.

On commence à manipuler des milliards et des données financières. Vérifier que JS peut gérer avec précision sur des entiers de cette taille.

Tentons Sprint 1 si le temps le permet

Il y a une grosse incertitude sur la possibilité de jouer avec les URLs, donc on va partir comme si on n'avait pas le droit.

Il va s'agir d'avoir dans le state un morceau qui indique "l'écran" que l'on est en train d'afficher. Et ajouter des liens qui vont déclencher un dispatch pour changer ce morceau de state.

https://github.com/dtc-innovation/dataviz-finances-gironde/pull/14#discussion_r96598623

React ? preact ?
redux + immutable ?

Des données immutables pourraient être utiles pour garantir que rien ne vient modifier les chiffres à runtime.

https://github.com/dtc-innovation/dataviz-finances-gironde/pull/9#discussion_r96237659

Re https://github.com/dtc-innovation/dataviz-finances-gironde/pull/64#discussion_r104354315
A regarder quand on a un peu plus de temps.

à la place de https://github.com/dtc-innovation/dataviz-finances-gironde/blob/6fe927b286d5c06bf548a9ac02c862659cf972a4/client/js/main.js#L231-L235

Pour éviter ce genre de concaténations

Charger un fichier, le visualiser avec le composant #4

Après le rendu final

https://github.com/dtc-innovation/dataviz-finances-gironde/pull/9#discussion_r96238217