[Dial and Gauge] - Implement Dial in react-components

[corteggiano]

React-components - Dial

---

:exclamation: PLEASE MAKE THESE CHANGES IN SMALL INCREMENTAL PRs AND NOT AT ONCE

Modify the existing Dial components to use an echarts implementation instead of the current implementation.

The files can be found here: iot-app-kit/packages/react-components/src/components/dial

Engineer will also need to update the useTimeSeriesData call within the existing Dial component to support aggregation and resolution

const { dataStreams } = useTimeSeriesData({
    viewport: passedInViewport,
    queries: [query],
    settings: { 
        fetchMostRecentBeforeEnd: true,  
        resolution: '0'  // REMOVE THIS
    },
    styles,
  });

YMin and YMax represent the two edges of the dial and they should default to ymin = 0 and ymax = 100 if values are not provided

---

Thresholds

thresholds are not represented in the dial component but they should change the dial's color depending on if the threshold is met in this example, there is a threshold > 40 with color orange

please dont add the warning text since that is not supported by our threshold type definition

---

once implementation and testing are complete, export the component from iot-app-kit/packages/react-components/src/index.ts

### Acceptance criteria
- [ ] Dial component is implemented per designs
- [ ] Thresholds change the color of the dial
- [ ] Dial component is tested in react-components
- [ ] Dial component has a storybook page under `iot-app-kit/packages/react-components/stories`
- [ ] Dial component is exported from `iot-app-kit/packages/react-components/src/index.ts`