Overview

import MetricSection from "@components/MetricSection";

Description

The MetricSection component is a flexible and responsive grid layout component designed to display multiple metric cards in a structured format. It provides customizable grid layouts for different screen sizes and supports a title with an optional total count display.

Features

1. Responsive Grid Layout

   • Automatically adjusts the number of metrics per row based on screen size
   • Configurable breakpoints for different screen sizes
   • Maintains consistent spacing and alignment

2. Optional Total Count

   • Displays total count in the header when provided
   • Useful for showing aggregate metrics

3. Customizable Styling

   • Accepts custom styles through the style prop
   • Maintains consistent spacing and borders between cards
   • Responsive padding and margins

4. Flexible Metric Cards

   • Supports different types of metric displays
   • Handles various metric formats and trends
   • Consistent styling across all cards

Example Usage

const metrics = [
  {
    id: 1,
    title: "Total Revenue",
    value: "$50,000",
    trend: "15%",
    isPositive: true,
  },
  {
    id: 2,
    title: "Active Users",
    value: "1,234",
    trend: "-5%",
    isPositive: false,
  },
  {
    id: 3,
    title: "Conversion Rate",
    value: "2.5%",
    trend: "10%",
    isPositive: true,
  },
  {
    id: 4,
    title: "Bounce Rate",
    value: "45%",
    trend: "-8%",
    isPositive: true,
  },
];

<MetricSection
  title="Performance Metrics"
  metrics={metrics}
  total={5000}
  maxMetricsPerRowXXL={4} // 4 metric cards per row on XXL screens
  maxMetricsPerRowXL={3}
  maxMetricsPerRowLG={2}
  maxMetricsPerRowMD={2}
  maxMetricsPerRowSM={2}
  maxMetricsPerRowESM={1}
/>;

<MetricSection
  title="Email Campaign Metrics"
  metrics={metrics}
  total={5000}
  maxMetricsPerRowXXL={3} // 3 metric cards per row on XXL screens
  maxMetricsPerRowXL={3}
  maxMetricsPerRowLG={2}
  maxMetricsPerRowMD={2}
  maxMetricsPerRowSM={2}
  maxMetricsPerRowESM={1}
/>;

Results

Default Layout

Performance Metrics

Total Revenue

$50,000+15%

Active Users

1,234-5%

Conversion Rate

2.5%+10%

Bounce Rate

45%+-8%

With Total Count

Email Campaign Metrics

Total Emails: 5000

Total Revenue

$50,000+15%

Active Users

1,234-5%

Conversion Rate

2.5%+10%

Bounce Rate

45%+-8%

Props

Prop Name	Type	Default Value	Description
title	string	-	The title displayed at the top of the metric section.
metrics	array	-	Array of metric objects to be displayed in the grid.
style	object	-	Additional custom styles to be applied to the metric section container.
total	number	-	Optional total count to be displayed in the header.
maxMetricsPerRowXXL	number	-	Maximum number of metrics per row for XXL screens (1400px and above).
maxMetricsPerRowXL	number	-	Maximum number of metrics per row for XL screens (1200px and above).
maxMetricsPerRowLG	number	-	Maximum number of metrics per row for LG screens (992px and above).
maxMetricsPerRowMD	number	-	Maximum number of metrics per row for MD screens (768px and above).
maxMetricsPerRowSM	number	-	Maximum number of metrics per row for SM screens (576px and above).
maxMetricsPerRowESM	number	-	Maximum number of metrics per row for extra small screens (below 576px).

Metric Object Structure

Each metric object in the metrics array should have the following structure:

{
  id: string | number;    // Unique identifier for the metric
  title: string;         // Title of the metric
  value: string | number; // The main value to display
  trend?: string;        // Optional trend value (e.g., "+15%")
  trendLabel?: string;   // Optional label for the trend
  isPositive?: boolean;  // Optional flag indicating if trend is positive
}