# 3-Column Dashboard Widgets

## Overview

The block includes three common dashboard widgets for displaying metrics, a chart, and a table of recent activities.

![](https://576109535-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-LvLGdYH113NIZ5I_gRB%2F-LvMmvCh3Eub40TWr3jC%2FScreen%20Shot%202019-12-05%20at%2012.41.05%20PM.png?alt=media\&token=02e804a9-5418-4585-9312-a5bab1e2a95b)

![](https://576109535-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-LvLGdYH113NIZ5I_gRB%2F-LvMcWcU9Gq1vr3BwvY-%2FScreen%20Shot%202019-12-05%20at%2011.55.38%20AM.png?alt=media\&token=1381739e-0001-44a7-aee7-2be81882a736)

## 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 three groups:
  * ***Group Inner metric*** contains a formatted text element for displaying numbers,  dollar amounts ($100.3k, $2.5m, and $12.23B), or star ratings
    * ***Dropdown month*** is hidden by default. You should use the dropdown if you want to display data from different time periods
    * ***Text number*** displays the amount increase or decrease from a defined time period
    * **Group Inner star rating** is hidden by default and contains a star icon. You should use this when you want to display overall star rating instead of dollar amounts
    * ***Text rating*** is hidden by default and displays the star rating increase or decrease from a defined time period
  * ***Group Inner chart*** contains a Bubble chart element for displaying graphs
  * ***Group Inner feed*** contains a table for displaying recent activities
    * ***RepeatingGroup Table*** displays the content (set to Dummy data for now)
* ***Button Add*** is hidden by default. To unhide it, you can remove the hiding rule on ***Group Inner header button*** from the Bubble responsive editor.

## How to set up the numbers widget

* Update the data source of ***Group Inner metrics content\_number*** (type: number). 
* To format the main display text as a number, remove both conditional statements

![](https://576109535-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-LvLGdYH113NIZ5I_gRB%2F-LvMdiZFj49cbqUNswR-%2FScreen%20Shot%202019-12-05%20at%2012.00.46%20PM.png?alt=media\&token=18bfcae3-874f-4c25-854c-c2a76d572b53)

* To format the main display text as a dollar amount, remove the first conditional statement for *This url is empty*
* To format the display text as a star rating, remove the second conditional statement and modify the first statement to *This url is not empty*
  * Hide ***Text number***
  * Unhide ***Text rating*** and ***Group Inner star rating***

## How to set up the chart widget

* Update the data source of the Bubble chart element

![](https://576109535-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-LvLGdYH113NIZ5I_gRB%2F-LvMnAJ1_RudYZ6-T2yt%2FScreen%20Shot%202019-12-05%20at%2012.41.55%20PM.png?alt=media\&token=527ed297-47af-4b02-bc96-aa25d970bb32)

## How to set up the table widget

* Update the data source of ***RepeatingGroup Table***

![](https://576109535-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-LvLGdYH113NIZ5I_gRB%2F-LvMnM5FNwvKF9DopqKs%2FScreen%20Shot%202019-12-05%20at%2012.42.56%20PM.png?alt=media\&token=aa691c6c-5fd9-499e-9efc-b5e67a15ad98)