@senx/discovery-plot
TypeScript icon, indicating that this package has built-in type declarations

0.0.4 • Public • Published

Discovery Plot

Usage

In a Web Environment

With NPM/Yarn

$ npm install @senx/discovery-plot

With CDN

<script nomodule src="https://unpkg.com/@senx/discovery-plot/dist/discovery-plot/discovery-plot.js"></script>
<script type="module" src="https://unpkg.com/@senx/discovery-plot/dist/discovery-plot/discovery-plot.esm.js"></script>

Usage

<html>
<head>
  <title>Test</title>
</head>
<body>
<discovery-plot url="https://warp.senx.io/api/v0/exec">
  1 4 <% DROP NEWGTS 'g' STORE
  1 10 <% 'ts' STORE $g $ts RAND + STU * NOW + NaN NaN NaN RAND ADDVALUE DROP %> FOR
  $g %> FOR
</discovery-plot>
<script nomodule src="https://unpkg.com/@senx/discovery-plot/dist/discovery-plot/discovery-plot.js"></script>
<script type="module" src="https://unpkg.com/@senx/discovery-plot/dist/discovery-plot/discovery-plot.esm.js"></script>
</body>
</html>

Configuration

discovery-tile

This Web component displays a Tile based upon a WarpScript (or FLoWS). The WarpScript is executed when the tile renders.

Property Attribute Type Default Description
debug debug boolean false Enable debug messages
options options Param / string new Param() Serialized JSON options (see Params below)
type type line, area, scatter, step-area, spline-area, spline, step, step-after, step-before, annotation, bar, display, image, map, gauge, linear-gauge, circle, pie, plot, doughnut, rose, tabular, svg Chart type
url url string undefined exec url of your Warp 10 endpoint or Mobius WebSocket endpoint
lang lang warpscript, flows warpscript Language used
chartTitle chart-title string undefined Title of the Tile, not mandatory, could be overridden by the dashboard definition (see Dashboard Definition below).
result result DataModel / string Execution result
<discovery-plot url="https://warp.senx.io/api/v0/exec">
  1 4 <% DROP NEWGTS 'g' STORE
  1 10 <% 'ts' STORE $g $ts RAND + STU * NOW + NaN NaN NaN RAND ADDVALUE DROP %> FOR
  $g %> FOR
</discovery-plot>

Params / Options

Options inherit from higher level. options

Name Type Default Description
type string Chart type (line, area, scatter, step-area, spline-area, spline, step, step-after, step-before, annotation, bar, display, image, map, gauge, linear-gauge, circle, pie, plot, doughnut, rose, tabular, svg, input:text, input:list, input:secret, input:autocomplete, input:slider, input:date, input:date-range, button)
timeMode string 'date' date, timestamp or custom
timeZone string 'UTC' Timezone
timeUnit string 'us' Warp 10 time unit (us, ms, ns)
scheme string 'WARP10' Color scheme (COHESIVE, COHESIVE_2, BELIZE, VIRIDIS, MAGMA, INFERNO, PLASMA, YL_OR_RD, YL_GN_BU, BU_GN, WARP10, NINETEEN_EIGHTY_FOUR, ATLANTIS, DO_ANDROIDS_DREAM, DELOREAN, CTHULHU, ECTOPLASM, T_MAX_400_FILM )
showLegend boolean false Display the chart legend
fullDateDisplay boolean false Display full date on the XAxis
unit string Unit to be displayed
bgColor string Background color of tiles
datasetColor string Only for the param field in execution result. Color of the trace
fontColor string Font color in tiles
borderColor string Border color in tiles
showLegend boolean false Display chart legend
responsive boolean true Responsive charts
showRangeSelector boolean false Display the skyline below line or area charts
autoRefresh number -1 if positive value, will refresh with a request each autoRefresh second for http requests, milliseconds for WebSocket
showErrors boolean true Display errors if any
showStatus boolean true Display the Warp 10 execution status
expandAnnotation boolean false Expand annotations
scheme string 'WARP10' Color scheme ( COHESIVE, COHESIVE_2, BELIZE, VIRIDIS, MAGMA, INFERNO, PLASMA, YL_OR_RD, YL_GN_BU, BU_GN, WARP10, NINETEEN_EIGHTY_FOUR, ATLANTIS, DO_ANDROIDS_DREAM, DELOREAN, CTHULHU, ECTOPLASM, T_MAX_400_FILM, MATRIX, CHARTANA)
eventHandler string 'type=Regexp,tag=Regexp' Only applies on Tiles and Dashboard. See the events chapter below

Common CSS vars

Name Default
--gts-classname-font-color #004eff
--gts-labelname-font-color #19A979
--gts-attrname-font-color #ED4A7B
--gts-separator-font-color #a0a0a0
--gts-labelvalue-font-color #000000
--gts-attrvalue-font-color #000000
--warp-view-font-color #000000
--warp-view-bg-color transparent

Specific charts configuration and CSS styles

Event Description Type
draw CustomEvent<void>

line, area, scatter, spline-area, step-area, spline, step, step-after, step-before

Name Default
--warp-view-chart-label-color #8e8e8e
--warp-view-chart-grid-color #8e8e8e
Name Type Description
data GTS, GTS[], custom data Data to display, numeric GTS only
globalParams Option Global options (see above) concerning this tile, including chat type
params Option[] List of options (see above) concerning each displayed dataset depending of the index of this array
events Events[] List of events to emit (see below)

Supported option per series are:

  • datasetColor: Hex CSS color of the series. ie: '#fff00f'
  • type: Chart type (line, area, scatter, step-area, spline-area, spline, step, step-after, step-before)
  • xAxis: In case of multi-X axis support, represents the index of related axis.
  • yAxis: In case of multi-Y axis support, represents the index of related axis.
1 4 <% 
  DROP NEWGTS 'g' STORE
  1 30 <% 
    'ts' STORE 
    $g $ts RAND + STU * NOW + NaN NaN NaN RAND ADDVALUE DROP 
  %> FOR
$g %> FOR STACKTOLIST 'data' STORE
{ 
  'data' $data 
  'params' [ 
    { 'datasetColor' '#dc3545' 'xAxis' 0 }
    { 'datasetColor' '#ff9900' 'xAxis' 0 }
    { 'type' 'area' 'datasetColor' '#90d743' 'xAxis' 1 }
    { 'datasetColor' 'white' 'xAxis' 0 }
  ]
}  

Custom data for line and scatter only:

<% [ 0 10 <% DROP [ RAND 10 * 5 -   RAND 10 * 5 - ] %> FOR ] %> 'rand' STORE
  {
    'title' 'Test'
    'globalParams' { }
    'data' [
      { 'label' 'A' 'values' @rand }
      { 'label' 'B' 'values' @rand }
    ]
  }

annotation

Name Default
--warp-view-chart-label-color #8e8e8e
--warp-view-chart-grid-color #8e8e8e
Name Type Description
data GTS, GTS[] Data to display, non-numeric GTS only
globalParams Option Global options (see above) concerning this tile
params Option[] List of options (see above) concerning each displayed dataset depending of the index of this array
events Events[] List of events to emit (see below)

Supported option per series are:

  • datasetColor: Hex CSS color of the series. ie: '#fff00f'

bar

Name Default
--warp-view-chart-label-color #8e8e8e
--warp-view-chart-grid-color #8e8e8e
Name Type Description
data GTS, GTS[], custom data Data to display
globalParams Option Global options (see above) concerning this tile
params Option[] List of options (see above) concerning each displayed dataset depending of the index of this array
events Events[] List of events to emit (see below)

Supported option per series are:

  • datasetColor: Hex CSS color of the series. ie: '#fff00f'
  • bar
    • horizontal: Bar chart orientation
    • stacked
Custom data:
{
  "title": "Test",
  "columns":  [ "A", "B", "C", "D" ],
  "rows": [
    [ "label X", 15, 56, 44, 22 ],
    [ "label Y", 1, 5, 4, 2 ],
    [ "label Z", 14, 45, 78, 12 ]
  ]
}

display

Name Type Description
data number, string, custom data Data to display
globalParams Option Global options (see above) concerning this tile
params Option[] List of options (see above) concerning each displayed dataset depending of the index of this array
events Events[] List of events to emit (see below)
  • Option.timeMode:
    • date: convert the value into an ISO date.
    • duration: convert the value to a human-readable duration.
    • custom: display value as is, including HTML.
Custom Data Samples:
{ 'data' 42 'globalParams' { 'timeMode' 'custom' } }
{ 'data' NOW 'globalParams' { 'timeMode' 'date' } }
{ 'data' NOW 5 s - 'globalParams' { 'timeMode' 'duration' } }
{
  'data' '<a href="https://warp10.io/" target="_blank">Warp 10</a>'
  'globalParams' { 'bgColor' '#f57f17' 'fontColor' '#bc5100' 'timeMode' 'custom' }
}
{
  'data' { 'text' 'SenX.io' 'url' 'https://senx.io' }
  'globalParams' { 'bgColor' '#f57f17' 'fontColor' '#bc5100' }
}

map

Name Type Description
data GTS, GTS[], custom data Data to display
globalParams Option Global options (see above) concerning this tile
params Option[] List of options (see above) concerning each displayed dataset depending of the index of this array
events Events[] List of events to emit (see below)
Custom data:
  • string[]: considered as GEOJson
  • GTS[]: considered as Path
Options
Name Type Description
tiles string[] List of custom tile layers
mapType string Base tile layer (NONE, DEFAULT, HOT, TOPO, TOPO2, STADIA, STADIA_DARK, TONER, TONER_LITE, TERRAIN, ESRI, SATELLITE, OCEANS, GRAY, GRAYSCALE, WATERCOLOR, CARTODB, CARTODB_DARK)
startLat number Initial latitude position
startLong number Initial longitude position
startZoom number Initial zoom level
maxNativeZoom number Maximum zoom number the tile source has available. If it is specified, the tiles on all zoom levels higher than maxNativeZoom will be loaded from maxNativeZoom level and auto-scaled.
maxZoom number The maximum zoom level up to which this layer will be displayed (inclusive).
Params:

Render dots without lines:

{
  'key' 'bases'
  'render' 'dots'
  "color" "#f44336"
  "line" false
}

Render weighted dots:

{
  'key' 'sightings'
  'render' 'weightedDots'
  "color" "#31C0F6cc"
  "borderColor" "#31C0F6"
  "maxValue" 100
  "minValue" 0
}

Gauge, circle

Name Default
--warp-view-chart-label-color #8e8e8e
--warp-view-chart-grid-color #8e8e8e
Name Type Description
data GTS, GTS[], custom data Data to display
globalParams Option Global options (see above) concerning this tile
params Option[] List of options (see above) concerning each displayed dataset depending of the index of this array
events Events[] List of events to emit (see below)
Params
Name Type Description
maxValue number Max value for gauge

linear-gauge

Name Default
--warp-view-chart-label-color #8e8e8e
--warp-view-chart-grid-color #8e8e8e
Name Type Description
data GTS, GTS[], custom data Data to display
globalParams Option Global options (see above) concerning this tile
params Option[] List of options (see above) concerning each displayed dataset depending of the index of this array
events Events[] List of events to emit (see below)
Options
Name Type Description
gauge.horizontal boolean Gauge orientation
Params
Name Type Description
maxValue number Max value for gauge

pie, doughnut, rose

Name Default
--warp-view-chart-label-color #8e8e8e
--warp-view-chart-grid-color #8e8e8e
Name Type Description
data GTS, GTS[], custom data Data to display
globalParams Option Global options (see above) concerning this tile
params Option[] List of options (see above) concerning each displayed dataset depending of the index of this array
events Events[] List of events to emit (see below)
Custom data:

{ 'key':string 'value':number }[]

Demo

npm run dev

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 0.0.4
    0
    • latest

Version History

  • Version
    Downloads (Last 7 Days)
    • Published
  • 0.0.4
    0
  • 0.0.3
    0
  • 0.0.2
    0
  • 0.0.1
    0

Package Sidebar

Install

npm i @senx/discovery-plot

Homepage

warp10.io/

Weekly Downloads

0

Version

0.0.4

License

Apache-2.0

Unpacked Size

19.4 MB

Total Files

143

Last publish

Collaborators

  • xavmarin
  • giwi
  • pi-r-p