Dashboards & Widgets

TwinEdge provides a powerful dashboard builder for visualizing your industrial IoT data in real-time.

Dashboard Overview

Dashboards are collections of widgets that display data from your connected devices. Each dashboard can contain multiple widgets arranged in a flexible grid layout.

Dashboard Types

Type	Description	Best For
Overview	High-level KPIs across assets	Executives, managers
Asset Detail	Deep dive into single asset	Operators, engineers
Alert Focus	Active alerts and issues	Operations center
Trend Analysis	Historical comparisons	Analytics, maintenance

Creating Dashboards

New Dashboard

1. Navigate to Dashboards → New Dashboard
2. Enter a name and optional description
3. Choose a layout template or start blank
4. Click Create

Dashboard Settings

Access settings via the gear icon:

• Name & Description: Update metadata
• Time Range: Default time window
• Auto-refresh: Update interval (5s to 1h)
• Variables: Dynamic parameters
• Annotations: Event markers

Widget Library

Value Widgets

KPI Card

Displays a single value with optional trend and thresholds.

Configuration:

• Data source and tag selection
• Unit and decimal places
• Warning/Critical thresholds
• Sparkline trend (optional)

Gauge

Radial gauge for values with defined ranges.

Configuration:

• Min/Max values
• Color zones (green/yellow/red)
• Value format

Progress Bar

Linear progress indicator.

Configuration:

• Target value
• Color gradient

Chart Widgets

Line Chart

Time-series data visualization.

Features:

• Multiple series support
• Customizable time range
• Zoom and pan
• Data point tooltips
• Export to CSV/PNG

Configuration:

• Tags to display
• Y-axis settings
• Line colors and styles
• Fill area (optional)

Bar Chart

Compare values across categories.

Configuration:

• Grouping (by asset, tag, time)
• Stacked or grouped bars
• Horizontal/vertical orientation

Heatmap

Visualize data density patterns.

Configuration:

• X-axis: Time buckets
• Y-axis: Categories
• Color scale

Data Widgets

Table

Tabular data display with sorting and filtering.

Features:

• Column selection
• Sortable columns
• Row highlighting (thresholds)
• Export to CSV

Alert List

Active alerts for selected data sources.

Configuration:

• Filter by severity
• Filter by status
• Show acknowledgement status

Map Widgets

Asset Map

Geographic visualization of assets.

Features:

• Clustered markers
• Status-based coloring
• Click to view details

Configuration:

• Map provider (OpenStreetMap)
• Default zoom level
• Asset filtering

Custom Widgets

Image/Diagram

Upload P&ID diagrams or floor plans with data overlays.

Features:

• Upload PNG/SVG
• Place data points on image
• Dynamic value display

Markdown

Static text with markdown formatting.

Use Cases:

• Instructions
• Shift notes
• Links to documentation

Layout & Styling

Grid System

Dashboards use a 24-column responsive grid:

• XL (1920px+): 24 columns
• LG (1200px+): 12 columns
• MD (768px+): 6 columns
• SM (under 768px): 2 columns

Resizing Widgets

• Drag corners to resize
• Hold Shift for proportional resize
• Double-click border to auto-fit

Widget Spacing

• Default gap: 8px
• Adjust in dashboard settings
• Compact mode for dense layouts

Variables

Variables make dashboards dynamic and reusable.

Variable Types

Type	Description	Example
Data Source	Select from connected sources	${datasource}
Tag	Select specific tags	${tag}
Text	Free text input	${search}
Query	Dynamic options from query	${location}
Interval	Time interval selection	${interval}

Using Variables

Reference variables in widget configurations:

Data Source: ${datasource}
Tag Filter: ${tag}

Multi-Value Variables

Enable multi-select for comparing across assets:

Show data from: Pump_001, Pump_002, Pump_003

Time Controls

Time Range Picker

Available presets:

• Last 15 minutes
• Last 1 hour
• Last 6 hours
• Last 24 hours
• Last 7 days
• Last 30 days
• Custom range

Auto-Refresh

Refresh intervals:

• Off
• 5 seconds
• 10 seconds
• 30 seconds
• 1 minute
• 5 minutes

Relative vs Absolute Time

• Relative: "Last 1 hour" - updates on refresh
• Absolute: "Jan 1, 10:00 - Jan 1, 11:00" - fixed window

Sharing & Access

Share Link

Generate a link to share the dashboard:

1. Click Share → Copy Link
2. Link includes current time range and variables

Embed

Embed dashboards in external applications:

1. Click Share → Embed
2. Copy the iframe code
3. Paste into your application

<iframe
  src="https://app.twinedgeai.com/embed/dashboard/abc123?theme=dark"
  width="100%"
  height="600"
  frameborder="0"
></iframe>

Permissions

Control who can view/edit:

• Viewers: Can view only
• Editors: Can modify layout and widgets
• Admins: Full control including deletion

Templates

Built-in Templates

• Pump Monitoring: Vibration, temperature, flow
• Motor Analysis: Current, voltage, power
• Environmental: Temperature, humidity mapping
• Energy Dashboard: Consumption, costs, efficiency

Saving as Template

1. Create and configure your dashboard
2. Click Save as Template
3. Template appears in the template gallery

Importing Templates

1. Dashboards → Templates
2. Browse available templates
3. Click Use Template
4. Customize for your data sources

Performance Optimization

Best Practices

1. Limit widgets: 10-15 per dashboard maximum
2. Appropriate time ranges: Shorter ranges load faster
3. Data aggregation: Use averages for long time ranges
4. Refresh intervals: Match to data collection rate

Troubleshooting Slow Dashboards

• Check widget count
• Reduce time range
• Enable data aggregation
• Review data source query performance

Export & Reporting

Export Dashboard

• PNG: Screenshot of current state
• PDF: Multi-page report format
• JSON: Dashboard configuration (for backup/migration)

Scheduled Reports

Professional tier feature:

1. Dashboards → Schedule Report
2. Select format (PDF/PNG)
3. Set schedule (daily, weekly, monthly)
4. Add recipients
5. Click Create Schedule

Keyboard Shortcuts

Shortcut	Action
E	Edit mode toggle
S	Save dashboard
R	Refresh data
F	Full screen
Esc	Exit full screen/edit mode
?	Show shortcuts

Next Steps

• Alerts & Notifications - Configure automated alerts
• Query Builder - Write custom queries
• Scheduled Reports - Automate reporting