Add Vue linting (#13447)
* 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. * misc tweaks * update lockfile * use overrides to include .vue files * treat warnings as errors on lint-frontend * also treat stylelint warnings as errors * use equal sign syntax Co-authored-by: Lauris BH <lauris@nix.lv> Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
This commit is contained in:
parent
ed47da2e29
commit
7c47e24093
7 changed files with 295 additions and 243 deletions
|
@ -1,102 +1,101 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="activity-bar-graph" ref="style" style="width:0px;height:0px"></div>
|
||||
<div class="activity-bar-graph-alt" ref="altStyle" style="width:0px;height:0px"></div>
|
||||
<vue-bar-graph
|
||||
:points="graphData"
|
||||
:show-x-axis="true"
|
||||
:show-y-axis="false"
|
||||
:show-values="true"
|
||||
:width="graphWidth"
|
||||
:bar-color="colors.barColor"
|
||||
:text-color="colors.textColor"
|
||||
:text-alt-color="colors.textAltColor"
|
||||
:height="100"
|
||||
:label-height="20"
|
||||
>
|
||||
<template v-slot:label="opt">
|
||||
<g v-for="(author, idx) in authors" :key="author.position">
|
||||
<a
|
||||
v-if="opt.bar.index === idx && author.home_link !== ''"
|
||||
:href="author.home_link"
|
||||
>
|
||||
<image
|
||||
:x="`${opt.bar.midPoint - 10}px`"
|
||||
:y="`${opt.bar.yLabel}px`"
|
||||
height="20"
|
||||
width="20"
|
||||
:href="author.avatar_link"
|
||||
/>
|
||||
</a>
|
||||
<image
|
||||
v-else-if="opt.bar.index === idx"
|
||||
:x="`${opt.bar.midPoint - 10}px`"
|
||||
:y="`${opt.bar.yLabel}px`"
|
||||
height="20"
|
||||
width="20"
|
||||
:href="author.avatar_link"
|
||||
/>
|
||||
</g>
|
||||
</template>
|
||||
<template v-slot:title="opt">
|
||||
<tspan v-for="(author, idx) in authors" :key="author.position"><tspan v-if="opt.bar.index === idx">{{ author.name }}</tspan></tspan>
|
||||
</template>
|
||||
</vue-bar-graph>
|
||||
</div>
|
||||
<div>
|
||||
<div class="activity-bar-graph" ref="style" style="width:0px;height:0px"/>
|
||||
<div class="activity-bar-graph-alt" ref="altStyle" style="width:0px;height:0px"/>
|
||||
<vue-bar-graph
|
||||
:points="graphData"
|
||||
:show-x-axis="true"
|
||||
:show-y-axis="false"
|
||||
:show-values="true"
|
||||
:width="graphWidth"
|
||||
:bar-color="colors.barColor"
|
||||
:text-color="colors.textColor"
|
||||
:text-alt-color="colors.textAltColor"
|
||||
:height="100"
|
||||
:label-height="20"
|
||||
>
|
||||
<template #label="opt">
|
||||
<g v-for="(author, idx) in authors" :key="author.position">
|
||||
<a
|
||||
v-if="opt.bar.index === idx && author.home_link !== ''"
|
||||
:href="author.home_link"
|
||||
>
|
||||
<image
|
||||
:x="`${opt.bar.midPoint - 10}px`"
|
||||
:y="`${opt.bar.yLabel}px`"
|
||||
height="20"
|
||||
width="20"
|
||||
:href="author.avatar_link"
|
||||
/>
|
||||
</a>
|
||||
<image
|
||||
v-else-if="opt.bar.index === idx"
|
||||
:x="`${opt.bar.midPoint - 10}px`"
|
||||
:y="`${opt.bar.yLabel}px`"
|
||||
height="20"
|
||||
width="20"
|
||||
:href="author.avatar_link"
|
||||
/>
|
||||
</g>
|
||||
</template>
|
||||
<template #title="opt">
|
||||
<tspan v-for="(author, idx) in authors" :key="author.position">
|
||||
<tspan v-if="opt.bar.index === idx">
|
||||
{{ author.name }}
|
||||
</tspan>
|
||||
</tspan>
|
||||
</template>
|
||||
</vue-bar-graph>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VueBarGraph from 'vue-bar-graph';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
VueBarGraph,
|
||||
components: {VueBarGraph},
|
||||
props: {
|
||||
data: {type: Array, default: () => []},
|
||||
},
|
||||
data: () => ({
|
||||
colors: {
|
||||
barColor: 'green',
|
||||
textColor: 'black',
|
||||
textAltColor: 'white',
|
||||
},
|
||||
props: {
|
||||
data: { type: Array, default: () => [] },
|
||||
},
|
||||
mounted() {
|
||||
const st = window.getComputedStyle(this.$refs.style);
|
||||
const stalt = window.getComputedStyle(this.$refs.altStyle);
|
||||
|
||||
this.colors.barColor = st.backgroundColor;
|
||||
this.colors.textColor = st.color;
|
||||
this.colors.textAltColor = stalt.color;
|
||||
},
|
||||
data() {
|
||||
}),
|
||||
computed: {
|
||||
graphData() {
|
||||
return this.data.map((item) => {
|
||||
return {
|
||||
colors: {
|
||||
barColor: 'green',
|
||||
textColor: 'black',
|
||||
textAltColor: 'white',
|
||||
},
|
||||
value: item.commits,
|
||||
label: item.name,
|
||||
};
|
||||
});
|
||||
},
|
||||
computed: {
|
||||
graphData() {
|
||||
return this.data.map((item) => {
|
||||
return {
|
||||
value: item.commits,
|
||||
label: item.name,
|
||||
};
|
||||
});
|
||||
},
|
||||
authors() {
|
||||
return this.data.map((item, idx) => {
|
||||
return {
|
||||
position: idx+1,
|
||||
...item,
|
||||
}
|
||||
});
|
||||
},
|
||||
graphWidth() {
|
||||
return this.data.length * 40;
|
||||
},
|
||||
authors() {
|
||||
return this.data.map((item, idx) => {
|
||||
return {
|
||||
position: idx + 1,
|
||||
...item,
|
||||
};
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
hasHomeLink(i) {
|
||||
return this.graphData[i].homeLink !== '' && this.graphData[i].homeLink !== null;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
graphWidth() {
|
||||
return this.data.length * 40;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
const st = window.getComputedStyle(this.$refs.style);
|
||||
const stalt = window.getComputedStyle(this.$refs.altStyle);
|
||||
|
||||
this.colors.barColor = st.backgroundColor;
|
||||
this.colors.textColor = st.color;
|
||||
this.colors.textAltColor = stalt.color;
|
||||
},
|
||||
methods: {
|
||||
hasHomeLink(i) {
|
||||
return this.graphData[i].homeLink !== '' && this.graphData[i].homeLink !== null;
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue