Widget: Implement a Configurable Dashboard Widget with Live Data Refresh

Question

## Problem

Build a reusable dashboard widget component that displays a metric with a title, current value, and sparkline trend chart. The widget polls a data endpoint at a configurable interval and updates in place without full re-render.

```tsx
// React / TypeScript
interface WidgetProps {
  title: string;
  endpoint: string;        // URL returning {value: number, history: number[]}
  refreshIntervalMs: number;
  unit?: string;           // e.g. "ms", "%", "req/s"
  alertThreshold?: number; // highlight red if value > threshold
}

export function Widget({ title, endpoint, refreshIntervalMs, unit, alertThreshold }: WidgetProps) {
  // ...
}
```

**Requirements:** Show loading and error states. History sparkline updates smoothly. Widget cleans up its interval on unmount.

## Follow-ups

1. How do you prevent a state update on an unmounted component after a fetch resolves?
2. If 20 widgets all poll the same endpoint, how would you deduplicate the network requests?
3. How would you animate the sparkline when new data points are appended?
4. How would you make the widget accessible (screen reader support for live value updates)?

Widget: Implement a Configurable Dashboard Widget with Live Data Refresh

Question Details

Full Details

Topics

More from Verkada