@@ -15,7 +15,11 @@ import { Router } from '@angular/router';
1515 </highcharts-chart>`
1616} )
1717export class ActiveUsersChartComponent implements OnChanges {
18- @Input ( ) data ?: Record < string , number > ;
18+ @Input ( ) data ?: {
19+ login : string ,
20+ total_time : number ,
21+ avatar_url : string ,
22+ } [ ] ;
1923 @Input ( ) chartOptions ?: Highcharts . Options ;
2024 Highcharts : typeof Highcharts = Highcharts ;
2125 updateFlag = false ;
@@ -32,16 +36,20 @@ export class ActiveUsersChartComponent implements OnChanges {
3236 series : [ {
3337 name : 'Activity' ,
3438 type : 'bar' ,
35- data : this . data ? Object . values ( this . data ) : [ ] ,
39+ data : [ ] , // Will be updated in ngOnChanges
3640 colorByPoint : true ,
3741 borderWidth : 0 ,
42+ // Use point.options to access custom properties
43+ keys : [ 'y' , 'login' , 'avatar_url' ]
3844 } ] ,
3945 tooltip : {
4046 pointFormat : '<span style="padding:0">{point.y: .1f} hours</span>' ,
4147 headerFormat : '' ,
4248 formatter : function ( ) {
4349 const hours = ( this . y || 0 ) ; // Convert ms to hours
44- return `<span style="padding:0">@${ this . key } </span><br>
50+ // Access login from the keys mapping
51+ const login = ( this . point as any ) . login || this . key ;
52+ return `<span style="padding:0">@${ login } </span><br>
4553 <span style="padding:0">${ hours . toFixed ( 1 ) } hours</span>` ;
4654 } ,
4755 outside : true ,
@@ -52,8 +60,10 @@ export class ActiveUsersChartComponent implements OnChanges {
5260 dataLabels : [ {
5361 enabled : true ,
5462 formatter : function ( ) {
63+ // Access avatar_url from the keys mapping
64+ const avatar_url = ( this . point as any ) . avatar_url || `https://github.com/${ this . key } .png` ;
5565 return `<div style="width: 20px; height: 20px; overflow: hidden; border-radius: 50%; margin-right: -25px">
56- <img src="https://github.com/ ${ this . key } .png " style="width: 30px; margin-left: -5px; margin-top: -2px">
66+ <img src="${ avatar_url } " style="width: 30px; margin-left: -5px; margin-top: -2px">
5767 </div>`
5868 } ,
5969 useHTML : true ,
@@ -65,7 +75,7 @@ export class ActiveUsersChartComponent implements OnChanges {
6575 point : {
6676 events : {
6777 click : ( event ) => {
68- this . router . navigate ( [ '/copilot/seats' , event . point . name ] ) ;
78+ this . router . navigate ( [ '/copilot/seats' , ( event . point as any ) . login || event . point . name ] ) ;
6979 }
7080 }
7181 }
@@ -78,9 +88,16 @@ export class ActiveUsersChartComponent implements OnChanges {
7888 ) { }
7989
8090 ngOnChanges ( ) {
91+ console . log ( 'ngOnChanges' , this . data ) ;
8192 this . _chartOptions = Object . assign ( { } , this . chartOptions , this . _chartOptions ) ;
8293 if ( this . _chartOptions ?. series && this . data ) {
83- ( this . _chartOptions ?. series as Highcharts . SeriesBarOptions [ ] ) [ 0 ] . data = Object . values ( this . data ) ;
94+ // Create an array with [total_time, login, avatar_url] for each point
95+ const seriesData = this . data . map ( user => [
96+ user . total_time ,
97+ user . login ,
98+ user . avatar_url
99+ ] ) ;
100+ ( this . _chartOptions ?. series as Highcharts . SeriesBarOptions [ ] ) [ 0 ] . data = seriesData ;
84101 this . updateFlag = true ;
85102 }
86103 }
0 commit comments