Beautiful Charts
Get Pro

Uptime scoreFree

Is reliability in the healthy band?

npx shadcn@latest add https://beautifulcharts.dev/r/uptime-score.json

Code

"use client";

import { UptimeScoreBlock } from "@/components/beautiful-charts/blocks/instrument/uptime-score";

// The stats and copy recompute from your rows. Leave data out to see the sample.
export function Dashboard() {
  return <UptimeScoreBlock />;
}

Props

  • data

    SankeyData

    Your rows. Missing values are null and stay gaps; with no rows every stat shows a dash. Leave it out to see the sample.

  • stats

    ChartStat[] | false

    Replace the computed stats with your own, or hide them with false.

  • footer

    ReactNode | false

    Replace the footer line, or hide it with false.

Every gauge prop works too, so you can restyle it without touching the source.

Accessibility, keyboard and motion

Pointer
Not interactive.
Keyboard
Not focusable: there's nothing to move between.
Screen readers
A meter (role="meter") with its range, value and band read as text, for example "99.20%, healthy".
Motion
The value rolls in and the marker settles on it. With reduced motion it appears settled at once.

Related