diff --git a/src/gate/GateDeltaTempGraph.tsx b/src/gate/GateDeltaTempGraph.tsx index b5baef1..d4a4465 100644 --- a/src/gate/GateDeltaTempGraph.tsx +++ b/src/gate/GateDeltaTempGraph.tsx @@ -20,6 +20,7 @@ interface Props { ambient?: Component start: Moment; end: Moment; + multiGraphZoom?: (domain: number[] | string[]) => void; } export default function GateDeltaTempGraph(props: Props){ @@ -28,7 +29,8 @@ export default function GateDeltaTempGraph(props: Props){ ambient, deviceID, start, - end + end, + multiGraphZoom } = props const [data, setData] = useState([]) const [{user}] = useGlobalState() @@ -110,7 +112,6 @@ export default function GateDeltaTempGraph(props: Props){ end.toISOString(), 500 ).then(resp => { - console.log(resp) if(resp.data.measurements){ let tempCompMeasurements = resp.data.measurements.map(um => UnitMeasurement.any(um, user)); //if there is an ambient component, then treat the temp component like a single sensor and not a chain, and use the ambient measurements as the inlet @@ -217,7 +218,8 @@ export default function GateDeltaTempGraph(props: Props){ tooltipUnit={user.tempUnit() === pond.TemperatureUnit.TEMPERATURE_UNIT_FAHRENHEIT ? " °F" : " °C"} yAxisLabel={"Delta T" + (user.tempUnit() === pond.TemperatureUnit.TEMPERATURE_UNIT_FAHRENHEIT ? " °F" : " °C")} colourAboveZero={{colour: warmingColour, label: "Heating"}} - colourBelowZero={{colour: coolingColour, label: "Cooling"}}/> + colourBelowZero={{colour: coolingColour, label: "Cooling"}} + multiGraphZoom={multiGraphZoom}/> ) diff --git a/src/gate/GateFlowGraph.tsx b/src/gate/GateFlowGraph.tsx index b9a85b1..458d377 100644 --- a/src/gate/GateFlowGraph.tsx +++ b/src/gate/GateFlowGraph.tsx @@ -15,7 +15,7 @@ import { Gate } from "models/Gate"; import moment, { Moment } from "moment"; import { pond } from "protobuf-ts/pond"; import { useGateAPI, useGlobalState } from "providers"; -import React, { useEffect, useState } from "react"; +import React, { useCallback, useEffect, useState } from "react"; interface Props { gate: Gate; @@ -25,7 +25,6 @@ interface Props { ambient?: string; newXDomain?: number[] | string[]; pressureComponent?: string; - // setPCAState: (state: boolean) => void; multiGraphZoom?: (domain: number[] | string[]) => void; } @@ -55,7 +54,6 @@ export default function GateFlowGraph(props: Props) { device, ambient, pressureComponent, - // setPCAState, start, end, newXDomain, @@ -74,12 +72,13 @@ export default function GateFlowGraph(props: Props) { const eventThreshold = 5; //the threshold that if crossed from one measurement to the next during a flow event will end the current flow event and start a new one //const idleFlow = 3.5; //the mass air flow that must be crossed in order to start a flow event, anything below this will not start an event but must go below this to end an event const [idleFlow, setIdleFlow] = useState(3.5) - - useEffect(() => { + + const loadData = useCallback(()=>{ if (loadingChartData) return; if (ambient && pressureComponent) { let gateIdle = idleFlow if(gate.settings.idleFlow){ + setIdleFlow(gate.settings.idleFlow) gateIdle = gate.settings.idleFlow } @@ -131,22 +130,17 @@ export default function GateFlowGraph(props: Props) { } }); setRuntime(moment.duration(runtime)); - // let state = false; - // if ( - // data.length > 1 && - // data[data.length - 1].value > gate.lowerFlow() && - // data[data.length - 1].value < gate.upperFlow() - // ) { - // state = true; - // } - // setPCAState(state); } setFlowData(data); setLoadingChartData(false); setRecent(recent); }); } - }, [gateAPI, gate, ambient, pressureComponent, start, end, device, as]); // eslint-disable-line react-hooks/exhaustive-deps + },[gateAPI, gate, ambient, pressureComponent, start, end, device, as]) + + useEffect(() => { + loadData() + }, [loadData]); // eslint-disable-line react-hooks/exhaustive-deps const loadFlowEvents = () => { if (ambient && pressureComponent) { diff --git a/src/gate/GateGraphs.tsx b/src/gate/GateGraphs.tsx index 5a3a039..319b137 100644 --- a/src/gate/GateGraphs.tsx +++ b/src/gate/GateGraphs.tsx @@ -101,16 +101,22 @@ export default function GateGraphs(props: Props) { }); }, [gate, endDate, gateAPI, startDate, as]); // eslint-disable-line react-hooks/exhaustive-deps - const updateDateRange = (newStartDate: any, newEndDate: any) => { - let range = GetDefaultDateRange(); - range.start = newStartDate; - range.end = newEndDate; + const updateDateRange = (newStartDate: moment.Moment, newEndDate: moment.Moment) => { setStartDate(newStartDate); setEndDate(newEndDate); }; + const zoomGraphs = (domain: string[] | number[]) => { + setZoomed(true) + if((domain[0] && !isNaN(parseInt(domain[0] as string))) && (domain[1] && !isNaN(parseInt(domain[1] as string)))){ + updateDateRange(moment(domain[0]),moment(domain[1])) + } + } + const zoomOut = () => { - setXDomain(["dataMin", "dataMax"]); + let d = GetDefaultDateRange() + setStartDate(d.start) + setEndDate(d.end) setZoomed(false); }; @@ -175,8 +181,7 @@ export default function GateGraphs(props: Props) { tooltip newXDomain={xDomain} multiGraphZoom={domain => { - setXDomain(domain); - setZoomed(true); + zoomGraphs(domain) }} multiGraphZoomOut /> @@ -239,8 +244,7 @@ export default function GateGraphs(props: Props) { tooltip newXDomain={xDomain} multiGraphZoom={domain => { - setXDomain(domain); - setZoomed(true); + zoomGraphs(domain) }} multiGraphZoomOut /> @@ -250,7 +254,6 @@ export default function GateGraphs(props: Props) { const graphHeader = (comp: Component) => { const componentIcon = GetComponentIcon(comp.settings.type, comp.settings.subtype, themeType); - console.log(comp) let measurement = cloneDeep(comp.status.measurement) let umArray = measurement.map(um => UnitMeasurement.create(um, user)) return ( @@ -356,17 +359,22 @@ export default function GateGraphs(props: Props) { gate={gate} ambient={ambient} pressureComponent={pressure} - // setPCAState={(state: boolean) => { - // setPCAState(state); - // }} multiGraphZoom={domain => { - setXDomain(domain); - setZoomed(true); + zoomGraphs(domain) }} /> {/* add a new chart here for the delta temp over time */} {tempComp && - + { + zoomGraphs(domain) + }} + /> } ); diff --git a/src/gate/GateList.tsx b/src/gate/GateList.tsx index ba521cc..a2f4f77 100644 --- a/src/gate/GateList.tsx +++ b/src/gate/GateList.tsx @@ -272,7 +272,12 @@ export default function GateList(props: Props) { // cellStyle: {width: 100000}, // sortKey: "state", render: gate => { - const deviceStateHelper = getDeviceStateHelper(gate.status.pcaDeviceState); + let deviceStateHelper = getDeviceStateHelper(pond.DeviceState.DEVICE_STATE_UNKNOWN); + if(moment().isAfter(moment(gate.status.deviceStateExpires).add(1, 'hour'))){ + deviceStateHelper = getDeviceStateHelper(pond.DeviceState.DEVICE_STATE_MISSING) + }else{ + deviceStateHelper = getDeviceStateHelper(gate.status.pcaDeviceState) + } return ( {deviceStateHelper.icon}