diff options
Diffstat (limited to 'web_src/js/components/RepoActivityTopAuthors.vue')
-rw-r--r-- | web_src/js/components/RepoActivityTopAuthors.vue | 27 |
1 files changed, 15 insertions, 12 deletions
diff --git a/web_src/js/components/RepoActivityTopAuthors.vue b/web_src/js/components/RepoActivityTopAuthors.vue index 1f5e9825ba..bbdfda41d0 100644 --- a/web_src/js/components/RepoActivityTopAuthors.vue +++ b/web_src/js/components/RepoActivityTopAuthors.vue @@ -1,20 +1,23 @@ <script lang="ts" setup> +// @ts-expect-error - module exports no types import {VueBarGraph} from 'vue-bar-graph'; -import {computed, onMounted, ref} from 'vue'; +import {computed, onMounted, shallowRef, useTemplateRef} from 'vue'; -const colors = ref({ +const colors = shallowRef({ barColor: 'green', textColor: 'black', textAltColor: 'white', }); -// possible keys: -// * avatar_link: (...) -// * commits: (...) -// * home_link: (...) -// * login: (...) -// * name: (...) -const activityTopAuthors = window.config.pageData.repoActivityTopAuthors || []; +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) => { @@ -26,7 +29,7 @@ const graphPoints = computed(() => { }); const graphAuthors = computed(() => { - return activityTopAuthors.map((item, idx) => { + return activityTopAuthors.map((item, idx: number) => { return { position: idx + 1, ...item, @@ -38,8 +41,8 @@ const graphWidth = computed(() => { return activityTopAuthors.length * 40; }); -const styleElement = ref<HTMLElement | null>(null); -const altStyleElement = ref<HTMLElement | null>(null); +const styleElement = useTemplateRef('styleElement'); +const altStyleElement = useTemplateRef('altStyleElement'); onMounted(() => { const refStyle = window.getComputedStyle(styleElement.value); |