@@ -26,5 +26,8 @@ Visage::Config.use do |c|
# Location of collectd's RRD - you may want to edit this!
c['rrddir'] = "/var/lib/collectd/rrd"
+
+ # whether to shade in graphs
+ c['shade'] = false
end
config/init.rb
@@ -18,6 +18,7 @@ var visageBase = new Class({
rows: 8,
topGutter: 50,
gridBorderColour: '#ccc',
+ shade: false,
secureJSON: false,
httpMethod: 'get'
},
@@ -149,7 +150,8 @@ var visageGraph = new Class({
width: 1.5,
axis: "0 0 1 1",
colors: this.colors,
- axisxstep: x.length / 20
+ axisxstep: x.length / 20,
+ shade: this.options.shade
});
this.addSelectionInterface();
@@ -160,15 +162,42 @@ var visageGraph = new Class({
this.buildLabels(this.graphLines, this.pluginInstanceNames, this.pluginInstanceDataSources, this.colors);
this.buildDateSelector();
- //this.buildEmbedder();
+ /* disabling this for now for dramatic effect
+ this.buildEmbedder();
+ */
},
buildEmbedder: function() {
- pre = new Element('textarea', {
+ var pre = new Element('textarea', {
'id': 'embedder',
'class': 'embedder',
- 'html': this.embedCode()
+ 'html': this.embedCode(),
+ 'styles': {
+ 'width': '500px',
+ 'padding': '3px'
+ }
+ });
+ this.embedderContainer.grab(pre);
+
+ var slider = new Fx.Slide(pre, {
+ duration: 200
});
- this.embedderContainer.grab(pre)
+
+ slider.hide();
+
+ var toggler = new Element('a', {
+ 'id': 'toggler',
+ 'class': 'toggler',
+ 'html': '(embed)',
+ 'href': '#',
+ 'styles': {
+ 'font-size': '0.7em',
+ }
+ });
+ toggler.addEvent('click', function(e) {
+ e.stop();
+ slider.toggle();
+ });
+ this.embedderTogglerContainer.grab(toggler);
},
embedCode: function() {
baseurl = "{protocol}//{host}".substitute({'host': window.location.host, 'protocol': window.location.protocol});
@@ -176,7 +205,7 @@ var visageGraph = new Class({
code += "<div id='graph'></div>"
code += "<script type='text/javascript'>window.addEvent('domready', function() { var graph = new visageGraph('graph', '{host}', '{plugin}', ".substitute({'host': this.options.host, 'plugin': this.options.plugin});
code += "{"
- code += "width: 900, height: 220, gridWidth: 800, gridHeight: 200, baseurl: '{baseurl}', embedded: true".substitute({'baseurl': baseurl});
+ code += "width: 900, height: 220, gridWidth: 800, gridHeight: 200, baseurl: '{baseurl}'".substitute({'baseurl': baseurl});
code += "}); });</script>"
return code.replace('<', '<').replace('>', '>')
},
@@ -221,6 +250,18 @@ var visageGraph = new Class({
},
buildContainers: function() {
+ this.embedderTogglerContainer = new Element('div', {
+ 'class': 'embedder-toggler container',
+ 'styles': {
+ 'float': 'right',
+ 'width': '20%',
+ 'text-align': 'right',
+ 'margin-right': '12px',
+ 'padding-top': '4px'
+ }
+ });
+ $(this.parentElement).grab(this.embedderTogglerContainer, 'top')
+
this.timescaleContainer = new Element('div', {
'class': 'timescale container',
'styles': {
@@ -299,6 +340,7 @@ var visageGraph = new Class({
$(this.labelsContainer).empty();
$(this.timescaleContainer).empty();
$(this.embedderContainer).empty();
+ $(this.embedderTogglerContainer).empty();
if ($defined(this.graph.selection)) {
this.graph.selection.remove();
}
public/javascripts/graph.js
@@ -29,6 +29,7 @@
height: 220,
gridWidth: 800,
gridHeight: 200,
+ shade: #{Visage::Config.shade || false},
pluginInstance: '#{plugin_instance || ''}',
name: '#{plugin} on #{host}'
});
views/index.haml
b74c10afb3256808e9bd8c0c6c8120113446dfb7
9c0e1cbd61bfbf853062fa3fbfa5fde06dad31a0
jf
jfs.world@gmail.com
http://github.com/jf/visage/commit/4eede57043dee3c9af1bbb5a66f7cd53843200e0
4eede57043dee3c9af1bbb5a66f7cd53843200e0
2009-10-10T05:37:38-07:00
2009-10-10T05:37:38-07:00
Merge branch 'master' of git://github.com/auxesis/visage into auxesis/master
590dd76c4d665ffc0b14ade9763448c31da4a08c
jf
jfs.world@gmail.com