Describe the bug
When you have multiple charts and have multiple annotations in each of the chart, changing an annotation via dragging would cause another annotation to jump around. See video.

I think this affects thresholds too.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://synchrocharts.com/#/Features/Annotation
2. Click around the annotations. See video

Expected behavior
Maybe not have the annotation jump around when its not being dragged?

Or, if they are all in the same group, maybe changing one annotation would automatically change all the other chart's annotation to have it sync up.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: mac Big Sur 11.6 (20G165)
• Browser: chrome
• Version 94.0.4606.97

Additional context
Add any other context about the problem here

.

link to iot-app-kit in both places

the arcs in dial and gauge should not 'transition' when values changed. instead the visualizations should immediately reflect the current value displayed.

Describe the bug
When a viewport is duration based and is in live mode, Synchro Charts incorrectly calls on dateRangeChange, causing the widgets to rerender upon date range change events.

To Reproduce
Steps to reproduce the behavior:

1. Provide a duration for the viewport to a chart
2. Have some way of telling what the viewport is
3. See that viewport changes from duration to custom range with a start and end
4. See that the date range is changed upon every live tick

Expected behavior
dateRangeChange is expected to only be called on when gestures are applied. Live ticks for when viewport is in duration mode should not fire the dateRangeChange event.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Mac
• Browser Firefox
• Version 91.10.0esr

Additional context
This was discovered while testing from IoT Application Kit

Describe the bug
On the synchro chart docs demo page page, invalid data will be added to the chart when clicking 'Add Data' a few times.

To Reproduce
Steps to reproduce the behavior:

1. Go to synchro chart docs demo page page.
2. Click on 'Add Data' twice
3. Data type error appears on line chart

Expected behavior
Only valid data should be added to the chart.

Screenshots

Desktop (please complete the following information):

• OS: MacOS Monterey 12.6.1
• Browser: Chrome
• Version: 109.0.5414.87

Is your feature request related to a problem? Please describe.
Ease of use of library. User may not be interested in importing many enums to declare settings, but then will have typescript errors

Describe the solution you'd like
Allow settings to be specified optionally as just a string, i.e. instead of DataType.NUMBER, just 'NUMBER'.

• rename synchro-charts
• delete KPI, status-grid, table and related utils
• only publish react-components + necessary types

Is your feature request related to a problem? Please describe.
Utilizing Synchro Charts in applications with other software that uses threejs causing issues due to Synchro Charts relying on a specific threejs version.

Describe the solution you'd like
Use threejs as a peer-dependency to allow for a larger range threejs versions, allowing the usage of Synchro Charts more easily in applications that use threejs

When a component such as a line chart is on the very bottom of the browsers screen, the bottom 16px of the browser will not render any visualizations.

This bug is only visible if there is no horizontal scroll bar present on the bottom of the browser.

Describe the issue with documentation
Currently missing documentation on importing style sheets

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to synchrocharts.com
2. Open a seperate tab on your browser, and visit that tab, leaving the synchrocharts.com page in the background tab.
3. Wait 5 seconds
4. Switch back to the synchrocharts.com tab
5. Observe the live updating chart, it will 'jerk' everytime new data is provided to it

Expected behavior
Expect a smooth UX when live streaming data in

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: OSX 11.6.2
• Browser: chrome
• Version: 96.0.4664.110 (Official Build) (x86_64)

Additional context
Confirmed that this regression was introduced within c1c1793

expect there to be a space in-between the unit and the value displayed.

Reproduce: Render a gauge component with a negative yMin, and a threshold present. this will result in the outter arc rendering outside of the expected region as shown below:

description: when scroling up and down, errors thrown
updates appear to be queued up and then run after a chart gets unmounted. need a cleaner handling of this

steps: go to asset library, add lots of assets with charts, scroll up and down on chrome

view [Alarm Bug Bash] SynchroCharts error thrown - scene not present ticket for more info

currently always displays as blue. should be dataStream.color.

The dial and gauge components have a tooltip UX inconsistent with other SynchroCharts components.

The current gauge tooltip is shown below:

• does not format the status in a consistent manner with other widgets (see below image) i.e. should say "Status: Normal since TIMESTAMP", but instead it just says "Normal"
• Displays the percentage, rather than displaying the actual value

below is an example of the desired UX, as present on the KPI

Describe the bug
When a visualization is on the right edge of a page and you hover over data on the right side of the visualization, the tool tip extends beyond the edge of the page and the tool tip is cut in half. When this happens, you can't see the values of the data streams you are trying to inspect.

To Reproduce
Steps to reproduce the behavior:

1. Place a visualization on the right edge of a page.
2. Hover over the data streams.
3. View the tool tip cut in half.

Expected behavior
The data should be completely visible and the tool tip shouldn't extend the left and right boundaries of the visualization. Can the tool tip flip direction when it nears the boundary?

Screenshots

currently arc is always a solid blue color.

Describe the bug
When changing the position of the widget the visualization renders outside the widget and then snaps back.

To Reproduce
Steps to reproduce the behavior:

• Go to https://synchrocharts.com/#/Components/LineChart
• Open in isolated mode and then switch back
• For a split second the visualization will be rendered outside the widget

Expected behavior
I expect the visualization to always be synchronized with the position of the widget

Screenshots

Desktop (please complete the following information):

• OS: [e.g. iOS] macOS Catalina Version 10.15.7
• Browser [e.g. chrome, safari] Google Chrome
• Version [e.g. 22] Version 96.0.4664.93 (Official Build) (x86_64)

Additional context
Device: MacBook Pro (16-inch)
Graphics: AMD Radeon Pro 5300M 4GB, Intel UHD Graphics 630 1536 MB

In charts, if the y-axis value exceeds 5 digits (EX: 120,000) the value will be cutoff starting from the left-most digits (EX: 120,000 will appear as 20,000)

Is your feature request related to a problem? Please describe.
All synchro chart components require a widgetId, regardless if a user wants to use it or not.

WidgetId is only useful for intercepting annotation or name changes, a feature not required by everyone.

Describe the solution you'd like
Make widgetId optional, auto generate one when left unspecified.

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to synchrocharts.com
2. Go do something else for a lengthy period of time
3. Come back to synchrocharts.com, look at the charts. The data will not be rendering
4. If you resize the window, the webGL context will restore and the renderings will come back

Expected behavior
WebGL Context should be restored on window focus

Describe the bug
When given multiple thresholds, and the datastream doesn't breach all of the thresholds, breachedThreshold focuses on determining the order of the threshold and doesn't properly return any of the breached threshold.

To Reproduce
Steps to reproduce the behavior:

1. Create two thresholds, such as:

  isEditable: true,
  comparisonOperator: COMPARISON_OPERATOR.GREATER_THAN,
  value: 25,
  label: {
    text: '2',
    show: true,
  },
  showValue: true,
  color: 'green',
  id: 'green-y-threshold',
  severity: 2,
};

const threshold2: Threshold<number> = {
  isEditable: true,
  comparisonOperator: COMPARISON_OPERATOR.LESS_THAN,
  value: 35,
  label: {
    text: '1',
    show: true,
  },
  showValue: true,
  color: 'red',
  id: 'red-y-threshold',
  severity: 1,
};

Note that I added a severity property to the thresholds, but testing this behavior with or without the severity both lead to the same incorrect behavior.
2. Create a data stream such as:

const dataStream = {
  id: 'data-stream',
  name: 'some name',
  color: 'red',
  resolution: 0,
  data: [{ x: Date.now(), y: 20 }],
  dataType: DataType.NUMBER,
};

4. Call on breachedThreshold:

          value: dataStream.data[0].y,
          date: new Date(dataStream.data[0].x),
          thresholds: [threshold1, threshold2],
          dataStreams: [],
          dataStream: dataStream as SynchroChartsDataStream,
        });

5. breachedThresh is undefined

Expected behavior
When given multiple thresholds, breachedThreshold should return the threshold of the highest severity that has been breached. Whether a threshold is breached or not is independent of other thresholds and their severities. In the case of the example in the reproduction process, we expect breachedThresh to be threshold2 since the datapoint breaches that threshold.

Screenshots
https://user-images.githubusercontent.com/40257222/178842543-c582ac6c-bfe3-488e-8595-beaa65a797e8.mov

Desktop (please complete the following information):

• OS: macOS Monterey
• Browser Firefox
• Version 91.10.0esr

To reproduce, render two dial/gauge widgets (or more) that are displaying the same data stream.

On initial render, it will be correct. If you then refresh the screen, it will render in an incorrect state

Below is an example of an incorrect state (note that the yMax is greater than 1000, so the full dial and gauge are incorrect representations of the data).

The default font size relative to the widget for the dial is smaller than expected

Expect the default sizing between the dial and gauge to be similar to make them visually consistent when utilized with default settings.

Reproduction: On a gauge component, add a threshold with a value which is not contained within the interval defined by `[yMin, yMax].

This results in an unexpected rendering of the 'outter threshold line' to render outside of the confines expected for the gauge (the 120 degree arc)

In CONTRIBUTING.md under section Contributing via Pull Requests in section 5.3 the link for 'Example of modified GitHub actions to include snapshot.' is not accessible (returns a 404 Page Not Found error).

iii. If your pull request adds cypress integration tests which perform a snapshot, the snapshots must be created within the CI process. To achieve this, you will need to temporarily alter the GitHub workflow to generate and persist snapshots. Create a pull request within your own forked version of Synchro Charts. Once the tests complete, it will provide you with a file containing the generated snapshots. Take these generated snapshots, manually confirm they look correct, and then add them to the repository. Revert any changes made to the GitHub actions, and now you have correctly generated new snapshots! Example of modified GitHub actions to include snapshot.