move vue and vue-calendar-heatmap to webpack (#10188)
- unvendor vue and vue-calendar-heatmap
- remove unused moment.js leftover from previous heatmap version
- ensure webpack loads the full version of vue
- fix vue devmode warning related to 'searchLimit' type
I wanted to name the chunk heatmap.js but adblockers don't like that
filename [1].
[1] 3899d5dff3/easyprivacy/easyprivacy_general.txt (L2095)
This commit is contained in:
parent
09dbd85a3a
commit
062f35109d
@ -23,7 +23,6 @@ globals:
|
||||
emojify: false
|
||||
SimpleMDE: false
|
||||
u2fApi: false
|
||||
Vue: false
|
||||
|
||||
rules:
|
||||
arrow-body-style: [0]
|
||||
|
35
package-lock.json
generated
35
package-lock.json
generated
@ -10255,6 +10255,11 @@
|
||||
"irregular-plurals": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"popper.js": {
|
||||
"version": "1.16.1",
|
||||
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
|
||||
"integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
|
||||
},
|
||||
"posix-character-classes": {
|
||||
"version": "0.1.1",
|
||||
"resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
|
||||
@ -15033,6 +15038,16 @@
|
||||
"integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
|
||||
"optional": true
|
||||
},
|
||||
"v-tooltip": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/v-tooltip/-/v-tooltip-2.0.3.tgz",
|
||||
"integrity": "sha512-KZZY3s+dcijzZmV2qoDH4rYmjMZ9YKGBVoUznZKQX0e3c2GjpJm3Sldzz8HHH2Ud87JqhZPB4+4gyKZ6m98cKQ==",
|
||||
"requires": {
|
||||
"lodash": "^4.17.15",
|
||||
"popper.js": "^1.16.0",
|
||||
"vue-resize": "^0.4.5"
|
||||
}
|
||||
},
|
||||
"v8-compile-cache": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.1.0.tgz",
|
||||
@ -15217,6 +15232,21 @@
|
||||
"core-js": "^3.6.1",
|
||||
"gsap": "^3.0.4",
|
||||
"vue": "^2.6.11"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue": {
|
||||
"version": "2.6.11",
|
||||
"resolved": "https://registry.npmjs.org/vue/-/vue-2.6.11.tgz",
|
||||
"integrity": "sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"vue-calendar-heatmap": {
|
||||
"version": "0.8.4",
|
||||
"resolved": "https://registry.npmjs.org/vue-calendar-heatmap/-/vue-calendar-heatmap-0.8.4.tgz",
|
||||
"integrity": "sha512-Hx7OYBY1ghUIxKmFIIzpLT4XlcrwnI3WpadJEj/sKj5quoxwEuSDKmf94v0zWOHeQ/2CrB1G66geaKR/O56+OQ==",
|
||||
"requires": {
|
||||
"v-tooltip": "^2.0.0-rc.32"
|
||||
}
|
||||
},
|
||||
"vue-hot-reload-api": {
|
||||
@ -15238,6 +15268,11 @@
|
||||
"vue-style-loader": "^4.1.0"
|
||||
}
|
||||
},
|
||||
"vue-resize": {
|
||||
"version": "0.4.5",
|
||||
"resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-0.4.5.tgz",
|
||||
"integrity": "sha512-bhP7MlgJQ8TIkZJXAfDf78uJO+mEI3CaLABLjv0WNzr4CcGRGPIAItyWYnP6LsPA4Oq0WE+suidNs6dgpO4RHg=="
|
||||
},
|
||||
"vue-style-loader": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",
|
||||
|
@ -13,7 +13,9 @@
|
||||
"jquery-migrate": "3.1.0",
|
||||
"jquery.are-you-sure": "1.9.0",
|
||||
"swagger-ui": "3.25.0",
|
||||
"vue-bar-graph": "1.2.0"
|
||||
"vue": "2.6.11",
|
||||
"vue-bar-graph": "1.2.0",
|
||||
"vue-calendar-heatmap": "0.8.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "7.8.4",
|
||||
|
13
public/vendor/librejs.html
vendored
13
public/vendor/librejs.html
vendored
@ -51,9 +51,9 @@
|
||||
<td><a href="https://github.com/bluef/gitgraph.js">gitgraph.js-latest</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="./plugins/vue/vue.min.js">vue.min.js</a></td>
|
||||
<td><a href="../js/index.js">vue</a></td>
|
||||
<td><a href="https://github.com/vuejs/vue/blob/dev/LICENSE">Expat</a></td>
|
||||
<td><a href="https://github.com/vuejs/vue/archive/v2.6.6.tar.gz">vue.js-v2.6.6.tar.gz</a></td>
|
||||
<td><a href="https://github.com/vuejs/vue/archive/v2.6.11.tar.gz">vue.js-v2.6.11.tar.gz</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="./plugins/emojify/emojify.custom.js">emojify.custom.js</a></td>
|
||||
@ -131,14 +131,9 @@
|
||||
<td><a href="https://github.com/swagger-api/swagger-ui/archive/v3.22.1.tar.gz">swagger-ui-v3.22.1.tar.gz</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="./plugins/vue-calendar-heatmap/">vue-calendar-heatmap</a></td>
|
||||
<td><a href="../js/userheatmap.js">vue-calendar-heatmap</a></td>
|
||||
<td><a href="https://github.com/WildCodeSchool/vue-calendar-heatmap/blob/master/README.md">MIT</a></td>
|
||||
<td><a href="https://github.com/WildCodeSchool/vue-calendar-heatmap/archive/master.zip">7f48b20.zip</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="./plugins/moment/">moment.js</a></td>
|
||||
<td><a href="https://github.com/moment/moment/blob/develop/LICENSE">MIT</a></td>
|
||||
<td><a href="https://github.com/moment/moment/archive/2.22.2.tar.gz">0.4.1.tar.gz</a></td>
|
||||
<td><a href="https://github.com/WildCodeSchool/vue-calendar-heatmap/archive/master.zip">master.zip</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
1
public/vendor/plugins/moment/moment.min.js
vendored
1
public/vendor/plugins/moment/moment.min.js
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,112 +0,0 @@
|
||||
|
||||
svg.vch__wrapper[data-v-a9cfea66] {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
line-height: 10px;
|
||||
}
|
||||
svg.vch__wrapper .vch__months__labels__wrapper text.vch__month__label[data-v-a9cfea66] {
|
||||
font-size: 10px;
|
||||
}
|
||||
svg.vch__wrapper .vch__days__labels__wrapper text.vch__day__label[data-v-a9cfea66],
|
||||
svg.vch__wrapper .vch__legend__wrapper text[data-v-a9cfea66] {
|
||||
font-size: 9px;
|
||||
}
|
||||
svg.vch__wrapper .vch__months__labels__wrapper text.vch__month__label[data-v-a9cfea66],
|
||||
svg.vch__wrapper .vch__days__labels__wrapper text.vch__day__label[data-v-a9cfea66],
|
||||
svg.vch__wrapper .vch__legend__wrapper text[data-v-a9cfea66] {
|
||||
fill: #767676;
|
||||
}
|
||||
svg.vch__wrapper rect.vch__day__square[data-v-a9cfea66]:hover {
|
||||
stroke: #555;
|
||||
stroke-width: 1px;
|
||||
}
|
||||
svg.vch__wrapper rect.vch__day__square[data-v-a9cfea66]:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.vue-tooltip-theme.tooltip {
|
||||
display: block !important;
|
||||
z-index: 10000;
|
||||
}
|
||||
.vue-tooltip-theme.tooltip .tooltip-inner {
|
||||
background: rgba(0, 0, 0, .7);
|
||||
border-radius: 3px;
|
||||
color: #ebedf0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
padding: 14px 10px;
|
||||
}
|
||||
.vue-tooltip-theme.tooltip .tooltip-inner b {
|
||||
color: white;
|
||||
}
|
||||
.vue-tooltip-theme.tooltip .tooltip-arrow {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
position: absolute;
|
||||
margin: 5px;
|
||||
border-color: black;
|
||||
z-index: 1;
|
||||
}
|
||||
.vue-tooltip-theme.tooltip[x-placement^="top"] {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.vue-tooltip-theme.tooltip[x-placement^="top"] .tooltip-arrow {
|
||||
border-width: 5px 5px 0 5px;
|
||||
border-left-color: transparent !important;
|
||||
border-right-color: transparent !important;
|
||||
border-bottom-color: transparent !important;
|
||||
bottom: -5px;
|
||||
left: calc(50% - 5px);
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.vue-tooltip-theme.tooltip[x-placement^="bottom"] {
|
||||
margin-top: 5px;
|
||||
}
|
||||
.vue-tooltip-theme.tooltip[x-placement^="bottom"] .tooltip-arrow {
|
||||
border-width: 0 5px 5px 5px;
|
||||
border-left-color: transparent !important;
|
||||
border-right-color: transparent !important;
|
||||
border-top-color: transparent !important;
|
||||
top: -5px;
|
||||
left: calc(50% - 5px);
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.vue-tooltip-theme.tooltip[x-placement^="right"] {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.vue-tooltip-theme.tooltip[x-placement^="right"] .tooltip-arrow {
|
||||
border-width: 5px 5px 5px 0;
|
||||
border-left-color: transparent !important;
|
||||
border-top-color: transparent !important;
|
||||
border-bottom-color: transparent !important;
|
||||
left: -5px;
|
||||
top: calc(50% - 5px);
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
.vue-tooltip-theme.tooltip[x-placement^="left"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.vue-tooltip-theme.tooltip[x-placement^="left"] .tooltip-arrow {
|
||||
border-width: 5px 0 5px 5px;
|
||||
border-top-color: transparent !important;
|
||||
border-right-color: transparent !important;
|
||||
border-bottom-color: transparent !important;
|
||||
right: -5px;
|
||||
top: calc(50% - 5px);
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
.vue-tooltip-theme.tooltip[aria-hidden='true'] {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: opacity .15s, visibility .15s;
|
||||
}
|
||||
.vue-tooltip-theme.tooltip[aria-hidden='false'] {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition: opacity .15s;
|
||||
}
|
21
public/vendor/plugins/vue/LICENSE
vendored
21
public/vendor/plugins/vue/LICENSE
vendored
@ -1,21 +0,0 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2013-present, Yuxi (Evan) You
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
6
public/vendor/plugins/vue/vue.min.js
vendored
6
public/vendor/plugins/vue/vue.min.js
vendored
File diff suppressed because one or more lines are too long
@ -108,16 +108,8 @@
|
||||
</script>
|
||||
{{end}}
|
||||
<script src="{{StaticUrlPrefix}}/vendor/plugins/emojify/emojify.custom.js"></script>
|
||||
<script src="{{StaticUrlPrefix}}/vendor/plugins/vue/vue.min.js"></script>
|
||||
<script src="{{StaticUrlPrefix}}/fomantic/semantic.min.js?v={{MD5 AppVer}}"></script>
|
||||
<script src="{{StaticUrlPrefix}}/js/index.js?v={{MD5 AppVer}}"></script>
|
||||
{{if .EnableHeatmap}}
|
||||
<script src="{{StaticUrlPrefix}}/vendor/plugins/moment/moment.min.js" charset="utf-8"></script>
|
||||
<script src="{{StaticUrlPrefix}}/vendor/plugins/vue-calendar-heatmap/vue-calendar-heatmap.browser.js" charset="utf-8"></script>
|
||||
<script type="text/javascript">
|
||||
window.initHeatmap('user-heatmap', '{{.HeatmapUser}}');
|
||||
</script>
|
||||
{{end}}
|
||||
{{template "custom/footer" .}}
|
||||
</body>
|
||||
</html>
|
||||
|
@ -93,6 +93,8 @@
|
||||
SimpleMDE: {{if .RequireSimpleMDE}}true{{else}}false{{end}},
|
||||
Tribute: {{if .RequireTribute}}true{{else}}false{{end}},
|
||||
U2F: {{if .RequireU2F}}true{{else}}false{{end}},
|
||||
Heatmap: {{if .EnableHeatmap}}true{{else}}false{{end}},
|
||||
heatmapUser: {{if .HeatmapUser}}'{{.HeatmapUser}}'{{else}}null{{end}},
|
||||
};
|
||||
</script>
|
||||
<link rel="shortcut icon" href="{{StaticUrlPrefix}}/img/favicon.png">
|
||||
@ -124,9 +126,6 @@
|
||||
{{end}}
|
||||
{{if .RequireDropzone}}
|
||||
<link rel="stylesheet" href="{{StaticUrlPrefix}}/vendor/plugins/dropzone/dropzone.css">
|
||||
{{end}}
|
||||
{{if .EnableHeatmap}}
|
||||
<link rel="stylesheet" href="{{StaticUrlPrefix}}/vendor/plugins/vue-calendar-heatmap/vue-calendar-heatmap.css">
|
||||
{{end}}
|
||||
<style class="list-search-style"></style>
|
||||
{{if .PageIsUserProfile}}
|
||||
|
@ -8,6 +8,7 @@ var urlsToCache = [
|
||||
'{{StaticUrlPrefix}}/js/index.js?v={{MD5 AppVer}}',
|
||||
'{{StaticUrlPrefix}}/js/jquery.js?v={{MD5 AppVer}}',
|
||||
'{{StaticUrlPrefix}}/js/swagger.js?v={{MD5 AppVer}}',
|
||||
'{{StaticUrlPrefix}}/js/userheatmap.js',
|
||||
'{{StaticUrlPrefix}}/vendor/plugins/codemirror/addon/mode/loadmode.js',
|
||||
'{{StaticUrlPrefix}}/vendor/plugins/codemirror/mode/meta.js',
|
||||
'{{StaticUrlPrefix}}/vendor/plugins/dropzone/dropzone.js',
|
||||
@ -15,11 +16,11 @@ var urlsToCache = [
|
||||
'{{StaticUrlPrefix}}/vendor/plugins/jquery.datetimepicker/jquery.datetimepicker.js',
|
||||
'{{StaticUrlPrefix}}/vendor/plugins/jquery.minicolors/jquery.minicolors.min.js',
|
||||
'{{StaticUrlPrefix}}/vendor/plugins/simplemde/simplemde.min.js',
|
||||
'{{StaticUrlPrefix}}/vendor/plugins/vue/vue.min.js',
|
||||
|
||||
// css
|
||||
'{{StaticUrlPrefix}}/css/index.css?v={{MD5 AppVer}}',
|
||||
'{{StaticUrlPrefix}}/css/swagger.css?v={{MD5 AppVer}}',
|
||||
'{{StaticUrlPrefix}}/css/userheatmap.css',
|
||||
'{{StaticUrlPrefix}}/fomantic/semantic.min.css?v={{MD5 AppVer}}',
|
||||
'{{StaticUrlPrefix}}/vendor/assets/font-awesome/css/font-awesome.min.css',
|
||||
'{{StaticUrlPrefix}}/vendor/plugins/dropzone/dropzone.css',
|
||||
|
98
web_src/js/features/userHeatmap.js
Normal file
98
web_src/js/features/userHeatmap.js
Normal file
@ -0,0 +1,98 @@
|
||||
import Vue from 'vue';
|
||||
|
||||
const { AppSubUrl, heatmapUser } = window.config;
|
||||
|
||||
export default async function initHeatmap() {
|
||||
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',
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
@ -1,10 +1,12 @@
|
||||
/* globals wipPrefixes, issuesTribute, emojiTribute */
|
||||
/* exported timeAddManual, toggleStopwatch, cancelStopwatch, initHeatmap */
|
||||
/* exported timeAddManual, toggleStopwatch, cancelStopwatch */
|
||||
/* exported toggleDeadlineForm, setDeadline, updateDeadline, deleteDependencyModal, cancelCodeComment, onOAuthLoginClick */
|
||||
|
||||
import 'jquery.are-you-sure';
|
||||
import './publicPath.js';
|
||||
import './polyfills.js';
|
||||
|
||||
import Vue from 'vue';
|
||||
import 'jquery.are-you-sure';
|
||||
import './vendor/semanticDropdown.js';
|
||||
import { svg } from './utils.js';
|
||||
|
||||
@ -12,6 +14,7 @@ import initContextPopups from './features/contextPopup.js';
|
||||
import initHighlight from './features/highlight.js';
|
||||
import initGitGraph from './features/gitGraph.js';
|
||||
import initClipboard from './features/clipboard.js';
|
||||
import initUserHeatmap from './features/userHeatmap.js';
|
||||
|
||||
import ActivityTopAuthors from './components/ActivityTopAuthors.vue';
|
||||
|
||||
@ -2612,6 +2615,7 @@ $(document).ready(async () => {
|
||||
initHighlight(),
|
||||
initGitGraph(),
|
||||
initClipboard(),
|
||||
initUserHeatmap(),
|
||||
]);
|
||||
});
|
||||
|
||||
@ -2917,7 +2921,7 @@ function initVueApp() {
|
||||
delimiters: ['${', '}'],
|
||||
el,
|
||||
data: {
|
||||
searchLimit: (document.querySelector('meta[name=_search_limit]') || {}).content,
|
||||
searchLimit: Number((document.querySelector('meta[name=_search_limit]') || {}).content),
|
||||
suburl: AppSubUrl,
|
||||
uid: Number((document.querySelector('meta[name=_context_uid]') || {}).content),
|
||||
activityTopAuthors: window.ActivityTopAuthors || [],
|
||||
@ -2945,102 +2949,6 @@ window.cancelStopwatch = function () {
|
||||
$('#cancel_stopwatch_form').submit();
|
||||
};
|
||||
|
||||
window.initHeatmap = function (appElementId, heatmapUser, locale) {
|
||||
const el = document.getElementById(appElementId);
|
||||
if (!el) {
|
||||
return;
|
||||
}
|
||||
|
||||
locale = locale || {};
|
||||
|
||||
locale.contributions = locale.contributions || 'contributions';
|
||||
locale.no_contributions = locale.no_contributions || 'No contributions';
|
||||
|
||||
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" />'
|
||||
});
|
||||
|
||||
new Vue({
|
||||
delimiters: vueDelimeters,
|
||||
el,
|
||||
|
||||
data: {
|
||||
suburl: AppSubUrl,
|
||||
heatmapUser,
|
||||
locale
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
function initFilterBranchTagDropdown(selector) {
|
||||
$(selector).each(function () {
|
||||
const $dropdown = $(this);
|
||||
|
@ -204,6 +204,9 @@ module.exports = {
|
||||
},
|
||||
resolve: {
|
||||
symlinks: false,
|
||||
alias: {
|
||||
vue$: 'vue/dist/vue.esm.js', // needed because vue's default export is the runtime only
|
||||
},
|
||||
},
|
||||
watchOptions: {
|
||||
ignored: [
|
||||
|
Loading…
x
Reference in New Issue
Block a user