bladewindUI

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.

Total payments
34,500,100

                        
                            <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".

34,500,100
Total payments

                        
                            <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"

Total payments
34,500,100
Total payments
34,500,100

                        
                            <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.

Total payments
GHS34,500,100
Total payments (GHS)
34,500,100

                    
                        <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.

Total payments
Total payments (GHS)
34,500,100

                        
                            <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>
                    
                


 

Full List Of Attributes

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

IMPORTANT: Projects running Laravel 8 please read this

Option Default Available Values
label blank A string that best describes the statistic.
number blank A number to display as the statistic.
currency blank In cases where the statistic being displayed is an amount, a currency can be defined.
currency_position left Only applicable when currency has a value.
left right
label_position top Should the label be displayed above or below the number.
top bottom
has_shadow true Should the static component be displayed with a shadow.
true false
show_spinner false Should the static component be displayed with a Spinner.
true false
icon blank SVG icon or image icon to display. Needs to be defined as a slot. See examples above.
icon_position left Only applicable when icon has a value.
left right
class bw-spinner Any additional CSS you wish to add. You can add css to help you uniquely identify a statistic.

 

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"
                        show_spinner="true"
                        class="m-0">

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

                    </x-bladewind.statistic>
                
            

 

The source file for this component is available in resources > views > components > bladewind > statistic.blade.php