UIStatistic

UIStatistic

A component for displaying statistical data with support for titles, trends, and graphs.

<template>
  <UIStatistic
    :title="$t('stats.views')"
    :type="'success'"
    :trendTitle="$t('stats.trend')"
    :showGraph="true"
    :titleTooltipContent="$t('stats.tooltip')"
  >
    1,234,567
    <template #badge>
      <div class="flex items-center gap-1 text-success-600">
        <ArrowUpIcon class="w-4 h-4" />
        <span>23.4%</span>
      </div>
    </template>
    <template #graph>
      <SparklineChart :data="chartData" />
    </template>
  </UIStatistic>
</template>

<script setup lang="ts">
const chartData = ref([30, 40, 35, 50, 49, 60, 70, 91, 125])
</script>

Props

• title (string): Statistic title
• type (‘success’ | ‘error’ | ‘warning’ | ‘info’): Statistic type
• trendTitle (string): Trend description
• showGraph (boolean): Show trend graph
• titleTooltipContent (string): Tooltip content for title
• options (Array): Dropdown options
• loading (boolean): Show loading state
• precision (number): Number of decimal places
• prefix (string): Prefix for the value
• suffix (string): Suffix for the value
• separator (string): Thousand separator
• decimal (string): Decimal separator

Events

• update:value: Emitted when value changes
• optionSelect: Emitted when dropdown option is selected

Slots

• default: Main content (number/value)
• prefix: Content before the value
• suffix: Content after the value
• badge: Badge/trend indicator content
• graph: Custom graph content
• title: Custom title content
• icon: Custom icon content

Usage Examples

1. Basic Usage:

<template>
  <UIStatistic title="Total Users">
    12,346
  </UIStatistic>
</template>

2. With Trend Indicator:

<template>
  <UIStatistic
    title="Revenue"
    type="success"
    prefix="$"
  >
    23,456
    <template #badge>
      <div class="flex items-center text-success-600">
        <ArrowUpIcon />
        <span>12.3%</span>
      </div>
    </template>
  </UIStatistic>
</template>

3. With Graph:

<template>
  <UIStatistic
    title="Page Views"
    :showGraph="true"
  >
    45,678
    <template #graph>
      <LineChart
        :data="viewsData"
        :height="50"
        :width="120"
      />
    </template>
  </UIStatistic>
</template>

4. Loading State:

<template>
  <UIStatistic
    title="Processing"
    :loading="isLoading"
  >
    {{ processedCount }}
  </UIStatistic>
</template>

Best Practices

1. Data Display:

   • Use appropriate number formatting
   • Show relevant trends
   • Include helpful tooltips
   • Provide context with icons

2. Visual Hierarchy:

   • Emphasize important numbers
   • Use consistent styling
   • Group related statistics
   • Apply appropriate spacing

3. Accessibility:

   • Include descriptive labels
   • Provide trend descriptions
   • Use semantic markup
   • Support screen readers

4. Responsiveness:

   • Adapt to container width
   • Handle long numbers
   • Resize graphs appropriately
   • Stack on smaller screens

5. Performance:

   • Optimize graph rendering
   • Cache calculations
   • Lazy load graphs
   • Minimize animations

Common Patterns

1. Dashboard Stats:

<template>
  <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
    <UIStatistic
      title="Users"
      type="info"
      :showGraph="true"
    >
      {{ userCount }}
    </UIStatistic>

    <UIStatistic
      title="Revenue"
      type="success"
      prefix="$"
    >
      {{ revenue }}
    </UIStatistic>

    <UIStatistic
      title="Conversion"
      type="warning"
      suffix="%"
    >
      {{ conversionRate }}
    </UIStatistic>
  </div>
</template>

2. Comparison Stats:

<template>
  <div class="flex gap-4">
    <UIStatistic
      title="This Month"
      :type="monthlyTrend.type"
    >
      {{ monthlyTrend.value }}
      <template #badge>
        {{ monthlyTrend.percentage }}%
      </template>
    </UIStatistic>

    <UIStatistic
      title="Last Month"
      type="info"
    >
      {{ lastMonth }}
    </UIStatistic>
  </div>
</template>