Skip to content

Commit a91066f

Browse files
ploucplouc
committedJan 12, 2022
feat(heatmap): fix the http API documentation
·
v0.88.0v0.79.0
1 parent 937604c commit a91066f

File tree

12 files changed

+92
-98
lines changed

12 files changed

+92
-98
lines changed
 

‎packages/axes/src/canvas.ts

+7-7
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { degreesToRadians, CompleteTheme } from '@nivo/core'
22
import { ScaleValue, AnyScale, TicksSpec } from '@nivo/scales'
33
import { computeCartesianTicks, getFormatter, computeGridLines } from './compute'
44
import { positions } from './props'
5-
import { AxisLegendPosition, CanvasAxisProp, ValueFormatter } from './types'
5+
import { AxisLegendPosition, CanvasAxisProps, ValueFormatter } from './types'
66

77
export const renderAxisToCanvas = <Value extends ScaleValue>(
88
ctx: CanvasRenderingContext2D,
@@ -176,19 +176,19 @@ export const renderAxesToCanvas = <X extends ScaleValue, Y extends ScaleValue>(
176176
yScale: AnyScale
177177
width: number
178178
height: number
179-
top?: CanvasAxisProp<X> | null
180-
right?: CanvasAxisProp<Y> | null
181-
bottom?: CanvasAxisProp<X> | null
182-
left?: CanvasAxisProp<Y> | null
179+
top?: CanvasAxisProps<X> | null
180+
right?: CanvasAxisProps<Y> | null
181+
bottom?: CanvasAxisProps<X> | null
182+
left?: CanvasAxisProps<Y> | null
183183
theme: CompleteTheme
184184
}
185185
) => {
186186
const axes = { top, right, bottom, left }
187187

188188
positions.forEach(position => {
189189
const axis = axes[position] as typeof position extends 'bottom' | 'top'
190-
? CanvasAxisProp<X> | undefined
191-
: CanvasAxisProp<Y> | undefined
190+
? CanvasAxisProps<X> | undefined
191+
: CanvasAxisProps<Y> | undefined
192192

193193
if (!axis) return null
194194

‎packages/axes/src/types.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,8 @@ export interface AxisProps<Value extends ScaleValue = any> {
3535
ariaHidden?: boolean
3636
}
3737

38-
export interface CanvasAxisProp<Value extends ScaleValue> extends Omit<AxisProps<Value>, 'legend'> {
38+
export interface CanvasAxisProps<Value extends ScaleValue = any>
39+
extends Omit<AxisProps<Value>, 'legend'> {
3940
legend?: string
4041
}
4142

‎packages/bar/src/types.ts

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react'
22
import { AnnotationMatcher } from '@nivo/annotations'
3-
import { AxisProps, CanvasAxisProp, GridValues } from '@nivo/axes'
3+
import { AxisProps, CanvasAxisProps, GridValues } from '@nivo/axes'
44
import {
55
Box,
66
CartesianMarkerProps,
@@ -289,10 +289,10 @@ export type BarCanvasProps<RawDatum extends BarDatum> = Partial<BarCommonProps<R
289289
BarHandlers<RawDatum, HTMLCanvasElement> &
290290
Dimensions &
291291
Partial<{
292-
axisBottom: CanvasAxisProp<any>
293-
axisLeft: CanvasAxisProp<any>
294-
axisRight: CanvasAxisProp<any>
295-
axisTop: CanvasAxisProp<any>
292+
axisBottom: CanvasAxisProps<any>
293+
axisLeft: CanvasAxisProps<any>
294+
axisRight: CanvasAxisProps<any>
295+
axisTop: CanvasAxisProps<any>
296296

297297
renderBar: (context: CanvasRenderingContext2D, props: RenderBarProps<RawDatum>) => void
298298

‎packages/heatmap/src/defaults.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export const commonDefaultProps: Omit<
2222
xOuterPadding: 0,
2323
yInnerPadding: 0,
2424
yOuterPadding: 0,
25-
sizeVariation: 0,
25+
sizeVariation: false,
2626

2727
opacity: 1,
2828
activeOpacity: 1,
@@ -61,7 +61,7 @@ export const svgDefaultProps = {
6161
axisBottom: null,
6262
axisLeft: {},
6363
borderRadius: 0,
64-
cellComponent: 'rect',
64+
cellComponent: 'rect' as const,
6565
}
6666

6767
export const canvasDefaultProps = {
@@ -70,6 +70,6 @@ export const canvasDefaultProps = {
7070
axisRight: null,
7171
axisBottom: null,
7272
axisLeft: {},
73-
renderCell: 'rect',
73+
renderCell: 'rect' as const,
7474
pixelRatio: typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1,
7575
}

‎packages/heatmap/src/types.ts

+11-6
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
PropertyAccessor,
1010
ValueFormat,
1111
} from '@nivo/core'
12-
import { AxisProps, CanvasAxisProp } from '@nivo/axes'
12+
import { AxisProps, CanvasAxisProps } from '@nivo/axes'
1313
import { InheritedColorConfig, ContinuousColorScaleConfig } from '@nivo/colors'
1414
import { AnchoredContinuousColorsLegendProps } from '@nivo/legends'
1515
import { AnnotationMatcher } from '@nivo/annotations'
@@ -62,6 +62,11 @@ export interface HeatMapDataProps<Datum extends HeatMapDatum, ExtraProps extends
6262
data: HeatMapSerie<Datum, ExtraProps>[]
6363
}
6464

65+
export interface SizeVariationConfig {
66+
values: [min: number, max: number]
67+
sizes: [min: number, max: number]
68+
}
69+
6570
export type LayerId = 'grid' | 'axes' | 'cells' | 'legends' | 'annotations'
6671
export interface CustomLayerProps<Datum extends HeatMapDatum> {
6772
cells: ComputedCell<Datum>[]
@@ -111,7 +116,7 @@ export type HeatMapCommonProps<Datum extends HeatMapDatum> = {
111116
margin: Box
112117

113118
forceSquare: boolean
114-
sizeVariation: number
119+
sizeVariation: false | SizeVariationConfig
115120
xInnerPadding: number
116121
xOuterPadding: number
117122
yInnerPadding: number
@@ -188,10 +193,10 @@ export type HeatMapCanvasProps<Datum extends HeatMapDatum, ExtraProps extends ob
188193
HeatMapDataProps<Datum, ExtraProps> &
189194
Dimensions &
190195
Partial<{
191-
axisTop: CanvasAxisProp<Datum['x']> | null
192-
axisRight: CanvasAxisProp<string> | null
193-
axisBottom: CanvasAxisProp<Datum['x']> | null
194-
axisLeft: CanvasAxisProp<string> | null
196+
axisTop: CanvasAxisProps<Datum['x']> | null
197+
axisRight: CanvasAxisProps<string> | null
198+
axisBottom: CanvasAxisProps<Datum['x']> | null
199+
axisLeft: CanvasAxisProps<string> | null
195200
layers: (LayerId | CustomCanvasLayer<Datum>)[]
196201
renderCell: CellShape | CellCanvasRenderer<Datum>
197202
pixelRatio: number

‎packages/scatterplot/src/ScatterPlotCanvas.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { createElement, useRef, useState, useEffect, useCallback, useMemo } from 'react'
22
import { Container, useDimensions, useTheme, getRelativeCursor, isCursorInRect } from '@nivo/core'
33
import { renderAnnotationsToCanvas } from '@nivo/annotations'
4-
import { CanvasAxisProp, renderAxesToCanvas, renderGridLinesToCanvas } from '@nivo/axes'
4+
import { CanvasAxisProps, renderAxesToCanvas, renderGridLinesToCanvas } from '@nivo/axes'
55
import { renderLegendToCanvas } from '@nivo/legends'
66
import { useTooltip } from '@nivo/tooltip'
77
import { useVoronoiMesh, renderVoronoiToCanvas, renderVoronoiCellToCanvas } from '@nivo/voronoi'
@@ -140,18 +140,18 @@ const InnerScatterPlotCanvas = <RawDatum extends ScatterPlotDatum>({
140140
yScale: yScale as any,
141141
width: innerWidth,
142142
height: innerHeight,
143-
top: axisTop as CanvasAxisProp<RawDatum['x']>,
144-
right: axisRight as CanvasAxisProp<RawDatum['y']>,
145-
bottom: axisBottom as CanvasAxisProp<RawDatum['x']>,
146-
left: axisLeft as CanvasAxisProp<RawDatum['y']>,
143+
top: axisTop as CanvasAxisProps<RawDatum['x']>,
144+
right: axisRight as CanvasAxisProps<RawDatum['y']>,
145+
bottom: axisBottom as CanvasAxisProps<RawDatum['x']>,
146+
left: axisLeft as CanvasAxisProps<RawDatum['y']>,
147147
theme,
148148
})
149149
} else if (layer === 'nodes') {
150150
nodes.forEach(node => {
151151
renderNode(ctx, node)
152152
})
153153
} else if (layer === 'mesh') {
154-
if (debugMesh === true) {
154+
if (debugMesh) {
155155
renderVoronoiToCanvas(ctx, voronoi!)
156156
if (currentNode) {
157157
renderVoronoiCellToCanvas(ctx, voronoi!, currentNode.index)

‎packages/swarmplot/src/types.ts

+5-5
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Interpolation, SpringValue } from '@react-spring/web'
33
import { ForceX, ForceY, ForceCollide } from 'd3-force'
44
import { PropertyAccessor, ValueFormat, Theme, ModernMotionProps, Box, Margin } from '@nivo/core'
55
import { InheritedColorConfig, OrdinalColorScaleConfig } from '@nivo/colors'
6-
import { AxisProps, CanvasAxisProp } from '@nivo/axes'
6+
import { AxisProps, CanvasAxisProps } from '@nivo/axes'
77
import { ScaleLinear, ScaleLinearSpec, ScaleTime, ScaleTimeSpec, TicksSpec } from '@nivo/scales'
88
import { AnnotationMatcher } from '@nivo/annotations'
99
import { ScaleOrdinal } from 'd3-scale'
@@ -143,10 +143,10 @@ export type SwarmPlotSvgProps<RawDatum> = SwarmPlotCommonProps<RawDatum> &
143143

144144
export type SwarmPlotCanvasProps<RawDatum> = SwarmPlotCommonProps<RawDatum> &
145145
Pick<MouseHandlers<RawDatum>, 'onMouseMove' | 'onClick'> & {
146-
axisTop?: CanvasAxisProp<string> | null
147-
axisRight?: CanvasAxisProp<string> | null
148-
axisBottom?: CanvasAxisProp<string> | null
149-
axisLeft?: CanvasAxisProp<string> | null
146+
axisTop?: CanvasAxisProps<string> | null
147+
axisRight?: CanvasAxisProps<string> | null
148+
axisBottom?: CanvasAxisProps<string> | null
149+
axisLeft?: CanvasAxisProps<string> | null
150150
pixelRatio: number
151151
renderCircle: (
152152
ctx: CanvasRenderingContext2D,

‎website/src/data/components/heatmap/types.ts

+9-8
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { HeatMapDataProps, HeatMapSvgProps, HeatMapCanvasProps } from '@nivo/heatmap'
2+
import { AxisWithToggle } from '../../../lib/settings'
23

34
export type Datum = {
45
x: string
@@ -21,10 +22,10 @@ export type SvgUnmappedProps = Omit<
2122
format: string
2223
enabled: boolean
2324
}
24-
axisTop: SvgMappedProps['axisTop'] & { enable: boolean }
25-
axisRight: SvgMappedProps['axisRight'] & { enable: boolean }
26-
axisBottom: SvgMappedProps['axisBottom'] & { enable: boolean }
27-
axisLeft: SvgMappedProps['axisLeft'] & { enable: boolean }
25+
axisTop: AxisWithToggle<NonNullable<SvgMappedProps['axisTop']>>
26+
axisRight: AxisWithToggle<NonNullable<SvgMappedProps['axisRight']>>
27+
axisBottom: AxisWithToggle<NonNullable<SvgMappedProps['axisBottom']>>
28+
axisLeft: AxisWithToggle<NonNullable<SvgMappedProps['axisLeft']>>
2829
legends: (Omit<LegendProps, 'tickFormat'> & {
2930
tickFormat: {
3031
format: string
@@ -51,10 +52,10 @@ export type CanvasUnmappedProps = Omit<
5152
format: string
5253
enabled: boolean
5354
}
54-
axisTop: SvgMappedProps['axisTop'] & { enable: boolean }
55-
axisRight: SvgMappedProps['axisRight'] & { enable: boolean }
56-
axisBottom: SvgMappedProps['axisBottom'] & { enable: boolean }
57-
axisLeft: SvgMappedProps['axisLeft'] & { enable: boolean }
55+
axisTop: AxisWithToggle<NonNullable<CanvasMappedProps['axisTop']>>
56+
axisRight: AxisWithToggle<NonNullable<CanvasMappedProps['axisRight']>>
57+
axisBottom: AxisWithToggle<NonNullable<CanvasMappedProps['axisBottom']>>
58+
axisLeft: AxisWithToggle<NonNullable<CanvasMappedProps['axisLeft']>>
5859
legends: (Omit<LegendProps, 'tickFormat'> & {
5960
tickFormat: {
6061
format: string

‎website/src/lib/settings.ts

+6-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import omit from 'lodash/omit'
22
import upperFirst from 'lodash/upperFirst'
3+
import { AxisProps, CanvasAxisProps } from '@nivo/axes'
34

45
export const settingsMapper =
56
(mapping: any, { exclude = [] }: { exclude?: string[] } = {}) =>
@@ -18,7 +19,11 @@ export const settingsMapper =
1819
}
1920
}
2021

21-
export const mapAxis = (type: string) => (value: any, settings: any) =>
22+
export type AxisWithToggle<Axis extends AxisProps | CanvasAxisProps> = NonNullable<Axis> & {
23+
enable: boolean
24+
}
25+
26+
export const mapAxis = (type: 'top' | 'right' | 'bottom' | 'left') => (value: any, settings: any) =>
2227
settings[`axis${upperFirst(type)}`].enable ? omit(value, ['enable']) : null
2328

2429
export const mapFormat = ({ format, enabled }: { format: string; enabled: boolean }) =>

‎website/src/pages/heatmap/api.tsx

+30-29
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
1-
import React from 'react'
1+
import React, { useMemo } from 'react'
2+
import { graphql, useStaticQuery } from 'gatsby'
3+
import { svgDefaultProps as defaults } from '@nivo/heatmap'
24
import { Seo } from '../../components/Seo'
35
import { ApiClient } from '../../components/components/api-client/ApiClient'
46
import { groups } from '../../data/components/heatmap/props'
57
import mapper from '../../data/components/heatmap/mapper'
68
import { getLightData } from '../../data/components/heatmap/generator'
79
import meta from '../../data/components/heatmap/meta.yml'
8-
import { graphql, useStaticQuery } from 'gatsby'
9-
10-
const data = getLightData()
1110

1211
const HeatMapApi = () => {
1312
const {
@@ -24,6 +23,8 @@ const HeatMapApi = () => {
2423
}
2524
`)
2625

26+
const data = useMemo(() => getLightData(), [])
27+
2728
return (
2829
<>
2930
<Seo
@@ -42,27 +43,32 @@ const HeatMapApi = () => {
4243
defaultProps={{
4344
width: 800,
4445
height: 600,
45-
data: JSON.stringify(data.data, null, ' '),
46-
keys: data.keys,
47-
indexBy: 'country',
48-
46+
data: JSON.stringify(data, null, ' '),
4947
margin: {
5048
top: 100,
5149
right: 60,
5250
bottom: 30,
5351
left: 60,
5452
},
55-
56-
minValue: 'auto',
57-
maxValue: 'auto',
58-
forceSquare: true,
59-
sizeVariation: 0.4,
60-
padding: 2,
61-
colors: 'nivo',
62-
53+
valueFormat: { format: '>-.2s', enabled: true },
54+
forceSquare: defaults.forceSquare,
55+
sizeVariation: defaults.sizeVariation,
56+
xOuterPadding: defaults.xOuterPadding,
57+
xInnerPadding: defaults.xInnerPadding,
58+
yOuterPadding: defaults.yOuterPadding,
59+
yInnerPadding: defaults.yInnerPadding,
60+
colors: {
61+
type: 'diverging',
62+
scheme: 'red_yellow_blue',
63+
divergeAt: 0.5,
64+
minValue: -100_000,
65+
maxValue: 100_000,
66+
},
67+
emptyColor: '#555555',
68+
enableGridX: false,
69+
enableGridY: true,
6370
axisTop: {
6471
enable: true,
65-
orient: 'top',
6672
tickSize: 5,
6773
tickPadding: 5,
6874
tickRotation: -55,
@@ -71,7 +77,6 @@ const HeatMapApi = () => {
7177
},
7278
axisRight: {
7379
enable: false,
74-
orient: 'right',
7580
tickSize: 5,
7681
tickPadding: 5,
7782
tickRotation: 0,
@@ -81,7 +86,6 @@ const HeatMapApi = () => {
8186
},
8287
axisBottom: {
8388
enable: false,
84-
orient: 'bottom',
8589
tickSize: 5,
8690
tickPadding: 5,
8791
tickRotation: 0,
@@ -91,31 +95,28 @@ const HeatMapApi = () => {
9195
},
9296
axisLeft: {
9397
enable: true,
94-
orient: 'left',
9598
tickSize: 5,
9699
tickPadding: 5,
97100
tickRotation: 0,
98101
legend: 'country',
99102
legendPosition: 'middle',
100103
legendOffset: -40,
101104
},
102-
103-
enableGridX: false,
104-
enableGridY: true,
105-
106-
cellShape: 'circle',
107-
cellOpacity: 1,
108-
cellBorderWidth: 0,
109-
cellBorderColor: {
105+
cellComponent: defaults.cellComponent,
106+
borderRadius: defaults.borderRadius,
107+
opacity: defaults.opacity,
108+
borderWidth: defaults.borderWidth,
109+
borderColor: {
110110
from: 'color',
111111
modifiers: [['darker', 0.4]],
112112
},
113-
114113
enableLabels: true,
115114
labelTextColor: {
116115
from: 'color',
117116
modifiers: [['darker', 1.4]],
118117
},
118+
legends: [],
119+
annotations: [],
119120
}}
120121
/>
121122
</>

‎website/src/pages/heatmap/canvas.tsx

+3-13
Original file line numberDiff line numberDiff line change
@@ -22,19 +22,15 @@ const initialProperties: CanvasUnmappedProps = {
2222
bottom: 20,
2323
left: 80,
2424
},
25-
2625
valueFormat: { format: '>-.2s', enabled: true },
27-
2826
pixelRatio:
2927
typeof window !== 'undefined' && window.devicePixelRatio ? window.devicePixelRatio : 1,
30-
3128
forceSquare: defaults.forceSquare,
32-
sizeVariation: 0,
29+
sizeVariation: defaults.sizeVariation,
3330
xOuterPadding: defaults.xOuterPadding,
3431
xInnerPadding: defaults.xInnerPadding,
3532
yOuterPadding: defaults.yOuterPadding,
3633
yInnerPadding: defaults.yInnerPadding,
37-
3834
enableGridX: false,
3935
enableGridY: false,
4036
axisTop: {
@@ -72,7 +68,6 @@ const initialProperties: CanvasUnmappedProps = {
7268
legendPosition: 'middle',
7369
legendOffset: -42,
7470
},
75-
7671
renderCell: 'rect',
7772
colors: {
7873
type: 'quantize',
@@ -87,10 +82,8 @@ const initialProperties: CanvasUnmappedProps = {
8782
inactiveOpacity: defaults.inactiveOpacity,
8883
borderWidth: 1,
8984
borderColor: '#000000',
90-
9185
enableLabels: false,
9286
labelTextColor: defaults.labelTextColor,
93-
9487
legends: [
9588
{
9689
anchor: 'left',
@@ -109,14 +102,11 @@ const initialProperties: CanvasUnmappedProps = {
109102
titleOffset: 4,
110103
},
111104
],
112-
113105
annotations: [],
114-
115-
animate: true,
116-
motionConfig: defaults.motionConfig,
117-
118106
isInteractive: true,
119107
hoverTarget: 'rowColumn',
108+
animate: true,
109+
motionConfig: defaults.motionConfig,
120110
}
121111

122112
const HeatMapCanvas = () => {

‎website/src/pages/heatmap/index.tsx

+5-14
Original file line numberDiff line numberDiff line change
@@ -22,16 +22,13 @@ const initialProperties: SvgUnmappedProps = {
2222
bottom: 60,
2323
left: 90,
2424
},
25-
2625
valueFormat: { format: '>-.2s', enabled: true },
27-
2826
forceSquare: defaults.forceSquare,
29-
sizeVariation: 0,
27+
sizeVariation: defaults.sizeVariation,
3028
xOuterPadding: defaults.xOuterPadding,
3129
xInnerPadding: defaults.xInnerPadding,
3230
yOuterPadding: defaults.yOuterPadding,
3331
yInnerPadding: defaults.yInnerPadding,
34-
3532
enableGridX: defaults.enableGridX,
3633
enableGridY: defaults.enableGridY,
3734
axisTop: {
@@ -69,7 +66,6 @@ const initialProperties: SvgUnmappedProps = {
6966
legendPosition: 'middle',
7067
legendOffset: -72,
7168
},
72-
7369
colors: {
7470
type: 'diverging',
7571
scheme: 'red_yellow_blue',
@@ -78,17 +74,15 @@ const initialProperties: SvgUnmappedProps = {
7874
maxValue: 100_000,
7975
},
8076
emptyColor: '#555555',
81-
cellComponent: 'rect',
77+
cellComponent: defaults.cellComponent,
78+
borderRadius: defaults.borderRadius,
8279
opacity: defaults.opacity,
8380
activeOpacity: defaults.activeOpacity,
8481
inactiveOpacity: defaults.inactiveOpacity,
85-
borderRadius: defaults.borderRadius,
8682
borderWidth: defaults.borderWidth,
8783
borderColor: defaults.borderColor,
88-
8984
enableLabels: defaults.enableLabels,
9085
labelTextColor: defaults.labelTextColor,
91-
9286
legends: [
9387
{
9488
anchor: 'bottom',
@@ -107,14 +101,11 @@ const initialProperties: SvgUnmappedProps = {
107101
titleOffset: 4,
108102
},
109103
],
110-
111104
annotations: defaults.annotations,
112-
113-
animate: defaults.animate,
114-
motionConfig: defaults.motionConfig,
115-
116105
isInteractive: defaults.isInteractive,
117106
hoverTarget: defaults.hoverTarget,
107+
animate: defaults.animate,
108+
motionConfig: defaults.motionConfig,
118109
}
119110

120111
const HeatMap = () => {

0 commit comments

Comments
 (0)
Please sign in to comment.