diff --git a/packages/iot-app-kit-visualizations/src/components/charts/sc-status-timeline/sc-threshold-legend/sc-threshold-legend.spec.ts b/packages/iot-app-kit-visualizations/src/components/charts/sc-status-timeline/sc-threshold-legend/sc-threshold-legend.spec.ts index 0dc7e32cb..0ef40a2a0 100644 --- a/packages/iot-app-kit-visualizations/src/components/charts/sc-status-timeline/sc-threshold-legend/sc-threshold-legend.spec.ts +++ b/packages/iot-app-kit-visualizations/src/components/charts/sc-status-timeline/sc-threshold-legend/sc-threshold-legend.spec.ts @@ -35,6 +35,16 @@ const THRESHOLD: Threshold = { color: 'red', }; +const LABELED_THRESHOLD: Threshold = { + value: 100, + comparisonOperator: COMPARISON_OPERATOR.GREATER_THAN, + color: 'red', + label: { + text: 'label text', + show: true, + }, +}; + const NUMBER_THRESHOLD: Threshold = { value: 123, comparisonOperator: COMPARISON_OPERATOR.LESS_THAN, @@ -58,6 +68,17 @@ it('renders the threshold legend row correctly', async () => { expect(row.innerText).toContain(THRESHOLD.value); }); +it('renders the label correctly', async () => { + const { thresholdLegend } = await thresholdLegendSpecPage({ thresholds: [LABELED_THRESHOLD] }); + + const row = thresholdLegend.querySelector( + 'iot-app-kit-vis-threshold-legend-row' + ) as HTMLIotAppKitVisThresholdLegendRowElement; + expect(row.label).toEqual(LABELED_THRESHOLD.label?.text); + expect(row.color).toBe(LABELED_THRESHOLD.color); + expect(row.innerText).not.toContain(LABELED_THRESHOLD.value); +}); + describe('order', () => { it('renders rows in the order the thresholds are provided - part 1', async () => { const THRESHOLDS = [NUMBER_THRESHOLD, THRESHOLD]; diff --git a/packages/iot-app-kit-visualizations/src/components/charts/sc-status-timeline/sc-threshold-legend/sc-threshold-legend.tsx b/packages/iot-app-kit-visualizations/src/components/charts/sc-status-timeline/sc-threshold-legend/sc-threshold-legend.tsx index ef00be2cc..c7d3e8a0b 100644 --- a/packages/iot-app-kit-visualizations/src/components/charts/sc-status-timeline/sc-threshold-legend/sc-threshold-legend.tsx +++ b/packages/iot-app-kit-visualizations/src/components/charts/sc-status-timeline/sc-threshold-legend/sc-threshold-legend.tsx @@ -16,7 +16,9 @@ const label = (threshold: Threshold): string => { return String(threshold.value); } - return `y ${COMPARISON_SYMBOL[threshold.comparisonOperator]} ${threshold.value}`; + return threshold.label && threshold.label.show + ? threshold.label.text + : `y ${COMPARISON_SYMBOL[threshold.comparisonOperator]} ${threshold.value}`; }; // a key constructed to serialize all of the fields which a row depends on.