WarpView Web components

WarpView dataviz

This is a collection of charting web components dedicated to Warp 10™. It affords you a way to build easily beautiful dashboards without too much code. An HTML knowledge is enough.

Web Components

A Web Component could be considered as an extension of the HTML vocabulary. It provides an efficient way to use “Widgets” for your web site.

You can use them to construct custom dashboards, whatever the Javascript framework you use (React, Angular, Vue, JQuery, …). It is designed to be integrated seamlessly with your technologies.

WarpView is used by our VSCode plugin.

Installation

$ npm i @senx/warpview --save
or
$ yarn add @senx/warpview
or
$ bower install senx-warpview --save
or
<script src="https://unpkg.com/@senx/warpview@1.0.24/dist/warpview.js"></script>
<html>
<head>
  <title>Test</title>
  <script src="node_modules/@senx/warpview/dist/warpview.js"></script>
</head>
<body>
  <warp-view-spinner />
</body>
</html>

Sample usage

WarpViewTile

This component aims to display a chart builded with Warp 10 data. You have to provide a WarpScript and the Warp 10 endpoint. WarpViewTile will send an Ajax request against Warp 10 and display the result. You can even choose the kind of graph.

This is the easiest way to display a WarpScript result: 

<warp-view-tile 
  url="warp 10 url" 
  responsive="true|false" 
  unit="your unit" 
  chart-title="your title"
  type="line|scatter|step|area|bubble|
        pie|gauge|doughnut|polar|radar|
        bar|text|image|plot"
  >
  << WarpScript goes here >>
</warp-view-tile>

For example:

<div style="height: 400px; width:100%"><warp-view-tile url="https://warp.senx.io/api/v0/exec" responsive="true" type="line">
[ NEWGTS
0 50 <% 
  'i' STORE 
  NOW $i -1 * ADDDAYS
  NaN NaN NaN RAND 10 * ADDVALUE 
%> FOR ]
</warp-view-tile></div>
[ NEWGTS 0 50 <% 'i' STORE NOW $i -1 * ADDDAYS NaN NaN NaN RAND 10 * ADDVALUE %> FOR ]

If you want a bar graph:

<div style="height: 400px; width:100%"><warp-view-tile url="https://warp.senx.io/api/v0/exec" responsive="true" type="bar">
[ NEWGTS
0 100 <% 
  'i' STORE 
  NOW $i -1 * ADDDAYS
  NaN NaN NaN RAND 10 * ADDVALUE 
%> FOR ]
</warp-view-tile></div>
[ NEWGTS 0 100 <% 'i' STORE NOW $i -1 * ADDDAYS NaN NaN NaN RAND 10 * ADDVALUE %> FOR ]

… or a map

<warp-view-tile url="https://warp.senx.io/api/v0/exec" responsive="true" type="map" chart-title="Map">
'{"geometry":{"coordinates":[[[[-105.00432014465332, 39.74732195489861], [-105.00715255737305, 39.7462000683517], [-105.00921249389647, 39.74468219277038], [-105.01067161560059, 39.74362625960105], [-105.01195907592773, 39.74290029616054], [-105.00989913940431, 39.74078835902781], [-105.00758171081543, 39.74059036160317], [-105.00346183776855, 39.74059036160317], [-105.00097274780272, 39.74059036160317], [-105.00062942504881, 39.74072235994946], [-105.00020027160645, 39.74191033368865], [-105.0007152557373, 39.74276830198601], [-105.00097274780272, 39.74369225589818], [-105.00097274780272, 39.74461619742136], [-105.00123023986816, 39.74534214278395], [-105.00183105468751, 39.74613407445653], [-105.00432014465332, 39.74732195489861]], [[-105.00361204147337, 39.74354376414072], [-105.00301122665405, 39.74278480127163], [-105.00221729278564, 39.74316428375108], [-105.00283956527711, 39.74390674342741], [-105.00361204147337, 39.74354376414072]]], [[[-105.00942707061768, 39.73989736613708], [-105.00942707061768, 39.73910536278566], [-105.00685214996338, 39.73923736397631], [-105.00384807586671, 39.73910536278566], [-105.00174522399902, 39.73903936209552], [-105.00041484832764, 39.73910536278566], [-105.00041484832764, 39.73979836621592], [-105.00535011291504, 39.73986436617916], [-105.00942707061768, 39.73989736613708]]]], "type":"MultiPolygon"}, "type":"Feature", "properties":{"desc":"This is the Auraria West Campus"}}' JSON->
</warp-view-tile>

See WarpViewTile Full documentation

Atomic components

You can use all those components alone with a WarpScript result:

<div style="width: 100%; height: 400px;">
    <warp-view-scatter unit="" responsive="true" data='{"data":[{"c":"A","l":{},"a":{},"v":[[1515678481382000,0],[1515678541388000,34344],[1515678601397000,33812],[1515678661402000,34086],[1515678721407000,33124],[1515678781413000,34364],[1515678841419000,35852],[1515678901425000,33229],[1515678961431000,33738],[1515679021436000,34802]]},{"c":"B","l":{},"a":{},"v":[[1515678431331000,0],[1515678491337000,34369],[1515678551343000,34498],[1515678611350000,34058],[1515678671356000,35378],[1515678731362000,35081],[1515678791368000,35294],[1515678851374000,33902],[1515678911380000,36927],[1515678971387000,34745]]},{"c":"C","l":{},"a":{},"v":[[1515678485202000,0],[1515678545209000,229409],[1515678605215000,214360],[1515678665222000,236297],[1515678725228000,264372],[1515678785235000,224437],[1515678845245000,245184],[1515678905251000,244450],[1515678965258000,243175],[1515679025264000,253690]]},{"c":"D","l":{},"a":{},"v":[[1515678481520000,0],[1515678541530000,0],[1515678601540000,0],[1515678661549000,0],[1515678721559000,0],[1515678781569000,0],[1515678841578000,0],[1515678901586000,0],[1515678961594000,0],[1515679021897000,0]]}]}' options="{}" ></warp-view-scatter>
</div>

Available components

Represent your thoughts
  • Tile: generic and versatile chart
  • Map: a map supporting path, spots and much more
  • DrillDown: explore data density
  • DataGrid: display tabular data
  • Annotation: put on a time axis textual or boolean events
  • Charts:
    • Line
    • Step
    • Area
    • Bubble
    • Scatter
    • Bar
    • Pie
    • Gauge
    • Doughnut
    • Polar
    • Radar
  • Image: display an image generated by the WarpScript processing library
  • Display: display a simple text or value generated by WarpScript.

Explore by yourself with the demo-site and build awesome dashboards. Let us know what you build with WarpView by sending us screenshot.

Share