KPIWidget

'use client';

import React from 'react';

interface KPIWidgetProps {
  metric: number;
  label: string;
  target: number;
  progress: number;
  sparklineData: number[];
  periodComparison: string;
}

const KPIWidget: React.FC<KPIWidgetProps> = ({
  metric,
  label,
  target,
  progress,
  sparklineData,
  periodComparison,
}) => {
  return (
    <div className="bg-zinc-950 p-4 rounded-lg shadow-lg">
      <div className="flex flex-col items-center justify-center">
        <h2 className="text-3xl font-bold text-gold-500 mb-2">{metric}</h2>
        <p className="text-sm text-zinc-400">{label}</p>
      </div>
      <div className="mt-4">
        <p className="text-sm text-zinc-400 mb-1">Target: {target}</p>
        <div className="h-2 bg-zinc-800 rounded-lg overflow-hidden">
          <div
            style={{
              width: `${progress}%`,
              transition: 'width 0.3s ease-in-out',
            }}
            className="bg-gold-500 h-2 rounded-lg"
          />
        </div>
      </div>
      <div className="mt-4">
        <p className="text-sm text-zinc-400 mb-1">Sparkline</p>
        <div className="h-24 w-full">
          {sparklineData.map((data, index) => (
            <div
              key={index}
              style={{
                height: `${data}%`,
                transition: 'height 0.3s ease-in-out',
              }}
              className="bg-gold-500 mb-1"
            />
          ))}
        </div>
      </div>
      <div className="mt-4">
        <p className="text-sm text-zinc-400 mb-1">Period Comparison: {periodComparison}</p>
      </div>
    </div>
  );
};

const demoData: KPIWidgetProps = {
  metric: 1234,
  label: 'Metric Label',
  target: 1500,
  progress: 80,
  sparklineData: [20, 40, 60, 80, 100, 80, 60, 40, 20],
  periodComparison: '+10% vs last period',
};

export default () => <KPIWidget {...demoData} />;

Component info

About

KPI widget with mini chart and targets