Quick Start

Create your first Mas Agua dashboard and start monitoring water systems in minutes

This guide walks you through setting up your first dashboard in Mas Agua, from logging in to visualizing real-time data.

Before You Begin

Ensure you have:

• Mas Agua installed and running (see Installation)
• Backend API server configured and accessible
• InfluxDB instance with data available
• User credentials for login

Step 1: Login and Access

1. Navigate to the application

   Open Mas Agua in your browser or launch the desktop application.

2. Log in with your credentials

   Enter your username and password on the login screen.

   First-time users should contact their system administrator for credentials and permissions.

3. Access the home dashboard

   After successful login, you’ll be directed to the home dashboard at /home.

Step 2: Understanding the Home Dashboard

The home dashboard displays configured chart widgets that automatically update every 30 seconds with real-time data from InfluxDB.

Available Chart Types

Mas Agua supports several chart components:

Chart Type	Purpose	Example Use Case
LiquidFillPorcentaje	Tank level visualization	Water reservoir levels
GaugeSpeed	Gauge display	Pressure or flow rate
CirclePorcentaje	Circular percentage	Pump efficiency
BooleanChart	On/Off indicator	Valve status
MultipleBooleanChart	Multiple LED indicators	System status panel
PieChart	Distribution chart	Water usage by zone
BarDataSet	Bar chart	Daily consumption
PumpControl	Pump control panel	Pump station monitoring

How Data Updates Work

The home dashboard fetches data automatically:

// Data fetches every 30 seconds
const intervalRef = useRef(null)
intervalRef.current = setInterval(() => 
  fetchMultipleData(allVars), 
  30000 // 30 seconds
)

All chart widgets on the home screen update simultaneously using a single API call to optimize performance.

Step 3: Creating Your First Chart

1. Navigate to chart configuration

   From the navigation menu, go to Config → Graphic

   This opens the chart type selector at /config/graphic

2. Select a chart type

   Choose from available chart types:

   • Boolean Chart - For on/off indicators
   • Pie Chart - For distribution data
   • Gauge/Liquid Fill - For percentage/level data
   • Multiple Boolean - For multi-indicator panels
   • Board Chart - For custom board layouts
3. Configure chart properties

   Each chart type has specific configuration options:

   Common properties:

   • Title - Display name for the chart
   • InfluxDB Variable - Data source variable
   • Update Interval - Data refresh rate
   • Visual Settings - Colors, sizes, labels

   Example: Boolean Chart

   • Text for ON state
   • Text for OFF state
   • Colors for each state
   • Associated InfluxDB variable
4. Link InfluxDB variables

   Connect your chart to data sources:

   1. Select the InfluxDB variable from your configured variables
   2. Choose aggregation type: last, mean, sum, etc.
   3. Set calculation options if using formulas

   Ensure your InfluxDB variables are properly configured in Config → Vars before creating charts.

5. Save and view

   Click Save to create the chart. It will appear on your home dashboard on the next page load.

Step 4: Exploring the Dashboard View

Navigate to Dashboard (/chart) to view detailed time-series charts.

Dashboard Features

// Dashboard loads chart configurations
const fetchSeriesCharts = async () => {
  const url = `${backend[import.meta.env.VITE_APP_NAME]}/dashboardCharts`
  const { data } = await request(url, 'GET')
  setCharts(data)
}

The dashboard view provides:

• Historical data visualization
• Expandable chart accordions
• Time range selection
• Data export capabilities

Dashboard charts are different from home widgets. Home widgets show current values, while dashboard charts show historical trends.

Step 5: Setting Up Alarms

Monitor critical conditions with the alarm system.

1. Configure alarms

   Go to Config → Alarm to create alarm rules:

   • Define trigger conditions
   • Set threshold values
   • Configure notification recipients
2. View active alarms

   Navigate to Alert (/alert) to see all alarms:

   // Fetch alarm list
   const { data } = await request(`${url}/listAlerts`, 'GET')
   

   Alarms display:

   • Timestamp
   • Alarm message
   • Read/unread status
   • Severity level
3. Mark alarms as read

   Click on unread alarms to acknowledge them. Unread alarms appear highlighted.

Step 6: Creating System Diagrams

Visualize your water system with interactive diagrams.

1. Access diagram editor

   Navigate to Config → Diagram → New Diagram

2. Build your diagram

   Use the diagram editor tools:

   • Image Selector - Add pumps, valves, tanks from library
   • Drawing Tools - Create custom shapes and lines
   • Text Tool - Add labels and annotations
   • Field Tool - Link real-time data to diagram elements

   // Diagram supports multiple element types
   const [circles, setCircles] = useState([])     // Shapes
   const [images, setImages] = useState([])       // Images
   const [texts, setTexts] = useState([])         // Labels
   const [fields, setFields] = useState([])       // Data fields
   
3. Add real-time data overlays

   Link InfluxDB variables to diagram elements to show live values on the diagram.

4. Save and view

   Save your diagram and view it at /viewDiagram/:id for real-time monitoring.

Step 7: Working with Maps

Map your infrastructure geographically.

1. Create a new map

   Go to Map → Create (/map/create)

2. Add markers

   Place markers at infrastructure locations:

   const generateMarker = (name, lat, lng, idVar, data) => {
     return {
       name,
       latitude: parseFloat(lat),
       longitude: parseFloat(lng),
       popupInfo: {
         lat: parseFloat(lat),
         lng: parseFloat(lng),
         idVar: idVar,
         data: data || null,
       },
     }
   }
   
3. Link data to markers

   Associate InfluxDB variables with map markers to display real-time status and values.

4. View your map

   Navigate to Maps (/maps) to see all created maps with live data updates.

Common Workflows

Monitoring pump operations

1. Create a PumpControl chart on the home dashboard
2. Link pump status and runtime variables from InfluxDB
3. Configure alarm thresholds for pump failures
4. View pump table at /list/pumps for detailed status

Tracking tank levels

1. Create a LiquidFillPorcentaje chart
2. Connect to tank level sensor variable
3. Set high/low level alarms
4. Add tank location to map with linked data

Creating a system overview

1. Build a diagram showing your complete system layout
2. Add real-time data fields for key metrics
3. Create a MultipleBooleanChart for system status
4. Set up critical alarms for system failures

Analyzing historical trends

1. Navigate to Dashboard view (/chart)
2. Select time range for analysis
3. Compare multiple variables on same chart
4. Export data for external analysis

Tips for Success

Start Simple

Begin with a few basic charts and gradually add complexity as you become familiar with the platform.

Organize Variables

Properly configure and name your InfluxDB variables in Config → Vars before creating charts.

Use Meaningful Names

Give charts, diagrams, and maps descriptive names to make navigation easier.

Test Alarms

Verify alarm configurations trigger correctly before relying on them for critical monitoring.

Next Steps

Now that you have your first dashboard running:

• Explore advanced chart configurations
• Set up user permissions in Config → Security
• Create custom menu structures in Config → Menu
• Configure system notifications
• Build comprehensive system diagrams

For detailed configuration options and advanced features, refer to the specific component documentation sections.