Style chart with only needed attributes
This commit is contained in:
parent
c33ffbf27d
commit
e48b9d1fae
50
src/App.tsx
50
src/App.tsx
|
@ -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>
|
||||
)
|
||||
|
|
Loading…
Reference in New Issue