Fix activity heat map padding & locale (#30823)

Fix #30808

---------

Co-authored-by: silverwind <me@silverwind.io>
This commit is contained in:
wxiaoguang 2024-05-02 21:22:55 +08:00 committed by GitHub
parent 6ff2acc52c
commit eb8bb82e58
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 31 additions and 26 deletions

26
package-lock.json generated
View File

@ -14,6 +14,7 @@
"@github/text-expander-element": "2.6.1", "@github/text-expander-element": "2.6.1",
"@mcaptcha/vanilla-glue": "0.1.0-alpha-3", "@mcaptcha/vanilla-glue": "0.1.0-alpha-3",
"@primer/octicons": "19.9.0", "@primer/octicons": "19.9.0",
"@silverwind/vue3-calendar-heatmap": "2.0.6",
"add-asset-webpack-plugin": "2.0.1", "add-asset-webpack-plugin": "2.0.1",
"ansi_up": "6.0.2", "ansi_up": "6.0.2",
"asciinema-player": "3.7.1", "asciinema-player": "3.7.1",
@ -57,7 +58,6 @@
"vue-bar-graph": "2.0.0", "vue-bar-graph": "2.0.0",
"vue-chartjs": "5.3.1", "vue-chartjs": "5.3.1",
"vue-loader": "17.4.2", "vue-loader": "17.4.2",
"vue3-calendar-heatmap": "2.0.5",
"webpack": "5.91.0", "webpack": "5.91.0",
"webpack-cli": "5.1.4", "webpack-cli": "5.1.4",
"wrap-ansi": "9.0.0" "wrap-ansi": "9.0.0"
@ -1626,6 +1626,18 @@
"win32" "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": { "node_modules/@sinclair/typebox": {
"version": "0.27.8", "version": "0.27.8",
"resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz", "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": { "node_modules/watchpack": {
"version": "2.4.1", "version": "2.4.1",
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.1.tgz", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.1.tgz",

View File

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

View File

@ -1,5 +1,6 @@
<script> <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 { export default {
components: {CalendarHeatmap}, components: {CalendarHeatmap},
@ -55,15 +56,16 @@ export default {
</script> </script>
<template> <template>
<div class="total-contributions"> <div class="total-contributions">
{{ locale.contributions_in_the_last_12_months }} {{ locale.textTotalContributions }}
</div> </div>
<calendar-heatmap <calendar-heatmap
:locale="locale" :locale="locale.heatMapLocale"
:no-data-text="locale.no_contributions" :no-data-text="locale.noDataText"
:tooltip-unit="locale.contributions" :tooltip-unit="locale.tooltipUnit"
:end-date="endDate" :end-date="endDate"
:values="values" :values="values"
:range-color="colorRange" :range-color="colorRange"
@day-click="handleDayClick($event)" @day-click="handleDayClick($event)"
:tippy-props="{theme: 'tooltip'}"
/> />
</template> </template>

View File

@ -20,13 +20,16 @@ export function initHeatmap() {
// last heatmap tooltip localization attempt https://github.com/go-gitea/gitea/pull/24131/commits/a83761cbbae3c2e3b4bced71e680f44432073ac8 // last heatmap tooltip localization attempt https://github.com/go-gitea/gitea/pull/24131/commits/a83761cbbae3c2e3b4bced71e680f44432073ac8
const locale = { const locale = {
heatMapLocale: {
months: new Array(12).fill().map((_, idx) => translateMonth(idx)), months: new Array(12).fill().map((_, idx) => translateMonth(idx)),
days: new Array(7).fill().map((_, idx) => translateDay(idx)), days: new Array(7).fill().map((_, idx) => translateDay(idx)),
contributions: 'contributions', on: ' - ', // no correct locale support for it, because in many languages the sentence is not "something on someday"
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'), more: el.getAttribute('data-locale-more'),
less: el.getAttribute('data-locale-less'), 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}); const View = createApp(ActivityHeatmap, {values, locale});