Skip to content

CRINGE-38: Replace metrics-graphics dependency#7231

Open
Haseeb702 wants to merge 6 commits into
mainfrom
cringe-38-replace-graph
Open

CRINGE-38: Replace metrics-graphics dependency#7231
Haseeb702 wants to merge 6 commits into
mainfrom
cringe-38-replace-graph

Conversation

@Haseeb702

@Haseeb702 Haseeb702 commented Jul 8, 2026

Copy link
Copy Markdown
Contributor

Purpose:

  • To replace the metrics-graphics dependency with a more modern and actively maintained Javascript graphing library: CRINGE-38

This PR:

  • Removes all the old dependencies: D3 and metrics-graphics, since they are both used only for the signature graph tab and can be safely removed.
  • Removed the custom CSS for metrics-graphics
  • Rewrites the signature_tab_graphs.js using chart.js, which is a modern Javascript graphing library to replace the metrics-graphics dependency and the old graphing code

Manual Testing Plan:

  • Go to any crash signature report and click on the graphs tab
  • Verify that the line graph renders properly, and loads within 2 seconds
  • Select a different option in the dropdown menu and verify that a new line graph is drawn with the new option
  • Hover your cursor near a line and confirm that data points can be hovered over and display the y-axis and x-axis details
  • Resize your window to verify if the graph is scaled correctly

@@ -67,74 +66,85 @@ SignatureReport.GraphsTab.prototype.loadControls = function () {
SignatureReport.GraphsTab.prototype.formatData = function (data) {

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

First thing to refactor was the data format, since chart.js doesn't accept the same data format as metrics-graphics.

});

// Each object in data.aggregates contains data for one date.
$.each(data.aggregates, function (i, dateData) {

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here we go through the top 4 terms being graphed and create a list of daily crash counts that align with the date list. The code iterates through the data for each date and maps the daily crash counts to each term. This is how the dataset for the line graph is built.

@Haseeb702 Haseeb702 marked this pull request as ready for review July 9, 2026 22:07
@Haseeb702 Haseeb702 requested a review from biancadanforth July 10, 2026 14:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant