Canvas Dashboards using Vega Lite

Along with Rill template charts, you can create your own custom components by using Vega Lite.

The three components that are required for a custom component using Vega Lite are:

1. type: component - defined on all component type YAML objects in Rill
2. data: - whether a metrics_sql or sql, your dashboard needs data
3. vega_lite: - where you will define the Vega Lite components and chart information

Let's create a few custom components for our Canvas dashboard

Let's start by creating a chart for our Canvas dashboard.

Creating a bar graph that calculates the top contributors to the Repository

Let's use the advanced_commits__model table to obtain our data.

Coming from Rill and ClickHouse course?

The advanced_commits_model file is created with the following contents, assuming you have already imported the data from the first page.

Click me for SQL

-- Model SQL
-- Reference documentation: https://docs.rilldata.com/reference/project-files/models
-- @materialize: true

WITH commit_file_stats AS (
    SELECT
        a.*,
        b.filename,
        b.added_lines,
        b.deleted_lines,
        REGEXP_EXTRACT(b.new_path, '(.*/)', 1) AS directory_path, 
    FROM
        commits__ a
    inner JOIN
        modified_files__ b
    ON
        a.commit_hash = b.commit_hash
)
SELECT
    author_date,
    author_name,
    directory_path,
    filename,
    STRING_AGG(DISTINCT commit_msg, ', ') AS commit_msg,

    COUNT(DISTINCT commit_hash) AS num_commits,
    SUM(added_lines) - SUM(deleted_lines) AS net_line_changes, 
    SUM(added_lines) + SUM(deleted_lines) AS total_line_changes, 

    -- (SUM(deleted_lines) / (SUM(added_lines) + SUM(deleted_lines))) as CodeDeletePercent, 
    sum(added_lines) as added_lines,
    sum(deleted_lines) as deleted_lines, 

FROM
    commit_file_stats
WHERE
    directory_path IS NOT NULL
GROUP BY 
    --directory_path, filename, author_name, author_date
    ALL
ORDER BY
    directory_path DESC 

Preparing the Data

In order to calculate the top contributors, we will need to grab the author_name and net_line_changes column. Then group by the author_name column and order by net_line_changes and finally filter the timeseries column, author_date and grab the top 5 users.

Click me for SQL

data:
  sql: |
    select     
      author_name,
      sum(net_line_changes) as net_lines
    from advanced_commits___model
    where author_date > '2024-07-21 00:00:00 Z'
    group by author_name
    order by net_lines desc
    limit 5 net_lines desc
    limit 5

Preparing the Visuals

Now that this is complete, we can create the vega_lite component. Depending on how you'd like to style your component, you can adjust the width, height, etc. However, a few components need to be set as follows:

• "data": { "name": "table" },
• define the encoding to contain x, and y with the field corresponding to the column from the SQL statement.
• type is set based on the data type

Click me for component

vega_lite: |
  {
    "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
    "data": { "name": "table" },
    "mark": "bar",
    "width": "container",
    "height": 500,
    "encoding": {
      "y": {
        "field": "author_name",
        "type": "nominal",
        "axis": { "title": "",
                  "orient": "left" }
      },
      "x": {
        "field": "net_lines",
        "type": "quantitative",
        "axis": { "title": "# of commits" }
      }
    }
  }

Custom Component Complete

With everything completed, you should have a YAML file with the following contents and a custom component that looks something like the following.

# Chart YAML
# Reference documentation: https://docs.rilldata.com/reference/project-files/charts
    
type: component

data:
  sql: |
    select     
      author_name,
      sum(net_line_changes) as net_lines
    from advanced_commits___model
    where author_date > '2024-07-21 00:00:00 Z'
    group by author_name
    order by net_lines desc
    limit 5
vega_lite: |
  {
    "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
    "data": { "name": "table" },
    "mark": "bar",
    "width": "container",
    "height": 500,
    "encoding": {
      "y": {
        "field": "author_name",
        "type": "nominal",
        "axis": { "title": "",
                  "orient": "left" }
      },
      "x": {
        "field": "net_lines",
        "type": "quantitative",
        "axis": { "title": "# of commits" }
      }
    }
  }

---

Was this content helpful?