Prettify number of issues (#17760)

* Prettify number of issues

- Use the PrettyNumber function to add commas in large amount of issues.

* Use client-side formatting

* prettify on both server and client

* remove unused i18n entries

* handle more cases, support other int types in PrettyNumber

* specify locale to avoid issues with node default locale

* remove superfluos argument

* introduce template helper, octicon tweaks, js refactor

* Update modules/templates/helper.go

* Apply some suggestions.

* Add comment

* Update templates/user/dashboard/issues.tmpl

Co-authored-by: silverwind <me@silverwind.io>

Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
This commit is contained in:
Gusted 2022-06-12 14:08:23 +02:00 committed by GitHub
parent 0097fbc2ac
commit 796c4eca0b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 118 additions and 45 deletions

View file

@ -0,0 +1,14 @@
import {prettyNumber} from '../utils.js';
const {lang} = document.documentElement;
export function initFormattingReplacements() {
// replace english formatted numbers with locale-specific separators
for (const el of document.getElementsByClassName('js-pretty-number')) {
const num = Number(el.getAttribute('data-value'));
const formatted = prettyNumber(num, lang);
if (formatted && formatted !== el.textContent) {
el.textContent = formatted;
}
}
}

View file

@ -84,6 +84,11 @@ import {initRepoBranchButton} from './features/repo-branch.js';
import {initCommonOrganization} from './features/common-organization.js';
import {initRepoWikiForm} from './features/repo-wiki.js';
import {initRepoCommentForm, initRepository} from './features/repo-legacy.js';
import {initFormattingReplacements} from './features/formatting.js';
// Run time-critical code as soon as possible. This is safe to do because this
// script appears at the end of <body> and rendered HTML is accessible at that point.
initFormattingReplacements();
// Silence fomantic's error logging when tabs are used without a target content element
$.fn.tab.settings.silent = true;

View file

@ -90,3 +90,10 @@ export function strSubMatch(full, sub) {
}
return res;
}
// pretty-print a number using locale-specific separators, e.g. 1200 -> 1,200
export function prettyNumber(num, locale = 'en-US') {
if (typeof num !== 'number') return '';
const {format} = new Intl.NumberFormat(locale);
return format(num);
}

View file

@ -1,5 +1,5 @@
import {
basename, extname, isObject, uniq, stripTags, joinPaths, parseIssueHref, strSubMatch,
basename, extname, isObject, uniq, stripTags, joinPaths, parseIssueHref, strSubMatch, prettyNumber,
} from './utils.js';
test('basename', () => {
@ -85,7 +85,6 @@ test('parseIssueHref', () => {
expect(parseIssueHref('')).toEqual({owner: undefined, repo: undefined, type: undefined, index: undefined});
});
test('strSubMatch', () => {
expect(strSubMatch('abc', '')).toEqual(['abc']);
expect(strSubMatch('abc', 'a')).toEqual(['', 'a', 'bc']);
@ -98,3 +97,14 @@ test('strSubMatch', () => {
expect(strSubMatch('aabbcc', 'abc')).toEqual(['', 'a', 'a', 'b', 'b', 'c', 'c']);
expect(strSubMatch('the/directory', 'hedir')).toEqual(['t', 'he', '/', 'dir', 'ectory']);
});
test('prettyNumber', () => {
expect(prettyNumber()).toEqual('');
expect(prettyNumber(null)).toEqual('');
expect(prettyNumber(undefined)).toEqual('');
expect(prettyNumber('1200')).toEqual('');
expect(prettyNumber(12345678, 'en-US')).toEqual('12,345,678');
expect(prettyNumber(12345678, 'de-DE')).toEqual('12.345.678');
expect(prettyNumber(12345678, 'be-BE')).toEqual('12 345 678');
expect(prettyNumber(12345678, 'hi-IN')).toEqual('1,23,45,678');
});