Skip to content

Commit a187345

Browse files
silverwindsilverwind
committed
Add Vue linting
Turns out the .vue files were not linted at all, so I added that as well as re-indented the file to 2-space and fixed all reasonable issues that cam up except one case of a unintended side effect for which I have no idea how to fix it, so the rule was disabled.
1 parent eebaa81 commit a187345

File tree

6 files changed

+217
-199
lines changed

6 files changed

+217
-199
lines changed

‎.eslintrc

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,10 @@ parserOptions:
1111
plugins:
1212
- eslint-plugin-unicorn
1313
- eslint-plugin-import
14+
- eslint-plugin-vue
15+
16+
extends:
17+
- plugin:vue/recommended
1418

1519
env:
1620
es2021: true
@@ -387,6 +391,11 @@ rules:
387391
use-isnan: [2]
388392
valid-typeof: [2, {requireStringLiterals: true}]
389393
vars-on-top: [0]
394+
vue/attributes-order: [0]
395+
vue/component-definition-name-casing: [0]
396+
vue/html-closing-bracket-spacing: [0]
397+
vue/max-attributes-per-line: [0]
398+
vue/one-component-per-file: [0]
390399
wrap-iife: [2, inside]
391400
wrap-regex: [0]
392401
yield-star-spacing: [2, after]

‎Makefile

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -312,7 +312,7 @@ lint: lint-frontend lint-backend
312312

313313
.PHONY: lint-frontend
314314
lint-frontend: node_modules
315-
npx eslint web_src/js build webpack.config.js
315+
npx eslint --ext .js,.vue web_src/js build webpack.config.js
316316
npx stylelint web_src/less
317317

318318
.PHONY: lint-backend

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@
5454
"eslint": "7.11.0",
5555
"eslint-plugin-import": "2.22.1",
5656
"eslint-plugin-unicorn": "23.0.0",
57+
"eslint-plugin-vue": "7.1.0",
5758
"stylelint": "13.7.2",
5859
"stylelint-config-standard": "20.0.0",
5960
"svgo": "1.3.2",

‎web_src/js/components/ActivityHeatmap.vue

Lines changed: 62 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,75 @@
11
<template>
2-
<div>
3-
<div v-show="isLoading">
4-
<slot name="loading"></slot>
5-
</div>
6-
<h4 class="total-contributions" v-if="!isLoading">
7-
{{ totalContributions }} total contributions in the last 12 months
8-
</h4>
9-
<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"/>
2+
<div>
3+
<div v-show="isLoading">
4+
<slot name="loading"/>
105
</div>
6+
<h4 v-if="!isLoading" class="total-contributions">
7+
{{ values.length }} total contributions in the last 12 months
8+
</h4>
9+
<calendar-heatmap
10+
v-show="!isLoading"
11+
:locale="locale"
12+
:no-data-text="locale.no_contributions"
13+
:tooltip-unit="locale.contributions"
14+
:end-date="endDate"
15+
:values="values"
16+
:range-color="colorRange"
17+
/>
18+
</div>
1119
</template>
1220

1321
<script>
1422
import {CalendarHeatmap} from 'vue-calendar-heatmap';
1523
const {AppSubUrl, heatmapUser} = window.config;
1624
1725
export default {
18-
name: "ActivityHeatmap",
19-
components: {
20-
CalendarHeatmap
26+
name: 'ActivityHeatmap',
27+
components: {CalendarHeatmap},
28+
data() {
29+
return {
30+
isLoading: true,
31+
colorRange: [],
32+
endDate: null,
33+
values: [],
34+
suburl: AppSubUrl,
35+
user: heatmapUser,
36+
locale: {
37+
contributions: 'contributions',
38+
no_contributions: 'No contributions',
39+
},
40+
};
41+
},
42+
mounted() {
43+
this.colorRange = [
44+
this.getColor(0),
45+
this.getColor(1),
46+
this.getColor(2),
47+
this.getColor(3),
48+
this.getColor(4),
49+
this.getColor(5)
50+
];
51+
this.endDate = new Date();
52+
this.loadHeatmap(this.user);
53+
},
54+
methods: {
55+
async loadHeatmap(userName) {
56+
const res = await fetch(`${this.suburl}/api/v1/users/${userName}/heatmap`);
57+
const data = await res.json();
58+
this.values = data.map(({contributions, timestamp}) => {
59+
return {date: new Date(timestamp * 1000), count: contributions};
60+
});
61+
this.isLoading = false;
2162
},
22-
data() {
23-
return {
24-
isLoading: true,
25-
colorRange: [],
26-
endDate: null,
27-
values: [],
28-
totalContributions: 0,
29-
suburl: AppSubUrl,
30-
user: heatmapUser,
31-
locale: {
32-
contributions: 'contributions',
33-
no_contributions: 'No contributions',
34-
},
35-
};
36-
},
37-
mounted() {
38-
this.colorRange = [
39-
this.getColor(0),
40-
this.getColor(1),
41-
this.getColor(2),
42-
this.getColor(3),
43-
this.getColor(4),
44-
this.getColor(5)
45-
];
46-
this.endDate = new Date();
47-
this.loadHeatmap(this.user);
48-
},
49-
methods: {
50-
loadHeatmap(userName) {
51-
const self = this;
52-
$.get(`${this.suburl}/api/v1/users/${userName}/heatmap`, (chartRawData) => {
53-
const chartData = [];
54-
for (let i = 0; i < chartRawData.length; i++) {
55-
self.totalContributions += chartRawData[i].contributions;
56-
chartData[i] = {date: new Date(chartRawData[i].timestamp * 1000), count: chartRawData[i].contributions};
57-
}
58-
self.values = chartData;
59-
self.isLoading = false;
60-
});
61-
},
62-
getColor(idx) {
63-
const el = document.createElement('div');
64-
el.className = `heatmap-color-${idx}`;
65-
document.body.appendChild(el);
66-
67-
const color = getComputedStyle(el).backgroundColor;
68-
69-
document.body.removeChild(el);
70-
71-
return color;
72-
}
73-
},
74-
}
63+
getColor(idx) {
64+
const el = document.createElement('div');
65+
el.className = `heatmap-color-${idx}`;
66+
document.body.appendChild(el);
67+
const color = getComputedStyle(el).backgroundColor;
68+
document.body.removeChild(el);
69+
return color;
70+
}
71+
},
72+
};
7573
</script>
7674

7775
<style scoped>

‎web_src/js/components/ActivityTopAuthors.vue

Lines changed: 94 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,102 +1,106 @@
11
<template>
2-
<div>
3-
<div class="activity-bar-graph" ref="style" style="width:0px;height:0px"></div>
4-
<div class="activity-bar-graph-alt" ref="altStyle" style="width:0px;height:0px"></div>
5-
<vue-bar-graph
6-
:points="graphData"
7-
:show-x-axis="true"
8-
:show-y-axis="false"
9-
:show-values="true"
10-
:width="graphWidth"
11-
:bar-color="colors.barColor"
12-
:text-color="colors.textColor"
13-
:text-alt-color="colors.textAltColor"
14-
:height="100"
15-
:label-height="20"
16-
>
17-
<template v-slot:label="opt">
18-
<g v-for="(author, idx) in authors" :key="author.position">
19-
<a
20-
v-if="opt.bar.index === idx && author.home_link !== ''"
21-
:href="author.home_link"
22-
>
23-
<image
24-
:x="`${opt.bar.midPoint - 10}px`"
25-
:y="`${opt.bar.yLabel}px`"
26-
height="20"
27-
width="20"
28-
:href="author.avatar_link"
29-
/>
30-
</a>
31-
<image
32-
v-else-if="opt.bar.index === idx"
33-
:x="`${opt.bar.midPoint - 10}px`"
34-
:y="`${opt.bar.yLabel}px`"
35-
height="20"
36-
width="20"
37-
:href="author.avatar_link"
38-
/>
39-
</g>
40-
</template>
41-
<template v-slot:title="opt">
42-
<tspan v-for="(author, idx) in authors" :key="author.position"><tspan v-if="opt.bar.index === idx">{{ author.name }}</tspan></tspan>
43-
</template>
44-
</vue-bar-graph>
45-
</div>
2+
<div>
3+
<div class="activity-bar-graph" ref="style" style="width:0px;height:0px"/>
4+
<div class="activity-bar-graph-alt" ref="altStyle" style="width:0px;height:0px"/>
5+
<vue-bar-graph
6+
:points="graphData"
7+
:show-x-axis="true"
8+
:show-y-axis="false"
9+
:show-values="true"
10+
:width="graphWidth"
11+
:bar-color="colors.barColor"
12+
:text-color="colors.textColor"
13+
:text-alt-color="colors.textAltColor"
14+
:height="100"
15+
:label-height="20"
16+
>
17+
<template #label="opt">
18+
<g v-for="(author, idx) in authors" :key="author.position">
19+
<a
20+
v-if="opt.bar.index === idx && author.home_link !== ''"
21+
:href="author.home_link"
22+
>
23+
<image
24+
:x="`${opt.bar.midPoint - 10}px`"
25+
:y="`${opt.bar.yLabel}px`"
26+
height="20"
27+
width="20"
28+
:href="author.avatar_link"
29+
/>
30+
</a>
31+
<image
32+
v-else-if="opt.bar.index === idx"
33+
:x="`${opt.bar.midPoint - 10}px`"
34+
:y="`${opt.bar.yLabel}px`"
35+
height="20"
36+
width="20"
37+
:href="author.avatar_link"
38+
/>
39+
</g>
40+
</template>
41+
<template #title="opt">
42+
<tspan v-for="(author, idx) in authors" :key="author.position">
43+
<tspan v-if="opt.bar.index === idx">
44+
{{ author.name }}
45+
</tspan>
46+
</tspan>
47+
</template>
48+
</vue-bar-graph>
49+
</div>
4650
</template>
4751

4852
<script>
4953
import VueBarGraph from 'vue-bar-graph';
5054
5155
export default {
52-
components: {
53-
VueBarGraph,
54-
},
55-
props: {
56-
data: { type: Array, default: () => [] },
57-
},
58-
mounted() {
59-
const st = window.getComputedStyle(this.$refs.style);
60-
const stalt = window.getComputedStyle(this.$refs.altStyle);
61-
62-
this.colors.barColor = st.backgroundColor;
63-
this.colors.textColor = st.color;
64-
this.colors.textAltColor = stalt.color;
56+
components: {
57+
VueBarGraph,
58+
},
59+
props: {
60+
data: {type: Array, default: () => []},
61+
},
62+
data() {
63+
return {
64+
colors: {
65+
barColor: 'green',
66+
textColor: 'black',
67+
textAltColor: 'white',
68+
},
69+
};
70+
},
71+
computed: {
72+
graphData() {
73+
return this.data.map((item) => {
74+
return {
75+
value: item.commits,
76+
label: item.name,
77+
};
78+
});
6579
},
66-
data() {
80+
authors() {
81+
return this.data.map((item, idx) => {
6782
return {
68-
colors: {
69-
barColor: 'green',
70-
textColor: 'black',
71-
textAltColor: 'white',
72-
},
83+
position: idx + 1,
84+
...item,
7385
};
86+
});
87+
},
88+
graphWidth() {
89+
return this.data.length * 40;
7490
},
75-
computed: {
76-
graphData() {
77-
return this.data.map((item) => {
78-
return {
79-
value: item.commits,
80-
label: item.name,
81-
};
82-
});
83-
},
84-
authors() {
85-
return this.data.map((item, idx) => {
86-
return {
87-
position: idx+1,
88-
...item,
89-
}
90-
});
91-
},
92-
graphWidth() {
93-
return this.data.length * 40;
94-
},
91+
},
92+
mounted() {
93+
const st = window.getComputedStyle(this.$refs.style);
94+
const stalt = window.getComputedStyle(this.$refs.altStyle);
95+
96+
this.colors.barColor = st.backgroundColor;
97+
this.colors.textColor = st.color;
98+
this.colors.textAltColor = stalt.color;
99+
},
100+
methods: {
101+
hasHomeLink(i) {
102+
return this.graphData[i].homeLink !== '' && this.graphData[i].homeLink !== null;
95103
},
96-
methods: {
97-
hasHomeLink(i) {
98-
return this.graphData[i].homeLink !== '' && this.graphData[i].homeLink !== null;
99-
},
100-
}
101-
}
102-
</script>
104+
}
105+
};
106+
</script>

0 commit comments

Comments
 (0)