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 './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>
|
||||||
)
|
)
|
||||||
|
|
Loading…
Reference in New Issue