metricsreq- Type
MetricDef[]- Default
- -
- Description
- Database details showing values and bilingual labels.
Components / Display
Metric Cards
அளவீட்டு அட்டைகள்
A grid layout of metric cards showing user counts, daily transactions, total inventory volume, and monthly value statistics.
முகப்பில் அத்தியாவசிய விவரங்களைக் காட்டும் அளவீட்டு அட்டைகளின் தொகுப்பு.
Part of Ration Shop POS Block
This component is featured in the comprehensive Ration Shop Point of Sale block pattern.
Interactive Preview
Component preview
Metric Cardsஅளவீட்டு அட்டைகள்Anatomy
Structure
Anatomy
5 parts documented for implementation and review.
1
Stat Container
அளவீட்டு கொள்கலன்required<div>A grid wrapper styling individual cards with border, card background, shadow, and translations.
2
Stat Label
அளவீடு லேபிள்required<span>Uppercase label describing the stat, supporting Tamil and English titles.
3
Status Icon
சின்னம்<svg>Lucide icon styled with a specific theme background (blue, emerald, purple, brand) highlighting the statistic category.
4
Stat Value
அளவீட்டு மதிப்புrequired<div>A bold monospace text displaying the main quantitative metric value.
5
Sub-info detail
துணைத் தகவல்<div>Secondary context, e.g. MTD sum, low stock notifications, or type details.
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
metricsreq | MetricDef[] | - | Database details showing values and bilingual labels. |
Best practices
Use tabular monospace numbers
மோனோஸ்பேஸ் எண்களைப் பயன்படுத்துங்கள்
Use monospace fonts for values to avoid width jumps and layout shifts when stats increment or load dynamically.
தரவு மாறும்போது அல்லது புதுப்பிக்கப்படும்போது பக்கத்தின் வடிவமைப்பு நகராமல் இருக்க மோனோஸ்பேஸ் எண்களைப் பயன்படுத்தவும்.
Don't omit structural label hierarchy
லேபிள் வரிசையைத் தவிர்க்க வேண்டாம்
Never display raw numbers without titles or descriptions, rendering them completely contextless for users.
பெயர்கள் அல்லது விவரங்கள் இல்லாமல் எண்களை மட்டும் அச்சிட வேண்டாம். இது பயனர்களைக் குழப்பமடையச் செய்யும்.
Accessibility
- Uses clear visual contrast for numerical and secondary labels, exceeding 4.5:1.
- Standalone icons are flagged for decoration, and values have standard, readable text descriptions for screen-readers.
- Numbers are styled using tabular-num monospace properties (
font-mono) to ensure clean grid alignment.