Skip to main content

Define a panelled visual

In this tutorial, you will use panel() to visualise a tabular datastream. You will

  • define a panel container using panel(), and
  • launch a solution and observe the results.

This lesson will assume that you have an empty project and asset which you can to deploy to a workspace named 03_07_05_define_a_panelled_visual with the following command:

edk template deploy -ycw 03_07_05_define_a_panelled_visual

Define and deploy a template

To use the panel() methods you will first perform the following steps:

  1. define a datasource using a similar pattern as your previous My Source definition.
  2. set the value of based on some generated data of type Map<string, { date: Date, category: string, value: bigint }>() value.
  3. add the datasource to a template

In an asset, perform the above steps to create the resulting Typescript code:

import { SourceBuilder, Template } from "@elaraai/core"

const my_source = new SourceBuilder("My Source")
    .value({
        value: new Map(Array.from({ length: 100 }).map((_, index) => (
            [`${index}`, {
                date: new Date(new Date().valueOf() + index * 3600 * 1000),
                category: `category ${index % 4}`,
                value: BigInt(Math.round(200 * Math.sin(Math.PI * index / 100))),
            }]
        )))
    })

export default Template(my_source)

Define a panel

You can define a panel layout to contain one or more layouts using the panel() method of LayoutBuilder(), by taking the following steps:

  1. add a new layout "My Layout"
  2. add a panel to the layout using the panel() method with a 'row' orientation
  3. add layouts using the PanelBuilder methods
    1. add a basic table() to occupy 40% of the row
    2. add a basic vega() to occupy 60% of the row
  4. add the new layout to the template

In the definition My Layout add the above changes:

import { SourceBuilder, Template, LayoutBuilder } from "@elaraai/core"

const my_source = new SourceBuilder("My Source")
    .value({
        value: new Map(Array.from({ length: 100 }).map((_, index) => (
            [`${index}`, {
                date: new Date(new Date().valueOf() + index * 3600 * 1000),
                category: `category ${index % 4}`,
                value: BigInt(Math.round(200 * Math.sin(Math.PI * index / 100))),
            }]
        )))
    })

const my_layout = new LayoutBuilder("My Layout")
    .panel('row', builder => builder
        .table(40, "My Table", builder => builder
            .fromStream(my_source.outputStream())
            .columns()
        )
        .vega(60, "My Chart", builder => builder
            .view(builder => builder
                .fromStream(my_source.outputStream())
                .scatter({
                    x: builder => builder.value(fields => fields.date).sort('ascending'),
                    y: builder => builder.value(fields => fields.value),
                })
            )
        )
    )

export default Template(my_source, my_layout);
Panel size

The total "size" of a panel must equal 100, the EDK CLI will perform this check during compilation.

Nested panels

A panel is able to contain almost all visual types, including panels, allowing you to create nested panels.

Navigate to the layout URL located within the tenant you deployed to see your panel:

workspaces/03_07_05_define_a_panelled_visual/layouts/My%20Layout/

Observe results

If you do not have access to Elara, the results of the above are shown below:

Example solution

The code for this tutorial is available below:

Next steps

In this tutorial, you ..., in the next lesson you will ...

On this page