From 745f386f64e2af5c2a9f28866049b3a50ecdd6ca Mon Sep 17 00:00:00 2001 From: Austen Stone Date: Tue, 19 Nov 2024 23:52:43 -0500 Subject: [PATCH] Enhance chart components by adding tooltip and yAxis configurations; improve chart options merging logic for better customization --- .../copilot-dashboard/dashboard.component.ts | 31 ++++++++++++------- .../adoption-chart.component.ts | 4 ++- .../daily-activity-chart.component.ts | 4 ++- .../time-saved-chart.component.ts | 4 ++- .../copilot/copilot-value/value.component.ts | 7 ++++- .../src/app/services/highcharts.service.ts | 4 +-- 6 files changed, 36 insertions(+), 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 index 334ce83..cf98629 100644 --- 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 index 2d8eecc..58e4501 100644 --- 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/frontend/src/app/main/copilot/copilot-value/daily-activity-chart/daily-activity-chart.component.ts b/frontend/src/app/main/copilot/copilot-value/daily-activity-chart/daily-activity-chart.component.ts index c40cf14..258fb7a 100644 --- a/frontend/src/app/main/copilot/copilot-value/daily-activity-chart/daily-activity-chart.component.ts +++ b/frontend/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 index 86daa3c..da26f82 100644 --- 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 index 2e47c17..0c66c1c 100644 --- 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 index 3839e9f..5ef5a61 100644 --- 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: `, - '' + this.raw.userId + '', + '' + this.raw?.userId + '', `
Time saved: `, '' + Math.round(this.y || 0) + '%', `
PR: `, - '#' + this.raw.prNumber + '', + '#' + this.raw?.prNumber + '', ].join(''); } as Highcharts.FormatterCallbackFunction }