# 3-Column Dashboard Widgets

## Overview

The block includes six common dashboard widgets for displaying metrics, a chart, progress, and recent activities.

![](https://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MXYLxDKnvZtSr9dH8zy%2F-MXYQSC703Pm0f0GEh2v%2Fdashboard.png?alt=media\&token=7f2f0c23-8e4a-48b7-9b72-301889dfae4b)

## 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 six widget groups:
  * **Group main progress bar tile** contains progress bars with labels
  * **Group main chart tile** contains a Bubble chart element for displaying graphs
  * **Group main table tile** contains a 3-row repeating group to display an activity feed or a list of related transactions
  * **Group main progress bar with images tile** contains progress bars with images and labels
  * **Group main metric with breakdown tile** and **Group main metrics tile** both contain various text elements for displaying metrics
* 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 progress bar widgets

* 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-MXYLxDKnvZtSr9dH8zy%2F-MXYTo-h3INdJSCpWsGi%2FScreen%20Shot%202021-04-05%20at%2012.20.53%20PM.png?alt=media\&token=52d6d219-ff1d-433f-ab10-6961a2ae71a0)

* 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)

## How to set up the chart widget

* 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-MXYLxDKnvZtSr9dH8zy%2F-MXYUSw1Ei69beDluMnP%2FScreen%20Shot%202021-04-05%20at%2012.23.48%20PM.png?alt=media\&token=bf32f1d4-fbea-4b71-86ec-cd71df6423e2)

## How to set up the table widget

* Update the data source of **RepeatingGroup Dummy**
* Update the text elements in the repeating group so they are referencing current cell's data's \[field]

![](https://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MXYLxDKnvZtSr9dH8zy%2F-MXYUsnETdgAnuABNuI5%2FScreen%20Shot%202021-04-05%20at%2012.25.37%20PM.png?alt=media\&token=5717f080-3c6f-466c-b19c-bf1928f1dc4f)

## How to set up the metrics widgets

* 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-MXYLxDKnvZtSr9dH8zy%2F-MXYVdQo-jYLBCUGxwm6%2FScreen%20Shot%202021-04-05%20at%2012.28.53%20PM.png?alt=media\&token=6f1886e3-8e5a-4b77-adbe-6e3f75c8c732)

## 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-MXYLxDKnvZtSr9dH8zy%2F-MXYWXCgY29BEXIXydut%2FScreen%20Shot%202021-04-05%20at%2012.31.08%20PM.png?alt=media\&token=d7a94bdc-fd7e-48db-b752-25fb9c903eb5)