Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
return (
<div>
<div>
</div></div>
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>
patterns applied to various nivo components.
</div>
cellShape: 'rect',
cellOpacity: 1,
cellBorderWidth: 0,
cellBorderColor: {
from: 'color',
modifiers: [['darker', 0.4]],
},
enableLabels: true,
labelTextColor: {
from: 'color',
modifiers: [['darker', 1.8]],
},
defs: [
patternLinesDef('lines', {
background: 'inherit',
color: 'rgba(0, 0, 0, 0.1)',
rotation: -45,
lineWidth: 4,
spacing: 7,
}),
],
fill: [{ match: d => false && d.value < 30, id: 'lines' }],
animate: true,
motionStiffness: 80,
motionDamping: 9,
isInteractive: true,
hoverTarget: 'cell',
cellHoverOpacity: 1,
defs: (value, values) => {
if (!values['showcase pattern usage']) return
return [
patternDotsDef('dots', {
background: 'inherit',
color: 'rgba(255, 255, 255, 0.3)',
size: 4,
padding: 1,
stagger: true,
}),
patternLinesDef('lines', {
background: 'inherit',
color: 'rgba(255, 255, 255, 0.3)',
rotation: -45,
lineWidth: 6,
spacing: 10,
}),
]
},
fill: (value, values) => {
groupMode: 'stacked',
layout: 'vertical',
reverse: false,
colors: { scheme: 'nivo' },
colorBy: 'id',
defs: [
patternDotsDef('dots', {
background: 'inherit',
color: '#38bcb2',
size: 4,
padding: 1,
stagger: true,
}),
patternLinesDef('lines', {
background: 'inherit',
color: '#eed312',
rotation: -45,
lineWidth: 6,
spacing: 10,
}),
],
fill: [
{ match: { id: 'fries' }, id: 'dots' },
{ match: { id: 'sandwich' }, id: 'lines' },
],
borderRadius: 0,
borderWidth: 0,
borderColor: {
from: 'color',
modifiers: [['darker', 1.6]],
stories.add('patterns', () => (
))
{settings => (
<svg height="{SAMPLE_SIZE}" width="{SAMPLE_SIZE}">
<defs></defs>
<rect fill="{`url(#${patternId})`}" height="{SAMPLE_SIZE}" width="{SAMPLE_SIZE}"></rect>
</svg>
)}
<div>
</div>
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' },
bottom: 20,
left: 60,
},
minValue: 'auto',
maxValue: 'auto',
defs: [
patternDotsDef('dots', {
background: 'inherit',
color: '#38bcb2',
size: 4,
padding: 1,
stagger: true,
}),
patternLinesDef('lines', {
background: 'inherit',
color: '#eed312',
rotation: -45,
lineWidth: 6,
spacing: 10,
}),
],
fill: [
{ match: { id: 'fries' }, id: 'dots' },
{ match: { id: 'sandwich' }, id: 'lines' },
],
borderWidth: 1,
borderColor: {
type: 'inherit:darker',
gamma: 1.6,
},