Skip to content

Commit 1867b60

Browse files
ploucplouc
committedJan 12, 2022
feat(heatmap): adjust stories
·
v0.88.0v0.79.0
1 parent 2cbda76 commit 1867b60

File tree

8 files changed

+195
-258
lines changed

8 files changed

+195
-258
lines changed
 

‎packages/funnel/stories/funnel.stories.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { withKnobs } from '@storybook/addon-knobs'
22
import { storiesOf } from '@storybook/react'
3-
3+
// @ts-ignore
44
import { ResponsiveFunnel } from '../src'
55

66
const commonProps = {

‎packages/heatmap/stories/CustomTooltip.tsx

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
// @ts-ignore
2+
import { ComputedCell } from '../src'
3+
4+
export const CustomTooltip = ({ cell }: { cell: ComputedCell<any> }) => {
5+
return (
6+
<div
7+
style={{
8+
backgroundColor: cell.color,
9+
color: '#ffffff',
10+
padding: '6px 9px',
11+
borderRadius: '2px',
12+
minWidth: '160px',
13+
boxShadow: '0 3px 5px rgba(0, 0, 0, .25)',
14+
whiteSpace: 'pre',
15+
}}
16+
>
17+
{'id '}&nbsp;<strong>{cell.id}</strong>
18+
<br />
19+
{'serie'}&nbsp;<strong>{cell.serieId}</strong>
20+
<br />
21+
{'x '}&nbsp;<strong>{cell.data.x}</strong>
22+
<br />
23+
{'value'}&nbsp;<strong>{cell.formattedValue}</strong>
24+
</div>
25+
)
26+
}

‎packages/heatmap/stories/data.ts

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { generateXYSeries } from '@nivo/generators'
2+
3+
export const sampleData = generateXYSeries({
4+
serieIds: ['Japan', 'France', 'US', 'Germany', 'Norway', 'Iceland', 'UK', 'Vietnam'],
5+
x: {
6+
values: ['Train', 'Subway', 'Bus', 'Car', 'Boat', 'Moto', 'Moped', 'Bicycle', 'Others'],
7+
},
8+
y: {
9+
length: NaN,
10+
min: -100_000,
11+
max: 100_000,
12+
round: true,
13+
},
14+
})

‎packages/heatmap/stories/heatmap.stories.js

-150
This file was deleted.

‎packages/heatmap/stories/heatmap.stories.tsx

+87
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import { storiesOf } from '@storybook/react'
2+
// @ts-ignore
3+
import { HeatMap, ComputedCell } from '../src'
4+
// @ts-ignore
5+
import { sampleData } from './data'
6+
// @ts-ignore
7+
import { CustomTooltip } from './CustomTooltip'
8+
9+
const commonProperties = {
10+
width: 900,
11+
height: 500,
12+
margin: { top: 60, right: 80, bottom: 60, left: 80 },
13+
data: sampleData,
14+
}
15+
16+
const stories = storiesOf('HeatMap', module)
17+
18+
stories.add('default', () => <HeatMap<any, Record<string, unknown>> {...commonProperties} />)
19+
20+
stories.add('Variable Cell Size', () => (
21+
<HeatMap<any, Record<string, unknown>>
22+
{...commonProperties}
23+
valueFormat=">-.2s"
24+
cellComponent="circle"
25+
sizeVariation={{
26+
sizes: [0.6, 1],
27+
}}
28+
forceSquare
29+
enableGridX={true}
30+
enableGridY={true}
31+
/>
32+
))
33+
34+
const CustomCell = ({ cell, borderWidth }: { cell: ComputedCell<any>; borderWidth: number }) => {
35+
if (cell.value === null) return null
36+
37+
return (
38+
<g transform={`translate(${cell.x}, ${cell.y})`}>
39+
<path
40+
transform={`rotate(${cell.value < 50 ? 180 : 0})`}
41+
fill={cell.color}
42+
fillOpacity={cell.opacity}
43+
strokeWidth={borderWidth}
44+
stroke={cell.borderColor}
45+
d={`
46+
M0 -${Math.round(cell.height / 2)}
47+
L${Math.round(cell.width / 2)} ${Math.round(cell.height / 2)}
48+
L-${Math.round(cell.width / 2)} ${Math.round(cell.height / 2)}
49+
L0 -${Math.round(cell.height / 2)}
50+
`}
51+
/>
52+
<text
53+
dominantBaseline="central"
54+
textAnchor="middle"
55+
style={{ fill: cell.labelTextColor }}
56+
dy={cell.value < 50 ? -6 : 6}
57+
>
58+
{cell.formattedValue}
59+
</text>
60+
</g>
61+
)
62+
}
63+
64+
stories.add('Custom Cell Component', () => (
65+
<HeatMap<any, Record<string, unknown>>
66+
{...commonProperties}
67+
enableGridY
68+
cellComponent={CustomCell}
69+
labelTextColor="inherit:darker(1.6)"
70+
/>
71+
))
72+
73+
stories.add('Custom Tooltip', () => (
74+
<HeatMap<any, Record<string, unknown>>
75+
{...commonProperties}
76+
colors={{
77+
type: 'quantize',
78+
scheme: 'cividis',
79+
steps: 7,
80+
}}
81+
tooltip={CustomTooltip}
82+
labelTextColor={{
83+
from: 'color',
84+
modifiers: [['brighter', 2.6]],
85+
}}
86+
/>
87+
))

‎packages/heatmap/stories/heatmapCanvas.stories.js

-103
This file was deleted.

‎packages/heatmap/stories/heatmapCanvas.stories.tsx

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import { storiesOf } from '@storybook/react'
2+
import { generateXYSeries } from '@nivo/generators'
3+
// @ts-ignore
4+
import { HeatMapCanvas } from '../src'
5+
// @ts-ignore
6+
import { CustomTooltip } from './CustomTooltip'
7+
8+
const sampleData = generateXYSeries({
9+
serieIds: ['Japan', 'France', 'US', 'Germany', 'Norway', 'Iceland', 'UK', 'Vietnam'],
10+
x: {
11+
values: ['Train', 'Subway', 'Bus', 'Car', 'Boat', 'Moto', 'Moped', 'Bicycle', 'Others'],
12+
},
13+
y: {
14+
length: NaN,
15+
min: -100_000,
16+
max: 100_000,
17+
round: true,
18+
},
19+
})
20+
21+
const commonProperties = {
22+
width: 900,
23+
height: 500,
24+
margin: { top: 60, right: 80, bottom: 60, left: 80 },
25+
data: sampleData,
26+
}
27+
28+
const stories = storiesOf('HeatMapCanvas', module)
29+
30+
stories.add('default', () => <HeatMapCanvas<any, Record<string, unknown>> {...commonProperties} />)
31+
32+
stories.add('Variable Cell Size', () => (
33+
<HeatMapCanvas<any, Record<string, unknown>>
34+
{...commonProperties}
35+
valueFormat=">-.2s"
36+
renderCell="circle"
37+
sizeVariation={{
38+
sizes: [0.6, 1],
39+
}}
40+
forceSquare
41+
enableGridX={true}
42+
enableGridY={true}
43+
/>
44+
))
45+
46+
stories.add('Custom Tooltip', () => (
47+
<HeatMapCanvas<any, Record<string, unknown>>
48+
{...commonProperties}
49+
valueFormat=">-.2s"
50+
colors={{
51+
type: 'quantize',
52+
scheme: 'red_yellow_blue',
53+
steps: 7,
54+
}}
55+
tooltip={CustomTooltip}
56+
/>
57+
))

‎website/src/data/components/heatmap/meta.yml

+10-4
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,12 @@ HeatMap:
1010
package: '@nivo/heatmap'
1111
tags: []
1212
stories:
13-
- label: Custom cell component
13+
- label: Variable Cell Size
14+
link: heatmap--variable-cell-size
15+
- label: Custom Cell Component
1416
link: heatmap--custom-cell-component
15-
- label: Custom tooltip
16-
link: heatmap-custom-tooltip
17+
- label: Custom Tooltip
18+
link: heatmap--custom-tooltip
1719
description: |
1820
An heat map matrix, you can chose between various colors scales,
1921
you also have the ability to change the cell shape
@@ -31,7 +33,11 @@ HeatMapCanvas:
3133
package: '@nivo/heatmap'
3234
tags:
3335
- canvas
34-
stories: []
36+
stories:
37+
- label: Variable Cell Size
38+
link: heatmapcanvas--variable-cell-size
39+
- label: Custom Tooltip
40+
link: heatmapcanvas--custom-tooltip
3541
description: |
3642
A variation around the [HeatMap](self:/heatmap/) component.
3743
Well suited for large data sets as it does not impact DOM tree depth,

0 commit comments

Comments
 (0)
Please sign in to comment.