[MIRROR] Add a RoundGauge to Canister UI (#10750)

Co-authored-by: ShadowLarkens <shadowlarkens@gmail.com>

tgui/packages/tgui/interfaces/Canister.tsx

@@ -8,6 +8,7 @@ import {
   Knob,
   LabeledControls,
   LabeledList,
+  RoundGauge,
   Section,
   Tooltip,
 } from 'tgui-core/components';
@@ -41,7 +42,7 @@ export const Canister = (props) => {
     holding,
   } = data;
   return (
-    <Window width={360} height={242}>
+    <Window width={360} height={300}>
       <Window.Content>
         <Section
           title="Canister"
@@ -57,14 +58,22 @@ export const Canister = (props) => {
         >
           <LabeledControls>
             <LabeledControls.Item minWidth="66px" label="Tank Pressure">
-              <AnimatedNumber
+              <RoundGauge
+                size={2}
                 value={pressure}
+                ranges={{
+                  bad: [0, 101.325],
+                  average: [101.325, 101.325 * 15],
+                  good: [101.325 * 15, 10000],
+                }}
                 format={(value) => {
                   if (value < 10000) {
                     return toFixed(value) + ' kPa';
                   }
                   return formatSiUnit(value * 1000, 1, 'Pa');
                 }}
+                minValue={0}
+                maxValue={10000}
               />
             </LabeledControls.Item>
             <LabeledControls.Item label="Regulator">