Merge pull request #140 from HyperloopUPV-H8/control-station/linear-indicator

[control-station] Bar Indicator

Author: andresdlt03

control-station/src/components/BarIndicator/BarIndicator.module.scss

@@ -0,0 +1,40 @@
+.background {
+    position: relative;
+    height: 3rem;
+    width: 100%;
+    background-color: #000;
+    overflow: hidden;
+}
+
+.infoContainer {
+    position: absolute;
+    padding: 0rem 2rem;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.bar {
+    position: absolute;
+    top: -25%;
+    left: -2%;
+    filter: blur(10px);
+    background-color: red;
+    width: 40%;
+    height: 150%;
+    transition: width 0.1s ease-in-out;
+}
+
+.title {
+    opacity: .8;
+    font-size: 24px;
+    font-style: italic;
+    font-weight: 300;
+}
+
+.value {
+    opacity: .8;
+    font-size: 32px;
+}

control-station/src/components/BarIndicator/BarIndicator.tsx

@@ -0,0 +1,38 @@
+import { NumericMeasurement, useMeasurementsStore } from "common";
+import styles from "./BarIndicator.module.scss";
+import { getPercentFromRange, getState, stateToColor, stateToColorBackground } from "state";
+
+interface Props {
+    icon?: string;
+    title: string;
+    measurement: NumericMeasurement;
+}
+
+export const BarIndicator = ({icon, title, measurement}: Props) => {
+    
+    const state = getState(measurement);
+    const percentage = getPercentFromRange(measurement.value.last, measurement.safeRange[0]!!, measurement.safeRange[1]!!)
+    
+    return (
+        <div 
+            className={styles.background}
+            style={{backgroundColor: stateToColorBackground[state]}}
+        >
+            <div 
+                className={styles.bar}
+                style={{width: percentage + "%", backgroundColor: stateToColor[state]}}
+            ></div>
+
+            <div className={styles.infoContainer}>
+                <div>
+                    <div className={styles.icon}>{icon}</div>
+                    <div className={styles.title}>{title}</div>
+                </div>
+                <div>
+                    <div className={styles.value}>{measurement.value.last}</div>
+                    <div className={styles.unit}>{measurement.units}</div>
+                </div>
+            </div>
+        </div>
+    )
+}

control-station/src/components/GaugeTag/Gauge/Gauge.tsx

@@ -45,14 +45,6 @@ export const Gauge = ({
                 radius={radius}
                 strokeWidth={strokeWidth}
             ></BackgroundArc>
-
-            {/* <BackgroundArc
-                sweep={sweep}
-                className={styles.radialShadowArc}
-                percentage={percentage}
-                radius={radius}
-                strokeWidth={strokeWidth}
-            ></BackgroundArc> */}
         </svg>
     );
 };

control-station/src/state.ts

@@ -19,6 +19,12 @@ export const stateToColor = {
     fault: "hsl(356, 90%, 61%)",
 };
 
+export const stateToColorBackground = {
+    stable: "hsl(92, 82%, 86%)",
+    warning: "hsl(52, 90%, 86%)",
+    fault: "hsl(356, 90%, 86%)",
+};
+
 export function getState(meas: Measurement): State {
     if (isNumericMeasurement(meas)) {
         return getStateFromRange(
@@ -63,3 +69,8 @@ export function getStateFromRange(
 
     return "fault";
 }
+
+export function getPercentFromRange(value: number, min: number, max: number): number {
+    const normValue = Math.max(Math.min(value, max), min);
+    return ((normValue - min) / (max - min)) * 100;
+}