@giosg/reporting-metric-card

Reusable metric card visualization components for displaying analytics data.

Installation

npm install @giosg/reporting-metric-card

Usage

LineMetricCard

A complete line chart component with card wrapper and title included.

import { LineMetricCard } from '@giosg/reporting-metric-card';
import type { LineChartVisualizationData } from '@giosg/reporting-metric-card';

const data: LineChartVisualizationData = {
    current_period: {
        change: '15.50',
        total: 1234,
        daily: [
            { date: '2024-01-01', value: 100, week: 1, month: 1, year: 2024 },
            { date: '2024-01-02', value: 120, week: 1, month: 1, year: 2024 },
            // ... more daily data
        ],
    },
    previous_period_1: {
        change: '10.20',
        total: 1050,
        daily: [
            /* ... */
        ],
    },
    previous_period_2: {
        change: '5.30',
        total: 950,
        daily: [
            /* ... */
        ],
    },
};

function MyComponent() {
    return <LineMetricCard title="Total Conversations" unit="numeric" data={data} />;
}

Compact Mode

Display a minimal version without statistics and overlays:

<LineMetricCard title="Total Conversations" unit="numeric" data={data} compact={true} />

Props

LineMetricCard

• title: string - The title displayed in the card header
• unit: 'numeric' | 'time' | 'percentage' - The unit type for value formatting
• data: LineChartVisualizationData - The chart data with current and previous periods
• compact: boolean (optional) - Display a compact version without overlays and stats. Default: false

Data Structure

The component expects data in a specific format with three periods:

interface LineChartVisualizationData {
    current_period: LineChartPeriodData;
    previous_period_1: LineChartPeriodData;
    previous_period_2: LineChartPeriodData;
}

interface LineChartPeriodData {
    change: string; // Percentage change (e.g., "15.50")
    total: number; // Total value for the period
    daily: Array<{
        date: string; // ISO format YYYY-MM-DD
        value: number;
        week: number; // ISO week number
        month: number; // Month number
        year: number; // Full year
    }>;
}

Peer Dependencies

This package requires the following peer dependencies:

• react ^18.0.0
• react-dom ^18.0.0
• @emotion/react ^11.0.0
• @emotion/styled ^11.0.0
• moment ^2.29.0
• recharts ^2.0.0

License

UNLICENSED