Deploy v1.5.5

Develop v1.5.5

Author: Leogendra

index.html

@@ -80,7 +80,7 @@ <h1>Pixels Visualiser</h1>
                 </div>
 
                 <div class="chart-container">
-                    <h2>📈 Mood evolution</h2>
+                    <h2>📈 Time evolution</h2>
                     <div class="options">
                         <label for="rollingSlider">Rolling average: <span id="rollingValue">1</span> days</label>
                         <input type="range" id="rollingSlider" class="range-slider" min="1" max="60" value="1">
@@ -94,10 +94,26 @@ <h2>📈 Mood evolution</h2>
                             <label for="showYearsCheckbox" title="Show a vertical line for each 1st of January of each year">Show years</label>
                             <input type="checkbox" id="showYearsCheckbox" class="checkbox">
                         </div>
+
+                        <div class="option-item">
+                            <label for="showPixelCheckbox" title="Show a card that displays the Pixel of the day when hovering on a point. Hover the card to fix it">Show Pixel</label>
+                            <input type="checkbox" id="showPixelCheckbox" class="checkbox">
+                        </div>
+
+                        <div class="option-item">
+                            <label for="timeOptionSelect" title="Which statistic do you want to visualise">Option to display</label>
+                            <select id="timeOptionSelect" class="select">
+                                <option value="mood">Mood</option>
+                                <option value="words">Number of words</option>
+                                <option value="tags">Number of tags</option>
+                            </select>
+                        </div>
                     </div>
                     <canvas id="moodChart"></canvas>
                 </div>
 
+                <div id="hoverCardContainer"></div>
+
                 <div class="grid-charts">
                     <div class="chart-container" id="tagFrequencyContainer">
                         <h2>🏷️ Tag frequency</h2>
@@ -322,10 +338,7 @@ <h3>Image settings</h3>
                                     <div class="empty-line"><hr></div>
                                     <div class="empty-line"><hr></div>
 
-                                    <!-- <label for="showDisplayCheckbox" title="Select one word to show on the image, or two words to compare">Display words</label>
-                                    <input type="checkbox" id="showDisplayCheckbox" class="checkbox"> -->
-
-                                    <label for="showFilterSelect" title="Select one word to show on the image, or two words to compare">Advanced filter</label>
+                                    <label for="showFilterSelect" title="Select one word to show on the image, or two words to compare">Word filter</label>
                                     <select id="showFilterSelect" class="select">
                                         <option value="0">Hide</option>
                                         <option value="1">Filter word</option>
@@ -437,8 +450,8 @@ <h2>📅 Search Pixels by date</h2>
                 <img src="assets/pixels_memories_logo.png" alt="Pixels Memories">
             </a>
         </div>
-        <div class="version">Version: v1.4.2</div>
-        <div class="version">Last update: 2025-07-03</div>
+        <div class="version">Version: v1.5.5</div>
+        <div class="version">Last update: 2025-07-07</div>
     </footer>
 
     <!-- Charts.js for graphs -->

scripts/card.js

@@ -117,6 +117,26 @@ async function show_pixel_card(dateStr, scroll = false) {
 }
 
 
+async function display_floating_card(pixels_data, chartElement, pinCard = false) {
+    if (hoverDelay) { return; }
+
+    if (chartElement.length === 0) {
+        container_floating_card.style.display = "none";
+        container_floating_card.innerHTML = "";
+        return;
+    }
+
+    const pixelIndex = chartElement[0].index;
+    const pixel = pixels_data[pixelIndex];
+    const card = await create_pixel_card(pixel);
+
+    container_floating_card.innerHTML = "";
+    container_floating_card.appendChild(card);
+    container_floating_card.style.display = "block";
+    isCardPinned = pinCard;
+}
+
+
 async function setup_calendar_frame() {
     const { colors, scoreType } = get_image_settings();
 

scripts/graphs.js

@@ -18,6 +18,9 @@ let tags_score_chart_instance = null;
 let week_score_chart_instance = null;
 let month_score_chart_instance = null;
 
+let isCardPinned = false;
+let hoverDelay = false;
+
 
 
 
@@ -63,17 +66,67 @@ function fill_missing_dates(data) {
 async function create_mood_chart(data, rollingAverage, displayAverage, displayYears) {
     data = fill_missing_dates(data);
     const dates = data.map(entry => entry.date);
-    const rawScores = data.map(entry => average(entry.scores));
+
+    let rawScores;
+    let minValue;
+    let maxValue;
+    if (timeOption === "mood") {
+        rawScores = data.map(entry => average(entry.scores));
+        minValue = 1;
+        maxValue = 5;
+    }
+    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;
+        });
+        minValue = maximum(rawScores);
+        maxValue = minimum(rawScores);
+    }
+    else if (timeOption === "tags") { // number of tags
+        rawScores = data.map(entry => {
+            if (!entry || !entry.tags) { return null; }
+            return entry.tags.reduce((count, tag) => {
+                if (!Array.isArray(tag.entries)) return count;
+                return count + tag.entries.length;
+            }, 0);
+        });
+        minValue = maximum(rawScores);
+        maxValue = minimum(rawScores);
+    }
 
     const annotations = {};
     if (displayAverage) {
         annotations["mean"] = {
             type: "line",
             mode: "horizontal",
             scaleID: "y",
-            value: average(data.map(entry => average(entry.scores))),
+            value: average(rawScores.filter(score => (score !== null))),
             borderColor: "#ff4444",
             borderWidth: 2,
+            label: {
+                enabled: false,
+                content: `Mean: ${average(rawScores.filter(score => (score !== null))).toFixed(2)}`,
+                position: "top",
+                backgroundColor: "rgba(0,0,0,0.6)",
+                font: {
+                    size: 10,
+                    weight: "bold"
+                }
+            },
+            enter(ctx) {
+                ctx.element.options.label.enabled = true;
+                ctx.chart.draw();
+            },
+            leave(ctx) {
+                ctx.element.options.label.enabled = false;
+                ctx.chart.draw();
+            }
         }
     }
 
@@ -146,11 +199,13 @@ async function create_mood_chart(data, rollingAverage, displayAverage, displayYe
             scales: {
                 y: {
                     beginAtZero: true,
-                    min: 1,
-                    max: 5
+                    min: minValue,
+                    max: maxValue
                 }
             },
-            onClick: (event, elements) => {
+            onClick: async (event, chartElement) => {
+                // Legacy function to scroll to Pixel card
+                /*
                 const points = mood_chart_instance.getElementsAtEventForMode(event, 'nearest', { intersect: true }, true);
                 if (points.length > 0) {
                     const pointIndex = points[0].index;
@@ -159,6 +214,15 @@ async function create_mood_chart(data, rollingAverage, displayAverage, displayYe
 
                     show_pixel_card(dateText, scroll=true);
                 }
+                */
+                display_floating_card(data, chartElement, pinCard=true);
+
+                hoverDelay = true;
+                setTimeout(() => {hoverDelay = false}, 1000);
+            },
+            onHover: async function (event, chartElement) {
+                if (!showPixelCard) { return; }
+                display_floating_card(data, chartElement);
             },
             plugins: {
                 legend: {
@@ -351,4 +415,32 @@ async function create_month_chart(colorsByMonth) {
             }
         }
     });
-}
+}
+
+
+
+
+    canvas_mood.addEventListener("mousemove", async (e) => {
+        if (isCardPinned || hoverDelay) { return; }
+        const x = e.clientX + window.scrollX;
+        const y = e.clientY + window.scrollY;
+        const margin = -10;
+        
+        container_floating_card.style.top = `${y + margin}px`;
+        if (2*x > window.innerWidth) {
+            container_floating_card.style.right = `${window.innerWidth - x + margin}px`;
+            container_floating_card.style.left = "auto";
+        }
+        else {
+            container_floating_card.style.left = `${x + margin}px`;
+            container_floating_card.style.right = "auto";
+        }
+    });
+
+
+container_floating_card.addEventListener("mouseleave", () => {
+    if (!hoverDelay) {
+        container_floating_card.style.display = "none";
+        container_floating_card.innerHTML = "";
+    }
+});

scripts/main.js

@@ -11,10 +11,12 @@ const range_pills = document.querySelectorAll(".pill");
 const stats_container = document.querySelector("#statsContainer");
 const rolling_slider = document.querySelector("#rollingSlider");
 const rolling_slider_text_value = document.querySelector("#rollingValue");
-
-const tag_grid_charts = document.querySelector(".grid-charts");
 const show_average_checkbox = document.querySelector("#showAverageCheckbox");
 const show_years_checkbox = document.querySelector("#showYearsCheckbox");
+const show_pixel_checkbox = document.querySelector("#showPixelCheckbox");
+const select_time_option = document.querySelector("#timeOptionSelect");
+const container_floating_card = document.getElementById("hoverCardContainer");
+
 const nb_tags_inputs = document.querySelectorAll(".input-max-tag");
 const tag_frequency_checkbox = document.querySelector("#tagFrequencyCheckbox");
 
@@ -52,6 +54,8 @@ let current_data = [];
 let averagingValue = 1;
 let showAverage = false;
 let showYears = false;
+let timeOption = "mood";
+let showPixelCard = true;
 
 // Tags
 let tag_stats = {};
@@ -95,13 +99,14 @@ const png_default_settings = {
     showBorder: false,
     showLegend: false,
     showDays: false,
+    showFilter: 0,
     scoreType: "avg",
     layout: "vertical-weeks"
 };
 let png_settings = png_default_settings;
 
 // Card
-let getDynamicBorders = true
+let getDynamicBorders = true; // not editable
 
 
 
@@ -339,6 +344,15 @@ document.addEventListener("DOMContentLoaded", () => {
         create_mood_chart(current_data, averagingValue, showAverage, showYears);
     });
 
+    show_pixel_checkbox.addEventListener("change", (e) => {
+        showPixelCard = e.target.checked;
+    });
+
+    select_time_option.addEventListener("change", (e) => {
+        timeOption = e.target.value;
+        create_mood_chart(current_data, averagingValue, showAverage, showYears);
+    });
+
 
     // Tags
     tag_frequency_checkbox.addEventListener("change", (e) => {

scripts/png.js

@@ -1,3 +1,5 @@
+const div_pixel_export_container = document.querySelector("#pixelGridExportContainer");
+
 const dialog_settings = document.querySelector("#dialogSettings");
 const btn_open_dialog_settings = document.querySelector("#openImageSettingsDialog");
 const btn_reset_dialog_settings = document.querySelector("#resetSettingsDialog");
@@ -153,6 +155,7 @@ function get_pixel_color(scores, colors, scoreType) {
 
 async function set_tags_selects() {
     const all_tags = Object.keys(tag_stats.counts);
+    all_tags.sort((a, b) => a.localeCompare(b, undefined, { sensitivity: 'base' }));
     if (!all_tags || all_tags.length === 0) {
         compareTagSelect1.innerHTML = "<option value=''>No tags available</option>";
         compareTagSelect2.innerHTML = "<option value=''>No tags available</option>";
@@ -355,7 +358,7 @@ async function generate_pixels_PNG(data) {
 
 
             // Draw a gradient if scores are available
-            if ((scoreType == "gradient") && pixel && pixel.scores && (pixel.scores.length > 1)) {
+            if ((scoreType === "gradient") && pixel && pixel.scores && (pixel.scores.length > 1)) {
                 const gradient = ctx.createLinearGradient(x, y, x + squareSize, y); // horizontal
 
                 const scores = pixel.scores;
@@ -581,17 +584,18 @@ function filter_pixels_by_two_keywords(data, keyword1, keyword2, isTag1 = false,
 
 
 function get_compare_settings(data) {
+    const showFilter = parseInt(setting_showFilter.value, 10);
     const compareTag1 = compareSelect1.value === "tag";
     const compareTag2 = compareSelect2.value === "tag";
     const value1 = compareTag1 ? compareTagSelect1.value : compareWordInput1.value.trim();
     const value2 = compareTag2 ? compareTagSelect2.value : compareWordInput2.value.trim();
-    if (value1 && value2) {
+    if ((showFilter > 1) && value1 && value2) {
         return filter_pixels_by_two_keywords(data, value1, value2, compareTag1, compareTag2);
     }
-    else if (value1) {
+    else if ((showFilter > 0) && value1) {
         return filter_pixels_by_keyword(data, value1, compareTag1);
     }
-    else if (value2) {
+    else if ((showFilter > 0) && value2) {
         return filter_pixels_by_keyword(data, value2, compareTag2);
     }
     else {
@@ -624,6 +628,7 @@ function close_dialog_settings(save = false) {
     if (save) { png_settings = get_image_settings(); }
     set_image_settings(png_settings);
     store_settings();
+    setup_calendar_frame();
     dialog_settings.close();
 }
 
@@ -677,4 +682,11 @@ setting_showFilter.addEventListener("change", () => {
         inputWrapper.style.display = isTag ? "none" : "block";
         tagWrapper.style.display = isTag ? "block" : "none";
     });
+});
+
+div_pixel_export_container.addEventListener("keydown", function (e) {
+    if (e.key === "Enter") {
+        e.preventDefault();
+        btn_generate_png.click();
+    }
 });

scripts/statistics.js

@@ -250,10 +250,10 @@ function get_word_frequency(data, orderByMood, minScore, searchText) {
 
         // Filter words of the notes
         let words = notesLower
-            .replace(/[^a-zA-Z0-9]+/g, " ")
+            .replace(/[^\p{L}\p{N}\p{Extended_Pictographic}\u200D\uFE0F]+/gu, " ")
             .split(/\s+/)
             .filter(word =>
-                (word.replace(/[^a-zA-Z]/g, "").length >= 3) && // Word is at least 3 letters long
+                (word.replace(/[^a-zA-Z]/g, "").length >= 3 || /\p{Extended_Pictographic}/u.test(word)) && // Word is at least 3 letters long or emoji
                 (!STOP_WORDS.has(word)) && // Word is not a stop word
                 (
                     (searchWords.length === 0) || // Either no search words or