updated the api to use a new variable for whether to load all nodes, this will still use the show errors boolean for the component page
fixed issue in the filter function in the grain cable model that caused it to return empty when a top node was not set updated the bin svg to have the disabled nodes greyed out
This commit is contained in:
csawatzky
parent
35e8996c29
commit
23223aa1a8
10 changed files with 134 additions and 109 deletions
|
|
@ -87,54 +87,48 @@ export default function BinCard(props: Props) {
|
|||
//loop through the cables in the bin status to prep for display
|
||||
bin.status.grainCables.forEach(cable => {
|
||||
let c: GrainCable = new GrainCable();
|
||||
//flip the cables so that for display node 1 is at the bottom
|
||||
//flip the cables so that for display node 1 is at the bottom,
|
||||
let cableTemps = cloneDeep(cable.celcius);
|
||||
let cableHums = cloneDeep(cable.relativeHumidity);
|
||||
let cableEMC = cloneDeep(cable.moisture);
|
||||
|
||||
c.temperatures = cableTemps.reverse();
|
||||
c.humidities = cableHums.reverse();
|
||||
c.grainMoistures = cableEMC.reverse();
|
||||
|
||||
c.topNode = cable.topNode;
|
||||
c.excludedNodes = cable.excludedNodes;
|
||||
newGrainCables.push(c);
|
||||
|
||||
//determine the averages for temp/RH/EMC for the bin using all of the cables
|
||||
let temps = cloneDeep(cable.celcius);
|
||||
let hums = cloneDeep(cable.relativeHumidity);
|
||||
let moistures = cloneDeep(cable.moisture);
|
||||
|
||||
const spliceEnd = cable.topNode > 0 ? cable.topNode : temps.length;
|
||||
let grainTemps = temps.splice(0, spliceEnd);
|
||||
let grainHums = hums.splice(0, spliceEnd);
|
||||
let grainEMCs = moistures.splice(0, spliceEnd);
|
||||
allTemps.push(...grainTemps);
|
||||
allHums.push(...grainHums);
|
||||
allMoistures.push(...grainEMCs);
|
||||
//filter out the excluded nodes and any nodes above the top node
|
||||
let filteredNodes = c.filteredNodes(true)
|
||||
|
||||
allTemps.push(...filteredNodes.temps);
|
||||
allHums.push(...filteredNodes.humids);
|
||||
allMoistures.push(...filteredNodes.moistures);
|
||||
|
||||
//set the hottest and coldest nodes
|
||||
if (coldestNode === undefined || Math.min(...grainTemps) < coldestNode.temp) {
|
||||
if (coldestNode === undefined || Math.min(...filteredNodes.temps) < coldestNode.temp) {
|
||||
let lowTempIndex =
|
||||
grainTemps.indexOf(Math.min(...grainTemps)) === -1
|
||||
filteredNodes.temps.indexOf(Math.min(...filteredNodes.temps)) === -1
|
||||
? 0
|
||||
: grainTemps.indexOf(Math.min(...grainTemps));
|
||||
|
||||
: filteredNodes.temps.indexOf(Math.min(...filteredNodes.temps));
|
||||
coldestNode = {
|
||||
temp: grainTemps[lowTempIndex],
|
||||
humid: grainHums[lowTempIndex],
|
||||
emc: grainEMCs[lowTempIndex]
|
||||
temp: filteredNodes.temps[lowTempIndex],
|
||||
humid: filteredNodes.humids[lowTempIndex],
|
||||
emc: filteredNodes.moistures[lowTempIndex]
|
||||
};
|
||||
}
|
||||
|
||||
if (hottestNode === undefined || Math.max(...grainTemps) > hottestNode.temp) {
|
||||
if (hottestNode === undefined || Math.max(...filteredNodes.temps) > hottestNode.temp) {
|
||||
let highTempIndex =
|
||||
grainTemps.indexOf(Math.max(...grainTemps)) === -1
|
||||
filteredNodes.temps.indexOf(Math.max(...filteredNodes.temps)) === -1
|
||||
? 0
|
||||
: grainTemps.indexOf(Math.max(...grainTemps));
|
||||
: filteredNodes.temps.indexOf(Math.max(...filteredNodes.temps));
|
||||
|
||||
hottestNode = {
|
||||
temp: grainTemps[highTempIndex],
|
||||
humid: grainHums[highTempIndex],
|
||||
emc: grainEMCs[highTempIndex]
|
||||
temp: filteredNodes.temps[highTempIndex],
|
||||
humid: filteredNodes.humids[highTempIndex],
|
||||
emc: filteredNodes.moistures[highTempIndex]
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -86,6 +86,9 @@ const useStyles = makeStyles((theme: Theme) => {
|
|||
cableNode: {
|
||||
fill: "#fff"
|
||||
},
|
||||
excludedNode: {
|
||||
fill: "grey"
|
||||
},
|
||||
hotNode: {
|
||||
fill: "#fff",
|
||||
animation: "$hotNode 1.0s infinite"
|
||||
|
|
@ -168,7 +171,8 @@ interface NodeData { //this could be either a box or a circle depending
|
|||
height: string | number
|
||||
borderRad: string | number
|
||||
nodeNumber: number
|
||||
nodeTemp: number
|
||||
nodeTemp: number,
|
||||
excluded: boolean,
|
||||
}
|
||||
|
||||
interface CircleData {
|
||||
|
|
@ -427,6 +431,8 @@ export default function BinSVGV2(props: Props) {
|
|||
);
|
||||
};
|
||||
|
||||
//console.log(cables)
|
||||
|
||||
const cableGrainEstimate = (
|
||||
points: GrainNodePoint[],
|
||||
cableSpacing: number,
|
||||
|
|
@ -609,9 +615,31 @@ export default function BinSVGV2(props: Props) {
|
|||
//determine how high to draw the node on the cable
|
||||
const nodeY = nodeSpacingY * (index + 1) + minNodeY;
|
||||
|
||||
//if we are using the auto top nodes only show the heatmap for nodes at or below the top node
|
||||
if (cable.topNode > 0) {
|
||||
if (nodeNumber <= cable.topNode) {
|
||||
//if we are using the auto top nodes only show the heatmap for nodes at or below the top node and it is not an ecluded node
|
||||
if (!cable.excludedNodes.includes(nodeNumber - 1)){
|
||||
if (cable.topNode > 0) {
|
||||
if (nodeNumber <= cable.topNode) {
|
||||
// nodeHeatMap.push(
|
||||
// <ellipse
|
||||
// key={index}
|
||||
// cx={cablePos}
|
||||
// cy={nodeY}
|
||||
// rx="120"
|
||||
// ry="60"
|
||||
// fill={getGrainGradient(temp)}
|
||||
// />
|
||||
// );
|
||||
nodeHeatMapData.push({
|
||||
key: index,
|
||||
xCenter: cablePos,
|
||||
yCenter: nodeY,
|
||||
xRadius: "120",
|
||||
yRadius: "60",
|
||||
fillColour: getGrainGradient(temp)
|
||||
})
|
||||
}
|
||||
} else if (nodeY > filledToY) {
|
||||
//otherwise use the fill level of the bin
|
||||
// nodeHeatMap.push(
|
||||
// <ellipse
|
||||
// key={index}
|
||||
|
|
@ -631,26 +659,6 @@ export default function BinSVGV2(props: Props) {
|
|||
fillColour: getGrainGradient(temp)
|
||||
})
|
||||
}
|
||||
} else if (nodeY > filledToY) {
|
||||
//otherwise use the fill level of the bin
|
||||
// nodeHeatMap.push(
|
||||
// <ellipse
|
||||
// key={index}
|
||||
// cx={cablePos}
|
||||
// cy={nodeY}
|
||||
// rx="120"
|
||||
// ry="60"
|
||||
// fill={getGrainGradient(temp)}
|
||||
// />
|
||||
// );
|
||||
nodeHeatMapData.push({
|
||||
key: index,
|
||||
xCenter: cablePos,
|
||||
yCenter: nodeY,
|
||||
xRadius: "120",
|
||||
yRadius: "60",
|
||||
fillColour: getGrainGradient(temp)
|
||||
})
|
||||
}
|
||||
const displayWidth = 90;
|
||||
const displayHeight = 45;
|
||||
|
|
@ -682,20 +690,9 @@ export default function BinSVGV2(props: Props) {
|
|||
width: displayWidth,
|
||||
borderRad: showTempHum ? cornerRad : "16",
|
||||
nodeNumber: nodeNumber,
|
||||
nodeTemp: temp
|
||||
nodeTemp: temp,
|
||||
excluded: cable.excludedNodes.includes(nodeNumber - 1)
|
||||
})
|
||||
|
||||
// temps.push(
|
||||
// <text
|
||||
// key={"node" + index + "temp"}
|
||||
// x={cablePos}
|
||||
// y={nodeY + 10}
|
||||
// stroke="blue"
|
||||
// filter="drop-shadow( 4px 4px 10px rgba(0, 0, 0, .7))"
|
||||
// className={classes.tempHum}>
|
||||
// {displayTemp.toFixed(1)}°
|
||||
// </text>
|
||||
// );
|
||||
tempData.push({
|
||||
key: "node" + index + "temp",
|
||||
x: cablePos,
|
||||
|
|
@ -704,16 +701,6 @@ export default function BinSVGV2(props: Props) {
|
|||
value: displayTemp.toFixed(1) +"°",
|
||||
filter: "drop-shadow( 4px 4px 10px rgba(0, 0, 0, .7))"
|
||||
})
|
||||
// hums.push(
|
||||
// <text
|
||||
// key={"node" + index + "hum"}
|
||||
// x={cablePos}
|
||||
// y={nodeY + 10}
|
||||
// stroke="green"
|
||||
// className={classes.tempHum}>
|
||||
// {ExtractMoisture(props.grainType, temp, cable.humidities[index] ?? 0).toFixed(1)}%
|
||||
// </text>
|
||||
// );
|
||||
humData.push({
|
||||
key: "node" + index + "hum",
|
||||
x: cablePos,
|
||||
|
|
@ -722,20 +709,6 @@ export default function BinSVGV2(props: Props) {
|
|||
value: ExtractMoisture(props.grainType, temp, cable.humidities[index] ?? 0).toFixed(1)+"%",
|
||||
})
|
||||
!showTempHum &&
|
||||
// nodeClickers.push(
|
||||
// <circle
|
||||
// key={"node" + index}
|
||||
// onClick={() => {
|
||||
// if (cable.key() !== "" && cableNodeClicked) {
|
||||
// cableNodeClicked(cable, nodeNumber);
|
||||
// }
|
||||
// }}
|
||||
// cx={cablePos}
|
||||
// cy={nodeY}
|
||||
// className={classes.clickableArea}
|
||||
// r="50"
|
||||
// />
|
||||
// );
|
||||
nodeClickData.push({
|
||||
key: "node"+index,
|
||||
centerX: cablePos,
|
||||
|
|
@ -803,13 +776,13 @@ export default function BinSVGV2(props: Props) {
|
|||
width={e.width}
|
||||
height={e.height}
|
||||
rx={e.borderRad}
|
||||
className={classes.cableNode}/>
|
||||
className={e.excluded ? classes.excludedNode : classes.cableNode}/>
|
||||
)
|
||||
} else {
|
||||
return (
|
||||
<g key={e.key}>
|
||||
{e.nodeNumber === topNode && topNodeHat(cablePos, e.y)}
|
||||
<circle cx={cablePos} cy={e.y} className={nodeClass(e.nodeTemp)} r="16"></circle>
|
||||
{e.nodeNumber === topNode && !e.excluded && topNodeHat(cablePos, e.y)}
|
||||
<circle cx={cablePos} cy={e.y} className={e.excluded ? classes.excludedNode : nodeClass(e.nodeTemp)} r="16"></circle>
|
||||
</g>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -382,20 +382,25 @@ export default function BinVisualizer(props: Props) {
|
|||
//only use the values below the top node
|
||||
//because splice mutates the original array make a clone in the cables so the svg still has all of them for display
|
||||
//also reverse it so that the node 1 (end of the cable) is in the first position
|
||||
let tempClone = cloneDeep(cable.temperatures).reverse();
|
||||
let humClone = cloneDeep(cable.humidities).reverse();
|
||||
let emcClone = cloneDeep(cable.grainMoistures).reverse();
|
||||
let filteredNodes = cable.filteredNodes(true)
|
||||
temps.push(...filteredNodes.temps)
|
||||
humids.push(...filteredNodes.humids)
|
||||
emcs.push(...filteredNodes.moistures)
|
||||
// let tempClone = cloneDeep(cable.temperatures).reverse();
|
||||
// let humClone = cloneDeep(cable.humidities).reverse();
|
||||
// let emcClone = cloneDeep(cable.grainMoistures).reverse();
|
||||
//add the cable data to the proper arrays
|
||||
if (cable.topNode > 0) {
|
||||
temps.push(...tempClone.splice(0, cable.topNode));
|
||||
humids.push(...humClone.splice(0, cable.topNode));
|
||||
emcs.push(...emcClone.splice(0, cable.topNode));
|
||||
} else {
|
||||
//if the cable has no fill set (top node) then use all of the nodes
|
||||
temps = tempClone;
|
||||
humids = humClone;
|
||||
emcs = emcClone;
|
||||
}
|
||||
// if (cable.topNode > 0) {
|
||||
// temps.push(...tempClone.splice(0, cable.topNode));
|
||||
// humids.push(...humClone.splice(0, cable.topNode));
|
||||
// emcs.push(...emcClone.splice(0, cable.topNode));
|
||||
// } else {
|
||||
// //if the cable has no fill set (top node) then use all of the nodes
|
||||
// temps = tempClone;
|
||||
// humids = humClone;
|
||||
// emcs = emcClone;
|
||||
// }
|
||||
|
||||
//add the trend data to the proper arrays if the top node is set
|
||||
let cableTrendData = binTrend.cableTrend[cable.key()];
|
||||
tempTrends.push(cableTrendData.grainCelciusTrend);
|
||||
|
|
@ -432,6 +437,7 @@ export default function BinVisualizer(props: Props) {
|
|||
};
|
||||
}
|
||||
});
|
||||
|
||||
//set the average conditions
|
||||
avgConditions = {
|
||||
tempC: average(temps),
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue