Render diff stats server-side (#13579)

Eliminates a flash on page load on the diff stat bars.

modules/templates/helper.go

@@ -208,6 +208,9 @@ func NewFuncMap() []template.FuncMap {
 			}
 			return path
 		},
+		"DiffStatsWidth": func(adds int, dels int) string {
+			return fmt.Sprintf("%f", float64(adds)/(float64(adds)+float64(dels))*100)
+		},
 		"Json": func(in interface{}) string {
 			out, err := json.Marshal(in)
 			if err != nil {

templates/repo/diff/box.tmpl

@@ -38,12 +38,7 @@
 				<li>
 					<div class="diff-counter count pull-right">
 						{{if not .IsBin}}
-							<span class="add" data-line="{{.Addition}}">+{{.Addition}}</span>
+							{{template "repo/diff/stats" .}}
-							<span class="bar">
-								<div class="pull-left add"></div>
-								<div class="pull-left del"></div>
-							</span>
-							<span class="del" data-line="{{.Deletion}}">-{{.Deletion}}</span>
 						{{else}}
 							<span>{{$.i18n.Tr "repo.diff.bin"}}</span>
 						{{end}}
@@ -60,12 +55,7 @@
 					<h4 class="ui top attached normal header rounded">
 						<div class="diff-counter count ui left">
 							{{if not $file.IsRenamed}}
-								<span class="add" data-line="{{.Addition}}">+ {{.Addition}}</span>
+								{{template "repo/diff/stats" .}}
-								<span class="bar">
-									<div class="pull-left add"></div>
-									<div class="pull-left del"></div>
-								</span>
-								<span class="del" data-line="{{.Deletion}}">- {{.Deletion}}</span>
 							{{end}}
 						</div>
 						<span class="file">{{$file.Name}}</span>
@@ -101,12 +91,7 @@
 								{{if $file.IsBin}}
 									{{$.i18n.Tr "repo.diff.bin"}}
 								{{else if not $file.IsRenamed}}
-									<span class="add" data-line="{{.Addition}}">+ {{.Addition}}</span>
+									{{template "repo/diff/stats" .}}
-									<span class="bar">
-										<div class="pull-left add"></div>
-										<div class="pull-left del"></div>
-									</span>
-									<span class="del" data-line="{{.Deletion}}">- {{.Deletion}}</span>
 								{{end}}
 							</div>
 							<span class="file">{{if $file.IsRenamed}}{{$file.OldName}} &rarr; {{end}}{{$file.Name}}{{if .IsLFSFile}} ({{$.i18n.Tr "repo.stored_lfs"}}){{end}}</span>

templates/repo/diff/stats.tmpl

@@ -0,0 +1,6 @@
+<span class="add" data-line="{{.Addition}}">+ {{.Addition}}</span>
+<span class="bar">
+	<div class="pull-left add" style="width: {{DiffStatsWidth .Addition .Deletion}}%"></div>
+	<div class="pull-left del"></div>
+</span>
+<span class="del" data-line="{{.Deletion}}">- {{.Deletion}}</span>

web_src/js/index.js

@@ -1134,17 +1134,6 @@ async function initRepository() {
     initReactionSelector();
   }
 
-  // Diff
-  if ($('.repository.diff').length > 0) {
-    $('.diff-counter').each(function () {
-      const $item = $(this);
-      const addLine = $item.find('span[data-line].add').data('line');
-      const delLine = $item.find('span[data-line].del').data('line');
-      const addPercent = parseFloat(addLine) / (parseFloat(addLine) + parseFloat(delLine)) * 100;
-      $item.find('.bar .add').css('width', `${addPercent}%`);
-    });
-  }
-
   // Quick start and repository home
   $('#repo-clone-ssh').on('click', function () {
     $('.clone-url').text($(this).data('link'));