Skip to content

Commit b636e5c

Browse files
ploucplouc
committedJan 12, 2022
feat(heatmap): update the website documentation according to API changes and additions
·
v0.88.0v0.79.0
1 parent a55c272 commit b636e5c

File tree

5 files changed

+760
-300
lines changed

5 files changed

+760
-300
lines changed
 

‎website/src/data/components/heatmap/mapper.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react'
2-
import { settingsMapper, mapAxis } from '../../../lib/settings'
2+
import { settingsMapper, mapAxis, mapFormat } from '../../../lib/settings'
33

44
const CustomCell = ({
55
value,
@@ -40,6 +40,7 @@ const CustomCell = ({
4040

4141
export default settingsMapper(
4242
{
43+
valueFormat: mapFormat,
4344
cellShape: value => {
4445
if (value === `Custom(props) => (…)`) return CustomCell
4546
return value

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

+294-132
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
1-
// @ts-ignore
2-
import { HeatMapDefaultProps as defaults } from '@nivo/heatmap'
1+
import { commonDefaultProps as defaults, svgDefaultProps as svgDefaults } from '@nivo/heatmap'
32
import { themeProperty, motionProperties, groupProperties } from '../../../lib/componentProperties'
4-
import { chartDimensions, chartGrid, axes, isInteractive } from '../../../lib/chart-properties'
3+
import {
4+
chartDimensions,
5+
chartGrid,
6+
axes,
7+
isInteractive,
8+
commonAccessibilityProps,
9+
} from '../../../lib/chart-properties'
510
import { ChartProperty, Flavor } from '../../../types'
611

712
const allFlavors: Flavor[] = ['svg', 'canvas', 'api']
@@ -10,48 +15,18 @@ const props: ChartProperty[] = [
1015
{
1116
key: 'data',
1217
group: 'Base',
13-
flavors: allFlavors,
1418
help: 'Chart data.',
15-
type: 'object[]',
19+
type: 'HeatMapSerie<Datum, ExtraProps>[]',
1620
required: true,
1721
},
18-
{
19-
key: 'indexBy',
20-
group: 'Base',
21-
flavors: allFlavors,
22-
help: 'Key to use to index the data.',
23-
description: `
24-
Key to use to index the data,
25-
this key must exist in each data item.
26-
You can also provide a function which will
27-
receive the data item and must return
28-
the desired index
29-
`,
30-
type: 'string | Function',
31-
required: false,
32-
defaultValue: defaults.indexBy,
33-
},
34-
{
35-
key: 'keys',
36-
group: 'Base',
37-
flavors: allFlavors,
38-
help: 'Keys to use to determine each serie.',
39-
type: 'string[]',
40-
required: false,
41-
defaultValue: defaults.keys,
42-
},
4322
{
4423
key: 'minValue',
45-
help: 'Minimum value.',
46-
flavors: allFlavors,
4724
description: `
48-
Minimum value.
4925
If 'auto', will pick the lowest value
5026
in the provided data set. Should be overriden
5127
if your data set does not contain desired
5228
lower bound value.
5329
`,
54-
required: false,
5530
defaultValue: defaults.minValue,
5631
type: `number | 'auto'`,
5732
group: 'Base',
@@ -65,15 +40,13 @@ const props: ChartProperty[] = [
6540
},
6641
{
6742
key: 'maxValue',
68-
help: 'Maximum value.',
6943
flavors: allFlavors,
7044
description: `
71-
Maximum value. If 'auto', will pick the highest value
45+
If 'auto', will pick the highest value
7246
in the provided data set. Should be overriden
7347
if your data set does not contain desired
7448
higher bound value.
7549
`,
76-
required: false,
7750
defaultValue: defaults.maxValue,
7851
type: `number | 'auto'`,
7952
group: 'Base',
@@ -85,149 +58,176 @@ const props: ChartProperty[] = [
8558
max: 100,
8659
},
8760
},
61+
{
62+
key: 'valueFormat',
63+
group: 'Base',
64+
help: 'Optional formatter for values.',
65+
description: `
66+
The formatted value can then be used for labels & tooltips.
67+
68+
Under the hood, nivo uses [d3-format](https://github.com/d3/d3-format),
69+
please have a look at it for available formats, you can also pass a function
70+
which will receive the raw value and should return the formatted one.
71+
`,
72+
type: 'string | (value: number) => string | number',
73+
control: { type: 'valueFormat' },
74+
},
75+
...chartDimensions(allFlavors),
8876
{
8977
key: 'forceSquare',
9078
help: 'Force square cells (width = height).',
91-
flavors: allFlavors,
92-
required: false,
9379
defaultValue: defaults.forceSquare,
9480
type: 'boolean',
9581
control: { type: 'switch' },
9682
group: 'Base',
9783
},
9884
{
99-
key: 'sizeVariation',
100-
help: 'Cell size variation.',
101-
flavors: allFlavors,
102-
description: `Size variation (0~1), if value is 0 size won't be affected. If you use for example the value 0.3, cell width/height will vary between 0.7~1 according to its corresponding value.`,
103-
required: false,
104-
defaultValue: defaults.sizeVariation,
85+
key: 'xOuterPadding',
86+
defaultValue: defaults.xOuterPadding,
10587
type: 'number',
10688
group: 'Base',
10789
control: {
10890
type: 'range',
10991
min: 0,
11092
max: 1,
111-
step: 0.02,
93+
step: 0.05,
11294
},
11395
},
11496
{
115-
key: 'padding',
116-
help: 'Padding.',
117-
flavors: allFlavors,
118-
required: false,
119-
defaultValue: defaults.padding,
97+
key: 'xInnerPadding',
98+
defaultValue: defaults.xInnerPadding,
12099
type: 'number',
121100
group: 'Base',
122101
control: {
123102
type: 'range',
124103
min: 0,
125-
max: 36,
126-
unit: 'px',
104+
max: 1,
105+
step: 0.05,
127106
},
128107
},
129-
...chartDimensions(allFlavors),
130-
themeProperty(['svg', 'canvas', 'api']),
131108
{
132-
key: 'cellShape',
133-
help: `Cell shape/component.`,
109+
key: 'yOuterPadding',
134110
flavors: allFlavors,
135-
description: `
136-
Cell shape, can be one of: \`'rect'\`, \`'circle'\`,
137-
if a function is provided, it must return
138-
a valid SVG element and will receive
139-
the following props:
140-
\`\`\`
141-
{
142-
value: number,
143-
x: number,
144-
y: number,
145-
width: number,
146-
height: number,
147-
color: string,
148-
opacity: number,
149-
borderWidth: number,
150-
borderColor: string,
151-
textColor: string,
152-
}
153-
\`\`\`
154-
`,
155-
type: 'string | Function',
156-
required: false,
157-
defaultValue: defaults.cellShape,
158-
group: 'Style',
111+
defaultValue: defaults.yOuterPadding,
112+
type: 'number',
113+
group: 'Base',
159114
control: {
160-
type: 'choices',
161-
choices: ['rect', 'circle', 'Custom(props) => (…)'].map(key => ({
162-
label: key,
163-
value: key,
164-
})),
115+
type: 'range',
116+
min: 0,
117+
max: 1,
118+
step: 0.05,
119+
},
120+
},
121+
{
122+
key: 'yInnerPadding',
123+
defaultValue: defaults.yInnerPadding,
124+
type: 'number',
125+
group: 'Base',
126+
control: {
127+
type: 'range',
128+
min: 0,
129+
max: 1,
130+
step: 0.05,
165131
},
166132
},
133+
{
134+
key: 'sizeVariation',
135+
help: 'Cell size variation.',
136+
description: `Size variation (0~1), if value is 0 size won't be affected. If you use for example the value 0.3, cell width/height will vary between 0.7~1 according to its corresponding value.`,
137+
defaultValue: defaults.sizeVariation,
138+
type: 'number',
139+
group: 'Base',
140+
control: {
141+
type: 'range',
142+
min: 0,
143+
max: 1,
144+
step: 0.02,
145+
},
146+
},
147+
themeProperty(allFlavors),
167148
{
168149
key: 'colors',
169-
help: 'Defines color range.',
170-
flavors: allFlavors,
171-
type: 'string | Function | string[]',
172-
required: false,
173-
defaultValue: 'nivo',
174-
control: { type: 'quantizeColors' },
175150
group: 'Style',
151+
type: 'ContinuousColorScaleConfig | ((datum) => string)',
152+
control: {
153+
type: 'continuous_colors',
154+
},
176155
},
177156
{
178157
key: 'cellOpacity',
179-
help: 'Cell opacity (0~1).',
180-
flavors: allFlavors,
181-
required: false,
158+
group: 'Style',
159+
defaultValue: defaults.cellOpacity,
160+
type: 'number',
161+
control: { type: 'opacity' },
162+
},
163+
{
164+
key: 'activeCellOpacity',
165+
group: 'Style',
166+
flavors: ['svg', 'canvas'],
167+
defaultValue: defaults.cellOpacity,
168+
type: 'number',
169+
control: { type: 'opacity' },
170+
},
171+
{
172+
key: 'inactiveCellOpacity',
173+
group: 'Style',
174+
flavors: ['svg', 'canvas'],
182175
defaultValue: defaults.cellOpacity,
183176
type: 'number',
184177
control: { type: 'opacity' },
178+
},
179+
{
180+
key: 'borderRadius',
185181
group: 'Style',
182+
help: 'Cell border radius, when using `rect`.',
183+
flavors: ['svg', 'api'],
184+
defaultValue: svgDefaults.borderRadius,
185+
type: 'number',
186+
control: { type: 'range', min: 0, max: 16 },
186187
},
187188
{
188-
key: 'cellBorderWidth',
189+
key: 'borderWidth',
190+
group: 'Style',
189191
help: 'Cell border width.',
190-
flavors: allFlavors,
191-
required: false,
192-
defaultValue: defaults.cellBorderWidth,
192+
defaultValue: defaults.borderWidth,
193193
type: 'number',
194194
control: { type: 'lineWidth' },
195-
group: 'Style',
196195
},
197196
{
198-
key: 'cellBorderColor',
197+
key: 'borderColor',
198+
group: 'Style',
199199
help: 'Method to compute cell border color.',
200-
flavors: allFlavors,
201200
description: `
202201
how to compute cell border color,
203202
[see dedicated documentation](self:/guides/colors).
204203
`,
205-
type: 'string | object | Function',
206-
required: false,
207-
defaultValue: defaults.cellBorderColor,
204+
type: 'InheritedColorConfig<ComputedCell>',
205+
defaultValue: defaults.borderColor,
208206
control: { type: 'inheritedColor' },
209-
group: 'Style',
210207
},
211208
{
212209
key: 'enableLabels',
213210
help: 'Enable/disable labels.',
214-
flavors: allFlavors,
215211
type: 'boolean',
216-
required: false,
217212
defaultValue: defaults.enableLabels,
218213
control: { type: 'switch' },
219214
group: 'Labels',
220215
},
216+
{
217+
key: 'label',
218+
help: 'Define what to use as a label.',
219+
type: 'PropertyAccessor',
220+
defaultValue: defaults.label,
221+
group: 'Labels',
222+
},
221223
{
222224
key: 'labelTextColor',
223225
help: 'Method to compute label text color.',
224-
flavors: allFlavors,
225226
description: `
226227
how to compute label text color,
227228
[see dedicated documentation](self:/guides/colors).
228229
`,
229230
type: 'string | object | Function',
230-
required: false,
231231
defaultValue: defaults.labelTextColor,
232232
control: { type: 'inheritedColor' },
233233
group: 'Labels',
@@ -238,6 +238,189 @@ const props: ChartProperty[] = [
238238
yDefault: defaults.enableGridY,
239239
}),
240240
...axes({ flavors: allFlavors }),
241+
{
242+
key: 'legends',
243+
group: 'Legends',
244+
type: `ContinuousColorsLegendProps[]`,
245+
control: {
246+
type: 'array',
247+
shouldCreate: true,
248+
shouldRemove: true,
249+
props: [
250+
{
251+
key: 'anchor',
252+
type: 'LegendAnchor',
253+
control: { type: 'boxAnchor' },
254+
},
255+
{
256+
key: 'translateX',
257+
type: 'number',
258+
control: {
259+
type: 'range',
260+
min: -200,
261+
max: 200,
262+
},
263+
},
264+
{
265+
key: 'translateY',
266+
type: 'number',
267+
control: {
268+
type: 'range',
269+
min: -200,
270+
max: 200,
271+
},
272+
},
273+
{
274+
key: 'length',
275+
type: 'number',
276+
control: {
277+
type: 'range',
278+
min: 60,
279+
max: 500,
280+
},
281+
},
282+
{
283+
key: 'thickness',
284+
type: 'number',
285+
control: {
286+
type: 'range',
287+
min: 6,
288+
max: 32,
289+
},
290+
},
291+
{
292+
key: 'direction',
293+
type: `'row' | 'column'`,
294+
control: {
295+
type: 'radio',
296+
choices: [
297+
{
298+
label: 'row',
299+
value: 'row',
300+
},
301+
{
302+
label: 'column',
303+
value: 'column',
304+
},
305+
],
306+
},
307+
},
308+
{
309+
key: 'tickPosition',
310+
type: `'before' | 'after'`,
311+
control: {
312+
type: 'radio',
313+
choices: [
314+
{
315+
label: 'before',
316+
value: 'before',
317+
},
318+
{
319+
label: 'after',
320+
value: 'after',
321+
},
322+
],
323+
},
324+
},
325+
{
326+
key: 'tickSize',
327+
type: 'number',
328+
control: {
329+
type: 'range',
330+
min: 0,
331+
max: 12,
332+
},
333+
},
334+
{
335+
key: 'tickSpacing',
336+
type: 'number',
337+
control: {
338+
type: 'range',
339+
min: 0,
340+
max: 12,
341+
},
342+
},
343+
{
344+
key: 'tickOverlap',
345+
type: 'boolean',
346+
control: { type: 'switch' },
347+
},
348+
{
349+
key: 'title',
350+
type: 'string',
351+
control: { type: 'text' },
352+
},
353+
{
354+
key: 'titleAlign',
355+
type: `'start' | 'middle' | 'end'`,
356+
control: {
357+
type: 'radio',
358+
choices: [
359+
{
360+
label: 'start',
361+
value: 'start',
362+
},
363+
{
364+
label: 'middle',
365+
value: 'middle',
366+
},
367+
{
368+
label: 'end',
369+
value: 'end',
370+
},
371+
],
372+
},
373+
},
374+
{
375+
key: 'titleOffset',
376+
type: 'number',
377+
control: {
378+
type: 'range',
379+
min: 0,
380+
max: 12,
381+
},
382+
},
383+
],
384+
},
385+
},
386+
{
387+
key: 'layers',
388+
type: `('grid' | 'axes' | 'cells' | CustomLayer | CustomCanvasLayer)[]`,
389+
group: 'Customization',
390+
help: 'Defines the order of layers and add custom layers, please use the appropriate variant for custom layers.',
391+
defaultValue: defaults.layers,
392+
flavors: ['svg', 'canvas'],
393+
},
394+
{
395+
key: 'cellComponent',
396+
group: 'Customization',
397+
type: `'rect' | 'circle' | CellComponent`,
398+
help: 'Cell component, the API does not support `CellComponent`.',
399+
flavors: ['svg', 'api'],
400+
defaultValue: 'rect',
401+
control: {
402+
type: 'choices',
403+
choices: ['rect', 'circle', 'CustomCell'].map(key => ({
404+
label: key,
405+
value: key,
406+
})),
407+
},
408+
},
409+
{
410+
key: 'renderCell',
411+
group: 'Customization',
412+
type: `'rect' | 'circle' | CellCanvasRenderer`,
413+
help: 'Cell renderer for canvas implementation.',
414+
flavors: ['canvas'],
415+
defaultValue: 'rect',
416+
control: {
417+
type: 'choices',
418+
choices: ['rect', 'circle', 'customRenderCell'].map(key => ({
419+
label: key,
420+
value: key,
421+
})),
422+
},
423+
},
241424
isInteractive({
242425
flavors: ['svg', 'canvas'],
243426
defaultValue: defaults.isInteractive,
@@ -247,7 +430,6 @@ const props: ChartProperty[] = [
247430
flavors: ['svg', 'canvas'],
248431
group: 'Interactivity',
249432
type: '(cell, event) => void',
250-
required: false,
251433
help: 'onClick handler.',
252434
description: `
253435
onClick handler, will receive node data
@@ -280,7 +462,6 @@ const props: ChartProperty[] = [
280462
- **column**: highlight the current cell's column
281463
- **rowColumn**: highlight the current cell's row & column
282464
`,
283-
required: false,
284465
defaultValue: defaults.hoverTarget,
285466
type: 'string',
286467
group: 'Interactivity',
@@ -292,26 +473,7 @@ const props: ChartProperty[] = [
292473
})),
293474
},
294475
},
295-
{
296-
key: 'cellHoverOpacity',
297-
flavors: ['svg', 'canvas'],
298-
help: 'Cell opacity on hover.',
299-
required: false,
300-
defaultValue: defaults.cellHoverOpacity,
301-
type: 'number',
302-
control: { type: 'opacity' },
303-
group: 'Interactivity',
304-
},
305-
{
306-
key: 'cellHoverOthersOpacity',
307-
flavors: ['svg', 'canvas'],
308-
help: 'Cell opacity when not hovered.',
309-
required: false,
310-
defaultValue: defaults.cellHoverOthersOpacity,
311-
type: 'number',
312-
control: { type: 'opacity' },
313-
group: 'Interactivity',
314-
},
476+
...commonAccessibilityProps(allFlavors),
315477
...motionProperties(['svg'], defaults, 'react-spring'),
316478
]
317479

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

File renamed without changes.

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

-167
This file was deleted.

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

+464
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,464 @@
1+
import React from 'react'
2+
import {
3+
ResponsiveHeatMap,
4+
svgDefaultProps as defaults,
5+
} from '../../../../packages/heatmap/dist/nivo-heatmap.cjs'
6+
import { patternLinesDef } from '@nivo/core'
7+
import isFunction from 'lodash/isFunction'
8+
import { ComponentTemplate } from '../../components/components/ComponentTemplate'
9+
import meta from '../../data/components/heatmap/meta.yml'
10+
import mapper from '../../data/components/heatmap/mapper'
11+
import { groups } from '../../data/components/heatmap/props'
12+
import { generateLightDataSet } from '../../data/components/heatmap/generator'
13+
import { graphql, useStaticQuery } from 'gatsby'
14+
15+
const getRandomValue = () => -100 + Math.random() * 200
16+
17+
const getData = () => [
18+
{
19+
id: 'japan',
20+
data: [
21+
{
22+
x: 'plane',
23+
y: getRandomValue(),
24+
},
25+
{
26+
x: 'helicopter',
27+
y: getRandomValue(),
28+
},
29+
{
30+
x: 'boat',
31+
y: getRandomValue(),
32+
},
33+
{
34+
x: 'train',
35+
y: getRandomValue(),
36+
},
37+
{
38+
x: 'subway',
39+
y: getRandomValue(),
40+
},
41+
{
42+
x: 'bus',
43+
y: getRandomValue(),
44+
},
45+
{
46+
x: 'car',
47+
y: getRandomValue(),
48+
},
49+
{
50+
x: 'moto',
51+
y: getRandomValue(),
52+
},
53+
{
54+
x: 'bicycle',
55+
y: getRandomValue(),
56+
},
57+
{
58+
x: 'horse',
59+
y: getRandomValue(),
60+
},
61+
{
62+
x: 'skateboard',
63+
y: getRandomValue(),
64+
},
65+
{
66+
x: 'others',
67+
y: getRandomValue(),
68+
},
69+
],
70+
},
71+
{
72+
id: 'france',
73+
data: [
74+
{
75+
x: 'plane',
76+
y: getRandomValue(),
77+
},
78+
{
79+
x: 'helicopter',
80+
y: getRandomValue(),
81+
},
82+
{
83+
x: 'boat',
84+
y: getRandomValue(),
85+
},
86+
{
87+
x: 'train',
88+
y: getRandomValue(),
89+
},
90+
{
91+
x: 'subway',
92+
y: getRandomValue(),
93+
},
94+
{
95+
x: 'bus',
96+
y: getRandomValue(),
97+
},
98+
{
99+
x: 'car',
100+
y: getRandomValue(),
101+
},
102+
{
103+
x: 'moto',
104+
y: getRandomValue(),
105+
},
106+
{
107+
x: 'bicycle',
108+
y: getRandomValue(),
109+
},
110+
{
111+
x: 'horse',
112+
y: getRandomValue(),
113+
},
114+
{
115+
x: 'skateboard',
116+
y: getRandomValue(),
117+
},
118+
{
119+
x: 'others',
120+
y: getRandomValue(),
121+
},
122+
],
123+
},
124+
{
125+
id: 'us',
126+
data: [
127+
{
128+
x: 'plane',
129+
y: getRandomValue(),
130+
},
131+
{
132+
x: 'helicopter',
133+
y: getRandomValue(),
134+
},
135+
{
136+
x: 'boat',
137+
y: getRandomValue(),
138+
},
139+
{
140+
x: 'train',
141+
y: getRandomValue(),
142+
},
143+
{
144+
x: 'subway',
145+
y: getRandomValue(),
146+
},
147+
{
148+
x: 'bus',
149+
y: getRandomValue(),
150+
},
151+
{
152+
x: 'car',
153+
y: getRandomValue(),
154+
},
155+
{
156+
x: 'moto',
157+
y: getRandomValue(),
158+
},
159+
{
160+
x: 'bicycle',
161+
y: getRandomValue(),
162+
},
163+
{
164+
x: 'horse',
165+
y: getRandomValue(),
166+
},
167+
{
168+
x: 'skateboard',
169+
y: getRandomValue(),
170+
},
171+
{
172+
x: 'others',
173+
y: getRandomValue(),
174+
},
175+
],
176+
},
177+
{
178+
id: 'germany',
179+
data: [
180+
{
181+
x: 'plane',
182+
y: getRandomValue(),
183+
},
184+
{
185+
x: 'helicopter',
186+
y: getRandomValue(),
187+
},
188+
{
189+
x: 'boat',
190+
y: getRandomValue(),
191+
},
192+
{
193+
x: 'train',
194+
y: getRandomValue(),
195+
},
196+
{
197+
x: 'subway',
198+
y: getRandomValue(),
199+
},
200+
{
201+
x: 'bus',
202+
y: getRandomValue(),
203+
},
204+
{
205+
x: 'car',
206+
y: getRandomValue(),
207+
},
208+
{
209+
x: 'moto',
210+
y: getRandomValue(),
211+
},
212+
{
213+
x: 'bicycle',
214+
y: getRandomValue(),
215+
},
216+
{
217+
x: 'horse',
218+
y: getRandomValue(),
219+
},
220+
{
221+
x: 'skateboard',
222+
y: getRandomValue(),
223+
},
224+
{
225+
x: 'others',
226+
y: getRandomValue(),
227+
},
228+
],
229+
},
230+
{
231+
id: 'norway',
232+
data: [
233+
{
234+
x: 'plane',
235+
y: getRandomValue(),
236+
},
237+
{
238+
x: 'helicopter',
239+
y: getRandomValue(),
240+
},
241+
{
242+
x: 'boat',
243+
y: getRandomValue(),
244+
},
245+
{
246+
x: 'train',
247+
y: getRandomValue(),
248+
},
249+
{
250+
x: 'subway',
251+
y: getRandomValue(),
252+
},
253+
{
254+
x: 'bus',
255+
y: getRandomValue(),
256+
},
257+
{
258+
x: 'car',
259+
y: getRandomValue(),
260+
},
261+
{
262+
x: 'moto',
263+
y: getRandomValue(),
264+
},
265+
{
266+
x: 'bicycle',
267+
y: getRandomValue(),
268+
},
269+
{
270+
x: 'horse',
271+
y: getRandomValue(),
272+
},
273+
{
274+
x: 'skateboard',
275+
y: getRandomValue(),
276+
},
277+
{
278+
x: 'others',
279+
y: getRandomValue(),
280+
},
281+
],
282+
},
283+
]
284+
285+
const initialProperties = {
286+
margin: {
287+
top: 90,
288+
right: 90,
289+
bottom: 60,
290+
left: 90,
291+
},
292+
293+
minValue: defaults.minValue,
294+
maxValue: defaults.maxValue,
295+
valueFormat: { format: '>-d', enabled: true },
296+
297+
forceSquare: defaults.forceSquare,
298+
sizeVariation: 0,
299+
xOuterPadding: defaults.xOuterPadding,
300+
xInnerPadding: 0.05,
301+
yOuterPadding: defaults.yOuterPadding,
302+
yInnerPadding: 0.05,
303+
304+
enableGridX: defaults.enableGridX,
305+
enableGridY: defaults.enableGridY,
306+
axisTop: {
307+
enable: true,
308+
orient: 'top',
309+
tickSize: 5,
310+
tickPadding: 5,
311+
tickRotation: -90,
312+
legend: '',
313+
legendOffset: 46,
314+
},
315+
axisRight: {
316+
enable: true,
317+
orient: 'right',
318+
tickSize: 5,
319+
tickPadding: 5,
320+
tickRotation: 0,
321+
legend: 'country',
322+
legendPosition: 'middle',
323+
legendOffset: 64,
324+
},
325+
axisBottom: {
326+
enable: false,
327+
orient: 'bottom',
328+
tickSize: 5,
329+
tickPadding: 5,
330+
tickRotation: -90,
331+
legend: '',
332+
legendPosition: 'middle',
333+
legendOffset: 36,
334+
},
335+
axisLeft: {
336+
enable: true,
337+
orient: 'left',
338+
tickSize: 5,
339+
tickPadding: 5,
340+
tickRotation: 0,
341+
legend: 'country',
342+
legendPosition: 'middle',
343+
legendOffset: -64,
344+
},
345+
346+
colors: {
347+
type: 'diverging',
348+
scheme: 'red_yellow_blue',
349+
divergeAt: 0.5,
350+
minValue: -100,
351+
maxValue: 100,
352+
},
353+
cellComponent: 'rect',
354+
cellOpacity: 1,
355+
activeCellOpacity: 1,
356+
inactiveCellOpacity: 1,
357+
borderRadius: 2,
358+
borderWidth: 1,
359+
borderColor: {
360+
from: 'color',
361+
modifiers: [['darker', 0.6]],
362+
},
363+
364+
enableLabels: true,
365+
labelTextColor: {
366+
from: 'color',
367+
modifiers: [['darker', 2]],
368+
},
369+
370+
defs: [
371+
patternLinesDef('lines', {
372+
background: 'inherit',
373+
color: 'rgba(0, 0, 0, 0.1)',
374+
rotation: -45,
375+
lineWidth: 4,
376+
spacing: 7,
377+
}),
378+
],
379+
fill: [{ match: d => false && d.value < 30, id: 'lines' }],
380+
381+
legends: [
382+
{
383+
anchor: 'bottom',
384+
translateX: 0,
385+
translateY: 30,
386+
length: 400,
387+
thickness: 8,
388+
direction: 'row',
389+
tickPosition: 'after',
390+
tickSize: 3,
391+
tickSpacing: 4,
392+
tickOverlap: false,
393+
tickFormat: Math.round,
394+
title: 'Value →',
395+
titleAlign: 'start',
396+
titleOffset: 4,
397+
},
398+
],
399+
400+
animate: defaults.animate,
401+
motionConfig: defaults.motionConfig,
402+
403+
isInteractive: defaults.isInteractive,
404+
hoverTarget: 'cell',
405+
}
406+
407+
const HeatMap = () => {
408+
const {
409+
image: {
410+
childImageSharp: { gatsbyImageData: image },
411+
},
412+
} = useStaticQuery(graphql`
413+
query {
414+
image: file(absolutePath: { glob: "**/src/assets/captures/heatmap.png" }) {
415+
childImageSharp {
416+
gatsbyImageData(layout: FIXED, width: 700, quality: 100)
417+
}
418+
}
419+
}
420+
`)
421+
422+
return (
423+
<ComponentTemplate
424+
name="HeatMap"
425+
meta={meta.HeatMap}
426+
icon="heatmap"
427+
flavors={meta.flavors}
428+
currentFlavor="svg"
429+
properties={groups}
430+
initialProperties={initialProperties}
431+
defaultProperties={defaults}
432+
propertiesMapper={mapper}
433+
codePropertiesMapper={properties => ({
434+
...properties,
435+
cellShape: isFunction(properties.cellShape)
436+
? 'Custom(props) => (…)'
437+
: properties.cellShape,
438+
})}
439+
generateData={getData}
440+
// getTabData={data => data.data}
441+
image={image}
442+
>
443+
{(properties, data, theme, logAction) => {
444+
return (
445+
<ResponsiveHeatMap
446+
data={data}
447+
{...properties}
448+
theme={theme}
449+
onClick={cell => {
450+
logAction({
451+
type: 'click',
452+
label: `${cell.serieId} ${cell.data.x}: ${cell.formattedValue}`,
453+
color: cell.color,
454+
data: cell,
455+
})
456+
}}
457+
/>
458+
)
459+
}}
460+
</ComponentTemplate>
461+
)
462+
}
463+
464+
export default HeatMap

0 commit comments

Comments
 (0)
Please sign in to comment.