https://github.com/schlessera/dashboard-abstraction-poc
https://github.com/schlessera/dashboard-abstraction-poc
Last synced: over 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/schlessera/dashboard-abstraction-poc
- Owner: schlessera
- Created: 2025-01-28T17:24:47.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-29T00:59:53.000Z (over 1 year ago)
- Last Synced: 2025-03-25T00:12:25.999Z (over 1 year ago)
- Language: TypeScript
- Homepage: https://schlessera.github.io/dashboard-abstraction-poc/
- Size: 3.7 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Dashboard Widget Architecture POC
This project demonstrates a flexible and extensible dashboard architecture using React and TypeScript. It showcases several design patterns and architectural approaches for building modular, maintainable widget-based dashboards.
## Core Concepts
### Architecture Overview
```mermaid
graph TD
Dashboard[Dashboard] --> |Creates| WF[Widget Factory]
Dashboard --> |Manages State| WS[Widget State]
WF --> |Creates| W1[Widget Instance]
W1 --> |Uses| DP[Data Provider]
W1 --> |Uses| CS[Cache Service]
subgraph Data Sources
DP --> |Fetches| API[Remote API]
DP --> |Loads| Files[JSON Files]
DP --> |Uses| Mock[Mock Data]
end
```
### Widget Creation Flow
```mermaid
sequenceDiagram
participant D as Dashboard
participant WF as Widget Factory
participant W as Widget
participant DP as Data Provider
participant CS as Cache Service
D->>WF: createWidget(id, type)
WF->>W: create(props)
W->>CS: check cache
alt Cache Hit
CS-->>W: return cached data
else Cache Miss
W->>DP: fetch data
DP-->>W: return data
W->>CS: store in cache
end
W-->>D: render widget
```
## Features
### Data-Driven Widgets
- Remote data fetching with caching
- Multiple data source support (APIs, JSON files)
- Automatic error handling
- Loading states
- Type-safe data handling
### Table Widget System
- Dynamic column configuration
- Automatic title adaptation
- Data caching
### Widget Factory
- Central registry of available widgets
- Type-safe widget creation
- Widget metadata management
- Automatic widget discovery in UI
### Dashboard Features
- Dynamic widget layout
- Add/remove widgets
- Widget state persistence
- Empty state handling
- Responsive grid system
## Architecture Benefits
1. **Extensibility**
- New widgets can be added without modifying dashboard code
- Support for different data sources
- Pluggable caching mechanisms
2. **Maintainability**
- Clear separation of concerns
- Isolated widget logic
- Centralized widget management
3. **Reusability**
- Shared components and patterns
- Abstract data handling
- Common widget features
## Getting Started
1. Install dependencies:
```bash
npm install
```
2. Run Storybook:
```bash
npm run storybook
```
3. Build for production:
```bash
npm run build
```
## Development
### Adding a New Widget
1. Create widget component
```typescript
export const MyWidget: React.FC = ({ id, title, onRemove }) => {
return (
{/* Widget content */}
);
};
```
2. Add to WidgetFactory
```typescript
export class WidgetFactory {
private static readonly widgetTypes: WidgetTypeInfo[] = [
{
type: 'my-widget',
label: 'My Widget',
description: 'My Widget description'
},
//...
];
createWidget(widgetId: string, type: WidgetInstance['type'], onRemove?: (id: string) => void): React.ReactElement {
switch (type) {
case 'my-widget':
return ;
//...
}
}
}
```
## Project Structure
```
src/
components/
Dashboard/ # Dashboard component and layout
Widget/ # Widget components and base classes
services/
DataProvider.ts # Data fetching abstraction
WidgetFactory.ts # Widget creation and management
storybook/
stories/ # Component stories
public/
fixtures/ # JSON data files
```