Charting with flask, rgraph and custom "timeseries database"

1 files changed, 471 insertions, 0 deletions

diff --git a/schall/static/RGraph/libraries/RGraph.common.resizing.js b/schall/static/RGraph/libraries/RGraph.common.resizing.js
new file mode 100644
index 0000000..ee96747
--- /dev/null
+++ b/schall/static/RGraph/libraries/RGraph.common.resizing.js
@@ -0,0 +1,471 @@
+    /**
+    * o------------------------------------------------------------------------------o
+    * | This file is part of the RGraph package - you can learn more at:             |
+    * |                                                                              |
+    * |                          http://www.rgraph.net                               |
+    * |                                                                              |
+    * | This package is licensed under the RGraph license. For all kinds of business |
+    * | purposes there is a small one-time licensing fee to pay and for non          |
+    * | commercial  purposes it is free to use. You can read the full license here:  |
+    * |                                                                              |
+    * |                      http://www.rgraph.net/LICENSE.txt                       |
+    * o------------------------------------------------------------------------------o
+    */
+
+    if (typeof(RGraph) == 'undefined') RGraph = {isRGraph:true,type:'common'};
+
+
+    /**
+    * This is an array of CSS properties that should be preserved when adding theplaceholder DIV
+    */
+    __rgraph_resizing_preserve_css_properties__ = [];
+
+    /**
+    * This function can be used to allow resizing
+    * 
+    * @param object obj Your graph object
+    */
+    RGraph.AllowResizing = function (obj)
+    {
+        if (obj.Get('chart.resizable')) {
+            var canvas  = obj.canvas;
+            var context = obj.context;
+            var resizeHandle = 15;
+            RGraph.Resizing.canvas = canvas;
+            RGraph.Resizing.placeHolders = [];
+            
+            /**
+            * Add the original width and height to the canvas
+            */
+            if (!canvas.__original_width__ && !canvas.__original_height__) {
+                canvas.__original_width__  = canvas.width;
+                canvas.__original_height__ = canvas.height;
+            }
+
+
+            var adjustX = (typeof(obj.Get('chart.resize.handle.adjust')) == 'object' && typeof(obj.Get('chart.resize.handle.adjust')[0]) == 'number' ? obj.Get('chart.resize.handle.adjust')[0] : 0);
+            var adjustY = (typeof(obj.Get('chart.resize.handle.adjust')) == 'object' && typeof(obj.Get('chart.resize.handle.adjust')[1]) == 'number' ? obj.Get('chart.resize.handle.adjust')[1] : 0);
+
+
+            /**
+            * Draw the resize handle
+            */
+            var textWidth = context.measureText('Reset').width + 2;
+
+
+            // Draw the white background for the resize handle - OPTIONAL default is rgba(0,0,0,0);
+            var bgcolor = obj.Get('chart.resize.handle.background');
+            
+            if (!bgcolor) {
+                bgcolor = 'rgba(0,0,0,0)';
+            }
+
+            context.beginPath();
+                context.fillStyle = bgcolor;
+                context.moveTo(canvas.width - resizeHandle - resizeHandle + adjustX, canvas.height - resizeHandle);
+                context.fillRect(canvas.width - resizeHandle - resizeHandle + adjustX, canvas.height - resizeHandle + adjustY, 2 * resizeHandle, resizeHandle);
+            context.fill();
+
+
+            obj.context.beginPath();
+                obj.context.strokeStyle = 'gray';
+                obj.context.fillStyle = 'rgba(0,0,0,0)';
+                obj.context.lineWidth = 1;
+                obj.context.fillRect(obj.canvas.width - resizeHandle + adjustX, obj.canvas.height - resizeHandle - 2 + adjustY, resizeHandle, resizeHandle + 2);
+                obj.context.fillRect(obj.canvas.width - resizeHandle - textWidth + adjustX, obj.canvas.height - resizeHandle + adjustY, resizeHandle + textWidth, resizeHandle + 2);
+
+
+                // Draw the arrows
+                
+                    // Vertical line
+                    obj.context.moveTo(obj.canvas.width - (resizeHandle / 2) + adjustX, obj.canvas.height - resizeHandle + adjustY);
+                    obj.context.lineTo(obj.canvas.width - (resizeHandle / 2) + adjustX, obj.canvas.height + adjustY);
+
+
+                    // Horizontal line
+                    obj.context.moveTo(obj.canvas.width + adjustX, obj.canvas.height - (resizeHandle / 2) + adjustY);
+                    obj.context.lineTo(obj.canvas.width - resizeHandle + adjustX, obj.canvas.height - (resizeHandle / 2) + adjustY);
+                
+            context.fill();
+            context.stroke();
+
+
+            // Top arrow head
+            context.fillStyle = 'gray';
+            context.beginPath();
+                context.moveTo(canvas.width - (resizeHandle / 2) + adjustX, canvas.height - resizeHandle + adjustY);
+                context.lineTo(canvas.width - (resizeHandle / 2) + 3 + adjustX, canvas.height - resizeHandle + 3 + adjustY);
+                context.lineTo(canvas.width - (resizeHandle / 2) - 3 + adjustX, canvas.height - resizeHandle + 3 + adjustY);
+            context.closePath();
+            context.fill();
+
+            // Bottom arrow head
+            context.beginPath();
+                context.moveTo(canvas.width - (resizeHandle / 2) + adjustX, canvas.height + adjustY);
+                context.lineTo(canvas.width - (resizeHandle / 2) + 3 + adjustX, canvas.height - 3 + adjustY);
+                context.lineTo(canvas.width - (resizeHandle / 2) - 3 + adjustX, canvas.height - 3 + adjustY);
+            context.closePath();
+            context.fill();
+
+            // Left arrow head
+            context.beginPath();
+                context.moveTo(canvas.width - resizeHandle + adjustX, canvas.height - (resizeHandle / 2) + adjustY);
+                context.lineTo(canvas.width - resizeHandle + 3 + adjustX, canvas.height - (resizeHandle / 2) + 3 + adjustY);
+                context.lineTo(canvas.width - resizeHandle + 3 + adjustX, canvas.height - (resizeHandle / 2) - 3 + adjustY);
+            context.closePath();
+            context.fill();
+
+            // Right arrow head
+            context.beginPath();
+                context.moveTo(canvas.width + adjustX, canvas.height - (resizeHandle / 2) + adjustY);
+                context.lineTo(canvas.width - 3 + adjustX, canvas.height - (resizeHandle / 2) + 3 + adjustY);
+                context.lineTo(canvas.width  - 3 + adjustX, canvas.height - (resizeHandle / 2) - 3 + adjustY);
+            context.closePath();
+            context.fill();
+            
+            // Square at the centre of the arrows
+            context.beginPath();
+                context.fillStyle = 'white';
+                context.moveTo(canvas.width + adjustX, canvas.height - (resizeHandle / 2) + adjustY);
+                context.strokeRect(canvas.width - (resizeHandle / 2) - 2 + adjustX, canvas.height - (resizeHandle / 2) - 2 + adjustY, 4, 4);
+                context.fillRect(canvas.width - (resizeHandle / 2) - 2 + adjustX, canvas.height - (resizeHandle / 2) - 2 + adjustY, 4, 4);
+            context.fill();
+            context.stroke();
+
+
+            // Draw the "Reset" button
+            context.beginPath();
+                context.fillStyle = 'gray';
+                context.moveTo(canvas.width - resizeHandle - 3 + adjustX, canvas.height - resizeHandle / 2 + adjustY);
+                context.lineTo(canvas.width - resizeHandle - resizeHandle + adjustX, canvas.height - (resizeHandle / 2) + adjustY);
+                context.lineTo(canvas.width - resizeHandle - resizeHandle + 2 + adjustX, canvas.height - (resizeHandle / 2) - 2 + adjustY);
+                context.lineTo(canvas.width - resizeHandle - resizeHandle + 2 + adjustX, canvas.height - (resizeHandle / 2) + 2 + adjustY);
+                context.lineTo(canvas.width - resizeHandle - resizeHandle + adjustX, canvas.height - (resizeHandle / 2) + adjustY);
+            context.stroke();
+            context.fill();
+
+            context.beginPath();
+                context.moveTo(canvas.width - resizeHandle - resizeHandle - 1 + adjustX, canvas.height - (resizeHandle / 2) - 3 + adjustY);
+                context.lineTo(canvas.width - resizeHandle - resizeHandle - 1 + adjustX, canvas.height - (resizeHandle / 2) + 3 + adjustY);
+            context.stroke();
+            context.fill();
+            
+
+
+            var window_onmousemove = function (e)
+            {
+                e = RGraph.FixEventObject(e);
+                
+                var canvas    = RGraph.Resizing.canvas;
+                var newWidth  = RGraph.Resizing.originalw - (RGraph.Resizing.originalx - e.pageX);// - 5
+                var newHeight = RGraph.Resizing.originalh - (RGraph.Resizing.originaly - e.pageY);// - 5
+
+                if (RGraph.Resizing.mousedown) {
+                    if (newWidth > (canvas.__original_width__ / 2)) RGraph.Resizing.div.style.width = newWidth + 'px';
+                    if (newHeight > (canvas.__original_height__ / 2)) RGraph.Resizing.div.style.height = newHeight + 'px';
+                    
+                    RGraph.FireCustomEvent(canvas.__object__, 'onresize');
+                }
+            }
+            window.addEventListener('mousemove', window_onmousemove, false);
+            RGraph.AddEventListener(canvas.id, 'window_mousemove', window_onmousemove);
+
+            /**
+            * The window onmouseup function
+            */
+            var MouseupFunc = function (e)
+            {
+                if (!RGraph.Resizing || !RGraph.Resizing.div || !RGraph.Resizing.mousedown) {
+                    return;
+                }
+
+                if (RGraph.Resizing.div) {
+
+                    var div    = RGraph.Resizing.div;
+                    var canvas = div.__canvas__;
+                    var coords = RGraph.getCanvasXY(div.__canvas__);
+
+                    var parentNode = canvas.parentNode;
+
+                    if (canvas.style.position != 'absolute') {
+                        // Create a DIV to go in the canvases place
+                        var placeHolderDIV = document.createElement('DIV');
+                            placeHolderDIV.style.width = RGraph.Resizing.originalw + 'px';
+                            placeHolderDIV.style.height = RGraph.Resizing.originalh + 'px';
+                            //placeHolderDIV.style.backgroundColor = 'red';
+                            placeHolderDIV.style.display = 'inline-block'; // Added 5th Nov 2010
+                            placeHolderDIV.style.position = canvas.style.position;
+                            placeHolderDIV.style.left     = canvas.style.left;
+                            placeHolderDIV.style.top      = canvas.style.top;
+                            placeHolderDIV.style.cssFloat = canvas.style.cssFloat;
+
+                        parentNode.insertBefore(placeHolderDIV, canvas);
+                    }
+
+
+                    // Now set the canvas to be positioned absolutely
+                    canvas.style.backgroundColor = 'white';
+                    canvas.style.position        = 'absolute';
+                    canvas.style.border = '1px dashed gray';
+                    canvas.style.left            = (RGraph.Resizing.originalCanvasX  - 1) + 'px';
+                    canvas.style.top             = (RGraph.Resizing.originalCanvasY - 1) + 'px';
+
+                    canvas.width = parseInt(div.style.width);
+                    canvas.height = parseInt(div.style.height);
+                    
+                
+
+                    /**
+                    * Fire the onresize event
+                    */
+                    RGraph.FireCustomEvent(canvas.__object__, 'onresizebeforedraw');
+
+                    canvas.__object__.Draw();
+
+                    // Get rid of transparent semi-opaque DIV
+                    RGraph.Resizing.mousedown = false;
+                    div.style.display = 'none';
+                    document.body.removeChild(div);
+                }
+
+                /**
+                * If there is zoom enabled in thumbnail mode, lose the zoom image
+                */
+                if (RGraph.Registry.Get('chart.zoomed.div') || RGraph.Registry.Get('chart.zoomed.img')) {
+                    RGraph.Registry.Set('chart.zoomed.div', null);
+                    RGraph.Registry.Set('chart.zoomed.img', null);
+                }
+
+                /**
+                * Fire the onresize event
+                */
+                RGraph.FireCustomEvent(canvas.__object__, 'onresizeend');
+            }
+
+
+            var window_onmouseup = MouseupFunc;
+            window.addEventListener('onmouseup', window_onmouseup, false);
+            RGraph.AddEventListener(canvas.id, 'window_mouseup', window_onmouseup);
+
+
+            var canvas_onmousemove = function (e)
+            {
+                e = RGraph.FixEventObject(e);
+                
+                var coords  = RGraph.getMouseXY(e);
+                var canvas  = e.target;
+                var context = canvas.getContext('2d');
+                //var orig_cursor = canvas.style.cursor; // Used for playing well with tooltips
+
+                RGraph.Resizing.title = canvas.title;
+                
+                if (   (coords[0] > (canvas.width - resizeHandle)
+                    && coords[0] < canvas.width
+                    && coords[1] > (canvas.height - resizeHandle)
+                    && coords[1] < canvas.height)) {
+                        
+                        canvas.style.cursor = 'move';
+                        
+                        if (navigator.userAgent.indexOf('Chrome') > 0 || document.all) {
+                            canvas.title = 'Resize the graph';
+                        }
+
+                } else if (   coords[0] > (canvas.width - resizeHandle - resizeHandle)
+                           && coords[0] < canvas.width - resizeHandle
+                           && coords[1] > (canvas.height - resizeHandle)
+                           && coords[1] < canvas.height) {
+                    
+                    canvas.style.cursor = 'pointer';
+    
+                    if (navigator.userAgent.indexOf('Chrome') > 0 || document.all) {
+                        canvas.title = 'Reset graph to original size';
+                    }
+
+                } else {
+
+                    // orig_cursor
+                    canvas.style.cursor = 'default';
+                    canvas.title = '';
+                }
+            }
+            canvas.addEventListener('mousemove', canvas_onmousemove, false);
+            RGraph.AddEventListener(canvas.id, 'mousemove', canvas_onmousemove);
+
+
+
+            var canvas_onmouseout = function (e)
+            {
+                e.target.style.cursor = 'default';
+                e.target.title        = '';
+            }
+            canvas.addEventListener('mouseout', canvas_onmouseout, false);
+            RGraph.AddEventListener(canvas.id, 'mouseout', canvas_onmouseout);
+
+
+
+            var canvas_onmousedown = function (e)
+            {
+                e = RGraph.FixEventObject(e);
+
+                var coords = RGraph.getMouseXY(e);
+                var canvasCoords = RGraph.getCanvasXY(e.target);
+                var canvas = e.target;
+
+                if (   coords[0] > (obj.canvas.width - resizeHandle)
+                    && coords[0] < obj.canvas.width
+                    && coords[1] > (obj.canvas.height - resizeHandle)
+                    && coords[1] < obj.canvas.height) {
+                    
+                    RGraph.FireCustomEvent(obj, 'onresizebegin');
+                    
+                    // Save the existing border
+                    if (canvas.__original_css_border__ == null) {
+                        canvas.__original_css_border__ = canvas.style.border;
+                    }
+
+                    RGraph.Resizing.mousedown = true;
+
+
+                    /**
+                    * Create the semi-opaque DIV
+                    */
+
+                    var div = document.createElement('DIV');
+                    div.style.position = 'absolute';
+                    div.style.left     = canvasCoords[0] + 'px';
+                    div.style.top      = canvasCoords[1] + 'px';
+                    div.style.width    = canvas.width + 'px';
+                    div.style.height   = canvas.height + 'px';
+                    div.style.border   = '1px dotted black';
+                    div.style.backgroundColor = 'gray';
+                    div.style.opacity  = 0.5;
+                    div.__canvas__ = e.target;
+
+                    document.body.appendChild(div);
+                    RGraph.Resizing.div = div;
+                    RGraph.Resizing.placeHolders.push(div);
+                    
+                    // Hide the previous resize indicator layers. This is only necessary it seems for the Meter chart
+                    for (var i=0; i<(RGraph.Resizing.placeHolders.length - 1); ++i) {
+                        RGraph.Resizing.placeHolders[i].style.display = 'none';
+                    }
+
+                    // This is a repetition of the window.onmouseup function (No need to use DOM2 here)
+                    div.onmouseup = function (e)
+                    {
+                        MouseupFunc(e);
+                    }
+
+                    
+                    // No need to use DOM2 here
+                    RGraph.Resizing.div.onmouseover = function (e)
+                    {
+                        e = RGraph.FixEventObject(e);
+                        e.stopPropagation();
+                    }
+    
+                    // The mouse
+                    RGraph.Resizing.originalx = e.pageX;
+                    RGraph.Resizing.originaly = e.pageY;
+                    
+                    RGraph.Resizing.originalw = obj.canvas.width;
+                    RGraph.Resizing.originalh = obj.canvas.height;
+                    
+                    RGraph.Resizing.originalCanvasX = RGraph.getCanvasXY(obj.canvas)[0];
+                    RGraph.Resizing.originalCanvasY = RGraph.getCanvasXY(obj.canvas)[1];
+                }
+
+
+                /**
+                * This facilitates the reset button
+                */
+                if (   coords[0] > (canvas.width - resizeHandle - resizeHandle)
+                    && coords[0] < canvas.width - resizeHandle
+                    && coords[1] > (canvas.height - resizeHandle)
+                    && coords[1] < canvas.height) {
+                    
+                    /**
+                    * Fire the onresizebegin event
+                    */
+                    RGraph.FireCustomEvent(canvas.__object__, 'onresizebegin');
+
+                    // Restore the original width and height
+                    canvas.width = canvas.__original_width__;
+                    canvas.height = canvas.__original_height__;
+
+                    // Lose the border
+                    canvas.style.border = canvas.__original_css_border__;
+                    //canvas.__original_css_border__ = null;
+                    
+                    // Add 1 pixel to the top/left because the border is going
+                    canvas.style.left = (parseInt(canvas.style.left)) + 'px';
+                    canvas.style.top  = (parseInt(canvas.style.top)) + 'px';
+
+
+                    RGraph.FireCustomEvent(canvas.__object__, 'onresizebeforedraw');
+
+                    // Redraw the canvas
+                    canvas.__object__.Draw();
+                    
+                    // Set the width and height on the DIV
+                    if (RGraph.Resizing.div) {
+                        RGraph.Resizing.div.style.width  = canvas.__original_width__ + 'px';
+                        RGraph.Resizing.div.style.height = canvas.__original_height__ + 'px';
+                    }
+
+                    /**
+                    * Fire the resize event
+                    */
+                    RGraph.FireCustomEvent(canvas.__object__, 'onresize');
+                    RGraph.FireCustomEvent(canvas.__object__, 'onresizeend');
+                }
+            }
+            canvas.addEventListener('mousedown', canvas_onmousedown, false);
+            RGraph.AddEventListener(canvas.id, 'mousedown', canvas_onmousedown);
+
+
+            /**
+            * This function facilitates the reset button
+            * 
+            * NOTE: 31st December 2010 - doesn't appear to be being used any more
+            */
+
+            /*
+            canvas.onclick = function (e)
+            {
+                var coords = RGraph.getMouseXY(e);
+                var canvas = e.target;
+
+                if (   coords[0] > (canvas.width - resizeHandle - resizeHandle)
+                    && coords[0] < canvas.width - resizeHandle
+                    && coords[1] > (canvas.height - resizeHandle)
+                    && coords[1] < canvas.height) {
+
+                    // Restore the original width and height
+                    canvas.width = canvas.__original_width__;
+                    canvas.height = canvas.__original_height__;
+
+                    // Lose the border
+                    canvas.style.border = '';
+                    
+                    // Add 1 pixel to the top/left because the border is going
+                    canvas.style.left = (parseInt(canvas.style.left) + 1) + 'px';
+                    canvas.style.top  = (parseInt(canvas.style.top) + 1) + 'px';
+                    
+                    // Fire the onresizebeforedraw event
+                    RGraph.FireCustomEvent(canvas.__object__, 'onresizebeforedraw');
+
+                    // Redraw the canvas
+                    canvas.__object__.Draw();
+                    
+                    // Set the width and height on the DIV
+                    RGraph.Resizing.div.style.width  = canvas.__original_width__ + 'px';
+                    RGraph.Resizing.div.style.height = canvas.__original_height__ + 'px';
+                    
+                    // Fire the resize event
+                    RGraph.FireCustomEvent(canvas.__object__, 'onresize');
+                }
+            }
+            */
+        }
+    }
\ No newline at end of file