Enhance chart components by adding tooltip and yAxis configurations; …

…improve chart options merging logic for better customization
austenstone · Nov 20, 2024 · 745f386 · 745f386
1 parent d274553
commit 745f386
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 18 deletions.
diff --git a/frontend/src/app/main/copilot/copilot-dashboard/dashboard.component.ts b/frontend/src/app/main/copilot/copilot-dashboard/dashboard.component.ts
@@ -48,23 +48,30 @@ export class CopilotDashboardComponent implements OnInit {
       enabled: false,
     },
     xAxis: {
+      crosshair: true,
       visible: false,
     },
     yAxis: {
       visible: false,
+      title: undefined
+    },
+    tooltip: {
+      positioner: function () {
+        return { x: 0, y: 0 };
+      },
+      distance: 40,
+      outside: true,
+      backgroundColor: undefined
     },
     plotOptions: {
       spline: {
         lineWidth: 4,
-        states: {
-            hover: {
-                lineWidth: 5,
-                fillColor: '#000',
-            }
-        },
         marker: {
-            enabled: false,
-            fillColor: 'transparent'
+          enabled: false,
+          fillColor: 'transparent',
+          color: 'transparent',
+          lineColor: 'transparent',
+          fillOpacity: 0,
         },
       }
     }
@@ -112,17 +119,17 @@ export class CopilotDashboardComponent implements OnInit {
       this.metricsData = data;
       this.activeToday = data[data.length - 1].total_active_users;
       const currentWeekData = data.slice(-7);
-      this.activeCurrentWeekAverage = currentWeekData.reduce((sum, day) => 
+      this.activeCurrentWeekAverage = currentWeekData.reduce((sum, day) =>
         sum + day.total_active_users, 0) / currentWeekData.length;
       const lastWeekData = data.slice(-14, -7);
-      this.activeLastWeekAverage = lastWeekData.length > 0 
-        ? lastWeekData.reduce((sum, day) => sum + day.total_active_users, 0) / lastWeekData.length 
+      this.activeLastWeekAverage = lastWeekData.length > 0
+        ? lastWeekData.reduce((sum, day) => sum + day.total_active_users, 0) / lastWeekData.length
         : 0;
 
       const percentChange = this.activeLastWeekAverage === 0
         ? 100
         : ((this.activeCurrentWeekAverage - this.activeLastWeekAverage) / this.activeLastWeekAverage) * 100;
-    
+
       this.activeWeeklyChangePercent = Math.round(percentChange * 10) / 10;
     });
   }

diff --git a/frontend/src/app/main/copilot/copilot-value/adoption-chart/adoption-chart.component.ts b/frontend/src/app/main/copilot/copilot-value/adoption-chart/adoption-chart.component.ts
@@ -78,7 +78,9 @@ export class AdoptionChartComponent implements OnInit, OnChanges {
   ) { }
 
   ngOnInit() {
-    this._chartOptions = Object.assign({}, this._chartOptions, this.chartOptions);
+    this._chartOptions.yAxis = Object.assign({}, this.chartOptions?.yAxis, this._chartOptions.yAxis);
+    this._chartOptions.tooltip = Object.assign({}, this.chartOptions?.tooltip, this._chartOptions.tooltip);
+    this._chartOptions = Object.assign({}, this.chartOptions, this._chartOptions);
   }
 
   ngOnChanges(changes: SimpleChanges) {

diff --git a/...src/app/main/copilot/copilot-value/daily-activity-chart/daily-activity-chart.component.ts b/...src/app/main/copilot/copilot-value/daily-activity-chart/daily-activity-chart.component.ts
@@ -85,7 +85,9 @@ export class DailyActivityChartComponent implements OnInit, OnChanges {
   ) { }
 
   ngOnInit() {
-    this._chartOptions = Object.assign({}, this._chartOptions, this.chartOptions);
+    this._chartOptions.yAxis = Object.assign({}, this.chartOptions?.yAxis, this._chartOptions.yAxis);
+    this._chartOptions.tooltip = Object.assign({}, this.chartOptions?.tooltip, this._chartOptions.tooltip);
+    this._chartOptions = Object.assign({}, this.chartOptions, this._chartOptions);
   }
 
   ngOnChanges() {

diff --git a/frontend/src/app/main/copilot/copilot-value/time-saved-chart/time-saved-chart.component.ts b/frontend/src/app/main/copilot/copilot-value/time-saved-chart/time-saved-chart.component.ts
@@ -84,7 +84,9 @@ export class TimeSavedChartComponent implements OnInit, OnChanges {
   ) { }
 
   ngOnInit() {
-    this._chartOptions = Object.assign({}, this._chartOptions, this.chartOptions);
+    this._chartOptions.yAxis = Object.assign({}, this.chartOptions?.yAxis, this._chartOptions.yAxis);
+    this._chartOptions.tooltip = Object.assign({}, this.chartOptions?.tooltip, this._chartOptions.tooltip);
+    this._chartOptions = Object.assign({}, this.chartOptions, this._chartOptions);
   }
 
   ngOnChanges() {

diff --git a/frontend/src/app/main/copilot/copilot-value/value.component.ts b/frontend/src/app/main/copilot/copilot-value/value.component.ts
@@ -40,6 +40,7 @@ export class CopilotValueComponent implements OnInit {
   charts = [] as Highcharts.Chart[];
   chartOptions: Highcharts.Options = {
     chart: {
+      // spacingTop: 50,
       zooming: {
         type: 'x'
       },
@@ -48,7 +49,6 @@ export class CopilotValueComponent implements OnInit {
     xAxis: {
       type: 'datetime',
       dateTimeLabelFormats: {
-        // don't display the year
         month: '%b',
         year: '%b'
       },
@@ -63,6 +63,11 @@ export class CopilotValueComponent implements OnInit {
     },
     exporting: {
       enabled: true,
+      buttons: {
+        contextButton: {
+          y: 0
+        }
+      }
     }
   };
 

diff --git a/frontend/src/app/services/highcharts.service.ts b/frontend/src/app/services/highcharts.service.ts
@@ -510,11 +510,11 @@ export class HighchartsService {
         pointFormatter: function () {
           return [
             `User: `,
-            '<b>' + this.raw.userId + '</b>',
+            '<b>' + this.raw?.userId + '</b>',
             `</br>Time saved: `,
             '<b>' + Math.round(this.y || 0) + '%</b>',
             `</br>PR: `,
-            '<b>#' + this.raw.prNumber + '</b>',
+            '<b>#' + this.raw?.prNumber + '</b>',
           ].join('');
         } as Highcharts.FormatterCallbackFunction<CustomHighchartsPoint>
       }