mercury-graphs

An out-of-the-box React dashboard library with custom graph selectors and a positioning engine for automatic layout.

Install

npm install mercury-graphs

Peer dependencies

npm install react react-dom echarts echarts-for-react

Quick start

Selector

Route to the right graph component by type:

import { Selector } from "mercury-graphs";

<Selector type="lineChart" options={{
  xAxis: { type: "category", data: ["Mon", "Tue", "Wed"] },
  yAxis: { type: "value" },
  series: [{ data: [150, 230, 224], type: "line" }],
}} />

LineChart (direct)

Use a graph component directly for more control:

import { LineChart } from "mercury-graphs";

<LineChart options={chartOptions} height={500} />

Dashboard

Pass an array of graphs with sizes and let the engine handle layout:

import { Dashboard } from "mercury-graphs";

<Dashboard graphs={[
  { type: "lineChart", options: chartOptions, size: "large" },
  { type: "lineChart", options: otherOptions, size: "small" },
]} />

API

Components

| Component | Description | |-----------|-------------| | Dashboard | Renders a grid of graphs using the positioning engine | | Selector | Routes to the correct graph component based on type | | LineChart | Renders an ECharts line chart with error boundary | | ChartErrorBoundary | Catches render errors in chart components |

Types

| Type | Description | |------|-------------| | DashboardProps | Props for the Dashboard component | | GraphEntry | A graph definition with type, options, and size | | SelectorProps | Discriminated union of supported graph types | | LineChartProps | Props for the LineChart component | | LineChartOptions | ECharts configuration object | | GridPosition | Column/row position and span in the grid | | PositionedGraph | A GraphEntry paired with its GridPosition |

Development

# Build the library
npm run build

# Watch mode
npm run dev

# Run the playground
npm run playground

# Lint
npm run lint

License

MIT