Card Component - Display Sales - Today vs. Yesterday

This example is easily customized for your use case. Here, a client requested to view a comparison of sales between today and yesterday. This way, they have a quick visual of how their sales compare.

Step 1

Add a custom component to any page you wish to display the card.

Step 2

Choose the option of summary.

Step 3

Now you need to open your custom card component—Select Data Source, then Calculations. You will set up your card calculations with the settings shown in the image below.

Step 4

Next, select the template tab and add the following code.

I selected Card 5 from our custom component library template section for this example. 

{{#each records}}

    <div class="card-style-custom-4 card-custom-header-border col col-md-12">
        <div class="card-custom-4-wrap">
            <div class="card-custom-4-header">
                <span>Sales</span>
            </div>
            <div class="card-custom-4-inner">
                <span class="card-custom-4-icon"><i class="far fa-users"></i></span>
                <span class="card-custom-4-value"><b>${{totalToday}}</b></span>
                <span class="card-custom-4-suffix">Total Today</span>
            </div>
            <div class="card-custom-4-footer">
                {{#gte totalYesterday totalToday}}
                    <span class="lower">⬇️ ${{totalYesterday}} Yesterday</span>
{{else}}
    <span class="higher">⬆️ ${{totalYesterday}} Yesterday</span>
                {{/gte}}
            </div>
        </div>

{{/each}}

To select emojis to customize, press the windows 🪟's button + period "."

Please remember to change the areas I have highlighted above to match the information you wish to use. My choice of totalToday and totalYesterday would need to be replaced by the field name you titled in the data source in step 3.

Step 5

Within the code, I have added classes to the span. Let's go down to the very bottom of the code in our CSS tab and add some CSS to change the color of the text based on this calculation. 

.lower {
    color: red;
}
.higher {
    color: green;
}

Now you have a beautiful card component to calculate the information!

Original Community Post: 

https://community.tadabase.io/t/how-to-display-sales-difference-between-today-and-yesterday/2094/8