Skip to content

Commit e0adf5a

Browse files
ploucplouc
committedSep 7, 2021
feat(radar): restrict data to objects
·
v0.88.0v0.74.0
1 parent 17bf174 commit e0adf5a

File tree

12 files changed

+43
-42
lines changed

12 files changed

+43
-42
lines changed
 

‎packages/core/index.d.ts

+11-6
Original file line numberDiff line numberDiff line change
@@ -382,13 +382,18 @@ declare module '@nivo/core' {
382382
y: number
383383
}
384384

385-
export type ValueFormat<Value> =
386-
// d3 formatter
387-
| string
385+
export type ValueFormat<Value, Context = never> =
386+
| string // d3 formatter
388387
// explicit formatting function
389-
| ((value: Value) => string)
390-
export function getValueFormatter<Value>(format?: ValueFormat<Value>): (value: Value) => string
391-
export function useValueFormatter<Value>(format?: ValueFormat<Value>): (value: Value) => string
388+
| Context extends never
389+
? (value: Value) => string
390+
: (value: Value, context: Context) => string
391+
export function getValueFormatter<Value, Context = never>(
392+
format?: ValueFormat<Value>
393+
): Context extends never ? (value: Value) => string : (value: Value, context: Context) => string
394+
export function useValueFormatter<Value, Context = never>(
395+
format?: ValueFormat<Value>
396+
): Context extends never ? (value: Value) => string : (value: Value, context: Context) => string
392397

393398
export type PropertyAccessor<Datum, Value> =
394399
// path to use with `lodash.get()`

‎packages/core/src/hooks/useValueFormatter.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export const getValueFormatter = format => {
1717
}
1818

1919
// no formatting
20-
return v => `${v}`
20+
return value => `${value}`
2121
}
2222

2323
export const useValueFormatter = format => useMemo(() => getValueFormatter(format), [format])

‎packages/radar/src/RadarDots.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ interface RadarDotsProps<D extends Record<string, unknown>> {
1414
data: RadarDataProps<D>['data']
1515
keys: RadarDataProps<D>['keys']
1616
radiusScale: ScaleLinear<number, number>
17-
getIndex: (d: D) => string | number
17+
getIndex: (d: D) => string
1818
colorByKey: RadarColorMapping
1919
angleStep: number
2020
symbol?: RadarCommonProps['dotSymbol']
@@ -24,7 +24,7 @@ interface RadarDotsProps<D extends Record<string, unknown>> {
2424
borderColor: RadarCommonProps['dotBorderColor']
2525
enableLabel: boolean
2626
label: RadarCommonProps['dotLabel']
27-
formatValue: (value: number) => string
27+
formatValue: (value: number, context: string) => string
2828
labelYOffset: number
2929
}
3030

@@ -61,7 +61,7 @@ export const RadarDots = <D extends Record<string, unknown>>({
6161
index,
6262
key,
6363
value,
64-
formattedValue: formatValue(value),
64+
formattedValue: formatValue(value, key),
6565
color: colorByKey[key],
6666
}
6767

‎packages/radar/src/RadarGrid.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { RadarGridLevels } from './RadarGridLevels'
55
import { GridLabelComponent, RadarCommonProps } from './types'
66

77
interface RadarGridProps {
8-
indices: string[] | number[]
8+
indices: string[]
99
shape: RadarCommonProps['gridShape']
1010
radius: number
1111
levels: number

‎packages/radar/src/RadarGridLabels.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const textAnchorFromAngle = (_angle: number) => {
1414
interface RadarGridLabelsProps {
1515
radius: number
1616
angles: number[]
17-
indices: string[] | number[]
17+
indices: string[]
1818
label: GridLabelComponent
1919
labelOffset: number
2020
}

‎packages/radar/src/RadarShapes.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { RadarCommonProps } from './types'
88

99
interface RadarShapesProps<D extends Record<string, unknown>> {
1010
data: D[]
11-
item: string | number
11+
item: string
1212
colorByKey: Record<string | number, string>
1313
radiusScale: ScaleLinear<number, number>
1414
angleStep: number

‎packages/radar/src/RadarTooltip.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import { arc as d3Arc } from 'd3-shape'
22
import { RadarTooltipItem } from './RadarTooltipItem'
3-
import { RadarDataProps } from './types'
3+
import { RadarColorMapping, RadarDataProps } from './types'
44

55
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
10-
colorByKey: Record<string | number, string>
9+
formatValue: (value: number, context: string) => string
10+
colorByKey: RadarColorMapping
1111
radius: number
1212
angleStep: number
1313
}

‎packages/radar/src/RadarTooltipItem.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,15 @@ interface RadarTooltipItemProps<D extends Record<string, unknown>> {
88
datum: D
99
keys: RadarDataProps<D>['keys']
1010
index: string | number
11-
formatValue: (value: number) => string
12-
colorByKey: Record<string | number, string>
11+
formatValue: (value: number, context: string) => string
12+
colorByKey: Record<string, string>
1313
startAngle: number
1414
endAngle: number
1515
radius: number
1616
arcGenerator: Arc<any, { startAngle: number; endAngle: number }>
1717
}
1818

19-
type TooltipRow = [ReactNode, string | number, number | string]
19+
type TooltipRow = [ReactNode, string, number | string]
2020

2121
export const RadarTooltipItem = <D extends Record<string, unknown>>({
2222
datum,
@@ -45,7 +45,7 @@ export const RadarTooltipItem = <D extends Record<string, unknown>>({
4545

4646
// then replace with formatted values
4747
rows.forEach(row => {
48-
row[2] = formatValue(row[2] as number)
48+
row[2] = formatValue(row[2] as number, row[1])
4949
})
5050

5151
return <TableTooltip title={<strong>{index}</strong>} rows={rows} />

‎packages/radar/src/hooks.ts

+5-5
Original file line numberDiff line numberDiff line change
@@ -26,14 +26,14 @@ export const useRadar = <D extends Record<string, unknown>>({
2626
height: number
2727
colors: RadarCommonProps['colors']
2828
}) => {
29-
const getIndex = usePropertyAccessor<D, string | number>(indexBy)
30-
const indices = useMemo(() => data.map(getIndex), [data, getIndex]) as string[] | number[]
31-
const formatValue = useValueFormatter<number>(valueFormat)
29+
const getIndex = usePropertyAccessor<D, string>(indexBy)
30+
const indices = useMemo(() => data.map(getIndex), [data, getIndex])
31+
const formatValue = useValueFormatter<number, string>(valueFormat)
3232

33-
const getColor = useOrdinalColorScale<{ key: string | number; index: number }>(colors, 'key')
33+
const getColor = useOrdinalColorScale<{ key: string; index: number }>(colors, 'key')
3434
const colorByKey: RadarColorMapping = useMemo(
3535
() =>
36-
(keys as (string | number)[]).reduce<RadarColorMapping>((mapping, key, index) => {
36+
keys.reduce<RadarColorMapping>((mapping, key, index) => {
3737
mapping[key] = getColor({ key, index })
3838
return mapping
3939
}, {}),

‎packages/radar/src/types.ts

+9-9
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,12 @@ import { LegendProps } from '@nivo/legends'
1515

1616
export interface RadarDataProps<D extends Record<string, unknown>> {
1717
data: D[]
18-
keys: string[] | number[]
19-
indexBy: PropertyAccessor<D, string | number>
18+
keys: string[]
19+
indexBy: PropertyAccessor<D, string>
2020
}
2121

2222
export interface GridLabelProps {
23-
id: string | number
23+
id: string
2424
anchor: 'start' | 'middle' | 'end'
2525
angle: number
2626
x: number
@@ -32,8 +32,8 @@ export interface GridLabelProps {
3232
export type GridLabelComponent = FunctionComponent<GridLabelProps>
3333

3434
export type PointData = {
35-
index: string | number
36-
key: string | number
35+
index: string
36+
key: string
3737
value: number
3838
formattedValue: string
3939
color: string
@@ -61,11 +61,11 @@ export type DotSymbolComponent = FunctionComponent<DotSymbolProps>
6161

6262
export type RadarLayerId = 'grid' | 'shapes' | 'dots' | 'legends'
6363

64-
export type RadarColorMapping = Record<string | number, string>
64+
export type RadarColorMapping = Record<string, string>
6565

6666
export interface RadarCommonProps {
6767
maxValue: number | 'auto'
68-
valueFormat: ValueFormat<number>
68+
valueFormat: ValueFormat<number, string>
6969

7070
layers: RadarLayerId[]
7171

@@ -90,11 +90,11 @@ export interface RadarCommonProps {
9090
dotLabelYOffset: number
9191

9292
theme: Theme
93-
colors: OrdinalColorScaleConfig<{ key: string | number; index: number }>
93+
colors: OrdinalColorScaleConfig<{ key: string; index: number }>
9494
fillOpacity: number
9595
blendMode: CssMixBlendMode
9696
borderWidth: number
97-
borderColor: InheritedColorConfig<{ key: string | number; color: string }>
97+
borderColor: InheritedColorConfig<{ key: string; color: string }>
9898

9999
isInteractive: boolean
100100
tooltipFormat: ValueFormat<number>

‎packages/radar/stories/radar.stories.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ export const WithFormattedValues = () => (
113113
export const WithFormattedValuesPerKey = () => (
114114
<Radar
115115
{...commonProperties}
116-
tooltipFormat={(value, key) => {
116+
valueFormat={(value, key) => {
117117
if (key === 'syrah') {
118118
return value + ' BitCoins'
119119
} else {

‎website/src/data/components/radar/props.ts

+3-7
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,10 @@ const props: ChartProperty[] = [
77
{
88
key: 'data',
99
group: 'Base',
10-
type: 'Array<object | Array>',
10+
type: 'Datum[]',
1111
required: true,
1212
help: 'Chart data.',
1313
description: `
14-
Chart data. If using objects indexBy & keys
15-
should be strings, if using array they
16-
should be numbers.
17-
1814
For example, given this config:
1915
\`\`\`
2016
[
@@ -35,7 +31,7 @@ const props: ChartProperty[] = [
3531
{
3632
key: 'indexBy',
3733
group: 'Base',
38-
type: 'string | number',
34+
type: 'string',
3935
required: true,
4036
help: 'Key to use to index the data.',
4137
description: `
@@ -47,7 +43,7 @@ const props: ChartProperty[] = [
4743
{
4844
key: 'keys',
4945
group: 'Base',
50-
type: 'string[] | number[]',
46+
type: 'string[]',
5147
required: true,
5248
help: 'Keys to use to determine each serie.',
5349
description: `

0 commit comments

Comments
 (0)
Please sign in to comment.