Province Total Reservoir Capacity Gauge

[manudous]

Feature: Province Total Reservoir Capacity Gauge

Context

Currently, the province page (/embalse-provincia/[provincia]) only displays a list of links to individual reservoirs. We want to add a visual gauge that shows the aggregated total capacity of all reservoirs in that province and the overall fill percentage, using the same gauge components used in the reservoir detail page.

---

Goals

• Reuse the existing gauge components (GaugeChart and GaugeLegend).
• Aggregate data across multiple reservoirs, applying the SAIH > AEMET prioritization per reservoir.
• Display:
  • Total capacity (hm³)
  • Aggregated current volume (hm³)
  • Overall fill percentage
  • Most recent measurement date among all reservoirs
• Keep visual consistency with the rest of the application and ensure responsive design.

---

Tasks

Update repository to fetch full data

File: embalse-provincia.repository.ts

Update the MongoDB projection to include the required fields:

• capacidad
• aguaActualSAIH
• aguaActualAemet
• fechaMedidaAguaActualSAIH
• fechaMedidaAguaActualAemet

Currently it only fetches _id, nombre, and slug.

---

Update API model

File: embalse-provincia.api-model.ts

Extend the EmbalseApi interface to include the new fields:

• capacidad
• aguaActualSAIH
• aguaActualAemet
• fechaMedidaAguaActualSAIH
• fechaMedidaAguaActualAemet

---

Create aggregation function in the mapper

File: embalse-provincia.mapper.ts

Implement aggregateProvinciaCapacityData() that:

• Iterates over all reservoirs in the province.
• For each reservoir, applies prioritization:
  • aguaActualSAIH ?? aguaActualAemet ?? 0
  • (same logic as in embalse.mapper.ts around lines 31–35)
• Sums:
  • totalCapacity = sum of all capacidad
  • currentVolume = sum of prioritized current water values
• Determines the most recent measurement date among all reservoirs.
• Returns:
  • { totalCapacity, currentVolume, measurementDate }

⚠️ Important: The prioritization SAIH > AEMET must be applied per reservoir before summing, since SAIH updates more frequently (basin scrapers).

Note: This is already being done in embalse.mapper.ts, see if it works for us. If so, move it to common.

---

Create province gauge component (new)

File: provincia-capacity-gauge.component.tsx (new)

Create a component that:

• Receives nombreProvincia and capacityData
• Reuses:
  • GaugeChart
  • GaugeLegend
    from @/pods/embalse/components/reservoir-gauge
• Displays a title like: "Capacidad Total de [NombreProvincia]"
• Computes percentage:
  • percentage = currentVolume / totalCapacity
• Uses semantic HTML and accessibility attributes (e.g., aria-label).

⚠️ Important:: As GaugeChart and GaugeLegend will be used in different components, move them to common.

---

Integrate in the page

File: page.tsx

• Call aggregateProvinciaCapacityData() with the reservoirs fetched for the province.
• Pass aggregated data to the pod.

---

Update the pod to render the gauge

File: embalse-provincia.pod.tsx

• Receive capacityData as a prop.
• Render <ProvinciaCapacityGauge /> before <EmbalseProvincia />.
• Apply responsive, consistent styles (matching the app layout).