fix(visualizations): use passed in label in status-timeline component

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<number> = {
   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];

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.