Approval Rate Chart

Governance

New

Visual trend of first-pass approval rate over time. Surfaces whether reviewers are getting faster and more accurate, or whether output quality is regressing.

Interactive Demo

Approval rate climbing from 68% to 83% over the month, with a 75% target line.

Approval Rate Trend

First-pass approval rate over time. Higher is better.

Last 30 days

+14.6 pts vs start

Current

83.0%

Average

75.7%

Range

68–83%

Declining Trend

Quality regressions show up immediately in the trend badge.

Approval Rate Trend

First-pass approval rate over time. Higher is better.

Last 4 weeks

-8.6 pts vs start

Current

79.6%

Average

84.6%

Range

80–88%

Without Target

No target line when SLA isn't defined.

Approval Rate Trend

First-pass approval rate over time. Higher is better.

This week

-2.0 pts vs start

Current

80.0%

Average

82.6%

Range

79–87%

Empty State

When there's no data for the period.

Approval Rate Trend

First-pass approval rate over time. Higher is better.

No data

No data available for this period.

Props

ApprovalRateChart component API reference

Prop	Type	Default	Description
`data*`	`ApprovalRatePoint[]`	—	Time-series points, oldest to newest
`target`	`number`	—	SLA / goal line drawn across the chart (0-100)
`comparisonMode`	`"first" \| "previous"`	`"first"`	Whether the trend badge compares current vs first point or vs previous point
`title`	`string`	`"Approval Rate Trend"`	Header title
`description`	`string`	—	Header subtitle
`periodLabel`	`string`	—	Context badge, e.g. "Last 30 days"
`className`	`string`	—	Additional CSS classes

ApprovalRatePoint Type

Prop	Type	Default	Description
`date*`	`string`	—	X-axis label, e.g. "2026-04-21" or "Mon"
`approvalRate*`	`number`	—	Approval rate (0-100)
`reviewed`	`number`	—	Optional: total items reviewed in this period (shown in tooltip)

Usage

Import and implementation example

import { ApprovalRateChart, type ApprovalRatePoint } from '@/blocks/governance/approval-rate-chart'

const data: ApprovalRatePoint[] = [
  { date: 'Apr 01', approvalRate: 68.4, reviewed: 142 },
  { date: 'Apr 08', approvalRate: 73.1, reviewed: 168 },
  { date: 'Apr 15', approvalRate: 78.6, reviewed: 184 },
  { date: 'Apr 22', approvalRate: 81.0, reviewed: 203 },
  { date: 'Apr 29', approvalRate: 83.4, reviewed: 218 },
]

export default function QualityTrendPage() {
  return (
    <ApprovalRateChart
      data={data}
      target={80}
      periodLabel="Last 30 days"
    />
  )
}

Built With

2 components

This block uses the following UI components from the design system:

Badge Card

Features

Built-in functionality

Time-series line chart: Smooth area + line plot of approval rate over time
Target line: Optional SLA / goal line annotated on the chart
Auto-scaled Y axis: Y axis adapts to data range (rounded to nearest 10)
Trend badge: Pill showing change vs first or previous point with arrow
Hover tooltip: Hover any point to see exact rate, date, and item count
Stat strip: Current, average, and min/max range above the chart
Empty state: Friendly message when no data is available
SVG, no chart library: Pure SVG; no Recharts/Victory dependency

Accessibility

Screen reader and keyboard support

ARIA Attributes

SVG has role="img" and an aria-label summarizing current value and trendTrend direction conveyed via icon, color, and signed numeric deltaStat strip provides numeric backup for the visual trend

Keyboard Navigation

Key	Action
`Tab`	Focus enters the card; hover-only tooltip is informational

Notes

All numeric values are rendered as text alongside the chart for non-visual readers
Target value labelled directly on the chart in addition to the dashed line
Color choices preserve sufficient contrast in both light and dark modes

Related Components

Quality Dashboard Approval Gate Review Queue Audit Log