Sum

This widget shows the total sum of a column over all entries. It respects filters/searches and updates itself accordingly.

Example Configuration

{
  "type": "sum",
  "title": "ARR",
   "filter": [
              {
                  "subject": "status",
                  "requestType": "i",
                  "type": "array",
                  "operator": "any_of",
                  "value": [
                      "293227"
                  ]
              }
  ], 
  "config": {
      "field": "arr",
      "decimal": true,
      "decimalPlaces": {
          "min": 2,
          "max": 2
      },
      "prefix": "$",
      "suffix": "",
      "numberFormat": "default",
      "primaryFilter": [
          {
              "subject": "start-date",
              "requestType": "i",
              "type": "date",
              "operator": "on_or_after",
              "value": {
                  "relative": true,
                  "type": "minus_years",
                  "value": 1
              }
          }
      ],
        "secondaryFilter": [
      {
          "subject": "start-date",
          "requestType": "i",
          "type": "date",
          "operator": "within",
          "value": {
              "from": {
                  "relative": true,
                  "type": "minus_years",
                  "value": 2
              },
              "to": {
                  "relative": true,
                  "type": "minus_years",
                  "value": 1
              }
          }
      }
  ],
  "secondaryValueDisplay": "function({ primaryValue, secondaryValue, formatNumber }){let color= 'grey'; let icon = 'fa-solid fa-arrow-right-long'; if(primaryValue > secondaryValue){color = 'green'; icon='fa-duotone fa-arrow-trend-up'} else if(primaryValue < secondaryValue){color='red'; icon='fa-duotone fa-arrow-trend-down'} const number = ((primaryValue - secondaryValue) / secondaryValue) * 100; console.log('test: ', primaryValue, secondaryValue, number); return {value: `${formatNumber(number, 'en-AU', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}% vs last year`,icon,color,size: 'sm'}}"
  }
}

Let's break down each component of the configuration:

Options	Details
`type`	The type, always `grouped-count`.
`title`	The title of the widget to show.
`filter`	A Clevero filter array. Use this to filter results from both `primaryFilter` and `secondaryFilter`.
`field`	The internal ID of the field on this record to perform the average calculation over.
`prefix`	Text to display before the number.
`suffix`	Text to display after the number.
`decimal`	Whether or not to use decimal places. If `false` or not set, the value will be rounded to the nearest integer.
`decimalPlaces`	The minimum and maximum number of decimal places to show.
`numberFormat`	It formats the output number to have commas. By default, it is en-US, but you can also have values like en-AU, de-DE, en-IN, etc.
`primaryFilter`	A Clevero filter array. Use this to filter results for primary values of the widget.
`secondaryFilter`	A Clevero filter array. Use this to filter results for secondary values of the widget.
`defaultStyle`	`icon`: The font awesome icon to use. `color`: The colour to render the icon. `textColor`: The colour to render the count number. If omitted, the count is black. `labelColor`: The colour to render the label. If omitted, the count is black. `labelSize`: The font size to render the label. `labelWeight`: The font-weight to render the label. `labelOrientation`: The orientation of the label associated with the element. Such as `top`, `bottom`, `left`, and `right`. `labelAlign`: The alignment of the label relative to the element. Such as `top`, `bottom`, `left`, `right`, and `center`.
`secondaryValueDisplay`	The primary and secondary values or calculations are based on these values.

📌 Need Help?

If you require assistance or encounter any issues, please don't hesitate to contact us for further support.