Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dashboard blocks

Pro

Energy Consumption Dashboard Block for React Aria

Power usage effectiveness shown as its sum, facility kW over IT kW, beside a stacked bar of the draw, per-rack columns for the chosen hall, a supply mix bar and twelve monthly MWh bars.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

See what your data hall spends on everything that is not computing, with this energy panel for React with React Aria. A hairline frame with a plus mark on each corner opens with the power usage effectiveness as a figure and its arithmetic, such as 262 kW divided by 190 kW making 1.38, beside a stacked bar of the facility draw split into IT equipment, cooling, power conversion and lighting. A band of columns shows the IT load of each rack in the hall, and a last band pairs a supply-mix bar (renewable against grid) with twelve monthly MWh bars, the current month marked. A Native Select in the header switches between Joulebox's Halls A, B and C. It's built from Native Select and Guides. For facilities teams and sustainability reports.

FAQ

How do I fill it with my halls?

Edit HALLS: a racks array of IT kW per rack, the cooling, conversion and lighting draw in kW, and the renewable share. IT load is the sum of the racks, so the bar, the sum and the PUE always agree. SHAPE holds each month's draw against the average.

What is PUE and what is a good value?

Power usage effectiveness is total facility power divided by the power that reaches IT equipment. 1.00 would mean no overhead. The panel prints the division so you can check it; lower is better, and cooling is usually the largest overhead.

Where do the monthly bars come from?

They multiply the hall's facility kW by the hours in a month and by that month's factor in SHAPE, so cooling-heavy summer months rise. Replace monthlyOf with your billed or metered MWh.

What stays local, and how do I wire it for real?

Everything: nothing is metered, and the hall choice only changes what this page shows. Feed rack and facility readings from your power monitoring, and take the renewable share from your supplier's contract or certificates.

How does it look on a phone?

The bands stack: the PUE figure over its bar, the rack columns at full width, then the supply mix over the monthly bars.

All 200 dashboard blocks