Discovery Tips&Tricks #2 - Reproduce the WarpStudio Plot view

Here is a simple way to reproduce the Plot dataview of WarpStudio in a Discovery dashboard.

If you are new to Discovery, read this page before this article.

Principles

The WarpStudio's plot view is composed of 3 charts: annotation, line, and map.

In this article, I will cover only annotation and line. Both charts share their time bounds in order to compute the overall timespan. The line chart sends its left margin to the annotation chart.

Discovery Tips&Tricks #1: synchronize zoom and focus
Discovery Tips&Tricks #3: Build a form
Discovery Tips&Tricks #4: Production-ready!

The easiest way to achieve synchronization of bounds and annotations' left margin is to use special events:

For time bounds:

 { 'tags' [ 'chart1' ] 'type' 'bounds' }

And for the left margin:

{ 'tags' [ 'chart1' ] 'type' 'margin' }

For this sample, we generate random GTS. The reference timestamp, is passed as a variable.

Dashboard definition

At first, we have to define a gts variable that holds our random GTS list.

NOW 'now' STORE
{
  'title' 'My Plot'
  'cellHeight' 90
  'vars' { 'now' $now  }
   'tiles' [  ]
}

From datasets to dashboard: Covid Tracker built with Warp 10 and Discovery

Tiles definition

A first tile will emit events for the second and listen to events coming from the other one:

{
    'x' 0 'y' 0 'w' 12 'h' 1
    'type' 'annotation'
    'options' {
        'eventHandler' 'type=(bounds|zoom|focus|margin),tag=chart1' // listen at events on a channel called chart1
    }
    'macro' <%
        // random GTS
        NEWGTS 'g' STORE
        1 10 <% 'i' STORE  $g [ $now $i STU * - T ] ADDVALUE DROP  %> FOR
        {
            'data' $g
            'events' [
                { 'tags' [ 'chart2' ] 'type' 'zoom' } // emits its zoom level
                { 'tags' [ 'chart2' ] 'type' 'focus' } // emits its focus timestamp
            ]
        }
    %>
}

Same principle for the second tile:

{
    'x' 0 'y' 1 'w' 12 'h' 4
    'type' 'line'
    'options' {
        'eventHandler' 'type=(zoom|focus),tag=chart2' // listen at events on a channel called chart2
    }
    'macro' <%
        // random GTS
        NEWGTS 'g' STORE
        -5 15 <% 'i' STORE $g [ $now $i STU * - RAND ] ADDVALUE DROP %> FOR
        {
            'data' $g
            'events' [
                { 'tags' [ 'chart1' ] 'type' 'zoom' } // emits its zoom level
                { 'tags' [ 'chart1' ] 'type' 'focus' } // emits its focus timestamp
                { 'tags' [ 'chart1' ] 'type' 'margin' } // emits its left margin
                { 'tags' [ 'chart1' ] 'type' 'bounds' } // emits its time bounds
            ]
        }
    %>
}

All together: https://snapshot.senx.io/0005de432b9123cc-0-7-7837be775b314364

Used WarpScript functions
NEWGTS, STU, RAND, ADDVALUE, FOR

The result

NOW 'now' STORE { 'title' 'My Plot' 'cellHeight' 90 'vars' { 'now' $now } 'tiles' [ { 'x' 0 'y' 0 'w' 12 'h' 1 'type' 'annotation' 'options' { 'eventHandler' 'type=(bounds|zoom|focus|margin),tag=chart1' } 'macro' <% NEWGTS 'g' STORE 1 10 <% 'i' STORE $g [ $now $i STU * - T ] ADDVALUE DROP %> FOR { 'data' [ $g ] 'events' [ { 'tags' [ 'chart2' ] 'type' 'zoom' } { 'tags' [ 'chart2' ] 'type' 'focus' } ] } %> } { 'x' 0 'y' 1 'w' 12 'h' 4 'type' 'line' 'options' { 'eventHandler' 'type=(zoom|focus),tag=chart2' } 'macro' <% NEWGTS 'g' STORE -5 15 <% 'i' STORE $g [ $now $i STU * - RAND ] ADDVALUE DROP %> FOR { 'data' $g 'events' [ { 'tags' [ 'chart1' ] 'type' 'zoom' } { 'tags' [ 'chart1' ] 'type' 'focus' } { 'tags' [ 'chart1' ] 'type' 'margin' } { 'tags' [ 'chart1' ] 'type' 'bounds' } ] } %> } ] }

Discover more articles and tutorials about Discovery.

→ Discovery Tips&Tricks #3: Build a form