Deploy v1.5.10

Develop v1.5.10

Author: Leogendra

assets/settings_icon_black.svg

@@ -114,38 +114,41 @@ <h2>📈 Time evolution</h2>
 
                 <div id="hoverCardContainer"></div>
 
-                <div class="grid-charts">
-                    <div class="chart-container" id="tagFrequencyContainer">
-                        <h2>🏷️ Tag frequency</h2>
-                        <div class="options">
-                            <div class="option-item">
-                                <label for="tagFrequencyCheckbox"
-                                    title="Show percentage of appearance among all Pixels instead of raw values">Show percentages</label>
-                                <input type="checkbox" id="tagFrequencyCheckbox" class="checkbox">
-                            </div>
+                <div class="chart-container group-options">
+                    <div class="options small title"><img src="assets/settings_icon_black.svg" alt="Settings" class="icon-settings"><span>Tag options</span></div>
 
-                            <div class="option-item">
-                                <label for="maxTagsInput1" title="Number of tags to display">Number of tags</label>
-                                <input type="number" id="maxTagsInput1" class="input-nb input-max-tag" min="1"
-                                    value="10">
-                            </div>
+                    <div class="options small">
+                        <div class="option-item">
+                            <label for="tagFrequencyCheckbox"
+                            title="Show percentage of appearance among all Pixels instead of raw values">Show percentages</label>
+                            <input type="checkbox" id="tagFrequencyCheckbox" class="checkbox">
+                        </div>
+                        
+                        <div class="option-item">
+                            <label for="maxTagsInput" title="Number of tags to display">Number of tags</label>
+                            <input type="number" id="maxTagsInput" class="input-nb" min="1" value="10">
+                        </div>
+                        
+                        <div class="option-item">
+                            <label for="selectTagCategory" title="Choose the category you want to display">Tag category</label>
+                            <select id="selectTagCategory" class="select"></select>
                         </div>
+                    </div>
+                </div>
+
+                <div class="grid-charts">
+                    <div class="chart-container group-options" id="tagFrequencyContainer">
+                        <h2>🏷️ Tag frequency</h2>
                         <canvas id="tagChart" class="free-canvas"></canvas>
                     </div>
 
-                    <div class="chart-container" id="tagScoreContainer">
+                    <div class="chart-container group-options" id="tagScoreContainer">
                         <h2>😊 Average score per tag</h2>
-                        <div class="options">
-                            <div class="option-item">
-                                <label for="maxTagsInput2" title="Number of tags to display">Number of tags</label>
-                                <input type="number" id="maxTagsInput2" class="input-nb input-max-tag" min="1">
-                            </div>
-                        </div>
                         <canvas id="tagScoreChart" class="free-canvas"></canvas>
                     </div>
                 </div>
 
-                <div class="grid-charts">
+                <div class="grid-charts group-options">
                     <div class="chart-container" id="WeekdaysContainer">
                         <h2>🔁 Weekdays average scores</h2>
                         <div class="options">
@@ -453,8 +456,8 @@ <h2>📅 Search Pixels by date</h2>
                 <img src="assets/pixels_memories_logo.png" alt="Pixels Memories">
             </a>
         </div>
-        <div class="version">Version: v1.5.7</div>
-        <div class="version">Last update: 2025-07-09</div>
+        <div class="version">Version: v1.5.10</div>
+        <div class="version">Last update: 2025-07-25</div>
     </footer>
 
     <!-- Charts.js for graphs -->

index.html

@@ -32,7 +32,7 @@ async function load_colored_score_SVG(score) {
 async function create_pixel_card(pixel) {
     const card = document.createElement("div");
     card.className = "pixel-card";
-
+    
     const date = new Date(pixel.date);
     const formattedDate = date.toLocaleDateString(undefined, {
         year: "numeric", month: "long", day: "numeric"
@@ -43,40 +43,60 @@ async function create_pixel_card(pixel) {
     card.appendChild(title);
 
     if (pixel.scores?.length) {
-        const scoreWrapper = document.createElement("div");
-        scoreWrapper.className = "div-pixel-score-icons";
+        const meanScore = average(pixel.scores).toFixed(2);
+        const div_scores = document.createElement("div");
+        div_scores.className = "div-pixel-score-icons";
 
         for (const score of pixel.scores) {
             const svg = await load_colored_score_SVG(score);
             svg.classList.add("pixel-icon");
 
             const title = document.createElementNS("http://www.w3.org/2000/svg", "title");
-            title.textContent = `Score: ${score}`;
+            title.textContent = `Score: ${score} (day: ${meanScore})`;
             svg.appendChild(title);
 
-            scoreWrapper.appendChild(svg);
+            div_scores.appendChild(svg);
         }
 
-        card.appendChild(scoreWrapper);
+        card.appendChild(div_scores);
     }
 
     if (pixel.notes) {
-        const notes = document.createElement("div");
-        notes.className = "div-pixel-notes";
-        notes.innerHTML += pixel.notes.replace(/\n/g, "<br>");
-        card.appendChild(notes);
+        const div_notes = document.createElement("div");
+        div_notes.className = "div-pixel-notes";
+        div_notes.innerHTML += pixel.notes.replace(/\n/g, "<br>");
+        card.appendChild(div_notes);
     }
 
     if (pixel.tags.length > 0) {
-        const tags = document.createElement("div");
-        tags.className = "div-pixel-tags";
-
-        const tagStrings = pixel.tags.flatMap(tag => {
-            return tag.entries.map(entry => `<span class="tag-pill" title="${tag.type}">${entry}</span>`);
+        const div_tags = document.createElement("div");
+        div_tags.className = "div-pixel-tags";
+        
+        pixel.tags.forEach(category => {
+            const div_tag_category = document.createElement("div");
+            div_tag_category.className = "tag-category";
+    
+            const tag_title = document.createElement("div");
+            tag_title.className = "tag-category-title";
+            tag_title.textContent = category.type;
+
+            const tags_container = document.createElement("div");
+            tags_container.className = "tag-category-tags";
+            
+            category.entries.forEach(tag => {
+                const tag_pill = document.createElement("span");
+                tag_pill.className = "tag-pill";
+                tag_pill.title = category.type;
+                tag_pill.textContent = tag;
+                tags_container.appendChild(tag_pill);
+            })
+
+            div_tag_category.appendChild(tag_title);
+            div_tag_category.appendChild(tags_container);
+            div_tags.appendChild(div_tag_category);
         });
 
-        tags.innerHTML += tagStrings.join("");
-        card.appendChild(tags);
+        card.appendChild(div_tags);
     }
 
     if (getDynamicBorders) {

scripts/card.js

@@ -78,12 +78,7 @@ async function create_mood_chart(data, rollingAverage, displayAverage, displayYe
     else if (timeOption === "words") { // number of words
        rawScores = data.map(entry => {
             if (!entry || !entry.notes) { return null; }
-            const words = entry.notes
-                .toLowerCase()
-                .replace(/[^a-zA-Z0-9]+/g, " ")
-                .split(/\s+/)
-                .filter(word => word.replace(/[^a-zA-Z]/g, "").length >= 3);
-            return words.length;
+            return entry.notes.split(/\s+/).length;
         });
         minValue = maximum(rawScores);
         maxValue = minimum(rawScores);
@@ -241,11 +236,13 @@ async function create_tag_frequency_chart(isPercentage, maxTags) {
     const tagCounts = tag_stats.counts;
     const nbPixels = tag_stats.totalPixels;
     const sortedTags = Object.entries(tagCounts)
+        .filter(tag => (tagCategory === "All") || (tagCategory === tag_stats.categories[tag[0]]))
         .sort(([, a], [, b]) => b - a)
         .slice(0, maxTags);
 
     if (sortedTags.length > 0) {
         if (tags_frequency_chart_instance) {
+            detach_chart_hover(tags_frequency_chart_instance);
             tags_frequency_chart_instance.destroy();
         }
 
@@ -279,12 +276,14 @@ async function create_tag_frequency_chart(isPercentage, maxTags) {
 async function create_tag_score_chart(maxTags) {
     const tagScores = tag_stats.scores;
     const averages = Object.entries(tagScores)
+        .filter(tag => (tagCategory === "All") || (tagCategory === tag_stats.categories[tag[0]]))
         .map(([tag, { total, count }]) => ([tag, total / count]))
         .sort(([, a], [, b]) => b - a)
         .slice(0, maxTags);
 
     if (averages.length > 0) {
         if (tags_score_chart_instance) {
+            detach_chart_hover(tags_score_chart_instance);
             tags_score_chart_instance.destroy();
         }
 
@@ -321,6 +320,72 @@ async function create_tag_score_chart(maxTags) {
 };
 
 
+function sync_tag_hover(sourceChart, targetChart) {
+    function remove_tooltip_target() {
+        targetChart.setActiveElements([]);
+        targetChart.tooltip.setActiveElements([], {});
+        targetChart.draw();
+    }
+
+    function set_tooltip_target(e) {
+        // check if sourceChart still exists
+        if (!sourceChart?.canvas) {
+            return;
+        }
+        const tooltipActive = sourceChart.tooltip.getActiveElements();
+        const activePoints = sourceChart.getElementsAtEventForMode(e, "index", { intersect: false, axis: "y" }, false);
+        if ((tooltipActive.length === 0) || (activePoints.length === 0)) {
+            remove_tooltip_target();
+            return;
+        }
+
+        const index = activePoints[0].index;
+        const label = sourceChart.data.labels[index];
+        const targetIndex = targetChart.data.labels.indexOf(label);
+        if (targetIndex === -1) { return; }
+
+        const canvasRect = targetChart.canvas.getBoundingClientRect();
+        const sourceRect = sourceChart.canvas.getBoundingClientRect();
+        const relativeY = e.clientY - sourceRect.top;
+        const centerX = canvasRect.left + canvasRect.width / 2;
+
+        targetChart.setActiveElements([{ datasetIndex: 0, index: targetIndex }]);
+        targetChart.tooltip.setActiveElements(
+            [{ datasetIndex: 0, index: targetIndex }],
+            { x: centerX, y: canvasRect.top + relativeY }
+        );
+        targetChart.update();
+    }
+
+    sourceChart.canvas.addEventListener("mousemove", set_tooltip_target);
+    sourceChart.canvas.addEventListener("mouseleave", remove_tooltip_target);
+
+    // Add hover handlers to the source chart
+    sourceChart._hoverHandlers = {
+        mousemove: set_tooltip_target,
+        mouseleave: remove_tooltip_target
+    };
+}
+
+
+function detach_chart_hover(chartInstance) {
+    const handlers = chartInstance._hoverHandlers;
+    if (handlers) {
+        chartInstance.canvas.removeEventListener("mousemove", handlers.mousemove);
+        chartInstance.canvas.removeEventListener("mouseleave", handlers.mouseleave);
+        delete chartInstance._hoverHandlers;
+    }
+}
+
+
+async function sync_tag_charts_hover() {
+    if (tags_frequency_chart_instance && tags_score_chart_instance) {
+        sync_tag_hover(tags_frequency_chart_instance, tags_score_chart_instance);
+        sync_tag_hover(tags_score_chart_instance, tags_frequency_chart_instance);
+    }
+}
+
+
 async function create_weekday_chart(firstDayOfWeek) {
     let daysOfWeek = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
     daysOfWeek = daysOfWeek.slice(firstDayOfWeek).concat(daysOfWeek.slice(0, firstDayOfWeek));