Skip to content

Conversation

@gustedeveloper
Copy link
Collaborator

Implement Reservoir Capacity Gauge Chart

Adds a D3.js-based gauge chart component to visualize reservoir capacity.

Features:

  • Gauge chart with percentage-based arc visualization (background + filled arcs)
  • Information display (percentage + date)
  • Legend with volume indicators

TODO:

  • Replace hardcoded percentage with API data
  • Add unit tests for calculateFilledAngle function
  • Replace mockData with real API calls

Close #55

return (
<div className="flex flex-col gap-8">
<h2>Detalle del embalse: {embalse}</h2>
<ReservoirGauge name={embalse} {...reservoirData} />
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Usar esto es un poco peligroso

<ReservoirGauge name={embalse} {...reservoirData} />

El problema de usar el spread operator aquí es que si le pasamos más propiedades se las come, y si por ejemplo quisieramos optimizar para que sólo se redibujara si cambia alguna propiedad, esas propiedades de más se colarían.

¿Que interfaz tiene mock data?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Frontend][Detail of the reservoir] Capacity chart

3 participants