This demo uses FoamTree to implement a dashboard of readouts from a SCADA system. While the names of sensors shown here come from a real system, readout values are random-generated.
Yellow border means the value exceeds alarm thresholds, red border means the value exceeds critical alarm thresholds.
Use mouse wheel or double-click on a group to zoom-in. Esc or Right-double-click on a group to zoom out.
Thanks to Glenn Clark for the idea and feedback on this demo.
Change rate:
off |
low |
medium |
high
Change probability:
low |
medium |
high
Layout:
rectangular |
polygonal
stacking option to enable "flattened" view
of the treemap. Using the descriptionGroupSize
option to configure the size of the parent group description fragment.
groupContentDecorator callback
to draw custom content representing sensor values.
onGroupDoubleClick callback
to zoom-in to a group on double click.
Experiment with this code on CodePen.