Style chart with only needed attributes

This commit is contained in:
Hristo Nedelkov 2023-08-07 12:15:07 +03:00
parent c33ffbf27d
commit e48b9d1fae
1 changed files with 19 additions and 31 deletions

View File

@ -1,7 +1,7 @@
import './App.css'
import { TamaguiProvider } from 'tamagui'
import { Provider as StatusProvider } from '@status-im/components'
import { ResponsivePie } from '@nivo/pie'
import { Pie } from '@nivo/pie'
import config from '../tamagui.config'
@ -15,16 +15,24 @@ interface MyPieProps {
data: Data[]
}
const MyResponsivePie = (props: MyPieProps) => {
const MyPie = (props: MyPieProps) => {
const { data } = props
console.log(data.color)
return (
<>
<ResponsivePie
<Pie
data={data}
innerRadius={0.5}
padAngle={0.7}
cornerRadius={3}
width={74.57}
height={74.57}
margin={{ top: 40, right: 80, bottom: 80, left: 80 }}
innerRadius={0.65}
colors={datum => datum.data.color}
fit={false}
activeOuterRadiusOffset={8}
enableArcLinkLabels={false}
arcLinkLabelsColor={{ from: 'color' }}
enableArcLabels={false}
legends={[]}
/>
</>
)
@ -35,41 +43,21 @@ function App() {
{
id: 'php',
label: 'php',
value: 127,
color: 'hsl(236, 70%, 50%)',
value: 70,
color: '#ea5e78',
},
{
id: 'javascript',
label: 'javascript',
value: 540,
color: 'hsl(249, 70%, 50%)',
},
{
id: 'java',
label: 'java',
value: 240,
color: 'hsl(72, 70%, 50%)',
},
{
id: 'python',
label: 'python',
value: 435,
color: 'hsl(122, 70%, 50%)',
},
{
id: 'scala',
label: 'scala',
value: 197,
color: 'hsl(186, 70%, 50%)',
value: 30,
color: '#ecedf0',
},
]
return (
<TamaguiProvider config={config}>
<StatusProvider>
<div style={{ height: '500px', width: '300px' }}>
<MyResponsivePie data={data} />
</div>
<MyPie data={data} />
</StatusProvider>
</TamaguiProvider>
)