Skip to main content

Define a tabbed visual

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

  • define a tab container using tab(), 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_04_define_a_tabbed_visual with the following command:

edk template deploy -ycw 03_07_04_define_a_tabbed_visual

Define and deploy a template

To use the tab() 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 tab

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

  1. add a new layout "My Layout"
  2. add a tab to the layout using the tab() method
  3. add layouts using the TabBuilder methods
    1. add a basic table()
    2. add a basic vega()
  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")
    .tab(builder => builder
        .table("My Table", builder => builder
            .fromStream(my_source.outputStream())
            .columns()
        )
        .vega("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);

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

workspaces/03_07_04_define_a_tabbed_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 the next tutorial, you will use the panel() layout to contain multiple visualisations.

On this page