کارت متریک (MetricCard)

import {
  MetricCard,
  MetricCardHeader,
  MetricCardLabel,
  MetricCardContent,
  MetricCardValue,
  MetricCardDifferential,
  MetricCardSparkline,
} from '@partodata/ui'
import { Users } from 'lucide-react'

export default function MyComponent() {
  const data = [
    { value: 4000, timestamp: 1735689600 },
    { value: 4200, timestamp: 1735776000 },
    { value: 4100, timestamp: 1735862400 },
    // ...
  ]

  return (
    <MetricCard>
      <MetricCardHeader>
        <MetricCardLabel icon={<Users className="h-3.5 w-3.5" />}>کاربران فعال</MetricCardLabel>
      </MetricCardHeader>
      <MetricCardContent>
        <MetricCardValue>4,605</MetricCardValue>
        <MetricCardDifferential comparisonLabel="نسبت به 1 تا 30 شهریور" direction="down" tone="negative">
          -0.1%
        </MetricCardDifferential>
      </MetricCardContent>
      <MetricCardSparkline data={data} dataKey="value" />
    </MetricCard>
  )
}

import {
  MetricCard,
  MetricCardIcon,
  MetricCardLabel,
  MetricCardContent,
  MetricCardValue,
  MetricCardDifferential,
  formatNumber,
} from '@partodata/ui'
import { Users } from 'lucide-react'
;<MetricCard className="flex flex-row items-center gap-3 px-4 py-3">
  <MetricCardIcon variant="brand">
    <Users />
  </MetricCardIcon>
  <div className="min-w-0 flex-1">
    <MetricCardLabel>کاربران فعال</MetricCardLabel>
    <MetricCardContent className="px-0">
      <MetricCardValue>{formatNumber(4605)}</MetricCardValue>
      <MetricCardDifferential comparisonLabel="نسبت به 1 تا 30 شهریور" direction="up" tone="positive">
        +2.5%
      </MetricCardDifferential>
    </MetricCardContent>
  </div>
</MetricCard>

import { Users } from 'lucide-react'
;<MetricCard>
  <MetricCardHeader>
    <MetricCardLabel icon={<Users className="h-3.5 w-3.5" />} tooltip="تعداد کاربران فعال در 24 ساعت گذشته">
      کاربران فعال
    </MetricCardLabel>
  </MetricCardHeader>
  <MetricCardContent>
    <MetricCardValue>4,605</MetricCardValue>
    <MetricCardDifferential comparisonLabel="نسبت به 1 تا 30 شهریور" direction="up" tone="positive">
      +2.5%
    </MetricCardDifferential>
  </MetricCardContent>
  <MetricCardSparkline data={data} dataKey="value" />
</MetricCard>

<MetricCard>
  <MetricCardHeader href="https://example.com/analytics">
    <MetricCardLabel>درآمد ماهانه</MetricCardLabel>
  </MetricCardHeader>
  <MetricCardContent>
    <MetricCardValue>250 میلیون</MetricCardValue>
    <MetricCardDifferential comparisonLabel="نسبت به 1 تا 30 شهریور" direction="up" tone="positive">
      +12.3%
    </MetricCardDifferential>
  </MetricCardContent>
  <MetricCardSparkline data={revenueData} dataKey="value" />
</MetricCard>

<MetricCard href="/issues?level=urgent,high" aria-label="مسائل نیازمند توجه: 21، باز کردن فهرست">
  <MetricCardHeader>
    <MetricCardLabel tooltip="مسائلی که شدت بالا یا فوری دارند">نیازمند توجه</MetricCardLabel>
  </MetricCardHeader>
  <MetricCardContent>
    <MetricCardValue>21</MetricCardValue>
  </MetricCardContent>
</MetricCard>

<MetricCard>
  <MetricCardHeader>
    <MetricCardLabel>کاربران جدید</MetricCardLabel>
  </MetricCardHeader>
  <MetricCardContent>
    <MetricCardValue>1,234</MetricCardValue>
    <MetricCardDifferential comparisonLabel="نسبت به 1 تا 30 شهریور" direction="up" tone="positive">
      +5.2%
    </MetricCardDifferential>
  </MetricCardContent>
</MetricCard>

<MetricCard isLoading={true} />

<MetricCard dir="ltr">
  <MetricCardHeader href="https://example.com">
    <MetricCardLabel tooltip="Number of active users in the last 24 hours">Active Users</MetricCardLabel>
  </MetricCardHeader>
  <MetricCardContent>
    <MetricCardValue>4,605</MetricCardValue>
    <MetricCardDifferential comparisonLabel="نسبت به 1 تا 30 شهریور" direction="down" tone="negative">
      -0.1%
    </MetricCardDifferential>
  </MetricCardContent>
  <MetricCardSparkline data={data} dataKey="value" />
</MetricCard>

<MetricCard>
  <MetricCardHeader>
    <MetricCardLabel>بازدید</MetricCardLabel>
  </MetricCardHeader>
  <MetricCardContent>
    <MetricCardValue currentLabel="این ماه" previous={{ value: '980', label: 'ماه قبل' }}>
      1,240
    </MetricCardValue>
  </MetricCardContent>
  <MetricCardContent>
    <TrendIndicator comparisonLabel="نسبت به 7 روز قبل" value={26.5} showPercent size="sm" />
  </MetricCardContent>
</MetricCard>

const metrics = [
  {
    label: 'کاربران فعال',
    value: '4,605',
    differential: '-0.1%',
    direction: 'down',
    tone: 'negative',
    data: activeUsersData,
  },
  {
    label: 'فروش امروز',
    value: '123 میلیون',
    differential: '+5.2%',
    direction: 'up',
    tone: 'positive',
    data: salesData,
  },
  {
    label: 'نرخ تبدیل',
    value: '3.24%',
    differential: '+0.8%',
    direction: 'up',
    tone: 'positive',
    data: conversionData,
  },
]

;<div className="grid grid-cols-1 md:grid-cols-3 gap-4" dir="rtl">
  {metrics.map((metric) => (
    <MetricCard key={metric.label}>
      <MetricCardHeader>
        <MetricCardLabel>{metric.label}</MetricCardLabel>
      </MetricCardHeader>
      <MetricCardContent>
        <MetricCardValue>{metric.value}</MetricCardValue>
        <MetricCardDifferential
          comparisonLabel="نسبت به 1 تا 30 شهریور"
          direction={metric.direction}
          tone={metric.tone}
        >
          {metric.differential}
        </MetricCardDifferential>
      </MetricCardContent>
      <MetricCardSparkline data={metric.data} dataKey="value" />
    </MetricCard>
  ))}
</div>

import { useQuery } from '@tanstack/react-query'

function MetricCardWithQuery() {
  const { data, isLoading } = useQuery({
    queryKey: ['metrics'],
    queryFn: fetchMetrics,
  })

  return (
    <MetricCard isLoading={isLoading}>
      <MetricCardHeader>
        <MetricCardLabel>کاربران فعال</MetricCardLabel>
      </MetricCardHeader>
      <MetricCardContent>
        <MetricCardValue>{data?.value.toLocaleString('en-US')}</MetricCardValue>
        {typeof data?.trend === 'number' && data.comparisonLabel?.trim() && (
          <MetricCardDifferential
            comparisonLabel={data.comparisonLabel}
            direction={data.trend > 0 ? 'up' : data.trend < 0 ? 'down' : 'neutral'}
            tone={data.trend > 0 ? 'positive' : data.trend < 0 ? 'negative' : 'neutral'}
          >
            {data.trend > 0 ? '+' : ''}
            {data.trend}%
          </MetricCardDifferential>
        )}
      </MetricCardContent>
      <MetricCardSparkline data={data?.history || []} dataKey="value" />
    </MetricCard>
  )
}

type SparklineData = {
  value: number // مقدار عددی
  timestamp: number // Unix seconds؛ مثلا 1735689600
}

<MetricCardDifferential direction="up" tone="neutral" comparisonLabel="نسبت به 7 روز قبل">24٪</MetricCardDifferential>
<MetricCardDifferential direction="down" tone="positive" comparisonLabel="نسبت به ماه قبل">8٪</MetricCardDifferential>

<MetricCardDifferential comparisonLabel="نسبت به 1 تا 30 شهریور" direction="down" tone="negative">-0.1٪</MetricCardDifferential>
<MetricCardDifferential comparisonLabel="نسبت به 1 تا 30 شهریور" direction="up" tone="positive">+12٪</MetricCardDifferential>

<MetricCardDifferential comparisonLabel="نسبت به 1 تا 30 شهریور" direction="down" tone="negative" sign="-">
  0.1٪
</MetricCardDifferential>

<MetricCard dir="ltr">{/* ... */}</MetricCard>