107 lines
3.3 KiB
TypeScript
107 lines
3.3 KiB
TypeScript
import { Box, Card, Typography, useTheme } from "@mui/material";
|
|
import GrainDescriber from "grain/GrainDescriber";
|
|
import { Contract } from "models/Contract";
|
|
import { Label, Pie, PieChart, ResponsiveContainer, Text } from "recharts";
|
|
|
|
interface Props {
|
|
contract: Contract;
|
|
}
|
|
|
|
export default function ContractVisualizer(props: Props) {
|
|
const { contract } = props;
|
|
const theme = useTheme();
|
|
|
|
return (
|
|
<Card style={{ height: "100%", padding: 10 }}>
|
|
<Box height={"15%"}>
|
|
<Typography style={{ fontWeight: 650, fontSize: 20 }}>
|
|
{GrainDescriber(contract.grain()).name}
|
|
</Typography>
|
|
<Typography style={{ fontWeight: 650, fontSize: 15 }}>
|
|
{contract.deliveredInPreferredUnit().toFixed(2)}/
|
|
{contract.sizeInPreferredUnit().toFixed(2)} {contract.unit}
|
|
</Typography>
|
|
</Box>
|
|
<ResponsiveContainer height={"85%"}>
|
|
<PieChart>
|
|
{/* <Legend
|
|
verticalAlign="bottom"
|
|
content={() => (
|
|
<Box textAlign="center" marginY={0.5}>
|
|
<Chip label={contract.commodityLabel()} />
|
|
</Box>
|
|
)}
|
|
/> */}
|
|
<Pie
|
|
outerRadius={"100%"}
|
|
innerRadius="70%"
|
|
stroke="transparent"
|
|
data={[
|
|
{
|
|
name: "",
|
|
value: contract.settings.delivered,
|
|
fill: contract.colour
|
|
},
|
|
{
|
|
name: "",
|
|
value: contract.settings.size - contract.settings.delivered
|
|
}
|
|
]}
|
|
dataKey="value"
|
|
cx="50%"
|
|
cy="50%">
|
|
<Label
|
|
position="center"
|
|
fill={theme.palette.text.secondary}
|
|
fontSize={"2rem"}
|
|
fontWeight={650}
|
|
content={props => {
|
|
const { cx, cy } = props.viewBox as any;
|
|
return (
|
|
<g>
|
|
<Text
|
|
x={cx}
|
|
y={cy}
|
|
dy={-15}
|
|
textAnchor="middle"
|
|
verticalAnchor="middle"
|
|
fill={props.fill}
|
|
fontWeight={props.fontWeight}
|
|
fontSize={props.fontSize}>
|
|
{((contract.settings.delivered / contract.settings.size) * 100).toFixed(1) +
|
|
"%"}
|
|
</Text>
|
|
</g>
|
|
);
|
|
}}
|
|
/>
|
|
<Label
|
|
position="center"
|
|
fill={theme.palette.text.secondary}
|
|
fontSize={"1.5rem"}
|
|
fontWeight={650}
|
|
content={props => {
|
|
const { cx, cy } = props.viewBox as any;
|
|
return (
|
|
<g>
|
|
<Text
|
|
x={cx}
|
|
y={cy}
|
|
dy={15}
|
|
textAnchor="middle"
|
|
verticalAnchor="middle"
|
|
fill={props.fill}
|
|
fontWeight={props.fontWeight}
|
|
fontSize={props.fontSize}>
|
|
Delivered
|
|
</Text>
|
|
</g>
|
|
);
|
|
}}
|
|
/>
|
|
</Pie>
|
|
</PieChart>
|
|
</ResponsiveContainer>
|
|
</Card>
|
|
);
|
|
}
|