Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/CspmIT/centinela-front/llms.txt

Use this file to discover all available pages before exploring further.

The Centinela dashboard provides a comprehensive, real-time view of your water treatment system’s key performance indicators. All widgets update automatically every 30 seconds to ensure you have the latest operational data.

​
Dashboard Layout

The dashboard uses a responsive grid layout that adapts to your screen size. Each monitoring widget is displayed in a card format with real-time data visualization.
The dashboard automatically refreshes data every 30 seconds. You’ll see a loading animation on each widget during updates.

​
Available Chart Types

The dashboard supports multiple visualization types, each designed for specific monitoring needs:

Liquid Fill Gauges

Animated liquid-filled shapes showing percentage or volume measurements with multiple shape options (circle, rectangle, triangle, diamond).

Circle Gauges

Percentage indicators with circular progress bars, ideal for capacity and fill level monitoring.

Speed Gauges

Traditional gauge displays for flow rates, pressure, and speed measurements with needle indicators.

Boolean LED Indicators

Visual on/off status indicators with customizable colors and labels for equipment states.

Pump Controls

Multi-pump status displays showing operational state and control parameters.

Pie Charts

Distribution visualizations for categorical data analysis.

​
Widget Features

​
Data Source Integration

Each dashboard widget connects to InfluxDB variables to display real-time measurements: 
// Example: Dashboard fetches multiple variables in a single request
const variables = [
  { dataInflux: { id: 1, name: "Tank Level", unit: "m³" } },
  { dataInflux: { id: 2, name: "Flow Rate", unit: "L/s" } },
  { dataInflux: { id: 3, name: "Pressure", unit: "bar" } }
];

​
Auto-Refresh Mechanism

The dashboard implements an efficient polling system:
1

Initial Load

On page load, the system fetches all configured chart widgets from the backend.
2

Variable Extraction

All InfluxDB variables are extracted from the chart configurations into a single batch request.
3

Batch Data Fetch

A single API call retrieves values for all variables simultaneously, reducing server load.
4

Automatic Updates

Every 30 seconds, the batch fetch repeats to refresh all dashboard data.

​
Responsive Grid System

Widgets automatically adjust their size based on screen dimensions:
  • Mobile (xs): 12 columns (full width)
  • Tablet (sm): 8 columns for pump controls, 4 for standard widgets
  • Desktop (lg): 4 columns for pump controls, 2 for standard widgets

​
Widget Configuration

Each widget is configured through the Chart Configuration interface and stored in the database: 
{
  "type": "LiquidFillPorcentaje",
  "props": {
    "title": "Tank A Level",
    "color": "#38bdf8",
    "shape": "circle",
    "porcentage": false,
    "border": true,
    "unidad": "m³"
  },
  "data": {
    "value": {
      "id": 15,
      "name": "tank_level",
      "unit": "m³",
      "varsInflux": "tank_a_level"
    },
    "maxValue": 100
  }
}

{
  "type": "GaugeSpeed",
  "props": {
    "title": "Flow Rate",
    "color": "#5c5ac7"
  },
  "data": {
    "value": {
      "id": 22,
      "name": "flow_rate",
      "unit": "L/s",
      "varsInflux": "main_flow"
    },
    "maxValue": 50,
    "description": "Main line",
    "unidad": "L/s"
  }
}

{
  "type": "BooleanChart",
  "props": {
    "title": "Pump 1 Status",
    "textOn": "Running",
    "textOff": "Stopped",
    "colorOn": "#00ff00",
    "colorOff": "#444444"
  },
  "data": {
    "value": {
      "id": 8,
      "name": "pump_1_state",
      "varsInflux": "pump1_status"
    }
  }
}

​
Data Handling

​
Missing Data

When sensor data is unavailable, widgets display “Sin datos” (No data) and enter a safe visual state:
  • Liquid fill animations pause
  • Gauges show gray colors
  • LED indicators display offline status

​
Multi-Value Widgets

Some widgets support displaying multiple related measurements: 
// Liquid Fill with primary and secondary values
{
  value: { /* Primary measurement */ },
  secondary: { /* Secondary measurement */ },
  bottom1: { /* Additional info */ },
  bottom2: { /* Additional info */ }
}

​
Performance Optimization

The dashboard uses a single batched API request for all variables instead of individual requests per widget. This significantly reduces network overhead and server load.
Key optimizations:
  • Batch API calls: One request fetches all variable values
  • 30-second intervals: Balances freshness with system load
  • Conditional rendering: Only active chart types are loaded
  • Memoized components: Prevents unnecessary re-renders
Access the dashboard from the main navigation menu. It serves as your primary monitoring interface, providing at-a-glance status of all critical water treatment parameters.

Next Steps

Learn how to create and customize charts in the Charts documentation.

Build docs developers (and LLMs) love

Get started for freeTalk to us