Skip to content

Refactor main graph to d3.js#6159

Open
apata wants to merge 27 commits intomain-graph-v2-backendfrom
main-graph-to-api-v2--double-headed
Open

Refactor main graph to d3.js#6159
apata wants to merge 27 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

This PR currently runs line graph side-by-side with the refactored version. The idea is to be able to compare the refactored one with the current one, to detect any small intentional and unintentional changes.

To run locally,

  1. checkout the master branch of analytics in folder A, start dev server with default options (if new folder, do make install)
  2. checkout this branch in folder B, change .env.dev (diff below), start dev server
-BASE_URL=http://localhost:8000
+HTTP_PORT=8001
+BASE_URL=http://localhost:8001
  1. open http://localhost:8001/dummy.site/settings/visibility and set it to be public
  • 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
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.

2 participants