How to use the @nivo/generators.generateProgrammingLanguageStats function in @nivo/generators

import React from 'react'
import { storiesOf } from '@storybook/react'
import { withKnobs, select } from '@storybook/addon-knobs'
import { generateProgrammingLanguageStats } from '@nivo/generators'
import { Pie } from '../index'

const commonProperties = {
    width: 600,
    height: 600,
    margin: { top: 80, right: 120, bottom: 80, left: 120 },
    data: generateProgrammingLanguageStats(true, 9).map(d => ({
        id: d.label,
        ...d,
    })),
    animate: true,
}

const stories = storiesOf('Pie', module)

stories.addDecorator(story =&gt; <div>{story()}</div>).addDecorator(withKnobs)

stories.add('default', () =&gt; )

stories.add('donut', () =&gt; )

stories.add('fancy slices', () =&gt; (

const generateData = () =>
    generateProgrammingLanguageStats(true, DATASET_SIZE).map(d => ({
        id: d.label,
        ...d,
    }))

import React from 'react'
import { storiesOf } from '@storybook/react'
import { withKnobs } from '@storybook/addon-knobs'
import { generateProgrammingLanguageStats } from '@nivo/generators'
import { Pie } from '../src'

const commonProperties = {
    width: 900,
    height: 500,
    margin: { top: 80, right: 120, bottom: 80, left: 120 },
    data: generateProgrammingLanguageStats(true, 9).map(d => ({
        id: d.label,
        ...d,
    })),
    animate: true,
}

const stories = storiesOf('Pie', module)

stories.addDecorator(withKnobs)

stories.add('default', () => )

stories.add('donut', () => )

stories.add('fancy slices', () => (

const generateData = () =>
    generateProgrammingLanguageStats(true, DATASET_SIZE).map(d => ({
        id: d.label,
        ...d,
    }))

const generateData = () =>
    generateProgrammingLanguageStats(true, DATASET_SIZE).map(d => ({
        id: d.label,
        ...d,
    }))

const Pie = () => (
    <div>
         ({
                id: d.label,
                ...d,
            }))}
            colors={colors}
            innerRadius={0.4}
            enableRadialLabels={false}
            borderWidth={3}
            borderColor="#000"
            slicesLabelsSkipAngle={10}
            animate={false}
            isInteractive={false}
        /&gt;
        <div>PIE</div>
    </div>
)

{...commonAxes}
                    />
                    <span>
                        <span>Stream documentation</span>
                    </span>
                
                
                    
                         ({
                                id: d.label,
                                ...d,
                            }))}
                            innerRadius={0.6}
                            enableSlicesLabels={false}
                            radialLabelsLinkDiagonalLength={10}
                            radialLabelsLinkHorizontalLength={16}
                            colors={colors}
                            colorBy="id"
                            animate={false}
                            isInteractive={false}
                            theme={homeTheme}
                        /&gt;
                        <span>
                            <span>Pie documentation</span>
                        </span>

const generateData = () =>
    generateProgrammingLanguageStats(true, DATASET_SIZE).map(d => ({
        id: d.label,
        ...d,
    }))