B4J Library [ABMaterial]: MashStats

Hi y'all

Play GIF

Download Working Example

Preview

Well, there is nothing fancy here but just another card design to render some stats information. Will be useful for dashboard reporting.

1. You specific own forecolor and background color using theming.
2. There are no external dependencies here as the normal css are used built inside ABMaterial.

Example, define the cards...

Private card1 As MashStats
Private card2 As MashStats
Private card3 As MashStats

And create the cards in ConnectPage...

'stats cards
    ABMShared.AddTheme("whitegreen","white","","green","")
    card1.Initialize(page,"card1","whitegreen")
    card1.StatsType = card1.EnumStatsType.increase
    card1.Title = "Total Likes"
    card1.TitleIcon = "mdi-thumb_up"
    card1.Value = "1,000"
    card1.Percentage = "20%"
    card1.PercentageComment = "from last year"
    card1.ZDepth = ABM.ZDEPTH_2
    page.Cell(4,1).AddComponent(card1.ABMComp)
 
'a simpler call
    ABMShared.AddTheme("whitepink","white","","pink","")
    card2.Initialize(page,"card2","whitepink")
    card2.StatsType = card2.EnumStatsType.decrease
    card2.SetTitle("New Invoice").SetTitleIcon("mdi-insert_drive_file").SetValue("1808").SetPercentage("5").SetComment("from last month")
    card2.ZDepth = ABM.ZDEPTH_2
    page.Cell(4,1).AddComponent(card2.ABMComp)
 
    ABMShared.AddTheme("whitebluegrey","white","",ABM.COLOR_BLUEGREY,"")
    card3.Initialize(page,"card3","whitebluegrey")
    card3.StatsType = card3.EnumStatsType.increase
    card3.Title = "Todays Profile"
    card3.TitleIcon = "mdi-trending_up"
    card3.Value = "R1,505.00"
    card3.Percentage = "80%"
    card3.PercentageComment = "from last week"
    card3.ZDepth = ABM.ZDEPTH_2
    page.Cell(4,1).AddComponent(card3.ABMComp)

The cards have a click event that you can assign to your code for more execution..

Sub card1_click(value As Map)
    Dim valuex As String = value.GetDefault("value","")
    page.Msgbox("",valuex,"card","OK",False,"","")
End Sub

Sub card2_click(value As Map)
    Dim valuex As String = value.GetDefault("value","")
    page.Msgbox("",valuex,"card","OK",False,"","")
End Sub

Sub card3_click(value As Map)
    Dim valuex As String = value.GetDefault("value","")
    page.Msgbox("",valuex,"card","OK",False,"","")
End Sub

 

[joulongleu]

very nice and How to use mashTable?

 

[Mashiane]

very nice and How to use mashTable?

That is still work in progress...

 

[prajinpraveen]

Nice one. question : is there a way to change the width of the card?

Edit:

CSS helped

 

[Anser]

Nice one. question : is there a way to change the width of the card?

Edit:

CSS helped

Would you mind sharing the solution to increase/decrease the size (Width/Height) of the Card. I mean the CSS file that is to be altered. I am very much new to the CSS and its concepts

Hope that there will be some way to control the width from the CLASS itself without modifying the CSS file

 

[prajinpraveen]

apologies for the delayed response

These are the changes i made.

Sub HTML as string

    Element.AddClass("card")
    Element.AddClass("cardwidth25")
    Element.AddClass(Theme)
    Element.AddClass("gradient-shadow")

....
....

CSS

.cardwidth25 {
width:23.8%;
margin-left: .85%;
color:#ffffff; 
}