Chart Hooks

Hooks for chart components and data visualization.

Check chart data

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

ChartContainer

When to use `useChartDataCheck`

Use useChartDataCheck to drive a chart's empty state after its data has been shaped for the chart component. It returns true when the supplied chart data contains no renderable values.

Pass either dataset for direct bar-style datasets or data for a Chart.js-shaped object containing datasets (or dataset). Use the returned boolean as the empty state for ChartContainer or to choose an explicit empty placeholder.

`useChartDataCheck` data-shape caveat

The data option expects Chart.js-shaped data such as { labels, datasets }. Raw hook output such as { labels, series } can be non-empty while still being unrecognisable to the checker. Convert that output with buildBarChartData before calling the hook. Supply at least one of dataset or data; omitting both is treated as empty.

`useChartDataCheck` example

import {
  BarChart,
  buildBarChartData,
  ChartContainer,
  useChartDataCheck,
} from '@tetherto/mdk-react-devkit'

function RevenueBarChart({ hookOutput }) {
  const chartData = buildBarChartData(hookOutput)
  const isEmpty = useChartDataCheck({ data: chartData })

  return (
    <ChartContainer title="Revenue" empty={isEmpty}>
      <BarChart data={chartData} />
    </ChartContainer>
  )
}

@tetherto/mdk-react-devkit

`useChartDataCheck`

Hook to check if chart data is empty or unavailable

({ dataset, data }: UseChartDataCheckParams) => boolean

`useEbitda`

Transforms an EbitdaResponse and date-range options into query params and a chart-ready EBITDA view-model.

({ ebitda, isLoading, fetchErrors, ...dateRangeOptions }?: UseEbitdaOptions) => { metrics: EbitdaDisplayMetrics | null; ebitdaChartInput: ToBarChartDataInput | null; btcProducedChartInput: ToBarChartDataInput | null; hasBtcProducedAllZeros:… /* see source */

`useEnergyBalanceViewModel`

Computes the full EnergyBalance view model from raw API data, managing tab selection and display-mode state.

({ data, isLoading, fetchErrors, dateRange, availablePowerMW, }: UseEnergyBalanceOptions) => { queryParams: EnergyBalanceQueryParams | null; viewModel: { activeTab: EnergyBalanceTab; revenueDisplayMode: DisplayMode; costDisplayMode: Display… /* see source */

Chart Hooks

Package

Hooks