Skip to content

Commit 17bf174

Browse files
ploucplouc
committedSep 7, 2021
feat(radar): fix new typings
·
v0.88.0v0.74.0
1 parent 113a6e2 commit 17bf174

16 files changed

+171
-131
lines changed
 

‎packages/radar/src/Radar.tsx

+13-12
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ const InnerRadar = <D extends Record<string, unknown>>({
2020
indexBy,
2121
layers = svgDefaultProps.layers,
2222
maxValue = svgDefaultProps.maxValue,
23+
valueFormat,
2324
curve = svgDefaultProps.curve,
2425
margin: partialMargin,
2526
width,
@@ -32,19 +33,17 @@ const InnerRadar = <D extends Record<string, unknown>>({
3233
gridLabelOffset = svgDefaultProps.gridLabelOffset,
3334
enableDots = svgDefaultProps.enableDots,
3435
dotSymbol,
35-
dotSize,
36-
dotColor,
37-
dotBorderWidth,
38-
dotBorderColor,
39-
enableDotLabel,
40-
dotLabel,
41-
dotLabelFormat,
42-
dotLabelYOffset,
36+
dotSize = svgDefaultProps.dotSize,
37+
dotColor = svgDefaultProps.dotColor,
38+
dotBorderWidth = svgDefaultProps.dotBorderWidth,
39+
dotBorderColor = svgDefaultProps.dotBorderColor,
40+
enableDotLabel = svgDefaultProps.enableDotLabel,
41+
dotLabel = svgDefaultProps.dotLabel,
42+
dotLabelYOffset = svgDefaultProps.dotLabelYOffset,
4343
colors = svgDefaultProps.colors,
4444
fillOpacity = svgDefaultProps.fillOpacity,
4545
blendMode = svgDefaultProps.blendMode,
4646
isInteractive = svgDefaultProps.isInteractive,
47-
tooltipFormat,
4847
legends = svgDefaultProps.legends,
4948
role,
5049
ariaLabel,
@@ -60,6 +59,7 @@ const InnerRadar = <D extends Record<string, unknown>>({
6059
const {
6160
getIndex,
6261
indices,
62+
formatValue,
6363
colorByKey,
6464
radius,
6565
radiusScale,
@@ -73,6 +73,7 @@ const InnerRadar = <D extends Record<string, unknown>>({
7373
keys,
7474
indexBy,
7575
maxValue,
76+
valueFormat,
7677
curve,
7778
width: innerWidth,
7879
height: innerHeight,
@@ -89,7 +90,7 @@ const InnerRadar = <D extends Record<string, unknown>>({
8990
if (layers.includes('grid')) {
9091
layerById.grid = (
9192
<g key="grid" transform={`translate(${centerX}, ${centerY})`}>
92-
<RadarGrid<D>
93+
<RadarGrid
9394
levels={gridLevels}
9495
shape={gridShape}
9596
radius={radius}
@@ -141,7 +142,7 @@ const InnerRadar = <D extends Record<string, unknown>>({
141142
borderColor={dotBorderColor}
142143
enableLabel={enableDotLabel}
143144
label={dotLabel}
144-
labelFormat={dotLabelFormat}
145+
formatValue={formatValue}
145146
labelYOffset={dotLabelYOffset}
146147
/>
147148
</g>
@@ -182,10 +183,10 @@ const InnerRadar = <D extends Record<string, unknown>>({
182183
data={data}
183184
keys={keys}
184185
getIndex={getIndex}
186+
formatValue={formatValue}
185187
colorByKey={colorByKey}
186188
radius={radius}
187189
angleStep={angleStep}
188-
tooltipFormat={tooltipFormat}
189190
/>
190191
</g>
191192
)}

‎packages/radar/src/RadarDots.tsx

+25-39
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,31 @@
1-
import { useMemo, ReactNode } from 'react'
1+
import { useMemo } from 'react'
2+
import { ScaleLinear } from 'd3-scale'
23
import {
34
useTheme,
45
positionFromAngle,
56
// @ts-ignore: core package should be converted to TypeScript
6-
getLabelGenerator,
7-
// @ts-ignore: core package should be converted to TypeScript
87
DotsItem,
8+
usePropertyAccessor,
99
} from '@nivo/core'
10-
import { InheritedColorConfig, getInheritedColorGenerator } from '@nivo/colors'
11-
import { RadarCommonProps, RadarDataProps } from './types'
12-
import { ScaleLinear } from 'd3-scale'
10+
import { getInheritedColorGenerator } from '@nivo/colors'
11+
import { RadarCommonProps, RadarDataProps, PointProps, PointData, RadarColorMapping } from './types'
1312

1413
interface RadarDotsProps<D extends Record<string, unknown>> {
1514
data: RadarDataProps<D>['data']
1615
keys: RadarDataProps<D>['keys']
1716
radiusScale: ScaleLinear<number, number>
1817
getIndex: (d: D) => string | number
19-
colorByKey: Record<string | number, string>
18+
colorByKey: RadarColorMapping
2019
angleStep: number
21-
symbol?: RadarCommonProps<D>['dotSymbol']
22-
size?: number
23-
color?: InheritedColorConfig<any>
24-
borderWidth?: number
25-
borderColor?: InheritedColorConfig<any>
26-
enableLabel?: boolean
27-
// label: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
28-
// labelFormat: PropTypes.string,
29-
labelYOffset?: number
30-
}
31-
32-
interface Point {
33-
key: string
34-
label: ReactNode | null
35-
data: {
36-
index: string | number
37-
key: string | number
38-
value: number
39-
color: string
40-
}
41-
style: {
42-
fill: string
43-
stroke: string
44-
x: number
45-
y: number
46-
}
20+
symbol?: RadarCommonProps['dotSymbol']
21+
size: number
22+
color: RadarCommonProps['dotColor']
23+
borderWidth: number
24+
borderColor: RadarCommonProps['dotBorderColor']
25+
enableLabel: boolean
26+
label: RadarCommonProps['dotLabel']
27+
formatValue: (value: number) => string
28+
labelYOffset: number
4729
}
4830

4931
export const RadarDots = <D extends Record<string, unknown>>({
@@ -60,25 +42,29 @@ export const RadarDots = <D extends Record<string, unknown>>({
6042
borderColor = { from: 'color' },
6143
enableLabel = false,
6244
label = 'value',
63-
labelFormat,
45+
formatValue,
6446
labelYOffset,
6547
}: RadarDotsProps<D>) => {
6648
const theme = useTheme()
6749
const fillColor = getInheritedColorGenerator(color, theme)
6850
const strokeColor = getInheritedColorGenerator(borderColor, theme)
69-
const getLabel = getLabelGenerator(label, labelFormat)
51+
const getLabel = usePropertyAccessor<PointData, string | number>(label)
7052

71-
const points: Point[] = useMemo(
53+
const points: PointProps[] = useMemo(
7254
() =>
7355
data.reduce((acc, datum, i) => {
7456
const index = getIndex(datum)
7557
keys.forEach(key => {
76-
const pointData: Point['data'] = {
58+
const value = datum[key] as number
59+
60+
const pointData: PointData = {
7761
index,
7862
key,
79-
value: datum[key] as number,
63+
value,
64+
formattedValue: formatValue(value),
8065
color: colorByKey[key],
8166
}
67+
8268
acc.push({
8369
key: `${key}.${index}`,
8470
label: enableLabel ? getLabel(pointData) : null,
@@ -95,7 +81,7 @@ export const RadarDots = <D extends Record<string, unknown>>({
9581
})
9682

9783
return acc
98-
}, [] as Point[]),
84+
}, [] as PointProps[]),
9985
[
10086
data,
10187
getIndex,

‎packages/radar/src/RadarGrid.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,25 @@ import { RadarGridLabels } from './RadarGridLabels'
44
import { RadarGridLevels } from './RadarGridLevels'
55
import { GridLabelComponent, RadarCommonProps } from './types'
66

7-
interface RadarGridProps<D extends Record<string, unknown>> {
7+
interface RadarGridProps {
88
indices: string[] | number[]
9-
shape: RadarCommonProps<D>['gridShape']
9+
shape: RadarCommonProps['gridShape']
1010
radius: number
1111
levels: number
1212
angleStep: number
1313
label: GridLabelComponent
1414
labelOffset: number
1515
}
1616

17-
export const RadarGrid = <D extends Record<string, unknown>>({
17+
export const RadarGrid = ({
1818
indices,
1919
levels,
2020
shape,
2121
radius,
2222
angleStep,
2323
label,
2424
labelOffset,
25-
}: RadarGridProps<D>) => {
25+
}: RadarGridProps) => {
2626
const theme = useTheme()
2727
const { radii, angles } = useMemo(() => {
2828
return {

‎packages/radar/src/RadarGridLevels.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ const RadarGridLevelLinear = ({ radius, angleStep, dataLength }: RadarGridLevelL
5252
}
5353

5454
interface RadarGridLevelsProps {
55-
shape: RadarCommonProps<any>['gridShape']
55+
shape: RadarCommonProps['gridShape']
5656
radius: number
5757
angleStep: number
5858
dataLength: number

‎packages/radar/src/RadarShapes.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,10 @@ interface RadarShapesProps<D extends Record<string, unknown>> {
1313
radiusScale: ScaleLinear<number, number>
1414
angleStep: number
1515
curveFactory: CurveFactory
16-
borderWidth: RadarCommonProps<D>['borderWidth']
17-
borderColor: RadarCommonProps<D>['borderColor']
18-
fillOpacity: RadarCommonProps<D>['fillOpacity']
19-
blendMode: RadarCommonProps<D>['blendMode']
16+
borderWidth: RadarCommonProps['borderWidth']
17+
borderColor: RadarCommonProps['borderColor']
18+
fillOpacity: RadarCommonProps['fillOpacity']
19+
blendMode: RadarCommonProps['blendMode']
2020
}
2121

2222
export const RadarShapes = <D extends Record<string, unknown>>({

‎packages/radar/src/RadarTooltip.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,20 @@ interface RadarTooltipProps<D extends Record<string, unknown>> {
66
data: RadarDataProps<D>['data']
77
keys: RadarDataProps<D>['keys']
88
getIndex: (d: D) => string | number
9+
formatValue: (value: number) => string
910
colorByKey: Record<string | number, string>
1011
radius: number
1112
angleStep: number
12-
tooltipFormat: any
1313
}
1414

1515
export const RadarTooltip = <D extends Record<string, unknown>>({
1616
data,
1717
keys,
1818
getIndex,
19+
formatValue,
1920
colorByKey,
2021
radius,
2122
angleStep,
22-
tooltipFormat,
2323
}: RadarTooltipProps<D>) => {
2424
const arc = d3Arc<{ startAngle: number; endAngle: number }>().outerRadius(radius).innerRadius(0)
2525

@@ -41,12 +41,12 @@ export const RadarTooltip = <D extends Record<string, unknown>>({
4141
datum={d}
4242
keys={keys}
4343
index={index}
44+
formatValue={formatValue}
4445
colorByKey={colorByKey}
4546
startAngle={startAngle}
4647
endAngle={endAngle}
4748
radius={radius}
4849
arcGenerator={arc}
49-
tooltipFormat={tooltipFormat}
5050
/>
5151
)
5252
})}

‎packages/radar/src/RadarTooltipItem.tsx

+16-10
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,55 @@
1-
import { useMemo, useState, useCallback } from 'react'
1+
import { useMemo, useState, useCallback, ReactNode } from 'react'
22
import { Arc } from 'd3-shape'
3-
import { positionFromAngle, useTheme, useValueFormatter } from '@nivo/core'
3+
import { positionFromAngle, useTheme } from '@nivo/core'
44
import { TableTooltip, Chip, useTooltip } from '@nivo/tooltip'
55
import { RadarDataProps } from './types'
66

77
interface RadarTooltipItemProps<D extends Record<string, unknown>> {
88
datum: D
99
keys: RadarDataProps<D>['keys']
1010
index: string | number
11+
formatValue: (value: number) => string
1112
colorByKey: Record<string | number, string>
1213
startAngle: number
1314
endAngle: number
1415
radius: number
1516
arcGenerator: Arc<any, { startAngle: number; endAngle: number }>
16-
tooltipFormat: any
1717
}
1818

19+
type TooltipRow = [ReactNode, string | number, number | string]
20+
1921
export const RadarTooltipItem = <D extends Record<string, unknown>>({
2022
datum,
2123
keys,
2224
index,
25+
formatValue,
2326
colorByKey,
2427
radius,
2528
startAngle,
2629
endAngle,
2730
arcGenerator,
28-
tooltipFormat,
2931
}: RadarTooltipItemProps<D>) => {
3032
const [isHover, setIsHover] = useState(false)
3133
const theme = useTheme()
3234
const { showTooltipFromEvent, hideTooltip } = useTooltip()
3335

34-
const tooltipFormatter = useValueFormatter(tooltipFormat)
3536
const tooltip = useMemo(() => {
36-
const rows = keys.map(key => [
37+
// first use number values to be able to sort
38+
const rows: TooltipRow[] = keys.map(key => [
3739
<Chip key={key} color={colorByKey[key]} />,
3840
key,
39-
tooltipFormatter(datum[key], key),
41+
datum[key] as number,
4042
])
41-
// sorting won't work if values are formatted to string
42-
rows.sort((a, b) => a[2] - b[2])
43+
rows.sort((a, b) => (a[2] as number) - (b[2] as number))
4344
rows.reverse()
4445

46+
// then replace with formatted values
47+
rows.forEach(row => {
48+
row[2] = formatValue(row[2] as number)
49+
})
50+
4551
return <TableTooltip title={<strong>{index}</strong>} rows={rows} />
46-
}, [datum, keys, index, colorByKey, theme, tooltipFormatter])
52+
}, [datum, keys, index, formatValue, colorByKey, theme])
4753
const showItemTooltip = useCallback(
4854
event => {
4955
setIsHover(true)

0 commit comments

Comments
 (0)
Please sign in to comment.