Reusable Components in Canvas Dashboard

Introduction

With Canvas Dashboard, you can define reusable visuals and components within the dashboard. This doc goes through a simple example to demonstrate the reusability capability.

The Setup

Let’s say you have a dashboard with the following syntax:

Dashboard {
  // metadata
  title: 'My Canvas Dashboard'
  description: 'My new canvas dashboard'

  // collection of blocks
  block t1: TextBlock {
    content: @md
      Hello world
    ;;
  }

  block f1: FilterBlock {
    type: 'field'
    label: 'User role'
    source: FieldFilterSource {
      dataset: 'tenant_user'
      field: ref('public_users', 'role')
    }
  }

  block v1: VizBlock {
    label: 'A pie chart'
    viz: PieChart {
      dataset: 'tenant_user'
      legend: ref('public_users', 'role')
      series {
        field {
          ref: ref('public_users', 'id')
          aggregation: 'sum'
        }
      }
    }
  }

  // layout
  view: CanvasLayout {
    width: 1200
    height: 1200
    margin: 10
    block f1 {
      position: pos(600, 0, 300, 70)
    }
    block v1 {
      position: pos(0, 70, 600, 600)
    }
  }
}

Reusing Block and Filters

You can reuse block and filter like so:

const myviz = VizBlock {
  label: 'A pie chart'
  viz: PieChart {
    dataset: 'tenant_user'
    legend: ref('public_users', 'role')
    series {
      field {
        ref: ref('public_users', 'id')
        aggregation: 'sum'
      }
    }
  }
}

const myfilter = FilterBlock {
  type: 'field'
  label: 'User role'
  source: FieldFilterSource {
    dataset: 'tenant_user'
    field: ref('public_users', 'role')
  }
}

Then you can create a new dashboard

Dashboard {
  title: 'My reused Dashboard'
...
  block f1: myfilter
  block v1: myviz
...
}

Parameterizing components

You can also use Func to parameterize your component, like so:

Func myvizBlockWithDataset(dataset: String) {
  VizBlock {
    label: 'A pie chart'
    viz: PieChart {
      dataset: dataset
      legend: ref('public_users', 'role')
      series {
        field {
          ref: ref('public_users', 'id')
          aggregation: 'sum'
        }
      }
    }
  }
}

and use it like this

Dashboard {
...
  block viz1: myvizBLockWithDataset('tenant_user')
...
}