Loading

Tips & tricks

Styling

You should hide inner WarpScript code and css vars as much as possible.

@import url('https://fonts.googleapis.com/css?family=Jura:300,400,500,600,700&subset=cyrillic,cyrillic-ext,latin-ext');

body {
    font-family: 'Jura', sans-serif;
    font-size       : 12px;
    line-height     : 1.52;
    background : fixed url(https://robertsspaceindustries.com/rsi/static/images/gridbg_glow.png), url(https://robertsspaceindustries.com/rsi/static/images/common/bg-stars-2560.jpg) repeat;
    color           : #FFFFFF;

    --wc-split-gutter-color            : #404040;
    --warp-view-pagination-bg-color    : #343a40 !important;
    --warp-view-pagination-border-color: #6c757d;
    --warp-view-datagrid-odd-bg-color  : rgba(255, 255, 255, .05);
    --warp-view-datagrid-odd-color     : #FFFFFF;
    --warp-view-datagrid-even-bg-color : #212529;
    --warp-view-datagrid-even-color    : #FFFFFF;
    --warp-view-font-color             : #FFFFFF;
    --warp-view-chart-label-color      : #FFFFFF;
    --gts-stack-font-color             : #FFFFFF;
    --warp-view-resize-handle-color    : #111111;
    --warp-view-chart-legend-bg        : #000;
    --gts-labelvalue-font-color        : #ccc;
    --gts-separator-font-color         : #FFFFFF;
    --gts-labelname-font-color         : rgb(105, 223, 184);
    --gts-classname-font-color         : rgb(126, 189, 245);
    --warp-view-chart-legend-color     : #FFFFFF;
    --wc-tab-header-color              : #FFFFFF;
    --wc-tab-header-selected-color     : #404040;
    --warp-view-tile-background        : #3A3C46;
}

.discovery-dashboard {
    color: transparent;
}

You can also use customStyles option's property to skin tiles. Here is a dark theme:

'options' {
  'scheme' 'CHARTANA'
  'customStyles' {
    '.discovery-tile'
    <'
        background-color: #3A3C4622;
        border-radius: 50px;
    '>
    
    '.discovery-dashboard-main' 
    <'
        font-size       : 12px;
        line-height     : 1.52;
        background: #404040 !important;
        color           : #FFFFFF;

        --wc-split-gutter-color            : #404040;
        --warp-view-pagination-bg-color    : #343a40 !important;
        --warp-view-pagination-border-color: #6c757d;
        --warp-view-datagrid-odd-bg-color  : rgba(255, 255, 255, .05);
        --warp-view-datagrid-odd-color     : #FFFFFF;
        --warp-view-datagrid-even-bg-color : #212529;
        --warp-view-datagrid-even-color    : #FFFFFF;
        --warp-view-font-color             : #FFFFFF;
        --warp-view-chart-label-color      : #FFFFFF;
        --gts-stack-font-color             : #FFFFFF;
        --warp-view-resize-handle-color    : #111111;
        --warp-view-chart-legend-bg        : #000;
        --gts-labelvalue-font-color        : #ccc;
        --gts-separator-font-color         : #FFFFFF;
        --gts-labelname-font-color         : rgb(105, 223, 184);
        --gts-classname-font-color         : rgb(126, 189, 245);
        --warp-view-chart-legend-color     : #FFFFFF;
        --wc-tab-header-color              : #FFFFFF;
        --wc-tab-header-selected-color     : #404040;
    '>
  }
}

Polymorphic Dashboards

{
  'title' 'My Polymorphic Dashboard'
    'tiles' <% 
      // dummy data
      NOW 'now' STORE
      [ 1 RAND 10 * ROUND <% 'i' STORE 
        NEWGTS 'data-' $i TOSTRING + RENAME 'g' STORE
        1 10 <% 'ts' STORE $g $now $ts STU * - NaN NaN NaN RAND ADDVALUE DROP %> FOR
        $g
      %> FOR ]
      <%
        'i' STORE
        'gts' STORE
        {
          'type' 'display' 'title' $gts NAME
          'w' 1 'h' 1 'x' $i 'y' 0
          'data' $gts VALUES REVERSE 0 GET 100 * ROUND 100.0 /
        }
      %> LMAP
     %>
    'options' {
      'autoRefresh' 3
    }
}
{
  'title' 'My Polymorphic Dashboard'
  'options' {
    'autoRefresh' 5
  }
  'tiles' <% 
    // dummy data
    NOW 'now' STORE
    [ 1 RAND 10 * ROUND <% 'i' STORE 
      NEWGTS 'data-' $i TOSTRING + RENAME 'g' STORE
      1 10 <% 'ts' STORE $g $now $ts STU * - NaN NaN NaN RAND ADDVALUE DROP %> FOR
      $g
    %> FOR ]
    <%
      'i' STORE
      'gts' STORE
      {
        'type' 'area' 'title' $gts NAME
        'w' 12 'h' 1 'x' 0 'y' $i
        'data' $gts 
      }
    %> LMAP
  %>
}

Zoom sync

{
     'title' 'My Dashboard with zoom sync'
     'tiles' [
        {
          'type' 'bar' 'x' 0 'y' 0 'w' 6 'h' 1
          'options' { 'eventHandler' 'type=zoom,tag=chart1' }
          'macro' <%
            NOW 'now' STORE
            [ 1 4 <% 'i' STORE 
              NEWGTS 'data-' $i TOSTRING + RENAME 'g' STORE
              1 10 <% 'ts' STORE $g $now $ts STU * - NaN NaN NaN RAND ADDVALUE DROP %> FOR
              $g
            %> FOR ] 'data' STORE
            {
              'data' $data
              'events' [
                { 'tags' [ 'chart2' ] 'type' 'zoom' }
              ]
            }
          %>
        }
        {
          'type' 'line' 'x' 6 'y' 0 'w' 6 'h' 1
          'options' { 'eventHandler' 'type=zoom,tag=chart2' }
          'macro' <%
            NOW 'now' STORE
            [ 1 4 <% 'i' STORE 
              NEWGTS 'data-' $i TOSTRING + RENAME 'g' STORE
              1 10 <% 'ts' STORE $g $now $ts STU * - NaN NaN NaN RAND ADDVALUE DROP %> FOR
              $g
            %> FOR ] 'data' STORE
            {
              'data' $data
              'events' [
                { 'tags' [ 'chart1' ] 'type' 'zoom' }
              ]
            }
          %>
        }
     ]
  }

Tiles AutoRefresh

{
  'tiles' [
    {
      'type' 'area' 'x' 0 'y' 0 'w' 12 'h' 1
      'options' { 'autoRefresh' 200 }
      'endpoint' 'wss://sandbox.senx.io/api/v0/mobius'
      'macro' <%
        NEWGTS 'data' RENAME 'gts' STORE
        NOW  'now' STORE
        $now 10 s - $now
        <% 200 ms + %>
        <%
          'i' STORE
          $i 1e-6 * SIN 'v' STORE
          $gts $i NaN NaN NaN $v ADDVALUE DROP
        %> FORSTEP
        $gts SORT
      %>
    }
  ]
}


Thresholds, Pieces and markers

{
  'tiles' [
    {
      'type' 'line' 'x' 0 'y' 0 'w' 12 'h' 1
      'options' { 'autoRefresh' 200 }
      'endpoint' 'wss://sandbox.senx.io/api/v0/mobius'
      'macro' <%
           1 2 <% 
              'i' STORE NEWGTS 'data-' $i TOSTRING + RENAME 'g' STORE
              1 100 <% 'ts' STORE $g $ts NaN NaN NaN RAND 100 * ADDVALUE DROP %> FOR
           $g %> FOR STACKTOLIST 'gts' STORE
           { 
             'data' $gts 
             'params' [
               {
                 'pieces' [
                   { 'color' '#77BE69' 'lte' 33 }
                   { 'color' '#ff9900' 'gte' 33 'lte' 66 }
                   { 'gte' 66 }
                  ]
                }
                { 'datasetColor' '#c6c6c6' }
             ]
             'globalParams' {
               'timeMode' 'timestamp'
               'markers' [
                 { 'start' 5 'value' 10 'color' '#77BE69' 'type' 'dotted' 'fill' true 'name' 'area 51' }
                 { 'value' 20 'color' '#ff9900' 'type' 'solid' }
                 { 'value' 30 'name' 'Hello' }
               ]
               'thresholds' [
                 { 'value' 25 'color' '#77BE69' 'fill' true }
                 { 'value' 50 'color' '#ff9900' }
                 { 'value' 75 'name' 'Danger' }
               ]
             }
          }
      %>
    }
  ]
}

{ 'tiles' [ { 'type' 'line' 'x' 0 'y' 0 'w' 12 'h' 1 'endpoint' 'https://sandbox.senx.io/api/v0/exec' 'macro' <% 1 2 <% 'i' STORE NEWGTS 'data-' $i TOSTRING + RENAME 'g' STORE 1 100 <% 'ts' STORE $g $ts NaN NaN NaN RAND 100 * ADDVALUE DROP %> FOR $g %> FOR STACKTOLIST 'gts' STORE { 'data' $gts 'params' [ { 'pieces' [ { 'color' '#77BE69' 'lte' 33 } { 'color' '#ff9900' 'gte' 33 'lte' 66 } { 'gte' 66 } ] } { 'datasetColor' '#c6c6c6' } ] 'globalParams' { 'timeMode' 'timestamp' 'markers' [ { 'start' 5 'value' 10 'color' '#77BE69' 'type' 'dotted' 'fill' true 'name' 'area 51' } { 'value' 20 'color' '#ff9900' 'type' 'solid' } { 'value' 30 'name' 'Hello' } ] 'thresholds' [ { 'value' 25 'color' '#77BE69' 'fill' true } { 'value' 50 'color' '#ff9900' } { 'value' 75 'name' 'Danger' } ] } } %> } ] }

Explore Discovery tutorials and blog posts on the blog