mirror of
https://github.com/go-gitea/gitea.git
synced 2025-11-03 08:02:36 +09:00
181db69e0c
This PR improves some `.vue` components by using `shallowRef instead of ref`, which `should improve performance`. It's probably not significant, but it's an improvement because Vue no longer deep watches the ref (shallowRef). Also i used `useTemplateRef` instead of `ref`. --------- Signed-off-by: wxiaoguang <wxiaoguang@gmail.com> Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
109 lines
2.8 KiB
Vue
109 lines
2.8 KiB
Vue
<script lang="ts" setup>
|
|
// @ts-expect-error - module exports no types
|
|
import {VueBarGraph} from 'vue-bar-graph';
|
|
import {computed, onMounted, shallowRef, useTemplateRef} from 'vue';
|
|
|
|
const colors = shallowRef({
|
|
barColor: 'green',
|
|
textColor: 'black',
|
|
textAltColor: 'white',
|
|
});
|
|
|
|
type ActivityAuthorData = {
|
|
avatar_link: string;
|
|
commits: number;
|
|
home_link: string;
|
|
login: string;
|
|
name: string;
|
|
}
|
|
|
|
const activityTopAuthors: Array<ActivityAuthorData> = window.config.pageData.repoActivityTopAuthors || [];
|
|
|
|
const graphPoints = computed(() => {
|
|
return activityTopAuthors.map((item) => {
|
|
return {
|
|
value: item.commits,
|
|
label: item.name,
|
|
};
|
|
});
|
|
});
|
|
|
|
const graphAuthors = computed(() => {
|
|
return activityTopAuthors.map((item, idx: number) => {
|
|
return {
|
|
position: idx + 1,
|
|
...item,
|
|
};
|
|
});
|
|
});
|
|
|
|
const graphWidth = computed(() => {
|
|
return activityTopAuthors.length * 40;
|
|
});
|
|
|
|
const styleElement = useTemplateRef('styleElement');
|
|
const altStyleElement = useTemplateRef('altStyleElement');
|
|
|
|
onMounted(() => {
|
|
const refStyle = window.getComputedStyle(styleElement.value);
|
|
const refAltStyle = window.getComputedStyle(altStyleElement.value);
|
|
|
|
colors.value = {
|
|
barColor: refStyle.backgroundColor,
|
|
textColor: refStyle.color,
|
|
textAltColor: refAltStyle.color,
|
|
};
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div class="activity-bar-graph" ref="styleElement" style="width: 0; height: 0;"/>
|
|
<div class="activity-bar-graph-alt" ref="altStyleElement" style="width: 0; height: 0;"/>
|
|
<vue-bar-graph
|
|
:points="graphPoints"
|
|
: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 graphAuthors" :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 graphAuthors" :key="author.position">
|
|
<tspan v-if="opt.bar.index === idx">
|
|
{{ author.name }}
|
|
</tspan>
|
|
</tspan>
|
|
</template>
|
|
</vue-bar-graph>
|
|
</div>
|
|
</template>
|