Simplify function to get x labels

Author: apata

assets/js/dashboard/stats/graph/date-formatter.js

@@ -1,12 +1,4 @@
-import { parseUTCDate, formatMonthYYYY, formatDayShort } from '../../util/date'
-
-const browserDateFormat = Intl.DateTimeFormat(navigator.language, {
-  hour: 'numeric'
-})
-
-const is12HourClock = function () {
-  return browserDateFormat.resolvedOptions().hour12
-}
+import { parseUTCDate, formatMonthYYYY, formatDayShort, is12HourClock } from '../../util/date'
 
 const monthIntervalFormatter = {
   long(isoDate, options) {

assets/js/dashboard/stats/graph/main-graph.tsx

@@ -6,7 +6,13 @@ import {
   MetricFormatterShort
 } from '../reports/metric-formatter'
 import { DashboardPeriod } from '../../dashboard-time-periods'
-import dateFormatter from './date-formatter'
+import {
+  formatMonthYYYY,
+  formatDayShort,
+  formatTime,
+  is12HourClock,
+  parseNaiveDate
+} from '../../util/date'
 import classNames from 'classnames'
 import { ChangeArrow } from '../reports/change-arrow'
 import { Metric } from '../../../types/query-api'
@@ -50,9 +56,9 @@ type MainGraphResponse = {
 }
 type GraphDatum = {
   value: number | null
-  timeLabel: string | null 
+  timeLabel: string | null
   comparisonValue?: number | null
-  comparisonTimeLabel?: string | null 
+  comparisonTimeLabel?: string | null
   change?: number | null
 }
 
@@ -469,55 +475,46 @@ export const MainGraphContainer = React.forwardRef<
 })
 
 const getXLabel = (
-  xValue: '__blank__' | string,
+  // in the format "YYYY-MM-DD" or "YYYY-MM-DD HH:MM:SS"
+  xValue: string,
   {
     shouldShowYear,
     period,
     interval
-  }: { shouldShowYear: boolean; interval: string; period: DashboardPeriod }
-) => {
-  if (xValue == '__blank__') return ''
-
-  if (interval === 'hour' && period !== 'day') {
-    const date = dateFormatter({
-      interval: 'day',
-      longForm: false,
-      period: period,
-      shouldShowYear,
-      isPeriodFull: false
-    })(xValue)
-
-    const hour = dateFormatter({
-      interval: interval,
-      longForm: false,
-      period: period,
-      shouldShowYear,
-      isPeriodFull: false
-    })(xValue)
-
-    // Returns a combination of date and hour. This is because
-    // small intervals like hour may return multiple days
-    // depending on the queried period.
-    return `${date}, ${hour}`
+  }: {
+    shouldShowYear: boolean
+    /* "month" | "week" | "day" | "hour" | "minute" */
+    interval: string
+    period: DashboardPeriod
   }
-
-  if (interval === 'minute' && period !== 'realtime') {
-    return dateFormatter({
-      interval: 'hour',
-      longForm: false,
-      period: period,
-      isPeriodFull: false,
-      shouldShowYear: false
-    })(xValue)
+) => {
+  const parsedDate = parseNaiveDate(xValue)
+  switch (interval) {
+    case 'month':
+      return formatMonthYYYY(parsedDate)
+    case 'week':
+    case 'day':
+      return formatDayShort(parsedDate, shouldShowYear)
+    case 'hour': {
+      const time = formatTime(parsedDate, {
+        use12HourClock: is12HourClock(),
+        includeMinutes: false
+      })
+      if (period === 'day') {
+        return time
+      }
+      // when viewing a period like Last 24h or Last 7 days, including the date is necessary for clarity
+      return `${formatDayShort(parsedDate, shouldShowYear)}, ${time}`
+    }
+    case 'minute':
+      if (period === 'realtime') return `${xValue}m`
+      return formatTime(parsedDate, {
+        use12HourClock: is12HourClock(),
+        includeMinutes: true
+      })
+    default:
+      return ''
   }
-
-  return dateFormatter({
-    interval: interval,
-    longForm: false,
-    period: period,
-    shouldShowYear,
-    isPeriodFull: false
-  })(xValue)
 }
 
 const remapToGraphData = (

assets/js/dashboard/util/date.js

@@ -3,6 +3,14 @@ import utc from 'dayjs/plugin/utc'
 
 dayjs.extend(utc)
 
+const browserDateFormat = Intl.DateTimeFormat(navigator.language, {
+  hour: 'numeric'
+})
+
+export function is12HourClock () {
+  return browserDateFormat.resolvedOptions().hour12
+}
+
 export function utcNow() {
   return dayjs()
 }
@@ -40,6 +48,13 @@ export function formatDay(date) {
   }
 }
 
+export function formatTime(date, { use12HourClock, includeMinutes }) {
+  if (use12HourClock) {
+    return includeMinutes ? date.format('h:mma') : date.format('ha')
+  }
+  return date.format('HH:mm')
+}
+
 export function formatDayShort(date, includeYear = false) {
   if (includeYear) {
     return date.format('D MMM YY')

assets/js/dashboard/util/date.test.ts

@@ -1,6 +1,8 @@
 import {
   dateForSite,
   formatDayShort,
+  formatTime,
+  formatMonthYYYY,
   formatISO,
   nowForSite,
   parseNaiveDate,
@@ -126,3 +128,87 @@ describe('formatting site-timezoned datetimes from database works flawlessly', (
     )
   })
 })
+
+describe(formatMonthYYYY.name, () => {
+  it('formats a date as "Month YYYY"', () => {
+    expect(formatMonthYYYY(parseNaiveDate('2025-06-15'))).toEqual('June 2025')
+  })
+
+  it('formats January correctly', () => {
+    expect(formatMonthYYYY(parseNaiveDate('2024-01-01'))).toEqual(
+      'January 2024'
+    )
+  })
+})
+
+describe(formatDayShort.name, () => {
+  it('formats without year by default', () => {
+    expect(formatDayShort(parseNaiveDate('2025-06-05'))).toEqual('5 Jun')
+  })
+
+  it('includes 2-digit year when requested', () => {
+    expect(formatDayShort(parseNaiveDate('2025-06-05'), true)).toEqual(
+      '5 Jun 25'
+    )
+  })
+})
+
+describe(formatTime.name, () => {
+  describe('12-hour clock', () => {
+    it('formats hour without minutes as ha', () => {
+      expect(
+        formatTime(parseNaiveDate('2025-06-15 14:00:00'), {
+          use12HourClock: true,
+          includeMinutes: false
+        })
+      ).toEqual('2pm')
+    })
+
+    it('formats hour with minutes as h:mma', () => {
+      expect(
+        formatTime(parseNaiveDate('2025-06-15 14:30:00'), {
+          use12HourClock: true,
+          includeMinutes: true
+        })
+      ).toEqual('2:30pm')
+    })
+
+    it('formats midnight correctly', () => {
+      expect(
+        formatTime(parseNaiveDate('2025-06-15 00:00:00'), {
+          use12HourClock: true,
+          includeMinutes: false
+        })
+      ).toEqual('12am')
+    })
+  })
+
+  describe('24-hour clock', () => {
+    it('formats hour without minutes as HH:mm (not HH format because that would look weird) ', () => {
+      expect(
+        formatTime(parseNaiveDate('2025-06-15 14:00:00'), {
+          use12HourClock: false,
+          includeMinutes: false
+        })
+      ).toEqual('14:00')
+    })
+
+    it('formats hour with minutes as HH:mm', () => {
+      expect(
+        formatTime(parseNaiveDate('2025-06-15 14:30:00'), {
+          use12HourClock: false,
+          includeMinutes: true
+        })
+      ).toEqual('14:30')
+    })
+
+    it('pads single-digit hours', () => {
+      expect(
+        formatTime(parseNaiveDate('2025-06-15 09:00:00'), {
+          use12HourClock: false,
+          includeMinutes: false
+        })
+      ).toEqual('09:00')
+    })
+  })
+})