Compose reporting layouts

The reporting composites — Cost, Ebitda, EnergyBalance, HashBalance, and Hashrate — render fixed, opinionated layouts. When you need a different arrangement (a custom grid, a subset of charts, your own tabs), compose the page yourself from the same building blocks those composites are made of.

Every building block receives pre-shaped data as props and does no fetching — wire your own data layer (RTK Query, TanStack, fixtures).

When to use a building block vs the composite

• Reach for the composite (for example <Cost />) for the standard reporting page — fastest path, least wiring.
• Reach for the building blocks when you need a custom layout, want only some panels, or are embedding a single chart in your own surface.

Guides by composite

• Compose Cost layouts
• Compose EBITDA layouts
• Compose Energy balance layouts
• Compose Hash balance layouts
• Compose Hashrate layouts

Shared building blocks

These power the week selector inside TimeframeControls, shared across the financial reporting surfaces.

TimeframeWeekFlatContent

Flat list of selectable week items for the TimeframeControls week selector. Shared building block of the reporting timeframe controls.

import { TimeframeWeekFlatContent } from '@tetherto/mdk-react-devkit/foundation'

Renders inside the week selector of TimeframeControls.

TimeframeWeekTreeContent

Hierarchical year to month to week tree for the TimeframeControls week selector. Shared building block of the reporting timeframe controls.

import { TimeframeWeekTreeContent } from '@tetherto/mdk-react-devkit/foundation'

Renders inside the week selector of TimeframeControls.