Refactor main graph to d3.js (#6159)

* Add generic graph component and use it for main graph

* Remove superfluous mobile related code

* Add isTouchDevice state and touch-device specific zoom instructions

* Move useMainGraphWidth

* Center tooltip

* Adjust tooltip position

* Clarify pointerup

* Extract fetching main graph and remapping main graph data

* Unify BE and FE change calculations

* Stop wrapping change arrow, unify with ComparisonTooltipContent

* Exports

* Attempt partial logic

* Draw dashed partial periods at the start and end of main series

* Simplify

* Clarify series

* Better types

* Make remapAndFillData take accessors

* Get metric label using utility

* Refactor value and comparisonValue to numericValue and comparisonNumericValue

* Refactor outerValue and comparisoOuterValue to value and comparisonValue

* Fix format

* Fix type error in test

* No need to assert isPartial

* Fix issue with full crash when switching between periods while tooltip

* Add necessary types

* Handle comparison_partial_time_labels

* Handle [null] style result items

* Hint expected tick count to y axis nicing

* Remove old line graph

* Clarify graph inputs

* Add MetricValue type

* Extract logic to read first and last time labels

* Clarify remapAndFillData

* Stop requesting for present_index as it is unused

* Clarify getLineSegments comment and refactor getNumericValue arg

* Remove unnecessary guard and unnecessary return value

* Refactor x tick values function and the way it is passed around

* Add getXDomain function

* Add tests for some graph.ts utils

* Add constants to top of graph.tsx, move utiltiy types to bottom

Author: apata

assets/js/dashboard/components/graph-tooltip.tsx

@@ -0,0 +1,65 @@
+import React, { ReactNode, useLayoutEffect, useRef, useState } from 'react'
+import { Transition } from '@headlessui/react'
+
+export const GraphTooltipWrapper = ({
+  x,
+  y,
+  maxX,
+  minWidth,
+  children,
+  className,
+  onClick,
+  isTouchDevice
+}: {
+  x: number
+  y: number
+  maxX: number
+  minWidth: number
+  children: ReactNode
+  className?: string
+  onClick?: () => void
+  isTouchDevice?: boolean
+}) => {
+  const ref = useRef<HTMLDivElement>(null)
+  // bigger on mobile to have room between thumb and tooltip
+  const xOffsetFromCursor = isTouchDevice ? 24 : 12
+  const yOffsetFromCursor = isTouchDevice ? 48 : 24
+  const [measuredWidth, setMeasuredWidth] = useState(minWidth)
+  // center tooltip above the cursor, clamped to prevent left/right overflow
+  const rawLeft = x + xOffsetFromCursor
+  const tooltipLeft = Math.max(0, Math.min(rawLeft, maxX - measuredWidth))
+
+  useLayoutEffect(() => {
+    if (!ref.current) {
+      return
+    }
+    setMeasuredWidth(ref.current.offsetWidth)
+  }, [children, className, minWidth])
+
+  return (
+    <Transition
+      as={React.Fragment}
+      appear
+      show
+      // enter delay on mobile is needed to prevent the tooltip from entering when the user starts to y-pan
+      // but the y-pan is not yet certain
+      enter={isTouchDevice ? 'transition-opacity duration-0 delay-150' : ''}
+      enterFrom={isTouchDevice ? 'opacity-0' : ''}
+      enterTo={isTouchDevice ? 'opacity-100' : ''}
+    >
+      <div
+        ref={ref}
+        className={className}
+        onClick={onClick}
+        style={{
+          minWidth,
+          left: tooltipLeft,
+          top: y,
+          transform: `translateY(-100%) translateY(-${yOffsetFromCursor}px)`
+        }}
+      >
+        {children}
+      </div>
+    </Transition>
+  )
+}

assets/js/dashboard/components/graph.test.ts

@@ -0,0 +1,106 @@
+import { getSuggestedXTickValues, getXDomain } from './graph'
+import * as d3 from 'd3'
+
+describe(`${getXDomain.name}`, () => {
+  it('returns [0, 1] for a single bucket to avoid a zero-width domain', () => {
+    expect(getXDomain(1)).toEqual([0, 1])
+  })
+  it('returns [0, bucketCount - 1] for multiple buckets', () => {
+    expect(getXDomain(5)).toEqual([0, 4])
+  })
+})
+
+const anyRange = [0, 100]
+describe(`${getSuggestedXTickValues.name}`, () => {
+  it('handles 1 bucket', () => {
+    const data = new Array(1).fill(0)
+    expect(
+      getSuggestedXTickValues(
+        d3.scaleLinear(getXDomain(data.length), anyRange),
+        data.length
+      )
+    ).toEqual([[0, 1]])
+  })
+
+  it('handles 2 buckets', () => {
+    const data = new Array(2).fill(0)
+    expect(
+      getSuggestedXTickValues(
+        d3.scaleLinear(getXDomain(data.length), anyRange),
+        data.length
+      )
+    ).toEqual([[0, 1]])
+  })
+
+  it('handles 7 buckets', () => {
+    const data = new Array(7).fill(0)
+    expect(
+      getSuggestedXTickValues(
+        d3.scaleLinear(getXDomain(data.length), anyRange),
+        data.length
+      )
+    ).toEqual([
+      [0, 1, 2, 3, 4, 5, 6],
+      [0, 2, 4, 6],
+      [0, 5]
+    ])
+  })
+
+  it('handles 24 buckets (day by hours)', () => {
+    const data = new Array(24).fill(0)
+    expect(
+      getSuggestedXTickValues(
+        d3.scaleLinear(getXDomain(data.length), anyRange),
+        data.length
+      )
+    ).toEqual([
+      [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22],
+      [0, 5, 10, 15, 20],
+      [0, 10, 20],
+      [0, 20]
+    ])
+  })
+
+  it('handles 28 buckets', () => {
+    const data = new Array(28).fill(0)
+    expect(
+      getSuggestedXTickValues(
+        d3.scaleLinear(getXDomain(data.length), anyRange),
+        data.length
+      )
+    ).toEqual([
+      [0, 5, 10, 15, 20, 25],
+      [0, 10, 20],
+      [0, 20]
+    ])
+  })
+
+  it('handles 91 buckets', () => {
+    const data = new Array(91).fill(0)
+    expect(
+      getSuggestedXTickValues(
+        d3.scaleLinear(getXDomain(data.length), anyRange),
+        data.length
+      )
+    ).toEqual([
+      [0, 10, 20, 30, 40, 50, 60, 70, 80, 90],
+      [0, 20, 40, 60, 80],
+      [0, 50],
+      [0]
+    ])
+  })
+
+  it('handles 700 buckets', () => {
+    const data = new Array(700).fill(0)
+    expect(
+      getSuggestedXTickValues(
+        d3.scaleLinear(getXDomain(data.length), anyRange),
+        data.length
+      )
+    ).toEqual([
+      [0, 100, 200, 300, 400, 500, 600],
+      [0, 200, 400, 600],
+      [0, 500]
+    ])
+  })
+})