Localize heatmap

Signed-off-by: Yarden Shoham <[email protected]>

Author: yardenshoham

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
+}

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

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{

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 {

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>

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);
     }
   },
 };

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});