Data export

Components for exporting Bitcoin mining operations statistics and data.

Prerequisites

Before using these components, complete the @mdk/foundation installation and add the dependency.

`StatsExport`

Dropdown button for exporting statistics to CSV or JSON formats.

Import

import { StatsExport } from '@mdk/foundation'

Props

Prop	Type	Default	Description
`onCsvExport`	`() => Promise<void>`	required	CSV export handler
`onJsonExport`	`() => Promise<void>`	required	JSON export handler
`disabled`	`boolean`	`false`	Disable the export button
`showLabel`	`boolean`	`false`	Show text label (hides when `true`)

Basic usage

<StatsExport
  onCsvExport={async () => {
    const data = await fetchStats()
    downloadCsv(data, 'mining-stats.csv')
  }}
  onJsonExport={async () => {
    const data = await fetchStats()
    downloadJson(data, 'mining-stats.json')
  }}
/>

Disabled state

<StatsExport
  disabled={!hasData}
  onCsvExport={handleCsvExport}
  onJsonExport={handleJsonExport}
/>

With loading state

The component automatically shows a loading spinner during export operations:

<StatsExport
  onCsvExport={async () => {
    // Spinner shows automatically during this async operation
    await generateAndDownloadCsv()
  }}
  onJsonExport={async () => {
    await generateAndDownloadJson()
  }}
/>

Export formats

The dropdown provides two export options:

CSV: Comma-separated values for spreadsheet applications
JSON: JavaScript Object Notation for programmatic use

Styling

.stats-export__button: Trigger button
.stats-export__button--disabled: Disabled state
.stats-export__label: Button label text
.stats-export__divider: Divider between icon and arrow
.stats-export__dropdown: Dropdown menu container
.stats-export__item: Dropdown menu item
.stats-export__item--bordered: Item with bottom border

Data export

On this page