Skip to content

Commit 02da858

Browse files
ploucplouc
committedJan 12, 2022
feat(website): improve theming guide
·
v0.88.0v0.79.0
1 parent da44298 commit 02da858

File tree

11 files changed

+872
-471
lines changed

11 files changed

+872
-471
lines changed
 

‎packages/core/index.d.ts

+6-6
Original file line numberDiff line numberDiff line change
@@ -86,14 +86,14 @@ declare module '@nivo/core' {
8686
}>
8787
text: Partial<React.CSSProperties>
8888
}
89+
title: {
90+
text: Partial<React.CSSProperties>
91+
}
8992
text: Partial<React.CSSProperties>
9093
ticks: {
9194
line: Partial<React.CSSProperties>
9295
text: Partial<React.CSSProperties>
9396
}
94-
title: {
95-
text: Partial<React.CSSProperties>
96-
}
9797
}
9898
labels: {
9999
text: Partial<React.CSSProperties>
@@ -171,14 +171,14 @@ declare module '@nivo/core' {
171171
symbol: CompleteTheme['legends']['hidden']['symbol']
172172
text: CompleteTheme['legends']['hidden']['text']
173173
}>
174+
title: Partial<{
175+
text: Partial<CompleteTheme['legends']['title']['text']>
176+
}>
174177
text: Partial<CompleteTheme['legends']['text']>
175178
ticks: Partial<{
176179
line: Partial<CompleteTheme['legends']['ticks']['line']>
177180
text: Partial<CompleteTheme['legends']['ticks']['text']>
178181
}>
179-
title: Partial<{
180-
text: Partial<CompleteTheme['legends']['title']['text']>
181-
}>
182182
}>
183183
labels: Partial<{
184184
text: Partial<CompleteTheme['labels']['text']>

‎packages/core/src/theming/extend.js

+1
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import set from 'lodash/set'
1313
const fontProps = [
1414
'axis.ticks.text',
1515
'axis.legend.text',
16+
'legends.title.text',
1617
'legends.text',
1718
'legends.ticks.text',
1819
'legends.title.text',

‎website/src/components/guides/theming/ThemedBar.tsx

+75
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import React from 'react'
2+
import { CompleteTheme } from '@nivo/core'
3+
import { ResponsiveBar } from '@nivo/bar'
4+
import { colorSchemes } from '@nivo/colors'
5+
6+
export const ThemedBar = ({ theme }: { theme: CompleteTheme }) => {
7+
return (
8+
<ResponsiveBar
9+
margin={{
10+
top: 40,
11+
right: 20,
12+
bottom: 50,
13+
left: 50,
14+
}}
15+
data={[
16+
{ id: 'A', value: 12 },
17+
{ id: 'B', value: 17 },
18+
{ id: 'C', value: 9 },
19+
{ id: 'D', value: 15 },
20+
{ id: 'E', value: 23 },
21+
]}
22+
theme={theme}
23+
colorBy="indexValue"
24+
animate={false}
25+
enableGridX={true}
26+
axisBottom={{
27+
legend: 'X axis legend',
28+
legendPosition: 'middle',
29+
legendOffset: 34,
30+
}}
31+
axisLeft={{
32+
legend: 'Y axis legend',
33+
legendPosition: 'middle',
34+
legendOffset: -36,
35+
}}
36+
legends={[
37+
{
38+
anchor: 'top',
39+
translateY: -28,
40+
itemWidth: 40,
41+
itemHeight: 12,
42+
symbolSize: 12,
43+
direction: 'row',
44+
data: [
45+
{
46+
id: 'A',
47+
label: 'A',
48+
color: colorSchemes.nivo[0],
49+
},
50+
{
51+
id: 'B',
52+
label: 'B',
53+
color: colorSchemes.nivo[1],
54+
},
55+
{
56+
id: 'C',
57+
label: 'C',
58+
color: colorSchemes.nivo[2],
59+
},
60+
{
61+
id: 'D',
62+
label: 'D',
63+
color: colorSchemes.nivo[3],
64+
},
65+
{
66+
id: 'E',
67+
label: 'E',
68+
color: colorSchemes.nivo[4],
69+
},
70+
],
71+
},
72+
]}
73+
/>
74+
)
75+
}

‎website/src/components/guides/theming/ThemedHeatMap.tsx

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import React, { useMemo } from 'react'
2+
import { CompleteTheme } from '@nivo/core'
3+
import { ResponsiveHeatMap } from '@nivo/heatmap'
4+
import { generateXYSeries } from '@nivo/generators'
5+
6+
export const ThemedHeatMap = ({ theme }: { theme: CompleteTheme }) => {
7+
const data = useMemo(
8+
() =>
9+
generateXYSeries({
10+
serieIds: ['A', 'B', 'C', 'D', 'E'],
11+
x: { values: ['A', 'B', 'C', 'D', 'E'] },
12+
y: {
13+
length: NaN,
14+
min: -100,
15+
max: 100,
16+
round: true,
17+
},
18+
}),
19+
[]
20+
)
21+
22+
return (
23+
<ResponsiveHeatMap
24+
data={data}
25+
margin={{
26+
top: 40,
27+
right: 70,
28+
bottom: 50,
29+
left: 50,
30+
}}
31+
theme={theme}
32+
colors={{
33+
type: 'diverging',
34+
scheme: 'red_yellow_blue',
35+
minValue: -100,
36+
maxValue: 100,
37+
}}
38+
inactiveOpacity={0.35}
39+
animate={false}
40+
xOuterPadding={0.1}
41+
yOuterPadding={0.1}
42+
axisTop={null}
43+
axisBottom={{
44+
legend: 'X axis legend',
45+
legendPosition: 'middle',
46+
legendOffset: 34,
47+
}}
48+
axisLeft={{
49+
legend: 'Y axis legend',
50+
legendPosition: 'middle',
51+
legendOffset: -36,
52+
}}
53+
legends={[
54+
{
55+
anchor: 'right',
56+
direction: 'column',
57+
translateX: 32,
58+
length: 180,
59+
thickness: 10,
60+
ticks: [-100, -75, -50, -25, 0, 25, 50, 75, 100],
61+
title: 'Legend Title →',
62+
},
63+
]}
64+
/>
65+
)
66+
}

‎website/src/components/guides/theming/ThemedLine.tsx

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import React from 'react'
2+
import { CompleteTheme } from '@nivo/core'
3+
import { ResponsiveLine } from '@nivo/line'
4+
5+
export const ThemedLine = ({ theme }: { theme: CompleteTheme }) => {
6+
return (
7+
<ResponsiveLine
8+
margin={{
9+
top: 40,
10+
right: 20,
11+
bottom: 50,
12+
left: 50,
13+
}}
14+
data={[
15+
{
16+
id: 'Serie 0',
17+
data: [
18+
{ x: 'A', y: 12 },
19+
{ x: 'B', y: 17 },
20+
{ x: 'C', y: 9 },
21+
{ x: 'D', y: 15 },
22+
{ x: 'E', y: 23 },
23+
],
24+
},
25+
{
26+
id: 'Serie 1',
27+
data: [
28+
{ x: 'A', y: 3 },
29+
{ x: 'B', y: 7 },
30+
{ x: 'C', y: 6 },
31+
{ x: 'D', y: 12 },
32+
{ x: 'E', y: 16 },
33+
],
34+
},
35+
{
36+
id: 'Serie 2',
37+
data: [
38+
{ x: 'A', y: 1 },
39+
{ x: 'B', y: 2 },
40+
{ x: 'C', y: 2 },
41+
{ x: 'D', y: 5 },
42+
{ x: 'E', y: 7 },
43+
],
44+
},
45+
]}
46+
enablePoints
47+
enablePointLabel
48+
pointSize={10}
49+
theme={theme}
50+
animate={false}
51+
axisBottom={{
52+
legend: 'X axis legend',
53+
legendPosition: 'middle',
54+
legendOffset: 34,
55+
}}
56+
axisLeft={{
57+
legend: 'Y axis legend',
58+
legendPosition: 'middle',
59+
legendOffset: -36,
60+
}}
61+
/>
62+
)
63+
}

‎website/src/components/guides/theming/ThemedRadialBar.tsx

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import React, { useMemo } from 'react'
2+
import { CompleteTheme } from '@nivo/core'
3+
import { ResponsiveRadialBar } from '@nivo/radial-bar'
4+
5+
export const ThemedRadialBar = ({ theme }: { theme: CompleteTheme }) => {
6+
const data = useMemo(
7+
() => [
8+
{
9+
id: 'Supermarket',
10+
data: [
11+
{
12+
x: 'Vegetables',
13+
y: 60,
14+
},
15+
{
16+
x: 'Fruits',
17+
y: 22,
18+
},
19+
{
20+
x: 'Meat',
21+
y: 46,
22+
},
23+
],
24+
},
25+
{
26+
id: 'Combini',
27+
data: [
28+
{
29+
x: 'Vegetables',
30+
y: 264,
31+
},
32+
{
33+
x: 'Fruits',
34+
y: 148,
35+
},
36+
{
37+
x: 'Meat',
38+
y: 246,
39+
},
40+
],
41+
},
42+
{
43+
id: 'Online',
44+
data: [
45+
{
46+
x: 'Vegetables',
47+
y: 98,
48+
},
49+
{
50+
x: 'Fruits',
51+
y: 224,
52+
},
53+
{
54+
x: 'Meat',
55+
y: 83,
56+
},
57+
],
58+
},
59+
],
60+
[]
61+
)
62+
return (
63+
<ResponsiveRadialBar
64+
margin={{
65+
top: 36,
66+
bottom: 36,
67+
}}
68+
data={data}
69+
theme={theme}
70+
animate={false}
71+
/>
72+
)
73+
}

‎website/src/components/guides/theming/defaults.ts

+115
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
import {
2+
// @ts-ignore
3+
defaultTheme as baseDefaultTheme,
4+
// @ts-ignore
5+
extendDefaultTheme,
6+
CompleteTheme,
7+
} from '@nivo/core'
8+
9+
const extendedTheme: CompleteTheme = extendDefaultTheme(baseDefaultTheme)
10+
11+
const axisDefaults: CompleteTheme['axis'] = {
12+
domain: {
13+
line: {
14+
stroke: '#777777', // defaultTheme.axis.domain.line.stroke,
15+
strokeWidth: extendedTheme.axis.domain.line.strokeWidth,
16+
},
17+
},
18+
legend: {
19+
text: {
20+
fontSize: extendedTheme.axis.legend.text.fontSize,
21+
fill: extendedTheme.axis.legend.text.fill,
22+
},
23+
},
24+
ticks: {
25+
line: {
26+
stroke: extendedTheme.axis.ticks.line.stroke,
27+
strokeWidth: extendedTheme.axis.ticks.line.strokeWidth,
28+
},
29+
text: {
30+
fontSize: extendedTheme.axis.ticks.text.fontSize,
31+
fill: extendedTheme.axis.ticks.text.fill,
32+
},
33+
},
34+
}
35+
36+
const gridDefaults: CompleteTheme['grid'] = {
37+
line: {
38+
stroke: extendedTheme.grid.line.stroke,
39+
strokeWidth: extendedTheme.grid.line.strokeWidth,
40+
},
41+
}
42+
43+
const legendsDefaults: CompleteTheme['legends'] = {
44+
title: {
45+
text: {
46+
fontSize: extendedTheme.legends.title.text.fontSize,
47+
fill: extendedTheme.legends.title.text.fill,
48+
},
49+
},
50+
text: {
51+
fontSize: extendedTheme.legends.text.fontSize,
52+
fill: extendedTheme.legends.text.fill,
53+
},
54+
ticks: {
55+
line: {},
56+
text: {
57+
fontSize: extendedTheme.legends.ticks.text.fontSize,
58+
fill: extendedTheme.legends.ticks.text.fill,
59+
},
60+
},
61+
}
62+
63+
const annotationsDefaults: CompleteTheme['annotations'] = {
64+
text: {
65+
fontSize: extendedTheme.annotations.text.fontSize,
66+
fill: extendedTheme.annotations.text.fill,
67+
outlineWidth: extendedTheme.annotations.text.outlineWidth,
68+
outlineColor: extendedTheme.annotations.text.outlineColor,
69+
outlineOpacity: extendedTheme.annotations.text.outlineOpacity,
70+
},
71+
link: {
72+
stroke: extendedTheme.annotations.link.stroke,
73+
strokeWidth: extendedTheme.annotations.link.strokeWidth,
74+
outlineWidth: extendedTheme.annotations.link.outlineWidth,
75+
outlineColor: extendedTheme.annotations.link.outlineColor,
76+
outlineOpacity: extendedTheme.annotations.link.outlineOpacity,
77+
},
78+
outline: {
79+
stroke: extendedTheme.annotations.outline.stroke,
80+
strokeWidth: extendedTheme.annotations.outline.strokeWidth,
81+
outlineWidth: extendedTheme.annotations.outline.outlineWidth,
82+
outlineColor: extendedTheme.annotations.outline.outlineColor,
83+
outlineOpacity: extendedTheme.annotations.outline.outlineOpacity,
84+
},
85+
symbol: {
86+
fill: extendedTheme.annotations.symbol.fill,
87+
outlineWidth: extendedTheme.annotations.symbol.outlineWidth,
88+
outlineColor: extendedTheme.annotations.symbol.outlineColor,
89+
outlineOpacity: extendedTheme.annotations.symbol.outlineOpacity,
90+
},
91+
}
92+
93+
const tooltipDefaults: CompleteTheme['tooltip'] = {
94+
container: {
95+
background: '#ffffff',
96+
color: extendedTheme.textColor,
97+
fontSize: 12,
98+
},
99+
basic: {},
100+
chip: {},
101+
table: {},
102+
tableCell: {},
103+
tableCellValue: {},
104+
}
105+
106+
export const defaultTheme: CompleteTheme = {
107+
background: '#ffffff', // defaultTheme.background,
108+
textColor: extendedTheme.textColor,
109+
fontSize: extendedTheme.fontSize,
110+
axis: axisDefaults,
111+
grid: gridDefaults,
112+
legends: legendsDefaults,
113+
annotations: annotationsDefaults,
114+
tooltip: tooltipDefaults,
115+
}

‎website/src/components/guides/theming/index.ts

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export * from './defaults'
2+
export * from './props'
3+
export * from './ThemedBar'
4+
export * from './ThemedHeatMap'
5+
export * from './ThemedLine'
6+
export * from './ThemedRadialBar'

‎website/src/components/guides/theming/props.ts

+410
Large diffs are not rendered by default.

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const props: ChartProperty[] = [
3131
}[]
3232
}[]
3333
\`\`\`
34-
`
34+
`,
3535
},
3636
{
3737
key: 'minValue',

‎website/src/pages/guides/theming.tsx

+56-464
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)
Please sign in to comment.