Statistic - Prisma — ContextQMD

import { Statistic } from "@prisma/eclipse";

Usage

Basic Statistic

tsx

import { Statistic } from "@prisma/eclipse";

export function BasicStat() {
  return <Statistic title="Total Users" value={1234} />;
}

Live Example:

With Measurement Unit

tsx

import { Statistic } from "@prisma/eclipse";

export function StatWithMeasure() {
  return <Statistic title="Response Time" value={42} measure="ms" />;
}

Live Example:

With Badge

tsx

import { Statistic } from "@prisma/eclipse";

export function StatWithBadge() {
  return (
    <Statistic
      title="API Status"
      value="99.9"
      measure="%"
      badge="Live"
      badgeColor="success"
    />
  );
}

Live Example:

Multiple Statistics Grid

tsx

import { Statistic } from "@prisma/eclipse";

export function StatsGrid() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
      <Statistic title="Total Queries" value="1.2M" badge="Today" badgeColor="ppg" />
      <Statistic title="Avg Response" value={45} measure="ms" badge="Improved" badgeColor="success" />
      <Statistic title="Active Users" value={847} badge="Online" badgeColor="success" />
    </div>
  );
}

Live Example:

Different Badge Colors

tsx

import { Statistic } from "@prisma/eclipse";

export function ColoredBadges() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
      <Statistic title="Cache Hits" value={95} measure="%" badge="Optimal" badgeColor="success" />
      <Statistic title="Error Rate" value={0.3} measure="%" badge="Warning" badgeColor="warning" />
      <Statistic title="Failed Requests" value={12} badge="Critical" badgeColor="error" />
      <Statistic title="Database Size" value={2.4} measure="GB" badge="Growing" badgeColor="neutral" />
    </div>
  );
}

Live Example:

Statistic Props

title - The label for the statistic (default: "Statistic")
value - The numeric or string value to display (default: 0)
measure - The unit of measurement (e.g., "ms", "%", "GB") (optional)
badge - Badge content to display next to the title (optional)
badgeColor - The color variant for the badge: "neutral", "ppg", "orm", "error", "success", "warning" (default: "ppg")

Features

✅ Large, bold typography for values
✅ Optional measurement units
✅ Integrated badge support with color variants
✅ Dashed border design for visual emphasis
✅ Responsive and flexible layout
✅ Eclipse design system tokens
✅ Supports both numeric and string values

Best Practices

Use concise titles that clearly describe what the statistic represents
Use badges to provide context like status, trends, or time periods
Keep values short and readable (use abbreviated formats like "1.2M" for large numbers)
Use measurement units consistently across related statistics
Group related statistics in a grid layout for easy comparison
Choose badge colors that match the semantic meaning:
- success - Positive metrics, goals achieved
- warning - Metrics requiring attention
- error - Critical issues or problems
- ppg - Prisma Pulse/Accelerate specific metrics
- orm - Prisma ORM specific metrics
- neutral - General information

Common Use Cases

Performance Metrics

tsx

<Statistic title="Response Time" value={42} measure="ms" badge="Fast" badgeColor="success" />
<Statistic title="Throughput" value="1.2K" measure="req/s" badge="Peak" badgeColor="ppg" />

Database Statistics

tsx

<Statistic title="Total Records" value="2.4M" badge="Growing" badgeColor="neutral" />
<Statistic title="Query Speed" value={15} measure="ms" badge="Optimized" badgeColor="success" />

Usage Analytics

tsx

<Statistic title="Active Users" value={1247} badge="Online" badgeColor="success" />
<Statistic title="Daily Queries" value="45.2K" badge="Today" badgeColor="ppg" />

Health Monitoring

tsx

<Statistic title="Uptime" value={99.99} measure="%" badge="Healthy" badgeColor="success" />
<Statistic title="Error Rate" value={0.01} measure="%" badge="Low" badgeColor="warning" />

Resource Usage

tsx

<Statistic title="Memory Usage" value={67} measure="%" badge="Normal" badgeColor="neutral" />
<Statistic title="CPU Load" value={23} measure="%" badge="Low" badgeColor="success" />

Typography & Spacing

The Statistic component uses:

Title: Uppercase, extra-small font (text-xs), gray-400 color
Value: Extra-large, bold font (text-4xl font-black)
Measure: Large font (text-lg), gray-500 color
Spacing: 6px horizontal, 5px vertical padding
Border: 2px dashed purple-400 border with rounded corners

Layout Tips

Single Column (Mobile)

tsx

<div className="space-y-4">
  <Statistic title="Metric 1" value={100} />
  <Statistic title="Metric 2" value={200} />
</div>

Two Column Grid

tsx

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
  <Statistic title="Metric 1" value={100} />
  <Statistic title="Metric 2" value={200} />
  <Statistic title="Metric 3" value={300} />
  <Statistic title="Metric 4" value={400} />
</div>

Three Column Grid

tsx

<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
  <Statistic title="Metric 1" value={100} />
  <Statistic title="Metric 2" value={200} />
  <Statistic title="Metric 3" value={300} />
</div>

Four Column Grid

tsx

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
  <Statistic title="Metric 1" value={100} />
  <Statistic title="Metric 2" value={200} />
  <Statistic title="Metric 3" value={300} />
  <Statistic title="Metric 4" value={400} />
</div>

Accessibility

Clear visual hierarchy with distinct typography sizes
High contrast text colors for readability
Semantic HTML structure
Badge colors provide both visual and textual information
Responsive design works across all screen sizes
Title text is uppercase with tracking for improved legibility

Design Tokens

The component uses Eclipse design tokens:

Border: border-purple-400 with border-2 border-dashed
Radius: rounded-lg
Title: text-xs font-semibold tracking-widest text-gray-400 uppercase
Value: text-4xl font-black text-gray-900
Measure: text-lg text-gray-500
Spacing: px-6 py-5