Statistic

Display numeric summaries. These are mostly used on dashboards but can really be used anywhere. The statistic component like most BladewindUI components takes up the width of its parent element and expects a label and a number.

The component only displays the number passed to it with no alteration. You are therefore responsible for thousand separator and decimal formats in your numbers.

            
                <x-bladewind::statistic number="34,500,100" label="Total payments" />
            
        

By default the label is placed above the number. If you prefer to display it below the number set label_position="bottom".

            
                <x-bladewind::statistic
                    label_position="bottom"
                    number="34,500,100"
                    label="Total payments" />
            
        

With Icons

The statistic component can be displayed with an icon. This is setup as a slot so you can either use svg icons or image files. Icons can either be placed on the left or the right of the number and label. The default position is left. To flip the icon to the right set icon_position="right"

            
                <x-bladewind::statistic
                    number="34,500,100"
                    label="Total payments">

                    <x-slot name="icon">
                        <svg class="h-16 w-16 p-2 text-white rounded-full bg-blue-500"...>
                        ...
                        </svg>
                    </x-slot>

                </x-bladewind::statistic>
            
        

            
                <x-bladewind::statistic
                    icon_position="right"
                    number="34,500,100"
                    label="Total payments">

                    <x-slot name="icon">
                        <svg class="h-16 w-16 p-2 text-white rounded-full bg-orange-500"...>
                        ...
                        </svg>
                    </x-slot>

                </x-bladewind::statistic>
            
        

With Currency

There are instances where the statistic you’re displaying has to do with amounts. Amounts are usually displayed with currency symbols. If you need to display your amount with a currency symbol, set a value for the currency attribute. Currencies are displayed at a font size a step smaller than the amount. The currency symbol can be placed either on the left or right of the amount. The default placement is on the left of the amount. To change the position of the currency, set the currency_position attribute to either left or right. An alternative way to display currency symbols when dealing with amounts is to just add the currency to the label as seen in the second example below. This will be the preference for those who want to let the amount stand alone.

            
                <x-bladewind::statistic
                    currency="GHS"
                    number="34,500,100"
                    label="Total payments" />
            
        

With Spinners

In some cases you may not have access to your statistic numbers when the page loads. This usually is the case if you get your values from an API. In other cases, your users may filter your dashboard content, resulting in the need to repopulate your statistics. Spinners are useful visual cues in such scenarios to inform your users you're working on fetching the numbers. To display spinners on the statistics component, set show_spinner="true". The spinner is displayed in the number field. If you have a number, the spinner will be displayed before the number.

            
                <x-bladewind::statistic
                    show_spinner="true"
                    label="Total payments" />
            
        

You will need to programmatically get rid of the spinner once you have received your number and updated your number field. To be able to access various elements that make up the statistic, it is important to give the statistic a name. This can be done using the class attribute. Assuming we named our statistic component total-payments, the code below will be the resulting HTML for the component.

        
            <div class="bw-statistic total-payments ...">
                <div class="flex space-x-4">
                    <div class="grow-0 icon">
                        // icon is displayed here
                    </div>
                    <div class="grow number">
                        <div class="uppercase ... label">
                        // label is displayed here
                        </div>
                        <div class="text-3xl ...">
                            <svg class="bw-spinner">.
                                // spinner is displayed here
                            </svg>
                            <span class="text-gray-300 text-2xl">
                                // currency is displayed here
                            </span>
                            <span class="figure tracking-wider">
                                // number is displayed here
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        
    

From the above html code, to hide the spinner your javascript will be similar to

        
            <script>
                loadTotalPayment = () => {
                    ...
                    // do all your magic then call this helper function
                    // to hide the spinner
                    hide('.total-payments .bw-spinner');
                }
            </script>
        
    

Trends, Tones And Progress

A statistic is rarely just a number. It usually needs to say whether the number is good news, which way it is moving, and how far along something is. Those live on the component rather than in your markup, so the same figure reads the same way on every page.

        
<x-bladewind::statistic
    label="Revenue"
    number="12,400"
    currency="GHS"
    direction="up"
    note="up 12% on last month" />
        
    

direction draws a trend arrow beside the figure and colours it: up is good, down is bad, flat is neutral. The note takes the same colour.

When Down Is Good

Plenty of metrics improve by falling — arrears, churn, cost per unit, response time. Set invert_direction and a downward arrow turns green instead of red.

        
<x-bladewind::statistic
    label="Arrears"
    number="1,204"
    direction="down"
    invert_direction="true"
    note="down 8% this week" />
        
    

Tones

tone sets the colour explicitly and always wins over the direction. Available tones are neutral, positive, negative, warning and info.

Hints And Progress Bars

hint adds a small marker beside the label with explanatory text on hover — useful when a metric needs defining and the label has no room. progress takes a number from 0 to 100 and draws a bar in place of the note, tinted with the same tone. Out-of-range values are clamped and a non-numeric one is ignored.

        
<x-bladewind::statistic
    label="Collections"
    number="72%"
    hint="Invoices settled within 30 days"
    tone="positive"
    progress="72"
    progress_label="of monthly target" />
        
    

Full List Of Attributes

The table below shows a comprehensive list of all the attributes available for the Statistic component.

Statistic with all attributes defined

        
            <x-bladewind::statistic
                label="Total payments"
                label_position="bottom"
                number="34,500,100"
                currency="XOF"
                currency_position="right"
                icon_position="right"
                has_shadow="false"
                has_border="false"
                show_spinner="true"
                class="m-0">

                <x-slot name="icon">
                    <svg>...</svg>
                </x-slot>

            </x-bladewind::statistic>