2024-10-28 23:15:05 +03:00
< script lang = "ts" setup >
2024-08-01 20:42:51 +03:00
import { VueBarGraph } from 'vue-bar-graph' ;
2024-10-28 23:15:05 +03:00
import { computed , onMounted , ref } from 'vue' ;
2020-01-20 13:07:30 +03:00
2024-10-28 23:15:05 +03:00
const colors = ref ( {
barColor : 'green' ,
textColor : 'black' ,
textAltColor : 'white' ,
} ) ;
2021-10-15 05:35:26 +03:00
2024-10-28 23:15:05 +03:00
// possible keys:
// * avatar_link: (...)
// * commits: (...)
// * home_link: (...)
// * login: (...)
// * name: (...)
const activityTopAuthors = window . config . pageData . repoActivityTopAuthors || [ ] ;
2020-11-07 18:11:09 +03:00
2024-10-28 23:15:05 +03:00
const graphPoints = computed ( ( ) => {
2024-10-30 09:48:13 +03:00
return activityTopAuthors . map ( ( item ) => {
2024-10-28 23:15:05 +03:00
return {
value : item . commits ,
label : item . name ,
} ;
} ) ;
} ) ;
2021-10-15 05:35:26 +03:00
2024-10-28 23:15:05 +03:00
const graphAuthors = computed ( ( ) => {
2024-10-30 09:48:13 +03:00
return activityTopAuthors . map ( ( item , idx ) => {
2024-10-28 23:15:05 +03:00
return {
position : idx + 1 ,
... item ,
} ;
} ) ;
} ) ;
2021-10-15 05:35:26 +03:00
2024-10-28 23:15:05 +03:00
const graphWidth = computed ( ( ) => {
2024-10-30 09:48:13 +03:00
return activityTopAuthors . length * 40 ;
2024-10-28 23:15:05 +03:00
} ) ;
const styleElement = ref < HTMLElement | null > ( null ) ;
const altStyleElement = ref < HTMLElement | null > ( null ) ;
onMounted ( ( ) => {
const refStyle = window . getComputedStyle ( styleElement . value ) ;
const refAltStyle = window . getComputedStyle ( altStyleElement . value ) ;
colors . value = {
barColor : refStyle . backgroundColor ,
textColor : refStyle . color ,
textAltColor : refAltStyle . color ,
} ;
} ) ;
2020-11-07 18:11:09 +03:00
< / script >
2024-10-28 23:15:05 +03:00
2023-09-02 17:59:07 +03:00
< template >
< div >
2024-10-28 23:15:05 +03:00
< 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;" / >
2023-09-02 17:59:07 +03:00
< 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 >
< / v u e - b a r - g r a p h >
< / div >
< / template >