TTS. DocsPanel Design System
1.4.0
Blocks

Statistics

Contents

The statistics section provides a visual representation of key metrics, offering insights into platform performance and user engagement.

Introduction

Statistics components help users quickly understand data through numerical summaries, progress indicators, and comparative charts. These components improve decision-making by presenting information in an easily digestible format.

Summary Cards

show key metrics like total orders or revenue with icons and trends.

View Mode 
                          
 HTML
                            
                          
 <div class="row mb-4 g-4">
  <div class="col-sm-6 col-xl-3">
    <div class="single-stats-widget">
      <svg class="single-stats-widget__icon" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd"
          d="M3.29951 11.0781C3.13383 11.0781 2.99951 11.2124 2.99951 11.3781V15.7881C2.99951 18.5811 4.79351 20.4581 7.46351 20.4581H17.5345C20.2055 20.4581 21.9995 18.5811 21.9995 15.7881V11.3781C21.9995 11.2124 21.8652 11.0781 21.6995 11.0781H3.29951Z"
          fill-opacity="0.95" fill="var(--tt-primary-100)" />
        <path fill-rule="evenodd" clip-rule="evenodd"
          d="M21.7 9.57906C21.8657 9.57906 22 9.44475 22 9.27906V9.20906C22 6.41606 20.206 4.53906 17.535 4.53906H7.464C4.794 4.53906 3 6.41606 3 9.20906V9.27906C3 9.44475 3.13431 9.57906 3.3 9.57906H21.7Z"
          fill-opacity="0.95" fill="var(--tt-primary-100)" />
        <path
          d="M7.67676 16.4219H10.6458C11.0598 16.4219 11.3958 16.0859 11.3958 15.6719C11.3958 15.2579 11.0598 14.9219 10.6458 14.9219H7.67676C7.26276 14.9219 6.92676 15.2579 6.92676 15.6719C6.92676 16.0859 7.26276 16.4219 7.67676 16.4219Z"
          fill-opacity="0.95" fill="var(--tt-primary-100)" />
      </svg>
      <div class="single-stats-widget__content"> <span class="single-stats-widget__number"><span>7,599</span><span
            class="tticon-sar"></span></span><span class="single-stats-widget__label">إجمالي الايرادات</span></div>
    </div>
  </div>
  <div class="col-sm-6 col-xl-3">
    <div class="single-stats-widget">
      <svg class="single-stats-widget__icon" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd"
          d="M8.43634 4.375H15.5613C15.9753 4.375 16.3113 4.039 16.3113 3.625C16.3113 3.211 15.9753 2.875 15.5613 2.875H8.43634C8.02234 2.875 7.68634 3.211 7.68634 3.625C7.68634 4.039 8.02234 4.375 8.43634 4.375Z"
          fill="var(--tt-aqua-100)" />
        <path fill-rule="evenodd" clip-rule="evenodd"
          d="M5.68231 7.75293H18.3163C18.7303 7.75293 19.0663 7.41693 19.0663 7.00293C19.0663 6.58893 18.7303 6.25293 18.3163 6.25293H5.68231C5.26831 6.25293 4.93231 6.58893 4.93231 7.00293C4.93231 7.41693 5.26831 7.75293 5.68231 7.75293Z"
          fill="var(--tt-aqua-100)" />
        <path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd"
          d="M20.6888 11.4674C20.1498 10.7634 19.3318 10.3594 18.4448 10.3594H5.55478C4.66778 10.3594 3.84978 10.7634 3.31078 11.4664C2.77178 12.1714 2.59478 13.0664 2.82578 13.9214L4.47578 20.0334C4.80778 21.2654 5.92978 22.1244 7.20478 22.1244H16.7938C18.0678 22.1244 19.1898 21.2654 19.5228 20.0344L21.1738 13.9224C21.4058 13.0674 21.2278 12.1714 20.6888 11.4674Z"
          fill="var(--tt-aqua-100)" />
      </svg>
      <div class="single-stats-widget__content"> <span class="single-stats-widget__number">3,841</span><span
          class="single-stats-widget__label">اجمالي الطلبات</span></div>
    </div>
  </div>
</div>
<!-- Usage Example -->
<SummaryCard label="عملاء" :number="1549" />
<SummaryCard label="اجمالي الطلبات" :icon="image" :number="3841" />
 
<!-- Vue Component Code Block -->
<template>
    <div class="single-stats-widget">
      <div v-html="icon" class="single-stats-widget__icon"></div>
      <div class="single-stats-widget__content">
        <span class="single-stats-widget__number">{{ number }}</span>
        <span class="single-stats-widget__label">{{ label }}</span>
      </div>
    </div>
  </template>
  
  <script setup>
  defineProps({
    icon: String,
    label: String,
    number: Number,
  })
  </script>

Segmented Counters

categorize data by status, using colors for clarity.

View Mode 
                          
 HTML
                            
                          
<div class="stats-widget">
    <div class="row g-2 g-sm-4 g-md-0 justify-content-center">
        <div class="col-6 col-md-3 col-xl-4 col-xxl-5">
            <div class="stats-widget__item align-items-md-start">
                <div class="stats-widget__item-number">5,984</div>
                <div class="stats-widget__item-label">إجمالي الطلبات للمنصة.</div>
            </div>
        </div>
        <div class="col-6 col-md">
            <div class="stats-widget__item stats-widget__item--with-arrow">
                <div class="stats-widget__item-number">594</div>
                <span class="status status--warning">قيد المراجعة</span>
            </div>
        </div>
        <div class="col-6 col-md">
            <div class="stats-widget__item stats-widget__item--with-arrow">
                <div class="stats-widget__item-number">145</div>
                <span class="status status--info">قيد التنفيذ</span>
            </div>
        </div>
        <div class="col-6 col-md">
            <div class="stats-widget__item">
                <div class="stats-widget__item-number">2,933</div>
                <span class="status status--success">مكتلمة</span>
            </div>
        </div>
    </div>
</div>
<!-- Usage Example -->
<SegmentedCounter
    title="المستفيدين"
    :total="10000"
    :segments="[
        {
        label: 'قيد المراجعة',
        count: 3000,
        color: 'warning',
        },
        {
        label: 'قيد التنفيذ',
        count: 1549,
        color: 'primary',
        },
        {
        label: 'مكتلمة',
        count: 3841,
        color: 'danger',
        },
    ]"
/>
<!-- Vue Component Code Block -->
<template>
  <div class="stats-widget">
    <div class="row g-2 g-sm-4 g-md-0 justify-content-center">
      <div class="col-6 col-md-3 col-xl-4 col-xxl-5">
        <div class="stats-widget__item align-items-md-start">
          <div class="stats-widget__item-number">{{ total }}</div>
          <div class="stats-widget__item-label">{{ title }}</div>
        </div>
      </div>
 
      <div
        class="col-md"
        v-for="(segment, index) in normalizedSegments"
        :key="segment.label || index"
      >
        <div
          class="stats-widget__item"
          :class="{ 'stats-widget__item--with-arrow': index !== normalizedSegments.length - 1 }"
        >
          <div class="stats-widget__item-number">{{ segment.count }}</div>
          <span :class="['status', segment.color ? `status--${segment.color}` : 'status--info']">
            {{ segment.label }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>
 
<script setup>
import { computed } from 'vue'
 
const props = defineProps({
  title: String,
  total: Number,
  segments: {
    type: Array,
    default: () => [],
  },
})
 
const normalizedSegments = computed(() => props.segments || [])
</script>

Bar Chart Statistics

compare data visually across categories.

View Mode 
                          
 HTML
                            
                          
<div class="chart-widget">
    <div class="chart-widget__header">
        <div class="chart-widget__title">
            <span class="tticon-chevrons-horizontal-in"></span>
            الجنس
        </div>
        <div class="chart-widget__desc">المستفيدين حسب الجنس</div>
    </div>
    <div class="chart-widget__gender">
        <div class="chart-widget__gender-item">
            <div class="chart-widget__gender-title">
                <span class="tticon-male-light chart-widget__gender-title-icon chart-widget__gender-title-icon--info"></span>
                <span class="chart-widget__gender-title-label">الرجال</span>
            </div>
            <span class="chart-widget__gender-percentage">76%</span>
            <span class="chart-widget__gender-number">1,549</span>
        </div>
        <div class="chart-widget__gender-item">
            <div class="chart-widget__gender-title">
                <span class="chart-widget__gender-title-label">النساء</span>
                <span class="tticon-female-light chart-widget__gender-title-icon chart-widget__gender-title-icon--warning"></span>
            </div>
            <span class="chart-widget__gender-percentage">24%</span>
            <span class="chart-widget__gender-number">942</span>
        </div>
    </div>
    <div class="chart-widget__bar-charts">
        <span class="chart-widget__bar-item chart-widget__bar-item--info" style="width: 76%;"></span>
        <span class="chart-widget__bar-item chart-widget__bar-item--warning" style="width: 24%;"></span>
    </div>
    <div class="chart-widget__total">
        <span class="chart-widget__total-label">اجمالي المستفيدين</span>
        <span class="chart-widget__total-percentage chart-widget__total-percentage--success">+2.19%</span>
        <span class="chart-widget__total-number">3,927</span>
    </div>
</div>
<!-- Usage Example -->
<BarChart
    title="الجنس"
    desc="المستفيدين حسب الجنس"
    segment-one-title="الرجال"
    :segment-one-count="3841"
    segment-one-color="danger"
    segment-two-title="النساء"
    :segment-two-count="5000"
    :grow-percentage="20"
    />
<!-- Vue Component Code Block -->
<template>
  <div class="chart-widget">
    <div class="chart-widget__header">
      <div class="chart-widget__title">
        <span class="tticon-chevrons-horizontal-in"></span>
        {{ title }}
      </div>
      <div class="chart-widget__desc">{{ desc }}</div>
    </div>
    <div class="chart-widget__gender">
      <div class="chart-widget__gender-item">
        <div class="chart-widget__gender-title">
          <span
            :class="[
              segmentOneIcon,
              'chart-widget__gender-title-icon',
              `chart-widget__gender-title-icon--${segmentOneColor}`,
            ]"
          ></span>
          <span class="chart-widget__gender-title-label">{{ segmentOneTitle }}</span>
        </div>
        <span class="chart-widget__gender-percentage">{{ segmentOnePercentage }}%</span>
        <span class="chart-widget__gender-number">{{ segmentOneCount }}</span>
      </div>
      <div class="chart-widget__gender-item">
        <div class="chart-widget__gender-title">
          <span class="chart-widget__gender-title-label">{{ segmentTwoTitle }}</span>
          <span
            :class="[
              segmentTwoIcon,
              'chart-widget__gender-title-icon',
              `chart-widget__gender-title-icon--${segmentTwoColor}`,
            ]"
          ></span>
        </div>
        <span class="chart-widget__gender-percentage">{{ segmentTwoPercentage }}%</span>
        <span class="chart-widget__gender-number">{{ segmentTwoCount }}</span>
      </div>
    </div>
    <div class="chart-widget__bar-charts">
      <span
        class="chart-widget__bar-item"
        :class="`chart-widget__bar-item--${segmentOneColor}`"
        :style="{ width: `${segmentOnePercentage}%` }"
      ></span>
      <span
        class="chart-widget__bar-item"
        :class="`chart-widget__bar-item--${segmentTwoColor}`"
        :style="{ width: `${segmentTwoPercentage}%` }"
      ></span>
    </div>
    <div class="chart-widget__total">
      <span class="chart-widget__total-label">{{ totalTitle }}</span>
      <span
        v-if="growPercentage"
        class="chart-widget__total-percentage chart-widget__total-percentage--success"
      >
        +{{ growPercentage }}%</span
      >
      <span class="chart-widget__total-number">{{ totalCount }}</span>
    </div>
  </div>
</template>
 
<script setup>
import { computed } from 'vue'
 
const props = defineProps({
  title: String,
  desc: String,
  segmentOneTitle: String,
  segmentOneCount: Number,
  segmentTwoTitle: String,
  segmentTwoCount: Number,
  segmentOneColor: {
    type: String,
    default: 'info',
  },
  segmentTwoColor: {
    type: String,
    default: 'warning',
  },
  segmentOneIcon: {
    type: String,
    default: 'tticon-male-light',
  },
  segmentTwoIcon: {
    type: String,
    default: 'tticon-female-light',
  },
  totalTitle: String,
  growPercentage: Number,
})
 
const totalCount = computed(() => (props.segmentOneCount || 0) + (props.segmentTwoCount || 0))
 
const segmentOnePercentage = computed(() => {
  if (totalCount.value === 0) return 0
  return (((props.segmentOneCount || 0) / totalCount.value) * 100).toFixed(1)
})
 
const segmentTwoPercentage = computed(() => {
  if (totalCount.value === 0) return 0
  return (((props.segmentTwoCount || 0) / totalCount.value) * 100).toFixed(1)
})
</script>

Progress Indicators

display completion rates with progress bars.

View Mode 
                          
 HTML
                            
                          
<div class="chart-widget">
    <div class="chart-widget__header">
        <div class="chart-widget__title">
            <span class="tticon-book"></span>
            المؤهل العلمي
        </div>
        <div class="chart-widget__desc">المستفيدين حسب المؤهل</div>
    </div>
    <div class="chart-widget__bar-charts">
        <span class="chart-widget__bar-item chart-widget__bar-item--success" style="width: 75%;"></span>
        <span class="chart-widget__bar-item chart-widget__bar-item--primary" style="width: 12%;"></span>
        <span class="chart-widget__bar-item chart-widget__bar-item--warning" style="width: 13%;"></span>
    </div>
    <ul class="chart-widget__list-group">
        <li class="chart-widget__list-header">
            <span>المستفيدين</span>
            <span>النسبة</span>
        </li>
        <li class="chart-widget__list-item">
            <span class="chart-widget__list-item-color chart-widget__list-item-color--success"></span>
            <span class="chart-widget__list-item-label">جامعة</span>
            <span class="chart-widget__list-item-number">(840)</span>
            <span class="chart-widget__list-item-percentage">75%</span>
        </li>
        <li class="chart-widget__list-item">
            <span class="chart-widget__list-item-color chart-widget__list-item-color--primary"></span>
            <span class="chart-widget__list-item-label">متوسط</span>
            <span class="chart-widget__list-item-number">(246)</span>
            <span class="chart-widget__list-item-percentage">12%</span>
        </li>
        <li class="chart-widget__list-item">
            <span class="chart-widget__list-item-color chart-widget__list-item-color--warning"></span>
            <span class="chart-widget__list-item-label">ابتدائي</span>
            <span class="chart-widget__list-item-number">(246)</span>
            <span class="chart-widget__list-item-percentage">13%</span>
        </li>
    </ul>
</div>
<!-- Usage Example -->
<ProgressIndecator
    title="المرحلة الدراسية"
    desc="حسب المؤهل"
    :segments="[
        { title: 'جامعة', number: 840, color: 'success' },
        { title: 'متوسط', number: 246, color: 'primary' },
        { title: 'ابتدائي', number: 146, color: 'warning' },
    ]"
    />
<!-- Vue Component Code Block -->
<template>
  <div class="chart-widget">
    <div class="chart-widget__header">
      <div class="chart-widget__title">
        <span class="tticon-book"></span>
        {{ title }}
      </div>
      <div class="chart-widget__desc">{{ desc }}</div>
    </div>
    <div class="chart-widget__bar-charts">
      <span
        v-for="(segment, index) in normalizedSegments"
        :key="index"
        class="chart-widget__bar-item"
        :class="`chart-widget__bar-item--${segment.color || 'primary'}`"
        :style="{ width: `${segment.percentage}%` }"
      ></span>
    </div>
    <ul class="chart-widget__list-group">
      <li class="chart-widget__list-header">
        <span>{{ title }}</span>
        <span>النسبة</span>
      </li>
      <li
        v-for="(segment, index) in normalizedSegments"
        :key="index"
        class="chart-widget__list-item"
      >
        <span
          class="chart-widget__list-item-color"
          :class="`chart-widget__list-item-color--${segment.color || 'primary'}`"
        ></span>
        <span class="chart-widget__list-item-label">{{ segment.title }}</span>
        <span class="chart-widget__list-item-number">({{ segment.number }})</span>
        <span class="chart-widget__list-item-percentage"> {{ segment.percentage }}% </span>
      </li>
    </ul>
  </div>
</template>
 
<script setup>
import { computed } from 'vue'
const props = defineProps({
  title: String,
  desc: String,
  segments: Array,
})
 
const total = computed(() => {
  return props.segments.reduce((sum, s) => sum + (parseInt(s.number) || 0), 0)
})
 
const normalizedSegments = computed(() => {
  return props.segments.map((segment) => {
    const value = parseInt(segment.number) || 0
    const percentage = total.value === 0 ? 0 : (value / total.value) * 100
    return {
      ...segment,
      percentage: percentage.toFixed(1), // you can round it to 0 if needed
    }
  })
})
</script>
Last updated 3 months ago