Add Yesterday as an time range option in the dashboard (#4040)

CHANGELOG.md

@@ -4,7 +4,7 @@ All notable changes to this project will be documented in this file.
 ### Added
 - Hostname Allow List in Site Settings
 - Pages Block List in Site Settings
-- Add `conversion_rate` to Stats API Timeseries and on the main graph 
+- Add `conversion_rate` to Stats API Timeseries and on the main graph
 - Add `total_conversions` and `conversion_rate` to `visitors.csv` in a goal-filtered CSV export
 - Ability to display total conversions (with a goal filter) on the main graph
 - Add `conversion_rate` to Stats API Timeseries and on the main graph
@@ -39,6 +39,7 @@ All notable changes to this project will be documented in this file.
 - Add alternative SMTP adapter plausible/analytics#3654
 - Add `EXTRA_CONFIG_PATH` env var to specify extra Elixir config plausible/analytics#3906
 - Add restrictive `robots.txt` for self-hosted plausible/analytics#3905
+- Add Yesterday as an time range option in the dashboard
 
 ### Removed
 - Removed the nested custom event property breakdown UI when filtering by a goal in Goal Conversions

assets/js/dashboard/datepicker.js

@@ -20,7 +20,9 @@ import {
   parseNaiveDate,
   isBefore,
   isAfter,
-  formatDateRange
+  formatDateRange,
+  yesterday,
+  isSameDate
 } from "./util/date";
 import { navigateToQuery, QueryLink, QueryButton } from "./query";
 import { shouldIgnoreKeypress } from "./keybinding.js"
@@ -282,7 +284,7 @@ function DatePicker({ query, site, history }) {
   function renderLink(period, text, opts = {}) {
     let boldClass;
     if (query.period === "day" && period === "day") {
-      boldClass = isToday(site, query.date) ? "font-bold" : "";
+      boldClass = isSameDate(opts.date, query.date) ? "font-bold" : "";
     } else if (query.period === "month" && period === "month") {
       const linkDate = opts.date || nowForSite(site);
       boldClass = isSameMonth(linkDate, query.date) ? "font-bold" : "";
@@ -319,7 +321,8 @@ function DatePicker({ query, site, history }) {
             font-medium text-gray-800 dark:text-gray-200 date-options"
           >
             <div className="py-1 border-b border-gray-200 dark:border-gray-500 date-option-group">
-              {renderLink("day", "Today", { keybindHint: 'D' })}
+              {renderLink("day", "Today", { keybindHint: 'D', date: nowForSite(site) })}
+              {renderLink("day", "Yesterday", { keybindHint: 'E', date: yesterday(site) })}
               {renderLink("realtime", "Realtime", { keybindHint: 'R' })}
             </div>
             <div className="py-1 border-b border-gray-200 dark:border-gray-500 date-option-group">

assets/js/dashboard/util/date.js

@@ -71,16 +71,24 @@ export function nowForSite(site) {
   return dayjs.utc().utcOffset(site.offset / 60)
 }
 
+export function yesterday(site) {
+  return nowForSite(site).subtract(1, 'day')
+}
+
 export function lastMonth(site) {
   return shiftMonths(nowForSite(site), -1)
 }
 
+export function isSameDate(date1, date2) {
+  return formatISO(date1) === formatISO(date2)
+}
+
 export function isSameMonth(date1, date2) {
   return formatMonthYYYY(date1) === formatMonthYYYY(date2)
 }
 
 export function isToday(site, date) {
-  return formatISO(date) === formatISO(nowForSite(site))
+  return isSameDate(date, nowForSite(site))
 }
 
 export function isThisMonth(site, date) {
@@ -123,4 +131,4 @@ export function isAfter(date1, date2, period) {
     return false;
   }
   return date1.date() > date2.date()
-}
+}