diff --git a/package.json b/package.json index 343b338a..807809a6 100644 --- a/package.json +++ b/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": { diff --git a/src/ui/widgets/Meter/meter.test.tsx b/src/ui/widgets/Meter/meter.test.tsx index 67d3d117..7e1b0334 100644 --- a/src/ui/widgets/Meter/meter.test.tsx +++ b/src/ui/widgets/Meter/meter.test.tsx @@ -159,6 +159,7 @@ describe("MeterComponent", () => { render(); expect(meterUtilities.buildSubArcs).toHaveBeenCalledWith( + true, "rgba(0,0,0,1)", 0, 100, diff --git a/src/ui/widgets/Meter/meter.tsx b/src/ui/widgets/Meter/meter.tsx index 126b6275..13af3e8b 100644 --- a/src/ui/widgets/Meter/meter.tsx +++ b/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 & @@ -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, diff --git a/src/ui/widgets/Meter/meterUtilities.test.ts b/src/ui/widgets/Meter/meterUtilities.test.ts index 0f9d04d3..f328a710 100644 --- a/src/ui/widgets/Meter/meterUtilities.test.ts +++ b/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", () => { diff --git a/src/ui/widgets/Meter/meterUtilities.ts b/src/ui/widgets/Meter/meterUtilities.ts index aabe6097..f9075fc7 100644 --- a/src/ui/widgets/Meter/meterUtilities.ts +++ b/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,