diff --git a/assets/js/dashboard/datepicker.js b/assets/js/dashboard/datepicker.js index 0f3d6ad19e3aade624270123f6ef9214887699f9..1e7816e621129a30b13c58405c4a42ec839bec1a 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 9a042c3e44e9f4bf7f444cf1ed6835fb8b02d0ae..1ef8fd6158a53aad32359224ffda04befa1859c1 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 dd8caa1e68d4c96d2ab8a9fdc237ffd682659383..675aa9f1894ba0df9000539fc09d47f5c94e2413 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)}`; +}