beginning on statistics

Simon-Rey · Nov 4, 2024 · 7848957 · 7848957
1 parent e54a7e0
commit 7848957
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 1 deletion.
diff --git a/petitbonhomme/_layouts/default.html b/petitbonhomme/_layouts/default.html
@@ -30,6 +30,7 @@
     <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
     <noscript><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"></noscript>
 
+    {{ page.extra_html_head }}
 </head>
 <body>
 
@@ -42,6 +43,7 @@
         <nav><a class="navigation-icon calendar-icon" href="{{ 'calendar/' | append: latest_year | append: '/' | append: latest_month | relative_url }}"><i class="fa-solid fa-calendar"></i></a></nav>
         <nav><a class="navigation-icon wardrobe-icon" href="{{ 'wardrobe' | relative_url }}"><i class="fa-solid fa-shirt"></i></a></nav>
         <nav><a class="navigation-icon style-icon" href="{{ 'styleme' | relative_url }}"><i class="fa-solid fa-snowman"></i></a></nav>
+        <nav><a class="navigation-icon stats-icon" href="{{ 'statistics' | relative_url }}"><i class="fa-solid fa-chart-simple"></i></a></nav>
         <nav><a class="navigation-icon info-icon" href="{{ 'info' | relative_url }}"><i class="fa-solid fa-circle-info"></i></a></nav>
     </div>
 </header>

diff --git a/petitbonhomme/_plugins/wardrobe_color_count.rb b/petitbonhomme/_plugins/wardrobe_color_count.rb
@@ -0,0 +1,31 @@
+# _plugins/generate_color_counts.rb
+require 'yaml'
+
+module Jekyll
+  class ColorCountGenerator < Generator
+    safe true
+    priority :high
+
+    def generate(site)
+      # Load the clothing items and color definitions
+      clothing_items = YAML.load_file(File.join(site.source, '_data', 'clothing_items.yml'))
+      color_definitions = YAML.load_file(File.join(site.source, '_data', 'clothing_items_colors.yml'))
+
+      # Initialize color counts based on color definitions
+      color_counts = Hash.new(0)
+      color_definitions.each do |color|
+        color_counts[color['name']] = 0
+      end
+
+      # Count occurrences of each color in clothing items
+      clothing_items.each do |item|
+        item['colors'].each do |color|
+          color_counts[color] += 1 if color_counts.key?(color)
+        end
+      end
+
+      # Store the color counts in the site data for access in templates
+      site.data['color_counts'] = color_counts
+    end
+  end
+end
diff --git a/petitbonhomme/assets/css/style.css b/petitbonhomme/assets/css/style.css
@@ -117,7 +117,7 @@ header {
 
 .navigation-wrap {
     display: grid;
-    grid-template-columns: repeat(4, 7ch);
+    grid-template-columns: repeat(5, 7ch);
     height: 7ch;
 }
 
@@ -936,3 +936,12 @@ Style Me Page
 #style-me-wrap #wardrobe-wrap .category-item {
     max-height: 25vh;
 }
+
+/* =======
+Statistics
+======= */
+
+.graph-wrap {
+    width: min(40vw, 40vh);
+    height: min(40vw, 40vh);
+}
diff --git a/petitbonhomme/statistics.md b/petitbonhomme/statistics.md
@@ -0,0 +1,56 @@
+---
+layout: default
+title: PetitBonhomme | Statistics
+extra_html_head: <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+---
+
+<h1>Statistics</h1>
+
+<h2>Wardrobe Content</h2>
+
+<div class="graph-wrap">
+<canvas id="colorPieChart"></canvas>
+</div>
+
+<script>
+const colorData = {{ site.data.clothing_items_colors | jsonify }};
+
+const colorMapping = {};
+colorData.forEach(color => {
+  colorMapping[color.name] = color.HTML_code;
+});
+
+const colorCounts = {{ site.data.color_counts | jsonify }};
+
+const colorLabels = Object.keys(colorCounts);
+const colorValues = Object.values(colorCounts);
+const colorHexValues = colorLabels.map(color => `#${colorMapping[color] || 'CCCCCC'}`);
+
+const ctx = document.getElementById('colorPieChart').getContext('2d');
+new Chart(ctx, {
+  type: 'pie',
+  data: {
+    labels: colorLabels,
+    datasets: [{
+      data: colorValues,
+      backgroundColor: colorHexValues,
+      hoverOffset: 4
+    }]
+  },
+  options: {
+    responsive: true,
+    plugins: {
+      legend: {
+        display: false,
+      },
+      tooltip: {
+        callbacks: {
+          label: function(tooltipItem) {
+            return `${tooltipItem.label}: ${tooltipItem.raw.toFixed(2)}%`;
+          }
+        }
+      }
+    }
+  }
+});
+</script>