MetricCard

import React from 'react';

interface MetricCardProps {
  value: number;
  trend: 'up' | 'down';
  sparklineData: number[];
}

const MetricCard: React.FC<MetricCardProps> = ({ value, trend, sparklineData }) => {
  return (
    <div style={{ backgroundColor: '#0A0A0A', padding: 20, borderRadius: 10, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
      <h1 style={{ color: '#C9A84C', fontSize: 36, fontWeight: 'bold' }}>{value.toLocaleString()}</h1>
      <div style={{ display: 'flex', alignItems: 'center' }}>
        {trend === 'up' ? (
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 10L12 2" stroke="#C9A84C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
        ) : (
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 10L4 2" stroke="#C9A84C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
        )}
        <span style={{ color: '#F5F5F0', fontSize: 14, marginLeft: 10 }}>{trend === 'up' ? 'Increasing' : 'Decreasing'}</span>
      </div>
      <div style={{ width: '100%', height: 50, backgroundColor: '#333', borderRadius: 10, marginTop: 20 }}>
        {sparklineData.map((data, index) => (
          <div key={index} style={{ height: `${data}px`, backgroundColor: '#C9A84C', borderRadius: 10, width: '2px', marginLeft: index === 0 ? 0 : 2 }}/>
        ))}
      </div>
    </div>
  );
};

export default MetricCard;

Component info

Dependencies

About

Animated counter card for dashboards, featuring a gold number, trend indicator, and sparkline. Perfect for displaying key performance indicators (KPIs) in a visually appealing way. The component is built with TypeScript and has a dark background, making it ideal for modern dashboards. With its animated counter and trend indicator, it provides a clear and concise overview of important metrics. The sparkline adds an extra layer of depth, allowing users to quickly identify trends and patterns in their data. Whether you're building a business intelligence platform, a financial dashboard, or a marketing analytics tool, the MetricCard component is an excellent choice. It is fully customizable, allowing you to tailor it to your specific needs and branding. The component is also highly scalable, making it suitable for large and complex dashboards. Overall, the MetricCard component is a powerful and flexible tool for creating engaging and informative dashboards.