RevenueChart

Stacked bar chart displaying monthly revenue per site. Automatically switches between BTC and Sats display based on value scale. Receives pre-fetched data as props — no internal data fetching.

import { RevenueChart } from "@tetherto/mdk-react-devkit";

Usage

Stacked bar chart showing monthly Bitcoin revenue across multiple mining sites. Values are automatically displayed in BTC when averages exceed 1 BTC, or converted to Sats otherwise.

When to use

Use this component inside a financial reporting view where you want to visualise per-site revenue trends over time as a stacked column chart.

Data shape

// Each array element is one monthly time bucket:
{
  timeKey: 'Jan 2024',    // X-axis label
  period: 'monthly',
  timestamp: 1704067200000,
  'site-a': 0.0042,       // Revenue in BTC for site-a
  'site-b': 0.0031,       // Revenue in BTC for site-b
}

Currency auto-detection

The component compares the per-label daily average against 1 BTC.

• Any average > 1 BTC → display in BTC (₿)
• All averages ≤ 1 BTC → multiply values × 1 000 000 and display in Sats

This mirrors the behaviour of the source data from the Tetherto mining API.

Example

import { RevenueChart } from '@tetherto/mdk-react-devkit/domain'const DEMO_SITE_LIST = [  { id: 'site-a', name: 'Site A' },  { id: 'site-b', name: 'Site B' },  { id: 'site-c', name: 'Site C' },]const DEMO_DATA = [  { timeKey: 'Jan 2024', period: 'monthly', timestamp: 1704067200000, 'site-a': 0.0042, 'site-b': 0.0031, 'site-c': 0.0018 },  { timeKey: 'Feb 2024', period: 'monthly', timestamp: 1706745600000, 'site-a': 0.0051, 'site-b': 0.0028, 'site-c': 0.0022 },  { timeKey: 'Mar 2024', period: 'monthly', timestamp: 1709251200000, 'site-a': 0.0045, 'site-b': 0.0035, 'site-c': 0.0019 },]export const RevenueChartExample = () => (  <div className="mdk-example-row">    <RevenueChart data={DEMO_DATA} siteList={DEMO_SITE_LIST} />  </div>)