manifold/web/components/charts/generic-charts.tsx

import { useCallback, useMemo, useState } from 'react'
import { bisector } from 'd3-array'
import { axisBottom, axisLeft } from 'd3-axis'
import { D3BrushEvent } from 'd3-brush'
import { ScaleTime, ScaleContinuousNumeric } from 'd3-scale'
import {
  curveLinear,
  curveStepAfter,
  stack,
  stackOrderReverse,
  SeriesPoint,
} from 'd3-shape'
import { range } from 'lodash'

import {
  SVGChart,
  AreaPath,
  AreaWithTopStroke,
  TooltipContent,
  formatPct,
} from './helpers'
import { useEvent } from 'web/hooks/use-event'

export type MultiPoint<T = never> = { x: Date; y: number[]; datum?: T }
export type HistoryPoint<T = never> = { x: Date; y: number; datum?: T }
export type DistributionPoint<T = never> = { x: number; y: number; datum?: T }

const getTickValues = (min: number, max: number, n: number) => {
  const step = (max - min) / (n - 1)
  return [min, ...range(1, n - 1).map((i) => min + step * i), max]
}

export const SingleValueDistributionChart = <T,>(props: {
  data: DistributionPoint<T>[]
  w: number
  h: number
  color: string
  xScale: ScaleContinuousNumeric<number, number>
  yScale: ScaleContinuousNumeric<number, number>
  Tooltip?: TooltipContent<SingleValueDistributionTooltipProps<T>>
}) => {
  const { color, data, yScale, w, h, Tooltip } = props

  const [viewXScale, setViewXScale] =
    useState<ScaleContinuousNumeric<number, number>>()
  const xScale = viewXScale ?? props.xScale

  const px = useCallback((p: DistributionPoint<T>) => xScale(p.x), [xScale])
  const py0 = yScale(yScale.domain()[0])
  const py1 = useCallback((p: DistributionPoint<T>) => yScale(p.y), [yScale])
  const xBisector = bisector((p: DistributionPoint<T>) => p.x)

  const { xAxis, yAxis } = useMemo(() => {
    const xAxis = axisBottom<number>(xScale).ticks(w / 100)
    const yAxis = axisLeft<number>(yScale).tickFormat((n) => formatPct(n, 2))
    return { xAxis, yAxis }
  }, [w, xScale, yScale])

  const onSelect = useEvent((ev: D3BrushEvent<DistributionPoint<T>>) => {
    if (ev.selection) {
      const [mouseX0, mouseX1] = ev.selection as [number, number]
      setViewXScale(() =>
        xScale.copy().domain([xScale.invert(mouseX0), xScale.invert(mouseX1)])
      )
    } else {
      setViewXScale(undefined)
    }
  })

  const onMouseOver = useEvent((mouseX: number) => {
    const queryX = xScale.invert(mouseX)
    const item = data[xBisector.left(data, queryX) - 1]
    if (item == null) {
      // this can happen if you are on the very left or right edge of the chart,
      // so your queryX is out of bounds
      return
    }
    return { x: queryX, y: item.y, datum: item.datum }
  })

  return (
    <SVGChart
      w={w}
      h={h}
      xAxis={xAxis}
      yAxis={yAxis}
      onSelect={onSelect}
      onMouseOver={onMouseOver}
      Tooltip={Tooltip}
    >
      <AreaWithTopStroke
        color={color}
        data={data}
        px={px}
        py0={py0}
        py1={py1}
        curve={curveLinear}
      />
    </SVGChart>
  )
}

export type SingleValueDistributionTooltipProps<T = unknown> = {
  p: DistributionPoint<T>
  xScale: React.ComponentProps<typeof SingleValueDistributionChart<T>>['xScale']
}

export const MultiValueHistoryChart = <T,>(props: {
  data: MultiPoint<T>[]
  w: number
  h: number
  colors: readonly string[]
  xScale: ScaleTime<number, number>
  yScale: ScaleContinuousNumeric<number, number>
  Tooltip?: TooltipContent<MultiValueHistoryTooltipProps<T>>
  pct?: boolean
}) => {
  const { colors, data, yScale, w, h, Tooltip, pct } = props

  const [viewXScale, setViewXScale] = useState<ScaleTime<number, number>>()
  const xScale = viewXScale ?? props.xScale

  type SP = SeriesPoint<MultiPoint<T>>
  const px = useCallback((p: SP) => xScale(p.data.x), [xScale])
  const py0 = useCallback((p: SP) => yScale(p[0]), [yScale])
  const py1 = useCallback((p: SP) => yScale(p[1]), [yScale])
  const xBisector = bisector((p: MultiPoint<T>) => p.x)

  const { xAxis, yAxis } = useMemo(() => {
    const [min, max] = yScale.domain()
    const pctTickValues = getTickValues(min, max, h < 200 ? 3 : 5)
    const xAxis = axisBottom<Date>(xScale).ticks(w / 100)
    const yAxis = pct
      ? axisLeft<number>(yScale)
          .tickValues(pctTickValues)
          .tickFormat((n) => formatPct(n))
      : axisLeft<number>(yScale)
    return { xAxis, yAxis }
  }, [w, h, pct, xScale, yScale])

  const series = useMemo(() => {
    const d3Stack = stack<MultiPoint<T>, number>()
      .keys(range(0, Math.max(...data.map(({ y }) => y.length))))
      .value(({ y }, o) => y[o])
      .order(stackOrderReverse)
    return d3Stack(data)
  }, [data])

  const onSelect = useEvent((ev: D3BrushEvent<MultiPoint<T>>) => {
    if (ev.selection) {
      const [mouseX0, mouseX1] = ev.selection as [number, number]
      setViewXScale(() =>
        xScale.copy().domain([xScale.invert(mouseX0), xScale.invert(mouseX1)])
      )
    } else {
      setViewXScale(undefined)
    }
  })

  const onMouseOver = useEvent((mouseX: number) => {
    const queryX = xScale.invert(mouseX)
    const item = data[xBisector.left(data, queryX) - 1]
    if (item == null) {
      // this can happen if you are on the very left or right edge of the chart,
      // so your queryX is out of bounds
      return
    }
    return { x: queryX, y: item.y, datum: item.datum }
  })

  return (
    <SVGChart
      w={w}
      h={h}
      xAxis={xAxis}
      yAxis={yAxis}
      onSelect={onSelect}
      onMouseOver={onMouseOver}
      Tooltip={Tooltip}
    >
      {series.map((s, i) => (
        <AreaPath
          key={i}
          data={s}
          px={px}
          py0={py0}
          py1={py1}
          curve={curveStepAfter}
          fill={colors[i]}
        />
      ))}
    </SVGChart>
  )
}

export type MultiValueHistoryTooltipProps<T = unknown> = {
  p: MultiPoint<T>
  xScale: React.ComponentProps<typeof MultiValueHistoryChart<T>>['xScale']
}

export const SingleValueHistoryChart = <T,>(props: {
  data: HistoryPoint<T>[]
  w: number
  h: number
  color: string
  xScale: ScaleTime<number, number>
  yScale: ScaleContinuousNumeric<number, number>
  Tooltip?: TooltipContent<SingleValueHistoryTooltipProps<T>>
  pct?: boolean
}) => {
  const { color, data, pct, yScale, w, h, Tooltip } = props

  const [viewXScale, setViewXScale] = useState<ScaleTime<number, number>>()
  const xScale = viewXScale ?? props.xScale

  const px = useCallback((p: HistoryPoint<T>) => xScale(p.x), [xScale])
  const py0 = yScale(yScale.domain()[0])
  const py1 = useCallback((p: HistoryPoint<T>) => yScale(p.y), [yScale])
  const xBisector = bisector((p: HistoryPoint<T>) => p.x)

  const { xAxis, yAxis } = useMemo(() => {
    const [min, max] = yScale.domain()
    const pctTickValues = getTickValues(min, max, h < 200 ? 3 : 5)
    const xAxis = axisBottom<Date>(xScale).ticks(w / 100)
    const yAxis = pct
      ? axisLeft<number>(yScale)
          .tickValues(pctTickValues)
          .tickFormat((n) => formatPct(n))
      : axisLeft<number>(yScale)
    return { xAxis, yAxis }
  }, [w, h, pct, xScale, yScale])

  const onSelect = useEvent((ev: D3BrushEvent<HistoryPoint<T>>) => {
    if (ev.selection) {
      const [mouseX0, mouseX1] = ev.selection as [number, number]
      setViewXScale(() =>
        xScale.copy().domain([xScale.invert(mouseX0), xScale.invert(mouseX1)])
      )
    } else {
      setViewXScale(undefined)
    }
  })

  const onMouseOver = useEvent((mouseX: number) => {
    const queryX = xScale.invert(mouseX)
    const item = data[xBisector.left(data, queryX) - 1]
    if (item == null) {
      // this can happen if you are on the very left or right edge of the chart,
      // so your queryX is out of bounds
      return
    }
    return { x: queryX, y: item.y, datum: item.datum }
  })

  return (
    <SVGChart
      w={w}
      h={h}
      xAxis={xAxis}
      yAxis={yAxis}
      onSelect={onSelect}
      onMouseOver={onMouseOver}
      Tooltip={Tooltip}
    >
      <AreaWithTopStroke
        color={color}
        data={data}
        px={px}
        py0={py0}
        py1={py1}
        curve={curveStepAfter}
      />
    </SVGChart>
  )
}

export type SingleValueHistoryTooltipProps<T = unknown> = {
  p: HistoryPoint<T>
  xScale: React.ComponentProps<typeof SingleValueHistoryChart<T>>['xScale']
}