Difference between revisions of "Widget:GraphInteractivity"
m (update color state (experimental)) |
m (wait, milisecond interval makes no sense -> second) |
||
| (2 intermediate revisions by the same user not shown) | |||
| Line 9: | Line 9: | ||
<nowiki>{{#widget:</nowiki>{{PAGENAME}}<nowiki>}}</nowiki> | <nowiki>{{#widget:</nowiki>{{PAGENAME}}<nowiki>}}</nowiki> | ||
| + | (supported field for SpaceAPI is <code>interval</code> | ||
This will add javascript logic that enables 'interactivity' to graphs.<br/> | This will add javascript logic that enables 'interactivity' to graphs.<br/> | ||
| Line 22: | Line 23: | ||
var g_coloredNodes; | var g_coloredNodes; | ||
| + | var g_interval = <!--{$interval|validate:int|default:0}-->; | ||
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" ] ]; | ||
| Line 37: | Line 39: | ||
} ); | } ); | ||
| − | + | if ( g_interval ) | |
| − | + | { | |
| + | setInterval( fetchState, g_interval * 1000 ); | ||
| + | fetchState( ); | ||
| + | } | ||
} ); | } ); | ||
| Line 125: | Line 130: | ||
var powerstrip = document.querySelector( "g#" + _powerConsumption.name + ">polygon+text" ); | var powerstrip = document.querySelector( "g#" + _powerConsumption.name + ">polygon+text" ); | ||
if ( powerstrip ) | if ( powerstrip ) | ||
| − | powerstrip.textContent = "strip " + | + | powerstrip.textContent = "strip " + _powerConsumption.value + _powerConsumption.unit; |
var color; | var color; | ||
| − | if ( | + | if ( _powerConsumption.value < 5 ) |
color = "lightgray"; | color = "lightgray"; | ||
| − | else if ( | + | else if ( _powerConsumption.value < 10 ) |
color = "green"; | color = "green"; | ||
| − | else if ( | + | else if ( _powerConsumption.value < 100 ) |
color = "lightgreen"; | color = "lightgreen"; | ||
| − | else if ( | + | else if ( _powerConsumption.value < 200 ) |
color = "yellow"; | color = "yellow"; | ||
| − | else if ( | + | else if ( _powerConsumption.value < 1000 ) |
color = "orange"; | color = "orange"; | ||
else | else | ||
Latest revision as of 17:13, 4 February 2019
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}}
(supported field for SpaceAPI is interval
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.
