feat: rename any sc- components to iot-app-kit-vis-

design/base-chart.md

@@ -1,6 +1,6 @@
 # Base chart
 
-Base chart (which is exposed as the Web component `<sc-webgl-base-chart />`) is a shared component used across the following components:
+Base chart (which is exposed as the Web component `<iot-app-kit-vis-webgl-base-chart />`) is a shared component used across the following components:
 
 - line chart
 - scatter chart

packages/doc-site/docs/contributing.md

@@ -1,6 +1,6 @@
 Important things to know when building a new component:
 1. Use `viewportHandler` to sync up with all the other component in order to provide the synchronization feature.
-   - A good example to follow is the `sc-table` component.
+   - A good example to follow is the `iot-app-kit-vis-table` component.
 ```js static
   componentDidLoad() {
     this.viewportGroups.add({ viewportGroup: 'The name of the viewport group' }) 

packages/doc-site/docs/setup.md

@@ -21,19 +21,19 @@
 2. Initialize components if you are not using the react wrapper
 
     ```js static
-    import { defineComponents, applyPolyfill } from '@synchro-charts/core/dist/loader';
+    import { defineComponents, applyPolyfill } from '@iot-app-kit-visualizations/core/dist/loader';
 
     applyPolyfill().then(() => defineComponents());
     ```
    
     If you are using the react wrapper, this step is not necessary.
 
-3. Include a `<sc-webgl-context>`
+3. Include a `<iot-app-kit-vis-webgl-context>`
     Include the webgl context such that it's present where ever you utilize webgl based components (not required for all components)
 
     ```jsx static
      ...
-      <sc-webgl-context />
+      <iot-app-kit-vis-webgl-context />
      ...
         
     ```

packages/doc-site/docs/webglContext.md

@@ -16,7 +16,7 @@ WebGL context must be large enough to contain all the visualizations.
 To set up the WebGL context, you will create a single instance of the following web component:
 
 ```jsx static
-<sc-webgl-context />
+<iot-app-kit-vis-webgl-context />
 ```
 
 This component will create a single canvas element, and create an associated WebGL context to this canvas. Additionally, this component
@@ -27,11 +27,11 @@ If you want the viewport to be the viewing frame, place the context component in
 
 ```jsx static
 
-<sc-webgl-context />
+<iot-app-kit-vis-webgl-context />
 
 or
 
-<sc-webgl-context viewFrame={window} />
+<iot-app-kit-vis-webgl-context viewFrame={window} />
 ```
 
 Additionally you can pick an HTML Element as the viewing frame. This element should operate similar to the viewport in that it can scroll child contents that overflow
@@ -40,37 +40,37 @@ and will respond to resizing events.
 *Note: The viewing frame can't be larger than the viewport size. The canvas will start clipping anything past that bound.*
 
 ```jsx static
-<sc-webgl-context viewFrame={document.querySelector('#myViewFrame')} />
+<iot-app-kit-vis-webgl-context viewFrame={document.querySelector('#myViewFrame')} />
 ```
 
 #### Correct place of initialization
 
-Ensure that the position of the `<sc-webgl-context />` is correct
- Since this component constructs the canvas which the visualizations are painted on, it's important that the `<sc-webgl-context />` is rendered on top of respective components.
+Ensure that the position of the `<iot-app-kit-vis-webgl-context />` is correct
+ Since this component constructs the canvas which the visualizations are painted on, it's important that the `<iot-app-kit-vis-webgl-context />` is rendered on top of respective components.
 
  Here's an example of a correct utilization of the component:
 
  ```jsx static
     <div>
-      <sc-line-chart ... />
-      <sc-bar-chart ... />
+      <iot-app-kit-vis-line-chart ... />
+      <iot-app-kit-vis-bar-chart ... />
       ...
-      <sc-webgl-context />
+      <iot-app-kit-vis-webgl-context />
     </div>
  ```
 
- Notice that the `<sc-webgl-context />` is initialized after the other visualizations - this ensures that the axis lines are rendered underneath the visualized data.
+ Notice that the `<iot-app-kit-vis-webgl-context />` is initialized after the other visualizations - this ensures that the axis lines are rendered underneath the visualized data.
 
  More information about rendering HTML elements in the correct order within [Mozilla's documentation on stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context)
 
 ### Accessing the WebGL Context
 
 It can be useful to have direct access to the underlying WebGL context for purposes such as debugging.
 
-The `<sc-webgl-context />` web component has a functional prop `onContextInitialization` that is called with a `WebGLRenderingContext` after initialization.
+The `<iot-app-kit-vis-webgl-context />` web component has a functional prop `onContextInitialization` that is called with a `WebGLRenderingContext` after initialization.
 
 ```jsx static
-<sc-webgl-context onContextInitialization={(context) => {
+<iot-app-kit-vis-webgl-context onContextInitialization={(context) => {
    // your code
 }} />
 ```
@@ -81,7 +81,7 @@ This callback can be used to, for example, instrument your development environme
 
 1. Visualization clips on bottom 16px of screen
 
-   This [issue](https://github.com/awslabs/synchro-charts/issues/30) is caused due to the canvas constructed by the `<sc-webgl-context />` not covering the last `16px` of the screen. This issue
+   This [issue](https://github.com/awslabs/synchro-charts/issues/30) is caused due to the canvas constructed by the `<iot-app-kit-vis-webgl-context />` not covering the last `16px` of the screen. This issue
    will only be visible if you have no horizontal scroll bar on the bottom of the browser.
 
 2. Visualized data briefly lag behind the associated component on browser resize

packages/doc-site/styleguide.config.js

@@ -121,7 +121,7 @@ module.exports = {
   ],
   getComponentPathLine(componentPath) {
     const name = path.basename(componentPath, '.js');
-    return `import { ${name} } from '@synchro-charts/react'; // <sc-${kebabize(name)}>`;
+    return `import { ${name} } from '@iot-app-kit-visualizations/react'; // <iot-app-kit-vis-${kebabize(name)}>`;
   },
   styleguideComponents: {
     SectionsRenderer: path.join(__dirname, 'src/styleguide/Sections'),

packages/iot-app-kit-visualizations/cypress/integration/charts/alarms.spec.ts

@@ -16,7 +16,7 @@ import { COMPARISON_OPERATOR, StatusIcon } from '../../../src/components/charts/
 const SMALL_WAIT = 0.05 * SECOND_IN_MS;
 
 const LEGEND_VALUE_SELECTOR = '[data-testid=current-value]';
-const STATUS_ICON_SELECTOR = 'sc-chart-icon';
+const STATUS_ICON_SELECTOR = 'iot-app-kit-vis-chart-icon';
 
 const ALARM_COLOR = 'rgb(255, 0, 0)'; // also known as 'red'
 const LATEST_VALUE = 120;
@@ -82,7 +82,7 @@ describe('when provided alarm data through a `dynamic-widget`', () => {
     describe('line-chart', () => {
       it('does not visualize numerical alarm data', () => {
         visitDynamicWidget(cy, {
-          componentTag: 'sc-line-chart',
+          componentTag: 'iot-app-kit-vis-line-chart',
           dataStreams: [NUMERICAL_ALARM_STREAM],
           viewportStart,
           viewportEnd,
@@ -96,7 +96,7 @@ describe('when provided alarm data through a `dynamic-widget`', () => {
 
       it('does not render alarms on tooltip', () => {
         visitDynamicWidget(cy, {
-          componentTag: 'sc-line-chart',
+          componentTag: 'iot-app-kit-vis-line-chart',
           dataStreams: [NUMERICAL_ALARM_STREAM],
           viewportStart,
           viewportEnd,
@@ -118,7 +118,7 @@ describe('when provided alarm data through a `dynamic-widget`', () => {
     describe('scatter-chart', () => {
       it('does not visualize numerical alarm data', () => {
         visitDynamicWidget(cy, {
-          componentTag: 'sc-scatter-chart',
+          componentTag: 'iot-app-kit-vis-scatter-chart',
           dataStreams: [NUMERICAL_ALARM_STREAM],
           viewportStart,
           viewportEnd,
@@ -132,7 +132,7 @@ describe('when provided alarm data through a `dynamic-widget`', () => {
 
       it('does not render alarms on tooltip', () => {
         visitDynamicWidget(cy, {
-          componentTag: 'sc-scatter-chart',
+          componentTag: 'iot-app-kit-vis-scatter-chart',
           dataStreams: [NUMERICAL_ALARM_STREAM],
           viewportStart,
           viewportEnd,
@@ -154,7 +154,7 @@ describe('when provided alarm data through a `dynamic-widget`', () => {
     describe('bar-chart', () => {
       it('does not visualize numerical alarm data', () => {
         visitDynamicWidget(cy, {
-          componentTag: 'sc-bar-chart',
+          componentTag: 'iot-app-kit-vis-bar-chart',
           dataStreams: [NUMERICAL_ALARM_STREAM],
           viewportStart,
           viewportEnd,
@@ -168,7 +168,7 @@ describe('when provided alarm data through a `dynamic-widget`', () => {
 
       it('does not render alarms on tooltip', () => {
         visitDynamicWidget(cy, {
-          componentTag: 'sc-bar-chart',
+          componentTag: 'iot-app-kit-vis-bar-chart',
           dataStreams: [NUMERICAL_ALARM_STREAM],
           viewportStart,
           viewportEnd,
@@ -190,7 +190,7 @@ describe('when provided alarm data through a `dynamic-widget`', () => {
     describe('status-timeline', () => {
       it('does visualize numerical alarm data', () => {
         visitDynamicWidget(cy, {
-          componentTag: 'sc-status-timeline',
+          componentTag: 'iot-app-kit-vis-status-timeline',
           alarms: { expires: MINUTE_IN_MS },
           dataStreams: [NUMERICAL_ALARM_STREAM],
           viewportStart,
@@ -205,7 +205,7 @@ describe('when provided alarm data through a `dynamic-widget`', () => {
 
       it('does render alarms on tooltip', () => {
         visitDynamicWidget(cy, {
-          componentTag: 'sc-status-timeline',
+          componentTag: 'iot-app-kit-vis-status-timeline',
           dataStreams: [NUMERICAL_ALARM_STREAM],
           annotations: { y: [ALARM_THRESHOLD] },
           viewportStart,
@@ -231,7 +231,7 @@ describe('when provided alarm data through a `dynamic-widget`', () => {
   describe('widgets determine whether to display alarms within the legend or not', () => {
     it('does not display a legend entry for numerical alarm data when rendering a line-chart', () => {
       visitDynamicWidget(cy, {
-        componentTag: 'sc-line-chart',
+        componentTag: 'iot-app-kit-vis-line-chart',
         dataStreams: [NUMERICAL_ALARM_STREAM, PROPERTY_STREAM],
         annotations: { y: [ALARM_THRESHOLD] },
       });
@@ -244,7 +244,7 @@ describe('when provided alarm data through a `dynamic-widget`', () => {
 
     it('does not display a legend entry for numerical alarm data when rendering a scatter-chart', () => {
       visitDynamicWidget(cy, {
-        componentTag: 'sc-scatter-chart',
+        componentTag: 'iot-app-kit-vis-scatter-chart',
         dataStreams: [NUMERICAL_ALARM_STREAM, PROPERTY_STREAM],
         annotations: { y: [ALARM_THRESHOLD] },
       });
@@ -257,7 +257,7 @@ describe('when provided alarm data through a `dynamic-widget`', () => {
 
     it('does not display a legend entry for numerical alarm data when rendering a bar-chart', () => {
       visitDynamicWidget(cy, {
-        componentTag: 'sc-bar-chart',
+        componentTag: 'iot-app-kit-vis-bar-chart',
         dataStreams: [NUMERICAL_ALARM_STREAM, PROPERTY_STREAM],
         annotations: { y: [ALARM_THRESHOLD] },
       });
@@ -270,7 +270,7 @@ describe('when provided alarm data through a `dynamic-widget`', () => {
 
     it('does display a legend entry for numerical alarm data when rendering a status-timeline', () => {
       visitDynamicWidget(cy, {
-        componentTag: 'sc-status-timeline',
+        componentTag: 'iot-app-kit-vis-status-timeline',
         dataStreams: [NUMERICAL_ALARM_STREAM, PROPERTY_STREAM],
         annotations: { y: [ALARM_THRESHOLD] },
       });
@@ -290,7 +290,7 @@ describe('when provided alarm data through a `dynamic-widget`', () => {
 
   it('shows the data property on the legend as in alarm, from the associated alarm data which is being breached', () => {
     visitDynamicWidget(cy, {
-      componentTag: 'sc-line-chart',
+      componentTag: 'iot-app-kit-vis-line-chart',
       dataStreams: DATA,
       annotations: ANNOTATIONS,
     });
@@ -308,7 +308,7 @@ describe('when provided alarm data through a `dynamic-widget`', () => {
   it('shows the data property on the legend in alarm, when the most recent point is breaching a threshold', () => {
     // This viewport is offset such that a new data becomes the latest.
     visitDynamicWidget(cy, {
-      componentTag: 'sc-line-chart',
+      componentTag: 'iot-app-kit-vis-line-chart',
       dataStreams: DATA,
       annotations: ANNOTATIONS,
       viewportStart: new Date(2000, 0, 0, 6),
@@ -328,7 +328,7 @@ describe('when provided alarm data through a `dynamic-widget`', () => {
   it('shows the data property on the legend in alarm, when the most recent point is breaching a threshold, but is before the viewport', () => {
     // This viewport is offset such that none of the data presented is in view.
     visitDynamicWidget(cy, {
-      componentTag: 'sc-line-chart',
+      componentTag: 'iot-app-kit-vis-line-chart',
       dataStreams: DATA,
       annotations: ANNOTATIONS,
       viewportStart: new Date(2000, 0, 3),
@@ -348,7 +348,7 @@ describe('when provided alarm data through a `dynamic-widget`', () => {
   it('does not show any value or alarmed status when there is no values before the viewport', () => {
     // This viewport is offset such that all of the data is after the viewport
     visitDynamicWidget(cy, {
-      componentTag: 'sc-line-chart',
+      componentTag: 'iot-app-kit-vis-line-chart',
       annotations: ANNOTATIONS,
       dataStreams: DATA,
       viewportStart: new Date(1990, 0, 0),

packages/iot-app-kit-visualizations/cypress/integration/charts/annotation-rescaling.spec.ts

@@ -55,7 +55,7 @@ const yAnnotation: YAnnotation = {
 };
 
 const query: Partial<SearchQueryParams> = {
-  componentTag: 'sc-line-chart',
+  componentTag: 'iot-app-kit-vis-line-chart',
   viewportStart: X_MIN,
   viewportEnd: X_MAX,
   dataStreams: [

packages/iot-app-kit-visualizations/cypress/integration/charts/annotations-dragging.spec.ts

@@ -1,7 +1,7 @@
 import { DRAGGABLE_HANDLE_SELECTOR } from '../../../src/components/charts/common/annotations/YAnnotations/YAnnotations';
 
 it('correctly handles dragging annotations when multiple charts share a reference to the same annotation', () => {
-  cy.visit('http://localhost:3333/tests/sc-webgl-chart/annotations/draggable-multi');
+  cy.visit('http://localhost:3333/tests/webgl-chart/annotations/draggable-multi');
   cy.viewport(1000, 1000);
   cy.waitForChart();
 
@@ -27,7 +27,7 @@ it('correctly handles dragging annotations when multiple charts share a referenc
         .parent()
         .find('.y-value-text')
         .get(0).textContent as string;
-      cy.get('sc-line-chart')
+      cy.get('iot-app-kit-vis-line-chart')
         .last()
         .contains(firstAnnotationsValue)
         .should('not.exist');

packages/iot-app-kit-visualizations/cypress/integration/charts/bar-chart/draggable-annotations.spec.ts

@@ -18,7 +18,7 @@ import { moveHandle, moveHandleFilter, moveHandleWithPause, parseTransformYValue
 import { AggregateType } from '../../../../src/utils/dataTypes';
 
 const timelineParams: Partial<SearchQueryParams> = {
-  componentTag: 'sc-bar-chart',
+  componentTag: 'iot-app-kit-vis-bar-chart',
   viewportStart: X_MIN,
   viewportEnd: X_MAX,
   dataStreams: [

packages/iot-app-kit-visualizations/cypress/integration/charts/bar-chart/empty-status.spec.ts

@@ -2,7 +2,7 @@ import { CHART_VIZ_CONTAINER_SELECTOR, visitDynamicWidget } from '../../../../sr
 import { DATA_STREAM } from '../../../../src/testing/__mocks__/mockWidgetProperties';
 import { messageOverrides } from '../../../../src/testing/__mocks__/mockMessgeOverrides';
 
-const componentTag = 'sc-bar-chart';
+const componentTag = 'iot-app-kit-vis-bar-chart';
 
 it('renders the "no streams present" messaging when no streams preset', () => {
   visitDynamicWidget(cy, {

packages/iot-app-kit-visualizations/cypress/integration/charts/bar-chart/errors.spec.ts

@@ -7,7 +7,7 @@ import { DATA_STREAM } from '../../../../src/testing/__mocks__/mockWidgetPropert
 
 it('displays error when there is an error', () => {
   visitDynamicWidget(cy, {
-    componentTag: 'sc-bar-chart',
+    componentTag: 'iot-app-kit-vis-bar-chart',
     dataStreams: [{ ...DATA_STREAM, error: 'beep beep SEV-2' }],
   });
 

packages/iot-app-kit-visualizations/cypress/integration/charts/bar-chart/gestures.spec.ts

@@ -15,7 +15,7 @@ it('moves viewport when gestures are applied', () => {
   const OLD_X_AXIS_TICK = 'Fri 31';
 
   visitDynamicWidget(cy, {
-    componentTag: 'sc-bar-chart',
+    componentTag: 'iot-app-kit-vis-bar-chart',
     viewportStart: START,
     viewportEnd: END,
     gestures: true,
@@ -40,7 +40,7 @@ it('does not move viewport when gestures are not applied', () => {
   const OLD_X_AXIS_TICK = 'Fri 31';
 
   visitDynamicWidget(cy, {
-    componentTag: 'sc-bar-chart',
+    componentTag: 'iot-app-kit-vis-bar-chart',
     viewportStart: START,
     viewportEnd: END,
     gestures: false,
@@ -59,7 +59,7 @@ it('does not move viewport when gestures are not applied', () => {
 
 it('adjusts y range as data in the view changes', () => {
   cy.viewport(VIEWPORT_WIDTH, VIEWPORT_HEIGHT);
-  cy.visit(`${root}/chart/y-range?componentTag=sc-bar-chart`);
+  cy.visit(`${root}/chart/y-range?componentTag=iot-app-kit-vis-bar-chart`);
 
   const EXISTING_Y_VALUE = '18k';
 

packages/iot-app-kit-visualizations/cypress/integration/charts/bar-chart/loading.spec.ts

@@ -3,7 +3,7 @@ import { DATA_STREAM } from '../../../../src/testing/__mocks__/mockWidgetPropert
 
 it('renders spinner', () => {
   visitDynamicWidget(cy, {
-    componentTag: 'sc-bar-chart',
+    componentTag: 'iot-app-kit-vis-bar-chart',
     dataStreams: [{ ...DATA_STREAM, isLoading: true }],
   });
 

packages/iot-app-kit-visualizations/cypress/integration/charts/bar-chart/sc-webgl-bar-chart.spec.ts

@@ -5,7 +5,7 @@ import { Y_VALUE } from '../../../../src/testing/test-routes/charts/constants';
 const SMALL_WAIT = 0.1 * SECOND_IN_MS;
 
 describe('bar chart', () => {
-  const root = '/tests/sc-webgl-bar-chart';
+  const root = '/tests/webgl-bar-chart';
 
   const VIEWPORT_HEIGHT = 600;
   const VIEWPORT_WIDTH = 500;
@@ -165,7 +165,7 @@ describe('bar chart', () => {
 });
 
 describe('handles buffer increasing in size after initialization', () => {
-  const root = '/tests/sc-webgl-bar-chart';
+  const root = '/tests/webgl-bar-chart';
   const VIEWPORT_HEIGHT = 600;
   const VIEWPORT_WIDTH = 500;
 

packages/iot-app-kit-visualizations/cypress/integration/charts/bar-chart/threshold-coloration.spec.ts

@@ -1,4 +1,4 @@
-const bcRoot = '/tests/sc-webgl-bar-chart';
+const bcRoot = '/tests/webgl-bar-chart';
 
 // @ts-ignore
 const VIEWPORT_HEIGHT = 600;