Skip to content

Commit

Permalink
Refactor Highcharts integration and improve chart options handling; u…
Browse files Browse the repository at this point in the history 
…pdate component templates for better structure
  • Loading branch information
@austenstone
austenstone committed Nov 20, 2024
1 parent 4005fcb commit 91b835f
Show file tree
Hide file tree
Showing 18 changed files with 468 additions and 595 deletions.
33 changes: 17 additions & 16 deletions frontend/src/app/highcharts.theme.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import Highcharts from 'highcharts/es-modules/masters/highcharts.src';
import * as Highcharts from 'highcharts';

const tooltipHeaderFormat =
'<table><tr><th style="color: var(--sys-on-surface-variant); font-weight: 600; padding-bottom: 2px">{point.key}</th></tr>';
Expand Down Expand Up @@ -36,7 +36,7 @@ const yAxisConfig: Highcharts.YAxisOptions = {
...xAxisConfig
};

Highcharts.theme = {
const theme: Highcharts.Options = {
colors: [
'var(--sys-primary)',
'var(--sys-secondary)',
Expand All @@ -49,7 +49,7 @@ Highcharts.theme = {
'var(--sys-on-error)'
],
chart: {
backgroundColor: 'var(--sys-surface)',
backgroundColor: undefined, // 'var(--sys-surface)',
borderRadius: 16,
style: {
fontFamily: 'var(--sys-body-large-font)'
Expand Down Expand Up @@ -131,8 +131,7 @@ Highcharts.theme = {
color: 'var(--sys-on-surface)'
}
}
},
borderRadius: 4
}
},
separator: {
style: {
Expand Down Expand Up @@ -255,16 +254,18 @@ Highcharts.theme = {
pie: {
borderWidth: 0,
borderRadius: 4,
dataLabels: { style: {
font: 'var(--sys-label-large)',
fontSize: '14px',
opacity: 0.87,
fontWeight: 'var(--sys-label-large-weight)',
textOutline: 'none',
},
distance: 20,
connectorWidth: 1,
connectorColor: 'var(--sys-outline-variant)'
dataLabels: {
style: {
font: 'var(--sys-label-large)',
color: 'var(--sys-on-surface)',
fontSize: '14px',
opacity: 0.87,
fontWeight: 'var(--sys-label-large-weight)',
textOutline: 'none',
},
distance: 20,
connectorWidth: 1,
connectorColor: 'var(--sys-outline-variant)'
}
}
},
Expand All @@ -286,4 +287,4 @@ Highcharts.theme = {
enabled: false
}
};
Highcharts.setOptions(Highcharts.theme);
Highcharts.setOptions(theme);
5 changes: 3 additions & 2 deletions ...d-card/dashboard-card-drilldown-bar-chart/dashboard-card-drilldown-bar-chart.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
import { MatCardModule } from '@angular/material/card';
import Highcharts from 'highcharts/es-modules/masters/highcharts.src';
import 'highcharts/es-modules/masters/modules/drilldown.src';
import * as Highcharts from 'highcharts';
import HC_drilldown from 'highcharts/modules/drilldown';
HC_drilldown(Highcharts);
import { HighchartsChartModule } from 'highcharts-angular';
import { CommonModule } from '@angular/common';
import { HighchartsService } from '../../../../../services/highcharts.service';
Expand Down
224 changes: 6 additions & 218 deletions .../copilot/copilot-metrics/copilot-metrics-pie-chart/copilot-metrics-pie-chart.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, SimpleChanges } from '@angular/core';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges } from '@angular/core';
import { CopilotMetrics } from '../../../../services/metrics.service.interfaces';
import Highcharts from 'highcharts/es-modules/masters/highcharts.src';
import * as Highcharts from 'highcharts';
import { HighchartsChartModule } from 'highcharts-angular';
import { HighchartsService } from '../../../../services/highcharts.service';

Expand All @@ -15,13 +15,10 @@ import { HighchartsService } from '../../../../services/highcharts.service';
// styleUrl: './copilot-metrics-ide-completion-pie-chart.component.css',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CopilotMetricsPieChartComponent {
export class CopilotMetricsPieChartComponent implements OnChanges {
Highcharts: typeof Highcharts = Highcharts;
@Input() metricsTotals?: CopilotMetrics;
chartOptions: Highcharts.Options = {
chart: {
type: 'pie'
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: ' +
Expand All @@ -33,212 +30,7 @@ export class CopilotMetricsPieChartComponent {
type: 'pie',
}],
drilldown: {
series: [
{
type: 'pie',
name: 'Chrome',
id: 'Chrome',
data: [
[
'v97.0',
36.89
],
[
'v96.0',
18.16
],
[
'v95.0',
0.54
],
[
'v94.0',
0.7
],
[
'v93.0',
0.8
],
[
'v92.0',
0.41
],
[
'v91.0',
0.31
],
[
'v90.0',
0.13
],
[
'v89.0',
0.14
],
[
'v88.0',
0.1
],
[
'v87.0',
0.35
],
[
'v86.0',
0.17
],
[
'v85.0',
0.18
],
[
'v84.0',
0.17
],
[
'v83.0',
0.21
],
[
'v81.0',
0.1
],
[
'v80.0',
0.16
],
[
'v79.0',
0.43
],
[
'v78.0',
0.11
],
[
'v76.0',
0.16
],
[
'v75.0',
0.15
],
[
'v72.0',
0.14
],
[
'v70.0',
0.11
],
[
'v69.0',
0.13
],
[
'v56.0',
0.12
],
[
'v49.0',
0.17
]
]
},
{
type: 'pie',
name: 'Safari',
id: 'Safari',
data: [
[
'v15.3',
0.1
],
[
'v15.2',
2.01
],
[
'v15.1',
2.29
],
[
'v15.0',
0.49
],
[
'v14.1',
2.48
],
[
'v14.0',
0.64
],
[
'v13.1',
1.17
],
[
'v13.0',
0.13
],
[
'v12.1',
0.16
]
]
},
{
type: 'pie',
name: 'Edge',
id: 'Edge',
data: [
[
'v97',
6.62
],
[
'v96',
2.55
],
[
'v95',
0.15
]
]
},
{
type: 'pie',
name: 'Firefox',
id: 'Firefox',
data: [
[
'v96.0',
4.17
],
[
'v95.0',
3.33
],
[
'v94.0',
0.11
],
[
'v91.0',
0.23
],
[
'v78.0',
0.16
],
[
'v52.0',
0.15
]
]
}
]
series: []
}
};
_chartOptions?: Highcharts.Options;
Expand All @@ -247,18 +39,14 @@ export class CopilotMetricsPieChartComponent {
constructor(
private highchartsService: HighchartsService,
private cdr: ChangeDetectorRef
) {
console.log(this.metricsTotals);
}
) { }

ngOnChanges() {
if (this.metricsTotals) {
this._chartOptions = this.highchartsService.transformMetricsToPieDrilldown(this.metricsTotals);
this.chartOptions = {
...this.chartOptions,
...this._chartOptions
...this.highchartsService.transformMetricsToPieDrilldown(this.metricsTotals)
};
console.log('now', this.chartOptions);
this.updateFlag = true;
this.cdr.detectChanges();
}
Expand Down
17 changes: 13 additions & 4 deletions frontend/src/app/main/copilot/copilot-metrics/copilot-metrics.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,20 @@
<div class="page-header">
<h1>Metrics</h1>
</div>
<!-- content goes here -->
<app-date-range-select (dateRangeChange)="dateRangeChange($event)"></app-date-range-select>

<p>
<app-date-range-select (dateRangeChange)="dateRangeChange($event)"></app-date-range-select>
</p>
<!-- Make a chart that shows lines suggested each day and the activity rate on timeUsedForGroup
Allow filter table by editor, model, and language. -->
<!-- IDE Completion https://www.highcharts.com/demo/highcharts/pie-donut -->
<app-copilot-metrics-ide-completion-pie-chart [metricsTotals]="metricsTotals"></app-copilot-metrics-ide-completion-pie-chart>
<div class="cards-grid">
<mat-card appearance="outlined">
<mat-card-header>
<mat-card-title>IDE Completions</mat-card-title>
</mat-card-header>
<mat-card-content>
<app-copilot-metrics-ide-completion-pie-chart [metricsTotals]="metricsTotals"></app-copilot-metrics-ide-completion-pie-chart>
</mat-card-content>
</mat-card>
</div>
</div>
Loading

0 comments on commit 91b835f

Please sign in to comment.