Skip to content

Commit 9091959

Browse files
LeogendraLeogendra
authored
Deploy 1.5.15
Develop 1.5.15
2 parents a023840 + 63cb721 commit 9091959

12 files changed

Lines changed: 679 additions & 333 deletions

File tree

‎index.html‎

Lines changed: 52 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -64,13 +64,28 @@ <h1>Pixels Visualiser</h1>
6464

6565

6666
<div id="content" style="display: none;">
67-
<div class="pill-selector">
68-
<button class="pill" data-range="7">Last week</button>
69-
<button class="pill" data-range="30">Last month</button>
70-
<button class="pill" data-range="180">Last 6 months</button>
71-
<button class="pill" data-range="365">Last year</button>
72-
<button class="pill" data-range="1095">Last 3 years</button>
73-
<button class="pill active" data-range="99999">All time</button>
67+
<div class="div-pill-selector">
68+
<div class="pill-selector">
69+
<button class="pill" data-range="0">Custom</button>
70+
<button class="pill" data-range="7">Last week</button>
71+
<button class="pill" data-range="30">Last month</button>
72+
<button class="pill" data-range="180">Last 6 months</button>
73+
<button class="pill" data-range="365">Last year</button>
74+
<button class="pill" data-range="1095">Last 3 years</button>
75+
<button class="pill active" data-range="99999">All time</button>
76+
</div>
77+
78+
<div class="pill-date-range-filter" id="dateRangeFilter">
79+
<div class="option-item">
80+
<label for="startDateFilterInput" title="The date of the first Pixel">Start date</label>
81+
<input type="date" id="startDateFilterInput" class="input-date">
82+
</div>
83+
84+
<div class="option-item">
85+
<label for="endDateFilterInput" title="The date of the last Pixel">End date</label>
86+
<input type="date" id="endDateFilterInput" class="input-date">
87+
</div>
88+
</div>
7489
</div>
7590

7691
<div class="no-data-error">No data available for the selected range</div>
@@ -123,12 +138,12 @@ <h2>📈 Time evolution</h2>
123138
title="Show percentage of appearance among all Pixels instead of raw values">Show percentages</label>
124139
<input type="checkbox" id="tagFrequencyCheckbox" class="checkbox">
125140
</div>
126-
141+
127142
<div class="option-item">
128143
<label for="maxTagsInput" title="Number of tags to display">Number of tags</label>
129144
<input type="number" id="maxTagsInput" class="input-nb" min="1" value="10">
130145
</div>
131-
146+
132147
<div class="option-item">
133148
<label for="selectTagCategory" title="Choose the category you want to display">Tag category</label>
134149
<select id="selectTagCategory" class="select"></select>
@@ -148,8 +163,8 @@ <h2>😊 Average score per tag</h2>
148163
</div>
149164
</div>
150165

151-
<div class="grid-charts group-options">
152-
<div class="chart-container" id="WeekdaysContainer">
166+
<div class="grid-charts">
167+
<div class="chart-container group-options" id="WeekdaysContainer">
153168
<h2>🔁 Weekdays average scores</h2>
154169
<div class="options">
155170
<div class="option-item">
@@ -168,7 +183,7 @@ <h2>🔁 Weekdays average scores</h2>
168183
<canvas id="weekdaysChart"></canvas>
169184
</div>
170185

171-
<div class="chart-container" id="WeekdaysContainer">
186+
<div class="chart-container group-options" id="WeekdaysContainer">
172187
<h2>🗓️ Months average scores</h2>
173188
<div class="options">
174189
<div class="option-item">
@@ -197,14 +212,17 @@ <h2>📝 Most frequent words</h2>
197212
<div class="dialog-settings">
198213

199214
<h3>Words settings</h3>
200-
215+
201216
<div class="dialog-settings-group">
202217
<label for="wordsPercentageCheckbox" title="Show percentage of appearance among all Pixels instead of raw values">Show percentages</label>
203218
<input type="checkbox" id="wordsPercentageCheckbox" class="checkbox">
204219

205220
<label for="wordsOrderCheckbox" title="Order the words bellow by decreasing score">Order by score</label>
206221
<input type="checkbox" id="wordsOrderCheckbox" class="checkbox">
207-
222+
223+
<label for="wordsRegexCheckbox" title="Advanced feature. Allow searching with regular expressions">Search by regex</label>
224+
<input type="checkbox" id="wordsRegexCheckbox" class="checkbox">
225+
208226
<label for="minCountInput" title="Minimum number of time this words appears in your Pixels">Minimum count</label>
209227
<input type="number" id="minCountInput" class="input-nb" min="1">
210228

@@ -222,7 +240,7 @@ <h3>Words settings</h3>
222240
<div class="dialog-settings">
223241

224242
<h3>Stopwords settings</h3>
225-
243+
226244
<div class="dialog-settings-group">
227245

228246
<label for="stopwordsLanguageSelect" title="Which language do you want the stopwords to be in?">Stopwords language</label>
@@ -257,9 +275,9 @@ <h3>Stopwords settings</h3>
257275
<label for="minScoreSlider" title="Only count words appearing in a Pixel with a score above the defined threshold">Min score: <span id="minScoreValue">1</span></label>
258276
<input type="range" id="minScoreSlider" class="range-slider" min="10" max="50">
259277
</div>
260-
278+
261279
<div class="option-item">
262-
<label for="searchInput" title='hint: use "*" to search for any word, e.g. "went to *"'>Search words</label>
280+
<label id="labelSearchInput" for="searchInput" title='hint: use "*" to search for any word, e.g. "went to *"'>Search words</label>
263281
<input type="text" id="searchInput" class="input-nb input-large" placeholder='e.g. "happy", "good day", "been to *"'>
264282
</div>
265283
</div>
@@ -279,12 +297,13 @@ <h3>Stopwords settings</h3>
279297
</div>
280298

281299
<div class="option-item">
282-
<label for="wordcloudCompression" title="How much the differences between word sizes are reduced">Words compression</label>
300+
<label for="wordcloudCompression" title="If this number is high, bigger words will have a more similar size than smaller words">Words compression</label>
283301
<input type="number" id="wordcloudCompression" class="input-nb" min="1" max="10">
284302
</div>
285303
</div>
286304

287305
<canvas id="wordcloudCanvas" width="1000" height="400"></canvas>
306+
<!-- <div id="wordcloudCanvas" width="1000" height="400" style="width: 1000px; height: 400px;"></div> -->
288307

289308
<button class="button" id="btnDownloadWordcloud">Download</button>
290309
</div>
@@ -304,29 +323,29 @@ <h2>🖼️ Create Pixels image</h2>
304323
<div class="dialog-settings">
305324

306325
<h3>Image settings</h3>
307-
326+
308327
<div class="dialog-settings-group">
309328
<label for="color1">Score 1</label>
310329
<input type="color" id="color1">
311-
330+
312331
<label for="color2">Score 2</label>
313332
<input type="color" id="color2">
314-
333+
315334
<label for="color3">Score 3</label>
316335
<input type="color" id="color3">
317-
336+
318337
<label for="color4">Score 4</label>
319338
<input type="color" id="color4">
320-
339+
321340
<label for="color5">Score 5</label>
322341
<input type="color" id="color5">
323-
342+
324343
<label for="colorEmpty">Background</label>
325344
<input type="color" id="colorEmpty">
326-
345+
327346
<div class="empty-line"><hr></div>
328347
<div class="empty-line"><hr></div>
329-
348+
330349
<label for="squareSizeInput" title="The size of each Pixel on the generated image">Square size (px)</label>
331350
<input type="number" id="squareSizeInput" class="input-nb" min="2" max="100">
332351

@@ -342,7 +361,7 @@ <h3>Image settings</h3>
342361

343362
<label for="showDaysCheckbox" title="Show each day of the month on the image">Show days</label>
344363
<input type="checkbox" id="showDaysCheckbox" class="checkbox">
345-
364+
346365
<div class="empty-line"><hr></div>
347366
<div class="empty-line"><hr></div>
348367

@@ -354,7 +373,7 @@ <h3>Image settings</h3>
354373
</select>
355374

356375
</div>
357-
376+
358377
<div class="dialog-buttons">
359378
<button type="button" class="button button-secondary" id="resetSettingsDialog">Reset</button>
360379
<button type="button" class="button" id="cancelSettingsDialog">Cancel</button>
@@ -411,7 +430,7 @@ <h3>Image settings</h3>
411430
<option value="word">Word</option>
412431
<option value="tag">Tag</option>
413432
</select>
414-
<input type="text" id="compareWordInput2" class="input-nb input-large" placeholder="enter a word">
433+
<input type="text" id="compareWordInput2" class="input-nb input-large" placeholder="enter a word" value="">
415434
<select id="compareTagSelect2" class="select" style="display: none;"></select>
416435
</div>
417436
</div>
@@ -428,7 +447,7 @@ <h2>📅 Search Pixels by date</h2>
428447

429448
<div class="option-item">
430449
<label for="dateSearchInput" title="Colors and score type can be selected above">Select date</label>
431-
<input type="date" id="dateSearchInput" class="input-date"">
450+
<input type="date" id="dateSearchInput" class="input-date">
432451
</div>
433452

434453
<div class="options">
@@ -456,8 +475,8 @@ <h2>📅 Search Pixels by date</h2>
456475
<img src="assets/pixels_memories_logo.png" alt="Pixels Memories">
457476
</a>
458477
</div>
459-
<div class="version">Version: v1.5.10</div>
460-
<div class="version">Last update: 2025-07-25</div>
478+
<div class="version">Version: v1.5.15</div>
479+
<div class="version">Last update: 2025-08-08</div>
461480
</footer>
462481

463482
<!-- Charts.js for graphs -->
@@ -466,7 +485,7 @@ <h2>📅 Search Pixels by date</h2>
466485
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
467486

468487
<!-- Wordcloud2.js for wordcloud -->
469-
<script src="https://cdnjs.cloudflare.com/ajax/libs/wordcloud2.js/1.1.2/wordcloud2.min.js"></script>
488+
<script src="https://cdnjs.cloudflare.com/ajax/libs/wordcloud2.js/1.2.3/wordcloud2.min.js"></script>
470489

471490
<!-- Fullcalendar.js for date input -->
472491
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.js"></script>

‎scripts/graphs.js‎

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -63,27 +63,27 @@ function fill_missing_dates(data) {
6363

6464

6565

66-
async function create_mood_chart(data, rollingAverage, displayAverage, displayYears) {
67-
data = fill_missing_dates(data);
66+
async function create_mood_chart() {
67+
data = fill_missing_dates(current_data);
6868
const dates = data.map(entry => entry.date);
6969

7070
let rawScores;
7171
let minValue;
7272
let maxValue;
73-
if (timeOption === "mood") {
73+
if (moodTimeOption === "mood") {
7474
rawScores = data.map(entry => average(entry.scores));
7575
minValue = 1;
7676
maxValue = 5;
7777
}
78-
else if (timeOption === "words") { // number of words
78+
else if (moodTimeOption === "words") { // number of words
7979
rawScores = data.map(entry => {
8080
if (!entry || !entry.notes) { return null; }
8181
return entry.notes.split(/\s+/).length;
8282
});
8383
minValue = maximum(rawScores);
8484
maxValue = minimum(rawScores);
8585
}
86-
else if (timeOption === "tags") { // number of tags
86+
else if (moodTimeOption === "tags") { // number of tags
8787
rawScores = data.map(entry => {
8888
if (!entry || !entry.tags) { return null; }
8989
return entry.tags.reduce((count, tag) => {
@@ -96,7 +96,7 @@ async function create_mood_chart(data, rollingAverage, displayAverage, displayYe
9696
}
9797

9898
const annotations = {};
99-
if (displayAverage) {
99+
if (moodShowAverage) {
100100
annotations["mean"] = {
101101
type: "line",
102102
mode: "horizontal",
@@ -125,7 +125,7 @@ async function create_mood_chart(data, rollingAverage, displayAverage, displayYe
125125
}
126126
}
127127

128-
if (displayYears) {
128+
if (moodShowYears) {
129129
dates.forEach(dateStr => {
130130
const [year, month, day] = dateStr.split("-").map(Number);
131131
if (month === 1 && day === 1) {
@@ -161,7 +161,7 @@ async function create_mood_chart(data, rollingAverage, displayAverage, displayYe
161161

162162
const averagedScores = rawScores.map((scores, i) => {
163163
if (scores == null) { return null; }
164-
const windowStart = Math.max(0, i - rollingAverage + 1);
164+
const windowStart = Math.max(0, i - moodAveragingValue + 1);
165165
let sum = 0;
166166
let count = 0;
167167
for (let j = windowStart; j <= i; j++) {
@@ -216,7 +216,7 @@ async function create_mood_chart(data, rollingAverage, displayAverage, displayYe
216216
setTimeout(() => {hoverDelay = false}, 1000);
217217
},
218218
onHover: async function (event, chartElement) {
219-
if (!showPixelCard) { return; }
219+
if (!moodShowPixelCard) { return; }
220220
display_floating_card(data, chartElement);
221221
},
222222
plugins: {
@@ -232,13 +232,13 @@ async function create_mood_chart(data, rollingAverage, displayAverage, displayYe
232232
}
233233

234234

235-
async function create_tag_frequency_chart(isPercentage, maxTags) {
235+
async function create_tag_frequency_chart() {
236236
const tagCounts = tag_stats.counts;
237237
const nbPixels = tag_stats.totalPixels;
238238
const sortedTags = Object.entries(tagCounts)
239239
.filter(tag => (tagCategory === "All") || (tagCategory === tag_stats.categories[tag[0]]))
240240
.sort(([, a], [, b]) => b - a)
241-
.slice(0, maxTags);
241+
.slice(0, nbMaxTags);
242242

243243
if (sortedTags.length > 0) {
244244
if (tags_frequency_chart_instance) {
@@ -254,8 +254,8 @@ async function create_tag_frequency_chart(isPercentage, maxTags) {
254254
data: {
255255
labels: sortedTags.map(([tag]) => tag),
256256
datasets: [{
257-
label: isPercentage ? "Tag frequency (%)" : "Tag frequency",
258-
data: sortedTags.map(([, count]) => isPercentage ? (100 * count / nbPixels).toFixed(2) : count),
257+
label: tagsPercentage ? "Tag frequency (%)" : "Tag frequency",
258+
data: sortedTags.map(([, count]) => tagsPercentage ? (100 * count / nbPixels).toFixed(2) : count),
259259
backgroundColor: secondaryColor
260260
}]
261261
},
@@ -273,13 +273,13 @@ async function create_tag_frequency_chart(isPercentage, maxTags) {
273273
};
274274

275275

276-
async function create_tag_score_chart(maxTags) {
276+
async function create_tag_score_chart() {
277277
const tagScores = tag_stats.scores;
278278
const averages = Object.entries(tagScores)
279279
.filter(tag => (tagCategory === "All") || (tagCategory === tag_stats.categories[tag[0]]))
280280
.map(([tag, { total, count }]) => ([tag, total / count]))
281281
.sort(([, a], [, b]) => b - a)
282-
.slice(0, maxTags);
282+
.slice(0, nbMaxTags);
283283

284284
if (averages.length > 0) {
285285
if (tags_score_chart_instance) {
@@ -386,7 +386,8 @@ async function sync_tag_charts_hover() {
386386
}
387387

388388

389-
async function create_weekday_chart(firstDayOfWeek) {
389+
async function create_weekday_chart() {
390+
const firstDayOfWeek = png_settings.firstDayOfWeek
390391
let daysOfWeek = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
391392
daysOfWeek = daysOfWeek.slice(firstDayOfWeek).concat(daysOfWeek.slice(0, firstDayOfWeek));
392393

@@ -424,7 +425,7 @@ async function create_weekday_chart(firstDayOfWeek) {
424425
};
425426

426427

427-
async function create_month_chart(colorsByMonth) {
428+
async function create_month_chart() {
428429
const seasons_colors = {
429430
"winter": "#66ccff",
430431
"spring": "#66ff99",
@@ -464,7 +465,7 @@ async function create_month_chart(colorsByMonth) {
464465
datasets: [{
465466
label: "Months",
466467
data: month_data.map(([_, avg]) => avg.toFixed(2)),
467-
backgroundColor: colorsByMonth ? month_data.map(([month, _]) => seasons_colors[month_seasons[month]]) : secondaryColor,
468+
backgroundColor: monthSeasonColors ? month_data.map(([month, _]) => seasons_colors[month_seasons[month]]) : secondaryColor,
468469
},
469470
]
470471
},

0 commit comments

Comments
 (0)