valuereq- Type
number- Default
- -
- Description
- Quantitative percentage (0 to 100) indicating velocity.
Components / Display
Coverage Gauge
விநியோக அளவி
Renders circular SVG gauges representing disbursement percentages and tables projecting inventory depletion dates based on dispersion velocity metrics.
பொருட்களின் விநியோக வேகம் மற்றும் அளவு ஆகியவற்றைக் காட்டும் வரைபடம் மற்றும் கணிப்பு அட்டவணை.
Part of Ration Shop POS Block
This component is featured in the comprehensive Ration Shop Point of Sale block pattern.
Interactive Preview
Component preview
Coverage Gaugeவிநியோக அளவிAnatomy
Structure
Anatomy
3 parts documented for implementation and review.
1
Coverage Gauge
விநியோக அளவிrequired<svg>A circular SVG gauge displaying the percentage of registered service users served during the current month.
2
Dispersion Velocity Rates
விநியோக வேகம்required<div>Visual comparison cards analyzing resource items with peak and lowest daily dispersion rates.
3
Exhaustion Projections
சரக்கு தீர்வு கணிப்புrequired<table>Bilingual ledger projecting the exact number of days remaining before each item goes out of stock.
API
Props
label- Type
string- Default
- -
- Description
- Bilingual title summary overlay.
| Prop | Type | Default | Description |
|---|---|---|---|
valuereq | number | - | Quantitative percentage (0 to 100) indicating velocity. |
label | string | - | Bilingual title summary overlay. |
Best practices
Pair graphics with tabular summaries
விவர அட்டவணைகளை வரைபடங்களுடன் இணையுங்கள்
Provide a clear, detailed data table alongside SVG diagrams so screen-readers can fully parse the numerical metrics.
வரைபடத்தை ஸ்கிரீன்-ரீடர்கள் எளிதில் படிக்க முடியாததால், அதனுடன் துல்லியமான தரவு அட்டவணையை வழங்க வேண்டும்.
Don't rely on graphics alone
வரைபடங்களை மட்டுமே நம்பி இருக்க வேண்டாம்
Do not omit textual progress indicators. If the graphic fails to load or color scheme contrast is poor, context is completely lost.
நிலையை அறிவிக்கும் உரையை வரைபடத்தில் சேர்க்காமல் விடக்கூடாது. வண்ணங்கள் மற்றும் கோடுகளை மட்டும் நம்பி தரவை வெளியிடக் கூடாது.
Accessibility
- Uses native HTML
<table>tags with structured headers (<thead>,<th>) for layout, making tabular data completely readable for screen-readers. - SVGs use semantic markup and are accompanied by textual equivalents immediately adjacent to the graphical displays.
- Bilingual descriptions identify all stock items and units correctly in both English and Tamil.