GradientsIllustrations.js

import React from 'react'
import { useTheme } from 'styled-components'
import { linearGradientDef } from '@nivo/core'
import { ResponsiveBar } from '@nivo/bar'
import { ResponsiveStream } from '@nivo/stream'
import { ResponsiveTreeMap } from '@nivo/treemap'
import { generateCountriesData } from '@nivo/generators'
import { FullWidthBanner } from '../../styled'

const GradientsIllustrations = () => {
    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: 9 })}
                        indexBy="country"
                        keys={['a', 'b', 'c']}
                        offsetType="expand"
                        axisLeft={null}
                        axisBottom={null}
                        enableGridX={false}
                        defs={[
                            linearGradientDef('example1A', [
                                { offset: 0, color: '#faed94' },
                                { offset: 30, color: '#faf047' },
                                { offset: 100, color: '#e4b400' },
                            ]),
                            linearGradientDef('example1B', [
                                { offset: 0, color: '#a8f9eb' },
                                { offset: 30, color: '#97e3d5' },
                                { offset: 100, color: '#458a7d' },
                            ]),
                            linearGradientDef('example1C', [
                                { offset: 0, color: '#f9804e' },
                                { offset: 30, color: '#f96a3d' },
                                { offset: 100, color: '#a84f35' },
                            ]),
                        ]}
                        fill={[
                            { match: { id: 'a' }, id: 'example1A' },
                            { match: { id: 'b' }, id: 'example1B' },
                            { match: { id: 'c' }, id: 'example1C' },
                        ]}
                        isInteractive={false}
                        animate={false}
                        theme={theme.nivo}
                    />
                </div>
                <div className="guide__illustrations__item">
                    <ResponsiveBar
                        margin={{ top: 15, right: 10, bottom: -2, left: 10 }}
                        data={generateCountriesData(['a', 'b', 'c'], { size: 7 })}
                        indexBy="country"
                        keys={['a', 'b', 'c']}
                        colors={{ scheme: 'spectral' }}
                        padding={0.2}
                        axisLeft={null}
                        axisBottom={null}
                        enableGridY={false}
                        enableLabel={false}
                        defs={[
                            linearGradientDef('example2', [
                                { offset: 0, color: 'inherit' },
                                { offset: 40, color: 'inherit' },
                                { offset: 100, color: 'inherit', opacity: 0.6 },
                            ]),
                        ]}
                        fill={[{ match: '*', id: 'example2' }]}
                        borderWidth={1}
                        borderColor="inherit:darker(0.2)"
                        isInteractive={false}
                        animate={false}
                        theme={theme.nivo}
                    />
                </div>
                <div className="guide__illustrations__item">
                    <ResponsiveTreeMap
                        margin={{ top: -2, right: -2, bottom: -2, left: -2 }}
                        data={{
                            country: 'root',
                            children: generateCountriesData(['value'], { size: 9 }),
                        }}
                        colors={{ scheme: 'spectral' }}
                        colorBy="path"
                        identity="country"
                        leavesOnly={false}
                        borderWidth={1}
                        nodeOpacity={1}
                        borderColor={{ theme: 'background' }}
                        outerPadding={10}
                        innerPadding={4}
                        enableParentLabel={false}
                        isInteractive={false}
                        animate={false}
                        enableLabel={false}
                        defs={[
                            linearGradientDef('example2', [
                                { offset: 0, color: 'inherit' },
                                { offset: 40, color: 'inherit' },
                                { offset: 100, color: 'inherit', opacity: 0.3 },
                            ]),
                        ]}
                        fill={[{ match: '*', id: 'example2' }]}
                        theme={theme.nivo}
                    />
                </div>
                <div className="guide__illustrations__legend">
                    gradients applied to various nivo components.
                </div>
            </div>
        </FullWidthBanner>
    )
}

export default GradientsIllustrations