content: import React from 'react'
  import { ResponsivePie } from '@nivo/pie'
  // import { useTheme } from '@material-ui/core/styles';
  
  // make sure parent container have a defined height when using responsive component,
  // otherwise height will be 0 and no chart will be rendered.
  // website examples showcase many properties, you'll often use just a few of them.
  export default function CampaignPie ({ data }) {
    return (
  
      <ResponsivePie
        data={data}
        margin={{ top: 4, right: 8, bottom: 80, left: 8 }}
        startAngle={-180}
        sortByValue={true}
        colors={{ scheme: 'purple_blue' }}
        borderColor={{ from: 'color', modifiers: [['darker', 0.2]] }}
        enableRadialLabels={false}
        radialLabelsSkipAngle={8}
        radialLabelsTextColor="#333333"
        radialLabelsLinkColor={{ from: 'color' }}
        sliceLabelsRadiusOffset={0.65}
        sliceLabelsSkipAngle={11}
        sliceLabelsTextColor="#333333"
        defs={[
          {
            id: 'dots',
            type: 'patternDots',
            background: 'inherit',
            color: 'rgba(255, 255, 255, 0.3)',
            size: 4,
            padding: 1,
            stagger: true
          },
          {
            id: 'lines',
            type: 'patternLines',
            background: 'inherit',
            color: 'rgba(255, 255, 255, 0.3)',
            rotation: -45,
            lineWidth: 6,
            spacing: 10
          }
        ]}
  
        legends={[
          {
            anchor: 'bottom',
            direction: 'row',
            justify: false,
            translateX: 0,
            translateY: 56,
            itemsSpacing: 0,
            itemWidth: 100,
            itemHeight: 18,
            itemTextColor: '#999',
            itemDirection: 'left-to-right',
            itemOpacity: 1,
            symbolSize: 18,
            symbolShape: 'circle',
            effects: [
              {
                on: 'hover',
                style: {
                  itemTextColor: '#000'
                }
              }
            ]
          }
        ]}
      />
  
    )
  }
  