fix: [TokenDetails] Glyph placement on line chart (#4525)

* Modify line curve on token price chart to fix inconsistency on steep drops/increases and glyph placement

* Make curve required on LineChart

* Add curve to SparkLine chart

* Remove dependency: d3-curve-circlecornders - no longer used

* Drop d3-curve-circlecorner from react-app-env
Co-authored-by: gbugyis <greg@bugyis.com>

package.json

@@ -175,7 +175,6 @@
     "clsx": "^1.1.1",
     "copy-to-clipboard": "^3.2.0",
     "d3": "^7.6.1",
-    "d3-curve-circlecorners": "^0.1.6",
     "ethers": "^5.1.4",
     "firebase": "^9.1.3",
     "focus-visible": "^5.2.0",

src/components/Charts/LineChart.tsx

 import { Group } from '@visx/group'
 import { LinePath } from '@visx/shape'
 import { CurveFactory } from 'd3'
-import { radius } from 'd3-curve-circlecorners'
 import React from 'react'
 import { ReactNode } from 'react'
 import { useTheme } from 'styled-components/macro'
@@ -12,7 +11,7 @@ interface LineChartProps<T> {
   getX: (t: T) => number
   getY: (t: T) => number
   marginTop?: number
-  curve?: CurveFactory
+  curve: CurveFactory
   color?: Color
   strokeWidth: number
   children?: ReactNode
@@ -37,7 +36,7 @@ function LineChart<T>({
     <svg width={width} height={height}>
       <Group top={marginTop}>
         <LinePath
-          curve={curve ?? radius(0.25)}
+          curve={curve}
           stroke={color ?? theme.accentAction}
           strokeWidth={strokeWidth}
           data={data}

src/components/Charts/SparklineChart.tsx

-import { scaleLinear } from 'd3'
+import { curveCardinalOpen, scaleLinear } from 'd3'
 import React from 'react'
 import { useTheme } from 'styled-components/macro'
 
@@ -37,6 +37,7 @@ function SparklineChart({ width, height }: SparklineChartProps) {
       data={pricePoints}
       getX={(p: PricePoint) => timeScale(p.timestamp)}
       getY={(p: PricePoint) => rdScale(p.value)}
+      curve={curveCardinalOpen.tension(0.9)}
       marginTop={0}
       color={isPositive ? theme.accentSuccess : theme.accentFailure}
       strokeWidth={1.5}

src/components/Tokens/TokenDetails/PriceChart.tsx

@@ -5,7 +5,7 @@ import { EventType } from '@visx/event/lib/types'
 import { GlyphCircle } from '@visx/glyph'
 import { Line } from '@visx/shape'
 import { filterTimeAtom } from 'components/Tokens/state'
-import { bisect, curveBasis, NumberValue, scaleLinear } from 'd3'
+import { bisect, curveCardinalOpen, NumberValue, scaleLinear } from 'd3'
 import { useTokenPriceQuery } from 'graphql/data/TokenPriceQuery'
 import { TimePeriod } from 'graphql/data/TopTokenQuery'
 import { useActiveLocale } from 'hooks/useActiveLocale'
@@ -232,6 +232,9 @@ export function PriceChart({ width, height, token }: PriceChartProps) {
   const crosshairEdgeMax = width * 0.85
   const crosshairAtEdge = !!crosshair && crosshair > crosshairEdgeMax
 
+  /* Default curve doesn't look good for the ALL chart */
+  const curveTension = timePeriod === TimePeriod.ALL ? 0.75 : 0.9
+
   return (
     <>
       <ChartHeader>
@@ -246,8 +249,7 @@ export function PriceChart({ width, height, token }: PriceChartProps) {
         getX={(p: PricePoint) => timeScale(p.timestamp)}
         getY={(p: PricePoint) => rdScale(p.value)}
         marginTop={margin.top}
-        /* Default curve doesn't look good for the ALL chart */
-        curve={timePeriod === TimePeriod.ALL ? curveBasis : undefined}
+        curve={curveCardinalOpen.tension(curveTension)}
         strokeWidth={2}
         width={graphWidth}
         height={graphHeight}

src/react-app-env.d.ts

@@ -26,10 +26,6 @@ declare module 'multihashes' {
   declare function toB58String(hash: Uint8Array): string
 }
 
-declare module 'd3-curve-circlecorners' {
-  declare function radius(r: number): d3.CurveFactory
-}
-
 declare module 'babel-plugin-relay/macro' {
   export { graphql as default } from 'react-relay'
 }