Adds ability to select graph detail (interval)

assets/js/dashboard/mount.js

@@ -17,7 +17,8 @@ if (container) {
     embedded: container.dataset.embedded,
     background: container.dataset.background,
     isDbip: container.dataset.isDbip === 'true',
-    flags: JSON.parse(container.dataset.flags)
+    flags: JSON.parse(container.dataset.flags),
+    validIntervalsByPeriod: JSON.parse(container.dataset.validIntervalsByPeriod)
   }
 
   const loggedIn = container.dataset.loggedIn === 'true'

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

@@ -0,0 +1,127 @@
+import {parseUTCDate, formatMonthYYYY, formatDay, formatDayShort} from '../../util/date'
+
+const browserDateFormat = Intl.DateTimeFormat(navigator.language, { hour: 'numeric' })
+
+const is12HourClock = function() {
+  return browserDateFormat.resolvedOptions().hour12
+}
+
+const parseISODate = function(isoDate) {
+  const date = parseUTCDate(isoDate)
+  const minutes = date.getMinutes();
+  return { date, minutes }
+}
+
+const formatHours = function(isoDate) {
+  const monthIndex = 1
+  const dateParts = isoDate.split(/[^0-9]/);
+  dateParts[monthIndex] = dateParts[monthIndex] - 1
+
+  const localDate = new Date(...dateParts)
+  return browserDateFormat.format(localDate)
+}
+
+const monthIntervalFormatter = {
+  long(isoDate, options) {
+    const formatted = this.short(isoDate, options)
+    return options.isBucketPartial ? `Partial of ${formatted}` : formatted
+  },
+  short(isoDate, _options) {
+    const { date } = parseISODate(isoDate)
+    return formatMonthYYYY(date)
+  }
+}
+
+const weekIntervalFormatter = {
+  long(isoDate, options) {
+    const formatted = this.short(isoDate, options)
+    return options.isBucketPartial ? `Partial week of ${formatted}` : `Week of ${formatted}`
+  },
+  short(isoDate, _options) {
+    const { date } = parseISODate(isoDate)
+    return formatDayShort(date)
+  }
+}
+
+const dateIntervalFormatter = {
+  long(isoDate, _options) {
+    const { date } = parseISODate(isoDate)
+    return formatDay(date)
+  },
+  short(isoDate, _options) {
+    const { date } = parseISODate(isoDate)
+    return formatDayShort(date)
+  }
+}
+
+const hourIntervalFormatter = {
+  long(isoDate, options) {
+    return this.short(isoDate, options)
+  },
+  short(isoDate, _options) {
+    const formatted = formatHours(isoDate)
+
+    if (is12HourClock()) {
+      return formatted.replace(' ', '').toLowerCase()
+    } else {
+      return formatted.replace(/[^0-9]/g, '').concat(":00")
+    }
+  }
+}
+
+const minuteIntervalFormatter = {
+  long(isoDate, options) {
+    if (options.period == 'realtime') {
+      const minutesAgo = Math.abs(isoDate)
+      return minutesAgo === 1 ? '1 minute ago' : minutesAgo + ' minutes ago'
+    } else {
+      return this.short(isoDate, options)
+    }
+  },
+  short(isoDate, options) {
+    if (options.period === 'realtime') return isoDate + 'm'
+
+    const { minutes } = parseISODate(isoDate)
+    const formatted = formatHours(isoDate)
+    if (is12HourClock()) {
+      return formatted.replace(' ', ':' + (minutes < 10 ? `0${minutes}` : minutes)).toLowerCase()
+    } else {
+      return formatted.replace(/[^0-9]/g, '').concat(":" + (minutes < 10 ? `0${minutes}` : minutes))
+    }
+  }
+}
+
+// Each interval has a different date and time format. This object maps each
+// interval with two functions: `long` and `short`, that formats date and time
+// accordingly.
+const factory = {
+  month: monthIntervalFormatter,
+  week: weekIntervalFormatter,
+  date: dateIntervalFormatter,
+  hour: hourIntervalFormatter,
+  minute: minuteIntervalFormatter
+}
+
+/**
+ * Returns a function that formats a ISO 8601 timestamp based on the given
+ * arguments.
+ *
+ * The preferred date and time format in the dashboard depends on the selected
+ * interval and period. For example, in real-time view only the time is necessary,
+ * while other intervals require dates to be displayed.
+ *
+ * @param {string} interval - The interval of the query, e.g. `minute`, `hour`
+ * @param {boolean} longForm - Whether the formatted result should be in long or
+ * short form.
+ * @param {string} period - The period of the query, e.g. `12mo`, `day`
+ * @param {boolean} isPeriodFull - Indicates whether the interval has been cut
+ * off by the requested date range or not. If false, the returned formatted date
+ * indicates this cut off, e.g. `Partial week of November 8`.
+ */
+export default function dateFormatter(interval, longForm, period, isPeriodFull) {
+  const displayMode = longForm ? 'long' : 'short'
+  const options = { period: period, interval: interval, isBucketPartial: !isPeriodFull }
+  return function(isoDate, _index, _ticks) {
+    return factory[interval][displayMode](isoDate, options)
+  }
+}

assets/js/dashboard/stats/graph/graph-util.js

@@ -1,5 +1,7 @@
-import { parseUTCDate, formatMonthYYYY, formatDay } from '../../util/date'
 import numberFormatter, {durationFormatter} from '../../util/number-formatter'
+import dateFormatter from './date-formatter.js'
+
+export const INTERVALS = ["month", "week", "date", "hour", "minute"]
 
 export const METRIC_MAPPING = {
   'Unique visitors (last 30 min)': 'visitors',
@@ -27,39 +29,7 @@ export const METRIC_FORMATTER = {
   'conversions': numberFormatter,
 }
 
-export const dateFormatter = (interval, longForm) => {
-  return function(isoDate, _index, _ticks) {
-    let date = parseUTCDate(isoDate)
-
-    if (interval === 'month') {
-      return formatMonthYYYY(date);
-    } else if (interval === 'date') {
-      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])
-
-      const dateFormat = Intl.DateTimeFormat(navigator.language, { hour: 'numeric' })
-      const twelveHourClock = dateFormat.resolvedOptions().hour12
-      const formattedHours = dateFormat.format(date)
-
-      if (twelveHourClock) {
-        return formattedHours.replace(' ', '').toLowerCase()
-      } else {
-        return formattedHours.replace(/[^0-9]/g, '').concat(":00")
-      }
-    } else if (interval === 'minute') {
-      if (longForm) {
-        const minutesAgo = Math.abs(isoDate)
-        return minutesAgo === 1 ? '1 minute ago' : minutesAgo + ' minutes ago'
-      } else {
-        return isoDate + 'm'
-      }
-    }
-  }
-}
-
-export const GraphTooltip = (graphData, metric) => {
+export const GraphTooltip = (graphData, metric, query) => {
   return (context) => {
     const tooltipModel = context.tooltip;
     const offset = document.getElementById("main-graph-canvas").getBoundingClientRect()
@@ -93,23 +63,22 @@ export const GraphTooltip = (graphData, metric) => {
       return bodyItem.lines;
     }
 
-    function renderLabel(label, prev_label) {
-      const formattedLabel = dateFormatter(graphData.interval, true)(label)
-      const prev_formattedLabel = prev_label && dateFormatter(graphData.interval, true)(prev_label)
-
-      if (graphData.interval === 'month') {
-        return !prev_label ? formattedLabel : prev_formattedLabel
-      }
+    // Returns a string describing the bucket. Used when hovering the graph to
+    // show time buckets.
+    function renderBucketLabel(label) {
+      const isPeriodFull = graphData.full_intervals?.[label]
+      const formattedLabel = dateFormatter(graphData.interval, true, query.period, isPeriodFull)(label)
 
-      if (graphData.interval === 'date') {
-        return !prev_label ? formattedLabel : prev_formattedLabel
+      if (query.period === 'realtime') {
+        return dateFormatter(graphData.interval, true, query.period)(label)
       }
 
-      if (graphData.interval === 'hour') {
-        return !prev_label ? `${dateFormatter("date", true)(label)}, ${formattedLabel}` : `${dateFormatter("date", true)(prev_label)}, ${dateFormatter(graphData.interval, true)(prev_label)}`
+      if (graphData.interval === 'hour' || graphData.interval == 'minute') {
+        const date = dateFormatter("date", true, query.period)(label)
+        return `${date}, ${formattedLabel}`
       }
 
-      return !prev_label ? formattedLabel : prev_formattedLabel
+      return formattedLabel
     }
 
     // Set Tooltip Body
@@ -134,7 +103,7 @@ export const GraphTooltip = (graphData, metric) => {
           <div class='flex flex-row justify-between items-center'>
             <span class='flex items-center mr-4'>
               <div class='w-3 h-3 mr-1 rounded-full' style='background-color: rgba(101,116,205)'></div>
-              <span>${renderLabel(label)}</span>
+              <span>${renderBucketLabel(label)}</span>
             </span>
             <span class='text-base font-bold'>${METRIC_FORMATTER[metric](point)}</span>
           </div>

assets/js/dashboard/stats/graph/interval-picker.js

@@ -0,0 +1,67 @@
+import { Menu, Transition } from '@headlessui/react';
+import { ChevronDownIcon } from '@heroicons/react/20/solid'
+import React, { Fragment } from 'react';
+import classNames from 'classnames'
+import * as storage from '../../util/storage'
+
+export const INTERVAL_LABELS = {
+  'minute': 'Minutes',
+  'hour': 'Hours',
+  'date': 'Days',
+  'week': 'Weeks',
+  'month': 'Months'
+}
+
+export const getStoredInterval = function(period, domain) {
+  return storage.getItem(`interval__${period}__${domain}`)
+}
+
+export const storeInterval = function(period, domain, interval) {
+  storage.setItem(`interval__${period}__${domain}`, interval)
+}
+
+function DropdownItem({ option, currentInterval, updateInterval }) {
+  return (
+    <Menu.Item onClick={() => updateInterval(option)} key={option} disabled={option == currentInterval}>
+      {({ active }) => (
+        <span className={classNames({
+                'bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-200 cursor-pointer': active,
+                'text-gray-700 dark:text-gray-200': !active,
+                'font-bold cursor-none select-none': option == currentInterval,
+              }, 'block px-4 py-2 text-sm')}>
+          { INTERVAL_LABELS[option] }
+        </span>
+      )}
+    </Menu.Item>
+  )
+}
+
+export function IntervalPicker({ graphData, query, site, updateInterval }) {
+  if (query.period == 'realtime') return null
+
+  const currentInterval = graphData?.interval
+  const options = site.validIntervalsByPeriod[query.period]
+
+  return (
+    <Menu as="div" className="relative inline-block pl-2">
+      <Menu.Button className="text-sm inline-flex focus:outline-none text-gray-700 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-600 items-center">
+        { INTERVAL_LABELS[currentInterval] }
+        <ChevronDownIcon className="w-4 h-4" aria-hidden="true" />
+      </Menu.Button>
+
+      <Transition
+        as={Fragment}
+        enter="transition ease-out duration-100"
+        enterFrom="transform opacity-0 scale-95"
+        enterTo="transform opacity-100 scale-100"
+        leave="transition ease-in duration-75"
+        leaveFrom="transform opacity-100 scale-100"
+        leaveTo="transform opacity-0 scale-95"
+      >
+        <Menu.Items className="py-1 text-left origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 focus:outline-none z-10">
+          { options.map((option) => DropdownItem({ option, currentInterval, updateInterval })) }
+        </Menu.Items>
+      </Transition>
+    </Menu>
+  )
+}

assets/js/dashboard/stats/graph/top-stats.js

@@ -1,6 +1,6 @@
 import React from "react";
-import classNames from "classnames";
 import { Tooltip } from '../../util/tooltip'
+import classNames from "classnames";
 import numberFormatter, { durationFormatter } from '../../util/number-formatter'
 import { METRIC_MAPPING } from './graph-util'
 
@@ -113,10 +113,10 @@ export default class TopStats extends React.Component {
       )
     })
 
-    if (query && query.period === 'realtime') {
+    if (stats && query && query.period === 'realtime') {
       stats.push(<div key="dot" className="block pulsating-circle" style={{ left: '125px', top: '52px' }}></div>)
     }
 
-    return stats
+    return stats || null;
   }
 }