Difference between revisions of "Widget:GraphInteractivity"
m (document -> window (load event)) |
m (first attempt at space state update) |
||
| Line 16: | Line 16: | ||
(function( ) | (function( ) | ||
{ | { | ||
| − | + | "use strict"; | |
var g_graphs; | var g_graphs; | ||
| Line 23: | Line 23: | ||
window.addEventListener( "load", function()
{
g_graphs = document.querySelectorAll( "svg > g.graph" ); | window.addEventListener( "load", function()
{
g_graphs = document.querySelectorAll( "svg > g.graph" ); | ||
| − | g_coloredNodes = [ [ g_graphs[0].querySelector( "g#h4" ), "green" ] ]; | + | g_coloredNodes = [];//[ [ g_graphs[0].querySelector( "g#h4" ), "green" ] ]; |
g_graphs.forEach( function( _graph ) | g_graphs.forEach( function( _graph ) | ||
| Line 36: | Line 36: | ||
_graph.addEventListener( "mousedown", onMouseDown ); | _graph.addEventListener( "mousedown", onMouseDown ); | ||
} ); | } ); | ||
| + | |||
| + | setInterval( fetchState, 30000 ); | ||
| + | fetchState( ); | ||
} ); | } ); | ||
| Line 69: | Line 72: | ||
g_selectedNode = g_selectedNode.parentNode; | g_selectedNode = g_selectedNode.parentNode; | ||
decorateNodes( g_coloredNodes.concat( [ [g_selectedNode, "lightskyblue" ] ].reverse() ).reverse() ); | decorateNodes( g_coloredNodes.concat( [ [g_selectedNode, "lightskyblue" ] ].reverse() ).reverse() ); | ||
| + | } | ||
| + | |||
| + | function fetchState( ) | ||
| + | { | ||
| + | var xhr = new XMLHttpRequest( ); | ||
| + | if ( !!( "onload" in xhr ) ) | ||
| + | { | ||
| + | xhr.onreadystatechange = function( _event ) | ||
| + | { | ||
| + | if ( _event.target.readyState !== 4 ) | ||
| + | return; | ||
| + | if ( _event.target.status === 200 ) | ||
| + | _xhr_onload.apply( this, arguments ); | ||
| + | //else | ||
| + | //_xhr_onerror.apply( this, arguments ); | ||
| + | }.bind( this ); | ||
| + | } | ||
| + | else | ||
| + | { | ||
| + | // Modern xhr | ||
| + | xhr.onload = _xhr_onload.bind( this ); | ||
| + | //xhr.onerror = _xhr_onerror.bind( this ); | ||
| + | } | ||
| + | xhr.open( "GET", "//ackspace.nl/spaceAPI/", true ); | ||
| + | |||
| + | // Tells server that this call is made for ajax purposes. | ||
| + | // Most libraries like jQuery/Prototype/Dojo do this | ||
| + | xhr.setRequestHeader( "X-Requested-With", "XMLHttpRequest" ); | ||
| + | |||
| + | // No data needs to be sent along with the request. | ||
| + | xhr.send( null ); | ||
| + | }; | ||
| + | |||
| + | function _xhr_onload( _event ) | ||
| + | { | ||
| + | var data = {}; | ||
| + | try | ||
| + | { | ||
| + | data = JSON.parse( _event.target.responseText ); | ||
| + | } | ||
| + | catch( _e ) | ||
| + | { | ||
| + | } | ||
| + | |||
| + | if ( data && data.sensors && data.sensors.power_consumption ) | ||
| + | { | ||
| + | g_coloredNodes = []; | ||
| + | data.sensors.power_consumption.forEach( function( _powerConsumption ) | ||
| + | { | ||
| + | // value, unit, location, name, description | ||
| + | var powerstrip = document.querySelector( "g#" + _powerConsumption.name + ">polygon+text" ); | ||
| + | if ( powerstrip ) | ||
| + | powerstrip.textContent = "strip " + powerstrip.value + powerstrip.unit; | ||
| + | |||
| + | var color = "green"; | ||
| + | g_coloredNodes.push( document.querySelector( "g#" + _powerConsumption.name ), color ] ); | ||
| + | } ); | ||
| + | |||
| + | decorateNodes( g_coloredNodes.concat( [ [g_selectedNode, "lightskyblue" ], [ node, "lightsteelblue" ] ].reverse() ).reverse() ); | ||
| + | } | ||
} | } | ||
Revision as of 13:29, 29 May 2018
This widget allows you to display the Space API data (provided as JSON)
Created by Xopr
Using this widget
To insert this widget, use the following code:
{{#widget:GraphInteractivity}}
This will add javascript logic that enables 'interactivity' to graphs.
Copy to your site
To use this widget on your site, just install MediaWiki Widgets extension and copy full source code of this page to your wiki as Widget:GraphInteractivity article.
