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

Backport #30823 by wxiaoguang

Fix #30808

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: silverwind <me@silverwind.io>

package-lock.json

@@ -14,6 +14,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",
@@ -57,7 +58,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"
@@ -1626,6 +1626,18 @@
         "win32"
       ]
     },
+    "node_modules/@silverwind/vue3-calendar-heatmap": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@silverwind/vue3-calendar-heatmap/-/vue3-calendar-heatmap-2.0.6.tgz",
+      "integrity": "sha512-efX+nf2GR7EfA7iNgZDeM9Jue5ksglSXvN0C/ja0M1bTmkCpAxKlGJ3vki7wfTPQgX1O0nCfAM62IKqUUEM0cQ==",
+      "engines": {
+        "node": ">=16"
+      },
+      "peerDependencies": {
+        "tippy.js": "^6.3.7",
+        "vue": "^3.2.29"
+      }
+    },
     "node_modules/@sinclair/typebox": {
       "version": "0.27.8",
       "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz",
@@ -12200,18 +12212,6 @@
         }
       }
     },
-    "node_modules/vue3-calendar-heatmap": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/vue3-calendar-heatmap/-/vue3-calendar-heatmap-2.0.5.tgz",
-      "integrity": "sha512-qvveNQlTS5Aw7AvRLs0zOyu3uP5iGJlXJAnkrkG2ElDdyQ8H1TJhQ8rL702CROjAg16ezIveUY10nCO7lqZ25w==",
-      "engines": {
-        "node": ">=16"
-      },
-      "peerDependencies": {
-        "tippy.js": "^6.3.7",
-        "vue": "^3.2.29"
-      }
-    },
     "node_modules/watchpack": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.1.tgz",

package.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"

web_src/js/components/ActivityHeatmap.vue

@@ -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/features/heatmap.js

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