THE POWER OF NOW.

SWIM transforms fast data into big insights – entirely at the edge – using compute resources on existing edge devices. SWIM software analyzes and learns from edge data on-the-fly to deliver real-time insights and predictions. This site introduces you the developer to the core concepts of SWIM, some UI components, and how to get started with SWIM.

UNLEASH YOUR DATA.

SWIM UI components are designed to visualize streaming data as its created, in real-time. Pie charts, time series graphs, and KPIs will all fluctuate as data changes, so you can build dynamic real-time experiences around your streaming data.

Component - Pie
@pie { transition: @transition(1000, linear) host: 'wss://developer.swim.services:5620' node: 'service/1' data1: @link(lane: 'latest0', type: value) data2: @link(lane: 'latest0', type: value) @wedge { value: $max(0.1, $data1.foo) label: @text($percent($value, $total)) legend: @text([pedCall {$round( $eager($value) )}]) arcColor: '#76816b' } @wedge { value: $max(0.1, $data1.bar) label: @text($percent($value, $total)) legend: @text([phase/state {$round( $eager($value) )}]) arcColor: '#76816b' } @wedge { value: $max(0.1, $data1.baz) label: @text($percent($value, $total)) legend: @text([detector/state {$round( $eager($value) )}]) arcColor: '#88e828' } @wedge { value: $max(0.1, $data2.foo) label: @text($percent($value, $total)) legend: @text([intersection/history {$round( $eager($value) )}]) arcColor: '#76816b' } }
  • HTML
  • Recon

NOW INSIGHTS.

Your KPIs show what matter most to your application users. So why show them old data? SWIM KPIs will always show your users the freshest possible data, streamed directly from the source. Combine SWIM UI components to build custom layouts that show your data in context. It’s all about the truth of your data now!

COMPONENTS - KPI & CHARTS
@kpi { # Global Value host: 'wss://developer.swim.services:5620' node: 'service/1' history: @link(lane: 'history0', type: map) current: @link(lane: 'latest0', type: value) transition: @transition(1000, linear) primaryColor: '#fcb237' # Kpi Value id: kpi title: @text([CPU Usage]) subtitle: @text([{$round($eager($current.foo/300 * 100 ))}%]) value: @text([{$round($eager(300 - $current.foo)) || 0}]) valueSize: 48 @px label: @text([MB]) meter: $current.foo/300 cylinderColor: '#8c8575' pistonColor: $primaryColor backgroundColor: '#fff' padding: 8 @px # Chart component @chart { id: chart @plot(type: line) { lineColor: $primaryColor @each(t: $history.*:) { key: $t @plotPoint { v: @let($history.($t)) x: $t y: $v.foo dy: 0 } } } top: { gutter: '0px' } right: { gutter: '15px' } bottom: @axis(type: time) { gutter: '0px' hidden: true } left: @axis(type: linear) { gutter: '15px' hidden: true } } }
  • HTML
  • Recon

LET’S DIVE IN!

Want to learn how to SWIM? Whether you’re looking to test the waters or take the plunge, let’s dive in and take a deeper look at how SWIM works. Click “Next” at the bottom of the page to download SWIM code, learn SWIM concepts, and get started exploring the depths of SWIM UI components.

REAL-TIME DATA STREAM
@div(){ style: { max-height: '300px' overflow: hidden margin-bottom: '25px' } data1: @link(host: 'wss://developer.swim.services:5620', node: 'service/1', lane: 'history0', type: map) @each(t: $data1.*:) { @p { v: @let($data1.($t)) @text([\{ $key: {$t}, $value: \{ foo: {$eager($v.foo)}, bar: {$eager($v.bar)}, baz: {$eager($v.baz)} \} \}]) } } }
  • HTML
  • Recon