forgejo/web_src/js/utils/time.js

73 lines
2.1 KiB
JavaScript
Raw Normal View History

Implement contributors graph (#27882) Continuation of https://github.com/go-gitea/gitea/pull/25439. Fixes #847 Before: <img width="1296" alt="image" src="https://github.com/go-gitea/gitea/assets/32161460/24571ac8-b254-43c9-b178-97340f0dc8a9"> ---- After: <img width="1296" alt="image" src="https://github.com/go-gitea/gitea/assets/32161460/c60b2459-9d10-4d42-8d83-d5ef0f45bf94"> --- #### Overview This is the implementation of a requested feature: Contributors graph (#847) It makes Activity page a multi-tab page and adds a new tab called Contributors. Contributors tab shows the contribution graphs over time since the repository existed. It also shows per user contribution graphs for top 100 contributors. Top 100 is calculated based on the selected contribution type (commits, additions or deletions). --- #### Demo (The demo is a bit old but still a good example to show off the main features) <video src="https://github.com/go-gitea/gitea/assets/32161460/9f68103f-8145-4cc2-94bc-5546daae7014" controls width="320" height="240"> <a href="https://github.com/go-gitea/gitea/assets/32161460/9f68103f-8145-4cc2-94bc-5546daae7014">Download</a> </video> #### Features: - Select contribution type (commits, additions or deletions) - See overall and per user contribution graphs for the selected contribution type - Zoom and pan on graphs to see them in detail - See top 100 contributors based on the selected contribution type and selected time range - Go directly to users' profile by clicking their name if they are registered gitea users - Cache the results so that when the same repository is visited again fetching data will be faster --------- Co-authored-by: silverwind <me@silverwind.io> Co-authored-by: hiifong <i@hiif.ong> Co-authored-by: delvh <dev.lh@web.de> Co-authored-by: 6543 <6543@obermui.de> Co-authored-by: yp05327 <576951401@qq.com> (cherry picked from commit 21331be30cb8f6c2d8b9dd99f1061623900632b9)
2024-02-15 22:21:13 +00:00
import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc.js';
import {getCurrentLocale} from '../utils.js';
Implement contributors graph (#27882) Continuation of https://github.com/go-gitea/gitea/pull/25439. Fixes #847 Before: <img width="1296" alt="image" src="https://github.com/go-gitea/gitea/assets/32161460/24571ac8-b254-43c9-b178-97340f0dc8a9"> ---- After: <img width="1296" alt="image" src="https://github.com/go-gitea/gitea/assets/32161460/c60b2459-9d10-4d42-8d83-d5ef0f45bf94"> --- #### Overview This is the implementation of a requested feature: Contributors graph (#847) It makes Activity page a multi-tab page and adds a new tab called Contributors. Contributors tab shows the contribution graphs over time since the repository existed. It also shows per user contribution graphs for top 100 contributors. Top 100 is calculated based on the selected contribution type (commits, additions or deletions). --- #### Demo (The demo is a bit old but still a good example to show off the main features) <video src="https://github.com/go-gitea/gitea/assets/32161460/9f68103f-8145-4cc2-94bc-5546daae7014" controls width="320" height="240"> <a href="https://github.com/go-gitea/gitea/assets/32161460/9f68103f-8145-4cc2-94bc-5546daae7014">Download</a> </video> #### Features: - Select contribution type (commits, additions or deletions) - See overall and per user contribution graphs for the selected contribution type - Zoom and pan on graphs to see them in detail - See top 100 contributors based on the selected contribution type and selected time range - Go directly to users' profile by clicking their name if they are registered gitea users - Cache the results so that when the same repository is visited again fetching data will be faster --------- Co-authored-by: silverwind <me@silverwind.io> Co-authored-by: hiifong <i@hiif.ong> Co-authored-by: delvh <dev.lh@web.de> Co-authored-by: 6543 <6543@obermui.de> Co-authored-by: yp05327 <576951401@qq.com> (cherry picked from commit 21331be30cb8f6c2d8b9dd99f1061623900632b9)
2024-02-15 22:21:13 +00:00
dayjs.extend(utc);
/**
* Returns an array of millisecond-timestamps of start-of-week days (Sundays)
*
* @param startConfig The start date. Can take any type that `Date` accepts.
* @param endConfig The end date. Can take any type that `Date` accepts.
*/
Implement contributors graph (#27882) Continuation of https://github.com/go-gitea/gitea/pull/25439. Fixes #847 Before: <img width="1296" alt="image" src="https://github.com/go-gitea/gitea/assets/32161460/24571ac8-b254-43c9-b178-97340f0dc8a9"> ---- After: <img width="1296" alt="image" src="https://github.com/go-gitea/gitea/assets/32161460/c60b2459-9d10-4d42-8d83-d5ef0f45bf94"> --- #### Overview This is the implementation of a requested feature: Contributors graph (#847) It makes Activity page a multi-tab page and adds a new tab called Contributors. Contributors tab shows the contribution graphs over time since the repository existed. It also shows per user contribution graphs for top 100 contributors. Top 100 is calculated based on the selected contribution type (commits, additions or deletions). --- #### Demo (The demo is a bit old but still a good example to show off the main features) <video src="https://github.com/go-gitea/gitea/assets/32161460/9f68103f-8145-4cc2-94bc-5546daae7014" controls width="320" height="240"> <a href="https://github.com/go-gitea/gitea/assets/32161460/9f68103f-8145-4cc2-94bc-5546daae7014">Download</a> </video> #### Features: - Select contribution type (commits, additions or deletions) - See overall and per user contribution graphs for the selected contribution type - Zoom and pan on graphs to see them in detail - See top 100 contributors based on the selected contribution type and selected time range - Go directly to users' profile by clicking their name if they are registered gitea users - Cache the results so that when the same repository is visited again fetching data will be faster --------- Co-authored-by: silverwind <me@silverwind.io> Co-authored-by: hiifong <i@hiif.ong> Co-authored-by: delvh <dev.lh@web.de> Co-authored-by: 6543 <6543@obermui.de> Co-authored-by: yp05327 <576951401@qq.com> (cherry picked from commit 21331be30cb8f6c2d8b9dd99f1061623900632b9)
2024-02-15 22:21:13 +00:00
export function startDaysBetween(startDate, endDate) {
const start = dayjs.utc(startDate);
const end = dayjs.utc(endDate);
let current = start;
Implement contributors graph (#27882) Continuation of https://github.com/go-gitea/gitea/pull/25439. Fixes #847 Before: <img width="1296" alt="image" src="https://github.com/go-gitea/gitea/assets/32161460/24571ac8-b254-43c9-b178-97340f0dc8a9"> ---- After: <img width="1296" alt="image" src="https://github.com/go-gitea/gitea/assets/32161460/c60b2459-9d10-4d42-8d83-d5ef0f45bf94"> --- #### Overview This is the implementation of a requested feature: Contributors graph (#847) It makes Activity page a multi-tab page and adds a new tab called Contributors. Contributors tab shows the contribution graphs over time since the repository existed. It also shows per user contribution graphs for top 100 contributors. Top 100 is calculated based on the selected contribution type (commits, additions or deletions). --- #### Demo (The demo is a bit old but still a good example to show off the main features) <video src="https://github.com/go-gitea/gitea/assets/32161460/9f68103f-8145-4cc2-94bc-5546daae7014" controls width="320" height="240"> <a href="https://github.com/go-gitea/gitea/assets/32161460/9f68103f-8145-4cc2-94bc-5546daae7014">Download</a> </video> #### Features: - Select contribution type (commits, additions or deletions) - See overall and per user contribution graphs for the selected contribution type - Zoom and pan on graphs to see them in detail - See top 100 contributors based on the selected contribution type and selected time range - Go directly to users' profile by clicking their name if they are registered gitea users - Cache the results so that when the same repository is visited again fetching data will be faster --------- Co-authored-by: silverwind <me@silverwind.io> Co-authored-by: hiifong <i@hiif.ong> Co-authored-by: delvh <dev.lh@web.de> Co-authored-by: 6543 <6543@obermui.de> Co-authored-by: yp05327 <576951401@qq.com> (cherry picked from commit 21331be30cb8f6c2d8b9dd99f1061623900632b9)
2024-02-15 22:21:13 +00:00
// Ensure the start date is a Sunday
while (current.day() !== 0) {
current = current.add(1, 'day');
Implement contributors graph (#27882) Continuation of https://github.com/go-gitea/gitea/pull/25439. Fixes #847 Before: <img width="1296" alt="image" src="https://github.com/go-gitea/gitea/assets/32161460/24571ac8-b254-43c9-b178-97340f0dc8a9"> ---- After: <img width="1296" alt="image" src="https://github.com/go-gitea/gitea/assets/32161460/c60b2459-9d10-4d42-8d83-d5ef0f45bf94"> --- #### Overview This is the implementation of a requested feature: Contributors graph (#847) It makes Activity page a multi-tab page and adds a new tab called Contributors. Contributors tab shows the contribution graphs over time since the repository existed. It also shows per user contribution graphs for top 100 contributors. Top 100 is calculated based on the selected contribution type (commits, additions or deletions). --- #### Demo (The demo is a bit old but still a good example to show off the main features) <video src="https://github.com/go-gitea/gitea/assets/32161460/9f68103f-8145-4cc2-94bc-5546daae7014" controls width="320" height="240"> <a href="https://github.com/go-gitea/gitea/assets/32161460/9f68103f-8145-4cc2-94bc-5546daae7014">Download</a> </video> #### Features: - Select contribution type (commits, additions or deletions) - See overall and per user contribution graphs for the selected contribution type - Zoom and pan on graphs to see them in detail - See top 100 contributors based on the selected contribution type and selected time range - Go directly to users' profile by clicking their name if they are registered gitea users - Cache the results so that when the same repository is visited again fetching data will be faster --------- Co-authored-by: silverwind <me@silverwind.io> Co-authored-by: hiifong <i@hiif.ong> Co-authored-by: delvh <dev.lh@web.de> Co-authored-by: 6543 <6543@obermui.de> Co-authored-by: yp05327 <576951401@qq.com> (cherry picked from commit 21331be30cb8f6c2d8b9dd99f1061623900632b9)
2024-02-15 22:21:13 +00:00
}
const startDays = [];
while (current.isBefore(end)) {
startDays.push(current.valueOf());
current = current.add(1, 'week');
Implement contributors graph (#27882) Continuation of https://github.com/go-gitea/gitea/pull/25439. Fixes #847 Before: <img width="1296" alt="image" src="https://github.com/go-gitea/gitea/assets/32161460/24571ac8-b254-43c9-b178-97340f0dc8a9"> ---- After: <img width="1296" alt="image" src="https://github.com/go-gitea/gitea/assets/32161460/c60b2459-9d10-4d42-8d83-d5ef0f45bf94"> --- #### Overview This is the implementation of a requested feature: Contributors graph (#847) It makes Activity page a multi-tab page and adds a new tab called Contributors. Contributors tab shows the contribution graphs over time since the repository existed. It also shows per user contribution graphs for top 100 contributors. Top 100 is calculated based on the selected contribution type (commits, additions or deletions). --- #### Demo (The demo is a bit old but still a good example to show off the main features) <video src="https://github.com/go-gitea/gitea/assets/32161460/9f68103f-8145-4cc2-94bc-5546daae7014" controls width="320" height="240"> <a href="https://github.com/go-gitea/gitea/assets/32161460/9f68103f-8145-4cc2-94bc-5546daae7014">Download</a> </video> #### Features: - Select contribution type (commits, additions or deletions) - See overall and per user contribution graphs for the selected contribution type - Zoom and pan on graphs to see them in detail - See top 100 contributors based on the selected contribution type and selected time range - Go directly to users' profile by clicking their name if they are registered gitea users - Cache the results so that when the same repository is visited again fetching data will be faster --------- Co-authored-by: silverwind <me@silverwind.io> Co-authored-by: hiifong <i@hiif.ong> Co-authored-by: delvh <dev.lh@web.de> Co-authored-by: 6543 <6543@obermui.de> Co-authored-by: yp05327 <576951401@qq.com> (cherry picked from commit 21331be30cb8f6c2d8b9dd99f1061623900632b9)
2024-02-15 22:21:13 +00:00
}
return startDays;
}
export function firstStartDateAfterDate(inputDate) {
if (!(inputDate instanceof Date)) {
throw new Error('Invalid date');
}
const dayOfWeek = inputDate.getUTCDay();
Implement contributors graph (#27882) Continuation of https://github.com/go-gitea/gitea/pull/25439. Fixes #847 Before: <img width="1296" alt="image" src="https://github.com/go-gitea/gitea/assets/32161460/24571ac8-b254-43c9-b178-97340f0dc8a9"> ---- After: <img width="1296" alt="image" src="https://github.com/go-gitea/gitea/assets/32161460/c60b2459-9d10-4d42-8d83-d5ef0f45bf94"> --- #### Overview This is the implementation of a requested feature: Contributors graph (#847) It makes Activity page a multi-tab page and adds a new tab called Contributors. Contributors tab shows the contribution graphs over time since the repository existed. It also shows per user contribution graphs for top 100 contributors. Top 100 is calculated based on the selected contribution type (commits, additions or deletions). --- #### Demo (The demo is a bit old but still a good example to show off the main features) <video src="https://github.com/go-gitea/gitea/assets/32161460/9f68103f-8145-4cc2-94bc-5546daae7014" controls width="320" height="240"> <a href="https://github.com/go-gitea/gitea/assets/32161460/9f68103f-8145-4cc2-94bc-5546daae7014">Download</a> </video> #### Features: - Select contribution type (commits, additions or deletions) - See overall and per user contribution graphs for the selected contribution type - Zoom and pan on graphs to see them in detail - See top 100 contributors based on the selected contribution type and selected time range - Go directly to users' profile by clicking their name if they are registered gitea users - Cache the results so that when the same repository is visited again fetching data will be faster --------- Co-authored-by: silverwind <me@silverwind.io> Co-authored-by: hiifong <i@hiif.ong> Co-authored-by: delvh <dev.lh@web.de> Co-authored-by: 6543 <6543@obermui.de> Co-authored-by: yp05327 <576951401@qq.com> (cherry picked from commit 21331be30cb8f6c2d8b9dd99f1061623900632b9)
2024-02-15 22:21:13 +00:00
const daysUntilSunday = 7 - dayOfWeek;
const resultDate = new Date(inputDate.getTime());
resultDate.setUTCDate(resultDate.getUTCDate() + daysUntilSunday);
Implement contributors graph (#27882) Continuation of https://github.com/go-gitea/gitea/pull/25439. Fixes #847 Before: <img width="1296" alt="image" src="https://github.com/go-gitea/gitea/assets/32161460/24571ac8-b254-43c9-b178-97340f0dc8a9"> ---- After: <img width="1296" alt="image" src="https://github.com/go-gitea/gitea/assets/32161460/c60b2459-9d10-4d42-8d83-d5ef0f45bf94"> --- #### Overview This is the implementation of a requested feature: Contributors graph (#847) It makes Activity page a multi-tab page and adds a new tab called Contributors. Contributors tab shows the contribution graphs over time since the repository existed. It also shows per user contribution graphs for top 100 contributors. Top 100 is calculated based on the selected contribution type (commits, additions or deletions). --- #### Demo (The demo is a bit old but still a good example to show off the main features) <video src="https://github.com/go-gitea/gitea/assets/32161460/9f68103f-8145-4cc2-94bc-5546daae7014" controls width="320" height="240"> <a href="https://github.com/go-gitea/gitea/assets/32161460/9f68103f-8145-4cc2-94bc-5546daae7014">Download</a> </video> #### Features: - Select contribution type (commits, additions or deletions) - See overall and per user contribution graphs for the selected contribution type - Zoom and pan on graphs to see them in detail - See top 100 contributors based on the selected contribution type and selected time range - Go directly to users' profile by clicking their name if they are registered gitea users - Cache the results so that when the same repository is visited again fetching data will be faster --------- Co-authored-by: silverwind <me@silverwind.io> Co-authored-by: hiifong <i@hiif.ong> Co-authored-by: delvh <dev.lh@web.de> Co-authored-by: 6543 <6543@obermui.de> Co-authored-by: yp05327 <576951401@qq.com> (cherry picked from commit 21331be30cb8f6c2d8b9dd99f1061623900632b9)
2024-02-15 22:21:13 +00:00
return resultDate.valueOf();
}
export function fillEmptyStartDaysWithZeroes(startDays, data) {
const result = {};
for (const startDay of startDays) {
result[startDay] = data[startDay] || {'week': startDay, 'additions': 0, 'deletions': 0, 'commits': 0};
}
return Object.values(result);
}
let dateFormat;
// format a Date object to document's locale, but with 24h format from user's current locale because this
// option is a personal preference of the user, not something that the document's locale should dictate.
export function formatDatetime(date) {
if (!dateFormat) {
// TODO: replace `hour12` with `Intl.Locale.prototype.getHourCycles` once there is broad browser support
dateFormat = new Intl.DateTimeFormat(getCurrentLocale(), {
day: 'numeric',
month: 'short',
year: 'numeric',
hour: 'numeric',
hour12: !Number.isInteger(Number(new Intl.DateTimeFormat([], {hour: 'numeric'}).format())),
minute: '2-digit',
timeZoneName: 'short',
});
}
return dateFormat.format(date);
}