PredictionAccuracy

Historical AI prediction performance

Overview

PredictionAccuracy displays a chart comparing AI predictions vs actual outcomes over time. Perfect for tracking AI model accuracy, building trust in AI decisions, and monitoring prediction quality.

Features

Predicted vs actual line comparison
Overall accuracy score (MAPE-based)
Optional deviation trend bars
Summary statistics display
Color-coded accuracy levels

Examples

Basic Chart

Default view with accuracy score

Overall Accuracy

98%

(6 predictions)

Avg. Predicted

86.3

Avg. Actual

85.8

Avg. Deviation

+0.5

High Accuracy Example

Model performing well

Overall Accuracy

98%

(6 predictions)

Avg. Predicted

86.3

Avg. Actual

85.8

Avg. Deviation

+0.5

Moderate Accuracy Example

Model with room for improvement

Overall Accuracy

91%

(6 predictions)

Avg. Predicted

79.7

Avg. Actual

78.0

Avg. Deviation

+1.7

Low Accuracy Example

Model needing retraining

Overall Accuracy

71%

(6 predictions)

Avg. Predicted

77.5

Avg. Actual

75.0

Avg. Deviation

+2.5

With Deviation Trend

Showing deviation trend

Overall Accuracy

91%

(6 predictions)

Avg. Predicted

79.7

Avg. Actual

78.0

Avg. Deviation

+1.7

Extended Timeline

Full year of predictions

Overall Accuracy

98%

(12 predictions)

Avg. Predicted

84.8

Avg. Actual

84.9

Avg. Deviation

-0.2

With Reference Line

Average reference line

Overall Accuracy

98%

(6 predictions)

Avg. Predicted

86.3

Avg. Actual

85.8

Avg. Deviation

+0.5

With ChartCard

Wrapped in ChartCard

AI Model Performance

Prediction accuracy over the last 6 months

Overall Accuracy

98%

(6 predictions)

Avg. Predicted

86.3

Avg. Actual

85.8

Avg. Deviation

+0.5

Props Reference

Prop	Type	Default	Description
`predictions`	`PredictionDataPoint[]`	`required`	Array of prediction data points
`metricLabel`	`string`	`'Value'`	Label for the metric being predicted
`showTrendLine`	`boolean`	`false`	Show deviation trend bars
`showAccuracyScore`	`boolean`	`true`	Show overall accuracy score
`showPerfectLine`	`boolean`	`false`	Show average reference line
`height`	`number`	`300`	Chart height in pixels
`className`	`string`	`-`	Additional CSS classes

PredictionDataPoint Type

date: string - Date label

predicted: number - Predicted value

actual: number - Actual value

Usage

import { PredictionAccuracy, ChartCard } from '@/ui/components/charts';

const predictions = [
  { date: 'Jan', predicted: 82, actual: 80 },
  { date: 'Feb', predicted: 85, actual: 87 },
  { date: 'Mar', predicted: 78, actual: 76 },
  { date: 'Apr', predicted: 91, actual: 89 },
];

// Basic accuracy chart
<PredictionAccuracy predictions={predictions} />

// With accuracy score
<PredictionAccuracy
  predictions={predictions}
  showAccuracyScore
  metricLabel="Completion Rate"
/>

// With trend line showing deviation
<PredictionAccuracy
  predictions={predictions}
  showTrendLine
  showAccuracyScore
/>

// With reference line
<PredictionAccuracy
  predictions={predictions}
  showPerfectLine
  height={350}
/>

// With ChartCard
<ChartCard title="AI Model Performance">
  <PredictionAccuracy
    predictions={predictions}
    showAccuracyScore
    showTrendLine
    metricLabel="Response Rate"
  />
</ChartCard>

Prop

Type

Default

Description

predictions

PredictionDataPoint[]

required

Array of prediction data points

metricLabel

string

'Value'

Label for the metric being predicted

showTrendLine

boolean

false

Show deviation trend bars

showAccuracyScore

boolean

true

Show overall accuracy score

showPerfectLine

boolean

false

Show average reference line

height

number

300

Chart height in pixels

className

string

-

Additional CSS classes

import { PredictionAccuracy, ChartCard } from '@/ui/components/charts'; const predictions = [ { date: 'Jan', predicted: 82, actual: 80 }, { date: 'Feb', predicted: 85, actual: 87 }, { date: 'Mar', predicted: 78, actual: 76 }, { date: 'Apr', predicted: 91, actual: 89 }, ]; // Basic accuracy chart <PredictionAccuracy predictions={predictions} /> // With accuracy score <PredictionAccuracy predictions={predictions} showAccuracyScore metricLabel="Completion Rate" /> // With trend line showing deviation <PredictionAccuracy predictions={predictions} showTrendLine showAccuracyScore /> // With reference line <PredictionAccuracy predictions={predictions} showPerfectLine height={350} /> // With ChartCard <ChartCard title="AI Model Performance"> <PredictionAccuracy predictions={predictions} showAccuracyScore showTrendLine metricLabel="Response Rate" /> </ChartCard>