Add top author stats to activity page (#9615)
parent
7d7ab1eeae
commit
81cfe243f9
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,102 @@
|
|||||||
|
<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>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import VueBarGraph from 'vue-bar-graph';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
VueBarGraph,
|
||||||
|
},
|
||||||
|
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() {
|
||||||
|
return {
|
||||||
|
colors: {
|
||||||
|
barColor: 'green',
|
||||||
|
textColor: 'black',
|
||||||
|
textAltColor: 'white',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
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;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
hasHomeLink(i) {
|
||||||
|
return this.graphData[i].homeLink !== '' && this.graphData[i].homeLink !== null;
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
Loading…
Reference in new issue