# Démo [Reveal.js](https://revealjs.com/) + TRM charts Un plugin maison `AppTrmCharts`,<br/> permettant de génération des graphiques TRM. La démo utilise d'autres plugins utiles :<br/> `Markdown`, `Math`, `HighLight`, `Chart`

# Markdown Ecrivez vos diapos directement au format [Markdown](https://www.markdownguide.org/basic-syntax). Exemple : ```html <section data-markdown> <textarea data-template> ## Diapo 1 Un paragraphe avec un [lien](https://www.monnaie-libre.fr). Note: Une note vue présentateur (touche `S`) --- ## Diapo 2  </textarea> </section> ``` Résultat : cf diapo suivante

## Diapo 1 Un paragraphe avec un [lien](https://www.monnaie-libre.fr). Note: Une note vue présentateur (touche `S`) --- ## Diapo 2 

# Documentation - [Guide de la syntaxe Markdown](https://www.markdownguide.org/basic-syntax) - [Configuration du plugin Reveal.js Markdown](https://revealjs.com/markdown/)

# Math Insérez facilement vos formules mathématiques. Exemple : ```html <section data-markdown> `$$ J(\theta_0,\theta_1) = \sum_{i=0} $$` </section> ``` Résultat : `$$ J(\theta_0,\theta_1) = \sum_{i=0} $$` --- # Documentation - [Guide la syntaxe katex](https://katex.org/) - [Configuration du plugin Reveal.js Math](https://revealjs.com/math/)

# Highlights La coloration syntaxique peut être utilisé, par exemple pour afficher du code. Exemple : ``` <section data-markdown> ```js if (array.length) { console.debug("Hello World"); } ``` </section> ``` Résultat : ```js if (array.length) { console.debug("Hello World"); } ``` --- # Language La syntaxe est mise en surbrillance,<br/> en fonction du language indiqué (`js`, `html`, etc.) Si aucun language n'est précisé, il sera détecter automatiquement.

# Graphique en relatif Configuration pour avoir N = 3 membre, en relatif : ```html <div style="height:480px"> <canvas data-trm-chart> <!-- Options below --> <!-- { "N": 3, "relative": true } --> </canvas> </div> ```

# Exemple en quantitatif Configuration pour avoir un zoom sur 10 ans, via `duration` : ```html <div style="height:480px"> <canvas data-trm-chart> <!-- { "N": 3, "relative": false, "duration": 10 } --> </canvas> </div> ```

# Affichage en camembert Configuration pour avoir N = 10 membres : A noter que `data-trm-chart` permet de choisir le type de graphique : ```html <canvas data-trm-chart="pie"> <!-- { "N": 10, "relative": true } --> </canvas> ```

# Renouvellement des générations Configuration pour avoir des décès et des naissances, avec N = 20 membres : ```html <canvas data-trm-chart> <!-- { "N": 20, "deaths": true } --> </canvas> ```

# Options de configuration Voici toutes les options possibles, avec leur valeur par défaut : ```html <div style="height:480px"> <canvas data-trm-chart> <!-- { "type": "line", // line, pie, bar (défaut: 'line) "ev": 80, // Espérance de vie (défaut: 80) "duration": 80, // Nombre d'années (défaut: =ev) "N": 4, // Nombre de membres (défaut: 4) "c": 0.1, // Taux de croissance c (défaut: 0.1) "relative": true,// Soldes relatif à DU(t) (défaut: true) "deaths": true, // Simuler les morts/naissances (défaut: false) "deathsPeriod": 20, // Période entre 2 morts (défaut: auto) "fill": false, // Colorier sous les courbes (défaut: auto) "stacked": false,// Cumuler les soldes des comptes (défaut: false) "debug": true // Activer les logs dans la console Javascript (défaut: false) } --> </canvas> </div> ```