riemann-dash 0.2.4 → 0.2.5
Sign up to get free protection for your applications and to get access to all the features.
- data/lib/riemann/dash/public/clock.js +12 -8
- data/lib/riemann/dash/public/strings.js +8 -2
- data/lib/riemann/dash/public/subs.js +8 -4
- data/lib/riemann/dash/public/util.js +19 -5
- data/lib/riemann/dash/public/vendor/flot/jquery.colorhelpers.js +179 -0
- data/lib/riemann/dash/public/vendor/flot/jquery.colorhelpers.min.js +21 -0
- data/lib/riemann/dash/public/vendor/flot/jquery.flot.canvas.js +345 -0
- data/lib/riemann/dash/public/vendor/flot/jquery.flot.canvas.min.js +28 -0
- data/lib/riemann/dash/public/vendor/flot/jquery.flot.categories.js +190 -0
- data/lib/riemann/dash/public/vendor/flot/jquery.flot.categories.min.js +44 -0
- data/lib/riemann/dash/public/vendor/flot/jquery.flot.crosshair.js +176 -0
- data/lib/riemann/dash/public/vendor/flot/jquery.flot.crosshair.min.js +59 -0
- data/lib/riemann/dash/public/vendor/flot/jquery.flot.errorbars.js +353 -0
- data/lib/riemann/dash/public/vendor/flot/jquery.flot.errorbars.min.js +63 -0
- data/lib/riemann/dash/public/vendor/flot/jquery.flot.fillbetween.js +226 -0
- data/lib/riemann/dash/public/vendor/flot/jquery.flot.fillbetween.min.js +30 -0
- data/lib/riemann/dash/public/vendor/flot/jquery.flot.image.js +241 -0
- data/lib/riemann/dash/public/vendor/flot/jquery.flot.image.min.js +53 -0
- data/lib/riemann/dash/public/vendor/flot/jquery.flot.js +3061 -0
- data/lib/riemann/dash/public/vendor/flot/jquery.flot.min.js +29 -0
- data/lib/riemann/dash/public/vendor/flot/jquery.flot.navigate.js +346 -0
- data/lib/riemann/dash/public/vendor/flot/jquery.flot.navigate.min.js +86 -0
- data/lib/riemann/dash/public/vendor/flot/jquery.flot.pie.js +817 -0
- data/lib/riemann/dash/public/vendor/flot/jquery.flot.pie.min.js +56 -0
- data/lib/riemann/dash/public/vendor/flot/jquery.flot.resize.js +60 -0
- data/lib/riemann/dash/public/vendor/flot/jquery.flot.resize.min.js +19 -0
- data/lib/riemann/dash/public/vendor/flot/jquery.flot.selection.js +360 -0
- data/lib/riemann/dash/public/vendor/flot/jquery.flot.selection.min.js +79 -0
- data/lib/riemann/dash/public/vendor/flot/jquery.flot.stack.js +188 -0
- data/lib/riemann/dash/public/vendor/flot/jquery.flot.stack.min.js +36 -0
- data/lib/riemann/dash/public/vendor/flot/jquery.flot.symbol.js +71 -0
- data/lib/riemann/dash/public/vendor/flot/jquery.flot.symbol.min.js +14 -0
- data/lib/riemann/dash/public/vendor/flot/jquery.flot.threshold.js +142 -0
- data/lib/riemann/dash/public/vendor/flot/jquery.flot.threshold.min.js +43 -0
- data/lib/riemann/dash/public/vendor/flot/jquery.flot.time.js +431 -0
- data/lib/riemann/dash/public/vendor/flot/jquery.flot.time.min.js +9 -0
- data/lib/riemann/dash/public/view.js +11 -7
- data/lib/riemann/dash/public/views/flot.js +248 -0
- data/lib/riemann/dash/public/views/grid.js +1 -5
- data/lib/riemann/dash/version.rb +1 -1
- data/lib/riemann/dash/views/css.scss +24 -0
- data/lib/riemann/dash/views/index.erubis +6 -0
- metadata +35 -2
@@ -0,0 +1,241 @@
|
|
1
|
+
/* Flot plugin for plotting images.
|
2
|
+
|
3
|
+
Copyright (c) 2007-2013 IOLA and Ole Laursen.
|
4
|
+
Licensed under the MIT license.
|
5
|
+
|
6
|
+
The data syntax is [ [ image, x1, y1, x2, y2 ], ... ] where (x1, y1) and
|
7
|
+
(x2, y2) are where you intend the two opposite corners of the image to end up
|
8
|
+
in the plot. Image must be a fully loaded Javascript image (you can make one
|
9
|
+
with new Image()). If the image is not complete, it's skipped when plotting.
|
10
|
+
|
11
|
+
There are two helpers included for retrieving images. The easiest work the way
|
12
|
+
that you put in URLs instead of images in the data, like this:
|
13
|
+
|
14
|
+
[ "myimage.png", 0, 0, 10, 10 ]
|
15
|
+
|
16
|
+
Then call $.plot.image.loadData( data, options, callback ) where data and
|
17
|
+
options are the same as you pass in to $.plot. This loads the images, replaces
|
18
|
+
the URLs in the data with the corresponding images and calls "callback" when
|
19
|
+
all images are loaded (or failed loading). In the callback, you can then call
|
20
|
+
$.plot with the data set. See the included example.
|
21
|
+
|
22
|
+
A more low-level helper, $.plot.image.load(urls, callback) is also included.
|
23
|
+
Given a list of URLs, it calls callback with an object mapping from URL to
|
24
|
+
Image object when all images are loaded or have failed loading.
|
25
|
+
|
26
|
+
The plugin supports these options:
|
27
|
+
|
28
|
+
series: {
|
29
|
+
images: {
|
30
|
+
show: boolean
|
31
|
+
anchor: "corner" or "center"
|
32
|
+
alpha: [ 0, 1 ]
|
33
|
+
}
|
34
|
+
}
|
35
|
+
|
36
|
+
They can be specified for a specific series:
|
37
|
+
|
38
|
+
$.plot( $("#placeholder"), [{
|
39
|
+
data: [ ... ],
|
40
|
+
images: { ... }
|
41
|
+
])
|
42
|
+
|
43
|
+
Note that because the data format is different from usual data points, you
|
44
|
+
can't use images with anything else in a specific data series.
|
45
|
+
|
46
|
+
Setting "anchor" to "center" causes the pixels in the image to be anchored at
|
47
|
+
the corner pixel centers inside of at the pixel corners, effectively letting
|
48
|
+
half a pixel stick out to each side in the plot.
|
49
|
+
|
50
|
+
A possible future direction could be support for tiling for large images (like
|
51
|
+
Google Maps).
|
52
|
+
|
53
|
+
*/
|
54
|
+
|
55
|
+
(function ($) {
|
56
|
+
var options = {
|
57
|
+
series: {
|
58
|
+
images: {
|
59
|
+
show: false,
|
60
|
+
alpha: 1,
|
61
|
+
anchor: "corner" // or "center"
|
62
|
+
}
|
63
|
+
}
|
64
|
+
};
|
65
|
+
|
66
|
+
$.plot.image = {};
|
67
|
+
|
68
|
+
$.plot.image.loadDataImages = function (series, options, callback) {
|
69
|
+
var urls = [], points = [];
|
70
|
+
|
71
|
+
var defaultShow = options.series.images.show;
|
72
|
+
|
73
|
+
$.each(series, function (i, s) {
|
74
|
+
if (!(defaultShow || s.images.show))
|
75
|
+
return;
|
76
|
+
|
77
|
+
if (s.data)
|
78
|
+
s = s.data;
|
79
|
+
|
80
|
+
$.each(s, function (i, p) {
|
81
|
+
if (typeof p[0] == "string") {
|
82
|
+
urls.push(p[0]);
|
83
|
+
points.push(p);
|
84
|
+
}
|
85
|
+
});
|
86
|
+
});
|
87
|
+
|
88
|
+
$.plot.image.load(urls, function (loadedImages) {
|
89
|
+
$.each(points, function (i, p) {
|
90
|
+
var url = p[0];
|
91
|
+
if (loadedImages[url])
|
92
|
+
p[0] = loadedImages[url];
|
93
|
+
});
|
94
|
+
|
95
|
+
callback();
|
96
|
+
});
|
97
|
+
}
|
98
|
+
|
99
|
+
$.plot.image.load = function (urls, callback) {
|
100
|
+
var missing = urls.length, loaded = {};
|
101
|
+
if (missing == 0)
|
102
|
+
callback({});
|
103
|
+
|
104
|
+
$.each(urls, function (i, url) {
|
105
|
+
var handler = function () {
|
106
|
+
--missing;
|
107
|
+
|
108
|
+
loaded[url] = this;
|
109
|
+
|
110
|
+
if (missing == 0)
|
111
|
+
callback(loaded);
|
112
|
+
};
|
113
|
+
|
114
|
+
$('<img />').load(handler).error(handler).attr('src', url);
|
115
|
+
});
|
116
|
+
};
|
117
|
+
|
118
|
+
function drawSeries(plot, ctx, series) {
|
119
|
+
var plotOffset = plot.getPlotOffset();
|
120
|
+
|
121
|
+
if (!series.images || !series.images.show)
|
122
|
+
return;
|
123
|
+
|
124
|
+
var points = series.datapoints.points,
|
125
|
+
ps = series.datapoints.pointsize;
|
126
|
+
|
127
|
+
for (var i = 0; i < points.length; i += ps) {
|
128
|
+
var img = points[i],
|
129
|
+
x1 = points[i + 1], y1 = points[i + 2],
|
130
|
+
x2 = points[i + 3], y2 = points[i + 4],
|
131
|
+
xaxis = series.xaxis, yaxis = series.yaxis,
|
132
|
+
tmp;
|
133
|
+
|
134
|
+
// actually we should check img.complete, but it
|
135
|
+
// appears to be a somewhat unreliable indicator in
|
136
|
+
// IE6 (false even after load event)
|
137
|
+
if (!img || img.width <= 0 || img.height <= 0)
|
138
|
+
continue;
|
139
|
+
|
140
|
+
if (x1 > x2) {
|
141
|
+
tmp = x2;
|
142
|
+
x2 = x1;
|
143
|
+
x1 = tmp;
|
144
|
+
}
|
145
|
+
if (y1 > y2) {
|
146
|
+
tmp = y2;
|
147
|
+
y2 = y1;
|
148
|
+
y1 = tmp;
|
149
|
+
}
|
150
|
+
|
151
|
+
// if the anchor is at the center of the pixel, expand the
|
152
|
+
// image by 1/2 pixel in each direction
|
153
|
+
if (series.images.anchor == "center") {
|
154
|
+
tmp = 0.5 * (x2-x1) / (img.width - 1);
|
155
|
+
x1 -= tmp;
|
156
|
+
x2 += tmp;
|
157
|
+
tmp = 0.5 * (y2-y1) / (img.height - 1);
|
158
|
+
y1 -= tmp;
|
159
|
+
y2 += tmp;
|
160
|
+
}
|
161
|
+
|
162
|
+
// clip
|
163
|
+
if (x1 == x2 || y1 == y2 ||
|
164
|
+
x1 >= xaxis.max || x2 <= xaxis.min ||
|
165
|
+
y1 >= yaxis.max || y2 <= yaxis.min)
|
166
|
+
continue;
|
167
|
+
|
168
|
+
var sx1 = 0, sy1 = 0, sx2 = img.width, sy2 = img.height;
|
169
|
+
if (x1 < xaxis.min) {
|
170
|
+
sx1 += (sx2 - sx1) * (xaxis.min - x1) / (x2 - x1);
|
171
|
+
x1 = xaxis.min;
|
172
|
+
}
|
173
|
+
|
174
|
+
if (x2 > xaxis.max) {
|
175
|
+
sx2 += (sx2 - sx1) * (xaxis.max - x2) / (x2 - x1);
|
176
|
+
x2 = xaxis.max;
|
177
|
+
}
|
178
|
+
|
179
|
+
if (y1 < yaxis.min) {
|
180
|
+
sy2 += (sy1 - sy2) * (yaxis.min - y1) / (y2 - y1);
|
181
|
+
y1 = yaxis.min;
|
182
|
+
}
|
183
|
+
|
184
|
+
if (y2 > yaxis.max) {
|
185
|
+
sy1 += (sy1 - sy2) * (yaxis.max - y2) / (y2 - y1);
|
186
|
+
y2 = yaxis.max;
|
187
|
+
}
|
188
|
+
|
189
|
+
x1 = xaxis.p2c(x1);
|
190
|
+
x2 = xaxis.p2c(x2);
|
191
|
+
y1 = yaxis.p2c(y1);
|
192
|
+
y2 = yaxis.p2c(y2);
|
193
|
+
|
194
|
+
// the transformation may have swapped us
|
195
|
+
if (x1 > x2) {
|
196
|
+
tmp = x2;
|
197
|
+
x2 = x1;
|
198
|
+
x1 = tmp;
|
199
|
+
}
|
200
|
+
if (y1 > y2) {
|
201
|
+
tmp = y2;
|
202
|
+
y2 = y1;
|
203
|
+
y1 = tmp;
|
204
|
+
}
|
205
|
+
|
206
|
+
tmp = ctx.globalAlpha;
|
207
|
+
ctx.globalAlpha *= series.images.alpha;
|
208
|
+
ctx.drawImage(img,
|
209
|
+
sx1, sy1, sx2 - sx1, sy2 - sy1,
|
210
|
+
x1 + plotOffset.left, y1 + plotOffset.top,
|
211
|
+
x2 - x1, y2 - y1);
|
212
|
+
ctx.globalAlpha = tmp;
|
213
|
+
}
|
214
|
+
}
|
215
|
+
|
216
|
+
function processRawData(plot, series, data, datapoints) {
|
217
|
+
if (!series.images.show)
|
218
|
+
return;
|
219
|
+
|
220
|
+
// format is Image, x1, y1, x2, y2 (opposite corners)
|
221
|
+
datapoints.format = [
|
222
|
+
{ required: true },
|
223
|
+
{ x: true, number: true, required: true },
|
224
|
+
{ y: true, number: true, required: true },
|
225
|
+
{ x: true, number: true, required: true },
|
226
|
+
{ y: true, number: true, required: true }
|
227
|
+
];
|
228
|
+
}
|
229
|
+
|
230
|
+
function init(plot) {
|
231
|
+
plot.hooks.processRawData.push(processRawData);
|
232
|
+
plot.hooks.drawSeries.push(drawSeries);
|
233
|
+
}
|
234
|
+
|
235
|
+
$.plot.plugins.push({
|
236
|
+
init: init,
|
237
|
+
options: options,
|
238
|
+
name: 'image',
|
239
|
+
version: '1.1'
|
240
|
+
});
|
241
|
+
})(jQuery);
|
@@ -0,0 +1,53 @@
|
|
1
|
+
/* Flot plugin for plotting images.
|
2
|
+
|
3
|
+
Copyright (c) 2007-2013 IOLA and Ole Laursen.
|
4
|
+
Licensed under the MIT license.
|
5
|
+
|
6
|
+
The data syntax is [ [ image, x1, y1, x2, y2 ], ... ] where (x1, y1) and
|
7
|
+
(x2, y2) are where you intend the two opposite corners of the image to end up
|
8
|
+
in the plot. Image must be a fully loaded Javascript image (you can make one
|
9
|
+
with new Image()). If the image is not complete, it's skipped when plotting.
|
10
|
+
|
11
|
+
There are two helpers included for retrieving images. The easiest work the way
|
12
|
+
that you put in URLs instead of images in the data, like this:
|
13
|
+
|
14
|
+
[ "myimage.png", 0, 0, 10, 10 ]
|
15
|
+
|
16
|
+
Then call $.plot.image.loadData( data, options, callback ) where data and
|
17
|
+
options are the same as you pass in to $.plot. This loads the images, replaces
|
18
|
+
the URLs in the data with the corresponding images and calls "callback" when
|
19
|
+
all images are loaded (or failed loading). In the callback, you can then call
|
20
|
+
$.plot with the data set. See the included example.
|
21
|
+
|
22
|
+
A more low-level helper, $.plot.image.load(urls, callback) is also included.
|
23
|
+
Given a list of URLs, it calls callback with an object mapping from URL to
|
24
|
+
Image object when all images are loaded or have failed loading.
|
25
|
+
|
26
|
+
The plugin supports these options:
|
27
|
+
|
28
|
+
series: {
|
29
|
+
images: {
|
30
|
+
show: boolean
|
31
|
+
anchor: "corner" or "center"
|
32
|
+
alpha: [ 0, 1 ]
|
33
|
+
}
|
34
|
+
}
|
35
|
+
|
36
|
+
They can be specified for a specific series:
|
37
|
+
|
38
|
+
$.plot( $("#placeholder"), [{
|
39
|
+
data: [ ... ],
|
40
|
+
images: { ... }
|
41
|
+
])
|
42
|
+
|
43
|
+
Note that because the data format is different from usual data points, you
|
44
|
+
can't use images with anything else in a specific data series.
|
45
|
+
|
46
|
+
Setting "anchor" to "center" causes the pixels in the image to be anchored at
|
47
|
+
the corner pixel centers inside of at the pixel corners, effectively letting
|
48
|
+
half a pixel stick out to each side in the plot.
|
49
|
+
|
50
|
+
A possible future direction could be support for tiling for large images (like
|
51
|
+
Google Maps).
|
52
|
+
|
53
|
+
*/(function(e){function n(e,t,n){var r=e.getPlotOffset();if(!n.images||!n.images.show)return;var i=n.datapoints.points,s=n.datapoints.pointsize;for(var o=0;o<i.length;o+=s){var u=i[o],a=i[o+1],f=i[o+2],l=i[o+3],c=i[o+4],h=n.xaxis,p=n.yaxis,d;if(!u||u.width<=0||u.height<=0)continue;a>l&&(d=l,l=a,a=d),f>c&&(d=c,c=f,f=d),n.images.anchor=="center"&&(d=.5*(l-a)/(u.width-1),a-=d,l+=d,d=.5*(c-f)/(u.height-1),f-=d,c+=d);if(a==l||f==c||a>=h.max||l<=h.min||f>=p.max||c<=p.min)continue;var v=0,m=0,g=u.width,y=u.height;a<h.min&&(v+=(g-v)*(h.min-a)/(l-a),a=h.min),l>h.max&&(g+=(g-v)*(h.max-l)/(l-a),l=h.max),f<p.min&&(y+=(m-y)*(p.min-f)/(c-f),f=p.min),c>p.max&&(m+=(m-y)*(p.max-c)/(c-f),c=p.max),a=h.p2c(a),l=h.p2c(l),f=p.p2c(f),c=p.p2c(c),a>l&&(d=l,l=a,a=d),f>c&&(d=c,c=f,f=d),d=t.globalAlpha,t.globalAlpha*=n.images.alpha,t.drawImage(u,v,m,g-v,y-m,a+r.left,f+r.top,l-a,c-f),t.globalAlpha=d}}function r(e,t,n,r){if(!t.images.show)return;r.format=[{required:!0},{x:!0,number:!0,required:!0},{y:!0,number:!0,required:!0},{x:!0,number:!0,required:!0},{y:!0,number:!0,required:!0}]}function i(e){e.hooks.processRawData.push(r),e.hooks.drawSeries.push(n)}var t={series:{images:{show:!1,alpha:1,anchor:"corner"}}};e.plot.image={},e.plot.image.loadDataImages=function(t,n,r){var i=[],s=[],o=n.series.images.show;e.each(t,function(t,n){if(!o&&!n.images.show)return;n.data&&(n=n.data),e.each(n,function(e,t){typeof t[0]=="string"&&(i.push(t[0]),s.push(t))})}),e.plot.image.load(i,function(t){e.each(s,function(e,n){var r=n[0];t[r]&&(n[0]=t[r])}),r()})},e.plot.image.load=function(t,n){var r=t.length,i={};r==0&&n({}),e.each(t,function(t,s){var o=function(){--r,i[s]=this,r==0&&n(i)};e("<img />").load(o).error(o).attr("src",s)})},e.plot.plugins.push({init:i,options:t,name:"image",version:"1.1"})})(jQuery);
|