From 8dbd270a878d430323f45c3e58b4f9b8bb879e0f Mon Sep 17 00:00:00 2001
From: Yarden Shoham <git@yardenshoham.com>
Date: Fri, 14 Apr 2023 20:12:28 +0000
Subject: [PATCH 1/6] Localize heatmap

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
---
 models/activities/user_heatmap.go         |  9 ++++++++
 options/locale/locale_en-US.ini           |  7 ++++++
 routers/web/user/home.go                  |  1 +
 routers/web/user/profile.go               |  1 +
 templates/user/heatmap.tmpl               |  9 +++++++-
 web_src/js/components/ActivityHeatmap.vue | 26 +++++++++++------------
 web_src/js/features/heatmap.js            |  7 ++++--
 7 files changed, 44 insertions(+), 16 deletions(-)

diff --git a/models/activities/user_heatmap.go b/models/activities/user_heatmap.go
index d3f0f0db73b27..33207995267b6 100644
--- a/models/activities/user_heatmap.go
+++ b/models/activities/user_heatmap.go
@@ -69,3 +69,12 @@ func getUserHeatmapData(user *user_model.User, team *organization.Team, doer *us
 		OrderBy("timestamp").
 		Find(&hdata)
 }
+
+// GetTotalContributionsInHeatmap returns the total number of contributions in a heatmap
+func GetTotalContributionsInHeatmap(hdata []*UserHeatmapData) int64 {
+	var total int64
+	for _, v := range hdata {
+		total += v.Contributions
+	}
+	return total
+}
diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini
index f71ea824e979b..642ca09aa3c85 100644
--- a/options/locale/locale_en-US.ini
+++ b/options/locale/locale_en-US.ini
@@ -120,6 +120,13 @@ footer = Footer
 footer.software = About Software
 footer.links = Links
 
+[heatmap]
+number_of_contributions_in_the_last_12_months = %s contributions in the last 12 months
+no_contributions = No contributions
+less = Less
+more = More
+number_of_contributions_on_date = <b>%[1]s contributions</b> on %[2]s
+
 [editor]
 buttons.heading.tooltip = Add heading
 buttons.bold.tooltip = Add bold text
diff --git a/routers/web/user/home.go b/routers/web/user/home.go
index a0a5dc3c4b9ba..1f77379044afe 100644
--- a/routers/web/user/home.go
+++ b/routers/web/user/home.go
@@ -107,6 +107,7 @@ func Dashboard(ctx *context.Context) {
 			return
 		}
 		ctx.Data["HeatmapData"] = data
+		ctx.Data["HeatmapTotalContributions"] = activities_model.GetTotalContributionsInHeatmap(data)
 	}
 
 	feeds, count, err := activities_model.GetFeeds(ctx, activities_model.GetFeedsOptions{
diff --git a/routers/web/user/profile.go b/routers/web/user/profile.go
index d690fa4d0113d..b39ba58f12455 100644
--- a/routers/web/user/profile.go
+++ b/routers/web/user/profile.go
@@ -74,6 +74,7 @@ func Profile(ctx *context.Context) {
 			return
 		}
 		ctx.Data["HeatmapData"] = data
+		ctx.Data["HeatmapTotalContributions"] = activities_model.GetTotalContributionsInHeatmap(data)
 	}
 
 	if len(ctx.ContextUser.Description) != 0 {
diff --git a/templates/user/heatmap.tmpl b/templates/user/heatmap.tmpl
index 9d58bc8fc5e51..5732d65b4aaaa 100644
--- a/templates/user/heatmap.tmpl
+++ b/templates/user/heatmap.tmpl
@@ -1,5 +1,12 @@
 {{if .HeatmapData}}
-	<div id="user-heatmap" data-heatmap-data="{{Json .HeatmapData}}">
+	<div id="user-heatmap"
+		data-heatmap-data="{{Json .HeatmapData}}"
+		data-locale-total-contributions-html="{{$.locale.Tr "heatmap.number_of_contributions_in_the_last_12_months" (LocaleNumber .HeatmapTotalContributions)}}"
+		data-locale-no-contributions="{{.locale.Tr "heatmap.no_contributions"}}"
+		data-locale-more="{{.locale.Tr "heatmap.more"}}"
+		data-locale-less="{{.locale.Tr "heatmap.less"}}"
+		data-locale-contributions-on="{{.locale.Tr "heatmap.number_of_contributions_on_date"}}"
+	>
 		<div slot="loading">
 			<div class="ui active centered inline indeterminate text loader" id="loading-heatmap">{{.locale.Tr "user.heatmap.loading"}}</div>
 		</div>
diff --git a/web_src/js/components/ActivityHeatmap.vue b/web_src/js/components/ActivityHeatmap.vue
index 98ffce44b5579..c213a3fa0ea5c 100644
--- a/web_src/js/components/ActivityHeatmap.vue
+++ b/web_src/js/components/ActivityHeatmap.vue
@@ -1,12 +1,11 @@
 <template>
   <div id="user-heatmap">
-    <div class="total-contributions">
-      {{ sum }} contributions in the last 12 months
-    </div>
+    <!-- eslint-disable-next-line vue/no-v-html (safely generated in the backend) -->
+    <div class="total-contributions" v-html="locale.contributions_in_the_last_12_months_html"/>
     <calendar-heatmap
       :locale="locale"
       :no-data-text="locale.no_contributions"
-      :tooltip-unit="locale.contributions"
+      :tooltip-formatter="(v) => tooltipFormatter(v, locale)"
       :end-date="endDate"
       :values="values"
       :range-color="colorRange"
@@ -41,15 +40,6 @@ export default {
     ],
     endDate: new Date(),
   }),
-  computed: {
-    sum() {
-      let s = 0;
-      for (let i = 0; i < this.values.length; i++) {
-        s += this.values[i].count;
-      }
-      return s;
-    }
-  },
   mounted() {
     // work around issue with first legend color being rendered twice and legend cut off
     const legend = document.querySelector('.vch__external-legend-wrapper');
@@ -74,6 +64,16 @@ export default {
 
       const newSearch = params.toString();
       window.location.search = newSearch.length ? `?${newSearch}` : '';
+    },
+    tooltipFormatter(v, locale) {
+      // TODO: use the localized number as below (why is it throwing Uncaught DOMException: Failed to execute
+      // 'attachShadow' on 'Element': Shadow root cannot be created on a host which already hosts a shadow tree.?)
+      // const number = `<gitea-locale-number data-number="${v.count}">${v.count}</gitea-locale-number>`;
+      const number = v.count;
+      const datetime = v.date.toISOString();
+      const fallback = v.date.toLocaleDateString();
+      const date = `<relative-time format="datetime" year="numeric" month="short" day="numeric" weekday="" datetime="${datetime}">${fallback}</relative-time>`;
+      return locale.contributions_on.replace('%[1]s', number).replace('%[2]s', date);
     }
   },
 };
diff --git a/web_src/js/features/heatmap.js b/web_src/js/features/heatmap.js
index f80089ee434eb..01c7b99c558e9 100644
--- a/web_src/js/features/heatmap.js
+++ b/web_src/js/features/heatmap.js
@@ -21,8 +21,11 @@ export function initHeatmap() {
     const locale = {
       months: new Array(12).fill().map((_, idx) => translateMonth(idx)),
       days: new Array(7).fill().map((_, idx) => translateDay(idx)),
-      contributions: 'contributions',
-      no_contributions: 'No contributions',
+      contributions_in_the_last_12_months_html: el.getAttribute('data-locale-total-contributions-html'),
+      no_contributions: el.getAttribute('data-locale-no-contributions'),
+      more: el.getAttribute('data-locale-more'),
+      less: el.getAttribute('data-locale-less'),
+      contributions_on: el.getAttribute('data-locale-contributions-on'),
     };
 
     const View = createApp(ActivityHeatmap, {values, locale});

From 39a2a4b6e7ca1b6aac62d5c6cc5e74c7cbaa848f Mon Sep 17 00:00:00 2001
From: Yarden Shoham <git@yardenshoham.com>
Date: Sat, 15 Apr 2023 07:21:37 +0000
Subject: [PATCH 2/6] Localize number

---
 web_src/js/components/ActivityHeatmap.vue | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/web_src/js/components/ActivityHeatmap.vue b/web_src/js/components/ActivityHeatmap.vue
index c213a3fa0ea5c..215568c849f2a 100644
--- a/web_src/js/components/ActivityHeatmap.vue
+++ b/web_src/js/components/ActivityHeatmap.vue
@@ -66,10 +66,7 @@ export default {
       window.location.search = newSearch.length ? `?${newSearch}` : '';
     },
     tooltipFormatter(v, locale) {
-      // TODO: use the localized number as below (why is it throwing Uncaught DOMException: Failed to execute
-      // 'attachShadow' on 'Element': Shadow root cannot be created on a host which already hosts a shadow tree.?)
-      // const number = `<gitea-locale-number data-number="${v.count}">${v.count}</gitea-locale-number>`;
-      const number = v.count;
+      const number = v.count.toLocaleString();
       const datetime = v.date.toISOString();
       const fallback = v.date.toLocaleDateString();
       const date = `<relative-time format="datetime" year="numeric" month="short" day="numeric" weekday="" datetime="${datetime}">${fallback}</relative-time>`;

From 90fc40f4fdbb99bacd9e7c0d4f0485a04984196a Mon Sep 17 00:00:00 2001
From: Yarden Shoham <git@yardenshoham.com>
Date: Sat, 15 Apr 2023 07:43:47 +0000
Subject: [PATCH 3/6] Pluralize

---
 options/locale/locale_en-US.ini           | 3 ++-
 templates/user/heatmap.tmpl               | 3 ++-
 web_src/js/components/ActivityHeatmap.vue | 3 ++-
 web_src/js/features/heatmap.js            | 3 ++-
 4 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini
index 642ca09aa3c85..b338c0cec1597 100644
--- a/options/locale/locale_en-US.ini
+++ b/options/locale/locale_en-US.ini
@@ -125,7 +125,8 @@ number_of_contributions_in_the_last_12_months = %s contributions in the last 12
 no_contributions = No contributions
 less = Less
 more = More
-number_of_contributions_on_date = <b>%[1]s contributions</b> on %[2]s
+number_of_contributions_on_date_n = <b>%[2]s contributions</b> on %[1]s
+number_of_contributions_on_date_1 = <b>1 contribution</b> on %[1]s
 
 [editor]
 buttons.heading.tooltip = Add heading
diff --git a/templates/user/heatmap.tmpl b/templates/user/heatmap.tmpl
index 5732d65b4aaaa..a0b7c919da719 100644
--- a/templates/user/heatmap.tmpl
+++ b/templates/user/heatmap.tmpl
@@ -5,7 +5,8 @@
 		data-locale-no-contributions="{{.locale.Tr "heatmap.no_contributions"}}"
 		data-locale-more="{{.locale.Tr "heatmap.more"}}"
 		data-locale-less="{{.locale.Tr "heatmap.less"}}"
-		data-locale-contributions-on="{{.locale.Tr "heatmap.number_of_contributions_on_date"}}"
+		data-locale-contributions-on-n="{{.locale.Tr "heatmap.number_of_contributions_on_date_n"}}"
+		data-locale-contributions-on-1="{{.locale.Tr "heatmap.number_of_contributions_on_date_1"}}"
 	>
 		<div slot="loading">
 			<div class="ui active centered inline indeterminate text loader" id="loading-heatmap">{{.locale.Tr "user.heatmap.loading"}}</div>
diff --git a/web_src/js/components/ActivityHeatmap.vue b/web_src/js/components/ActivityHeatmap.vue
index 215568c849f2a..da5dd101c4036 100644
--- a/web_src/js/components/ActivityHeatmap.vue
+++ b/web_src/js/components/ActivityHeatmap.vue
@@ -70,7 +70,8 @@ export default {
       const datetime = v.date.toISOString();
       const fallback = v.date.toLocaleDateString();
       const date = `<relative-time format="datetime" year="numeric" month="short" day="numeric" weekday="" datetime="${datetime}">${fallback}</relative-time>`;
-      return locale.contributions_on.replace('%[1]s', number).replace('%[2]s', date);
+      const stringToFormat = v.count === 1 ? locale.contributions_on_1 : locale.contributions_on_n;
+      return stringToFormat.replace('%[2]s', number).replace('%[1]s', date);
     }
   },
 };
diff --git a/web_src/js/features/heatmap.js b/web_src/js/features/heatmap.js
index 01c7b99c558e9..8fc1269c81fd8 100644
--- a/web_src/js/features/heatmap.js
+++ b/web_src/js/features/heatmap.js
@@ -25,7 +25,8 @@ export function initHeatmap() {
       no_contributions: el.getAttribute('data-locale-no-contributions'),
       more: el.getAttribute('data-locale-more'),
       less: el.getAttribute('data-locale-less'),
-      contributions_on: el.getAttribute('data-locale-contributions-on'),
+      contributions_on_n: el.getAttribute('data-locale-contributions-on-n'),
+      contributions_on_1: el.getAttribute('data-locale-contributions-on-1'),
     };
 
     const View = createApp(ActivityHeatmap, {values, locale});

From a83761cbbae3c2e3b4bced71e680f44432073ac8 Mon Sep 17 00:00:00 2001
From: Yarden Shoham <git@yardenshoham.com>
Date: Sat, 15 Apr 2023 10:01:26 +0000
Subject: [PATCH 4/6] Revert tooltip localization attempt

---
 options/locale/locale_en-US.ini           |  2 --
 templates/user/heatmap.tmpl               |  2 --
 web_src/js/components/ActivityHeatmap.vue | 10 +---------
 web_src/js/features/heatmap.js            |  3 +--
 4 files changed, 2 insertions(+), 15 deletions(-)

diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini
index b338c0cec1597..a246851f3aba0 100644
--- a/options/locale/locale_en-US.ini
+++ b/options/locale/locale_en-US.ini
@@ -125,8 +125,6 @@ number_of_contributions_in_the_last_12_months = %s contributions in the last 12
 no_contributions = No contributions
 less = Less
 more = More
-number_of_contributions_on_date_n = <b>%[2]s contributions</b> on %[1]s
-number_of_contributions_on_date_1 = <b>1 contribution</b> on %[1]s
 
 [editor]
 buttons.heading.tooltip = Add heading
diff --git a/templates/user/heatmap.tmpl b/templates/user/heatmap.tmpl
index a0b7c919da719..2d1fa9bb7f8d0 100644
--- a/templates/user/heatmap.tmpl
+++ b/templates/user/heatmap.tmpl
@@ -5,8 +5,6 @@
 		data-locale-no-contributions="{{.locale.Tr "heatmap.no_contributions"}}"
 		data-locale-more="{{.locale.Tr "heatmap.more"}}"
 		data-locale-less="{{.locale.Tr "heatmap.less"}}"
-		data-locale-contributions-on-n="{{.locale.Tr "heatmap.number_of_contributions_on_date_n"}}"
-		data-locale-contributions-on-1="{{.locale.Tr "heatmap.number_of_contributions_on_date_1"}}"
 	>
 		<div slot="loading">
 			<div class="ui active centered inline indeterminate text loader" id="loading-heatmap">{{.locale.Tr "user.heatmap.loading"}}</div>
diff --git a/web_src/js/components/ActivityHeatmap.vue b/web_src/js/components/ActivityHeatmap.vue
index da5dd101c4036..f8d930f4c6a0e 100644
--- a/web_src/js/components/ActivityHeatmap.vue
+++ b/web_src/js/components/ActivityHeatmap.vue
@@ -5,7 +5,7 @@
     <calendar-heatmap
       :locale="locale"
       :no-data-text="locale.no_contributions"
-      :tooltip-formatter="(v) => tooltipFormatter(v, locale)"
+      :tooltip-unit="locale.contributions"
       :end-date="endDate"
       :values="values"
       :range-color="colorRange"
@@ -64,14 +64,6 @@ export default {
 
       const newSearch = params.toString();
       window.location.search = newSearch.length ? `?${newSearch}` : '';
-    },
-    tooltipFormatter(v, locale) {
-      const number = v.count.toLocaleString();
-      const datetime = v.date.toISOString();
-      const fallback = v.date.toLocaleDateString();
-      const date = `<relative-time format="datetime" year="numeric" month="short" day="numeric" weekday="" datetime="${datetime}">${fallback}</relative-time>`;
-      const stringToFormat = v.count === 1 ? locale.contributions_on_1 : locale.contributions_on_n;
-      return stringToFormat.replace('%[2]s', number).replace('%[1]s', date);
     }
   },
 };
diff --git a/web_src/js/features/heatmap.js b/web_src/js/features/heatmap.js
index 8fc1269c81fd8..7577c8be38750 100644
--- a/web_src/js/features/heatmap.js
+++ b/web_src/js/features/heatmap.js
@@ -21,12 +21,11 @@ export function initHeatmap() {
     const locale = {
       months: new Array(12).fill().map((_, idx) => translateMonth(idx)),
       days: new Array(7).fill().map((_, idx) => translateDay(idx)),
+      contributions: 'contributions',
       contributions_in_the_last_12_months_html: el.getAttribute('data-locale-total-contributions-html'),
       no_contributions: el.getAttribute('data-locale-no-contributions'),
       more: el.getAttribute('data-locale-more'),
       less: el.getAttribute('data-locale-less'),
-      contributions_on_n: el.getAttribute('data-locale-contributions-on-n'),
-      contributions_on_1: el.getAttribute('data-locale-contributions-on-1'),
     };
 
     const View = createApp(ActivityHeatmap, {values, locale});

From 03e68293d3eddd8345ba65547a74906c7debc5ed Mon Sep 17 00:00:00 2001
From: Yarden Shoham <git@yardenshoham.com>
Date: Sat, 15 Apr 2023 10:20:31 +0000
Subject: [PATCH 5/6] Add comment

---
 web_src/js/features/heatmap.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/web_src/js/features/heatmap.js b/web_src/js/features/heatmap.js
index 7577c8be38750..5869f5ac985a7 100644
--- a/web_src/js/features/heatmap.js
+++ b/web_src/js/features/heatmap.js
@@ -18,6 +18,7 @@ export function initHeatmap() {
       return {date: new Date(v), count: heatmap[v]};
     });
 
+    // last heatmap tooltip localization attempt https://github.com/go-gitea/gitea/pull/24131/commits/a83761cbbae3c2e3b4bced71e680f44432073ac8
     const locale = {
       months: new Array(12).fill().map((_, idx) => translateMonth(idx)),
       days: new Array(7).fill().map((_, idx) => translateDay(idx)),

From 87da553fef732e2886ec342f2763d90710337bde Mon Sep 17 00:00:00 2001
From: Yarden Shoham <git@yardenshoham.com>
Date: Mon, 17 Apr 2023 06:39:47 +0000
Subject: [PATCH 6/6] Localize number in the backend

---
 templates/user/heatmap.tmpl               | 2 +-
 web_src/js/components/ActivityHeatmap.vue | 5 +++--
 web_src/js/features/heatmap.js            | 2 +-
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/templates/user/heatmap.tmpl b/templates/user/heatmap.tmpl
index 2d1fa9bb7f8d0..5d42a5435bb7b 100644
--- a/templates/user/heatmap.tmpl
+++ b/templates/user/heatmap.tmpl
@@ -1,7 +1,7 @@
 {{if .HeatmapData}}
 	<div id="user-heatmap"
 		data-heatmap-data="{{Json .HeatmapData}}"
-		data-locale-total-contributions-html="{{$.locale.Tr "heatmap.number_of_contributions_in_the_last_12_months" (LocaleNumber .HeatmapTotalContributions)}}"
+		data-locale-total-contributions="{{$.locale.Tr "heatmap.number_of_contributions_in_the_last_12_months" ($.locale.PrettyNumber .HeatmapTotalContributions)}}"
 		data-locale-no-contributions="{{.locale.Tr "heatmap.no_contributions"}}"
 		data-locale-more="{{.locale.Tr "heatmap.more"}}"
 		data-locale-less="{{.locale.Tr "heatmap.less"}}"
diff --git a/web_src/js/components/ActivityHeatmap.vue b/web_src/js/components/ActivityHeatmap.vue
index f8d930f4c6a0e..7834ebe82ccac 100644
--- a/web_src/js/components/ActivityHeatmap.vue
+++ b/web_src/js/components/ActivityHeatmap.vue
@@ -1,7 +1,8 @@
 <template>
   <div id="user-heatmap">
-    <!-- eslint-disable-next-line vue/no-v-html (safely generated in the backend) -->
-    <div class="total-contributions" v-html="locale.contributions_in_the_last_12_months_html"/>
+    <div class="total-contributions">
+      {{ locale.contributions_in_the_last_12_months }}
+    </div>
     <calendar-heatmap
       :locale="locale"
       :no-data-text="locale.no_contributions"
diff --git a/web_src/js/features/heatmap.js b/web_src/js/features/heatmap.js
index 5869f5ac985a7..2c65293b644e3 100644
--- a/web_src/js/features/heatmap.js
+++ b/web_src/js/features/heatmap.js
@@ -23,7 +23,7 @@ export function initHeatmap() {
       months: new Array(12).fill().map((_, idx) => translateMonth(idx)),
       days: new Array(7).fill().map((_, idx) => translateDay(idx)),
       contributions: 'contributions',
-      contributions_in_the_last_12_months_html: el.getAttribute('data-locale-total-contributions-html'),
+      contributions_in_the_last_12_months: el.getAttribute('data-locale-total-contributions'),
       no_contributions: el.getAttribute('data-locale-no-contributions'),
       more: el.getAttribute('data-locale-more'),
       less: el.getAttribute('data-locale-less'),