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.

The MultipleBooleanChart component displays multiple boolean status indicators (LEDs) in a responsive grid layout. Each LED shows an on/off state with customizable labels and colors.

​
Component location

Source: /src/modules/Charts/components/MultipleBooleanChart.jsx:1

​
Props

​
title
string
Title displayed above the LED grid
​
columns
number
default:2
Number of columns in the grid layout
​
items
array
required
Array of LED configuration objects. Each item must have:
  • key: Unique identifier
  • title: LED label text
  • value: Boolean or “Sin datos”
  • textOn: Text when active (default: “Encendido”)
  • textOff: Text when inactive (default: “Apagado”)
  • colorOn: Color when active (default: “#00ff00”)
  • colorOff: Color when inactive (default: “#444444”)

​
LED indicator structure

Each LED indicator consists of:
  1. Label: Item title displayed above the LED
  2. LED circle: 20px circular indicator with border
  3. Status text: Shows textOn/textOff/Sin datos
Visual states:
  • Active (ON): colorOn fill + matching border + textOn text
  • Inactive (OFF): colorOff fill + gray border + textOff text
  • No data: Gray fill + gray border + “Sin datos” text

​
Usage

import MultipleBooleanChart from './MultipleBooleanChart'

// System status monitoring
<MultipleBooleanChart
  title="Sistema de bombeo"
  columns={2}
  items={[
    {
      key: 'pump1',
      title: 'Bomba 1',
      value: true,
      textOn: 'Activa',
      textOff: 'Inactiva',
      colorOn: '#22c55e',
      colorOff: '#dc2626'
    },
    {
      key: 'pump2',
      title: 'Bomba 2',
      value: false,
      textOn: 'Activa',
      textOff: 'Inactiva',
      colorOn: '#22c55e',
      colorOff: '#dc2626'
    },
    {
      key: 'valve1',
      title: 'Válvula Principal',
      value: true,
      textOn: 'Abierta',
      textOff: 'Cerrada',
      colorOn: '#3b82f6',
      colorOff: '#64748b'
    },
    {
      key: 'alarm',
      title: 'Alarma',
      value: 'Sin datos',
      textOn: 'Activa',
      textOff: 'Normal',
      colorOn: '#ef4444',
      colorOff: '#10b981'
    }
  ]}
/>

​
Grid layout

The component uses a responsive grid: 
<div className="grid gap-2" style={{
  gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`
}}>
  {/* LED indicators */}
</div>
Responsive behavior:
  • Columns adapt to container width
  • Maintains consistent spacing with gap-2
  • Each LED takes equal width (minmax(0, 1fr))

​
Integration with real-time data

When used in dashboards (e.g., Home view), LEDs receive real-time values from InfluxDB: 
// Configuration stored in database
const ledsConfig = {
  led1: {
    key: 'led1',
    title: 'Estado Motor',
    textOn: 'Encendido',
    textOff: 'Apagado',
    colorOn: '#00ff00',
    colorOff: '#444444'
  }
}

// Influx variable linked to each LED
const items = Object.values(ledsConfig).map((led) => {
  const influx = chartData.find(d => d.key === led.key)
  return {
    ...led,
    value: inflValues?.[influx?.InfluxVars?.id] ?? 'Sin datos',
    influxVar: influx?.InfluxVars ?? null
  }
})

​
Styling

Each LED card has:
  • White background with rounded corners
  • Border: border-slate-200
  • Shadow: shadow-sm
  • Padding: px-2 py-2
LED circle: 
width: 20px
height: 20px
border-radius: 50%
border: 2px solid (matching color or gray)

​
Configuration in charts

Multiple Boolean Charts are configured via /config/graphic/multipleBoolean:
  1. Set chart title
  2. Define number of columns
  3. For each LED:
    • Enter label text
    • Select InfluxDB variable
    • Set ON/OFF text labels
    • Choose ON/OFF colors
Configuration is stored with keys like:
  • led1.title
  • led1.textOn
  • led1.colorOn
  • etc.

​
Use cases

  • Equipment status monitoring (multiple pumps, valves, motors)
  • Alarm panel displays
  • System health dashboards
  • Process status indicators
  • Multi-zone monitoring

​
Comparison with BooleanChart

FeatureBooleanChartMultipleBooleanChart
DisplaySingle large LEDGrid of compact LEDs
Size~200px circle20px circles
LayoutStandaloneGrid with N columns
Glow effectYesNo
Text positionBelow LEDRight of LED

Build docs developers (and LLMs) love

Get started for freeTalk to us