[Gauge] - Able to add Gauge Widget to Dashboard

[corteggiano]

❗ PLEASE MAKE THESE CHANGES UNDER A FEATURE FLAG

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

Create a feature flag by setting a local_storage value and referencing it as this:
const hasGauge = !!localStorage?.getItem('HAS_GAUGE_WIDGET');

Implementation Steps:

1. Add the following to iot-app-kit/packages/dashboard/src/customization/widgets/types.ts

export type GaugeProperties = QueryProperties & {
  gaugeThickness?: number;
  showName?: boolean;
  showUnit?: boolean;
  fontSize?: number;
  labelFontSize?: number;
  unitFontSize?: number;
  yMin?: number;
  yMax?: number;
};

export type GaugeWidget = DashboardWidget<GaugeProperties>;

1. Create Gauge folder under iot-app-kit/packages/dashboard/src/customization/widgets

2. In the folder, you will need the implement the following files (take a look at KPI for an idea of what to do for each file):

   • component.tsx - this is where you will use the react-component implementation
   • icon.tsx - Represents the icon that will be shown in the widget palette
   • plugin.tsx - Represents the initial state of all the settings when the widget is added to a dashboard
     Initial states should include an initialSize, showName: true, showUnit: true

3. Users should be able to add the gauge widgets to the dashboard

   • Make sure you cannot add more than 1 property to a widget (we already do this for KPI so it should be the same behavior)

Dial Acceptance criteria

Beta Give feedback

1. User can add a gauge component to dashboard
2. User cannot add more than one property to a gauge widget

[jmbuss]

svg for the component library section.

[corteggiano]

here are the light and dark mode SVGs