Skip to content

Tool to visualize the Copilot metrics provided via the Copilot Business Metrics API (current in public beta)

License

Notifications You must be signed in to change notification settings

alantsai-samples/copilot-metrics-viewer

ย 
ย 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

NOTE: For information on support and assistance, click here.

GitHub Copilot Metrics Viewer

image

This application displays a set of charts with various metrics related to GitHub Copilot for your GitHub Organization or Enterprise Account. These visualizations are designed to provide clear representations of the data, making it easy to understand and analyze the impact and adoption of GitHub Copilot. This app utilizes the GitHub Copilot Metrics API.

Setup GitHub Action

To set up the GitHub Action for fetching and processing GitHub Copilot usage metrics, follow these steps:

  1. fork my version๏ผšhttps://github.com/alantsai-samples/copilot-metrics-viewer/fork

    โ€‹imageโ€‹

  2. disable original two GitHub Action which is create container image and deploy to Azure Static Website

    โ€‹enable GitHub Actionโ€‹

    โ€‹Disable Azure Static Web Apps CI/CDโ€‹

    โ€‹Disable Build and push Docker imageโ€‹

  3. Setup Required secrets

    โ€‹image

    add GH_TOKENโ€‹ as Name with the Personal Access Token created from here as Secret (need scope : read:enterpriseโ€‹, manage_billing:copilotโ€‹)

    โ€‹imageโ€‹

    it should look like:

    โ€‹imageโ€‹

  4. Setup Variables

    You need to set NAMEโ€‹ as to your organization or enterprise name

    โ€‹create new repository variableโ€‹

    โ€‹create new repository variable

  5. Execute Fetch GitHub Copilot Usage Metricsโ€‹ Action

    โ€‹imageโ€‹

    โ€‹run workflowโ€‹

    this flow is triggered every morning 05:00 at UTC time zone

  6. โ€‹Build and Deploy to GitHub Pagesโ€‹ will automatically be triggered when Fetch GitHub Copilot Usage Metricsโ€‹ is done

    โ€‹imageโ€‹

  7. Setup GitHub Pages

    โ€‹Settingsโ€‹ -> Pagesโ€‹ -> gh-pagesโ€‹

    โ€‹enable gh-pagesโ€‹

    โ€‹new pages-build-deployment action will be created and execute automaticallyโ€‹

    โ€‹modify default project url to use gh-pagesโ€‹

  8. Try the page

    Click onto the gh-pages and you will see the result

    ignore the Using mock data - see README if unintendedโ€‹ part

    โ€‹imageโ€‹

Other Reference

There are other GitHub Action Variables that you can set

  1. โ€‹AREAโ€‹ - currently support orgโ€‹ or enterpriseโ€‹. It is used to build up the API url path. Default to orgโ€‹.
  2. โ€‹BRANCH_NAMEโ€‹ - When fetch data, it will push default to data/{NAME}โ€‹ branch. If you would like to change it, just modify this to what you want

Workflow Diagram

Below is a diagram illustrating the GitHub Action workflow for fetching, processing, and visualizing GitHub Copilot usage metrics:

graph TD
    subgraph A["Fetch GitHub Copilot Usage Metrics Workflow"]
        Checkout["Checkout code"]
        FetchMetrics["Fetch Copilot Metrics"]
        ProcessMetrics["Process Metrics"]
        CommitData["Commit Processed Data"]
        Checkout --> FetchMetrics
        FetchMetrics --> ProcessMetrics
        ProcessMetrics --> CommitData
        CommitData --> B["Project Codebase"]
    end
    
    B -->|Triggers| G["Build and Deploy"]
    
    subgraph D["Build and Deploy to GitHub Pages Workflow"]
        G -->|Builds and Deploys| C["Copilot Metrics Site"]
    end
Loading

Video

copilot-metrics-viewer.mov

Charts

Key Metrics

Here are the key metrics visualized in these charts:

  1. Acceptance Rate: This metric represents the ratio of accepted lines to the total lines suggested by GitHub Copilot. This rate is an indicator of the relevance and usefulness of Copilot's suggestions.

image

  1. Total Suggestions This chart illustrates the total number of code suggestions made by GitHub Copilot. It offers a view of the tool's activity and its engagement with users over time.

  2. Total Acceptances: This visualization focuses on the total number of suggestions accepted by users.

image

  1. Total Lines Suggested: Showcases the total number of lines of code suggested by GitHub Copilot. This gives an idea of the volume of code generation and assistance provided.

  2. Total Lines Accepted: As the name says, the total lines of code accepted by users (full acceptances) offering insights into how much of the suggested code is actually being utilized incorporated to the codebase.

image

  1. Total Active Users: Represents the number of active users engaging with GitHub Copilot. This helps in understanding the user base growth and adoption rate.

image

Languages Breakdown Analysis

Pie charts with the top 5 languages by accepted prompts and acceptance rate are displayed at the top.

image

The language breakdown analysis tab also displays a table showing the Accepted Prompts, Accepted Lines of Code, and Acceptance Rate (%) for each language over the past 28 days. The entries are sorted by the number of accepted lines of code descending.

image

Copilot Chat Metrics

image

  1. Cumulative Number of Turns: This metric represents the total number of turns (interactions) with the Copilot over the past 28 days. A 'turn' includes both user inputs and Copilot's responses.

  2. Cumulative Number of Acceptances: This metric shows the total number of lines of code suggested by Copilot that have been accepted by users over the past 28 days.

  3. Total Turns | Total Acceptances Count: This is a chart that displays the total number of turns and acceptances

  4. Total Active Copilot Chat Users: a bar chart that illustrates the total number of users who have actively interacted with Copilot over the past 28 days.

Seat Analysis

image

1. **Total Assigned:** This metric represents the total number of Copilot seats assigned within current organization/enterprise.
  1. Assigned But Never Used: This metric shows seats that were assigned but never used within the current organization/enterprise. The assigned timestamp is also displayed in the chart.

  2. No Activity in the Last 7 days: never used seats or seats used, but with no activity in the past 7 days.

  3. No Activity in the last 7 days (including never used seats): a table to display seats that have had no activity in the past 7 days, ordered by the date of last activity. Seats that were used earlier are displayed at the top.

Setup instructions

In the .env file, you can configure several environment variables that control the behavior of the application.

VUE_APP_SCOPE

The VUE_APP_SCOPE environment variable in the .env file determines the scope of the API calls made by the application. It can be set to either 'enterprise' or 'organization'.

  • If set to 'enterprise', the application will target API calls to the GitHub Enterprise account defined in the VUE_APP_GITHUB_ENT variable.
  • If set to 'organization', the application will target API calls to the GitHub Organization account defined in the VUE_APP_GITHUB_ORG variable.

For example, if you want to target the API calls to an organization, you would set VUE_APP_SCOPE=organization in the .env file.

VUE_APP_SCOPE=organization

VUE_APP_GITHUB_ORG= <YOUR-ORGANIZATION>

VUE_APP_GITHUB_ENT=

VUE_APP_MOCKED_DATA

To access Copilot metrics from the last 28 days via the API and display actual data, set the following boolean environment variable to false:

  VUE_APP_MOCKED_DATA=false

VUE_APP_GITHUB_TOKEN

Specifies the GitHub Personal Access Token utilized for API requests. Generate this token with the following scopes: copilot, manage_billing:copilot, manage_billing:enterprise, read:enterprise, read:org.

  VUE_APP_GITHUB_TOKEN=

Install dependencies

npm install

Compiles and runs the application

npm run serve

Docker build

docker build -t copilot-metrics-viewer .

Docker run

docker run -p 8080:80 copilot-metrics-viewer

The application will be accessible at http://localhost:8080

License

This project is licensed under the terms of the MIT open source license. Please refer to MIT for the full terms.

Maintainers

@martedesco

Support

This project is independently developed and maintained, and is not an official GitHub product. It thrives through the dedicated efforts of myself (@martedesco) and our wonderful contributors. A heartfelt thanks to all our contributors! โœจ

I aim to provide support through GitHub Issues. While I strive to stay responsive, I can't guarantee immediate responses. For critical issues, please include "CRITICAL" in the title for quicker attention. ๐Ÿ™๐Ÿผ

Coming next ๐Ÿ”ฎ

  • Team slicing
  • Persistence layer

About

Tool to visualize the Copilot metrics provided via the Copilot Business Metrics API (current in public beta)

Resources

License

Code of conduct

Security policy

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Vue 75.2%
  • TypeScript 20.1%
  • JavaScript 2.0%
  • HTML 1.3%
  • Other 1.4%