const Home = ({ colors, nivoTheme, isHorizontal = false }) => {
const data = isHorizontal
? generateCountriesData(['hot dogs', 'burgers', 'sandwich', 'kebab', 'fries', 'donut'], {
size: 9,
})
: generateCountriesData(['hot dogs', 'burgers', 'sandwich'], {
size: 11,
})
const keys = isHorizontal
? ['hot dogs', 'burgers', 'sandwich', 'kebab', 'fries', 'donut']
: ['hot dogs', 'burgers', 'sandwich']
return (
<HomeItem to="/bar">
<ResponsiveBar
data={data}
indexBy="country"
keys={keys}
layout={isHorizontal ? 'horizontal' : 'vertical'}
groupMode={isHorizontal ? 'stacked' : 'grouped'}
margin={{ top: 10, bottom: 15, left: 24, right: 10 }}
padding={isHorizontal ? 0.4 : 0.2}
colors={colors}
theme={nivoTheme}
enableGridX={isHorizontal}
enableGridY={!isHorizontal}
enableLabel={false}
animate={false}
isInteractive={false}
{...commonAxes}
/>
<HomeItemLabel>
<span>Bar documentation</span>
</HomeItemLabel>
</HomeItem>
)
}
const Background = () => (
<div className="Background">
<ResponsiveStream
data={generateCountriesData(['rock', 'jazz', 'hip-hop', 'reggae', 'folk'], { size: 7 })}
keys={['rock', 'jazz', 'hip-hop', 'reggae', 'folk']}
colors={['#dcd6c6', '#f4e3b5', '#dea499', '#e1cc8d', '#776537']}
enableGridX={false}
enableGridY={false}
axisBottom={null}
borderColor="#000000"
offsetType="expand"
borderWidth={10}
/>
</div>
)
const Bubble = () => (
<div>
<ResponsiveBubble
root={{
country: 'root',
children: generateCountriesData(['value'], { size: 24 }),
}}
identity="country"
value="value"
leavesOnly={true}
colors={colors}
labelTextColor="#000"
labelSkipRadius={12}
colorBy="country"
borderWidth={3}
borderColor="#000"
padding={6}
isInteractive={false}
/>
<div className="Title">BUBBLE</div>
</div>
)
generateDrinkStats,
generateCountriesData,
generateProgrammingLanguageStats,
generateWinesTastes,
generateSankeyData,
} = require('@nivo/generators')
const keys = ['hot dogs', 'burgers', 'sandwich', 'kebab', 'fries', 'donut']
module.exports = {
bar: {
type: 'bar',
props: {
width: 1400,
height: 600,
data: generateCountriesData(keys, { size: 24 }),
keys,
indexBy: 'country',
colors: 'nivo',
},
},
bubble: {
type: 'bubble',
props: {
width: 600,
height: 600,
root: generateLibTree(),
identity: 'name',
value: 'loc',
label: 'name',
margin: { top: 0, right: 0, bottom: 0, left: 0 },
const PatternsIllustrations = () => {
const theme = useTheme()
return (
<FullWidthBanner>
<div className="guide__illustrations">
<div className="guide__illustrations__item">
<ResponsiveStream
margin={{ top: -2, right: -2, bottom: -2, left: -2 }}
data={generateCountriesData(['a', 'b', 'c'], { size: 7 })}
indexBy="country"
keys={['a', 'b', 'c']}
offsetType="expand"
axisLeft={null}
axisBottom={null}
enableGridX={false}
defs={[
patternLinesDef('example1.lines.1', {
rotation: 45,
lineWidth: 4,
spacing: 6,
background: 'transparent',
color: 'inherit',
}),
patternLinesDef('example1.lines.2', {
rotation: -45,
lineWidth: 1,
spacing: 3,
background: 'transparent',
color: 'inherit',
}),
patternDotsDef('example1.dots', {
background: 'transparent',
color: 'inherit',
size: 4,
padding: 0,
stagger: true,
}),
]}
fill={[
{ match: { id: 'a' }, id: 'example1.lines.1' },
{ match: { id: 'b' }, id: 'example1.dots' },
{ match: { id: 'c' }, id: 'example1.lines.2' },
]}
borderWidth={2}
borderColor={'#333'}
isInteractive={false}
animate={false}
theme={theme.nivo}
/>
</div>
<div className="guide__illustrations__item">
<ResponsiveBar
margin={{ top: 15, right: -2, bottom: -2, left: -2 }}
data={generateCountriesData(['a', 'b', 'c'], { size: 7 })}
indexBy="country"
keys={['a', 'b', 'c']}
colors={{ scheme: 'spectral' }}
padding={0.3}
axisLeft={null}
axisBottom={null}
enableGridY={false}
enableLabel={false}
colorBy="index"
defs={[
patternLinesDef('example2.lines', {
rotation: -45,
lineWidth: 4,
spacing: 6,
background: 'transparent',
color: 'inherit',
}),
patternDotsDef('example2.dots', {
background: 'transparent',
color: 'inherit',
size: 4,
padding: 0,
stagger: true,
}),
patternSquaresDef('example2.squares', {
background: 'transparent',
color: 'inherit',
stagger: true,
size: 8,
padding: 0,
}),
]}
fill={[
{ match: d => d.data.index % 3 === 0, id: 'example2.lines' },
{ match: d => d.data.index % 3 === 1, id: 'example2.dots' },
{ match: d => d.data.index % 3 === 2, id: 'example2.squares' },
]}
borderWidth={2}
borderColor="inherit"
isInteractive={false}
animate={false}
theme={theme.nivo}
/>
</div>
<div className="guide__illustrations__item">
<ResponsiveTreeMap
margin={{ top: -2, right: -2, bottom: -2, left: -2 }}
root={{
country: 'root',
children: generateCountriesData(['value'], { size: 9 }),
}}
identity="country"
value="value"
leavesOnly={true}
colors={{ scheme: 'spectral' }}
colorBy="country"
borderWidth={4}
outerPadding={8}
innerPadding={8}
borderColor="inherit"
isInteractive={false}
animate={false}
enableLabel={false}
defs={[
patternLinesDef('example3.lines', {
rotation: -45,
lineWidth: 4,
spacing: 6,
background: 'transparent',
color: 'inherit',
}),
]}
fill={[{ match: '*', id: 'example3.lines' }]}
theme={theme.nivo}
/>
</div>
<div className="guide__illustrations__legend">
patterns applied to various nivo components.
</div>
</div>
</FullWidthBanner>
)
}
export const generateHeavyDataSet = () => ({
data: generateCountriesData(dishes, { size: 22, min: 0, max: 100 }),
keys: dishes,
})
export const generateLightDataSet = () => ({
data: generateCountriesData(dishes.slice(0, 11), { size: 9, min: 0, max: 100 }),
keys: dishes.slice(0, 11),
})