Skip to main content

Documentation Index

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

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

​
Overview

The Mas Agua Dashboard is the central hub for real-time water management monitoring. It displays live data from InfluxDB through multiple chart types, automatically refreshing every 30 seconds to provide up-to-date information about your water infrastructure. Dashboard showing multiple charts and gauges

​
Key Features

  • Real-time Data Updates: Automatic refresh every 30 seconds from InfluxDB
  • Multiple Chart Types: Support for liquid fill, gauge, boolean status, pie, bar, and line charts
  • Responsive Grid Layout: Adaptive layout that adjusts to screen size
  • Pump Control Monitoring: Specialized widgets for pump status and control
  • Flexible Configuration: Charts are dynamically loaded from backend configuration

​
Dashboard Architecture

The dashboard uses a component-based architecture that fetches all chart configurations from the backend and renders them dynamically: 
const chartComponents = {
    LiquidFillPorcentaje,
    CirclePorcentaje,
    BarDataSet,
    PieChart: DoughnutChart,
    PumpControl,
    GaugeSpeed,
    BooleanChart,
    MultipleBooleanChart
}

​
Data Flow

  1. Initial Load: Dashboard fetches chart configurations from /indicatorCharts endpoint
  2. Variable Extraction: All InfluxDB variables are extracted from chart configs
  3. Batch Query: Single API call to /multipleDataInflux fetches all data at once
  4. Automatic Refresh: 30-second interval updates all values simultaneously

​
Chart Components

​
Liquid Fill Chart

Displays percentage or volume levels with animated liquid fill effect. Liquid fill gauge showing water level Supported Shapes:
  • Circle
  • Rectangle
  • Rounded Rectangle
  • Triangle
  • Diamond
  • Arrow
  • Pin
Configuration Options: 
{
  value: 75.5,           // Current value
  maxValue: 100,         // Maximum value
  color: '#38bdf8',      // Primary color
  shape: 'circle',       // Shape type
  porcentage: true,      // Display as percentage
  border: true,          // Show border outline
  unidad: 'm³'          // Unit of measurement
}

​
Gauge Speed

Speedometer-style gauge for displaying metrics with min/max ranges. Gauge showing pressure measurement Features:
  • 210° arc display (from bottom-left to bottom-right)
  • Gradient color fills
  • Customizable maximum value
  • Unit labels and descriptions
Example Usage: 
<GaugeSpeed
  value={45.2}
  maxValue={100}
  color="#5c5ac7"
  unidad="PSI"
  description="Presión de red"
  description2="Sector Norte"
/>

​
Boolean Chart

LED-style indicator for on/off status visualization. Boolean indicator showing pump status Configuration: 
{
  value: true,           // Boolean state
  textOn: 'Encendido',   // Text when ON
  textOff: 'Apagado',    // Text when OFF
  colorOn: '#00ff00',    // Color when ON
  colorOff: '#444'       // Color when OFF
}
Visual Effects:
  • Radial gradient for depth effect
  • Glow animation when active
  • Automatic color transitions

​
Multiple Boolean Chart

Grid display of multiple boolean indicators in a single widget. Use Cases:
  • Tank status monitoring
  • Multiple pump states
  • System health indicators

​
Pump Control Widget

Specialized component for monitoring pumps and their operational states. Data Structure: 
{
  initialPumps: [
    {
      id: 1,
      name: 'Bomba Principal',
      varId: 'pump_01',
      value: 'pump_status',
      unit: 'Hz',
      type: 'pump'
    }
  ],
  initialStates: [
    {
      id: 2,
      name: 'Estado Motor',
      varId: 'motor_status',
      value: 'motor_state',
      type: 'status'
    }
  ]
}

​
Grid Layout

The dashboard uses a responsive Material-UI Grid system: 
<Grid container spacing={1}>
  <Grid
    item
    xs={12}           // Full width on mobile
    sm={8}            // 2/3 width on tablet (for pumps)
    lg={4}            // 1/3 width on desktop (for pumps)
  >
    {/* Chart component */}
  </Grid>
</Grid>

​
Responsive Behavior

  • Mobile (xs): All charts display full width
  • Tablet (sm): Pump controls at 8/12, standard charts at 4/12
  • Desktop (lg): Pump controls at 4/12, standard charts at 2/12

​
Data Optimization

The dashboard implements efficient data fetching to minimize API calls:

​
Single Batch Request

function extractInfluxVars(chartsData) {
  const vars = []
  
  chartsData.forEach((chart) => {
    if (chart.component === 'PumpControl') {
      // Extract pump variables
      chart.data.initialPumps.forEach((pump) => {
        vars.push(normalizePumpVar(pump))
      })
    }
    
    // Extract other chart variables
    Object.values(chart.data).forEach((value) => {
      if (value && value.varsInflux) {
        vars.push({ dataInflux: value })
      }
    })
  })
  
  return vars
}

​
Automatic Updates

// Initial fetch
const allVars = extractInfluxVars(formatConfig)
fetchMultipleData(allVars)

// 30-second refresh
intervalRef.current = setInterval(
  () => fetchMultipleData(allVars),
  30000
)

​
Card Wrapper

All dashboard charts are wrapped in a consistent card component: 
<CardCustom className="flex flex-col rounded-xl h-[42dvh] 2xl:h-[35dvh] overflow-hidden border-[1.75px] border-gray-300">
  {/* Chart title */}
  <div className="h-[7dvh] 2xl:h-[5dvh] flex items-center justify-center text-center mt-1">
    <h1 className="text-xl leading-tight line-clamp-2">
      {chart?.props?.title}
    </h1>
  </div>
  
  {/* Chart content */}
  <div className="flex-1 flex items-center justify-center">
    <ChartComponentDbWrapper
      chartId={chart.id}
      ChartComponent={ChartComponentDb}
      initialProps={chart.props}
      initialData={chart.data}
      inflValues={inflValues}
    />
  </div>
</CardCustom>

​
Configuration Example

Backend chart configuration format: 
{
  "id": 1,
  "type": "LiquidFillPorcentaje",
  "name": "Nivel Tanque Principal",
  "ChartConfig": [
    {
      "key": "title",
      "value": "Tanque Elevado",
      "type": "string"
    },
    {
      "key": "shape",
      "value": "circle",
      "type": "string"
    },
    {
      "key": "porcentage",
      "value": "1",
      "type": "boolean"
    }
  ],
  "ChartData": [
    {
      "key": "value",
      "label": "Nivel",
      "value": null,
      "InfluxVars": {
        "id": 15,
        "name": "nivel_tanque_01",
        "unit": "%",
        "varsInflux": {
          "tank_level": {
            "calc_field": "nivel",
            "measure": "tanques"
          }
        }
      }
    }
  ]
}

​
Performance Tips

Limit the number of charts per dashboard to 12-15 for optimal performance. Use multiple dashboards for different monitoring areas.
The 30-second refresh interval is optimized for InfluxDB performance. Decreasing this value may impact database performance.

​
Common Use Cases

​
Water Tank Monitoring

Combine liquid fill charts with boolean indicators:
  • Liquid fill: Tank level percentage
  • Boolean: High/low level alarms
  • Gauge: Inlet pressure

​
Pump Station Dashboard

Use pump control widgets with supporting metrics:
  • Pump control: Primary and backup pumps
  • Gauge: Flow rate and pressure
  • Boolean: Motor protection status

​
Network Pressure Monitoring

Display pressure across multiple zones:
  • Gauge charts: Pressure at different points
  • Line charts: Pressure trends (via dashboard charts)
  • Boolean: Pressure alarm states

​
Next Steps

Real-time Monitoring

Learn about the real-time data update system

Charts & Visualization

Explore all available chart types

Build docs developers (and LLMs) love

Get started for freeTalk to us