modified meter component to take in limits prop

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@diamondlightsource/cs-web-lib",
   "type": "module",
-  "version": "0.10.19",
+  "version": "0.10.20",
   "description": "Control system web library",
   "main": "./dist/index.cjs",
   "scripts": {

src/ui/widgets/Meter/meter.test.tsx

@@ -159,6 +159,7 @@ describe("MeterComponent", () => {
     render(<MeterComponent {...defaultProps} />);
 
     expect(meterUtilities.buildSubArcs).toHaveBeenCalledWith(
+      true,
       "rgba(0,0,0,1)",
       0,
       100,

src/ui/widgets/Meter/meter.tsx

@@ -39,7 +39,8 @@ export const MeterProps = {
   font: FontPropOpt,
   transparent: BoolPropOpt,
   showUnits: BoolPropOpt,
-  showValue: BoolPropOpt
+  showValue: BoolPropOpt,
+  showLimits: BoolPropOpt
 };
 
 export type MeterComponentProps = InferWidgetProps<typeof MeterProps> &
@@ -60,7 +61,8 @@ export const MeterComponent = (props: MeterComponentProps): JSX.Element => {
     limitsFromPv = true,
     precision = undefined,
     showUnits = true,
-    showValue = true
+    showValue = true,
+    showLimits = true
   } = newProps as MeterComponentProps;
 
   const { value } = getPvValueAndName(pvData);
@@ -150,6 +152,7 @@ export const MeterComponent = (props: MeterComponentProps): JSX.Element => {
           padding: 0,
           cornerRadius: 0,
           subArcs: buildSubArcs(
+            showLimits,
             style?.colors?.color as string,
             minimum,
             maximum,

src/ui/widgets/Meter/meterUtilities.test.ts

@@ -167,7 +167,7 @@ describe("formatValue", () => {
 
 describe("buildSubArcs", () => {
   it("should build sub arcs with all ranges defined", () => {
-    const subArcs = buildSubArcs("blue", 0, 100, 10, 20, 80, 90);
+    const subArcs = buildSubArcs(true, "blue", 0, 100, 10, 20, 80, 90);
 
     expect(subArcs).toHaveLength(5);
     expect(subArcs[0].limit).toBe(10);
@@ -187,7 +187,16 @@ describe("buildSubArcs", () => {
   });
 
   it("should build sub arcs with only warning ranges", () => {
-    const subArcs = buildSubArcs("green", 0, 100, undefined, 20, 80, undefined);
+    const subArcs = buildSubArcs(
+      true,
+      "green",
+      0,
+      100,
+      undefined,
+      20,
+      80,
+      undefined
+    );
 
     expect(subArcs).toHaveLength(3);
     expect(subArcs[0].limit).toBe(20);
@@ -201,7 +210,16 @@ describe("buildSubArcs", () => {
   });
 
   it("should build sub arcs with only alarm ranges", () => {
-    const subArcs = buildSubArcs("red", 0, 100, 10, undefined, undefined, 90);
+    const subArcs = buildSubArcs(
+      true,
+      "red",
+      0,
+      100,
+      10,
+      undefined,
+      undefined,
+      90
+    );
 
     expect(subArcs).toHaveLength(3);
     expect(subArcs[0].limit).toBe(10);
@@ -215,7 +233,7 @@ describe("buildSubArcs", () => {
   });
 
   it("should build sub arcs when low value alarm range greater then low value warning range", () => {
-    const subArcs = buildSubArcs("green", 0, 100, 20, 10, 80, 90);
+    const subArcs = buildSubArcs(true, "green", 0, 100, 20, 10, 80, 90);
 
     expect(subArcs).toHaveLength(4);
     expect(subArcs[0].limit).toBe(20);
@@ -232,7 +250,7 @@ describe("buildSubArcs", () => {
   });
 
   it("should build sub arcs when high value alarm range lower than high value warning range", () => {
-    const subArcs = buildSubArcs("green", 0, 100, 10, 20, 80, 70);
+    const subArcs = buildSubArcs(true, "green", 0, 100, 10, 20, 80, 70);
 
     expect(subArcs).toHaveLength(4);
     expect(subArcs[0].limit).toBe(10);
@@ -250,6 +268,7 @@ describe("buildSubArcs", () => {
 
   it("should build sub arcs with no ranges", () => {
     const subArcs = buildSubArcs(
+      true,
       "purple",
       0,
       100,
@@ -265,11 +284,19 @@ describe("buildSubArcs", () => {
   });
 
   it("should clamp values to min/max bounds", () => {
-    const subArcs = buildSubArcs("blue", 50, 150, 0, 60, 160, 200);
+    const subArcs = buildSubArcs(true, "blue", 50, 150, 0, 60, 160, 200);
 
     expect(subArcs[0].limit).toBe(60); // upper limit of low value alarm range
     expect(subArcs[2].limit).toBe(150); // Maximum value
   });
+
+  it("should not build sub arcs when showLimits is false", () => {
+    const subArcs = buildSubArcs(false, "blue", 0, 100, 10, 20, 80, 90);
+
+    expect(subArcs).toHaveLength(1);
+    expect(subArcs[0].limit).toBe(100);
+    expect(subArcs[0].color).toBe("blue");
+  });
 });
 
 describe("createIntervals", () => {

src/ui/widgets/Meter/meterUtilities.ts

@@ -98,6 +98,7 @@ export const formatValue =
  * @returns An array of sub arc for the meter
  */
 export const buildSubArcs = (
+  showLimits: boolean,
   foregroundColor: string,
   minimum: number,
   maximum: number,
@@ -111,7 +112,7 @@ export const buildSubArcs = (
   const withinBounds = (value: number) =>
     Math.min(maximum, Math.max(minimum, value));
 
-  if (alarmRangeMin && alarmRangeMin > minimum) {
+  if (alarmRangeMin && alarmRangeMin > minimum && showLimits) {
     subArcs.push({
       limit: withinBounds(alarmRangeMin),
       width: 0.04,
@@ -120,7 +121,11 @@ export const buildSubArcs = (
     });
   }
 
-  if (warningRangeMin && warningRangeMin > (alarmRangeMin ?? minimum)) {
+  if (
+    warningRangeMin &&
+    warningRangeMin > (alarmRangeMin ?? minimum) &&
+    showLimits
+  ) {
     subArcs.push({
       limit: withinBounds(warningRangeMin),
       width: 0.04,
@@ -131,14 +136,20 @@ export const buildSubArcs = (
 
   subArcs.push({
     limit: withinBounds(
-      Math.min(warningRangeMax ?? maximum, alarmRangeMax ?? maximum)
+      !showLimits
+        ? maximum
+        : Math.min(warningRangeMax ?? maximum, alarmRangeMax ?? maximum)
     ),
     width: 0.02,
     showTick: false,
     color: foregroundColor
   });
 
-  if (warningRangeMax && warningRangeMax < (alarmRangeMax ?? maximum)) {
+  if (
+    warningRangeMax &&
+    warningRangeMax < (alarmRangeMax ?? maximum) &&
+    showLimits
+  ) {
     subArcs.push({
       limit: withinBounds(alarmRangeMax ?? maximum),
       width: 0.04,
@@ -147,7 +158,7 @@ export const buildSubArcs = (
     });
   }
 
-  if (alarmRangeMax && alarmRangeMax < maximum) {
+  if (alarmRangeMax && alarmRangeMax < maximum && showLimits) {
     subArcs.push({
       limit: withinBounds(maximum),
       width: 0.04,