Real-Time Monitoring

Centinela provides comprehensive real-time monitoring capabilities, combining dashboard widgets, historical charts, and interactive diagrams to give you complete visibility into your water treatment operations.

Monitoring Components

The system offers three primary monitoring interfaces, each optimized for different operational needs:

Dashboard

At-a-glance view of critical KPIs with auto-refreshing widgets.

Historical Charts

Time-series analysis with zoom, export, and multi-variable comparison.

Process Diagrams

Visual representation of equipment with live data overlays.

Real-Time Data Flow

Understand how live data flows through the Centinela monitoring system:

Data Collection

Sensors and PLCs send measurements to InfluxDB time-series database continuously.

Variable Mapping

Configured InfluxDB variables link database fields to display components.

Batch Retrieval

Centinela fetches multiple variable values in a single optimized API call.

Component Updates

Dashboard widgets, charts, and diagrams update with the latest values.

Auto-Refresh Cycle

Process repeats automatically at configured intervals (30s for dashboards, 15s for charts).

Dashboard Monitoring

The main dashboard provides instant visibility into current system status.

Auto-Refresh Behavior

Dashboard widgets automatically refresh every 30 seconds, fetching all variable values in a single batched API request for optimal performance.

Refresh cycle:

// Initial load: fetch all chart configurations
getCharts() → extract variables → fetchMultipleData()

// Set 30-second interval
setInterval(() => fetchMultipleData(allVars), 30000)

Visual Indicators

Widgets provide visual cues about data status:

Active Data
Offline/No Data

Animations running (liquid waves, gauge sweeps)
Vibrant gradient colors
Current numeric values displayed
LED indicators glowing when active

Responsive Layout

The dashboard grid automatically adapts to screen size:

Mobile (< 600px): Single column, full-width widgets
Tablet (600-1200px): 2-column layout for standard widgets
Desktop (> 1200px): 4-6 column grid for dense information display

On mobile devices, scroll vertically to view all widgets. The layout prioritizes readability over information density.

Historical Chart Monitoring

Access detailed historical analysis through the accordion-based chart dashboard.

Accordion Interface

Charts are organized in collapsible accordions:

Collapsed state: Shows only the chart title, no data loading
Expanded state: Loads data and begins 15-second auto-refresh
Re-collapse: Stops data fetching to conserve resources

Only expanded charts consume API resources. Collapse charts you’re not actively viewing to improve performance.

Time Range Filtering

Line charts include powerful time range controls:

Slider Control

Drag the time slider at the bottom to select visible date range.

Zoom Tools

Click and drag on the chart to zoom into specific time periods.

Filter Panel

Select absolute date ranges or relative periods (last hour, today, this week).

Restore View

Reset to default view with a single click.

Adaptive Sampling

The system automatically adjusts data sampling based on the selected time range:

Time Range	Sampling Period	Data Points
≤ 15 min	5 seconds	~180 points
≤ 1 hour	1 minute	~60 points
≤ 12 hours	5 minutes	~144 points
≤ 7 days	5 minutes	~2,016 points
≤ 30 days	30 minutes	~1,440 points
≤ 365 days	1 hour	~8,760 points
> 365 days	12 hours	Varies

Why Adaptive Sampling?

Performance: Prevents loading millions of data points for long time ranges.Readability: Maintains chart clarity at all zoom levels.Accuracy: Provides fine granularity for recent data, aggregates older data.Network Efficiency: Reduces bandwidth and server load.

Interactive Features

Zoom and Pan:

// Zoom by dragging on chart
onZoomRange({ startMs, endMs }) → recalculate filters

// Pan with slider at bottom
dataZoom.start = 20%  // View data from 20% into timeline
dataZoom.end = 80%    // to 80% of timeline

Data Export:

Save as Image: Export current view as PNG
View as Table: See raw data in tabular format with timestamps
Copy Values: Select and copy data from table view

Multi-Series Comparison

Line charts can display multiple variables simultaneously:

Configure Series

Admin configures which variables appear on the same chart.

Color Coding

Each series gets a distinct color for easy identification.

Interactive Legend

Click legend items to show/hide specific series.

Synchronized Tooltips

Hover to see all series values at the same timestamp.

Process Diagram Monitoring

View saved diagrams with live data overlays for visual process monitoring.

Loading Diagrams

Access the diagram viewer to see your saved process diagrams:

/diagrams/view/:id

The viewer displays:

Complete diagram layout with all images, lines, and text
Live data tooltips on elements with assigned variables
Current values with units
Color-coded status for boolean variables

Variable Overlays

Diagram elements bound to variables show real-time data:

Numeric Values
Boolean Status
Percentage Display
Binary Bits

Display format: 45.2 m³Position options: Center, Top, Bottom, Left, Right

Color changes based on true/false state.Configured colors: colorOn (active), colorOff (inactive)

When maxValue is configured: 75.5% of 100Shows fill level or capacity utilization

Variable tooltips can be positioned relative to the diagram element to avoid visual clutter and ensure readability.

Available positions:

Centro (Center): Overlaid on element center
Top: Above the element
Bottom: Below the element
Left: To the left of the element
Right: To the right of the element

Data Quality Indicators

The system provides clear feedback about data availability and quality:

Connection Status

Connected

Green indicators, active animations, current values displayed

Disconnected

Gray/muted colors, “Sin datos” messages, paused animations

Timestamp Information

Line charts display precise timestamps for all data points:

Format: DD/MM/YYYY HH:mm:ss
Timezone: America/Argentina/Buenos_Aires

Example: 04/03/2026 14:35:42

Value Validation

All displayed values undergo validation:

const isValidNumber = (v) =>
  v !== null &&
  v !== undefined &&
  v !== '' &&
  !isNaN(Number(v));

Invalid values trigger fallback displays rather than showing error states.

Performance Optimization

Centinela employs several strategies to ensure smooth real-time monitoring:

Batched API Requests

The system uses batched requests to fetch multiple variable values in a single API call, reducing network overhead by 10-100x compared to individual requests.

Dashboard optimization:

// Instead of N requests (one per widget):
fetchVariable(var1)
fetchVariable(var2)
fetchVariable(var3)
// ...

// Single batched request:
fetchMultipleData([var1, var2, var3, ..., varN])

Conditional Rendering

Collapsed chart accordions don’t fetch data
Hidden widgets don’t re-render
Offscreen elements use virtual scrolling (where applicable)

Memoization

React components use memoization to prevent unnecessary re-renders:

const LineChart = memo(({ xSeries, ySeries, ... }) => {
  const memoizedOptions = useMemo(() => {
    // Expensive chart options calculation
  }, [dependencies]);
  
  return <EChart config={memoizedOptions} />;
});

Efficient Updates

Only changed values trigger component updates:

useEffect(() => {
  if (!inflValues || Object.keys(inflValues).length === 0) return;
  
  // Update only affected components
  setChartData(resolveValues(inflValues));
}, [inflValues]);

Mobile Monitoring

The system is fully responsive for mobile monitoring:

Mobile Optimizations

Layout
Charts
Diagrams

Single column stack layout
Larger touch targets (buttons, sliders)
Simplified chart legends

Mobile Best Practices

Landscape orientation provides more chart viewing area
Wifi connection recommended for smooth auto-refresh
Focus on critical widgets to reduce scrolling
Use dashboard for quick checks, expand to charts for analysis

Troubleshooting

Widgets Show 'Sin datos'

Possible causes:

InfluxDB connection issue
Variable not receiving sensor data
Variable ID misconfigured
Network connectivity problem

Check:

InfluxDB status and connectivity
Sensor/PLC communication
Browser console for API errors

Charts Not Updating

Verify:

Chart is expanded (accordion open)
Browser tab is active (background tabs may throttle timers)
Network connection is stable
Check browser console for errors

Solution:

Refresh the page
Collapse and re-expand the chart
Check server logs for API issues

Slow Performance

Optimization steps:

Collapse unused chart accordions
Reduce selected time range on line charts
Clear browser cache
Close other browser tabs
Check network bandwidth

If persistent:

Contact admin to review number of configured widgets
Consider increasing refresh intervals
Review server capacity

Diagram Data Not Showing

Check:

Variables are properly assigned to diagram elements
Variable IDs match configured InfluxDB variables
Tooltip visibility is enabled (show: true)
Data is available in InfluxDB for those variables

Best Practices

Monitoring Strategy

Primary View: Dashboard

Use the main dashboard for ongoing operational monitoring with quick visual scans.

Investigation: Historical Charts

When anomalies appear, expand relevant charts to analyze trends and patterns.

Context: Process Diagrams

View diagrams to understand spatial relationships and process flow context.

Alarms: Proactive Alerts

Configure alarms to notify you of issues before manual monitoring would detect them.

Screen Layout Recommendations

Single Monitor:

Dashboard as primary view
Quick access to charts via navigation

Dual Monitor:

Monitor 1: Dashboard (full-screen)
Monitor 2: Rotate through key historical charts

Control Room:

Large display: Process diagrams with live data
Operator stations: Dashboard + charts as needed

Integration Points

Real-time monitoring integrates with other Centinela features:

Alarms

Alarms trigger based on real-time data, visible in monitoring views.

Reports

Historical data feeds into automated reporting systems.

Learn More

Explore chart configuration and customization options in the Charts documentation.

​Monitoring Components

Dashboard

Historical Charts

Process Diagrams

​Real-Time Data Flow

​Dashboard Monitoring

​Auto-Refresh Behavior

​Visual Indicators

​Responsive Layout

​Historical Chart Monitoring

​Accordion Interface

​Time Range Filtering

Slider Control

Zoom Tools

Filter Panel

Restore View

​Adaptive Sampling

​Interactive Features

​Multi-Series Comparison

​Process Diagram Monitoring

​Loading Diagrams

​Variable Overlays

​Tooltip Positioning

​Data Quality Indicators

​Connection Status

Connected

Disconnected

​Timestamp Information

​Value Validation

​Performance Optimization

​Batched API Requests

​Conditional Rendering

​Memoization

​Efficient Updates

​Mobile Monitoring

​Mobile Optimizations

​Mobile Best Practices

​Troubleshooting

​Best Practices

​Monitoring Strategy

​Screen Layout Recommendations

​Integration Points

Alarms

Reports

Learn More

Monitoring Components

Real-Time Data Flow

Dashboard Monitoring

Auto-Refresh Behavior

Visual Indicators

Responsive Layout

Historical Chart Monitoring

Accordion Interface

Time Range Filtering

Adaptive Sampling

Interactive Features

Multi-Series Comparison

Process Diagram Monitoring

Loading Diagrams

Variable Overlays

Tooltip Positioning

Data Quality Indicators

Connection Status

Timestamp Information

Value Validation

Performance Optimization

Batched API Requests

Conditional Rendering

Memoization

Efficient Updates

Mobile Monitoring

Mobile Optimizations

Mobile Best Practices

Troubleshooting

Best Practices

Monitoring Strategy

Screen Layout Recommendations

Integration Points