2024-07-07 18:32:30 +03:00
< script lang = "ts" >
2020-01-20 13:07:30 +03:00
import VueBarGraph from 'vue-bar-graph' ;
2023-03-14 07:09:06 +03:00
import { createApp } from 'vue' ;
2020-01-20 13:07:30 +03:00
2021-10-15 05:35:26 +03:00
const sfc = {
2020-11-07 18:11:09 +03:00
components : { VueBarGraph } ,
data : ( ) => ( {
colors : {
barColor : 'green' ,
textColor : 'black' ,
textAltColor : 'white' ,
2020-01-20 13:07:30 +03:00
} ,
2021-10-15 05:35:26 +03:00
// possible keys:
// * avatar_link: (...)
// * commits: (...)
// * home_link: (...)
// * login: (...)
// * name: (...)
activityTopAuthors : window . config . pageData . repoActivityTopAuthors || [ ] ,
2020-11-07 18:11:09 +03:00
} ) ,
computed : {
2021-10-15 05:35:26 +03:00
graphPoints ( ) {
return this . activityTopAuthors . map ( ( item ) => {
2020-11-07 18:11:09 +03:00
return {
value : item . commits ,
label : item . name ,
} ;
} ) ;
2020-01-20 13:07:30 +03:00
} ,
2021-10-15 05:35:26 +03:00
graphAuthors ( ) {
return this . activityTopAuthors . map ( ( item , idx ) => {
2020-01-20 13:07:30 +03:00
return {
2020-11-07 18:11:09 +03:00
position : idx + 1 ,
... item ,
2020-01-20 13:07:30 +03:00
} ;
2020-11-07 18:11:09 +03:00
} ) ;
} ,
graphWidth ( ) {
2021-10-15 05:35:26 +03:00
return this . activityTopAuthors . length * 40 ;
2020-01-20 13:07:30 +03:00
} ,
2020-11-07 18:11:09 +03:00
} ,
mounted ( ) {
2021-10-15 05:35:26 +03:00
const refStyle = window . getComputedStyle ( this . $refs . style ) ;
const refAltStyle = window . getComputedStyle ( this . $refs . altStyle ) ;
2020-11-07 18:11:09 +03:00
2021-10-15 05:35:26 +03:00
this . colors . barColor = refStyle . backgroundColor ;
this . colors . textColor = refStyle . color ;
this . colors . textAltColor = refAltStyle . color ;
2024-03-22 17:06:53 +03:00
} ,
2020-11-07 18:11:09 +03:00
} ;
2021-10-15 05:35:26 +03:00
2021-10-16 20:28:04 +03:00
export function initRepoActivityTopAuthorsChart ( ) {
2024-06-10 23:49:33 +03:00
const el = document . querySelector ( '#repo-activity-top-authors-chart' ) ;
2023-03-14 07:09:06 +03:00
if ( el ) {
createApp ( sfc ) . mount ( el ) ;
}
2021-10-15 05:35:26 +03:00
}
2023-03-14 07:09:06 +03:00
export default sfc ; // activate the IDE's Vue plugin
2020-11-07 18:11:09 +03:00
< / script >
2023-09-02 17:59:07 +03:00
< template >
< div >
< div class = "activity-bar-graph" ref = "style" style = "width: 0; height: 0;" / >
< div class = "activity-bar-graph-alt" ref = "altStyle" 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 >
< / v u e - b a r - g r a p h >
< / div >
< / template >