Skip to content

ProgressBlock

Description

Display the progress indicator block based on dispatches data.

Attributes

  • tile:progress-block
  • title
  • body: Display content inside the block also allow to template string
  • chart: True | false.To show a progress block or not.
  • rewrite: Rewriting the style based on dispatches or dataSource data
  • classes: classes for the root and widget container.
  • styles: styles for the root,chart,widget,inner container.

Example1

{
  "tile": "progress-block",
  "title": "Progress Block tile testing",
  "chart": true,
  "body": "10% Increement",
  "classes": {
    "widget": "text-left font-size-120 font-weight-bold",
    "root": "px-2"
  },
  "styles": {
    "chart": {
      "border": "5px solid #111C45",
      "marginBottom": "5px",
      "padding": "5px 5px",
      "width": "100%",
      "position": "relative",
      "borderRadius": "5px",
      "textTransform": "uppercase",
      "color": "#111C45",
      "fontFamily": "\"Noir Pro Bold\", sans-serif"
    },
    "inner": {
      "backgroundColor": "#111C45",
      "color": "#fff",
      "width": "10%",
      "padding": "5px 5px",
      "position": "absolute",
      "left": 0,
      "top": 0,
      "overflow": "hidden",
      "margin": "-1px",
      "height": "calc(100% - -2px)"
    }
  }
}

Example2

 {
  "tile": "progress-block",
  "body": "{data.completion} Funded",
  "chart": true,
  "classes": {
    "widget": "text-left font-size-120 font-weight-bold",
    "root": "px-2"
  },
  "rewrite": [
    {
      "target": "styles",
      "template": "{data.completion}",
      "to": "inner.width"
    }
  ],
  "styles": {
    "chart": {
      "border": "5px solid #111C45",
      "marginBottom": "5px",
      "padding": "5px 5px",
      "width": "100%",
      "position": "relative",
      "borderRadius": "5px",
      "textTransform": "uppercase",
      "color": "#111C45",
      "fontFamily": "\"Noir Pro Bold\", sans-serif"
    },
    "inner": {
      "backgroundColor": "#111C45",
      "color": "#fff",
      "width": "10%",
      "padding": "5px 5px",
      "position": "absolute",
      "left": 0,
      "top": 0,
      "overflow": "hidden",
      "margin": "-1px",
      "height": "calc(100% - -2px)"
    }
  }
}