| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <style> |
| rect { |
| /*fill: None;*/ |
| stroke: #aaa; |
| } |
| </style> |
| <title>Hello</title> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
| <script src="draper.activity_logger-2.1.1.js"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script> |
| </head> |
| <body> |
| <div id="canvas"></div> |
| <div> |
| <p>Mouse over elements to simulate user actions.</p> |
| <p>You should be able to see these coming through real time on the Kibana server.</p> |
| <p>Also, if you open the JavaScript console, you should see the logs going out.</p> |
| </div> |
| <script> |
| var activies = [ |
| 'activiy-A', |
| 'activiy-B', |
| 'activiy-C', |
| 'activiy-D', |
| 'activiy-E', |
| 'activiy-F', |
| 'activiy-G' |
| ] |
| var colors = d3.scale.category10() |
| var svg = d3.select('#canvas').append('svg') |
| .attr({'w': 200, 'h': 200}); |
| |
| svg.selectAll('rect') |
| .data(d3.range(400)) |
| .enter() |
| .append('rect') |
| .attr({ |
| x: function(d) { return d%20*10; }, |
| y: function(d) { return Math.floor(d/20)*10; }, |
| fill: function(d) { return colors(d%7); }, |
| height: 10, |
| width: 10, |
| }) |
| .on('mouseover', function(d) { |
| ac.logUserActivity( |
| 'description', // description |
| activies[d%activies.length], // activity_code |
| d%7 // workflow State |
| ); |
| }) |
| |
| |
| var worker = "draper.activity_worker-2.1.1.js" |
| var ac = new activityLogger(worker) |
| .testing(false) // simulate POST, won't send log |
| .echo(true) // log to console |
| .mute(['SYS']); // don't log SYSTEM actions |
| |
| ac.registerActivityLogger( |
| "http://192.168.86.100", |
| "my-component", |
| "v0.1" |
| ); |
| |
| ac.logUserActivity( |
| 'User hovered over element to read popup', // description |
| 'hover_start', // activity_code |
| ac.WF_EXPLORE // workflow State |
| ); |
| </script> |
| </body> |
| </html> |
