1
0
mirror of https://gitcode.com/gitea/gitea.git synced 2025-06-04 03:09:34 +08:00
Files
.devcontainer
.gitea
.github
assets
build
cmd
contrib
custom
docker
docs
models
modules
options
public
routers
services
snap
templates
tests
web_src
css
fomantic
js
components
.eslintrc.yaml
ActionRunStatus.vue
ActivityHeatmap.vue
ContextPopup.vue
DashboardRepoList.vue
DiffCommitSelector.vue
DiffFileList.vue
DiffFileTree.vue
DiffFileTreeItem.vue
PullRequestMergeForm.vue
RepoActionView.vue
RepoActivityTopAuthors.vue
RepoBranchTagSelector.vue
RepoContributors.vue
ScopedAccessTokenSelector.vue
features
markup
modules
render
standalone
utils
vendor
webcomponents
bootstrap.js
bootstrap.test.js
htmx.js
index.js
jquery.js
svg.js
svg.test.js
utils.js
utils.test.js
vitest.setup.js
svg
.air.toml
.changelog.yml
.dockerignore
.editorconfig
.eslintrc.yaml
.gitattributes
.gitignore
.gitpod.yml
.golangci.yml
.ignore
.markdownlint.yaml
.npmrc
.spectral.yaml
.stylelintrc.yaml
.yamllint.yaml
BSDmakefile
CHANGELOG.md
CODE_OF_CONDUCT.md
CONTRIBUTING.md
DCO
Dockerfile
Dockerfile.rootless
LICENSE
MAINTAINERS
Makefile
README.md
README_ZH.md
SECURITY.md
build.go
go.mod
go.sum
main.go
package-lock.json
package.json
playwright.config.js
poetry.lock
poetry.toml
pyproject.toml
vitest.config.js
webpack.config.js
gitea/web_src/js/components/ActivityHeatmap.vue
silverwind 9a3de436f4 Reorder blocks in vue SFCs ()
The [recommended order](https://vuejs.org/guide/scaling-up/sfc.html) for
SFC blocks is script -> template -> style, which we were violating
because template and script were swapped. I do find script first also
easier to read because the imports are on top, letting me immideatly see
a component's dependencies.

This is a pure cut-paste refactor with some removal of some empty lines.

---------

Co-authored-by: Lauris BH <lauris@nix.lv>
2023-09-02 14:59:07 +00:00

70 lines
1.9 KiB
Vue

<script>
import {CalendarHeatmap} from 'vue3-calendar-heatmap';
export default {
components: {CalendarHeatmap},
props: {
values: {
type: Array,
default: () => [],
},
locale: {
type: Object,
default: () => {},
}
},
data: () => ({
colorRange: [
'var(--color-secondary-alpha-60)',
'var(--color-secondary-alpha-60)',
'var(--color-primary-light-4)',
'var(--color-primary-light-2)',
'var(--color-primary)',
'var(--color-primary-dark-2)',
'var(--color-primary-dark-4)',
],
endDate: new Date(),
}),
mounted() {
// work around issue with first legend color being rendered twice and legend cut off
const legend = document.querySelector('.vch__external-legend-wrapper');
legend.setAttribute('viewBox', '12 0 80 10');
legend.style.marginRight = '-12px';
},
methods: {
handleDayClick(e) {
// Reset filter if same date is clicked
const params = new URLSearchParams(document.location.search);
const queryDate = params.get('date');
// Timezone has to be stripped because toISOString() converts to UTC
const clickedDate = new Date(e.date - (e.date.getTimezoneOffset() * 60000)).toISOString().substring(0, 10);
if (queryDate && queryDate === clickedDate) {
params.delete('date');
} else {
params.set('date', clickedDate);
}
params.delete('page');
const newSearch = params.toString();
window.location.search = newSearch.length ? `?${newSearch}` : '';
}
},
};
</script>
<template>
<div class="total-contributions">
{{ locale.contributions_in_the_last_12_months }}
</div>
<calendar-heatmap
:locale="locale"
:no-data-text="locale.no_contributions"
:tooltip-unit="locale.contributions"
:end-date="endDate"
:values="values"
:range-color="colorRange"
@day-click="handleDayClick($event)"
/>
</template>