awslabs / iot-app-kit

A development library for creating web applications to visualize industrial data
Apache License 2.0
111 stars 58 forks source link

[Gauge] - Able to add Gauge Widget to Dashboard #2635

Closed corteggiano closed 2 months ago

corteggiano commented 7 months ago
:exclamation: PLEASE MAKE THESE CHANGES UNDER A FEATURE FLAG
:exclamation: 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;

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)

```[tasklist]
### Dial Acceptance criteria
- [ ] User can add a gauge component to dashboard
- [ ] User cannot add more than one property to a gauge widget
jmbuss commented 5 months ago

Gauge (1)

svg for the component library section.

corteggiano commented 5 months ago

here are the light and dark mode SVGs gauge-light gauge-dark