From 37a86d429792af9ee9949271fcc39416a350ada8 Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Tue, 11 Jun 2024 09:50:09 +0200
Subject: [PATCH] template programme pirate

---
 .gitignore                          |   3 +
 pirate_program/index.html           | 119 +++++++++++++++-------------
 pirate_program/templates/index.html | 119 +++++++++++++++-------------
 3 files changed, 135 insertions(+), 106 deletions(-)
diff --git a/.gitignore b/.gitignore
index ff3ba1fa..3d41e251 100755
--- a/.gitignore
+++ b/.gitignore
@@ -7,3 +7,6 @@
 /coverage/
 /coverage/
 ~
+/export_emails_filter/mon_filtre_selection/
+/export_emails_filter/emails_filtered__with*
+/export_emails_filter/list_emails_filtered.json
diff --git a/pirate_program/index.html b/pirate_program/index.html
index 391123aa..2e5837aa 100644
--- a/pirate_program/index.html
+++ b/pirate_program/index.html
@@ -74,39 +74,14 @@
 				color: darkslateblue;
 			}
 
-			.tags-menu {
+			/* Nouveaux styles pour le nuage de tags */
+			.tag-cloud {
+				width: 300px;
+				height: 300px;
 				position: fixed;
 				top: 20px;
-				left: 20px;
-				background-color: #fff;
-				padding: 10px;
-				border-radius: 5px;
-				box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+				right: 20px;
 			}
-
-			.tags-menu ul {
-				list-style: none;
-				padding: 0;
-				margin: 0;
-			}
-
-			.tags-menu li {
-				display: inline-block;
-				margin-right: 10px;
-			}
-
-			.tags-menu a {
-				color: #333;
-				text-decoration: none;
-				padding: 5px 10px;
-				border-radius: 5px;
-				background-color: #f5f5f5;
-			}
-
-			.tags-menu a:hover {
-				background-color: #e5e5e5;
-			}
-
     </style>
 </head>
 <body id="main">
@@ -115,6 +90,11 @@
         <h1>Programme du
             <a href="https://partipirate.org/index.php/">Parti Pirate</a>
         </h1>
+        <section class="nuage">
+
+            <h2>nuage de mots:</h2>
+            <div class="word-cloud"></div>
+        </section>
         
         <div class="article">
             <h2>
@@ -16525,32 +16505,65 @@ Une taxation étant déjà en place sur le CO2 et le Parti Pirate ne désirant p
     </div>
 
 </div>
+<script src="https://d3js.org/d3.v7.min.js"></script>
 <script>
-	document.addEventListener('DOMContentLoaded', function () {
-		var tagsMenu = document.querySelector('.tags-menu')
-		var tags = document.querySelectorAll('.tags-menu a')
-		var articles = document.querySelectorAll('.article')
-
-		tagsMenu.addEventListener('click', function (e) {
-			if (e.target && e.target.matches('a')) {
-				var tag = e.target.getAttribute('data-tag')
-				articles.forEach(function (article) {
-					if (article.getAttribute('data-tags').includes(tag)) {
-						article.style.display = 'block'
-					} else {
-						article.style.display = 'none'
-					}
-				})
+	// Fonction pour créer le nuage de mots
+	function createWordCloud(texts) {
+		// Extraire les mots de plus de 4 lettres
+		var words = [];
+		texts.forEach(function(text) {
+			var matches = text.match(/\b\w{5,}\b/g);
+			if (matches) {
+				words = words.concat(matches);
 			}
-		})
+		});
 
-		// Ajouter un événement de clic sur le premier tag pour afficher tous les articles
-		tags[0].addEventListener('click', function () {
-			articles.forEach(function (article) {
-				article.style.display = 'block'
-			})
-		})
-	})
+		// Calculer la fréquence de chaque mot
+		var wordFrequency = {};
+		words.forEach(function(word) {
+			if (wordFrequency[word]) {
+				wordFrequency[word]++;
+			} else {
+				wordFrequency[word] = 1;
+			}
+		});
+
+		// Trier les mots par fréquence décroissante
+		var sortedWords = Object.keys(wordFrequency).sort(function(a, b) {
+			return wordFrequency[b] - wordFrequency[a];
+		});
+
+		// Créer le nuage de mots avec d3.js
+		var wordCloud = d3.select(".word-cloud")
+			.append("svg")
+			.attr("width", 600)
+			.attr("height", 600);
+
+		// Définir une échelle de couleur allant du blanc au violet
+		var colorScale = d3.scaleSequential(d3.interpolateViridis)
+			.domain([0, d3.max(Object.values(wordFrequency))]);
+
+		// Ajouter les mots au nuage
+		var maxFrequency = d3.max(Object.values(wordFrequency));
+		wordCloud.selectAll("text")
+			.data(sortedWords.splice(0,20))
+			.enter()
+			.append("text")
+			.text(function(d) { return d; })
+			.attr("x", function(d, i) { return 10 + (i % 10) * 50; })
+			.attr("y", function(d, i) { return 10 + Math.floor(i / 10) * 20; })
+			.attr("font-size", function(d) { return Math.sqrt(wordFrequency[d] / maxFrequency) * 20 + "px"; })
+			.style("fill", function(d) { return colorScale(wordFrequency[d]); })
+			.style("cursor", "pointer");
+	}
+
+	// Récupérer les textes des articles
+	var texts = Array.from(document.querySelectorAll(".article .content")).map(function(div) {
+		return div.textContent;
+	});
+
+	// Appeler la fonction pour créer le nuage de mots
+	createWordCloud(texts);
 </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/pirate_program/templates/index.html b/pirate_program/templates/index.html
index b0d6e059..61fbfd39 100644
--- a/pirate_program/templates/index.html
+++ b/pirate_program/templates/index.html
@@ -74,39 +74,14 @@
 				color: darkslateblue;
 			}
 
-			.tags-menu {
+			/* Nouveaux styles pour le nuage de tags */
+			.tag-cloud {
+				width: 300px;
+				height: 300px;
 				position: fixed;
 				top: 20px;
-				left: 20px;
-				background-color: #fff;
-				padding: 10px;
-				border-radius: 5px;
-				box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+				right: 20px;
 			}
-
-			.tags-menu ul {
-				list-style: none;
-				padding: 0;
-				margin: 0;
-			}
-
-			.tags-menu li {
-				display: inline-block;
-				margin-right: 10px;
-			}
-
-			.tags-menu a {
-				color: #333;
-				text-decoration: none;
-				padding: 5px 10px;
-				border-radius: 5px;
-				background-color: #f5f5f5;
-			}
-
-			.tags-menu a:hover {
-				background-color: #e5e5e5;
-			}
-
     </style>
 </head>
 <body id="main">
@@ -115,6 +90,11 @@
         <h1>Programme du
             <a href="https://partipirate.org/index.php/">Parti Pirate</a>
         </h1>
+        <section class="nuage">
+
+            <h2>nuage de mots:</h2>
+            <div class="word-cloud"></div>
+        </section>
         {% for page in pages %}
         <div class="article">
             <h2>
@@ -134,32 +114,65 @@
     </div>
 
 </div>
+<script src="https://d3js.org/d3.v7.min.js"></script>
 <script>
-	document.addEventListener('DOMContentLoaded', function () {
-		var tagsMenu = document.querySelector('.tags-menu')
-		var tags = document.querySelectorAll('.tags-menu a')
-		var articles = document.querySelectorAll('.article')
-
-		tagsMenu.addEventListener('click', function (e) {
-			if (e.target && e.target.matches('a')) {
-				var tag = e.target.getAttribute('data-tag')
-				articles.forEach(function (article) {
-					if (article.getAttribute('data-tags').includes(tag)) {
-						article.style.display = 'block'
-					} else {
-						article.style.display = 'none'
-					}
-				})
+	// Fonction pour créer le nuage de mots
+	function createWordCloud(texts) {
+		// Extraire les mots de plus de 4 lettres
+		var words = [];
+		texts.forEach(function(text) {
+			var matches = text.match(/\b\w{5,}\b/g);
+			if (matches) {
+				words = words.concat(matches);
 			}
-		})
+		});
 
-		// Ajouter un événement de clic sur le premier tag pour afficher tous les articles
-		tags[0].addEventListener('click', function () {
-			articles.forEach(function (article) {
-				article.style.display = 'block'
-			})
-		})
-	})
+		// Calculer la fréquence de chaque mot
+		var wordFrequency = {};
+		words.forEach(function(word) {
+			if (wordFrequency[word]) {
+				wordFrequency[word]++;
+			} else {
+				wordFrequency[word] = 1;
+			}
+		});
+
+		// Trier les mots par fréquence décroissante
+		var sortedWords = Object.keys(wordFrequency).sort(function(a, b) {
+			return wordFrequency[b] - wordFrequency[a];
+		});
+
+		// Créer le nuage de mots avec d3.js
+		var wordCloud = d3.select(".word-cloud")
+			.append("svg")
+			.attr("width", 600)
+			.attr("height", 600);
+
+		// Définir une échelle de couleur allant du blanc au violet
+		var colorScale = d3.scaleSequential(d3.interpolateViridis)
+			.domain([0, d3.max(Object.values(wordFrequency))]);
+
+		// Ajouter les mots au nuage
+		var maxFrequency = d3.max(Object.values(wordFrequency));
+		wordCloud.selectAll("text")
+			.data(sortedWords.splice(0,20))
+			.enter()
+			.append("text")
+			.text(function(d) { return d; })
+			.attr("x", function(d, i) { return 10 + (i % 10) * 50; })
+			.attr("y", function(d, i) { return 10 + Math.floor(i / 10) * 20; })
+			.attr("font-size", function(d) { return Math.sqrt(wordFrequency[d] / maxFrequency) * 20 + "px"; })
+			.style("fill", function(d) { return colorScale(wordFrequency[d]); })
+			.style("cursor", "pointer");
+	}
+
+	// Récupérer les textes des articles
+	var texts = Array.from(document.querySelectorAll(".article .content")).map(function(div) {
+		return div.textContent;
+	});
+
+	// Appeler la fonction pour créer le nuage de mots
+	createWordCloud(texts);
 </script>
 </body>
 </html>
