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