diff --git a/package-lock.json b/package-lock.json index 795220e..dc86b31 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11967,7 +11967,7 @@ }, "node_modules/protobuf-ts": { "version": "1.0.0", - "resolved": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#c9ef7906fd97cda8ef4bd149ec4a796159a7c067", + "resolved": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#ab9e8d4fd38f9af7802398403d38fddda5eb01da", "dependencies": { "protobufjs": "^6.8.8" } diff --git a/src/bin/BinVisualizerV2.tsx b/src/bin/BinVisualizerV2.tsx index d91f698..9997927 100644 --- a/src/bin/BinVisualizerV2.tsx +++ b/src/bin/BinVisualizerV2.tsx @@ -1434,6 +1434,7 @@ export default function BinVisualizer(props: Props) { const controls = () => { if (bin.settings.inventory?.empty === true) return null; + const canEdit = permissions ? permissions.includes(pond.Permission.PERMISSION_WRITE) : false; return ( { setGrainUpdate(true); }} style={{ margin: "auto", - backgroundColor: "gold", + backgroundColor: canEdit ? "gold" : "grey", color: "black", height: "100%", width: isMobile ? 35 : 40 @@ -1468,6 +1470,7 @@ export default function BinVisualizer(props: Props) { alignContent="flex-end"> {fillPercentage !== null && ( + diff --git a/src/charts/SingleSetAreaChart.tsx b/src/charts/SingleSetAreaChart.tsx index 99dc52a..22477d6 100644 --- a/src/charts/SingleSetAreaChart.tsx +++ b/src/charts/SingleSetAreaChart.tsx @@ -1,9 +1,10 @@ import { useTheme } from "@mui/material"; import moment from "moment"; -import React, { useEffect, useState } from "react"; +import React, { useEffect, useMemo, useState } from "react"; import { Area, AreaChart, + Legend, ReferenceArea, ReferenceLine, ResponsiveContainer, @@ -13,25 +14,38 @@ import { YAxis } from "recharts"; import MaterialChartTooltip from "./MaterialChartTooltip"; +import { blue, orange } from "@mui/material/colors"; +import { Payload } from "recharts/types/component/DefaultLegendContent"; export interface SSAreaDataPoint { timestamp: number; value: number; } +export interface ColourData { + colour: string, + label: string +} + interface Props { data: SSAreaDataPoint[]; + tooltipLabel: string + tooltipUnit?: string + yAxisLabel: string maxRef?: number; minRef?: number; newXDomain?: number[] | string[]; multiGraphZoom?: (domain: number[] | string[]) => void; + colourAboveZero?: ColourData + colourBelowZero?: ColourData } export default function SingleSetAreaChart(props: Props) { - const { data, maxRef, minRef, newXDomain, multiGraphZoom } = props; + const { data, maxRef, minRef, newXDomain, multiGraphZoom, yAxisLabel, colourAboveZero, colourBelowZero, tooltipLabel, tooltipUnit } = props; const [xDomain, setXDomain] = useState(["dataMin", "dataMax"]); const [refLeft, setRefLeft] = useState(); const [refRight, setRefRight] = useState(); + const [legendPayload, setLegendPayload] = useState([]) const theme = useTheme(); const now = moment(); @@ -41,6 +55,40 @@ export default function SingleSetAreaChart(props: Props) { } }, [newXDomain]); + useEffect(() => { + let legend: Payload[] = [] + if(colourAboveZero){ + legend.push({ + value: colourAboveZero.label, + color: colourAboveZero.colour, + id: colourAboveZero.label, + type: "square" + }) + } + if(colourBelowZero){ + legend.push({ + value: colourBelowZero.label, + color: colourBelowZero.colour, + id: colourBelowZero.label, + type: "square" + }) + } + setLegendPayload(legend) + }, [colourAboveZero, colourBelowZero]) + + const gradientOffset = useMemo(() => { + if (!data.length) return 0; + + const values = data.map(p => p.value); + const max = Math.max(...values); + const min = Math.min(...values); + + if (max <= 0) return 0; + if (min >= 0) return 1; + + return max / (max - min); +}, [data]); + const zoom = () => { let newDomain: number[] | string[] = ["dataMin", "dataMax"]; if (refLeft && refRight && refLeft !== refRight) { @@ -75,12 +123,16 @@ export default function SingleSetAreaChart(props: Props) { setRefRight(undefined); zoom(); }}> + moment(timestamp).format("lll")} content={(props: TooltipProps) => ( - `${value}`} /> + `${value}` + (tooltipUnit ? tooltipUnit : "")} /> )} /> - + + {colourAboveZero && colourBelowZero && + + + + + } + + { @@ -53,8 +54,8 @@ const useStyles = makeStyles((theme: Theme) => { }); export default function FileSelector(props: Props) { - const { uploadEnd, uploadStart, uniqueID, toAttach, keys, types } = props; - const [{ userTeamPermissions }] = useGlobalState(); + const { uploadEnd, uploadStart, uniqueID, toAttach, keys, types, hasFilePermission } = props; + // const [{ userTeamPermissions }] = useGlobalState(); const [fileList, setFileList] = useState(); const classes = useStyles(); const fileAPI = useFileControllerAPI(); @@ -142,7 +143,7 @@ export default function FileSelector(props: Props) { disabled={ uploading || (!uploadFailed && fileID !== "") || - !userTeamPermissions.includes(pond.Permission.PERMISSION_FILE_MANAGEMENT) + !hasFilePermission } multiple={false} name={uniqueID || "fileInput"} @@ -163,7 +164,7 @@ export default function FileSelector(props: Props) {