add example (#4)

* add browser example * add node metric example
signalfx · Aug 1, 2024 · a8fd40a · a8fd40a
1 parent ac7c08a
commit a8fd40a
Show file tree

Hide file tree

Showing 5 changed files with 244 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -180,6 +180,26 @@ The signalflow client can be built for use in a browser.
 
    Once loaded, a global ``signalfx`` object is available in the browser. Note that the built file only includes the SignalFlow package.
 
+#### Browser Usage Example using D3
+
+First ensure your current working directory is the root of the repository clone.
+
+Make the following changes to example/index.html:
+
+```
+replace 'ACCESS_TOKEN' with your own token.
+replace 'cpu.utilization' with an appropriate metric as necessary.
+```
+
+Execute the following commands:
+
+```
+$ npm install
+$ node example/server.js
+```
+
+Finally, open http://localhost:8888/example/index.html
+
 ## License
 
 Apache Software License v2 © [Splunk](https://www.splunk.com)
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,141 @@
+<html>
+  <head>
+    <script src="../build/signalflow.js" type="text/javascript"></script>
+    <script src="http://d3js.org/d3.v3.min.js"></script>
+
+    <style>
+      body {
+        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+      }
+
+      .graph .axis {
+        stroke-width: 1;
+      }
+
+      .graph .axis .tick line {
+        stroke: black;
+      }
+
+      .graph .axis .tick text {
+        fill: black;
+        font-size: 0.7em;
+      }
+
+      .graph .axis .domain {
+        fill: none;
+        stroke: black;
+      }
+
+      .graph .group {
+        fill: none;
+        stroke: black;
+        stroke-width: 1.5;
+      }
+      </style>
+  </head>
+  <body>
+    <div class="graph"></div>
+    <script>
+      var limit = 10,
+        duration = 10000,
+        animDuration = 500,
+        now = new Date(Date.now() - duration);
+
+      var width = 500,
+        height = 200;
+
+      var groups = {};
+
+      var x = d3.time.scale()
+        .domain([now - (limit - 2), now - duration])
+        .range([0, width]);
+
+      var y = d3.scale.linear()
+        .domain([0, 100])
+        .range([height, 0]);
+
+      var line = d3.svg.line()
+        .interpolate('basis')
+        .x(function(d, i) {
+          return x(now - (limit - i) * duration)
+        })
+        .y(function(d) {
+          return y(d)
+        });
+
+      var svg = d3.select('.graph').append('svg')
+        .attr('class', 'chart')
+        .attr('width', width)
+        .attr('height', height + 50);
+
+      var axis = svg.append('g')
+        .attr('class', 'x axis')
+        .attr('transform', 'translate(0,' + height + ')')
+        .call(x.axis = d3.svg.axis().scale(x).orient('bottom'));
+
+      var paths = svg.append('g');
+
+      function addGroup (name) {
+        var group = groups[name];
+        group.path = paths.append('path')
+          .data([group.data])
+          .attr('class', name + ' group')
+          .style('stroke', group.color);
+      }
+
+      function tick() {
+        now = new Date();
+
+        // Shift domain
+        x.domain([now - limit * duration, now - duration]);
+
+        // Slide x-axis left
+        axis.transition()
+          .duration(animDuration)
+          .ease('linear')
+          .call(x.axis);
+
+        // Slide paths left
+        paths.attr('transform', null)
+          .transition()
+          .duration(animDuration)
+          .ease('linear')
+          .attr('transform', 'translate(' + x(now - limit * duration) + ')');
+          //.each('end', tick);
+
+        for (var name in groups) {
+          var group = groups[name];
+          group.data.shift()
+        }
+      }
+
+      var token = 'ACCESS_TOKEN';
+
+      var sfxClient = signalfx.streamer.SignalFlow(token);
+
+      var j1 = sfxClient.execute({
+        program: "data('cpu.utilization').publish()",
+        start: Date.now() - 10*10000,
+        resolution: 10000
+      });
+
+      j1.stream(function (err, data) {
+        if(!err) {
+          if ( data.type === signalfx.streamer.CONSTANTS.MESSAGE_TYPES.METADATA ) {
+            data.data = d3.range(limit).map(function() {
+              return 0;
+            });
+            groups[data.tsId] = data;
+            addGroup(data.tsId);
+          } else if ( data.type === signalfx.streamer.CONSTANTS.MESSAGE_TYPES.DATA) {
+            data.data.forEach(function (datapoint) {
+              groups[datapoint.tsId].data.push(datapoint.value);
+              groups[datapoint.tsId].path.attr('d', line);
+            });
+            tick();
+          }
+        }
+      });
+    </script>
+  </body>
+</html>
diff --git a/example/metric.js b/example/metric.js
@@ -0,0 +1,38 @@
+'use strict';
+
+var signalflow = require('../');
+
+var token = process.env['SPLUNK_ACCESS_TOKEN'];
+var realm = process.env['SPLUNK_REALM'] || 'us0';
+
+var sfxClient = new signalflow.SignalFlow(token, {
+  signalflowEndpoint: 'wss://stream.' + realm + '.signalfx.com',
+  apiEndpoint: 'https://api.' + realm + '.signalfx.com'
+});
+
+function receive() {
+  var program = "data('cpu.utilization').publish()";
+  console.log('signalflow: ', program);
+
+  var handle = sfxClient.execute({
+    program: program,
+    start: Date.now() - 60000,
+    stop: Date.now() + 60000,
+    resolution: 10000,
+    immediate: false,
+  });
+
+  handle.stream(function (err, data) {
+    if (err) {
+      console.log(err);
+      return;
+    }
+
+    if (data.type === 'data') {
+      data.data.forEach(function (dataPoint) {
+        console.log('value received: ', dataPoint);
+      });
+    }
+  });
+}
+receive();
diff --git a/example/server.js b/example/server.js
@@ -0,0 +1,43 @@
+var http = require("http"),
+    url = require("url"),
+    path = require("path"),
+    fs = require("fs"),
+    port = process.argv[2] || 8888;
+
+http.createServer(function(request, response) {
+
+  var uri = url.parse(request.url).pathname
+    , filename = path.join(process.cwd(), uri);
+
+  console.log(uri);
+  if(uri !== '/example/index.html' && uri !== '/build/signalflow.js') {
+    response.writeHead(500, {"Content-Type": "text/plain"});
+    response.end();
+    return;
+  }
+  fs.exists(filename, function(exists) {
+    if(!exists) {
+      response.writeHead(404, {"Content-Type": "text/plain"});
+      response.write("404 Not Found\n");
+      response.end();
+      return;
+    }
+
+    if (fs.statSync(filename).isDirectory()) filename += '/index.html';
+
+    fs.readFile(filename, "binary", function(err, file) {
+      if(err) {
+        response.writeHead(500, {"Content-Type": "text/plain"});
+        response.write(err + "\n");
+        response.end();
+        return;
+      }
+
+      response.writeHead(200);
+      response.write(file, "binary");
+      response.end();
+    });
+  });
+}).listen(parseInt(port, 10));
+
+console.log("Static file server running at\n  => http://localhost:" + port + "/\nCTRL + C to shutdown");
diff --git a/package-lock.json b/package-lock.json