${this.currency === 'cost' ? '${point.y:.2f}' : '{point.y} mins'}`, 93 | }; 94 | this.updateFromInput = true; 95 | } 96 | } 97 | -------------------------------------------------------------------------------- /src/app/components/usage/actions/charts/chart-line-usage-daily/chart-line-usage-daily.component.html: -------------------------------------------------------------------------------- 1 |
2 |
18 |
{point.x:%Y-%m-%d}
${this.currency === 'cost' ? '${point.y:,.2f}' : '{point.y} mins'}`, 179 | } 180 | this.updateFromInput = true; 181 | } 182 | 183 | redrawChart() { 184 | this.chartRef.ngOnDestroy(); 185 | this.ngOnChanges(); 186 | } 187 | 188 | getWeekOfYear(date: Date) { 189 | const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate())); 190 | d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay() || 7)); 191 | const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1)); 192 | const weekNo = Math.ceil((((d.getTime() - yearStart.getTime()) / 86400000) + 1) / 7); 193 | return weekNo; 194 | } 195 | } 196 | -------------------------------------------------------------------------------- /src/app/components/usage/actions/charts/chart-pie-sku/chart-pie-sku.component.html: -------------------------------------------------------------------------------- 1 |
Minutes: {point.y}' 25 | }, 26 | series: [{ 27 | type: 'pie', // Add the type property 28 | name: 'Usage', 29 | data: [ 30 | ['SKU1', 1], 31 | ['SKU2', 2], 32 | ['SKU3', 3] 33 | ] 34 | }], 35 | }; 36 | updateFromInput: boolean = false; 37 | 38 | constructor( 39 | private usageReportService: UsageReportService, 40 | private themeService: ThemingService 41 | ) { 42 | this.options = { 43 | ...this.options, 44 | ...this.themeService.getHighchartsOptions(), 45 | } 46 | } 47 | 48 | ngOnChanges() { 49 | this.data = this.data.filter((line) => line.unitType === 'minutes'); 50 | this.options.series = [{ 51 | type: 'pie', // Add the type property 52 | name: 'Usage', 53 | data: this.data.reduce((acc, line) => { 54 | const formattedSku = this.usageReportService.formatSku(line.sku); 55 | const index = acc.findIndex((item) => item[0] === formattedSku); 56 | if (index === -1) { 57 | acc.push([formattedSku, line.value]); 58 | } else { 59 | acc[index][1] += line.value; 60 | } 61 | return acc; 62 | }, [] as [string, number][]).sort((a, b) => b[1] - a[1]) 63 | }]; 64 | this.options.title = { 65 | text: `${this.currency === 'minutes' ? 'Usage' : 'Cost'} by runner type` 66 | }; 67 | this.options.tooltip = { 68 | ...this.options.tooltip, 69 | pointFormat: `{series.name}: {point.percentage:.1f}%
${this.currency === 'cost' ? 'Cost: ${point.y:.2f}' : 'Minutes: {point.y}'}` 70 | }; 71 | this.updateFromInput = true; 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /src/app/components/usage/actions/charts/chart-pie-user/chart-pie-user.component.html: -------------------------------------------------------------------------------- 1 |
Minutes: {point.y}' 25 | }, 26 | series: [{ 27 | type: 'pie', 28 | name: 'Usage', 29 | data: [] 30 | }] 31 | }; 32 | updateFromInput: boolean = false; 33 | 34 | constructor( 35 | private themeService: ThemingService, 36 | private usageReportService: UsageReportService 37 | ) { 38 | this.options = { 39 | ...this.options, 40 | ...this.themeService.getHighchartsOptions(), 41 | } 42 | } 43 | 44 | ngOnChanges() { 45 | this.data = this.data.filter((line) => line.unitType === 'minutes'); 46 | 47 | const aggregatedData = this.data.reduce((acc, line) => { 48 | const index = acc.findIndex((item) => item[0] === line.username); 49 | if (index === -1) { 50 | acc.push([line.username, line.value]); 51 | } else { 52 | acc[index][1] += line.value; 53 | } 54 | return acc; 55 | }, [] as [string, number][]) 56 | .sort((a, b) => b[1] - a[1]); 57 | 58 | // Take top 20 and group the rest as "Other" 59 | const topNo = 29; 60 | const topX = aggregatedData.slice(0, topNo); 61 | const remaining = aggregatedData.slice(topNo); 62 | 63 | const data = [...topX]; 64 | if (remaining.length > 0) { 65 | const otherTotal = remaining.reduce((sum, item) => sum + item[1], 0); 66 | data.push(['Other', otherTotal]); 67 | } 68 | 69 | this.options.series = [{ 70 | type: 'pie', 71 | name: 'Usage', 72 | data 73 | }]; 74 | this.options.title = { 75 | text: `${this.currency === 'minutes' ? 'Usage' : 'Cost'} by username` 76 | }; 77 | this.options.tooltip = { 78 | ...this.options.tooltip, 79 | pointFormat: `{series.name}: {point.percentage:.1f}%
${this.currency === 'cost' ? 'Cost: ${point.y:.2f}' : 'Minutes: {point.y}'}` 80 | }; 81 | this.updateFromInput = true; 82 | } 83 | 84 | } 85 | -------------------------------------------------------------------------------- /src/app/components/usage/actions/table-workflow-usage/table-workflow-usage.component.html: -------------------------------------------------------------------------------- 1 |
2 |
--------------------------------------------------------------------------------
/src/app/components/usage/actions/table-workflow-usage/table-workflow-usage.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/austenstone/github-actions-usage-report/689eba0ddfca88fba3b0e4feea2c4b9a2837813d/src/app/components/usage/actions/table-workflow-usage/table-workflow-usage.component.scss
--------------------------------------------------------------------------------
/src/app/components/usage/actions/table-workflow-usage/table-workflow-usage.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { TableWorkflowUsageComponent } from './table-workflow-usage.component';
4 |
5 | describe('TableWorkflowUsageComponent', () => {
6 | let component: TableWorkflowUsageComponent;
7 | let fixture: ComponentFixture
3 |
4 | Grouping
5 |
6 | Runner
7 | Repo
8 | Workflow
9 | User
10 |
11 |
12 |
13 |
14 | Filter
15 |
16 |
17 |
26 |
27 |
28 |
29 |
31 | @for (column of columns; track column) {
32 |
54 |
55 | | 34 | {{column.header}} 35 | | 36 |37 | {{column.cell(row)}} 38 | 42 | | 43 |{{ column.footer ? column.footer() : '' }} | 44 ||
|---|---|---|---|
| No data matching the filter "{{input.value}}" | 52 |
2 |
--------------------------------------------------------------------------------
/src/app/components/usage/codespaces/table-codespaces-usage/table-codespaces-usage.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/austenstone/github-actions-usage-report/689eba0ddfca88fba3b0e4feea2c4b9a2837813d/src/app/components/usage/codespaces/table-codespaces-usage/table-codespaces-usage.component.scss
--------------------------------------------------------------------------------
/src/app/components/usage/codespaces/table-codespaces-usage/table-codespaces-usage.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { TableCodespacesUsageComponent } from './table-codespaces-usage.component';
4 |
5 | describe('TableCodespacesUsageComponent', () => {
6 | let component: TableCodespacesUsageComponent;
7 | let fixture: ComponentFixture
3 |
4 | Grouping
5 |
6 | Product
7 | Repository
8 | User
9 |
10 |
11 |
12 | Filter
13 |
14 |
15 |
16 |
17 |
18 |
19 | @for (column of columns; track column) {
20 |
38 |
39 |
40 | | 22 | {{column.header}} 23 | | 24 |25 | {{column.cell(row)}} 26 | | 27 |{{ column.footer ? column.footer() : '' }} | 28 ||
|---|---|---|---|
| No data matching the filter "{{input.value}}" | 36 |
2 |
--------------------------------------------------------------------------------
/src/app/components/usage/copilot/table-workflow-usage/table-copilot-usage.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/austenstone/github-actions-usage-report/689eba0ddfca88fba3b0e4feea2c4b9a2837813d/src/app/components/usage/copilot/table-workflow-usage/table-copilot-usage.component.scss
--------------------------------------------------------------------------------
/src/app/components/usage/copilot/table-workflow-usage/table-copilot-usage.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { TableCopilotUsageComponent } from './table-copilot-usage.component';
4 |
5 | describe('TableWorkflowUsageComponent', () => {
6 | let component: TableCopilotUsageComponent;
7 | let fixture: ComponentFixture
3 |
4 | Filter
5 |
6 |
7 |
8 |
9 |
10 |
11 | @for (column of columns; track column) {
12 |
30 |
31 |
32 | | 14 | {{column.header}} 15 | | 16 |17 | {{column.cell(row)}} 18 | | 19 |{{ column.footer ? column.footer() : '' }} | 20 ||
|---|---|---|---|
| No data matching the filter "{{input.value}}" | 28 |
Navigate to Billing & Plans
2 |
3 |
5 | {{(data.isEnterprise ? 'Enterprise' : 'Organization')}} slug
6 |
7 |
8 | ![example screenshot]()
11 |
12 | Enter your GitHub {{(data.isEnterprise ? 'enterprise' : 'organization')}} name
4 |After navigating to GitHub Billing download your usage report by clicking "Get usage report".
9 |Click the "Navigate" button below when you're ready.
10 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/src/app/components/usage/dialog-billing-navigate.ts:
--------------------------------------------------------------------------------
1 | import { Component, Inject } from '@angular/core';
2 | import {
3 | MAT_DIALOG_DATA,
4 | MatDialogRef,
5 | } from '@angular/material/dialog';
6 |
7 | interface DialogDataComponent {
8 | name: string;
9 | isEnterprise: boolean;
10 | }
11 |
12 | @Component({
13 | selector: 'app-dialog-billing-navigate',
14 | templateUrl: 'dialog-billing-navigate.html',
15 | standalone: false
16 | })
17 | export class DialogBillingNavigateComponent {
18 | constructor(
19 | public dialogRef: MatDialogRef
2 |
' : ''}${this.currency === 'cost' ? '${point.y:.2f}/day' : '{point.y:.2f} GB/day'}`, 118 | } 119 | } 120 | this.updateFromInput = true; 121 | } 122 | 123 | toggleChartType(value: string) { 124 | (this.chartType as string) = value; 125 | this.chartRef.ngOnDestroy(); 126 | this.ngOnChanges(); 127 | } 128 | } 129 | -------------------------------------------------------------------------------- /src/app/components/usage/shared-storage/shared-storage.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | Filter
4 |
5 |
6 |
--------------------------------------------------------------------------------
/src/app/components/usage/shared-storage/table-shared-storage/table-shared-storage.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/austenstone/github-actions-usage-report/689eba0ddfca88fba3b0e4feea2c4b9a2837813d/src/app/components/usage/shared-storage/table-shared-storage/table-shared-storage.component.scss
--------------------------------------------------------------------------------
/src/app/components/usage/shared-storage/table-shared-storage/table-shared-storage.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { TableSharedStorageComponent } from './table-shared-storage.component';
4 |
5 | describe('TableSharedStorageComponent', () => {
6 | let component: TableSharedStorageComponent;
7 | let fixture: ComponentFixture
7 |
8 | @for (column of columns; track column) {
9 |
28 |
29 |
30 | | 11 | {{column.header}} 12 | | 13 |14 | {{column.cell(row)}} 15 | | 16 |{{ column.footer ? column.footer() : '' }} | 17 ||
|---|---|---|---|
| No data matching the filter "{{input.value}}" | 26 |
2 |
3 | GitHub
5 |
8 |
9 |
3 | GitHub
Usage Report Viewer
4 |
5 |
8 |
10 |
12 |
13 |
17 |
19 | Premium Requests
18 |
20 |
63 |
64 |
65 |
66 | commit
67 | Actions
68 |
69 |
70 |
71 |
73 |
74 |
75 |
76 | backup
77 | Shared Storage
78 |
79 |
80 |
81 |
83 |
84 |
85 |
86 | computer
87 | Codespaces
88 |
89 |
90 |
91 |
93 |
94 |
95 |
96 |
99 |
100 |
101 |
103 |
104 |
105 |
106 |
107 |
109 |
131 | This application helps you visualize your GitHub
111 | Usage Report.
All processing is done client side and your usage report never leaves your
112 | computer.
To get started go get your usage report and then select it by clicking "Usage Report" above.
114 | 118 | 119 | 123 | 124 | 125 | 129 | 130 || {point.key} |
|---|
| ● {series.name}: {point.y} |
| {point.key} |
|---|
| ● {series.name}: {point.y} |