Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
feat(chord): migrate ribbons and arcs transitions to react-spring
  • Loading branch information
plouc committed Jan 1, 2022
1 parent 16c316b commit 458ba58
Show file tree
Hide file tree
Showing 15 changed files with 382 additions and 410 deletions.
108 changes: 0 additions & 108 deletions packages/chord/_old_index.d.ts

This file was deleted.

1 change: 1 addition & 0 deletions packages/chord/package.json
Expand Up @@ -33,6 +33,7 @@
"@nivo/colors": "0.77.0",
"@nivo/legends": "0.77.0",
"@nivo/tooltip": "0.77.0",
"@react-spring/web": "9.3.1",
"d3-chord": "^1.0.6",
"d3-shape": "^1.3.5",
"lodash": "^4.17.21",
Expand Down
6 changes: 2 additions & 4 deletions packages/chord/src/Chord.tsx
Expand Up @@ -97,9 +97,7 @@ const InnerChord = ({
})

const theme = useTheme()
const getLabelTextColor = useInheritedColor(labelTextColor, theme)
const getArcBorderColor = useInheritedColor(arcBorderColor, theme)
const getRibbonBorderColor = useInheritedColor(ribbonBorderColor, theme)

const customLayerProps = useCustomLayerProps({
center,
Expand Down Expand Up @@ -132,7 +130,7 @@ const InnerChord = ({
ribbons={ribbons}
ribbonGenerator={ribbonGenerator}
borderWidth={ribbonBorderWidth}
getBorderColor={getRibbonBorderColor}
borderColor={ribbonBorderColor}
getOpacity={getRibbonOpacity}
blendMode={ribbonBlendMode}
setCurrent={setCurrentRibbon}
Expand Down Expand Up @@ -175,7 +173,7 @@ const InnerChord = ({
arcs={arcs}
radius={radius + labelOffset}
rotation={labelRotation}
getColor={getLabelTextColor}
color={labelTextColor}
/>
</g>
)
Expand Down
6 changes: 3 additions & 3 deletions packages/chord/src/ChordArc.tsx
@@ -1,12 +1,12 @@
import { createElement, memo, useMemo, MouseEvent } from 'react'
import { useTooltip } from '@nivo/tooltip'
import { ArcDatum, ChordCommonProps } from './types'
import { ArcDatum, ArcGenerator, ChordCommonProps } from './types'

interface ChordArcProps {
arc: ArcDatum
startAngle: number
endAngle: number
arcGenerator: any
arcGenerator: ArcGenerator
borderWidth: number
getBorderColor: (arc: ArcDatum) => string
opacity: number
Expand Down Expand Up @@ -75,7 +75,7 @@ export const ChordArc = memo(

return (
<path
d={arcGenerator({ startAngle, endAngle })}
d={arcGenerator({ startAngle, endAngle }) || ''}
fill={arc.color}
fillOpacity={opacity}
strokeWidth={borderWidth}
Expand Down
4 changes: 2 additions & 2 deletions packages/chord/src/ChordArcs.tsx
Expand Up @@ -3,11 +3,11 @@ import { TransitionMotion, spring } from 'react-motion'
import { interpolateColor } from '@nivo/colors'
import { useMotionConfig } from '@nivo/core'
import { ChordArc } from './ChordArc'
import { ArcDatum, ChordCommonProps } from './types'
import { ArcDatum, ArcGenerator, ChordCommonProps } from './types'

interface ChordArcsProps {
arcs: ArcDatum[]
arcGenerator: any
arcGenerator: ArcGenerator
borderWidth: ChordCommonProps['arcBorderWidth']
getBorderColor: (arc: ArcDatum) => string
getOpacity: (arc: ArcDatum) => number
Expand Down
11 changes: 5 additions & 6 deletions packages/chord/src/ChordCanvas.tsx
Expand Up @@ -2,7 +2,9 @@ import { createElement, useRef, useEffect, useCallback, MouseEvent } from 'react
import {
useDimensions,
useTheme,
// @ts-ignore
midAngle,
// @ts-ignore
getPolarLabelProps,
degreesToRadians,
getRelativeCursor,
Expand Down Expand Up @@ -38,7 +40,7 @@ const getArcFromMouseEvent = ({
const centerX = margin.left + center[0]
const centerY = margin.top + center[1]

return findArcUnderCursor(centerX, centerY, radius, innerRadius, arcs, x, y)
return findArcUnderCursor(centerX, centerY, radius, innerRadius, arcs as any[], x, y)
}

type InnerChordCanvasProps = Omit<ChordCanvasProps, 'renderWrapper' | 'theme'>
Expand Down Expand Up @@ -156,10 +158,7 @@ const InnerChordCanvas = ({
ctx.fill()

if (ribbonBorderWidth > 0) {
ctx.strokeStyle = getRibbonBorderColor({
...ribbon,
color: ribbon.source.color,
})
ctx.strokeStyle = getRibbonBorderColor(ribbon.source)
ctx.lineWidth = ribbonBorderWidth
ctx.stroke()
}
Expand Down Expand Up @@ -214,7 +213,7 @@ const InnerChordCanvas = ({

ctx.textAlign = props.align
ctx.textBaseline = props.baseline
ctx.fillStyle = getLabelTextColor(arc, theme)
ctx.fillStyle = getLabelTextColor(arc)
ctx.fillText(arc.label, 0, 0)

ctx.restore()
Expand Down

0 comments on commit 458ba58

Please sign in to comment.