| | |
| | | |
| | | import * as React from 'react'; |
| | | import { Pie, PieChart, ResponsiveContainer, Tooltip } from 'recharts'; |
| | | import { Card } from "@mui/material"; |
| | | import { Card, CardHeader } from "@mui/material"; |
| | | import { useTranslate } from "react-admin"; |
| | | |
| | | |
| | | const NbPie = ({ deadStock }) => { |
| | | const NbPie = ({ deadStock, locUsage }) => { |
| | | const translate = useTranslate(); |
| | | |
| | | const data01 = [ |
| | | { name: 'Group A', value: 400 }, |
| | | { name: 'Group B', value: 300 }, |
| | | { name: 'Group C', value: 300 }, |
| | | { name: 'Group D', value: 200 }, |
| | | { name: 'Group E', value: 278 }, |
| | | { name: 'Group F', value: 189 }, |
| | | ]; |
| | | |
| | | const data02 = [ |
| | | { name: 'Group A', value: 2400 }, |
| | | { name: 'Group B', value: 4567 }, |
| | | { name: 'Group C', value: 1398 }, |
| | | { name: 'Group D', value: 9800 }, |
| | | { name: 'Group E', value: 3908 }, |
| | | { name: 'Group F', value: 4800 }, |
| | | ]; |
| | | console.log(locUsage); |
| | | |
| | | return ( |
| | | <> |
| | | <Card> |
| | | <Card sx={{ |
| | | width: '100%', |
| | | maxHeight: 570, |
| | | flexDirection: 'column', |
| | | flex: '1', |
| | | '& a': { |
| | | textDecoration: 'none', |
| | | color: 'inherit', |
| | | }, |
| | | }}> |
| | | <CardHeader title={translate('page.dashboard.header.stockUsage')} /> |
| | | <ResponsiveContainer width="100%" height="100%"> |
| | | <PieChart width={400} height={400}> |
| | | <Pie |
| | | dataKey="value" |
| | | isAnimationActive={false} |
| | | data={data01} |
| | | data={locUsage} |
| | | cx="50%" |
| | | cy="50%" |
| | | cy="40%" |
| | | outerRadius={80} |
| | | fill="#8884d8" |
| | | label |
| | | /> |
| | | <Pie dataKey="value" data={data02} cx={500} cy={200} innerRadius={40} outerRadius={80} fill="#82ca9d" /> |
| | | <Tooltip /> |
| | | </PieChart> |
| | | </ResponsiveContainer> |