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

Author: plouc

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>
+    )
+}

website/src/components/home/HomeSwarmPlotDemo.tsx

@@ -0,0 +1,53 @@
+import React, { useMemo } from 'react'
+import { generateSwarmPlotData } from '@nivo/generators'
+import { SwarmPlot } from '@nivo/swarmplot'
+import { useHomeTheme } from './theme'
+import { dimensions } from './dimensions'
+
+export const HomeSwarmPlotDemo = () => {
+    const { colors, reversedColors, nivoTheme } = useHomeTheme()
+    const data = useMemo(() => generateSwarmPlotData(['thing'], { min: 50, max: 50 }), [])
+
+    return (
+        <div id="swarmplot">
+            <SwarmPlot
+                width={dimensions.width}
+                height={dimensions.height}
+                margin={{
+                    ...dimensions.margin,
+                    left: dimensions.margin.left * 3,
+                    right: dimensions.margin.right * 3,
+                }}
+                data={data.data}
+                groups={data.groups}
+                groupBy="group"
+                id="id"
+                value="price"
+                layout="horizontal"
+                valueScale={{
+                    type: 'linear',
+                    min: 0,
+                    max: 500,
+                }}
+                size={{
+                    key: 'volume',
+                    values: [4, 20],
+                    sizes: [10, 60],
+                }}
+                theme={nivoTheme}
+                colors={reversedColors}
+                borderWidth={1}
+                borderColor={colors[3]}
+                spacing={3}
+                enableGridY={false}
+                colorBy="id"
+                animate={false}
+                isInteractive={false}
+                axisTop={null}
+                axisRight={null}
+                axisBottom={null}
+                axisLeft={null}
+            />
+        </div>
+    )
+}

website/src/components/home/HomeTreeMapDemo.tsx

@@ -0,0 +1,37 @@
+import React, { useMemo } from 'react'
+import { generateLibTree } from '@nivo/generators'
+import { TreeMap } from '@nivo/treemap'
+import { useHomeTheme } from './theme'
+import { dimensions } from './dimensions'
+
+export const HomeTreeMapDemo = () => {
+    const { colors, nivoTheme } = useHomeTheme()
+    const data = useMemo(() => generateLibTree(), [])
+
+    return (
+        <div id="treemap">
+            <TreeMap
+                width={dimensions.width}
+                height={dimensions.height}
+                margin={dimensions.margin}
+                data={data}
+                identity="name"
+                value="loc"
+                valueFormat=".02s"
+                tile="squarify"
+                colors={colors}
+                leavesOnly={true}
+                borderWidth={1}
+                borderColor={colors[3]}
+                outerPadding={0}
+                innerPadding={0}
+                nodeOpacity={1}
+                animate={false}
+                isInteractive={false}
+                enableLabel={false}
+                labelTextColor={colors[1]}
+                theme={nivoTheme}
+            />
+        </div>
+    )
+}

website/src/components/home/HomeVoronoiDemo.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import range from 'lodash/range'
+import { Voronoi } from '@nivo/voronoi'
+import { useHomeTheme } from './theme'
+import { dimensions } from './dimensions'
+
+const voronoi = {
+    xDomain: [0, 400],
+    yDomain: [0, 300],
+}
+voronoi.data = range(80).map(id => ({
+    id,
+    x: Math.random() * voronoi.xDomain[1],
+    y: Math.random() * voronoi.yDomain[1],
+}))
+
+export const HomeVoronoiDemo = () => {
+    const { colors, nivoTheme } = useHomeTheme()
+
+    return (
+        <div id="voronoi">
+            <Voronoi
+                width={dimensions.width}
+                height={dimensions.height}
+                margin={dimensions.margin}
+                data={voronoi.data}
+                xDomain={voronoi.xDomain}
+                yDomain={voronoi.yDomain}
+                enableLinks={true}
+                linkLineColor={colors[2]}
+                cellLineColor={colors[3]}
+                cellLineWidth={2}
+                enablePoints={true}
+                pointSize={12}
+                pointColor={colors[3]}
+                isInteractive={false}
+                animate={false}
+                theme={nivoTheme}
+            />
+        </div>
+    )
+}

website/src/components/home/dimensions.ts

@@ -0,0 +1,10 @@
+export const dimensions = {
+    width: 600,
+    height: 400,
+    margin: {
+        top: 20,
+        right: 20,
+        bottom: 20,
+        left: 20,
+    },
+}

website/src/components/home/index.ts

@@ -0,0 +1,13 @@
+export * from './HomeBarDemo'
+export * from './HomeCalendarDemo'
+export * from './HomeChordDemo'
+export * from './HomeCirclePackingDemo'
+export * from './HomeLineDemo'
+export * from './HomePieDemo'
+export * from './HomeRadarDemo'
+export * from './HomeSankeyDemo'
+export * from './HomeStreamDemo'
+export * from './HomeSunburstDemo'
+export * from './HomeSwarmPlotDemo'
+export * from './HomeTreeMapDemo'
+export * from './HomeVoronoiDemo'

website/src/components/home/settings.js website/src/components/home/settings.ts

@@ -0,0 +1,47 @@
+import { useMemo } from 'react'
+import { useTheme } from 'styled-components'
+
+export const useHomeTheme = () => {
+    const theme = useTheme()
+
+    const { colors, reversedColors } = useMemo(() => {
+        const _colors: string[] = theme.colors.coloredRange.slice(1)
+        const _reversedColors = [..._colors].reverse()
+
+        return { colors: _colors, reversedColors: _reversedColors }
+    }, [theme])
+
+    const nivoTheme = useMemo(() => {
+        return {
+            axis: {
+                ticks: {
+                    line: {
+                        stroke: theme.colors.coloredRange[4],
+                    },
+                    text: {
+                        fill: theme.colors.coloredRange[4],
+                        fontSize: 9,
+                    },
+                },
+            },
+            grid: {
+                line: {
+                    stroke: theme.colors.coloredRange[4],
+                    strokeWidth: 2,
+                    strokeDasharray: '5,8',
+                },
+            },
+            labels: {
+                text: {
+                    fill: theme.colors.coloredRange[4],
+                },
+            },
+        }
+    }, [theme])
+
+    return {
+        colors,
+        reversedColors,
+        nivoTheme,
+    }
+}

website/src/components/home/theme.ts

@@ -0,0 +1,83 @@
+import React from 'react'
+import styled from 'styled-components'
+import {
+    HomeBarDemo,
+    HomeCalendarDemo,
+    HomeChordDemo,
+    HomeCirclePackingDemo,
+    HomeLineDemo,
+    HomePieDemo,
+    HomeRadarDemo,
+    HomeSankeyDemo,
+    HomeStreamDemo,
+    HomeSunburstDemo,
+    HomeSwarmPlotDemo,
+    HomeTreeMapDemo,
+    HomeVoronoiDemo,
+} from '../../components/home'
+
+const HomepageDemosPage = () => (
+    <Container>
+        <div>
+            <HomeBarDemo isHorizontal={false} />
+        </div>
+        <div>
+            <HomeBarDemo isHorizontal={true} />
+        </div>
+        <div>
+            <HomeCalendarDemo />
+        </div>
+        <div>
+            <HomeChordDemo />
+        </div>
+        <div>
+            <HomeCirclePackingDemo />
+        </div>
+        <div>
+            <HomeLineDemo />
+        </div>
+        <div>
+            <HomePieDemo />
+        </div>
+        <div>
+            <HomeRadarDemo />
+        </div>
+        <div>
+            <HomeSankeyDemo />
+        </div>
+        <div>
+            <HomeStreamDemo />
+        </div>
+        <div>
+            <HomeSunburstDemo />
+        </div>
+        <div>
+            <HomeSwarmPlotDemo />
+        </div>
+        <div>
+            <HomeTreeMapDemo />
+        </div>
+        <div>
+            <HomeVoronoiDemo />
+        </div>
+    </Container>
+)
+
+const Container = styled.div`
+    background: ${({ theme }) => theme.colors.coloredRange[2]};
+    // background: transparent;
+    display: flex;
+    flex-wrap: wrap;
+
+    & > * {
+        width: 300px;
+        height: 200px;
+    }
+
+    & > * > * {
+        transform-origin: top left;
+        transform: scale3d(0.5, 0.5, 1);
+    }
+`
+
+export default HomepageDemosPage