B4J Library [ABMaterial]: MashStats

Discussion in 'B4J Libraries & Classes' started by Mashiane, Nov 20, 2017.

  1. Mashiane

    Mashiane Expert Licensed User

    Hi y'all

    Play GIF

    Download Working Example

    Preview

    MashStats.png

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

    Code:
    Private card1 As MashStats
    Private card2 As MashStats
    Private card3 As MashStats
    And create the cards in ConnectPage...

    Code:
    '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..

    Code:
    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
     
    Anser, Don Oso, clarionero and 2 others like this.
  2. joulongleu

    joulongleu Member

    very nice and How to use mashTable?
     
  3. Mashiane

    Mashiane Expert Licensed User

    That is still work in progress...;)
     
    joulongleu likes this.
  4. prajinpraveen

    prajinpraveen Member Licensed User

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

    Edit:

    CSS helped
     
    Last edited: May 13, 2018
    joulongleu and Mashiane like this.
  5. Anser

    Anser Well-Known Member Licensed User

    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
     
    joulongleu likes this.
  6. prajinpraveen

    prajinpraveen Member Licensed User

    apologies for the delayed response

    These are the changes i made.

    Code:
    Sub HTML as string

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

    ....
    ....
    CSS
    Code:
    .cardwidth25 {
    width:
    23.8%;
    margin-left: 
    .85%;
    color:
    #ffffff
    }
     
    joulongleu, Anser and Mashiane like this.
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice