From dc14edad264f94c3672bad32b7ca1321e838570c Mon Sep 17 00:00:00 2001 From: Marshall Polaris Date: Mon, 26 Sep 2022 16:32:47 -0700 Subject: [PATCH] Add `AreaWithTopStroke` helper --- web/components/charts/generic-charts.tsx | 35 ++++--------------- web/components/charts/helpers.tsx | 43 +++++++++++++++++++++--- 2 files changed, 44 insertions(+), 34 deletions(-) diff --git a/web/components/charts/generic-charts.tsx b/web/components/charts/generic-charts.tsx index a34803b4..d16de1cb 100644 --- a/web/components/charts/generic-charts.tsx +++ b/web/components/charts/generic-charts.tsx @@ -15,7 +15,7 @@ import { import { range } from 'lodash' import dayjs from 'dayjs' -import { SVGChart, LinePath, AreaPath } from './helpers' +import { SVGChart, AreaPath, AreaWithTopStroke } from './helpers' import { formatLargeNumber } from 'common/util/format' import { useEvent } from 'web/hooks/use-event' @@ -90,21 +90,13 @@ export const SingleValueDistributionChart = (props: { className="pointer-events-none absolute z-10 whitespace-pre rounded border-2 border-black bg-slate-600/75 p-2 text-white" /> - - @@ -158,13 +150,6 @@ export const MultiValueHistoryChart = (props: { {d3Stack(data).map((s, i) => ( - - - diff --git a/web/components/charts/helpers.tsx b/web/components/charts/helpers.tsx index 3054b146..09435817 100644 --- a/web/components/charts/helpers.tsx +++ b/web/components/charts/helpers.tsx @@ -1,5 +1,13 @@ import { ReactNode, SVGProps, memo, useRef, useEffect } from 'react' -import { Axis, AxisDomain, CurveFactory, area, line, select } from 'd3' +import { + Axis, + AxisDomain, + CurveFactory, + area, + curveStepAfter, + line, + select, +} from 'd3' import dayjs from 'dayjs' import { Contract } from 'common/contract' @@ -50,11 +58,11 @@ const LinePathInternal = ( data: P[] px: number | ((p: P) => number) py: number | ((p: P) => number) - curve: CurveFactory + curve?: CurveFactory } & SVGProps ) => { const { data, px, py, curve, ...rest } = props - const d3Line = line

(px, py).curve(curve) + const d3Line = line

(px, py).curve(curve ?? curveStepAfter) // eslint-disable-next-line @typescript-eslint/no-non-null-assertion return } @@ -66,16 +74,41 @@ const AreaPathInternal = ( px: number | ((p: P) => number) py0: number | ((p: P) => number) py1: number | ((p: P) => number) - curve: CurveFactory + curve?: CurveFactory } & SVGProps ) => { const { data, px, py0, py1, curve, ...rest } = props - const d3Area = area

(px, py0, py1).curve(curve) + const d3Area = area

(px, py0, py1).curve(curve ?? curveStepAfter) // eslint-disable-next-line @typescript-eslint/no-non-null-assertion return } export const AreaPath = memo(AreaPathInternal) as typeof AreaPathInternal +export const AreaWithTopStroke = (props: { + color: string + data: P[] + px: number | ((p: P) => number) + py0: number | ((p: P) => number) + py1: number | ((p: P) => number) + curve?: CurveFactory +}) => { + const { color, data, px, py0, py1, curve } = props + return ( + + + + + ) +} + export const SVGChart = (props: { children: ReactNode w: number