summaryrefslogtreecommitdiffstats
path: root/web_src/js
diff options
context:
space:
mode:
authorGary Kim <gary@garykim.dev>2020-04-06 09:31:11 +0800
committerGitHub <noreply@github.com>2020-04-06 09:31:11 +0800
commit561e7a9a59046e9472bd7e732763024eb8887f7d (patch)
treecd0ec8008fe8a79096ac6d5f6233c04ec18b96d1 /web_src/js
parentca33a9577890559f53b6164728ae2ada298b8902 (diff)
downloadgitea-561e7a9a59046e9472bd7e732763024eb8887f7d.tar.gz
gitea-561e7a9a59046e9472bd7e732763024eb8887f7d.zip
Migrate ActivityHeatmap to Vue SFC (#10953)
* Migrate ActivityHeatmap to Vue SFC Signed-off-by: Gary Kim <gary@garykim.dev> * Readd vue compiler alias Signed-off-by: Gary Kim <gary@garykim.dev> * Remove unneeded use of v-html Signed-off-by: Gary Kim <gary@garykim.dev> Co-authored-by: zeripath <art27@cantab.net>
Diffstat (limited to 'web_src/js')
-rw-r--r--web_src/js/components/ActivityHeatmap.vue79
-rw-r--r--web_src/js/features/userheatmap.js96
2 files changed, 83 insertions, 92 deletions
diff --git a/web_src/js/components/ActivityHeatmap.vue b/web_src/js/components/ActivityHeatmap.vue
new file mode 100644
index 0000000000..ec241b64fa
--- /dev/null
+++ b/web_src/js/components/ActivityHeatmap.vue
@@ -0,0 +1,79 @@
+<template>
+ <div>
+ <div v-show="isLoading">
+ <slot name="loading"></slot>
+ </div>
+ <h4 class="total-contributions" v-if="!isLoading">
+ {{ totalContributions }} total contributions in the last 12 months
+ </h4>
+ <calendar-heatmap v-show="!isLoading" :locale="locale" :no-data-text="locale.no_contributions" :tooltip-unit="locale.contributions" :end-date="endDate" :values="values" :range-color="colorRange"/>
+ </div>
+</template>
+
+<script>
+import {CalendarHeatmap} from 'vue-calendar-heatmap';
+const {AppSubUrl, heatmapUser} = window.config;
+
+export default {
+ name: "ActivityHeatmap",
+ components: {
+ CalendarHeatmap
+ },
+ data() {
+ return {
+ isLoading: true,
+ colorRange: [],
+ endDate: null,
+ values: [],
+ totalContributions: 0,
+ suburl: AppSubUrl,
+ user: heatmapUser,
+ locale: {
+ contributions: 'contributions',
+ no_contributions: 'No contributions',
+ },
+ };
+ },
+ mounted() {
+ this.colorRange = [
+ this.getColor(0),
+ this.getColor(1),
+ this.getColor(2),
+ this.getColor(3),
+ this.getColor(4),
+ this.getColor(5)
+ ];
+ this.endDate = new Date();
+ this.loadHeatmap(this.user);
+ },
+ methods: {
+ loadHeatmap(userName) {
+ const self = this;
+ $.get(`${this.suburl}/api/v1/users/${userName}/heatmap`, (chartRawData) => {
+ const chartData = [];
+ for (let i = 0; i < chartRawData.length; i++) {
+ self.totalContributions += chartRawData[i].contributions;
+ chartData[i] = {date: new Date(chartRawData[i].timestamp * 1000), count: chartRawData[i].contributions};
+ }
+ self.values = chartData;
+ self.isLoading = false;
+ });
+ },
+ getColor(idx) {
+ const el = document.createElement('div');
+ el.className = `heatmap-color-${idx}`;
+ document.body.appendChild(el);
+
+ const color = getComputedStyle(el).backgroundColor;
+
+ document.body.removeChild(el);
+
+ return color;
+ }
+ },
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/web_src/js/features/userheatmap.js b/web_src/js/features/userheatmap.js
index 9a8e606b1a..f7e0d1a75f 100644
--- a/web_src/js/features/userheatmap.js
+++ b/web_src/js/features/userheatmap.js
@@ -1,98 +1,10 @@
import Vue from 'vue';
-const {AppSubUrl, heatmapUser} = window.config;
+import ActivityHeatmap from '../components/ActivityHeatmap.vue';
-export default async function initHeatmap() {
+export default async function initUserHeatmap() {
const el = document.getElementById('user-heatmap');
if (!el) return;
-
- const {CalendarHeatmap} = await import(/* webpackChunkName: "userheatmap" */'vue-calendar-heatmap');
- Vue.component('calendarHeatmap', CalendarHeatmap);
-
- const vueDelimeters = ['${', '}'];
-
- Vue.component('activity-heatmap', {
- delimiters: vueDelimeters,
-
- props: {
- user: {
- type: String,
- required: true
- },
- suburl: {
- type: String,
- required: true
- },
- locale: {
- type: Object,
- required: true
- }
- },
-
- data() {
- return {
- isLoading: true,
- colorRange: [],
- endDate: null,
- values: [],
- totalContributions: 0,
- };
- },
-
- mounted() {
- this.colorRange = [
- this.getColor(0),
- this.getColor(1),
- this.getColor(2),
- this.getColor(3),
- this.getColor(4),
- this.getColor(5)
- ];
- this.endDate = new Date();
- this.loadHeatmap(this.user);
- },
-
- methods: {
- loadHeatmap(userName) {
- const self = this;
- $.get(`${this.suburl}/api/v1/users/${userName}/heatmap`, (chartRawData) => {
- const chartData = [];
- for (let i = 0; i < chartRawData.length; i++) {
- self.totalContributions += chartRawData[i].contributions;
- chartData[i] = {date: new Date(chartRawData[i].timestamp * 1000), count: chartRawData[i].contributions};
- }
- self.values = chartData;
- self.isLoading = false;
- });
- },
-
- getColor(idx) {
- const el = document.createElement('div');
- el.className = `heatmap-color-${idx}`;
- document.body.appendChild(el);
-
- const color = getComputedStyle(el).backgroundColor;
-
- document.body.removeChild(el);
-
- return color;
- }
- },
-
- template: '<div><div v-show="isLoading"><slot name="loading"></slot></div><h4 class="total-contributions" v-if="!isLoading"><span v-html="totalContributions"></span> total contributions in the last 12 months</h4><calendar-heatmap v-show="!isLoading" :locale="locale" :no-data-text="locale.no_contributions" :tooltip-unit="locale.contributions" :end-date="endDate" :values="values" :range-color="colorRange"/></div>'
- });
-
- new Vue({
- delimiters: vueDelimeters,
- el,
-
- data: {
- suburl: AppSubUrl,
- heatmapUser,
- locale: {
- contributions: 'contributions',
- no_contributions: 'No contributions',
- },
- },
- });
+ const View = Vue.extend(ActivityHeatmap);
+ new View().$mount(el);
}