Fix activity heat map padding & locale (go-gitea#30823) (go-gitea#30827)

Backport go-gitea#30823 by wxiaoguang

Fix go-gitea#30808

Co-authored-by: wxiaoguang <[email protected]>
Co-authored-by: silverwind <[email protected]>

Author: 3 people

package-lock.json

@@ -13,6 +13,7 @@
     "@github/text-expander-element": "2.6.1",
     "@mcaptcha/vanilla-glue": "0.1.0-alpha-3",
     "@primer/octicons": "19.9.0",
+    "@silverwind/vue3-calendar-heatmap": "2.0.6",
     "add-asset-webpack-plugin": "2.0.1",
     "ansi_up": "6.0.2",
     "asciinema-player": "3.7.1",
@@ -56,7 +57,6 @@
     "vue-bar-graph": "2.0.0",
     "vue-chartjs": "5.3.1",
     "vue-loader": "17.4.2",
-    "vue3-calendar-heatmap": "2.0.5",
     "webpack": "5.91.0",
     "webpack-cli": "5.1.4",
     "wrap-ansi": "9.0.0"

package.json

@@ -1,5 +1,6 @@
 <script>
-import {CalendarHeatmap} from 'vue3-calendar-heatmap';
+// TODO: Switch to upstream after https://github.com/razorness/vue3-calendar-heatmap/pull/34 is merged
+import {CalendarHeatmap} from '@silverwind/vue3-calendar-heatmap';
 
 export default {
   components: {CalendarHeatmap},
@@ -55,15 +56,16 @@ export default {
 </script>
 <template>
   <div class="total-contributions">
-    {{ locale.contributions_in_the_last_12_months }}
+    {{ locale.textTotalContributions }}
   </div>
   <calendar-heatmap
-    :locale="locale"
-    :no-data-text="locale.no_contributions"
-    :tooltip-unit="locale.contributions"
+    :locale="locale.heatMapLocale"
+    :no-data-text="locale.noDataText"
+    :tooltip-unit="locale.tooltipUnit"
     :end-date="endDate"
     :values="values"
     :range-color="colorRange"
     @day-click="handleDayClick($event)"
+    :tippy-props="{theme: 'tooltip'}"
   />
 </template>

web_src/js/components/ActivityHeatmap.vue

@@ -20,13 +20,16 @@ export function initHeatmap() {
 
     // 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)),
-      contributions: 'contributions',
-      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'),
+      heatMapLocale: {
+        months: new Array(12).fill().map((_, idx) => translateMonth(idx)),
+        days: new Array(7).fill().map((_, idx) => translateDay(idx)),
+        on: ' - ', // no correct locale support for it, because in many languages the sentence is not "something on someday"
+        more: el.getAttribute('data-locale-more'),
+        less: el.getAttribute('data-locale-less'),
+      },
+      tooltipUnit: 'contributions',
+      textTotalContributions: el.getAttribute('data-locale-total-contributions'),
+      noDataText: el.getAttribute('data-locale-no-contributions'),
     };
 
     const View = createApp(ActivityHeatmap, {values, locale});