Graph

Description

Display a various kind of graph.

Attributes

tile:graph-circle
title
type: circle-donut | circle-pie | square-icon. Indicate graph type.
body: [Array of object] Render the content inside the graphs this is only for square-icon | circle-donut
- component: Any html tag like p, small, div etc...
- text: Provide a text to show inside the component also allow template string
- rows: Provide a number of rows to display number of icons in rows
- columns: Provide a number of columns to display number of icons in columns
- classes: Component classes
- styles: Component styles
rewrite: Rewriting of styles based on dispatches data [Array object] target: Define a target as "styles" template: Provide a template string to rewrite the style *to: Provide path to which we want rewriting the styles
classes
styles
stroke: Provide a Stroke color [only for circle-pie charts]
strokeWidth: Provide a Stroke Width [only for circle-pie charts]
size: [Object Only for circle-pie charts]
- width: Width of pie chart
- height: Height of pie chart
data: [Objects] Provide a data for the pie charts
- columns: [Array of objects]
- title: title for the data
- values: values for the data
- colors: [Object] Provide a colors based on the title of data for pie pieces
showLegend: true | false. Display legend or not. [only for circle-pie charts]
showTooltip: true | false. Display tooltip or not. [only for circle-pie charts]
showLabel: true | false. Show label on charts or not. [only for circle-pie charts]
connect: [Connection objects]
- Standards fields
reduce: [Additional Connection Field related configuration]

Example1

Type = Circle-Pie

{
  "tile": "graph-circle",
  "type": "circle-pie",
  "stroke": "#E9ECBE",
  "strokeWidth": "5px",
  "size": {
    "width": 200,
    "height": 200
  },
  "data": {
    "columns": [
      [
        "data1",
        "{values.donations}"
      ],
      [
        "data2",
        "{values.protect}"
      ],
      [
        "data3",
        "{values.restore}"
      ]
    ],
    "colors": {
      "data1": "#FE7300",
      "data2": "#E9ECBE",
      "data3": "#000000"
    }
  },
  "showLegend": false,
  "showTooltip": false,
  "showLabel": false,
  "classes": {
    "root": "text-center lichen-arc-path"
  },
  "condition": "user is admin"
}

Example2

Type = Square-icon

{
  "tile": "graph-circle",
  "type": "square-icon",
  "body": [
    {
      "component": "i",
      "icon": "icon wemori-money",
      "rows": 3,
      "columns": 3,
      "styles": {
        "fontSize": "3.1rem"
      }
    },
    {
      "component": "p",
      "text": "You have contributed",
      "styles": {
        "fontSize": "1rem",
        "fontWeight": 600
      }
    },
    {
      "component": "p",
      "text": "{values.brazil + values.mexico|numeral:0,0}",
      "styles": {
        "fontSize": "3rem",
        "fontFamily": "Noir Pro, sans-serif",
        "fontWeight": 600,
        "marginTop": "8px"
      }
    }
  ],
  "styles": {
    "squareWrapper": {
      "height": "100%",
      "width": "100%",
      "color": "#FE7300"
    },
    "contentWrapper": {
      "height": "240px",
      "background": "#E9ECBE",
      "borderRadius": "0",
      "border": "4px solid #FE7300",
      "lineHeight": "2.1rem",
      "margin": "0px 30px",
      "padding": "28px 0px",
      "alignItems": "center",
      "display": "flex",
      "flexDirection": "column"
    }
  },
  "classes": {
    "root": "px-2",
    "title": "pt-0",
    "widget": "pt-4"
  },
  "condition": "user is admin"
}

Example3

Type = Circle-donut

{
  "tile": "graph-circle",
  "type": "circle-donut",
  "body": [
    {
      "component": "div",
      "text": "{data.protect|numeral:0,0.0}",
      "styles": {
        "fontSize": "3rem",
        "fontWeight": "bolder",
        "flex": "0 0 2.5rem",
        "marginTop": "1.5rem"
      }
    },
    {
      "component": "div",
      "text": "🌳 trees",
      "styles": {
        "flex": "0 0 2.5rem"
      }
    }
  ],
  "rewrite": [
    {
      "target": "styles",
      "template": "linear-gradient(90deg, #E9ECBE 20%, transparent 20%), linear-gradient(-54deg, #E9ECBE 20%, #FE7300 20%)",
      "to": "radialProgressBar.backgroundImage"
    }
  ],
  "classes": {
    "radialProgressBar": "justify-content-center align-items-center d-flex",
    "contentWrapper": "justify-content-center align-items-center d-flex",
    "contentBox": "align-items-center d-flex flex-column"
  },
  "styles": {
    "donutWrapper": {
      "width": "100%",
      "justifyContent": "center",
      "alignItems": "center",
      "display": "flex",
      "color": "#E9ECBE",
      "marginTop": "5px",
      "marginBottom": "4px"
    },
    "radial": {
      "height": "202px",
      "width": "202px",
      "borderRadius": "50%",
      "background": "#FE7300",
      "justifyContent": "center",
      "alignItems": "center",
      "display": "flex"
    },
    "radialProgressBar": {
      "width": "190px",
      "borderRadius": "50%",
      "height": "190px",
      "display": "flex",
      "background": "#FE7300",
      "position": "relative",
      "backgroundImage": "linear-gradient(90deg, #E9ECBE 50%, transparent 50%), linear-gradient(-54deg, #E9ECBE 50%, #FE7300 50%)"
    },
    "contentWrapper": {
      "width": "178px",
      "height": "178px",
      "borderRadius": "50%",
      "background": "#E9ECBE"
    },
    "contentBox": {
      "width": "160px",
      "height": "160px",
      "borderRadius": "50%",
      "background": "#FE7300"
    },
    "contenTitle": {
      "fontSize": "60px",
      "fontWeight": "bolder",
      "marginBottom": "-1rem"
    },
    "circleLeft": {
      "fill": "none",
      "stroke": "#FE7300",
      "strokeWidth": "8px",
      "r": "120"
    },
    "circleFront": {
      "fill": "none",
      "stroke": "#FE7300",
      "strokeWidth": "15px",
      "strokeDasharray": "0 999",
      "strokeDashoffset": "0px",
      "transition": "stroke-dasharray 0.7s linear 0s",
      "r": "110"
    },
    "circleRight": {
      "fill": "none",
      "stroke": "#FE7300",
      "strokeWidth": "8px",
      "r": "100"
    }
  },
  "condition": "data.protect > 0"
}