Générateur de graphiques TRM, sous Reveal.js

Salut à tous !

Dans le cadre d’une présentation récente que j’ai faite des fondements théoriques de la monnaie libre, j’ai réalisé une librairie pour générer de beaux graphiques TRM, dynamiquement - avec animations - et dans des diapos HTML (donc portables).

J’utilise Chart.js (pour les graphs) et Reveal.js (pour la gestion des diapos) + d’autres plugin (pour faire du markdown, etc.)

Tout a été fait pour que vous puissiez utiliser tout cela pour vos propres présentations !

Exemples de rendu

Exemples de configuration

Une fois qu’on a cloner le projet git il est très simple de générer vos propre graphiques, à une diapo :

						<div style="height:480px">
							<canvas data-trm-chart="line">
								<!--
								{
									"N": 10,
									"relative": true,
									"deaths": true
								}
								-->
							</canvas>
						</div>

Toutes les options de config sont visibles dans la doc

Les liens

Bon il y encore surement des bugs… mais je suis content du résultat :slight_smile:

@Galuel es-ce que ca me vaut la validation de mon module Galilée ca ?! :slight_smile:

5 Likes

J’ai également publié, sur le même site de démo, la doc (avec exemples) pour tous les autres plugins Reveal.js que j’utilise : markdown, hightlight, formules de Math, graphiques quelconques, etc.

Ainsi, sans être un expert Reveal.js, vous allez pouvoir faire n’importe quelle présentation rapidement, avec ou sans graphique TRM dedans :slight_smile:

EDIT: il faut quand même etre à l’aise avec, au moins markdown, et avoir des notions d’HTML.
Je parle bien aux développeurs, donc :slight_smile:

Trop bien !!! :hugs:

Je pensais justement faire un truc du genre avec https://sli.dev/
En fait, j’ai même commencé un composant de graphique (chart.js) pour le site monnaie-libre pour qu’on puisse intégrer des graphs facilement dans le texte des articles…

Je cours regarder ton dépôt !

Alors du coup il faudrait mieux que le code soit isolé, pour pouvoir servir avec juste Chart.js

En fait tout ce qui se trouve dans src/js/app-trm-chart.js peut simplement être adapté.
Le gros du code vise à générer la configuration JSON (datasets + couleurs des séries) pour Chart.js

Ensuite, un bout de code utilisant jquery injecte ce JSON dans les solides Reveal.js, soit au milieu du markdown (dans les balises ) soit dans les balises .

Il y a aussi un bout de code pour générer la palette de couleur : src/js/app-colors.js

Voilou…

Bref ça vaudrait le coup d’extraire tout ça dans une lib TS/JS

1 Like