Skip to main content Link Menu Expand (external link) Document Search Copy Copied

Dashboards

Dashboards allow you to design a layout for data and datasets in your workspace. These are fully customizable and render custom HTML and CSS, letting you format them as required.

You can create dashboards of your datasets in the Matataika app, by defining a few settings and then providing your dashboard content in your workspace’s workspace.yml file.

Example workspace.yml: 

version: workspaces/v0.1
default_environment: dev
app_properties:
  WELCOME_DATASET_ALIAS: welcome
  DASHBOARD_PAGE_TITLE: Data Observability Dashboard
  DASHBOARD_CONTENT: |-
    <div style={{'display':'flex', 'padding-bottom': '30px', 'justify-content': 'center'}}>
        <div style={{'border-right': '2px solid #D3D3D3'}}>
            <h2>Test results breakdown</h2>
            <DatasetChart alias="data-observability/test-results-breakdown"/>
        </div>
        <div>
            <h2>Tables health</h2>
            <DatasetLink alias="data-observability/table-health-breakdown">
                <DatasetChart alias="data-observability/tables-health" />
            </DatasetLink>
        </div>
    </div>
  APP_MENU_ITEMS: |-
    [
      {"name": "dashboard", "faIcon": "chart-bar", "label": "Dashboard"},
      {"name": "explore", "faIcon": "hashtag", "label": "Explore"},
      {"name": "channels", "faIcon": "database", "label": "Channels"},
      {"name": "library", "faIcon": "list", "label": "Library"},
      {"name": "starred", "faIcon": "star", "label": "Starred"},
      {"name": "help", "faIcon": "question-circle", "label": "Help"}
    ]
default_data_store: Warehouse
dataset_paths:
  - analyze/datasets
  - .meltano/analyze/datasets
channel_paths:
  - analyze/channels
pipeline_paths:
  - pipelines
plugin_paths:
  - plugins
data_store_paths:
  - datastores

Dashboard Settings

Note that these settings are nested under app_properties.

Setting Description
DASHBOARD_PAGE_TITLE Dashboard page title
DASHBOARD_CONTENT Your dashboard content as HTML
APP_MENU_ITEMS Currently you have to provide an override for all pages showing in the app, including your new dashboard page.

A list of faIcons for your Dashboard can be found here: FontAwesome Icons v5. You can use any free icons as your dashboard icon, or to change the icon of an existing page.

Dashboard Components

DatasetChart

Allows you to choose any dataset in your workspace by its alias, and render it on your dashboard.

Prop Type Description Required Default
alias String The dataset alias to fetch for render If dataset not specified  
dataset Object The dataset to render If alias not specified  
showTable Boolean Show the dataset data as a table No false

DatasetData

Allows you to render custom JSX in the context of a dataset and its data.

Prop Type Description Required Default
alias String The dataset alias to fetch for render If dataset not specified  
dataset Object The dataset to render If alias not specified  
render Function The JSX content to render (args: dataset, data) Yes  

Wraps elements or text and create an internal link to a dataset in your workspace (no page reload).

Prop Type Description Required Default
alias String The dataset alias Yes  

Back

Renders a back button.

DownloadDataset

Download a dataset from the workspace.

Prop Type Description Required Default
alias String The dataset alias to fetch for render If dataset not specified  
dataset Object The dataset to render If alias not specified  
tooltip String The text displayed on hover No Download {dataset title OR dataset alias}

DownloadResource

Download a resource from the workspace.

Prop Type Description Required Default
path String The resource path Yes  
tooltip String The text displayed on hover No Download {path}