plausible/analytics
1
1
Fork 0
mirror of https://github.com/plausible/analytics.git synced 2024-12-29 04:22:34 +03:00
Code Issues Packages Projects Releases Wiki Activity

Show time format of graphs based on browser's language (#2048)

Browse Source 
* Show time format of graphs based on browser's language

* Use Intl.DateTimeFormat for graph time axis
This commit is contained in:
Sasha Fonseca 2022-07-28 15:07:07 +01:00 committed by GitHub
parent b415ebe776
commit bbe3caba6a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -28,6 +28,7 @@ All notable changes to this project will be documented in this file.
- API route `GET /api/v1/sites/:site_id` - API route `GET /api/v1/sites/:site_id`
- Hovering on top of list items will now show a [tooltip with the exact number instead of a shortened version](https://github.com/plausible/analytics/discussions/1968) - Hovering on top of list items will now show a [tooltip with the exact number instead of a shortened version](https://github.com/plausible/analytics/discussions/1968)
- Filter goals in realtime filter by clicking goal name - Filter goals in realtime filter by clicking goal name
- The time format (12 hour or 24 hour) for graph timelines is now presented based on the browser's defined language
### Fixed ### Fixed
- UI fix where multi-line text in pills would not be underlined properly on small screens. - UI fix where multi-line text in pills would not be underlined properly on small screens.

17
assets/js/dashboard/stats/graph/graph-util.js
View File

@ -10,13 +10,20 @@ export const dateFormatter = (interval, longForm) => {
} else if (interval === 'date') { } else if (interval === 'date') {
return formatDay(date); return formatDay(date);
} else if (interval === 'hour') { } else if (interval === 'hour') {
var uses12hTime = /h12/.test(
Intl.DateTimeFormat(navigator.language, { hour: 'numeric' })
.resolvedOptions()
.hourCycle
);
const parts = isoDate.split(/[^0-9]/); const parts = isoDate.split(/[^0-9]/);
date = new Date(parts[0], parts[1] - 1, parts[2], parts[3], parts[4], parts[5]) date = new Date(parts[0], parts[1] - 1, parts[2], parts[3], parts[4], parts[5])
var hours = date.getHours(); // Not sure why getUTCHours doesn't work here var hours = Intl.DateTimeFormat(navigator.language, { hour: 'numeric' }).format(date);
var ampm = hours >= 12 ? 'pm' : 'am'; if (uses12hTime) {
hours = hours % 12; hours = hours.toLowerCase().replace(/\s/g, "");
hours = hours ? hours : 12; // the hour '0' should be '12' } else {
return hours + ampm; hours = hours.concat("h");
}
return hours;
} else if (interval === 'minute') { } else if (interval === 'minute') {
if (longForm) { if (longForm) {
const minutesAgo = Math.abs(isoDate) const minutesAgo = Math.abs(isoDate)