# 4-Column Dashboard Widgets

## Overview

The block includes eight common dashboard widgets for displaying metrics, charts, progress bars, and recent activities.

![](https://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MXYWZGk94QtZIS-14Kt%2F-MXZBg8XxmyGSBKYzlZD%2FScreen%20Shot%202021-04-05%20at%203.40.18%20PM.png?alt=media\&token=9a0c84ec-3a0f-47f1-8406-6bd5bac5b9db)

## Structure

* When this block is added to a page, it is placed within a group called **Blocks container 860 (do not rename)** on the page. This group contains the responsive settings for all blocks.
* This block contains four main groups:
  * **Group Responsive metric and chart**
    * **Group Inner standard metric tile** contains text elements for displaying metrics
    * **Group Inner chart container** contains a Bubble chart element for displaying graphs
  * **Group Responsive metric and progress bar**
    * **Group Inner metrics container** contains text elements for displaying multiple metrics
    * **Group Inner progress bar chart container** contains a progress bar and text element 
  * **Group Responsive small metrics and chart** and **Group Responsive small metrics and progress bar** contain smaller versions of the aforementioned widgets
* This block also includes a reusable element that you can customize:
  * [**filters\_template**](https://docs.airdev.co/canvas-pages-and-modules/v/3.0.0/reusables/applyfilters)

## How to set up standard metrics widgets

* Update the data source of the group

![](https://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MXYWZGk94QtZIS-14Kt%2F-MXZShxznC0xSMl_KUxZ%2FScreen%20Shot%202021-04-05%20at%204.55.28%20PM.png?alt=media\&token=df20809f-e397-48bc-9a10-d7e57f2f432a)

* Update the conditional statements on 'Text number'
  * These conditional statements are used to format the text to display a decrease, increase, or no change in the numbers.

![](https://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MXYWZGk94QtZIS-14Kt%2F-MXZT0qCyD20P9QRO7J7%2FScreen%20Shot%202021-04-05%20at%204.56.42%20PM.png?alt=media\&token=84ac5838-cd8c-4bce-80cb-edda8e381da6)

![](https://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MXYWZGk94QtZIS-14Kt%2F-MXZSo1NyHLzn-PFNnJg%2FScreen%20Shot%202021-04-05%20at%204.56.04%20PM.png?alt=media\&token=6db8f695-2765-4202-bc5d-05cffc08e1a1)

## How to set up the chart widgets <a href="#how-to-set-up-the-chart-widget" id="how-to-set-up-the-chart-widget"></a>

* Update the data source of the Bubble chart element

![](https://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MXYWZGk94QtZIS-14Kt%2F-MXZTrX0qMP4WBG9MVHp%2FScreen%20Shot%202021-04-05%20at%205.00.46%20PM.png?alt=media\&token=3af01310-5e22-4333-920e-8882358bc9e2)

## How to set up the metrics widgets <a href="#how-to-set-up-the-metrics-widgets" id="how-to-set-up-the-metrics-widgets"></a>

* Update the data sources of all text elements within the group

![](https://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MXYWZGk94QtZIS-14Kt%2F-MXZc_UKMs3kf5q7sgM8%2FScreen%20Shot%202021-04-05%20at%205.42.16%20PM.png?alt=media\&token=3d52f1d5-8a55-401a-b0e8-f74139116b91)

## How to set up progress bar widgets

* Update the data source of the group

![](https://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MXYWZGk94QtZIS-14Kt%2F-MXZdzRgnS1Lz6Ff0ImG%2FScreen%20Shot%202021-04-05%20at%205.43.39%20PM.png?alt=media\&token=23c004b7-c1b0-4c24-9390-53878fc0c582)

* All progress bar elements are Bubble elements that can dynamically display a percentage:

![](https://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MXYWZGk94QtZIS-14Kt%2F-MXZe7I8-vY0GUF8mk8N%2FScreen%20Shot%202021-04-05%20at%205.49.55%20PM.png?alt=media\&token=c51dd30d-f55e-4ca8-a30b-10b682e52581)

* For example, if you would like to display which percentage of revenue comes from a specific source (e.g., Shopify), you can set that progress bar's "Percentage" data source to be that dynamic expression (e.g., \[Shopify Revenue numeric value]/\[Total Revenue numeric value])

![](https://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MXYLxDKnvZtSr9dH8zy%2F-MXYTzkL3R5mk1B0a9CS%2FScreen%20Shot%202021-04-05%20at%2012.21.35%20PM.png?alt=media\&token=be6f83e0-2e2c-4a53-ba2f-c3b7948236dd)

## Other updates

* Each widget group includes a primary action button
* To use, please remember to add a workflow to the button.
* To hide, please select ***Group responsive primary action container*** and uncheck the box for *This element is visible on page load*.

![](https://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MXZf2E53ywvYSow6lUi%2F-MXZf90fV_Id7chpzbEh%2FScreen%20Shot%202021-04-05%20at%205.54.28%20PM.png?alt=media\&token=09447882-ec47-4b57-823b-bf14513b22cf)