modified the SingleSetAreaChart to take in a few more parameters to be able to customize the tooltip a little better as well as have multicolour for above 0 and below 0 for the new graph on the gate page for showing the delta temp over time

This commit is contained in:
csawatzky 2026-02-05 11:39:21 -06:00
parent 5f44cf6f09
commit caf9fada15
6 changed files with 235 additions and 9 deletions

View file

@ -28,12 +28,13 @@ import { avg } from "utils";
import GateFlowGraph from "./GateFlowGraph";
import { makeStyles } from "@mui/styles";
import { cloneDeep } from "lodash";
import GateDeltaTempGraph from "./GateDeltaTempGraph";
interface Props {
gate: Gate;
display: "analytics" | "sensors";
compMap: Map<string, Component>;
device: string | number;
device: number;
pressure: string;
ambient: string;
tempChain: string;
@ -297,7 +298,7 @@ export default function GateGraphs(props: Props) {
}
/**
* This function creates the charts for the gate page using the MAIN components on the gate, it DOES NOT show any other components that could be on the device
* This function creates the charts for the gate page using the MAIN components on the gate, and delta time, it DOES NOT show any other components that could be on the device
* @returns list of cards for the charts
*/
const sensorGraphs = () => {
@ -309,6 +310,8 @@ export default function GateGraphs(props: Props) {
if(pressureComp && pressureReadings){
graphs.push(graphCard(pressureComp, pressureReadings))
}
// maybe also put the delta time graph here as well
//T/H chain
let tempComp = compMap.get(tempChain)
let tempReadings = compMeasurements.get(tempChain)
@ -337,6 +340,7 @@ export default function GateGraphs(props: Props) {
}
const analyticGraphs = () => {
let tempComp = compMap.get(tempChain)
return (
<Box>
<GateFlowGraph
@ -355,6 +359,10 @@ export default function GateGraphs(props: Props) {
setZoomed(true);
}}
/>
{/* add a new chart here for the delta temp over time */}
{tempComp &&
<GateDeltaTempGraph deviceID={device} start={startDate} end={endDate} tempComponent={tempComp}/>
}
</Box>
);
};