ui: Render graphs with D3 directly, replacing use of NVD3

[mrtracy]

We have used the NVD3 library to draw our metrics graphs since the creation of the Admin UI. However, we are rapidly outgrowing the restraints of this system:

• We have numerous graph-related bugs that are proving difficult to analyze. As the graphing logic is largely contained in this third party library (which is not exceptionally well documented), we do not have a sufficient intuition of how to analyze or fix these bugs.
• We have a desire to add more advanced features to graphs (ui: Visually Correlate "Events" with graphs #13378, ui: click and drag to zoom into a time scale on tables in admin ui  #13752) which require features that do not intuitively fit into the NVD3 framework.

NVD3 is a library meant to provide a reasonable level of graph utility for a wide array of use cases; we now need a more advanced level of graph utility for a narrower use case. Therefore, we should begin rendering our graphs using D3 directly; this will afford us greater control and understanding of the rendering process, allowing us to debug issues more effectively and add advanced features more easily.

---

EDIT 2019: Related issues.

Features this will directly or indirectly enable:

• ui: use step charts for timeseries to clarify measurement interval #5980 - "step chart"
• ui: enable line graphs with log Y scale #10014 - "log y scale"
• ui: replicate queue graph requires a second axis #12899 - "second axis"
• ui: Visually Correlate "Events" with graphs #13378 - "events on graphs"
• ui: provide every/important graphs with a hover that shows you a histogram  #13389 - "histogram on hover"
• ui: click and drag to zoom into a time scale on tables in admin ui  #13752 - "zoom on time scale"
• ui: Display configured cache size in memory graph #16855 - "show configured cache size"
• ui: show "ghost" time series for context #20021 - "ghost time series"
• ui: boxplot to understand distribution of data #27934 - "boxplot for distribution"

Bugs this will likely obselete (let's not repeat them, though):

• ui: don't show decimal places for integral values #12973
• ui: Replicas-per-node graph breaks when number of nodes increases #16505
• ui: Graphs interpolate a little too generously between distant data points #17552
• ui: make per-node views actually per-node #18452
• ui: "Other" graph in raft debug page hard to read in a screenshot #19271
• ui: hidden graph lines reappear on next refresh #19490
• ui: colors in admin UI graphs don't match the hover over component #21630
• ui: broken y-axis on SQL QPS graph when set to 1 hour duration #22572
• ui: details tooltip picks out uneven data points #23480
• ui: Chart unreadable: RocksDB Compactions/Flushes #27094
• ui: disabled time series are re-enabled as soon as cursor is moved #27954
• ui: custom chart tooltips don't work so well when using the "per node" option on large clusters #30286
• ui: timeseries dashboard pages are really slow on large clusters #30287
• ui: time-series charts sluggish on 1-month setting #33717

[couchand]

I've broken down the major steps to replacing our use of NVD3 for the time series charts. This is where I'll be tracking the progress as I work on this:

• general functionality
  • basic static charting
  • multiple series
  • legends
  • update on new data
  • sliding animation
  • historical data handling
  • timeseries data integration
  • react integration
• scales
  • time scale
  • count scale
  • byte scale
  • duration scale
  • percentage scale
• interactivity
  • hover tooltip
  • linked guidelines
  • legend filtering
  • resize on page size change
• implementation
  • replace usages of each chart
  • remove nvd3 references
  • testing
• polish
  • color schemes
  • scale testing and tweaking

[github-actions]

We have marked this issue as stale because it has been inactive for
18 months. If this issue is still relevant, removing the stale label
or adding a comment will keep it active. Otherwise, we'll close it in
10 days to keep the issue queue tidy. Thank you for your contribution
to CockroachDB!