38 lines
1.0 KiB
TypeScript
38 lines
1.0 KiB
TypeScript
import {ResponsivePie} from '@nivo/pie'
|
|
import React, {FC} from 'react'
|
|
|
|
type Props = {
|
|
title: string
|
|
data: {
|
|
id: string
|
|
label: string
|
|
value: number
|
|
}[]
|
|
}
|
|
|
|
export const Pie: FC<Props> = ({title, data}) => {
|
|
return (
|
|
<div
|
|
className="m-auto bg-white rounded-md p-4 shadow-sm hover:shadow transition-shadow duration-300"
|
|
style={{ height: '36rem', width: '36rem' }}
|
|
>
|
|
<h3 className="text-lg leading-6 font-medium text-gray-900">{title}</h3>
|
|
<ResponsivePie
|
|
data={data}
|
|
margin={{top: 40, right: 80, bottom: 80, left: 80}}
|
|
innerRadius={0.5}
|
|
padAngle={0.7}
|
|
cornerRadius={3}
|
|
activeOuterRadiusOffset={8}
|
|
borderWidth={1}
|
|
borderColor={{from: 'color', modifiers: [['darker', 0.2]]}}
|
|
arcLinkLabelsSkipAngle={10}
|
|
arcLinkLabelsTextColor="#333333"
|
|
arcLinkLabelsThickness={2}
|
|
arcLinkLabelsColor={{from: 'color'}}
|
|
arcLabelsSkipAngle={10}
|
|
arcLabelsTextColor={{from: 'color', modifiers: [['darker', 2]]}}
|
|
/>
|
|
</div>
|
|
)
|
|
} |