Overview

import MetricSection from "@components/MetricCard";

Description

The MetricCard component is a reusable card component designed to display individual metrics with optional trend indicators. It supports three display modes: simple mode (title and value only), detailed mode with trend, and detailed mode with trend and trend label.

Display Modes

The MetricCard supports three display modes:

1. Simple Mode: When only title and value are provided

   • Shows only the title and value
   • Clean and minimal display

2. Detailed Mode with Trend: When trend is provided without trendLabel

   • Shows the value and trend on the same line
   • Trend is displayed in green (positive) or red (negative)

3. Detailed Mode with Trend and Label: When both trend and trendLabel are provided

   • Shows the value on one line
   • Shows the trend and trend label on a second line
   • Trend is displayed in green (positive) or red (negative)

Example Usage

// Simple Mode
const simpleMetric = {
  title: "Revenue",
  value: "$50,000"
};

// Detailed Mode with Trend
const trendMetric = {
  title: "Active Users",
  value: "1,234",
  trend: "-5%",
  isPositive: false
};

// Detailed Mode with Trend and Label
const detailedMetric = {
  title: "Conversion Rate",
  value: "2.5%",
  trend: "15%",
  trendLabel: "vs last month",
  isPositive: true
};

// Usage

<div style={{ width: "200px" }}>
  <MetricCard metric={simpleMetric} />
</div>
<div style={{ width: "200px" }}>
  <MetricCard metric={trendMetric} />
</div>
<div style={{ width: "200px" }}>
  <MetricCard metric={detailedMetric} />
</div>

Results

Simple Mode

Revenue

$50,000

Detailed Mode with Trend

Active Users

1,234-5%

Detailed Mode with Trend and Label

Conversion Rate

2.5%

+15%vs last month

Props

Prop Name	Type	Default Value	Description
metric	object	-	The metric object containing all the data to be displayed in the card.

Metric Object Structure

The metric prop should be an object with the following properties:

Property	Type	Required	Description
title	string	Yes	The title of the metric card.
value	string	Yes	The main value to be displayed.
trend	string	No	The trend value (e.g., "+15%", "-5%").
trendLabel	string	No	Additional label for the trend (e.g., "vs last month").
isPositive	boolean	No	Indicates if the trend is positive. Defaults to true if not specified.