79 lines
2.5 KiB
TypeScript
79 lines
2.5 KiB
TypeScript
import { Box, Card, Typography } from "@mui/material";
|
|
import { Contract } from "models/Contract";
|
|
import { Transaction } from "models/Transaction";
|
|
import BarGraph, { BarData } from "charts/BarGraph";
|
|
import { useEffect, useState } from "react";
|
|
import moment, { Moment } from "moment";
|
|
import { getGrainUnit } from "utils";
|
|
import { pond } from "protobuf-ts/pond";
|
|
|
|
interface Props {
|
|
contract: Contract;
|
|
transactions: Transaction[];
|
|
}
|
|
|
|
export default function ContractTransactionGraph(props: Props) {
|
|
const { contract, transactions } = props;
|
|
const [data, setData] = useState<BarData[]>([]);
|
|
|
|
useEffect(() => {
|
|
let d: BarData[] = [];
|
|
transactions.forEach(t => {
|
|
let time: Moment = moment(t.transaction.timestamp);
|
|
let value = 0;
|
|
//this seems confusing but the transaction model contains the transaction as defined in the pond and then need to get the specific transaction data
|
|
//which is defined in the pond as a oneof for different types of transactions ie: grainTransaction
|
|
let transaction = t.transaction.transaction;
|
|
if (transaction?.grainTransaction) {
|
|
value = transaction.grainTransaction.bushels;
|
|
if (
|
|
getGrainUnit() === pond.GrainUnit.GRAIN_UNIT_TONNE &&
|
|
transaction.grainTransaction.bushelsPerTonne > 1
|
|
) {
|
|
value = value / transaction.grainTransaction.bushelsPerTonne;
|
|
}
|
|
if (
|
|
getGrainUnit() === pond.GrainUnit.GRAIN_UNIT_TON &&
|
|
transaction.grainTransaction.bushelsPerTonne > 1
|
|
) {
|
|
value = value / (transaction.grainTransaction.bushelsPerTonne * 0.907);
|
|
}
|
|
}
|
|
d.push({
|
|
timestamp: time.valueOf(),
|
|
value: value
|
|
});
|
|
});
|
|
setData(d);
|
|
}, [transactions]);
|
|
|
|
const daysRemaining = () => {
|
|
let days = "Delivery Window Closed";
|
|
const endDate = contract.settings.deliveryWindow?.endDate;
|
|
|
|
if (endDate && moment(endDate).isAfter(moment.now())) {
|
|
days = "To be completed " + moment(endDate).fromNow();
|
|
}
|
|
return days;
|
|
};
|
|
|
|
return (
|
|
<Card style={{ height: "100%", padding: 10 }}>
|
|
<Box height={"10%"}>
|
|
<Typography style={{ fontWeight: 650, fontSize: 20 }}>
|
|
Deliveries ({daysRemaining()})
|
|
</Typography>
|
|
</Box>
|
|
<BarGraph
|
|
data={data}
|
|
barColour={contract.colour}
|
|
useGradient
|
|
yMin={0}
|
|
customHeight={"90%"}
|
|
labels
|
|
labelSize={20}
|
|
labelColour="white"
|
|
/>
|
|
</Card>
|
|
);
|
|
}
|