Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
feat(website): improve theming guide
  • Loading branch information
plouc committed Jan 12, 2022
1 parent da44298 commit 02da858
Show file tree
Hide file tree
Showing 11 changed files with 872 additions and 471 deletions.
12 changes: 6 additions & 6 deletions packages/core/index.d.ts
Expand Up @@ -86,14 +86,14 @@ declare module '@nivo/core' {
}>
text: Partial<React.CSSProperties>
}
title: {
text: Partial<React.CSSProperties>
}
text: Partial<React.CSSProperties>
ticks: {
line: Partial<React.CSSProperties>
text: Partial<React.CSSProperties>
}
title: {
text: Partial<React.CSSProperties>
}
}
labels: {
text: Partial<React.CSSProperties>
Expand Down Expand Up @@ -171,14 +171,14 @@ declare module '@nivo/core' {
symbol: CompleteTheme['legends']['hidden']['symbol']
text: CompleteTheme['legends']['hidden']['text']
}>
title: Partial<{
text: Partial<CompleteTheme['legends']['title']['text']>
}>
text: Partial<CompleteTheme['legends']['text']>
ticks: Partial<{
line: Partial<CompleteTheme['legends']['ticks']['line']>
text: Partial<CompleteTheme['legends']['ticks']['text']>
}>
title: Partial<{
text: Partial<CompleteTheme['legends']['title']['text']>
}>
}>
labels: Partial<{
text: Partial<CompleteTheme['labels']['text']>
Expand Down
1 change: 1 addition & 0 deletions packages/core/src/theming/extend.js
Expand Up @@ -13,6 +13,7 @@ import set from 'lodash/set'
const fontProps = [
'axis.ticks.text',
'axis.legend.text',
'legends.title.text',
'legends.text',
'legends.ticks.text',
'legends.title.text',
Expand Down
75 changes: 75 additions & 0 deletions website/src/components/guides/theming/ThemedBar.tsx
@@ -0,0 +1,75 @@
import React from 'react'
import { CompleteTheme } from '@nivo/core'
import { ResponsiveBar } from '@nivo/bar'
import { colorSchemes } from '@nivo/colors'

export const ThemedBar = ({ theme }: { theme: CompleteTheme }) => {
return (
<ResponsiveBar
margin={{
top: 40,
right: 20,
bottom: 50,
left: 50,
}}
data={[
{ id: 'A', value: 12 },
{ id: 'B', value: 17 },
{ id: 'C', value: 9 },
{ id: 'D', value: 15 },
{ id: 'E', value: 23 },
]}
theme={theme}
colorBy="indexValue"
animate={false}
enableGridX={true}
axisBottom={{
legend: 'X axis legend',
legendPosition: 'middle',
legendOffset: 34,
}}
axisLeft={{
legend: 'Y axis legend',
legendPosition: 'middle',
legendOffset: -36,
}}
legends={[
{
anchor: 'top',
translateY: -28,
itemWidth: 40,
itemHeight: 12,
symbolSize: 12,
direction: 'row',
data: [
{
id: 'A',
label: 'A',
color: colorSchemes.nivo[0],
},
{
id: 'B',
label: 'B',
color: colorSchemes.nivo[1],
},
{
id: 'C',
label: 'C',
color: colorSchemes.nivo[2],
},
{
id: 'D',
label: 'D',
color: colorSchemes.nivo[3],
},
{
id: 'E',
label: 'E',
color: colorSchemes.nivo[4],
},
],
},
]}
/>
)
}
66 changes: 66 additions & 0 deletions website/src/components/guides/theming/ThemedHeatMap.tsx
@@ -0,0 +1,66 @@
import React, { useMemo } from 'react'
import { CompleteTheme } from '@nivo/core'
import { ResponsiveHeatMap } from '@nivo/heatmap'
import { generateXYSeries } from '@nivo/generators'

export const ThemedHeatMap = ({ theme }: { theme: CompleteTheme }) => {
const data = useMemo(
() =>
generateXYSeries({
serieIds: ['A', 'B', 'C', 'D', 'E'],
x: { values: ['A', 'B', 'C', 'D', 'E'] },
y: {
length: NaN,
min: -100,
max: 100,
round: true,
},
}),
[]
)

return (
<ResponsiveHeatMap
data={data}
margin={{
top: 40,
right: 70,
bottom: 50,
left: 50,
}}
theme={theme}
colors={{
type: 'diverging',
scheme: 'red_yellow_blue',
minValue: -100,
maxValue: 100,
}}
inactiveOpacity={0.35}
animate={false}
xOuterPadding={0.1}
yOuterPadding={0.1}
axisTop={null}
axisBottom={{
legend: 'X axis legend',
legendPosition: 'middle',
legendOffset: 34,
}}
axisLeft={{
legend: 'Y axis legend',
legendPosition: 'middle',
legendOffset: -36,
}}
legends={[
{
anchor: 'right',
direction: 'column',
translateX: 32,
length: 180,
thickness: 10,
ticks: [-100, -75, -50, -25, 0, 25, 50, 75, 100],
title: 'Legend Title →',
},
]}
/>
)
}
63 changes: 63 additions & 0 deletions website/src/components/guides/theming/ThemedLine.tsx
@@ -0,0 +1,63 @@
import React from 'react'
import { CompleteTheme } from '@nivo/core'
import { ResponsiveLine } from '@nivo/line'

export const ThemedLine = ({ theme }: { theme: CompleteTheme }) => {
return (
<ResponsiveLine
margin={{
top: 40,
right: 20,
bottom: 50,
left: 50,
}}
data={[
{
id: 'Serie 0',
data: [
{ x: 'A', y: 12 },
{ x: 'B', y: 17 },
{ x: 'C', y: 9 },
{ x: 'D', y: 15 },
{ x: 'E', y: 23 },
],
},
{
id: 'Serie 1',
data: [
{ x: 'A', y: 3 },
{ x: 'B', y: 7 },
{ x: 'C', y: 6 },
{ x: 'D', y: 12 },
{ x: 'E', y: 16 },
],
},
{
id: 'Serie 2',
data: [
{ x: 'A', y: 1 },
{ x: 'B', y: 2 },
{ x: 'C', y: 2 },
{ x: 'D', y: 5 },
{ x: 'E', y: 7 },
],
},
]}
enablePoints
enablePointLabel
pointSize={10}
theme={theme}
animate={false}
axisBottom={{
legend: 'X axis legend',
legendPosition: 'middle',
legendOffset: 34,
}}
axisLeft={{
legend: 'Y axis legend',
legendPosition: 'middle',
legendOffset: -36,
}}
/>
)
}
73 changes: 73 additions & 0 deletions website/src/components/guides/theming/ThemedRadialBar.tsx
@@ -0,0 +1,73 @@
import React, { useMemo } from 'react'
import { CompleteTheme } from '@nivo/core'
import { ResponsiveRadialBar } from '@nivo/radial-bar'

export const ThemedRadialBar = ({ theme }: { theme: CompleteTheme }) => {
const data = useMemo(
() => [
{
id: 'Supermarket',
data: [
{
x: 'Vegetables',
y: 60,
},
{
x: 'Fruits',
y: 22,
},
{
x: 'Meat',
y: 46,
},
],
},
{
id: 'Combini',
data: [
{
x: 'Vegetables',
y: 264,
},
{
x: 'Fruits',
y: 148,
},
{
x: 'Meat',
y: 246,
},
],
},
{
id: 'Online',
data: [
{
x: 'Vegetables',
y: 98,
},
{
x: 'Fruits',
y: 224,
},
{
x: 'Meat',
y: 83,
},
],
},
],
[]
)
return (
<ResponsiveRadialBar
margin={{
top: 36,
bottom: 36,
}}
data={data}
theme={theme}
animate={false}
/>
)
}

0 comments on commit 02da858

Please sign in to comment.