From 0e908c84f65cf8bfc465090096993a99ae787653 Mon Sep 17 00:00:00 2001
From: Uku Taht <uku.taht@gmail.com>
Date: Thu, 31 Mar 2022 10:20:13 +0300
Subject: [PATCH] Show weekday and year in datepicker when relevant
---
assets/js/dashboard/datepicker.js | 2 +-
assets/js/dashboard/stats/visitor-graph.js | 22 +++-------------------
assets/js/dashboard/util/date.js | 21 +++++++++++++++------
3 files changed, 19 insertions(+), 26 deletions(-)
diff --git a/assets/js/dashboard/datepicker.js b/assets/js/dashboard/datepicker.js
index 0f3d6ad1..1e7816e6 100644
--- a/assets/js/dashboard/datepicker.js
+++ b/assets/js/dashboard/datepicker.js
@@ -383,7 +383,7 @@ class DatePicker extends React.Component {
renderPicker() {
return (
<div
- className="w-20 sm:w-36 md:w-44 md:relative"
+ className="w-20 sm:w-36 md:w-48 md:relative"
ref={(node) => (this.dropDownNode = node)}
>
<div
diff --git a/assets/js/dashboard/stats/visitor-graph.js b/assets/js/dashboard/stats/visitor-graph.js
index 9a042c3e..1ef8fd61 100644
--- a/assets/js/dashboard/stats/visitor-graph.js
+++ b/assets/js/dashboard/stats/visitor-graph.js
@@ -51,32 +51,16 @@ function buildDataSet(plot, present_index, ctx, label) {
}
}
-const MONTHS = [
- "January", "February", "March",
- "April", "May", "June", "July",
- "August", "September", "October",
- "November", "December"
-]
-
-const MONTHS_ABBREV = [
- "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
-]
-
-const DAYS_ABBREV = [
- "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"
-]
+import {formatMonthYYYY, formatDay} from '../util/date'
function dateFormatter(interval, longForm) {
return function(isoDate, _index, _ticks) {
let date = new Date(isoDate)
if (interval === 'month') {
- return MONTHS[date.getUTCMonth()];
+ return formatMonthYYYY(date)
} else if (interval === 'date') {
- var day = DAYS_ABBREV[date.getUTCDay()];
- var date_ = date.getUTCDate();
- var month = MONTHS_ABBREV[date.getUTCMonth()];
- return day + ', ' + date_ + ' ' + month;
+ return formatDay(date)
} else if (interval === 'hour') {
const parts = isoDate.split(/[^0-9]/);
date = new Date(parts[0],parts[1]-1,parts[2],parts[3],parts[4],parts[5])
diff --git a/assets/js/dashboard/util/date.js b/assets/js/dashboard/util/date.js
index dd8caa1e..675aa9f1 100644
--- a/assets/js/dashboard/util/date.js
+++ b/assets/js/dashboard/util/date.js
@@ -28,20 +28,25 @@ const MONTHS = [
"November", "December"
]
+const DAYS_ABBREV = [
+ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"
+]
+
export function formatMonthYYYY(date) {
return `${MONTHS[date.getMonth()]} ${date.getFullYear()}`;
}
-export function formatMonth(date) {
- return `${MONTHS[date.getMonth()]}`;
-}
-
export function formatDay(date) {
- return `${date.getDate()} ${formatMonth(date)}`;
+ var weekday = DAYS_ABBREV[date.getUTCDay()];
+ if (date.getFullYear() !== (new Date()).getFullYear()) {
+ return `${weekday}, ${date.getDate()} ${formatMonthShort(date)} ${date.getFullYear()}`;
+ } else {
+ return `${weekday}, ${date.getDate()} ${formatMonthShort(date)}`;
+ }
}
export function formatDayShort(date) {
- return `${date.getDate()} ${formatMonth(date).substring(0, 3)}`;
+ return `${date.getDate()} ${formatMonthShort(date)}`;
}
export function parseUTCDate(dateString) {
@@ -98,3 +103,7 @@ export function isAfter(date1, date2, period) {
}
return date1.getDate() > date2.getDate()
}
+
+function formatMonthShort(date) {
+ return `${MONTHS[date.getMonth()].substring(0, 3)}`;
+}
--
GitLab