feat(website): create new demo charts for the homepage

website/src/components/home/HomeBarDemo.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { Bar } from '@nivo/bar'
+import { generateCountriesData } from '@nivo/generators'
+import { useHomeTheme } from './theme'
+import { dimensions } from './dimensions'
+
+export const HomeBarDemo = ({ isHorizontal = false }: { isHorizontal: boolean }) => {
+    const { colors, nivoTheme } = useHomeTheme()
+    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 (
+        <div id={`bar-${isHorizontal ? 'horizontal' : 'vertical'}`}>
+            <Bar
+                width={dimensions.width}
+                height={dimensions.height}
+                margin={dimensions.margin}
+                data={data}
+                indexBy="country"
+                keys={keys}
+                layout={isHorizontal ? 'horizontal' : 'vertical'}
+                groupMode={isHorizontal ? 'stacked' : 'grouped'}
+                padding={0.1}
+                colors={colors}
+                borderWidth={1}
+                borderColor={colors[3]}
+                theme={nivoTheme}
+                enableGridX
+                enableGridY
+                enableLabel={false}
+                animate={false}
+                isInteractive={false}
+                axisLeft={null}
+                axisBottom={null}
+            />
+        </div>
+    )
+}

website/src/components/home/HomeCalendarDemo.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import styled from 'styled-components'
+import { generateDayCounts } from '@nivo/generators'
+import { Calendar } from '@nivo/calendar'
+import { useHomeTheme } from './theme'
+import { dimensions } from './dimensions'
+
+const calendarFrom = new Date(2015, 3, 1)
+const calendarTo = new Date(2017, 5, 1)
+const calendarData = generateDayCounts(calendarFrom, calendarTo)
+
+export const HomeCalendarDemo = () => {
+    const { colors, nivoTheme } = useHomeTheme()
+
+    return (
+        <Container id="calendar">
+            <Calendar
+                width={dimensions.width}
+                height={dimensions.height}
+                margin={dimensions.margin}
+                from={calendarFrom}
+                to={calendarTo}
+                data={calendarData}
+                dayBorderWidth={1}
+                yearSpacing={60}
+                emptyColor={colors[1]}
+                dayBorderColor={colors[3]}
+                monthBorderColor={colors[3]}
+                colors={[colors[0], colors[2]]}
+                isInteractive={false}
+                theme={nivoTheme}
+            />
+        </Container>
+    )
+}
+
+const Container = styled.div`
+    svg text {
+        display: none;
+    }
+`

website/src/components/home/HomeChordDemo.tsx

@@ -0,0 +1,33 @@
+import React, { useMemo } from 'react'
+import { generateChordData } from '@nivo/generators'
+import { ChordCanvas } from '@nivo/chord'
+import { useHomeTheme } from './theme'
+import { dimensions } from './dimensions'
+
+export const HomeChordDemo = () => {
+    const { colors, nivoTheme } = useHomeTheme()
+    const { matrix, keys } = useMemo(() => generateChordData({ size: 7 }), [])
+
+    return (
+        <div id="chord">
+            <ChordCanvas
+                width={dimensions.width}
+                height={dimensions.height}
+                margin={dimensions.margin}
+                data={matrix}
+                keys={keys}
+                colors={colors}
+                padAngle={0.04}
+                innerRadiusRatio={0.9}
+                enableLabel={false}
+                isInteractive={false}
+                animate={false}
+                arcBorderWidth={1}
+                arcBorderColor={colors[3]}
+                ribbonBorderWidth={1}
+                ribbonBorderColor={colors[3]}
+                theme={nivoTheme}
+            />
+        </div>
+    )
+}

website/src/components/home/HomeCirclePackingDemo.tsx

@@ -0,0 +1,31 @@
+import React, { useMemo } from 'react'
+import { generateLibTree } from '@nivo/generators'
+import { CirclePacking } from '@nivo/circle-packing'
+import { useHomeTheme } from './theme'
+import { dimensions } from './dimensions'
+
+export const HomeCirclePackingDemo = () => {
+    const { reversedColors, nivoTheme } = useHomeTheme()
+    const data = useMemo(() => generateLibTree(), [])
+
+    return (
+        <div id="circle-packing">
+            <CirclePacking
+                width={dimensions.width}
+                height={dimensions.height}
+                margin={dimensions.margin}
+                data={data}
+                id="name"
+                value="loc"
+                colors={reversedColors}
+                colorBy="depth"
+                childColor="noinherit"
+                padding={1}
+                enableLabels={false}
+                animate={false}
+                isInteractive={false}
+                theme={nivoTheme}
+            />
+        </div>
+    )
+}

website/src/components/home/HomeLineDemo.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { generateDrinkStats } from '@nivo/generators'
+import { Line } from '@nivo/line'
+import { useHomeTheme } from './theme'
+import { dimensions } from './dimensions'
+
+export const HomeLineDemo = () => {
+    const { colors, nivoTheme } = useHomeTheme()
+
+    return (
+        <div id="line">
+            <Line
+                width={dimensions.width}
+                height={dimensions.height}
+                margin={{ top: 10, bottom: 15, left: 24, right: 10 }}
+                data={generateDrinkStats(12)}
+                yScale={{ type: 'linear', stacked: true }}
+                lineWidth={4}
+                curve="monotoneX"
+                theme={nivoTheme}
+                colors={colors}
+                animate={false}
+                isInteractive={false}
+                pointSize={16}
+                axisLeft={null}
+                axisBottom={null}
+            />
+        </div>
+    )
+}

website/src/components/home/HomePieDemo.tsx

@@ -0,0 +1,37 @@
+import React, { useMemo } from 'react'
+import { generateProgrammingLanguageStats } from '@nivo/generators'
+import { Pie } from '@nivo/pie'
+import { useHomeTheme } from './theme'
+import { dimensions } from './dimensions'
+
+export const HomePieDemo = () => {
+    const { colors, nivoTheme } = useHomeTheme()
+    const data = useMemo(
+        () =>
+            generateProgrammingLanguageStats(true, 12).map(d => ({
+                id: d.label,
+                ...d,
+            })),
+        []
+    )
+
+    return (
+        <div id="pie">
+            <Pie
+                width={dimensions.width}
+                height={dimensions.height}
+                margin={dimensions.margin}
+                data={data}
+                innerRadius={0.6}
+                enableArcLabels={false}
+                enableArcLinkLabels={false}
+                colors={colors}
+                borderWidth={1}
+                borderColor={colors[3]}
+                animate={false}
+                isInteractive={false}
+                theme={nivoTheme}
+            />
+        </div>
+    )
+}

website/src/components/home/HomeRadarDemo.tsx

@@ -0,0 +1,38 @@
+import React, { useMemo } from 'react'
+import styled from 'styled-components'
+import { generateWinesTastes } from '@nivo/generators'
+import { Radar } from '@nivo/radar'
+import { useHomeTheme } from './theme'
+import { dimensions } from './dimensions'
+
+export const HomeRadarDemo = () => {
+    const { colors, nivoTheme } = useHomeTheme()
+    const data = useMemo(() => generateWinesTastes(), [])
+
+    return (
+        <Container id="radar">
+            <Radar
+                {...data}
+                width={dimensions.width}
+                height={dimensions.height}
+                indexBy="taste"
+                margin={dimensions.margin}
+                theme={nivoTheme}
+                colors={colors}
+                curve="linearClosed"
+                dotSize={7}
+                dotBorderWidth={1}
+                dotBorderColor={colors[1]}
+                enableDotLabel={false}
+                animate={false}
+                isInteractive={false}
+            />
+        </Container>
+    )
+}
+
+const Container = styled.div`
+    svg text {
+        display: none;
+    }
+`

website/src/components/home/HomeSankeyDemo.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { generateSankeyData } from '@nivo/generators'
+import { Sankey } from '@nivo/sankey'
+import { useHomeTheme } from './theme'
+import { dimensions } from './dimensions'
+
+export const HomeSankeyDemo = () => {
+    const { colors, nivoTheme } = useHomeTheme()
+
+    return (
+        <div id="sankey">
+            <Sankey
+                width={dimensions.width}
+                height={dimensions.height}
+                margin={dimensions.margin}
+                data={generateSankeyData({ nodeCount: 11, maxIterations: 2 })}
+                theme={nivoTheme}
+                colors={colors}
+                animate={false}
+                isInteractive={false}
+                enableLabels={false}
+                nodeBorderColor={{ from: 'color' }}
+                nodeOpacity={1}
+                nodeThickness={12}
+                nodeInnerPadding={2}
+                nodeSpacing={20}
+                nodeBorderWidth={0}
+                linkOpacity={0.6}
+                linkBlendMode="normal"
+                linkContract={1}
+                labelTextColor={{ from: 'color' }}
+            />
+        </div>
+    )
+}

website/src/components/home/HomeStreamDemo.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import range from 'lodash/range'
+import random from 'lodash/random'
+import { Stream } from '@nivo/stream'
+import { useHomeTheme } from './theme'
+import { dimensions } from './dimensions'
+
+const streamDataLayerCount = 5
+const generateStreamData = () =>
+    range(16).map(() =>
+        range(streamDataLayerCount).reduce((acc, i) => {
+            acc[i] = random(10, 200)
+            return acc
+        }, {})
+    )
+
+export const HomeStreamDemo = () => {
+    const { reversedColors, nivoTheme } = useHomeTheme()
+
+    return (
+        <div id="stream">
+            <Stream
+                width={dimensions.width}
+                height={dimensions.height}
+                data={generateStreamData()}
+                margin={dimensions.margin}
+                keys={range(streamDataLayerCount)}
+                theme={nivoTheme}
+                colors={reversedColors}
+                animate={false}
+                isInteractive={false}
+                enableGridX
+                axisLeft={null}
+                axisBottom={null}
+                offsetType="silhouette"
+            />
+        </div>
+    )
+}

website/src/components/home/HomeSunburstDemo.tsx

@@ -0,0 +1,28 @@
+import React, { useMemo } from 'react'
+import { generateLibTree } from '@nivo/generators'
+import { Sunburst } from '@nivo/sunburst'
+import { useHomeTheme } from './theme'
+import { dimensions } from './dimensions'
+
+export const HomeSunburstDemo = () => {
+    const { colors, nivoTheme } = useHomeTheme()
+    const data = useMemo(() => generateLibTree(), [])
+
+    return (
+        <div id="sunburst">
+            <Sunburst
+                width={dimensions.width}
+                height={dimensions.height}
+                margin={dimensions.margin}
+                data={data}
+                id="name"
+                value="loc"
+                animate={false}
+                isInteractive={false}
+                colors={colors}
+                borderColor={colors[3]}
+                theme={nivoTheme}
+            />
+        </div>
+    )
+}