Use a simple format for the big number on ui (#12822)

* Use a simple format for the big number on ui

Signed-off-by: a1012112796 <1012112796@qq.com>

* make fmt

* Apply review suggestion @silverwind

* Change name 2

* make fmt

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>

modules/base/tool.go

@@ -420,3 +420,27 @@ func SetupGiteaRoot() string {
 	}
 	return giteaRoot
 }
+
+// FormatNumberSI format a number
+func FormatNumberSI(data interface{}) string {
+	var num int64
+	if num1, ok := data.(int64); ok {
+		num = num1
+	} else if num1, ok := data.(int); ok {
+		num = int64(num1)
+	} else {
+		return ""
+	}
+
+	if num < 1000 {
+		return fmt.Sprintf("%d", num)
+	} else if num < 1000000 {
+		num2 := float32(num) / float32(1000.0)
+		return fmt.Sprintf("%.1fk", num2)
+	} else if num < 1000000000 {
+		num2 := float32(num) / float32(1000000.0)
+		return fmt.Sprintf("%.1fM", num2)
+	}
+	num2 := float32(num) / float32(1000000000.0)
+	return fmt.Sprintf("%.1fG", num2)
+}

modules/base/tool_test.go

@@ -223,5 +223,13 @@ func TestIsTextFile(t *testing.T) {
 	assert.True(t, IsTextFile([]byte("lorem ipsum")))
 }
 
+func TestFormatNumberSI(t *testing.T) {
+	assert.Equal(t, "125", FormatNumberSI(int(125)))
+	assert.Equal(t, "1.3k", FormatNumberSI(int64(1317)))
+	assert.Equal(t, "21.3M", FormatNumberSI(21317675))
+	assert.Equal(t, "45.7G", FormatNumberSI(45721317675))
+	assert.Equal(t, "", FormatNumberSI("test"))
+}
+
 // TODO: IsImageFile(), currently no idea how to test
 // TODO: IsPDFFile(), currently no idea how to test

modules/templates/helper.go

@@ -121,6 +121,7 @@ func NewFuncMap() []template.FuncMap {
 			return t.Format("Jan 02, 2006")
 		},
 		"SizeFmt":  base.FileSize,
+		"CountFmt": base.FormatNumberSI,
 		"List":     List,
 		"SubStr": func(str string, start, length int) string {
 			if len(str) == 0 {

templates/repo/header.tmpl

@@ -42,7 +42,7 @@
 								{{if $.IsWatchingRepo}}{{svg "octicon-eye-closed" 16}}{{$.i18n.Tr "repo.unwatch"}}{{else}}{{svg "octicon-eye"}}{{$.i18n.Tr "repo.watch"}}{{end}}
 							</button>
 							<a class="ui basic label" href="{{.Link}}/watchers">
-								{{.NumWatches}}
+								{{CountFmt .NumWatches}}
 							</a>
 						</div>
 					</form>
@@ -53,7 +53,7 @@
 								{{if $.IsStaringRepo}}{{svg "octicon-star-fill"}}{{$.i18n.Tr "repo.unstar"}}{{else}}{{svg "octicon-star"}}{{$.i18n.Tr "repo.star"}}{{end}}
 							</button>
 							<a class="ui basic label" href="{{.Link}}/stars">
-								{{.NumStars}}
+								{{CountFmt .NumStars}}
 							</a>
 						</div>
 					</form>
@@ -63,7 +63,7 @@
 								{{svg "octicon-repo-forked"}}{{$.i18n.Tr "repo.fork"}}
 							</a>
 							<a class="ui basic label" href="{{.Link}}/forks">
-								{{.NumForks}}
+								{{CountFmt .NumForks}}
 							</a>
 						</div>
 					{{end}}
@@ -83,7 +83,7 @@
 
 				{{if .Permission.CanRead $.UnitTypeIssues}}
 					<a class="{{if .PageIsIssueList}}active{{end}} item" href="{{.RepoLink}}/issues">
-						{{svg "octicon-issue-opened"}} {{.i18n.Tr "repo.issues"}} <span class="ui {{if not .Repository.NumOpenIssues}}gray{{else}}blue{{end}} small label">{{.Repository.NumOpenIssues}}</span>
+						{{svg "octicon-issue-opened"}} {{.i18n.Tr "repo.issues"}} <span class="ui {{if not .Repository.NumOpenIssues}}gray{{else}}blue{{end}} small label">{{CountFmt .Repository.NumOpenIssues}}</span>
 					</a>
 				{{end}}
 
@@ -95,7 +95,7 @@
 
 				{{if and .Repository.CanEnablePulls (.Permission.CanRead $.UnitTypePullRequests)}}
 					<a class="{{if .PageIsPullList}}active{{end}} item" href="{{.RepoLink}}/pulls">
-						{{svg "octicon-git-pull-request"}} {{.i18n.Tr "repo.pulls"}} <span class="ui {{if not .Repository.NumOpenPulls}}gray{{else}}blue{{end}} small label">{{.Repository.NumOpenPulls}}</span>
+						{{svg "octicon-git-pull-request"}} {{.i18n.Tr "repo.pulls"}} <span class="ui {{if not .Repository.NumOpenPulls}}gray{{else}}blue{{end}} small label">{{CountFmt .Repository.NumOpenPulls}}</span>
 					</a>
 				{{end}}
 
@@ -103,14 +103,14 @@
 					<a href="{{.RepoLink}}/projects" class="{{ if .IsProjectsPage }}active{{end}} item">
 						{{svg "octicon-project"}} {{.i18n.Tr "repo.project_board"}}
 						<span class="ui {{if not .Repository.NumOpenProjects}}gray{{else}}blue{{end}} small label">
-							{{.Repository.NumOpenProjects}}
+							{{CountFmt .Repository.NumOpenProjects}}
 						</span>
 					</a>
 				{{ end }}
 
 				{{if and (.Permission.CanRead $.UnitTypeReleases) (not .IsEmptyRepo) }}
 				<a class="{{if .PageIsReleaseList}}active{{end}} item" href="{{.RepoLink}}/releases">
-					{{svg "octicon-tag"}} {{.i18n.Tr "repo.releases"}} <span class="ui {{if not .NumReleases}}gray{{else}}blue{{end}} small label">{{.NumReleases}}</span>
+					{{svg "octicon-tag"}} {{.i18n.Tr "repo.releases"}} <span class="ui {{if not .NumReleases}}gray{{else}}blue{{end}} small label">{{CountFmt .NumReleases}}</span>
 				</a>
 				{{end}}
 

templates/user/dashboard/issues.tmpl

@@ -7,26 +7,26 @@
 				<div class="ui secondary vertical filter menu">
 					<a class="{{if eq .ViewType "your_repositories"}}ui basic blue button{{end}} item" href="{{.Link}}?type=your_repositories&repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state={{.State}}">
 						{{.i18n.Tr "home.issues.in_your_repos"}}
-						<strong class="ui right">{{.IssueStats.YourRepositoriesCount}}</strong>
+						<strong class="ui right">{{CountFmt .IssueStats.YourRepositoriesCount}}</strong>
 					</a>
 					{{if not .ContextUser.IsOrganization}}
 						<a class="{{if eq .ViewType "assigned"}}ui basic blue button{{end}} item" href="{{.Link}}?type=assigned&repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state={{.State}}">
 							{{.i18n.Tr "repo.issues.filter_type.assigned_to_you"}}
-							<strong class="ui right">{{.IssueStats.AssignCount}}</strong>
+							<strong class="ui right">{{CountFmt .IssueStats.AssignCount}}</strong>
 						</a>
 						<a class="{{if eq .ViewType "created_by"}}ui basic blue button{{end}} item" href="{{.Link}}?type=created_by&repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state={{.State}}">
 							{{.i18n.Tr "repo.issues.filter_type.created_by_you"}}
-							<strong class="ui right">{{.IssueStats.CreateCount}}</strong>
+							<strong class="ui right">{{CountFmt .IssueStats.CreateCount}}</strong>
 						</a>
 						<a class="{{if eq .ViewType "mentioned"}}ui basic blue button{{end}} item" href="{{.Link}}?type=mentioned&repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state={{.State}}">
 							{{.i18n.Tr "repo.issues.filter_type.mentioning_you"}}
-							<strong class="ui right">{{.IssueStats.MentionCount}}</strong>
+							<strong class="ui right">{{CountFmt .IssueStats.MentionCount}}</strong>
 						</a>
 					{{end}}
 					<div class="ui divider"></div>
 					<a class="{{if not $.RepoIDs}}ui basic blue button{{end}} repo name item" href="{{$.Link}}?type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&q={{$.Keyword}}">
 						<span class="text truncate">All</span>
-						<div class="ui {{if $.IsShowClosed}}red{{else}}green{{end}} label">{{.TotalIssueCount}}</div>
+						<div class="ui {{if $.IsShowClosed}}red{{else}}green{{end}} label">{{CountFmt .TotalIssueCount}}</div>
 					</a>
 					{{range .Repos}}
 						{{with $Repo := .}}
@@ -45,7 +45,7 @@
 									{{end}}
 									]&sort={{$.SortType}}&state={{$.State}}&q={{$.Keyword}}" title="{{.FullName}}">
 								<span class="text truncate">{{$Repo.FullName}}</span>
-								<div class="ui {{if $.IsShowClosed}}red{{else}}green{{end}} label">{{index $.Counts $Repo.ID}}</div>
+								<div class="ui {{if $.IsShowClosed}}red{{else}}green{{end}} label">{{CountFmt (index $.Counts $Repo.ID)}}</div>
 							</a>
 						{{end}}
 					{{end}}