- {this.icon &&
}
+ {this.icon &&
}
diff --git a/packages/iot-app-kit-visualizations/src/components/charts/sc-legend/sc-legend.css b/packages/iot-app-kit-visualizations/src/components/charts/sc-legend/sc-legend.css
index 282582e4f..6657dc682 100644
--- a/packages/iot-app-kit-visualizations/src/components/charts/sc-legend/sc-legend.css
+++ b/packages/iot-app-kit-visualizations/src/components/charts/sc-legend/sc-legend.css
@@ -1,4 +1,4 @@
-sc-legend .legend-container {
+iot-app-kit-vis-legend .legend-container {
display: flex;
flex-wrap: wrap;
font-size: var(--font-size-1);
@@ -13,6 +13,6 @@ sc-legend .legend-container {
}
/* Hide scrollbar for Chrome, Safari and Opera */
-sc-legend .legend-container::-webkit-scrollbar {
+iot-app-kit-vis-legend .legend-container::-webkit-scrollbar {
display: none;
}
diff --git a/packages/iot-app-kit-visualizations/src/components/charts/sc-legend/sc-legend.spec.tsx b/packages/iot-app-kit-visualizations/src/components/charts/sc-legend/sc-legend.spec.tsx
index 1e9b4ab78..e43af19bb 100644
--- a/packages/iot-app-kit-visualizations/src/components/charts/sc-legend/sc-legend.spec.tsx
+++ b/packages/iot-app-kit-visualizations/src/components/charts/sc-legend/sc-legend.spec.tsx
@@ -116,15 +116,15 @@ const STRING_STREAM_2: DataStream
= {
dataType: DataType.STRING,
};
-const newChartLegendSpecPage = async (props: Partial) => {
+const newChartLegendSpecPage = async (props: Partial) => {
const page = await newSpecPage({
components: [ScLegend, ScLegendRow],
html: '',
supportsShadowDom: false,
});
- const legend = page.doc.createElement('sc-legend') as CustomHTMLElement;
+ const legend = page.doc.createElement('iot-app-kit-vis-legend') as CustomHTMLElement;
- const defaultProps: Components.ScLegend = {
+ const defaultProps: Components.IotAppKitVisLegend = {
updateDataStreamName: noop,
isLoading: false,
isEditing: false,
@@ -158,7 +158,7 @@ it('creates empty legend if no data streams are passed in', async () => {
const { legend } = await newChartLegendSpecPage({
dataStreams: [],
});
- expect(legend.querySelectorAll('sc-legend-row')).toBeEmpty();
+ expect(legend.querySelectorAll('iot-app-kit-vis-legend-row')).toBeEmpty();
});
it('displays data point on legend when it falls before the viewport', async () => {
@@ -175,7 +175,7 @@ it('displays data point on legend when it falls before the viewport', async () =
],
});
- const row = legend.querySelector('sc-legend-row') as HTMLScLegendRowElement;
+ const row = legend.querySelector('iot-app-kit-vis-legend-row') as HTMLIotAppKitVisLegendRowElement;
expect(row).not.toBeNull();
expect(row.point).toEqual(POINT);
});
@@ -198,7 +198,7 @@ describe('loading status', () => {
isLoading: true,
});
- expect(legend.querySelector('sc-loading-spinner')).not.toBeNull();
+ expect(legend.querySelector('iot-app-kit-vis-loading-spinner')).not.toBeNull();
});
it('legend row is not loading when legend is not loading', async () => {
@@ -207,7 +207,7 @@ describe('loading status', () => {
isLoading: false,
});
- expect(legend.querySelector('sc-loading-spinner')).toBeNull();
+ expect(legend.querySelector('iot-app-kit-vis-loading-spinner')).toBeNull();
});
});
@@ -219,8 +219,8 @@ describe('indicates breaching of thresholds', () => {
thresholds: [ALARM_THRESHOLD],
});
- expect(legend.querySelectorAll('sc-legend-row')).toHaveLength(1);
- const row = legend.querySelector('sc-legend-row') as HTMLScLegendRowElement;
+ expect(legend.querySelectorAll('iot-app-kit-vis-legend-row')).toHaveLength(1);
+ const row = legend.querySelector('iot-app-kit-vis-legend-row') as HTMLIotAppKitVisLegendRowElement;
expect(row.valueColor).toBe(ALARM_THRESHOLD.color);
expect(row.icon).toBe(ALARM_THRESHOLD.icon);
@@ -243,8 +243,8 @@ describe('indicates breaching of thresholds', () => {
trendResults: [trendResult],
});
- expect(legend.querySelectorAll('sc-legend-row')).toHaveLength(2);
- const rows = legend.querySelectorAll('sc-legend-row');
+ expect(legend.querySelectorAll('iot-app-kit-vis-legend-row')).toHaveLength(2);
+ const rows = legend.querySelectorAll('iot-app-kit-vis-legend-row');
const trendRow = rows[1];
// has a trend row which is shown as breaching
@@ -258,8 +258,8 @@ describe('indicates breaching of thresholds', () => {
thresholds: [ALARM_THRESHOLD],
});
- expect(legend.querySelectorAll('sc-legend-row')).toHaveLength(1);
- const row = legend.querySelector('sc-legend-row') as HTMLScLegendRowElement;
+ expect(legend.querySelectorAll('iot-app-kit-vis-legend-row')).toHaveLength(1);
+ const row = legend.querySelector('iot-app-kit-vis-legend-row') as HTMLIotAppKitVisLegendRowElement;
expect(row.valueColor).not.toBe(ALARM_THRESHOLD.color);
expect(row.icon).not.toBe(ALARM_THRESHOLD.icon);
@@ -281,8 +281,8 @@ describe('indicates breaching of thresholds', () => {
thresholds: [ALARM_THRESHOLD],
});
- expect(legend.querySelectorAll('sc-legend-row')).toHaveLength(1);
- const row = legend.querySelector('sc-legend-row') as HTMLScLegendRowElement;
+ expect(legend.querySelectorAll('iot-app-kit-vis-legend-row')).toHaveLength(1);
+ const row = legend.querySelector('iot-app-kit-vis-legend-row') as HTMLIotAppKitVisLegendRowElement;
expect(row.valueColor).toBe(ALARM_THRESHOLD.color);
expect(row.icon).toBe(ALARM_THRESHOLD.icon);
@@ -304,7 +304,7 @@ describe('indicates breaching of thresholds', () => {
],
thresholds: [{ ...THRESHOLD, dataStreamIds: ['some-fake-id-that-is-not-our-data-stream-id'] }],
});
- const row = legend.querySelector('sc-legend-row') as HTMLScLegendRowElement;
+ const row = legend.querySelector('iot-app-kit-vis-legend-row') as HTMLIotAppKitVisLegendRowElement;
expect(row.valueColor).not.toBe(THRESHOLD.color);
});
@@ -324,7 +324,7 @@ describe('indicates breaching of thresholds', () => {
],
thresholds: [{ ...THRESHOLD, dataStreamIds: ['some-fake-id-that-is-not-our-data-stream-id'] }],
});
- const row = legend.querySelector('sc-legend-row') as HTMLScLegendRowElement;
+ const row = legend.querySelector('iot-app-kit-vis-legend-row') as HTMLIotAppKitVisLegendRowElement;
expect(row.valueColor).not.toBe(THRESHOLD.color);
});
@@ -345,7 +345,7 @@ describe('indicates breaching of thresholds', () => {
],
thresholds: [THRESHOLD],
});
- const row = legend.querySelector('sc-legend-row') as HTMLScLegendRowElement;
+ const row = legend.querySelector('iot-app-kit-vis-legend-row') as HTMLIotAppKitVisLegendRowElement;
expect(row.valueColor).not.toBe(THRESHOLD.color);
});
@@ -366,7 +366,7 @@ describe('indicates breaching of thresholds', () => {
],
thresholds: [THRESHOLD],
});
- const row = legend.querySelector('sc-legend-row') as HTMLScLegendRowElement;
+ const row = legend.querySelector('iot-app-kit-vis-legend-row') as HTMLIotAppKitVisLegendRowElement;
expect(row.valueColor).toBe(THRESHOLD.color);
});
@@ -386,7 +386,7 @@ describe('indicates breaching of thresholds', () => {
],
thresholds: [],
});
- const row = legend.querySelector('sc-legend-row') as HTMLScLegendRowElement;
+ const row = legend.querySelector('iot-app-kit-vis-legend-row') as HTMLIotAppKitVisLegendRowElement;
expect(row.valueColor).toBe(DEFAULT_LEGEND_TEXT_COLOR);
});
@@ -406,7 +406,7 @@ describe('indicates breaching of thresholds', () => {
],
thresholds: [THRESHOLD],
});
- const row = legend.querySelector('sc-legend-row') as HTMLScLegendRowElement;
+ const row = legend.querySelector('iot-app-kit-vis-legend-row') as HTMLIotAppKitVisLegendRowElement;
expect(row.valueColor).toBe(DEFAULT_LEGEND_TEXT_COLOR);
});
@@ -438,7 +438,7 @@ describe('indicates breaching of thresholds', () => {
],
thresholds: upperLowerThresholds,
});
- const row = legend.querySelector('sc-legend-row') as HTMLScLegendRowElement;
+ const row = legend.querySelector('iot-app-kit-vis-legend-row') as HTMLIotAppKitVisLegendRowElement;
expect(row.valueColor).toBe(LOWER_THRESHOLD.color);
});
@@ -471,7 +471,7 @@ describe('indicates breaching of thresholds', () => {
],
thresholds: upperLowerThresholds,
});
- const row = legend.querySelector('sc-legend-row') as HTMLScLegendRowElement;
+ const row = legend.querySelector('iot-app-kit-vis-legend-row') as HTMLIotAppKitVisLegendRowElement;
expect(row.valueColor).toBe(UPPER_THRESHOLD.color);
});
@@ -484,7 +484,9 @@ describe('is editing', () => {
isEditing: true,
});
- const streamName = legend.querySelector('sc-data-stream-name') as HTMLScDataStreamNameElement;
+ const streamName = legend.querySelector(
+ 'iot-app-kit-vis-data-stream-name'
+ ) as HTMLIotAppKitVisDataStreamNameElement;
expect(streamName).toHaveAttribute('isEditing');
});
@@ -494,7 +496,9 @@ describe('is editing', () => {
isEditing: false,
});
- const streamName = legend.querySelector('sc-data-stream-name') as HTMLScDataStreamNameElement;
+ const streamName = legend.querySelector(
+ 'iot-app-kit-vis-data-stream-name'
+ ) as HTMLIotAppKitVisDataStreamNameElement;
expect(streamName).not.toHaveAttribute('isEditing');
});
@@ -504,7 +508,9 @@ describe('is editing', () => {
isEditing: undefined,
});
- const streamName = legend.querySelector('sc-data-stream-name') as HTMLScDataStreamNameElement;
+ const streamName = legend.querySelector(
+ 'iot-app-kit-vis-data-stream-name'
+ ) as HTMLIotAppKitVisDataStreamNameElement;
expect(streamName).not.toHaveAttribute('isEditing');
});
});
@@ -515,7 +521,7 @@ describe('number of legend rows', () => {
dataStreams: [DATA_STREAM],
});
- expect(legend.querySelectorAll('sc-legend-row')).toHaveLength(1);
+ expect(legend.querySelectorAll('iot-app-kit-vis-legend-row')).toHaveLength(1);
});
it('does not create a legend row when passed one trend result without a corresponding data stream', async () => {
@@ -533,7 +539,7 @@ describe('number of legend rows', () => {
],
});
- expect(legend.querySelectorAll('sc-legend-row')).toBeEmpty();
+ expect(legend.querySelectorAll('iot-app-kit-vis-legend-row')).toBeEmpty();
});
it('creates two legend rows when passed one trend result with a corresponding data stream', async () => {
@@ -552,7 +558,7 @@ describe('number of legend rows', () => {
],
});
- expect(legend.querySelectorAll('sc-legend-row')).toHaveLength(2);
+ expect(legend.querySelectorAll('iot-app-kit-vis-legend-row')).toHaveLength(2);
});
it('creates multiple legend rows when passed multiple data streams with corresponding legend rows', async () => {
@@ -560,7 +566,7 @@ describe('number of legend rows', () => {
dataStreams: [NUMBER_STREAM, { ...NUMBER_STREAM, id: 'some other id' }],
});
- expect(legend.querySelectorAll('sc-legend-row')).toHaveLength(2);
+ expect(legend.querySelectorAll('iot-app-kit-vis-legend-row')).toHaveLength(2);
});
it('creates multiple legend rows when passed multiple data streams with corresponding legend rows and trend results', async () => {
@@ -603,7 +609,7 @@ describe('number of legend rows', () => {
],
});
- expect(legend.querySelectorAll('sc-legend-row')).toHaveLength(4);
+ expect(legend.querySelectorAll('iot-app-kit-vis-legend-row')).toHaveLength(4);
});
});
@@ -642,7 +648,7 @@ describe('active point passed into legend rows', () => {
],
});
- const legendInfo = legend.querySelector('sc-legend-row') as HTMLScLegendRowElement;
+ const legendInfo = legend.querySelector('iot-app-kit-vis-legend-row') as HTMLIotAppKitVisLegendRowElement;
expect(legendInfo.point).toEqual(POINT_2);
});
@@ -693,7 +699,7 @@ describe('active point passed into legend rows', () => {
],
});
- const legendInfo = legend.querySelectorAll('sc-legend-row')[1] as HTMLScLegendRowElement;
+ const legendInfo = legend.querySelectorAll('iot-app-kit-vis-legend-row')[1] as HTMLIotAppKitVisLegendRowElement;
expect(legendInfo.point).toEqual({
x: POINT_2.x,
y: 35.552,
@@ -708,7 +714,7 @@ describe('string data type behavior', () => {
supportString: true,
});
- expect(legend.querySelectorAll('sc-legend-row')).toHaveLength(2);
+ expect(legend.querySelectorAll('iot-app-kit-vis-legend-row')).toHaveLength(2);
});
it('does not render a stream info per string data stream when it does not supports strings', async () => {
@@ -717,7 +723,7 @@ describe('string data type behavior', () => {
supportString: false,
});
- expect(legend.querySelectorAll('sc-legend-row')).toBeEmpty();
+ expect(legend.querySelectorAll('iot-app-kit-vis-legend-row')).toBeEmpty();
});
it('filters out string data type when support string is false', async () => {
@@ -726,7 +732,7 @@ describe('string data type behavior', () => {
supportString: false,
});
- expect(legend.querySelectorAll('sc-legend-row')).toHaveLength(1);
+ expect(legend.querySelectorAll('iot-app-kit-vis-legend-row')).toHaveLength(1);
});
});
@@ -760,7 +766,7 @@ describe('visualizesAlarms', () => {
supportString: true,
});
- const rows = legend.querySelectorAll('sc-legend-row');
+ const rows = legend.querySelectorAll('iot-app-kit-vis-legend-row');
expect(rows).toBeEmpty();
});
@@ -771,7 +777,7 @@ describe('visualizesAlarms', () => {
supportString: true, // our mock infos are strings, so this is also required
});
- const rows = legend.querySelectorAll('sc-legend-row');
+ const rows = legend.querySelectorAll('iot-app-kit-vis-legend-row');
expect(rows).toHaveLength(1);
const row = rows[0];
@@ -790,7 +796,7 @@ describe('visualizesAlarms', () => {
supportString: false, // our mock infos are strings
});
- const rows = legend.querySelectorAll('sc-legend-row');
+ const rows = legend.querySelectorAll('iot-app-kit-vis-legend-row');
expect(rows).toBeEmpty();
});
});
diff --git a/packages/iot-app-kit-visualizations/src/components/charts/sc-legend/sc-legend.tsx b/packages/iot-app-kit-visualizations/src/components/charts/sc-legend/sc-legend.tsx
index c4d586703..cc4bded65 100644
--- a/packages/iot-app-kit-visualizations/src/components/charts/sc-legend/sc-legend.tsx
+++ b/packages/iot-app-kit-visualizations/src/components/charts/sc-legend/sc-legend.tsx
@@ -11,12 +11,12 @@ import { DATA_ALIGNMENT, LEGEND_POSITION } from '../common/constants';
import { StreamType } from '../../../utils/dataConstants';
import { Components } from '../../../components.d';
-import ScLegendRow = Components.ScLegendRow;
+import ScLegendRow = Components.IotAppKitVisLegendRow;
const noop = () => {};
@Component({
- tag: 'sc-legend',
+ tag: 'iot-app-kit-vis-legend',
styleUrl: './sc-legend.css',
shadow: false,
})
@@ -85,7 +85,7 @@ export class ScLegend {
const { color: valueColor = undefined, icon = undefined } =
this.breachedThresholdColor(point, dataStream) || {};
return [
- {
if (trendResult.dataStreamId === dataStream.id) {
rows.push(
- 's line thickness
+// Ensure that the line width is equal to the existing 's line thickness
const LINE_WIDTH = STROKE_WIDTH;
export const LINE_MESH_INDEX = 1;
diff --git a/packages/iot-app-kit-visualizations/src/components/charts/sc-line-chart/sc-line-chart.spec.tsx b/packages/iot-app-kit-visualizations/src/components/charts/sc-line-chart/sc-line-chart.spec.tsx
index de007ae34..e0ee5fac6 100644
--- a/packages/iot-app-kit-visualizations/src/components/charts/sc-line-chart/sc-line-chart.spec.tsx
+++ b/packages/iot-app-kit-visualizations/src/components/charts/sc-line-chart/sc-line-chart.spec.tsx
@@ -6,8 +6,8 @@ import 'webgl-mock-threejs';
import { newChartSpecPage } from '../../../testing/chartDescriptions/newChartSpecPage';
import { describeChart } from '../../../testing/chartDescriptions/describeChart';
-const lineChart = newChartSpecPage('sc-line-chart');
+const lineChart = newChartSpecPage('iot-app-kit-vis-line-chart');
-describe('sc-line-chart', () => {
+describe('iot-app-kit-vis-line-chart', () => {
describeChart(lineChart);
});
diff --git a/packages/iot-app-kit-visualizations/src/components/charts/sc-line-chart/sc-line-chart.tsx b/packages/iot-app-kit-visualizations/src/components/charts/sc-line-chart/sc-line-chart.tsx
index 136abdb51..0b1c7f337 100644
--- a/packages/iot-app-kit-visualizations/src/components/charts/sc-line-chart/sc-line-chart.tsx
+++ b/packages/iot-app-kit-visualizations/src/components/charts/sc-line-chart/sc-line-chart.tsx
@@ -31,10 +31,15 @@ const DEFAULT_MIN_BUFFER_SIZE = 1000;
const DEFAULT_BUFFER_FACTOR = 2;
const tooltip = (props: Tooltip.Props) => (
-
+
);
@Component({
- tag: 'sc-line-chart',
+ tag: 'iot-app-kit-vis-line-chart',
shadow: false,
})
export class ScLineChart implements ChartConfig {
@@ -66,10 +71,10 @@ export class ScLineChart implements ChartConfig {
render() {
return (
- (
- {
+describe('iot-app-kit-vis-scatter-chart', () => {
describeChart(scatterChart);
});
diff --git a/packages/iot-app-kit-visualizations/src/components/charts/sc-scatter-chart/sc-scatter-chart.tsx b/packages/iot-app-kit-visualizations/src/components/charts/sc-scatter-chart/sc-scatter-chart.tsx
index 26eb92f7d..7210a79da 100644
--- a/packages/iot-app-kit-visualizations/src/components/charts/sc-scatter-chart/sc-scatter-chart.tsx
+++ b/packages/iot-app-kit-visualizations/src/components/charts/sc-scatter-chart/sc-scatter-chart.tsx
@@ -31,10 +31,15 @@ const DEFAULT_MIN_BUFFER_SIZE = 1000;
const DEFAULT_BUFFER_FACTOR = 2;
const tooltip = (props: Tooltip.Props) => (
-
+
);
@Component({
- tag: 'sc-scatter-chart',
+ tag: 'iot-app-kit-vis-scatter-chart',
shadow: false,
})
export class ScScatterChart implements ChartConfig {
@@ -66,10 +71,10 @@ export class ScScatterChart implements ChartConfig {
render() {
return (
- (
- = {}) => {
+const rowSpecPage = async (propOverrides: Partial = {}) => {
const page = await newSpecPage({
components: [ScStatusTimelineOverlayRow, ScDataStreamName],
html: '',
supportsShadowDom: false,
});
- const row = page.doc.createElement('sc-status-timeline-overlay-row') as CustomHTMLElement<
- Components.ScStatusTimelineOverlayRow
+ const row = page.doc.createElement('iot-app-kit-vis-status-timeline-overlay-row') as CustomHTMLElement<
+ Components.IotAppKitVisStatusTimelineOverlayRow
>;
- const props: Components.ScStatusTimelineOverlayRow = {
+ const props: Components.IotAppKitVisStatusTimelineOverlayRow = {
label: 'some-label',
onNameChange: () => {},
isEditing: false,
diff --git a/packages/iot-app-kit-visualizations/src/components/charts/sc-status-timeline/sc-status-timeline-overlay/sc-status-timeline-overlay-row.tsx b/packages/iot-app-kit-visualizations/src/components/charts/sc-status-timeline/sc-status-timeline-overlay/sc-status-timeline-overlay-row.tsx
index 9b478566b..ce2d7d298 100644
--- a/packages/iot-app-kit-visualizations/src/components/charts/sc-status-timeline/sc-status-timeline-overlay/sc-status-timeline-overlay-row.tsx
+++ b/packages/iot-app-kit-visualizations/src/components/charts/sc-status-timeline/sc-status-timeline-overlay/sc-status-timeline-overlay-row.tsx
@@ -4,7 +4,7 @@ import { Value } from '../../../value/Value';
import { StatusIcon } from '../../common/constants';
@Component({
- tag: 'sc-status-timeline-overlay-row',
+ tag: 'iot-app-kit-vis-status-timeline-overlay-row',
styleUrl: 'sc-status-timeline-overlay-row.css',
shadow: false,
})
@@ -21,7 +21,7 @@ export class ScStatusTimelineOverlayRow {
render() {
return [
-
- {this.icon && }
+ {this.icon && }
-
-
,
-
+
,
];
}}
diff --git a/packages/iot-app-kit-visualizations/src/components/charts/sc-status-timeline/sc-threshold-legend/sc-threshold-legend-row.tsx b/packages/iot-app-kit-visualizations/src/components/charts/sc-status-timeline/sc-threshold-legend/sc-threshold-legend-row.tsx
index ac4ae6a21..69718961c 100644
--- a/packages/iot-app-kit-visualizations/src/components/charts/sc-status-timeline/sc-threshold-legend/sc-threshold-legend-row.tsx
+++ b/packages/iot-app-kit-visualizations/src/components/charts/sc-status-timeline/sc-threshold-legend/sc-threshold-legend-row.tsx
@@ -1,7 +1,7 @@
import { Component, h, Prop } from '@stencil/core';
@Component({
- tag: 'sc-threshold-legend-row',
+ tag: 'iot-app-kit-vis-threshold-legend-row',
shadow: false,
})
export class ScThresholdLegendRow {
diff --git a/packages/iot-app-kit-visualizations/src/components/charts/sc-status-timeline/sc-threshold-legend/sc-threshold-legend.css b/packages/iot-app-kit-visualizations/src/components/charts/sc-status-timeline/sc-threshold-legend/sc-threshold-legend.css
index ef7ab61a1..bb979158b 100644
--- a/packages/iot-app-kit-visualizations/src/components/charts/sc-status-timeline/sc-threshold-legend/sc-threshold-legend.css
+++ b/packages/iot-app-kit-visualizations/src/components/charts/sc-status-timeline/sc-threshold-legend/sc-threshold-legend.css
@@ -1,4 +1,4 @@
-sc-threshold-legend {
+iot-app-kit-vis-threshold-legend {
display: flex;
flex-wrap: wrap;
overflow-y: scroll;
@@ -8,11 +8,11 @@ sc-threshold-legend {
line-height: 22px;
}
-sc-threshold-legend-row {
+iot-app-kit-vis-threshold-legend-row {
padding: 0.1em 1em;
}
-sc-threshold-legend-row .box {
+iot-app-kit-vis-threshold-legend-row .box {
display: inline-block;
border-radius: 2px;
margin-right: 8px;
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 a6b7898a5..0dc7e32cb 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
@@ -7,16 +7,16 @@ import { ScThresholdLegendRow } from './sc-threshold-legend-row';
import { Threshold } from '../../common/types';
import { COMPARISON_OPERATOR } from '../../common/constants';
-const thresholdLegendSpecPage = async (propOverrides: Partial = {}) => {
+const thresholdLegendSpecPage = async (propOverrides: Partial = {}) => {
const page = await newSpecPage({
components: [ScThresholdLegend, ScThresholdLegendRow],
html: '',
supportsShadowDom: false,
});
- const thresholdLegend = page.doc.createElement('sc-threshold-legend') as CustomHTMLElement<
- Components.ScThresholdLegend
+ const thresholdLegend = page.doc.createElement('iot-app-kit-vis-threshold-legend') as CustomHTMLElement<
+ Components.IotAppKitVisThresholdLegend
>;
- const props: Partial = {
+ const props: Partial = {
thresholds: [],
...propOverrides,
};
@@ -44,13 +44,15 @@ const NUMBER_THRESHOLD: Threshold = {
it('renders one row per threshold when one threshold present', async () => {
const { thresholdLegend } = await thresholdLegendSpecPage({ thresholds: [THRESHOLD] });
- expect(thresholdLegend.querySelectorAll('sc-threshold-legend-row')).toHaveLength(1);
+ expect(thresholdLegend.querySelectorAll('iot-app-kit-vis-threshold-legend-row')).toHaveLength(1);
});
it('renders the threshold legend row correctly', async () => {
const { thresholdLegend } = await thresholdLegendSpecPage({ thresholds: [THRESHOLD] });
- const row = thresholdLegend.querySelector('sc-threshold-legend-row') as HTMLScThresholdLegendRowElement;
+ const row = thresholdLegend.querySelector(
+ 'iot-app-kit-vis-threshold-legend-row'
+ ) as HTMLIotAppKitVisThresholdLegendRowElement;
expect(row.label).toEqual(THRESHOLD.value);
expect(row.color).toBe(THRESHOLD.color);
expect(row.innerText).toContain(THRESHOLD.value);
@@ -61,7 +63,7 @@ describe('order', () => {
const THRESHOLDS = [NUMBER_THRESHOLD, THRESHOLD];
const { thresholdLegend } = await thresholdLegendSpecPage({ thresholds: THRESHOLDS });
- const rows = thresholdLegend.querySelectorAll('sc-threshold-legend-row');
+ const rows = thresholdLegend.querySelectorAll('iot-app-kit-vis-threshold-legend-row');
expect(rows[0].label).toBe(`y < ${THRESHOLDS[0].value}`);
expect(rows[1].label).toBe(THRESHOLDS[1].value);
@@ -71,7 +73,7 @@ describe('order', () => {
const THRESHOLDS = [THRESHOLD, NUMBER_THRESHOLD];
const { thresholdLegend } = await thresholdLegendSpecPage({ thresholds: THRESHOLDS });
- const rows = thresholdLegend.querySelectorAll('sc-threshold-legend-row');
+ const rows = thresholdLegend.querySelectorAll('iot-app-kit-vis-threshold-legend-row');
expect(rows[0].label).toBe(THRESHOLDS[0].value);
expect(rows[1].label).toBe(`y < ${THRESHOLDS[1].value}`);
@@ -84,7 +86,9 @@ describe('renders operators correctly', () => {
thresholds: [{ ...THRESHOLD, comparisonOperator: COMPARISON_OPERATOR.GREATER_THAN_EQUAL }],
});
- const row = thresholdLegend.querySelector('sc-threshold-legend-row') as HTMLScThresholdLegendRowElement;
+ const row = thresholdLegend.querySelector(
+ 'iot-app-kit-vis-threshold-legend-row'
+ ) as HTMLIotAppKitVisThresholdLegendRowElement;
expect(row.label).toEqual(`y >= ${THRESHOLD.value}`);
});
@@ -93,7 +97,9 @@ describe('renders operators correctly', () => {
thresholds: [{ ...THRESHOLD, comparisonOperator: COMPARISON_OPERATOR.GREATER_THAN }],
});
- const row = thresholdLegend.querySelector('sc-threshold-legend-row') as HTMLScThresholdLegendRowElement;
+ const row = thresholdLegend.querySelector(
+ 'iot-app-kit-vis-threshold-legend-row'
+ ) as HTMLIotAppKitVisThresholdLegendRowElement;
expect(row.label).toEqual(`y > ${THRESHOLD.value}`);
});
@@ -102,7 +108,9 @@ describe('renders operators correctly', () => {
thresholds: [{ ...THRESHOLD, comparisonOperator: COMPARISON_OPERATOR.LESS_THAN_EQUAL }],
});
- const row = thresholdLegend.querySelector('sc-threshold-legend-row') as HTMLScThresholdLegendRowElement;
+ const row = thresholdLegend.querySelector(
+ 'iot-app-kit-vis-threshold-legend-row'
+ ) as HTMLIotAppKitVisThresholdLegendRowElement;
expect(row.label).toEqual(`y <= ${THRESHOLD.value}`);
});
@@ -111,7 +119,9 @@ describe('renders operators correctly', () => {
thresholds: [{ ...THRESHOLD, comparisonOperator: COMPARISON_OPERATOR.LESS_THAN }],
});
- const row = thresholdLegend.querySelector('sc-threshold-legend-row') as HTMLScThresholdLegendRowElement;
+ const row = thresholdLegend.querySelector(
+ 'iot-app-kit-vis-threshold-legend-row'
+ ) as HTMLIotAppKitVisThresholdLegendRowElement;
expect(row.label).toEqual(`y < ${THRESHOLD.value}`);
});
});
@@ -119,7 +129,7 @@ describe('renders operators correctly', () => {
it('renders the threshold legend row color box as the thresholds color', async () => {
const { thresholdLegend } = await thresholdLegendSpecPage({ thresholds: [THRESHOLD] });
- const box = thresholdLegend.querySelector('sc-threshold-legend-row .box') as HTMLDivElement;
+ const box = thresholdLegend.querySelector('iot-app-kit-vis-threshold-legend-row .box') as HTMLDivElement;
expect(box).not.toBeNull();
expect(box.style.backgroundColor).toEqual(THRESHOLD.color);
@@ -128,20 +138,20 @@ it('renders the threshold legend row color box as the thresholds color', async (
it('renders one row per threshold when two thresholds present', async () => {
const { thresholdLegend } = await thresholdLegendSpecPage({ thresholds: [THRESHOLD, NUMBER_THRESHOLD] });
- expect(thresholdLegend.querySelectorAll('sc-threshold-legend-row').length).toBe(2);
+ expect(thresholdLegend.querySelectorAll('iot-app-kit-vis-threshold-legend-row').length).toBe(2);
});
describe('de-duplication behavior for legend rows', () => {
it('renders one row for multiple thresholds that would render identical rows', async () => {
const { thresholdLegend } = await thresholdLegendSpecPage({ thresholds: [THRESHOLD, THRESHOLD] });
- expect(thresholdLegend.querySelectorAll('sc-threshold-legend-row').length).toBe(1);
+ expect(thresholdLegend.querySelectorAll('iot-app-kit-vis-threshold-legend-row').length).toBe(1);
});
it('renders two rows for two unique thresholds out of three', async () => {
const { thresholdLegend } = await thresholdLegendSpecPage({ thresholds: [THRESHOLD, THRESHOLD, NUMBER_THRESHOLD] });
- expect(thresholdLegend.querySelectorAll('sc-threshold-legend-row').length).toBe(2);
+ expect(thresholdLegend.querySelectorAll('iot-app-kit-vis-threshold-legend-row').length).toBe(2);
});
it('renders two rows for two unique thresholds that only differ in color', async () => {
@@ -152,7 +162,7 @@ describe('de-duplication behavior for legend rows', () => {
],
});
- expect(thresholdLegend.querySelectorAll('sc-threshold-legend-row').length).toBe(2);
+ expect(thresholdLegend.querySelectorAll('iot-app-kit-vis-threshold-legend-row').length).toBe(2);
});
it('renders two rows for two unique thresholds that only differ in value', async () => {
@@ -163,6 +173,6 @@ describe('de-duplication behavior for legend rows', () => {
],
});
- expect(thresholdLegend.querySelectorAll('sc-threshold-legend-row').length).toBe(2);
+ expect(thresholdLegend.querySelectorAll('iot-app-kit-vis-threshold-legend-row').length).toBe(2);
});
});
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 8d4579924..ef00be2cc 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
@@ -24,7 +24,7 @@ const label = (threshold: Threshold): string => {
const key = ({ value, comparisonOperator, color }: Threshold): string => `${value}-${comparisonOperator}-${color}`;
@Component({
- tag: 'sc-threshold-legend',
+ tag: 'iot-app-kit-vis-threshold-legend',
styleUrl: 'sc-threshold-legend.css',
shadow: false,
})
@@ -39,7 +39,7 @@ export class ScThresholdLegend {
render() {
return this.uniqueThresholds().map(threshold => (
-
+
));
}
}
diff --git a/packages/iot-app-kit-visualizations/src/components/charts/sc-tooltip/sc-tooltip-row.css b/packages/iot-app-kit-visualizations/src/components/charts/sc-tooltip/sc-tooltip-row.css
index 5df713531..97aea7516 100644
--- a/packages/iot-app-kit-visualizations/src/components/charts/sc-tooltip/sc-tooltip-row.css
+++ b/packages/iot-app-kit-visualizations/src/components/charts/sc-tooltip/sc-tooltip-row.css
@@ -1,21 +1,21 @@
-sc-tooltip-row {
+iot-app-kit-vis-tooltip-row {
font-size: var(--font-size-1);
--bar-size: 18px;
}
-sc-tooltip-rows .left-offset {
+iot-app-kit-vis-tooltip-rows .left-offset {
padding-left: 4px;
}
/* modern clearfix hack */
-sc-tooltip-row .clearfix::after {
+iot-app-kit-vis-tooltip-row .clearfix::after {
content: '';
clear: both;
display: table;
}
-sc-tooltip-row .bar {
+iot-app-kit-vis-tooltip-row .bar {
display: inline-block;
float: left;
width: var(--bar-size);
@@ -23,13 +23,13 @@ sc-tooltip-row .bar {
padding-top: 8px;
}
-sc-tooltip-row .label {
+iot-app-kit-vis-tooltip-row .label {
padding-left: var(--margin-small);
color: var(--light-text);
float: left;
}
-sc-tooltip-row .value {
+iot-app-kit-vis-tooltip-row .value {
font-weight: bold;
float: right;
margin-left: 15px;
diff --git a/packages/iot-app-kit-visualizations/src/components/charts/sc-tooltip/sc-tooltip-row.spec.tsx b/packages/iot-app-kit-visualizations/src/components/charts/sc-tooltip/sc-tooltip-row.spec.tsx
index d73e38ee9..b8cbcd147 100644
--- a/packages/iot-app-kit-visualizations/src/components/charts/sc-tooltip/sc-tooltip-row.spec.tsx
+++ b/packages/iot-app-kit-visualizations/src/components/charts/sc-tooltip/sc-tooltip-row.spec.tsx
@@ -26,14 +26,16 @@ const DEFAULT_POINT: DataPoint = {
y: 100,
};
-const newTooltipRowPage = async (propOverrides: Partial = {}) => {
+const newTooltipRowPage = async (propOverrides: Partial = {}) => {
const page = await newSpecPage({
components: [ScTooltipRow],
html: '',
supportsShadowDom: false,
});
- const tooltipRow = page.doc.createElement('sc-tooltip-row') as CustomHTMLElement;
- const props: Components.ScTooltipRow = {
+ const tooltipRow = page.doc.createElement('iot-app-kit-vis-tooltip-row') as CustomHTMLElement<
+ Components.IotAppKitVisTooltipRow
+ >;
+ const props: Components.IotAppKitVisTooltipRow = {
label: DATA_STREAM_INFO.name,
color: DATA_STREAM_INFO.color as string,
point: DEFAULT_POINT,
@@ -69,12 +71,12 @@ describe('valueColor property', () => {
describe('icon property', () => {
it('renders the icon to be that of the value provided', async () => {
const { tooltipRow } = await newTooltipRowPage({ icon: StatusIcon.SNOOZED });
- const value = tooltipRow.querySelector('sc-chart-icon') as any;
+ const value = tooltipRow.querySelector('iot-app-kit-vis-chart-icon') as any;
expect(value).not.toBeNull();
});
it('renders the icon to be empty when no value provided', async () => {
const { tooltipRow } = await newTooltipRowPage({});
- const value = tooltipRow.querySelector('sc-chart-icon') as HTMLElement;
+ const value = tooltipRow.querySelector('iot-app-kit-vis-chart-icon') as HTMLElement;
expect(value).toBeNull();
});
});
diff --git a/packages/iot-app-kit-visualizations/src/components/charts/sc-tooltip/sc-tooltip-row.tsx b/packages/iot-app-kit-visualizations/src/components/charts/sc-tooltip/sc-tooltip-row.tsx
index 04976d722..302736fc6 100644
--- a/packages/iot-app-kit-visualizations/src/components/charts/sc-tooltip/sc-tooltip-row.tsx
+++ b/packages/iot-app-kit-visualizations/src/components/charts/sc-tooltip/sc-tooltip-row.tsx
@@ -14,7 +14,7 @@ import { StatusIcon } from '../common/constants';
const baseColor = '#000';
@Component({
- tag: 'sc-tooltip-row',
+ tag: 'iot-app-kit-vis-tooltip-row',
styleUrl: 'sc-tooltip-row.css',
shadow: false,
})
@@ -51,7 +51,7 @@ export class ScTooltipRow {
{this.label}
- {this.icon && }
+ {this.icon && }
{this.resolution != null && (
diff --git a/packages/iot-app-kit-visualizations/src/components/charts/sc-tooltip/sc-tooltip-rows.spec.tsx b/packages/iot-app-kit-visualizations/src/components/charts/sc-tooltip/sc-tooltip-rows.spec.tsx
index 109201862..f926870bf 100644
--- a/packages/iot-app-kit-visualizations/src/components/charts/sc-tooltip/sc-tooltip-rows.spec.tsx
+++ b/packages/iot-app-kit-visualizations/src/components/charts/sc-tooltip/sc-tooltip-rows.spec.tsx
@@ -86,15 +86,17 @@ const TREND: TrendResult = {
startDate: VIEWPORT.start,
};
-const newTooltipRowsSpecPage = async (propOverrides: Partial = {}) => {
+const newTooltipRowsSpecPage = async (propOverrides: Partial = {}) => {
const page = await newSpecPage({
components: [ScTooltipRow, ScTooltipRows],
html: '',
supportsShadowDom: false,
});
- const tooltipRows = page.doc.createElement('sc-tooltip-rows') as CustomHTMLElement;
- const props: Components.ScTooltipRows = {
+ const tooltipRows = page.doc.createElement('iot-app-kit-vis-tooltip-rows') as CustomHTMLElement<
+ Components.IotAppKitVisTooltipRows
+ >;
+ const props: Components.IotAppKitVisTooltipRows = {
dataAlignment: DATA_ALIGNMENT.EITHER,
dataStreams: [],
selectedDate: VIEWPORT.end,
@@ -119,7 +121,7 @@ const newTooltipRowsSpecPage = async (propOverrides: Partial {
const { tooltipRows } = await newTooltipRowsSpecPage({});
- const rows = tooltipRows.querySelectorAll('sc-tooltip-row');
+ const rows = tooltipRows.querySelectorAll('iot-app-kit-vis-tooltip-row');
expect(rows).toBeEmpty();
expect(tooltipRows.querySelector(TOOLTIP_LINE_SELECTOR)).toBeNull();
});
@@ -129,7 +131,7 @@ it('renders one tooltip row with the streams point passed in', async () => {
dataStreams: [DATA_STREAM],
});
- const toolTipRow = tooltipRows.querySelector('sc-tooltip-row') as HTMLScTooltipRowElement;
+ const toolTipRow = tooltipRows.querySelector('iot-app-kit-vis-tooltip-row') as HTMLIotAppKitVisTooltipRowElement;
expect(toolTipRow).toBeDefined();
expect(toolTipRow.point).toBe(DEFAULT_POINT);
expect(toolTipRow.pointType).toBe(POINT_TYPE.DATA);
@@ -145,7 +147,7 @@ describe('showsBlankTooltipRows is true', () => {
showBlankTooltipRows: true,
});
- const toolTipRow = tooltipRows.querySelector('sc-tooltip-row') as HTMLScTooltipRowElement;
+ const toolTipRow = tooltipRows.querySelector('iot-app-kit-vis-tooltip-row') as HTMLIotAppKitVisTooltipRowElement;
expect(toolTipRow).not.toBeNull();
expect(toolTipRow.point).toBeUndefined();
expect(toolTipRow.label).toBe(DATA_STREAM.name);
@@ -158,7 +160,7 @@ describe('showsBlankTooltipRows is true', () => {
showBlankTooltipRows: true,
});
- const toolTipRow = tooltipRows.querySelector('sc-tooltip-row') as HTMLScTooltipRowElement;
+ const toolTipRow = tooltipRows.querySelector('iot-app-kit-vis-tooltip-row') as HTMLIotAppKitVisTooltipRowElement;
expect(toolTipRow).not.toBeNull();
expect(toolTipRow.point).toBeUndefined();
expect(toolTipRow.label).toBe(DATA_STREAM.name);
@@ -172,7 +174,7 @@ describe('showsBlankTooltipRows is false', () => {
showBlankTooltipRows: false,
});
- expect(tooltipRows.querySelectorAll('sc-tooltip-row').length).toBe(0);
+ expect(tooltipRows.querySelectorAll('iot-app-kit-vis-tooltip-row').length).toBe(0);
});
it('renders no tooltip rows when no data present in data stream and is sorting with non raw data', async () => {
@@ -184,7 +186,7 @@ describe('showsBlankTooltipRows is false', () => {
showBlankTooltipRows: false,
});
- expect(tooltipRows.querySelectorAll('sc-tooltip-row').length).toBe(0);
+ expect(tooltipRows.querySelectorAll('iot-app-kit-vis-tooltip-row').length).toBe(0);
});
});
@@ -193,7 +195,7 @@ it('renders no tooltip rows when no data stream provided', async () => {
dataStreams: [],
});
- expect(tooltipRows.querySelectorAll('sc-tooltip-row')).toBeEmpty();
+ expect(tooltipRows.querySelectorAll('iot-app-kit-vis-tooltip-row')).toBeEmpty();
});
describe('visualizesAlarms', () => {
@@ -217,7 +219,7 @@ describe('visualizesAlarms', () => {
dataStreams: [NUMERICAL_ALARM_STREAM],
visualizesAlarms: false,
});
- expect(tooltipRows.querySelectorAll('sc-tooltip-row')).toBeEmpty();
+ expect(tooltipRows.querySelectorAll('iot-app-kit-vis-tooltip-row')).toBeEmpty();
});
it('does render tooltip rows for alarms if `visualizesAlarms` is true', async () => {
@@ -226,9 +228,9 @@ describe('visualizesAlarms', () => {
visualizesAlarms: true,
});
- expect(tooltipRows.querySelectorAll('sc-tooltip-row')).not.toBeEmpty();
+ expect(tooltipRows.querySelectorAll('iot-app-kit-vis-tooltip-row')).not.toBeEmpty();
- const row = tooltipRows.querySelector('sc-tooltip-row') as HTMLScTooltipRowElement;
+ const row = tooltipRows.querySelector('iot-app-kit-vis-tooltip-row') as HTMLIotAppKitVisTooltipRowElement;
expect(row.point).toEqual(NUMERICAL_ALARM_STREAM.data[0]);
expect(row.label).toEqual(NUMERICAL_ALARM_STREAM.name);
expect(row.valueColor).toEqual(DEFAULT_TOOLTIP_VALUE_COLOR);
@@ -243,10 +245,10 @@ describe('supportsString', () => {
supportString: true,
});
- const rows = tooltipRows.querySelectorAll('sc-tooltip-row');
+ const rows = tooltipRows.querySelectorAll('iot-app-kit-vis-tooltip-row');
expect(rows).toHaveLength(1);
- const row = tooltipRows.querySelector('sc-tooltip-row') as HTMLScTooltipRowElement;
+ const row = tooltipRows.querySelector('iot-app-kit-vis-tooltip-row') as HTMLIotAppKitVisTooltipRowElement;
expect(row.label).toBe(STRING_STREAM_INFO.name);
expect(row.point).toBe(DEFAULT_STRING_POINT);
});
@@ -257,7 +259,7 @@ describe('supportsString', () => {
supportString: true,
});
- const rows = tooltipRows.querySelectorAll('sc-tooltip-row');
+ const rows = tooltipRows.querySelectorAll('iot-app-kit-vis-tooltip-row');
expect(rows).toHaveLength(2);
});
});
@@ -269,7 +271,7 @@ describe('supportsString', () => {
supportString: false,
});
- const rows = tooltipRows.querySelectorAll('sc-tooltip-row');
+ const rows = tooltipRows.querySelectorAll('iot-app-kit-vis-tooltip-row');
expect(rows).toBeEmpty();
});
@@ -279,10 +281,10 @@ describe('supportsString', () => {
supportString: false,
});
- const rows = tooltipRows.querySelectorAll('sc-tooltip-row');
+ const rows = tooltipRows.querySelectorAll('iot-app-kit-vis-tooltip-row');
expect(rows).toHaveLength(1);
- const row = tooltipRows.querySelector('sc-tooltip-row') as HTMLScTooltipRowElement;
+ const row = tooltipRows.querySelector('iot-app-kit-vis-tooltip-row') as HTMLIotAppKitVisTooltipRowElement;
expect(row.label).toBe(DATA_STREAM.name);
expect(row.point).toBe(DEFAULT_POINT);
});
@@ -296,7 +298,7 @@ it('passes down showStreamColor to tooltip-row', async () => {
showDataStreamColor: SHOW_STREAM_COLOR,
});
- const toolTipRow = tooltipRows.querySelector('sc-tooltip-row') as HTMLScTooltipRowElement;
+ const toolTipRow = tooltipRows.querySelector('iot-app-kit-vis-tooltip-row') as HTMLIotAppKitVisTooltipRowElement;
expect(toolTipRow.showDataStreamColor).toBe(SHOW_STREAM_COLOR);
});
@@ -306,7 +308,7 @@ it('renders one trend result', async () => {
trendResults: [TREND],
});
- const rows = tooltipRows.querySelectorAll('sc-tooltip-row');
+ const rows = tooltipRows.querySelectorAll('iot-app-kit-vis-tooltip-row');
expect(rows).toHaveLength(2);
@@ -323,7 +325,7 @@ it('renders no trend line row when trend does not associate with any streams', a
trendResults: [{ ...TREND, dataStreamId: 'some-random-id' }],
});
- const rows = tooltipRows.querySelectorAll('sc-tooltip-row');
+ const rows = tooltipRows.querySelectorAll('iot-app-kit-vis-tooltip-row');
expect(rows).toBeEmpty();
});
@@ -346,7 +348,7 @@ describe('threshold breaching logic', () => {
thresholds: [],
});
- const toolTipRow = tooltipRows.querySelector('sc-tooltip-row') as HTMLScTooltipRowElement;
+ const toolTipRow = tooltipRows.querySelector('iot-app-kit-vis-tooltip-row') as HTMLIotAppKitVisTooltipRowElement;
expect(toolTipRow.valueColor).toBe(DEFAULT_TOOLTIP_VALUE_COLOR);
});
@@ -358,7 +360,7 @@ describe('threshold breaching logic', () => {
thresholds: [THRESHOLD],
});
- const toolTipRow = tooltipRows.querySelector('sc-tooltip-row') as HTMLScTooltipRowElement;
+ const toolTipRow = tooltipRows.querySelector('iot-app-kit-vis-tooltip-row') as HTMLIotAppKitVisTooltipRowElement;
expect(toolTipRow.valueColor).toBe(THRESHOLD.color);
expect(toolTipRow.icon).toBe(THRESHOLD.icon);
});
@@ -369,7 +371,7 @@ describe('threshold breaching logic', () => {
thresholds: [{ ...THRESHOLD, dataStreamIds: ['some-fake-data-stream-id'] }],
});
- const toolTipRow = tooltipRows.querySelector('sc-tooltip-row') as HTMLScTooltipRowElement;
+ const toolTipRow = tooltipRows.querySelector('iot-app-kit-vis-tooltip-row') as HTMLIotAppKitVisTooltipRowElement;
expect(toolTipRow.valueColor).not.toBe(THRESHOLD.color);
expect(toolTipRow.icon).not.toBe(THRESHOLD.icon);
});
@@ -388,7 +390,7 @@ describe('threshold breaching logic', () => {
thresholds: [THRESHOLD],
});
- const toolTipRow = tooltipRows.querySelector('sc-tooltip-row') as HTMLScTooltipRowElement;
+ const toolTipRow = tooltipRows.querySelector('iot-app-kit-vis-tooltip-row') as HTMLIotAppKitVisTooltipRowElement;
expect(toolTipRow.valueColor).not.toBe(THRESHOLD.color);
expect(toolTipRow.icon).not.toBe(THRESHOLD.icon);
});
@@ -406,7 +408,7 @@ describe('threshold breaching logic', () => {
thresholds: [THRESHOLD],
});
- const rows = tooltipRows.querySelectorAll('sc-tooltip-row');
+ const rows = tooltipRows.querySelectorAll('iot-app-kit-vis-tooltip-row');
expect(rows).toHaveLength(1);
const row = rows[0];
@@ -428,7 +430,7 @@ describe('threshold breaching logic', () => {
thresholds: [THRESHOLD],
});
- const rows = tooltipRows.querySelectorAll('sc-tooltip-row');
+ const rows = tooltipRows.querySelectorAll('iot-app-kit-vis-tooltip-row');
expect(rows).toHaveLength(1);
const row = rows[0];
@@ -443,7 +445,7 @@ describe('threshold breaching logic', () => {
thresholds: [THRESHOLD],
});
- const toolTipRow = tooltipRows.querySelector('sc-tooltip-row') as HTMLScTooltipRowElement;
+ const toolTipRow = tooltipRows.querySelector('iot-app-kit-vis-tooltip-row') as HTMLIotAppKitVisTooltipRowElement;
expect(toolTipRow.valueColor).not.toBe(THRESHOLD.color);
expect(toolTipRow.icon).not.toBe(THRESHOLD.icon);
});
@@ -478,7 +480,7 @@ describe('threshold breaching logic', () => {
],
thresholds: upperLowerThresholds,
});
- const row = tooltipRows.querySelector('sc-tooltip-row') as HTMLScTooltipRowElement;
+ const row = tooltipRows.querySelector('iot-app-kit-vis-tooltip-row') as HTMLIotAppKitVisTooltipRowElement;
expect(row.valueColor).toBe(UPPER_THRESHOLD.color);
});
@@ -511,7 +513,7 @@ describe('threshold breaching logic', () => {
],
thresholds: upperLowerThresholds,
});
- const row = tooltipRows.querySelector('sc-tooltip-row') as HTMLScTooltipRowElement;
+ const row = tooltipRows.querySelector('iot-app-kit-vis-tooltip-row') as HTMLIotAppKitVisTooltipRowElement;
expect(row.valueColor).toBe(LOWER_THRESHOLD.color);
});
@@ -525,7 +527,7 @@ describe('order of rows', () => {
showBlankTooltipRows: true,
sortPoints: true,
});
- const rows = tooltipRows.querySelectorAll('sc-tooltip-row');
+ const rows = tooltipRows.querySelectorAll('iot-app-kit-vis-tooltip-row');
expect(rows.length).toBe(3);
// undefined point re-positioned to the start of the tooltip
@@ -554,7 +556,7 @@ describe('order of rows', () => {
sortPoints: true,
});
- const rows = tooltipRows.querySelectorAll('sc-tooltip-row');
+ const rows = tooltipRows.querySelectorAll('iot-app-kit-vis-tooltip-row');
expect(rows.length).toBe(dataStreams.length);
expect(rows[0].label).toBe(NUMBER_EMPTY_STREAM.name);
@@ -576,7 +578,7 @@ describe('order of rows', () => {
dataStreams,
sortPoints: false,
});
- const rows = tooltipRows.querySelectorAll('sc-tooltip-row');
+ const rows = tooltipRows.querySelectorAll('iot-app-kit-vis-tooltip-row');
expect(rows).toHaveLength(dataStreams.length);
// First row is the first data
@@ -595,7 +597,7 @@ describe('order of rows', () => {
showBlankTooltipRows: true,
sortPoints: false,
});
- const rows = tooltipRows.querySelectorAll('sc-tooltip-row');
+ const rows = tooltipRows.querySelectorAll('iot-app-kit-vis-tooltip-row');
expect(rows.length).toBe(dataStreams.length);
expect(rows[0].label).toBe(dataStreams[0].name);
@@ -619,7 +621,7 @@ describe('order of rows', () => {
sortPoints: true,
});
- const rows = tooltipRows.querySelectorAll('sc-tooltip-row');
+ const rows = tooltipRows.querySelectorAll('iot-app-kit-vis-tooltip-row');
expect(rows).toHaveLength(2);
const r1 = rows[0];
@@ -641,7 +643,7 @@ describe('does not utilize alarms', () => {
visualizesAlarms: true,
thresholds: [ALARM_THRESHOLD],
});
- const rows = tooltipRows.querySelectorAll('sc-tooltip-row');
+ const rows = tooltipRows.querySelectorAll('iot-app-kit-vis-tooltip-row');
/** Alarm Row */
const alarmRow = rows[0];
diff --git a/packages/iot-app-kit-visualizations/src/components/charts/sc-tooltip/sc-tooltip-rows.tsx b/packages/iot-app-kit-visualizations/src/components/charts/sc-tooltip/sc-tooltip-rows.tsx
index c58450eb4..0a4e1979f 100644
--- a/packages/iot-app-kit-visualizations/src/components/charts/sc-tooltip/sc-tooltip-rows.tsx
+++ b/packages/iot-app-kit-visualizations/src/components/charts/sc-tooltip/sc-tooltip-rows.tsx
@@ -26,7 +26,7 @@ const X_OFFSET = 8;
* Renders the tooltip, tooltip container, the tooltip line and the tool tip rows
*/
@Component({
- tag: 'sc-tooltip-rows',
+ tag: 'iot-app-kit-vis-tooltip-rows',
shadow: false,
})
export class ScTooltipRows {
@@ -237,7 +237,7 @@ export class ScTooltipRows {
(tooltipPoint.point && this.rowsValueColorAndIcon(streamId, tooltipPoint.point, displayedDate)) || {};
return (
-
- Stopped
+ Stopped