tschmoderer · tschmoderer · Apr 8, 2026 · Mar 15, 2026 · Mar 15, 2026 · Mar 16, 2026
diff --git a/.github/img/plugins/charts/results_citations_metrics.png b/.github/img/plugins/charts/results_citations_metrics.png
diff --git a/README.md b/README.md
@@ -18,6 +18,7 @@ Ce dépôt contient un module JavaScript qui facilite l'intégration de la **bib
   * [Plugins](#plugins)
     + [Nuage de mots clés](#wordcloud)
     + [Métriques liées aux articles](#artscore)
+    + [Graphiques de métriques liées aux articles](#charts)
 
 ## Tutoriel<a name="tutoriel"></a>
 
@@ -255,3 +256,128 @@ const hal_integrator_config = {
 **Warnings**: 
 - Seulement les éléments de type "ART" (article de journaux) sont traités.
 - Un certain nombre de problèmes liés à des données non trouvées peuvent être résolus en configurant manuellement le plugin, voir la [documentation](https://tschmoderer.github.io/hal-bibliography-integrator/). 
+
+### Graphiques bibliométriques<a name="charts"></a>
+
+Le plugin **charts** génère des visualisations scientifiques à partir des publications HAL d'un auteur. Il affiche :
+
+- des **indicateurs bibliométriques** (nombre de publications, citations, indice h) ;
+- des graphiques de **thématiques scientifiques** extraits des mots-clés HAL ;
+- des graphiques de **domaines d'application** issus des codes de domaine HAL ;
+- un histogramme de **citations par année**, avec source configurable ([Semantic Scholar](https://www.semanticscholar.org/), [Scopus](https://www.scopus.com/)).
+
+![charts](./.github/img/plugins/charts/results_citations_metrics.png)
+
+Pour activer le plugin, veuillez suivre les étapes suivantes :
+
+1. Assurez-vous d'avoir ajouté le module principal **hal.js** à votre site web en suivant les instructions du [tutoriel](#tutoriel).
+
+2. À l'endroit où vous souhaitez afficher les graphiques, insérez le nœud HTML suivant :
+
+```html
+<div id="hal-charts-integrator"></div>
+```
+
+3. Dans la section `<head>` de votre page, ajoutez le lien vers la feuille de styles :
+
+```html
+<link rel="stylesheet" href="./path/to/hal-charts.css">
+```
+
+4. Configurez le plugin via `hal_integrator_config`. La configuration minimale ne requiert aucune clé :
+
+```html
+<script type="text/javascript">
+const hal_integrator_config = {
+    // ...
+    "plugins": {
+        "charts": {}
+    }
+}
+</script>
+```
+
+5. À la fin de la section `<body>`, ajoutez le lien vers le script du plugin :
+
+```html
+<script type="text/javascript" src="./path/to/hal-charts.js"></script>
+```
+
+---
+
+#### Options de configuration
+
+Toutes les options sont facultatives.
+
+```html
+<script type="text/javascript">
+const hal_integrator_config = {
+    // ...
+    "plugins": {
+        "charts": {
+
+            // Graphiques à afficher (tous par défaut)
+            // Clés disponibles : "metrics", "thematiques", "domaines", "citations"
+            "show": ["metrics", "citations"],
+
+            // Nombre maximum de catégories dans les graphiques thématiques/domaines
+            "maxCategories": 6,
+
+            // Source des citations : Semantic Scholar (recommandé, gratuit, CORS natif)
+            "semanticScholar": {
+                "authorId": "2109238827",  // semanticscholar.org/author/Nom/2109238827
+                "apiKey":   "votre-clé"   // optionnel — x8 plus rapide (1 req/s → 10 req/s)
+            },
+
+            // Source des citations : Scopus (fallback si Semantic Scholar échoue)
+            "scopus": {
+                "apiKey":   "votre-clé-elsevier",  // dev.elsevier.com
+                "authorId": "57346250300"           // dans l'URL scopus.com/authid/…
+            },
+
+            // Renommage manuel des thématiques détectées automatiquement
+            "renameThematiques": {
+                "deep learning": "Apprentissage profond",
+                "mri":           "IRM"
+            },
+
+            // Renommage manuel des domaines HAL
+            "renameDomaines": {
+                "spi.signal": "Traitement du signal",
+                "sdv.can":    "Oncologie"
+            }
+        }
+    }
+}
+</script>
+```
+
+---
+
+#### Source des citations
+
+Le plugin tente d'obtenir les citations dans l'ordre suivant :
+
+| Priorité | Source | Clé requise | Vitesse |
+|---|---|---|---|
+| 1 | **Semantic Scholar** (par `authorId`) | non | ~1 req/s sans clé, ~10 req/s avec clé |
+| 2 | **Semantic Scholar** (par nom HAL) | non | idem, résultats moins fiables |
+| 3 | **Semantic Scholar** (par DOI HAL) | non | idem, par lot POST |
+| 4 | **Scopus** | `apiKey` + `authorId` | selon quota Elsevier |
+
+Pour trouver votre **Semantic Scholar Author ID**, rendez-vous sur [semanticscholar.org](https://www.semanticscholar.org/), cherchez votre profil et relevez le numéro en fin d'URL :
+```
+https://www.semanticscholar.org/author/Prénom-Nom/2109238827
+                                                   ^^^^^^^^^^
+```
+
+Pour demander une **clé API Semantic Scholar** (gratuite, augmente la limite de 1 à 10 req/s) :
+[semanticscholar.org/product/api](https://www.semanticscholar.org/product/api)
+
+---
+
+**Avertissements :**
+
+- Sans `authorId` Semantic Scholar configuré, le plugin recherche l'auteur par son identifiant HAL. Les résultats peuvent être incorrects si le nom est ambigu.
+- Le chargement des citations peut prendre plusieurs dizaines de secondes sans clé API, selon le nombre de publications citées. Un message de progression est affiché.
+- Le graphique de citations par année reflète l'**année de publication des articles citants**, ce qui correspond à l'affichage de Google Scholar et Web of Science.
diff --git a/config/rollup.config.js b/config/rollup.config.js
@@ -1,6 +1,6 @@
 import scss from 'rollup-plugin-scss';
 import copy from 'rollup-plugin-copy';
-import watch from "rollup-plugin-watch";
+// import watch from "rollup-plugin-watch";
 
 const path = require('path');
 const fs   = require('fs');
@@ -14,6 +14,8 @@ const InFile = {
     "hal-wordcloud": path.resolve(__dirname, '../src/plugins/wordcloud/js/main.js'),
     // Article score plugin 
     "hal-artscore": path.resolve(__dirname, '../src/plugins/artscore/js/main.js'),
+	// Charts plugin
+    "hal-charts": path.resolve(__dirname, '../src/plugins/charts/js/main.js'),
 };
 
 export default [
@@ -45,9 +47,9 @@ export default [
         treeshake: false,
 
         plugins: [
-            watch({
-                dir: path.resolve(__dirname, "../src/"),
-            }),
+            /* watch({
+                dir: path.resolve(__dirname, "../src"),
+            }), */
 
             scss({
                 output: function (styles, styleNodes) {

diff --git a/docs/assets/css/hal-charts.min.css b/docs/assets/css/hal-charts.min.css
@@ -0,0 +1,167 @@
+#hal-charts-integrator {
+	font-family: inherit;
+	margin: 1.5rem 0;
+	color: inherit
+}
+
+.hal-charts-section-title {
+	font-size: 1.3rem;
+	font-weight: 700;
+	margin: 2rem 0 1rem 0;
+	padding-bottom: .4rem;
+	border-bottom: 2px solid #e8edf3
+}
+
+.hal-charts-metrics {
+	display: flex;
+	flex-wrap: wrap;
+	gap: .75rem;
+	margin-bottom: 1.75rem
+}
+
+.hal-charts-metric-card {
+	flex: 1 1 110px;
+	border: 1px solid #e2e6ec;
+	border-radius: 6px;
+	padding: .85rem 1rem;
+	text-align: center
+}
+
+.hal-charts-metric-value {
+	font-size: 1.9rem;
+	font-weight: 700;
+	line-height: 1
+}
+
+.hal-charts-metric-label {
+	font-size: .72rem;
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: .05em;
+	margin-top: .35rem
+}
+
+.hal-charts-metric-sub {
+	font-size: .67rem;
+	margin-top: .2rem
+}
+
+.hal-charts-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+	gap: 1.5rem;
+	margin-bottom: 1.5rem
+}
+
+.hal-charts-card {
+	border: 1px solid #e2e6ec;
+	border-radius: 6px;
+	padding: 1.25rem 1.5rem 1rem
+}
+
+.hal-charts-card-title {
+	font-size: .95rem;
+	font-weight: 700;
+	margin-bottom: .9rem;
+	text-align: left
+}
+
+.hal-charts-canvas-wrapper {
+	position: relative;
+	height: 240px
+}
+
+.hal-charts-legend {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	gap: .25rem 1.25rem;
+	margin-top: .85rem
+}
+
+.hal-charts-legend-item {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	font-size: .75rem
+}
+
+.hal-charts-legend-dot {
+	width: 10px;
+	height: 10px;
+	border-radius: 50%;
+	flex-shrink: 0
+}
+
+.hal-charts-legend-line {
+	width: 22px;
+	height: 3px;
+	border-radius: 2px;
+	flex-shrink: 0;
+	position: relative
+}
+
+.hal-charts-legend-line::after {
+	content: "";
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	width: 7px;
+	height: 7px;
+	border-radius: 50%;
+	background: inherit;
+	border: 1.5px solid #fff
+}
+
+.hal-charts-card--full {
+	grid-column: 1/-1
+}
+
+.hal-charts-cites-year {
+	font-size: .8rem;
+	text-align: center;
+	margin-top: -0.75rem;
+	margin-bottom: 1.5rem
+}
+
+.hal-charts-cites-year strong {
+	color: var(--link-color);
+}
+
+.hal-charts-loading {
+	text-align: center;
+	padding: 2rem;
+	color: #888;
+	font-size: .875rem
+}
+
+.hal-charts-error {
+	text-align: center;
+	padding: 2rem;
+	color: #b91c1c;
+	font-size: .875rem
+}
+
+@media(max-width: 640px) {
+	.hal-charts-grid {
+		grid-template-columns: 1fr
+	}
+
+	.hal-charts-metrics {
+		gap: .5rem
+	}
+
+	.hal-charts-metric-card {
+		flex: 1 1 80px;
+		padding: .65rem .75rem
+	}
+
+	.hal-charts-metric-value {
+		font-size: 1.5rem
+	}
+
+	.hal-charts-canvas-wrapper {
+		height: 200px
+	}
+}