Skip to content

Progress

Description

Display a progress box and progress bar

Attributes

  • tile=progress
  • title: Title to display
  • min: Provide a minimum value it should be greater than given date day
  • max: Provide a max value
  • length: Provide a number of day from start day to calculate a day
  • background: Background color for the progress box
  • start: Provide a start date for the day and percentage calculation.
  • match: [object]
    • pre: display message in the progress box if day length is 0
    • post: display message in the progress box if day length is greater than provided configuration length.
    • any key which matches the day calculation
    • active: if none of scenario matches then display message provided in this section.
  • scope: week | Day. Display Week and Day text in progress box based on configuration.

Example1

 {
  "tile": "progress",
  "progress": {
    "start": "Jun 4, 2021",
    "length": 28,
    "min": 3,
    "max": 5,
    "scope": "week",
    "background": "#e5ebf1",
    "match": {
      "active": "By Default active progress day $day"
    }
  }
}

Example2

{
    "tile": "progress",
    "progress": {
      "start": "Jun 4, 2021",
      "length": 24,
      "min": 3,
      "max": 5,
      "background": "#e5ebf1",
      "match": {
        "post": "Progress Steps $day",
      }
    }
}

Example3

{
  "tile": "progress",
  "progress": {
    "start": "Jun 30, 2021",
    "length": -1,
    "min": -1,
    "max": 2,
    "background": "#e5ebf1",
    "match": {
      "pre": "Pre Progress Steps $day",
      "active": "By Default active progress day $day"
    }
  }
}