Skip to content

Refactor main graph to d3.js#6159

Merged
RobertJoonas merged 40 commits intomain-graph-v2-backendfrom
main-graph-to-api-v2--double-headed
Apr 15, 2026
Merged

Refactor main graph to d3.js#6159
RobertJoonas merged 40 commits intomain-graph-v2-backendfrom
main-graph-to-api-v2--double-headed

Conversation

@apata
Copy link
Copy Markdown
Contributor

@apata apata commented Mar 12, 2026

Refactors line graph to Typescript, from chart.js library to d3.js library. Depends on the new query backend. #6173

The rationale for switching the library:

  • we need d3.js for the complicated world map (can't be done with chart.js)

  • having two charting libraries increases the size of dashboard javascript and therefore makes the website take longer to load

  • Test side-by-side

  • Remove console.log of "effect running"

  • Delete line-graph.js (-301)

  • Delete graph-util.js (-127)

  • Delete graph-tooltip.js (-216)

  • Delete date-formatter.js (-115)

Changes

  • Tooltip is aligned to top left of finger always, but constrained within the chart left to right
  • Mobile interactivity (drag left and right to see tooltip, release finger to zoom in on currently shown period)
  • Stops x tick texts from rotating, adds subtle x ticks

Fixes

  • Fixes issue with invalid x axis labels on minute resolution charts
  • Fixes issue with ambiguous labels in tooltip when comparing year over year

Tests

  • Automated tests have been added

Changelog

  • Entry has been added to changelog

Documentation

  • This change does not need a documentation update

Dark mode

  • The UI has been tested both in dark and light mode

@apata apata added the preview label Mar 12, 2026
@github-actions
Copy link
Copy Markdown

Preview environment👷🏼‍♀️🏗️
PR-6159

@apata apata force-pushed the main-graph-to-api-v2--double-headed branch 2 times, most recently from cddaaaa to 2d27729 Compare March 12, 2026 16:03
This was referenced Mar 17, 2026
@apata apata removed the preview label Apr 1, 2026
@apata apata force-pushed the main-graph-to-api-v2--double-headed branch from 916c50b to 91df8c6 Compare April 1, 2026 11:26
@CLAassistant
Copy link
Copy Markdown

CLAassistant commented Apr 1, 2026

CLA assistant check
All committers have signed the CLA.

@apata apata changed the base branch from main-graph-to-api-v2 to main-graph-v2-backend April 1, 2026 14:50
@apata apata added the preview label Apr 1, 2026
@github-actions
Copy link
Copy Markdown

github-actions bot commented Apr 1, 2026

Preview environment👷🏼‍♀️🏗️
PR-6159

@apata apata force-pushed the main-graph-to-api-v2--double-headed branch 3 times, most recently from b590145 to c37fa8f Compare April 7, 2026 17:44
@apata apata force-pushed the main-graph-to-api-v2--double-headed branch 2 times, most recently from 47d0f68 to df87958 Compare April 13, 2026 08:18
@apata apata changed the title WIP: Line graph UI rewire Refactor main graph to d3.js Apr 13, 2026
@apata apata marked this pull request as ready for review April 13, 2026 08:49
@apata apata requested a review from a team April 13, 2026 08:49
@apata apata force-pushed the main-graph-to-api-v2--double-headed branch from 7257733 to 6a3120a Compare April 13, 2026 19:50
Comment on lines +6 to +13
const browserDateFormat = Intl.DateTimeFormat(navigator.language, {
hour: 'numeric'
})

export function is12HourClock() {
return browserDateFormat.resolvedOptions().hour12
}

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.

Copied from date-formatter.js that was deleted.

Comment thread assets/js/dashboard/components/graph-tooltip.tsx
Comment thread assets/js/dashboard/stats/graph/fetch-main-graph.ts Outdated
Comment thread assets/js/dashboard/stats/graph/main-graph.tsx
Comment thread assets/js/dashboard/stats/graph/fetch-main-graph.ts Outdated
Comment thread assets/js/dashboard/stats/graph/main-graph-data.ts Outdated
Comment thread assets/js/dashboard/stats/graph/main-graph-data.ts Outdated
Comment thread assets/js/dashboard/stats/graph/main-graph-data.ts
Comment thread assets/js/dashboard/stats/graph/main-graph-data.ts Outdated
Comment thread assets/js/dashboard/stats/graph/main-graph-data.ts
Comment thread assets/js/dashboard/components/graph.tsx Outdated
Comment thread assets/js/dashboard/components/graph.tsx Outdated
Comment thread assets/js/dashboard/components/graph.tsx Outdated
Comment thread assets/js/dashboard/components/graph.tsx Outdated
@RobertJoonas RobertJoonas merged commit 098bc77 into main-graph-v2-backend Apr 15, 2026
22 checks passed
@RobertJoonas RobertJoonas deleted the main-graph-to-api-v2--double-headed branch April 15, 2026 08:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants