made the install script executable

.pylintrc

@@ -0,0 +1,2 @@
+[MASTER]
+disable = c0103

README.md

@@ -1,6 +1,5 @@
 # TeraHz
 
-
 [![Documentation Status](https://readthedocs.org/projects/terahz/badge/?version=latest)](https://terahz.readthedocs.io/en/latest/?badge=latest)
 
 TeraHz is a low-cost spectrometer based on a Raspberry Pi 3 or 3 B+ and three sensors:

backend/app.py

@@ -1,16 +1,17 @@
 # app.py - main backend program
+'''Main TeraHz backend program'''
 # All code in this file is licensed under the ISC license, provided in LICENSE.txt
-from flask import Flask, redirect, url_for, request
+from flask import Flask
 import flask
 import sensors
-import json
-app = Flask(__name__)
-s=sensors.Spectrometer(path='/dev/serial0', baudrate=115200, tout=1)
-u=sensors.UVSensor()
-l=sensors.LxMeter()
 
+app = Flask(__name__)
 @app.route('/data')
 def sendData():
+    '''Responder function for /data route'''
+    s = sensors.Spectrometer(path='/dev/serial0', baudrate=115200, tout=1)
+    u = sensors.UVSensor()
+    l = sensors.LxMeter()
     response = flask.jsonify([s.getData(), l.getData(), u.getABI()])
     response.headers.add('Access-Control-Allow-Origin', '*')
     return response

backend/run.sh

@@ -0,0 +1,4 @@
+#!/bin/bash
+# run.sh - run the backend server
+sudo gunicorn app:app -b 0.0.0.0:5000 &
+disown

backend/sensors.py

@@ -1,37 +1,40 @@
 # sensors.py - a module for interfacing to the sensors
+'''Module for interfacing with TeraHz sensors'''
 # Copyright 2019 Kristjan Komloši
 # All code in this file is licensed under the ISC license, provided in LICENSE.txt
 import serial as ser
 import pandas as pd
 import smbus2
-from sys import exit as ex
-import time
 
 class Spectrometer:
+    '''Class representing the AS7265X specrometer'''
     def initializeSensor(self):
-        '''confirm the sensor is responding and proceed with spectrometer initialization'''
+        '''confirm the sensor is responding and proceed\
+         with spectrometer initialization'''
         try:
-            rstring='undefined' # just need it set to a value
+            rstring = 'undefined'  # just need it set to a value
+            self.setParameters({'gain': 0})
             self.serialObject.write(b'AT\n')
-            rstring=self.serialObject.readline().decode()
+            rstring = self.serialObject.readline().decode()
             if rstring == 'undefined':
-                raise Exception #sensor didn't respond
+                raise Exception  # sensor didn't respond
             if rstring == 'OK':
-                pass #handshake passed
+                pass  # handshake passed
             if rstring == 'ERROR':
-                raise Exception #sensor is in error state
+                raise Exception  # sensor is in error state
         except:
-            raise Exception('An exception ocurred when performing spectrometer handshake')
-            ex(1)
+            raise Exception(
+                'An exception ocurred when performing spectrometer handshake')
 
     def setParameters(self, parameters):
         '''applies the parameters like LED light and gain to the spectrometer'''
         try:
             if 'it_time' in parameters:
                 it_time = int(parameters['it_time'])
-                if it_time <=0 :
+                if it_time <= 0:
                     it_time = 1
-                self.serialObject.write('ATINTTIME={}\n'.format(string(it_time)).encode())
+                self.serialObject.write(
+                    'ATINTTIME={}\n'.format(str(it_time)).encode())
                 self.serialObject.readline()
 
             if 'gain' in parameters:
@@ -44,28 +47,29 @@ class Spectrometer:
             if 'led' in parameters:
                 led = bool(parameters['led'])
                 if led:
-                    led=1
+                    led = 1
                 else:
-                    led=0
+                    led = 0
                 self.serialObject.write('ATLED3={}\n'.format(led).encode())
                 self.serialObject.readline()
         except:
-           raise Exception('An exception occured during spectrometer initialization')
-           ex(1)
+            raise Exception(
+                'An exception occured during spectrometer initialization')
 
     def getData(self):
+        '''Returns spectral data in a pandas DataFrame.'''
         try:
             self.serialObject.write(b'ATCDATA\n')
             rawresp = self.serialObject.readline().decode()
         except:
-            raise Exception('An exception occurred when polling for spectrometer data')
-            ex(1)
+            raise Exception(
+                'An exception occurred when polling for spectrometer data')
         else:
             responseorder = [i for i in 'RSTUVWGHIJKLABCDEF']
             realorder = [i for i in 'ABCDEFGHRISJTUVWKL']
-            response = pd.Series([float(i)/35.0 for i in rawresp[:-3].split(',')], index=responseorder)
-            return pd.DataFrame(response, index=realorder, columns = ['uW/cm^2']).to_dict()['uW/cm^2']
-
+            response = pd.Series(
+                [float(i) / 35.0 for i in rawresp[:-3].split(',')], index=responseorder)
+            return pd.DataFrame(response, index=realorder, columns=['uW/cm^2']).to_dict()['uW/cm^2']
 
     def __init__(self, path='/dev/ttyUSB0', baudrate=115200, tout=1):
         self.path = path
@@ -74,22 +78,26 @@ class Spectrometer:
         try:
             self.serialObject = ser.Serial(path, baudrate, timeout=tout)
         except:
-            raise Exception('An exception occured when opening the serial port at {}'.format(path))
-            ex(1)
+            raise Exception(
+                'An exception occured when opening the serial port at {}'.format(path))
         else:
             self.initializeSensor()
 
 
 class LxMeter:
+    '''Class representing the APDS-9301 digital photometer.'''
     def __init__(self, busNumber=1, addr=0x39):
         self.addr = addr
         try:
-            self.bus = smbus2.SMBus(busNumber) # initialize the SMBus interface
+            # initialize the SMBus interface
+            self.bus = smbus2.SMBus(busNumber)
         except:
-            raise Exception('An exception occured opening the SMBus {}'.format(self.bus))
+            raise Exception(
+                'An exception occured opening the SMBus {}'.format(self.bus))
 
         try:
-            self.bus.write_byte_data(self.addr, 0xa0, 0x03) # enable the sensor
+            self.bus.write_byte_data(
+                self.addr, 0xa0, 0x03)  # enable the sensor
             self.setGain(16)
         except:
             raise Exception('An exception occured when enabling lux meter')
@@ -101,13 +109,15 @@ class LxMeter:
                 temp = self.bus.read_byte_data(self.addr, 0xa1)
                 self.bus.write_byte_data(self.addr, 0xa1, 0xef & temp)
             except:
-                raise Exception('An exception occured when setting lux meter gain')
+                raise Exception(
+                    'An exception occured when setting lux meter gain')
         if gain == 16:
             try:
                 temp = self.bus.read_byte_data(self.addr, 0xa1)
                 self.bus.write_byte_data(self.addr, 0xa1, 0x10 | temp)
             except:
-                raise Exception('An exception occured when setting lux meter gain')
+                raise Exception(
+                    'An exception occured when setting lux meter gain')
         else:
             raise Exception('Invalid gain')
 
@@ -118,6 +128,8 @@ class LxMeter:
                 return 16
             if self.bus.read_byte_data(self.addr, 0xa1) & 0x10 == 0x00:
                 return 1
+            raise Exception('An error occured when getting lux meter gain')
+            # Under normal conditions, this raise is unreachable.
         except:
             raise Exception('An error occured when getting lux meter gain')
 
@@ -129,14 +141,16 @@ class LxMeter:
             temp = self.bus.read_byte_data(self.addr, 0xa1)
             self.bus.write_byte_data(self.addr, 0xa1, (temp & 0xfc) | time)
         except:
-            raise Exception('An exception occured setting lux integration time')
+            raise Exception(
+                'An exception occured setting lux integration time')
 
     def getIntTime(self):
         '''Get the lux sensor integration time.'''
         try:
             return self.bus.read_byte_data(self.addr, 0xa1) & 0x03
         except:
-            raise Exception('An exception occured getting lux integration time')
+            raise Exception(
+                'An exception occured getting lux integration time')
 
     def getData(self):
         '''return the calculated lux value'''
@@ -147,31 +161,35 @@ class LxMeter:
             raise Exception('An exception occured fetching lux channels')
 
         # scary computations ahead! refer to the apds-9301 datasheet!
-        if chB/chA <= 0.5 and chB/chA > 0:
-            lux = 0.0304*chA - 0.062*chA*(chB/chA)**1.4
-        elif chB/chA <= 0.61 and chB/chA > 0.5:
-            lux = 0.0224*chA - 0.031*chB
-        elif chB/chA <=0.8 and chB/chA > 0.61:
-            lux = 0.0128*chA - 0.0153*chB
-        elif chB/chA <=1.3 and chB/chA >0.8:
-            lux = 0.00146*chA - 0.00112*chB
+        if chB / chA <= 0.5 and chB / chA > 0:
+            lux = 0.0304 * chA - 0.062 * chA * (chB / chA)**1.4
+        elif chB / chA <= 0.61 and chB / chA > 0.5:
+            lux = 0.0224 * chA - 0.031 * chB
+        elif chB / chA <= 0.8 and chB / chA > 0.61:
+            lux = 0.0128 * chA - 0.0153 * chB
+        elif chB / chA <= 1.3 and chB / chA > 0.8:
+            lux = 0.00146 * chA - 0.00112 * chB
         else:
             lux = 0
         return lux
 
+
 class UVSensor:
+    '''Class representing VEML6075 UVA/B meter'''
     def __init__(self, bus=1, addr=0x10):
-        self.addr=addr
+        self.addr = addr
         try:
             self.bus = smbus2.SMBus(bus)
         except:
-            raise Exception('An exception occured opening SMBus {}'.format(bus))
+            raise Exception(
+                'An exception occured opening SMBus {}'.format(bus))
 
         try:
             # enable the sensor and set the integration time
             self.bus.write_byte_data(self.addr, 0x00, 0b00010000)
         except:
-            raise Exception('An exception occured when initalizing the UV Sensor')
+            raise Exception(
+                'An exception occured when initalizing the UV Sensor')
 
     def getABI(self):
         '''Calculates the UVA and UVB irradiances,
@@ -188,26 +206,34 @@ class UVSensor:
         # scary computations ahead! refer to Vishay app note 84339 and Sparkfun
         # VEML6075 documentation.
 
-        # first, compensate for visible and IR noise
+        # compensate for visible and IR noise
         aCorr = aRaw - 2.22 * c1 - 1.33 * c2
         bCorr = bRaw - 2.95 * c1 - 1.74 * c2
 
-        # second, convert values into irradiances
-        a = aCorr * 0.00110
-        b = bCorr * 0.00125
+        # convert values into irradiances
+        a = aCorr * 1.06
+        b = bCorr * 0.48
 
+        # zero out negative results (readings with no uv)
+        if a < 0:
+            a = 0
+        if b < 0:
+            b = 0
         # last, calculate the UV index
         i = (a + b) / 2
 
-        return [a,b,i]
+        return [a, b, i]
 
     def getA(self):
+        '''Returns UVA value. A getABI() wrapper.'''
         return self.getABI()[0]
 
     def getB(self):
+        '''Returns UVB value. A getABI() wrapper.'''
         return self.getABI()[1]
 
     def getI(self):
+        '''Returns UV index. A getABI() wrapper.'''
         return self.getABI()[2]
 
     def on(self):
@@ -217,7 +243,8 @@ class UVSensor:
             # no configurable params = no bitmask
             self.bus.write_byte_data(self.addr, 0x00, 0x10)
         except:
-            raise Exception('An exception occured when turning the UV sensor on')
+            raise Exception(
+                'An exception occured when turning the UV sensor on')
 
     def off(self):
         '''Shuts the UV sensor down.'''
@@ -226,4 +253,5 @@ class UVSensor:
             # no configurable params = no bitmask
             self.bus.write_byte_data(self.addr, 0x00, 0x11)
         except:
-            raise Exception('An exception occured when shutting the UV sensor down')
+            raise Exception(
+                'An exception occured when shutting the UV sensor down')

backend/storage.py

@@ -1,15 +1,19 @@
 # storage.py - storage backend for TeraHz
+'''TeraHz storage backend'''
 # Copyright Kristjan Komloši 2019
-# All code in this file is licensed under the ISC license, provided in LICENSE.txt
+# All code in this file is licensed under the ISC license,
+# provided in LICENSE.txt
 
 
 import sqlite3
 class jsonStorage:
+    '''Class for simple sqlite3 database of JSON entries'''
     def __init__(self, dbFile):
         '''Storage object constructor. Argument is filename'''
         self.db = sqlite3.connect(dbFile)
 
     def listJSONs(self):
+        '''Returns a list of all existing entries.'''
         c = self.db.cursor()
         c.execute('SELECT * FROM storage')
         result = c.fetchall()
@@ -17,8 +21,10 @@ class jsonStorage:
         return result
 
     def storeJSON(self, jsonString, comment):
+        '''Stores a JSON entry along with a timestamp and a comment.'''
         c = self.db.cursor()
-        c.execute('INSERT INTO storage VALUES (datetime(\'now\', \'localtime\'), ?, ?)', (comment, jsonString))
+        c.execute(('INSERT INTO storage VALUES (datetime'
+                   '(\'now\', \'localtime\'), ?, ?)'), (comment, jsonString))
         c.close()
         self.db.commit()
 

backend/terahz.fcgi

@@ -0,0 +1,7 @@
+#!/usr/bin/python3
+# Minimal flup configuration for Flask
+from flup.server.fcgi import WSGIServer
+from app import app
+
+if __name__ == '__main__':
+    WSGIServer(app, bindAddress='/var/www/api/terahz.sock').run()

docs/build.md

@@ -1,3 +1,7 @@
+# TeraHz build guide
+This document describes the process of building/installing TeraHz from the Git
+repository.
+
 ## Warning
 The recommended way of getting TeraHz is the official Raspberry Pi SD card image
 provided under the releases tab in the GitHub repository. Installing TeraHz from

docs/dependencies.md

@@ -1,3 +1,4 @@
+# Development-stable dependencies
 The current development version of TeraHz has been verified to work with:
 
   - Raspbian Stretch (9)

docs/dev-guide.md

@@ -0,0 +1,95 @@
+# TeraHz developer's guide
+This document explains how TeraHz works. It's a good starting point for developers
+and an interesting read for the curious.
+
+# Hardware
+TeraHz was developed on and for the Raspberry Pi 3 Model B+. Compatibility with
+other Raspberries can probably be achieved by tweaking the device paths in the
+`app.py` file, but isn't confirmed at this point. Theoretically, 3 Model B and
+Zero W should work out of the box, but models without Wi-Fi will need an
+external Wi-Fi adapter if Wi-Fi functionality is desired. The practicality of
+compiling Python on the first generation of Raspberry Pis is also very
+questionable.
+
+Sensors required for operation are:
++ AS7265x
++ VEML6075
++ APDS-9301
+
+They provide the spectrometry data, UV data and illuminance data, respectively.
+They all support I2C, AS7265x supports UART in addition.
+
+The sensors leech power from the GPIO connector, thus eliminating the need for a
+separate power supply. The necessary power for the whole system is delivered through
+the Raspberry's USB port. This also allows for considerable versatility, as it
+enables the resulting device to be either wall-powered or battery-powered.
+In a portable configuration, I used a one-cell power bank, which allowed for
+about 45 minutes of continuous operation.
+
+## AS7265x chipset
+_[Datasheet][1ds] [Buy breakout board][1]_
+
+This chipset supports either I2C or UART. Because transferring large amounts of
+data over I2C is rather cumbersome, TeraHz uses AS7265x in UART mode.
+
+This chipset consists of three rather small surface-mounted chips and requires
+an EEPROM. To lower the complexity of assembly for the end-user, I recommend
+using a breakout board.
+
+The serial UART connection operates at 115200 baud, which seems to be the
+standard for most recent embedded peripherals. As with most serial hardware,
+the TxD and RxD lines must be crossed over when connecting to the processor.
+
+Communication with the sensor is simple and clear through AT commands. There's
+a lot of them, all documented inside the datasheet, but the most important one
+is `ATGETCDATA`, which returns the calibrated spectral data from the sensors.
+
+The data is returned in the form of a comma-separated list of floating point
+values, ending with a newline. The order is alphabetical, which is __different
+from wavelength order__. See the datasheet for more information.
+
+## VEML6075
+_[Datasheet][2ds] [Buy breakout board][2]_
+
+This chip communicates through I2C and provides TeraHz with UVA and UVB
+irradiance readings. It's not an ideal chip for this task, as it's been marked
+End-of-Life by Vishay and it'll have to be replaced with a better one in future
+hardware versions of TeraHz.
+
+The chip resides at the I2C address `0x10`. There's not a lot of communication
+required: at initialization, the integration time has to be set and after that,
+the sensor is ready to go.
+
+16-bit UV values lie in two two-byte registers, `0x07` for UVA and `0x09` for
+UVB. For correct result conversion, there are also two correction registers,
+UVCOMP_1 and 2, located at `0x0A` and `0x0B`, respectively.
+
+To convert these four values into irradiances, they must be multiplied by
+certain constants, somewhat loosely defined in the sensor datasheet. Keep in
+mind that the way of computing the "irradiance" is very much experimentally
+derived, and even Vishay's tech support doesn't know how exactly to calculate
+the irradiance.
+
+## APDS-9301
+_[Datasheet][3ds] [Buy breakout board][3]_
+This chip measures illuminance in luxes and like the VEML6075, connects through
+I2C. Unlike the VEML6075, this chip is very good at its job, providing accurate
+and fast results without undefined mathematics or required calibration.
+
+At power-on, it needs to be enabled and the sensor gain set to the high setting,
+as the formula for Lux calculation is only defined for that setting. This
+initialization is handled by the sensors module.
+
+The lux reading is derived from two channels, descriptively called CH0 and CH1,
+residing in respective 16-bit registers at addresses `0xAC` and `0xAE`. After a
+successful read of both data registers, the lux value can be derived using the
+formula in the sensor's datasheet.
+
+
+
+[1]: https://www.tindie.com/products/onehorse/compact-as7265x-spectrometer/
+[2]: https://www.sparkfun.com/products/15089
+[3]: https://www.sparkfun.com/products/14350
+[1ds]: sensor-docs/AS7265x.pdf
+[2ds]: sensor-docs/veml6075.pdf
+[3ds]: sensor-docs/APDS-9301.pdf

docs/electrical.md

@@ -0,0 +1,55 @@
+# TeraHz Electrical Guide
+This section briefly explains the neccessary electrical connections between the
+Raspberry Pi and the sensors you'll need to make to ensure correct and safe
+operation.
+
+As mentioned before, TeraHz requires 3 sensors to operate. The simpler UVA/UVB
+sensor and the ambient light analyzer connect to the Raspberry's SMBus (I2C)
+bus, while the spectrometer connects via high-speed UART.
+
+![pinout](imgs/raspi-pinout.png)
+
+## PCBs vs breakout boards & jumpers
+The Raspberry Pi GPIO port includes enough power pins to require only jumper
+cables to connect the sensors to the Raspberry Pi. However, this is not a great
+idea. During development, jumper cables have repeatedly been proven to be an
+unreliable nuisance, and their absolute lack of rigidity helped me fry one of my
+development Raspberry Pis. For this reason, I wholeheartedly recommend using a
+simple PCB to route the connections from the Pi to the sensors. At this time,
+there is no official TeraHz PCB, but it shall be announced and included in the
+project when basic testing will be done.
+
+GPIO can be routed to the PCB with a standard old IDE disk cable, and terminated
+with another 40-pin connector at the PCB. Sensor breakouts should be mounted
+<<<<<<< HEAD
+through standard 0.1" connectors, male on the sensor breakout and female on the
+PCB. A shitty add-on header and a shitty add-on header v1.69bis can't hurt, either.
+=======
+through standard 0.1" connectors, male on the sensor brakout and female on the
+PCB. A shitty addon header and a shitty addon header v1.69bis can't hurt, either.
+>>>>>>> fd1f07d40dace3e003e49377d4771de53f8bdeb8
+
+## SMBus sensors
+SMBus is a well-defined version of the well-known I2C bus, widely used
+in computer motherboards for low-band bandwidth communication with various ICs,
+especially sensors and power-supply related devices. This bus is broken out on
+the Raspberry Pi GPIO port as the "I2C1" bus (see picture).
+
+Pins are familiarly marked as SDA and SCL, the same as with classic I2C. They
+connect to the SDA and SCL pins on the VEML6075 and APDS-9301 sensor.
+
+## UART sensor
+<<<<<<< HEAD
+Spectral sensor attaches through the UART port on the Raspberry pi (see picture).
+=======
+Spectrometry sensor attaches through the UART port on the Raspberry pi (see picture).
+>>>>>>> fd1f07d40dace3e003e49377d4771de53f8bdeb8
+
+The Tx and Rx lines must cross over, connecting the sensor's Tx line to the
+computer's Rx line and vice versa.
+
+## Power supply
+As the sensors require only a small amount of power, they can be powered directly from the Raspberry Pi itself, leeching power from the 3.3V lines.
+
+## Ground
+There's not a lot to say here, connect sensor GND to Pi's GND.

docs/index.md

@@ -1 +1,3 @@
-This is the start page for the TeraHz documentation.
+<img alt="TeraHz logo" src="imgs/logo-sq.png" width="200px">
+# TeraHz documentation - index
+This is the starting point of TeraHz documentation.

etcs/default/avahi-daemon

@@ -1,4 +0,0 @@
-# 1 = Try to detect unicast dns servers that serve .local and disable avahi in
-# that case, 0 = Don't try to detect .local unicast dns servers, can cause
-# troubles on misconfigured networks
-AVAHI_DAEMON_DETECT_LOCAL=1

etcs/default/bluetooth

@@ -1,20 +0,0 @@
-# Defaults for bluez
-
-# start bluetooth on boot?
-# compatibility note: if this variable is _not_ found bluetooth will start
-BLUETOOTH_ENABLED=1
-
-# This setting used to switch HID devices (e.g mouse/keyboad) to HCI mode, that
-# is you will have bluetooth functionality from your dongle instead of only
-# HID. This is accomplished for supported devices by udev in
-# /lib/udev/rules.d/62-bluez-hid2hci.rules by invoking hid2hci with correct
-# parameters.
-# See /usr/share/doc/bluez/NEWS.Debian.gz for further information.
-
-# Older daemons like pand dund and hidd can be found in bluez-compat package as
-# they are deprecated and provided for backward compatibility only.
-
-# Note that not every bluetooth dongle is capable of switching back to HID mode,
-# see http://bugs.debian.org/cgi-bin/bugreport.cgi?bug=355497
-HID2HCI_ENABLED=0
-HID2HCI_UNDO=0

etcs/default/bsdmainutils

@@ -1,4 +0,0 @@
-# Uncomment the following line if you'd like all of your users'
-# ~/calendar files to be checked daily.  Calendar will send them mail
-# to remind them of upcoming events.  See calendar(1) for more details.
-#RUN_DAILY=true

etcs/default/console-setup

@@ -1,16 +0,0 @@
-# CONFIGURATION FILE FOR SETUPCON
-
-# Consult the console-setup(5) manual page.
-
-ACTIVE_CONSOLES="/dev/tty[1-6]"
-
-CHARMAP="UTF-8"
-
-CODESET="guess"
-FONTFACE=""
-FONTSIZE=""
-
-VIDEOMODE=
-
-# The following is an example how to use a braille font
-# FONT='lat9w-08.psf.gz brl-8x8.psf'

etcs/default/crda

@@ -1,11 +0,0 @@
-# Set REGDOMAIN to a ISO/IEC 3166-1 alpha2 country code so that iw(8) may set
-# the initial regulatory domain setting for IEEE 802.11 devices which operate
-# on this system.
-#
-# Governments assert the right to regulate usage of radio spectrum within
-# their respective territories so make sure you select a ISO/IEC 3166-1 alpha2
-# country code suitable for your location or you may infringe on local
-# legislature. See `/usr/share/zoneinfo/zone.tab' for a table of timezone
-# descriptions containing ISO/IEC 3166-1 alpha2 country codes.
-
-REGDOMAIN=

etcs/default/cron

@@ -1,28 +0,0 @@
-# Cron configuration options
-
-# Whether to read the system's default environment files (if present)
-# If set to "yes", cron will set a proper mail charset from the
-# locale information. If set to something other than 'yes', the default
-# charset 'C' (canonical name: ANSI_X3.4-1968) will be used.
-#
-# This has no effect on tasks running under cron; their environment can
-# only be changed via PAM or from within the crontab; see crontab(5).
-READ_ENV="yes"
-
-# Extra options for cron, see cron(8)
-#
-# For example, to enable LSB name support in /etc/cron.d/, use
-# EXTRA_OPTS='-l'  
-#
-# Or, to log standard messages, plus jobs with exit status != 0:
-# EXTRA_OPTS='-L 5'
-#
-# For quick reference, the currently available log levels are:
-#   0   no logging (errors are logged regardless)
-#   1   log start of jobs
-#   2   log end of jobs
-#   4   log jobs with exit status != 0
-#   8   log the process identifier of child process (in all logs)
-#
-#EXTRA_OPTS=""
-

etcs/default/dbus

@@ -1,7 +0,0 @@
-# This is a configuration file for /etc/init.d/dbus; it allows you to
-# perform common modifications to the behavior of the dbus daemon
-# startup without editing the init script (and thus getting prompted
-# by dpkg on upgrades).  We all love dpkg prompts.
-
-# Parameters to pass to dbus.
-PARAMS=""

etcs/default/dnsmasq

@@ -1,33 +0,0 @@
-# This file has five functions: 
-# 1) to completely disable starting dnsmasq, 
-# 2) to set DOMAIN_SUFFIX by running `dnsdomainname` 
-# 3) to select an alternative config file
-#    by setting DNSMASQ_OPTS to --conf-file=<file>
-# 4) to tell dnsmasq to read the files in /etc/dnsmasq.d for
-#    more configuration variables.
-# 5) to stop the resolvconf package from controlling dnsmasq's
-#    idea of which upstream nameservers to use.
-# For upgraders from very old versions, all the shell variables set 
-# here in previous versions are still honored by the init script
-# so if you just keep your old version of this file nothing will break.
-
-#DOMAIN_SUFFIX=`dnsdomainname`
-#DNSMASQ_OPTS="--conf-file=/etc/dnsmasq.alt"
-
-# Whether or not to run the dnsmasq daemon; set to 0 to disable.
-ENABLED=1
-
-# By default search this drop directory for configuration options.
-# Libvirt leaves a file here to make the system dnsmasq play nice.
-# Comment out this line if you don't want this. The dpkg-* are file
-# endings which cause dnsmasq to skip that file. This avoids pulling
-# in backups made by dpkg.
-CONFIG_DIR=/etc/dnsmasq.d,.dpkg-dist,.dpkg-old,.dpkg-new
-
-# If the resolvconf package is installed, dnsmasq will use its output 
-# rather than the contents of /etc/resolv.conf to find upstream 
-# nameservers. Uncommenting this line inhibits this behaviour.
-# Note that including a "resolv-file=<filename>" line in 
-# /etc/dnsmasq.conf is not enough to override resolvconf if it is
-# installed: the line below must be uncommented.
-IGNORE_RESOLVCONF=yes

etcs/default/fake-hwclock

@@ -1,2 +0,0 @@
-# Uncomment to set clock even if saved value appears to be in the past
-#FORCE=force

etcs/default/hostapd

@@ -1,20 +0,0 @@
-# Defaults for hostapd initscript
-#
-# See /usr/share/doc/hostapd/README.Debian for information about alternative
-# methods of managing hostapd.
-#
-# Uncomment and set DAEMON_CONF to the absolute path of a hostapd configuration
-# file and hostapd will be started during system boot. An example configuration
-# file can be found at /usr/share/doc/hostapd/examples/hostapd.conf.gz
-#
-DAEMON_CONF="/etc/hostapd/hostapd.conf"
-
-# Additional daemon options to be appended to hostapd command:-
-# 	-d   show more debug messages (-dd for even more)
-# 	-K   include key data in debug messages
-# 	-t   include timestamps in some debug messages
-#
-# Note that -B (daemon mode) and -P (pidfile) options are automatically
-# configured by the init.d script and must not be added to DAEMON_OPTS.
-#
-#DAEMON_OPTS=""

etcs/default/hwclock

@@ -1,19 +0,0 @@
-# Defaults for the hwclock init script.  See hwclock(5) and hwclock(8).
-
-# This is used to specify that the hardware clock incapable of storing
-# years outside the range of 1994-1999.  Set to yes if the hardware is
-# broken or no if working correctly.
-#BADYEAR=no
-
-# Set this to yes if it is possible to access the hardware clock,
-# or no if it is not.
-#HWCLOCKACCESS=yes
-
-# Set this to any options you might need to give to hwclock, such
-# as machine hardware clock type for Alphas.
-#HWCLOCKPARS=
-
-# Set this to the hardware clock device you want to use, it should
-# probably match the CONFIG_RTC_HCTOSYS_DEVICE kernel config option.
-#HCTOSYS_DEVICE=rtc0
-

etcs/default/keyboard

@@ -1,10 +0,0 @@
-# KEYBOARD CONFIGURATION FILE
-
-# Consult the keyboard(5) manual page.
-
-XKBMODEL="pc105"
-XKBLAYOUT="gb"
-XKBVARIANT=""
-XKBOPTIONS=""
-
-BACKSPACE="guess"

etcs/default/locale

@@ -1,2 +0,0 @@
-#  File generated by update-locale
-LANG=en_GB.UTF-8

etcs/default/networking

@@ -1,11 +0,0 @@
-# Configuration for networking init script being run during
-# the boot sequence
-
-# Set to 'no' to skip interfaces configuration on boot
-#CONFIGURE_INTERFACES=yes
-
-# Don't configure these interfaces. Shell wildcards supported/
-#EXCLUDE_INTERFACES=
-
-# Set to 'yes' to enable additional verbosity
-#VERBOSE=no

etcs/default/nfs-common

@@ -1,19 +0,0 @@
-# If you do not set values for the NEED_ options, they will be attempted
-# autodetected; this should be sufficient for most people. Valid alternatives
-# for the NEED_ options are "yes" and "no".
-
-# Do you want to start the statd daemon? It is not needed for NFSv4.
-NEED_STATD=
-
-# Options for rpc.statd.
-#   Should rpc.statd listen on a specific port? This is especially useful
-#   when you have a port-based firewall. To use a fixed port, set this
-#   this variable to a statd argument like: "--port 4000 --outgoing-port 4001".
-#   For more information, see rpc.statd(8) or http://wiki.debian.org/SecuringNFS
-STATDOPTS=
-
-# Do you want to start the idmapd daemon? It is only needed for NFSv4.
-NEED_IDMAPD=
-
-# Do you want to start the gssd daemon? It is required for Kerberos mounts.
-NEED_GSSD=

etcs/default/nss

@@ -1,37 +0,0 @@
-# /etc/default/nss
-# This file can theoretically contain a bunch of customization variables
-# for Name Service Switch in the GNU C library.  For now there are only
-# four variables:
-#
-# NETID_AUTHORITATIVE
-#   If set to TRUE, the initgroups() function will accept the information
-#   from the netid.byname NIS map as authoritative.  This can speed up the
-#   function significantly if the group.byname map is large.  The content
-#   of the netid.byname map is used AS IS.  The system administrator has
-#   to make sure it is correctly generated.
-#NETID_AUTHORITATIVE=TRUE
-#
-# SERVICES_AUTHORITATIVE
-#   If set to TRUE, the getservbyname{,_r}() function will assume
-#   services.byservicename NIS map exists and is authoritative, particularly
-#   that it contains both keys with /proto and without /proto for both
-#   primary service names and service aliases.  The system administrator
-#   has to make sure it is correctly generated.
-#SERVICES_AUTHORITATIVE=TRUE
-#
-# SETENT_BATCH_READ
-#  If set to TRUE, various setXXent() functions will read the entire
-#  database at once and then hand out the requests one by one from
-#  memory with every getXXent() call.  Otherwise each getXXent() call
-#  might result into a network communication with the server to get
-#  the next entry.
-#SETENT_BATCH_READ=TRUE
-#
-# ADJUNCT_AS_SHADOW
-#  If set to TRUE, the passwd routines in the NIS NSS module will not
-#  use the passwd.adjunct.byname tables to fill in the password data
-#  in the passwd structure.  This is a security problem if the NIS
-#  server cannot be trusted to send the passwd.adjuct table only to
-#  privileged clients.  Instead the passwd.adjunct.byname table is
-#  used to synthesize the shadow.byname table if it does not exist.
-ADJUNCT_AS_SHADOW=TRUE

etcs/default/raspberrypi-kernel

@@ -1,11 +0,0 @@
-# Defaults for raspberrypi-kernel
-
-# Uncomment the following line to enable generation of
-# /boot/initrd.img-KVER files (requires initramfs-tools)
-
-#INITRD=Yes
-
-# Uncomment the following line to enable generation of
-# /boot/initrd(7).img files (requires rpi-initramfs-tools)
-
-#RPI_INITRD=Yes

etcs/default/rsync

@@ -1,47 +0,0 @@
-# defaults file for rsync daemon mode
-#
-# This file is only used for init.d based systems!
-# If this system uses systemd, you can specify options etc. for rsync
-# in daemon mode by copying /lib/systemd/system/rsync.service to
-# /etc/systemd/system/rsync.service and modifying the copy; add required
-# options to the ExecStart line.
-
-# start rsync in daemon mode from init.d script?
-#  only allowed values are "true", "false", and "inetd"
-#  Use "inetd" if you want to start the rsyncd from inetd,
-#  all this does is prevent the init.d script from printing a message
-#  about not starting rsyncd (you still need to modify inetd's config yourself).
-RSYNC_ENABLE=false
-
-# which file should be used as the configuration file for rsync.
-# This file is used instead of the default /etc/rsyncd.conf
-# Warning: This option has no effect if the daemon is accessed
-#          using a remote shell. When using a different file for
-#          rsync you might want to symlink /etc/rsyncd.conf to
-#          that file.
-# RSYNC_CONFIG_FILE=
-
-# what extra options to give rsync --daemon?
-#  that excludes the --daemon; that's always done in the init.d script
-#  Possibilities are:
-#   --address=123.45.67.89		(bind to a specific IP address)
-#   --port=8730				(bind to specified port; default 873)
-RSYNC_OPTS=''
-
-# run rsyncd at a nice level?
-#  the rsync daemon can impact performance due to much I/O and CPU usage,
-#  so you may want to run it at a nicer priority than the default priority.
-#  Allowed values are 0 - 19 inclusive; 10 is a reasonable value.
-RSYNC_NICE=''
-
-# run rsyncd with ionice?
-#  "ionice" does for IO load what "nice" does for CPU load.
-#  As rsync is often used for backups which aren't all that time-critical,
-#  reducing the rsync IO priority will benefit the rest of the system.
-#  See the manpage for ionice for allowed options.
-#  -c3 is recommended, this will run rsync IO at "idle" priority. Uncomment
-#  the next line to activate this.
-# RSYNC_IONICE='-c3'
-
-# Don't forget to create an appropriate config file,
-# else the daemon will not start.

etcs/default/rsyslog

@@ -1,4 +0,0 @@
-# Options for rsyslogd
-# -x disables DNS lookups for remote messages
-# See rsyslogd(8) for more details
-RSYSLOGD_OPTIONS=""

etcs/default/ssh

@@ -1,5 +0,0 @@
-# Default settings for openssh-server. This file is sourced by /bin/sh from
-# /etc/init.d/ssh.
-
-# Options to pass to sshd
-SSHD_OPTS=

etcs/default/timidity

@@ -1,22 +0,0 @@
-# Defaults for TiMidity++ scripts
-# sourced by /etc/init.d/timidity
-# installed at /etc/default/timidity by the maintainer scripts
-# $Id: timidity.default,v 1.3 2004/08/07 14:33:26 hmh Exp $
-
-#
-# This is a POSIX shell fragment
-#
-
-SERVER_HOME=/etc/timidity
-SERVER_USER=timidity
-SERVER_NAME="TiMidity++ MIDI sequencer service"
-SERVER_GROUP=timidity
-ADDGROUP=audio
-
-# Enable MIDI sequencer (ALSA), if timidity-deamon is installed
-
-# uncomment to override enabling triggered by availability of timidity-deamon
-# TIM_ALSASEQ=false
-
-# Setting overrides (of /etc/timidity.conf) for the ALSA sequencer daemon
-TIM_ALSASEQPARAMS="-Os"

etcs/default/triggerhappy

@@ -1,17 +0,0 @@
-# Defaults for triggerhappy initscript
-# sourced by /etc/init.d/triggerhappy
-# installed at /etc/default/triggerhappy by the maintainer scripts
-
-#
-# This is a POSIX shell fragment
-#
-
-# Additional options that are passed to the Daemon.
-DAEMON_OPTS=""
-
-# The Triggerhappy daemon (thd) drops its root privileges after
-# startup and becomes "nobody". If you want it to retain its root
-# status (e.g. to run commands only accessible to the system user),
-# uncomment the following line or specifiy the user option yourself:
-#
-# DAEMON_OPTS="--user root"

etcs/default/useradd

@@ -1,37 +0,0 @@
-# Default values for useradd(8)
-#
-# The SHELL variable specifies the default login shell on your
-# system.
-# Similar to DHSELL in adduser. However, we use "sh" here because
-# useradd is a low level utility and should be as general
-# as possible
-SHELL=/bin/bash
-#
-# The default group for users
-# 100=users on Debian systems
-# Same as USERS_GID in adduser
-# This argument is used when the -n flag is specified.
-# The default behavior (when -n and -g are not specified) is to create a
-# primary user group with the same name as the user being added to the
-# system.
-# GROUP=100
-#
-# The default home directory. Same as DHOME for adduser
-# HOME=/home
-#
-# The number of days after a password expires until the account 
-# is permanently disabled
-# INACTIVE=-1
-#
-# The default expire date
-# EXPIRE=
-#
-# The SKEL variable specifies the directory containing "skeletal" user
-# files; in other words, files such as a sample .profile that will be
-# copied to the new user's home directory when it is created.
-SKEL=/etc/skel
-#
-# Defines whether the mail spool should be created while
-# creating the account
-# CREATE_MAIL_SPOOL=yes
-

etcs/dhcpcd.conf

@@ -1,59 +0,0 @@
-# A sample configuration for dhcpcd.
-# See dhcpcd.conf(5) for details.
-
-# Allow users of this group to interact with dhcpcd via the control socket.
-#controlgroup wheel
-
-# Inform the DHCP server of our hostname for DDNS.
-hostname
-
-# Use the hardware address of the interface for the Client ID.
-clientid
-# or
-# Use the same DUID + IAID as set in DHCPv6 for DHCPv4 ClientID as per RFC4361.
-# Some non-RFC compliant DHCP servers do not reply with this set.
-# In this case, comment out duid and enable clientid above.
-#duid
-
-# Persist interface configuration when dhcpcd exits.
-persistent
-
-# Rapid commit support.
-# Safe to enable by default because it requires the equivalent option set
-# on the server to actually work.
-option rapid_commit
-
-# A list of options to request from the DHCP server.
-option domain_name_servers, domain_name, domain_search, host_name
-option classless_static_routes
-# Most distributions have NTP support.
-option ntp_servers
-# Respect the network MTU. This is applied to DHCP routes.
-option interface_mtu
-
-# A ServerID is required by RFC2131.
-require dhcp_server_identifier
-
-# Generate Stable Private IPv6 Addresses instead of hardware based ones
-slaac private
-
-# Example static IP configuration:
-#interface eth0
-#static ip_address=192.168.0.10/24
-#static ip6_address=fd51:42f8:caae:d92e::ff/64
-#static routers=192.168.0.1
-#static domain_name_servers=192.168.0.1 8.8.8.8 fd51:42f8:caae:d92e::1
-
-# It is possible to fall back to a static IP if DHCP fails:
-# define static profile
-#profile static_eth0
-#static ip_address=192.168.1.23/24
-#static routers=192.168.1.1
-#static domain_name_servers=192.168.1.1
-
-# fallback to static profile on eth0
-#interface eth0
-#fallback static_eth0
-
-interface wlan0
-static ip_address=192.168.1.1/24

etcs/hostapd/edit_ssid.sh

@@ -0,0 +1,5 @@
+#!/bin/bash
+# edit_ssid.sh - edits hostapd.conf and sets a MAC address-based SSID
+ssid=`ip link | awk '/wlan0/ {getline; print $2}' | awk -v FS=':' '{printf("TeraHz_%s%s%s\n", $4, $5, $6)}'`
+sed "/ssid=.*/s/ssid=.*/ssid=$ssid/" hostapd.conf > newconf
+mv newconf hostapd.conf

etcs/hostapd/ifupdown.sh

@@ -1,146 +0,0 @@
-#!/bin/sh
-
-# Copyright (C) 2006-2009 Debian hostapd maintainers 
-# 	Faidon Liambotis <paravoid@debian.org>
-#	Kel Modderman <kel@otaku42.de>
-#
-# This program is free software; you can redistribute it and/or
-# modify it under the terms of the GNU General Public License
-# as published by the Free Software Foundation; either version 2
-# of the License, or (at your option) any later version.
-#
-# This program is distributed in the hope that it will be useful,
-# but WITHOUT ANY WARRANTY; without even the implied warranty of
-# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-# GNU General Public License for more details.
-#
-# On Debian GNU/Linux systems, the text of the GPL license,
-# version 2, can be found in /usr/share/common-licenses/GPL-2.
-
-# quit if we're called for lo
-if [ "$IFACE" = lo ]; then
-	exit 0
-fi
-
-if [ -n "$IF_HOSTAPD" ]; then
-	HOSTAPD_CONF="$IF_HOSTAPD"
-else
-	exit 0
-fi
-
-HOSTAPD_BIN="/usr/sbin/hostapd"
-HOSTAPD_PNAME="hostapd"
-HOSTAPD_PIDFILE="/run/hostapd.$IFACE.pid"
-HOSTAPD_OMIT_PIDFILE="/run/sendsigs.omit.d/hostapd.$IFACE.pid"
-
-if [ ! -x "$HOSTAPD_BIN" ]; then
-	exit 0
-fi
-
-if [ "$VERBOSITY" = "1" ]; then
-	TO_NULL="/dev/stdout"
-else
-	TO_NULL="/dev/null"
-fi
-
-hostapd_msg () {
-	case "$1" in
-		verbose)
-			shift
-			echo "$HOSTAPD_PNAME: $@" > "$TO_NULL"
-			;;
-		stderr)
-			shift
-			echo "$HOSTAPD_PNAME: $@" > /dev/stderr
-			;;
-		*)
-			;;
-	esac
-}
-
-test_hostapd_pidfile () {
-	if [ -n "$1" ] && [ -f "$2" ]; then
-		if start-stop-daemon --stop --quiet --signal 0 \
-			--exec "$1" --pidfile "$2"; then
-			return 0
-		else
-			rm -f "$2"
-			return 1
-		fi
-	else
-		return 1
-	fi
-}
-
-init_hostapd () {
-	HOSTAPD_OPTIONS="-B -P $HOSTAPD_PIDFILE $HOSTAPD_CONF"
-	HOSTAPD_MESSAGE="$HOSTAPD_BIN $HOSTAPD_OPTIONS"
-	
-	test_hostapd_pidfile "$HOSTAPD_BIN" "$HOSTAPD_PIDFILE" && return 0
-
-	hostapd_msg verbose "$HOSTAPD_MESSAGE"
-	start-stop-daemon --start --oknodo --quiet --exec "$HOSTAPD_BIN" \
-		--pidfile "$HOSTAPD_PIDFILE" -- $HOSTAPD_OPTIONS > "$TO_NULL"
-
-	if [ "$?" -ne 0 ]; then
-		return "$?"
-	fi
-
-	HOSTAPD_PIDFILE_WAIT=0
-	until [ -s "$HOSTAPD_PIDFILE" ]; do
-		if [ "$HOSTAPD_PIDFILE_WAIT" -ge 5 ]; then
-			hostapd_msg stderr \
-				"timeout waiting for pid file creation"
-			return 1
-		fi
-
-		HOSTAPD_PIDFILE_WAIT=$(($HOSTAPD_PIDFILE_WAIT + 1))
-		sleep 1
-	done
-	cat "$HOSTAPD_PIDFILE" > "$HOSTAPD_OMIT_PIDFILE"
-
-	return 0
-}
-
-kill_hostapd () {
-	HOSTAPD_MESSAGE="stopping $HOSTAPD_PNAME via pidfile: $HOSTAPD_PIDFILE"
-
-	test_hostapd_pidfile "$HOSTAPD_BIN" "$HOSTAPD_PIDFILE" || return 0
-	
-	hostapd_msg verbose "$HOSTAPD_MESSAGE"
-	start-stop-daemon --stop --oknodo --quiet --exec "$HOSTAPD_BIN" \
-		--pidfile "$HOSTAPD_PIDFILE" > "$TO_NULL"
-	
-	[ "$HOSTAPD_OMIT_PIDFILE" ] && rm -f "$HOSTAPD_OMIT_PIDFILE"
-}
-
-case "$MODE" in 
-	start)
-		case "$PHASE" in
-			pre-up)
-				init_hostapd || exit 1
-				;;
-			*)
-				hostapd_msg stderr "unknown phase: \"$PHASE\""
-				exit 1
-				;;
-		esac
-		;;
-	stop)
-		case "$PHASE" in
-			post-down)
-				kill_hostapd
-				;;
-			*)
-				hostapd_msg stderr "unknown phase: \"$PHASE\""
-				exit 1
-				;;
-		esac
-		;;
-	*)
-		hostapd_msg stderr "unknown mode: \"$MODE\""
-		exit 1
-		;;
-esac
-
-exit 0

etcs/ifupdown.sh

@@ -1,146 +0,0 @@
-#!/bin/sh
-
-# Copyright (C) 2006-2009 Debian hostapd maintainers 
-# 	Faidon Liambotis <paravoid@debian.org>
-#	Kel Modderman <kel@otaku42.de>
-#
-# This program is free software; you can redistribute it and/or
-# modify it under the terms of the GNU General Public License
-# as published by the Free Software Foundation; either version 2
-# of the License, or (at your option) any later version.
-#
-# This program is distributed in the hope that it will be useful,
-# but WITHOUT ANY WARRANTY; without even the implied warranty of
-# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-# GNU General Public License for more details.
-#
-# On Debian GNU/Linux systems, the text of the GPL license,
-# version 2, can be found in /usr/share/common-licenses/GPL-2.
-
-# quit if we're called for lo
-if [ "$IFACE" = lo ]; then
-	exit 0
-fi
-
-if [ -n "$IF_HOSTAPD" ]; then
-	HOSTAPD_CONF="$IF_HOSTAPD"
-else
-	exit 0
-fi
-
-HOSTAPD_BIN="/usr/sbin/hostapd"
-HOSTAPD_PNAME="hostapd"
-HOSTAPD_PIDFILE="/run/hostapd.$IFACE.pid"
-HOSTAPD_OMIT_PIDFILE="/run/sendsigs.omit.d/hostapd.$IFACE.pid"
-
-if [ ! -x "$HOSTAPD_BIN" ]; then
-	exit 0
-fi
-
-if [ "$VERBOSITY" = "1" ]; then
-	TO_NULL="/dev/stdout"
-else
-	TO_NULL="/dev/null"
-fi
-
-hostapd_msg () {
-	case "$1" in
-		verbose)
-			shift
-			echo "$HOSTAPD_PNAME: $@" > "$TO_NULL"
-			;;
-		stderr)
-			shift
-			echo "$HOSTAPD_PNAME: $@" > /dev/stderr
-			;;
-		*)
-			;;
-	esac
-}
-
-test_hostapd_pidfile () {
-	if [ -n "$1" ] && [ -f "$2" ]; then
-		if start-stop-daemon --stop --quiet --signal 0 \
-			--exec "$1" --pidfile "$2"; then
-			return 0
-		else
-			rm -f "$2"
-			return 1
-		fi
-	else
-		return 1
-	fi
-}
-
-init_hostapd () {
-	HOSTAPD_OPTIONS="-B -P $HOSTAPD_PIDFILE $HOSTAPD_CONF"
-	HOSTAPD_MESSAGE="$HOSTAPD_BIN $HOSTAPD_OPTIONS"
-	
-	test_hostapd_pidfile "$HOSTAPD_BIN" "$HOSTAPD_PIDFILE" && return 0
-
-	hostapd_msg verbose "$HOSTAPD_MESSAGE"
-	start-stop-daemon --start --oknodo --quiet --exec "$HOSTAPD_BIN" \
-		--pidfile "$HOSTAPD_PIDFILE" -- $HOSTAPD_OPTIONS > "$TO_NULL"
-
-	if [ "$?" -ne 0 ]; then
-		return "$?"
-	fi
-
-	HOSTAPD_PIDFILE_WAIT=0
-	until [ -s "$HOSTAPD_PIDFILE" ]; do
-		if [ "$HOSTAPD_PIDFILE_WAIT" -ge 5 ]; then
-			hostapd_msg stderr \
-				"timeout waiting for pid file creation"
-			return 1
-		fi
-
-		HOSTAPD_PIDFILE_WAIT=$(($HOSTAPD_PIDFILE_WAIT + 1))
-		sleep 1
-	done
-	cat "$HOSTAPD_PIDFILE" > "$HOSTAPD_OMIT_PIDFILE"
-
-	return 0
-}
-
-kill_hostapd () {
-	HOSTAPD_MESSAGE="stopping $HOSTAPD_PNAME via pidfile: $HOSTAPD_PIDFILE"
-
-	test_hostapd_pidfile "$HOSTAPD_BIN" "$HOSTAPD_PIDFILE" || return 0
-	
-	hostapd_msg verbose "$HOSTAPD_MESSAGE"
-	start-stop-daemon --stop --oknodo --quiet --exec "$HOSTAPD_BIN" \
-		--pidfile "$HOSTAPD_PIDFILE" > "$TO_NULL"
-	
-	[ "$HOSTAPD_OMIT_PIDFILE" ] && rm -f "$HOSTAPD_OMIT_PIDFILE"
-}
-
-case "$MODE" in 
-	start)
-		case "$PHASE" in
-			pre-up)
-				init_hostapd || exit 1
-				;;
-			*)
-				hostapd_msg stderr "unknown phase: \"$PHASE\""
-				exit 1
-				;;
-		esac
-		;;
-	stop)
-		case "$PHASE" in
-			post-down)
-				kill_hostapd
-				;;
-			*)
-				hostapd_msg stderr "unknown phase: \"$PHASE\""
-				exit 1
-				;;
-		esac
-		;;
-	*)
-		hostapd_msg stderr "unknown mode: \"$MODE\""
-		exit 1
-		;;
-esac
-
-exit 0

etcs/install.sh

@@ -0,0 +1,19 @@
+# install.sh - install TeraHz onto a Raspbian or DietPi installation
+apt -y update
+apt -y full-upgrade
+apt install -y python3 python3-pip lighttpd dnsmasq hostapd libatlas-base-dev
+pip3 install numpy pandas flask smbus2 pyserial
+
+cp -R hostapd/ /etc
+cp -R lighttpd/ /etc
+cp dnsmasq.conf /etc
+cp rc.local /etc
+cp -R ../frontend/* /var/www/html
+mkdir -p /usr/local/lib/terahz
+cp -R ../backend/* /usr/local/lib/terahz
+cd /etc/hostapd
+chmod +x edit_ssid.sh
+./edit_ssid.sh
+
+systemctl unmask dnsmasq hostapd lighttpd
+systemctl enable dnsmasq hostapd lighttpd

etcs/lighttpd/conf-available/05-auth.conf

@@ -1,25 +0,0 @@
-# /usr/share/doc/lighttpd/authentication.txt.gz
-
-server.modules                += ( "mod_auth" )
-
-# auth.backend                 = "plain"
-# auth.backend.plain.userfile  = "lighttpd.user"
-# auth.backend.plain.groupfile = "lighttpd.group"
-
-# auth.backend.ldap.hostname   = "localhost"
-# auth.backend.ldap.base-dn    = "dc=my-domain,dc=com"
-# auth.backend.ldap.filter     = "(uid=$)"
-
-# auth.require                 = ( "/server-status" => 
-#                                ( 
-#				  "method"  => "digest",
-#				  "realm"   => "download archiv",
-#				  "require" => "group=www|user=jan|host=192.168.2.10"
-#				),
-#				"/server-info" => 
-#                                ( 
-#				  "method"  => "digest",
-#				  "realm"   => "download archiv",
-#				  "require" => "group=www|user=jan|host=192.168.2.10"
-#				)
-#                              )

etcs/lighttpd/conf-available/10-accesslog.conf

@@ -1,3 +0,0 @@
-server.modules += ( "mod_accesslog" )
-
-accesslog.filename = "/var/log/lighttpd/access.log"

etcs/lighttpd/conf-available/10-cgi.conf

@@ -1,15 +0,0 @@
-# /usr/share/doc/lighttpd/cgi.txt
-
-server.modules += ( "mod_cgi" )
-
-$HTTP["url"] =~ "^/cgi-bin/" {
-	cgi.assign = ( "" => "" )
-}
-
-## Warning this represents a security risk, as it allow to execute any file
-## with a .pl/.py even outside of /usr/lib/cgi-bin.
-#
-#cgi.assign      = (
-#	".pl"  => "/usr/bin/perl",
-#	".py"  => "/usr/bin/python",
-#)

etcs/lighttpd/conf-available/10-dir-listing.conf

@@ -1,2 +0,0 @@
-dir-listing.encoding = "utf-8"
-server.dir-listing   = "enable"

etcs/lighttpd/conf-available/10-evasive.conf

@@ -1 +0,0 @@
-server.modules += ( "mod_evasive" )

etcs/lighttpd/conf-available/10-evhost.conf

@@ -1,5 +0,0 @@
-# http://redmine.lighttpd.net/wiki/1/Docs:ModEVhost
-
-server.modules += ( "mod_evhost" )
-
-evhost.path-pattern = "/srv/%_/htdocs"

etcs/lighttpd/conf-available/10-expire.conf

@@ -1,3 +0,0 @@
-# http://redmine.lighttpd.net/projects/lighttpd/wiki/Docs:ModExpire
-
-server.modules += ( "mod_expire" )

etcs/lighttpd/conf-available/10-fastcgi.conf

@@ -1,4 +0,0 @@
-# /usr/share/doc/lighttpd/fastcgi.txt.gz
-# http://redmine.lighttpd.net/projects/lighttpd/wiki/Docs:ConfigurationOptions#mod_fastcgi-fastcgi
-
-server.modules += ( "mod_fastcgi" )

etcs/lighttpd/conf-available/10-flv-streaming.conf

@@ -1 +0,0 @@
-server.modules += ( "mod_flv_streaming" )

etcs/lighttpd/conf-available/10-no-www.conf

@@ -1,3 +0,0 @@
-$HTTP["host"] =~ "^www\.(.*)" {
-  url.redirect = ( "^/(.*)" => "http://%1/$1" )
-}

etcs/lighttpd/conf-available/10-proxy.conf

@@ -1,25 +0,0 @@
-# /usr/share/doc/lighttpd/proxy.txt
-
-server.modules   += ( "mod_proxy" )
-
-## Balance algorithm, possible values are: "hash", "round-robin" or "fair" (default)
-# proxy.balance     = "hash" 
-
-
-## Redirect all queries to files ending with ".php" to 192.168.0.101:80 
-#proxy.server     = ( ".php" =>
-#                     ( 
-#                       ( "host" => "192.168.0.101",
-#                         "port" => 80
-#                       )
-#                     )
-#                    )
-
-## Redirect all connections on www.example.com to 10.0.0.1{0,1,2,3}
-#$HTTP["host"] == "www.example.com" {
-#  proxy.balance = "hash"
-#  proxy.server  = ( "" => ( ( "host" => "10.0.0.10" ),
-#                            ( "host" => "10.0.0.11" ),
-#                            ( "host" => "10.0.0.12" ),
-#                            ( "host" => "10.0.0.13" ) ) )
-#}

etcs/lighttpd/conf-available/10-rewrite.conf

@@ -1,4 +0,0 @@
-# /usr/share/doc/lighttpd/rewrite.txt
-# http://redmine.lighttpd.net/projects/lighttpd/wiki/Docs_ConfigurationOptions#mod_rewrite-rewriting
-
-server.modules += ( "mod_rewrite" )

etcs/lighttpd/conf-available/10-rrdtool.conf

@@ -1,10 +0,0 @@
-# /usr/share/doc/lighttpd/rrdtool.txt
-
-server.modules += ( "mod_rrdtool" )
-
-## path to the rrdtool binary
-rrdtool.binary   = "/usr/bin/rrdtool"
-
-## file to store the rrd database, will be created by lighttpd
-rrdtool.db-name   = "/var/www/lighttpd.rrd"
-

etcs/lighttpd/conf-available/10-simple-vhost.conf

@@ -1,11 +0,0 @@
-# /usr/share/doc/lighttpd/simple-vhost.txt
-
-server.modules += ( "mod_simple_vhost" )
-
-## The document root of a virtual host is document-root =
-##   simple-vhost.server-root + $HTTP["host"] + simple-vhost.document-root
-simple-vhost.server-root         = "/srv"
-simple-vhost.document-root       = "htdocs"
-
-## the default host if no host is sent
-simple-vhost.default-host        = "www.example.com"

etcs/lighttpd/conf-available/10-ssi.conf

@@ -1,5 +0,0 @@
-# /usr/share/doc/lighttpd/ssi.txt
-
-server.modules += ( "mod_ssi" )
-
-ssi.extension   = ( ".shtml" )

etcs/lighttpd/conf-available/10-ssl.conf

@@ -1,9 +0,0 @@
-# /usr/share/doc/lighttpd/ssl.txt
-
-$SERVER["socket"] == "0.0.0.0:443" {
-	ssl.engine  = "enable"
-	ssl.pemfile = "/etc/lighttpd/server.pem"
-
-	ssl.cipher-list = "ECDHE-RSA-AES256-SHA384:AES256-SHA256:RC4:HIGH:!MD5:!aNULL:!EDH:!AESGCM"
-	ssl.honor-cipher-order = "enable"
-}

etcs/lighttpd/conf-available/10-status.conf

@@ -1,15 +0,0 @@
-# /usr/share/doc/lighttpd/status.txt
-# http://trac.lighttpd.net/trac/wiki/Docs%3AModStatus
-
-server.modules += ( "mod_status" )
-
-# status.status-url = "/server-status"
-
-# status.config-url = "/server-config"
-
-## relative URL for a plain-text page containing the internal statistics
-# status.statistics-url = "/server-statistics"
-
-## add JavaScript which allows client-side sorting for the connection overview
-## default: enable
-# status.enable-sort = "disable"

etcs/lighttpd/conf-available/10-userdir.conf

@@ -1,13 +0,0 @@
-## The userdir module provides a simple way to link user-based directories into
-## the global namespace of the webserver.
-##
-# /usr/share/doc/lighttpd/userdir.txt
-
-server.modules      += ( "mod_userdir" )
-
-## the subdirectory of a user's home dir which should be accessible
-## under http://$host/~$user
-userdir.path         = "public_html"
-
-## The users whose home directories should not be accessible
-userdir.exclude-user = ( "root", "postmaster" )

etcs/lighttpd/conf-available/10-usertrack.conf

@@ -1 +0,0 @@
-server.modules += ( "mod_usertrack" )

etcs/lighttpd/conf-available/11-extforward.conf

@@ -1,6 +0,0 @@
-# -*- depends: accesslog -*-
-
-server.modules += ( "mod_extforward" )
-
-# extforward.headers = ("X-Cluster-Client-Ip")
-# extforward.forwarder = ("10.0.0.232" => "trust")

etcs/lighttpd/conf-available/15-fastcgi-php.conf

@@ -1,20 +0,0 @@
-# -*- depends: fastcgi -*-
-# /usr/share/doc/lighttpd/fastcgi.txt.gz
-# http://redmine.lighttpd.net/projects/lighttpd/wiki/Docs:ConfigurationOptions#mod_fastcgi-fastcgi
-
-## Start an FastCGI server for php (needs the php5-cgi package)
-fastcgi.server += ( ".php" => 
-	((
-		"bin-path" => "/usr/bin/php-cgi",
-		"socket" => "/var/run/lighttpd/php.socket",
-		"max-procs" => 1,
-		"bin-environment" => ( 
-			"PHP_FCGI_CHILDREN" => "4",
-			"PHP_FCGI_MAX_REQUESTS" => "10000"
-		),
-		"bin-copy-environment" => (
-			"PATH", "SHELL", "USER"
-		),
-		"broken-scriptfilename" => "enable"
-	))
-)

etcs/lighttpd/conf-available/90-debian-doc.conf

@@ -1,15 +0,0 @@
-#### handle Debian Policy Manual, Section 11.5. urls
-## by default allow them only from localhost
-$HTTP["remoteip"] =~ "^127\.0\.0\.1$|^::1$" {
-        alias.url += (
-		"/cgi-bin/" => "/usr/lib/cgi-bin/",
-                "/doc/" => "/usr/share/doc/",
-                "/images/" => "/usr/share/images/"
-        )
-        $HTTP["url"] =~ "^/doc/|^/images/" {
-                dir-listing.activate = "enable"
-        }
-        $HTTP["url"] =~ "^/cgi-bin/" {
-                cgi.assign = ( "" => "" )
-        }
-}

etcs/lighttpd/conf-available/90-javascript-alias.conf

@@ -1 +0,0 @@
-alias.url += ("/javascript" => "/usr/share/javascript")

etcs/lighttpd/conf-available/README

@@ -1,22 +0,0 @@
-ligghttpd Configuration under Debian GNU/Linux
-==============================================
-
-Files and Directories in /etc/lighttpd:
----------------------------------------
-
-lighttpd.conf:
-	 main configuration file
-
-conf-available/
-	This directory contains a series of .conf files. These files contain
-        configuration directives necessary to load and run webserver modules.
-	If you want to create your own files they names should be
-        build as nn-name.conf where "nn" is two digit number (number
-	is used to find order for loading files)
-
-conf-enabled/	  
-	To actually enable a module for lighttpd, it is necessary to create a 
-        symlink in this directory to the .conf file in conf-available/.
-
-Enabling and disabling modules could be done by provided
-/usr/sbin/lighty-enable-mod and /usr/sbin/lighty-disable-mod scripts. 

etcs/lighttpd/conf-enabled/90-javascript-alias.conf

@@ -1 +0,0 @@
-../conf-available/90-javascript-alias.conf

etcs/lighttpd/lighttpd.conf

@@ -2,10 +2,10 @@ server.modules = (
 	"mod_access",
 	"mod_alias",
 	"mod_compress",
- 	"mod_redirect",
+ 	"mod_redirect"
 )
 
-server.document-root        = "/home/terahz/TeraHz/frontend"
+server.document-root        = "/var/www/html"
 server.upload-dirs          = ( "/var/cache/lighttpd/uploads" )
 server.errorlog             = "/var/log/lighttpd/error.log"
 server.pid-file             = "/var/run/lighttpd.pid"

etcs/rc.local

@@ -10,10 +10,5 @@
 # bits.
 #
 # By default this script does nothing.
-
-# Print the IP address
-
-cd /home/pi/TeraHz/backend
-service lighttpd start
-flask run -h 0.0.0.0 &
-exit 0
+/usr/local/lib/terahz/run.sh &
+disown

etcs/resolvconf.conf

@@ -1,14 +0,0 @@
-# Configuration for resolvconf(8)
-# See resolvconf.conf(5) for details
-
-resolv_conf=/etc/resolv.conf
-# If you run a local name server, you should uncomment the below line and
-# configure your subscribers configuration files below.
-name_servers=1.1.1.1
-
-# Mirror the Debian package defaults for the below resolvers
-# so that resolvconf integrates seemlessly.
-#dnsmasq_resolv=/var/run/dnsmasq/resolv.conf
-#pdnsd_conf=/etc/pdnsd.conf
-#unbound_conf=/var/cache/unbound/resolvconf_resolvers.conf
-resolvconf=NO

frontend/frontend.js

@@ -1,56 +1,46 @@
 // All code in this file is licensed under the ISC license, provided in LICENSE.txt
-var globalObject;
 $('#update').click(function () {
   updateData();
 });
 // jQuery event binder
 
 function updateData () {
-  // download data from backend into obj
   const url = 'http://' + window.location.hostname + ':5000/data';
-  // I understand how bad this line looks. Please don't judge me...
-  $.get(url, function (data, status) { // standard jQuery AJAX
-    globalObject = data;
-  })
-    .done(function () {
-      fillTable(globalObject, $('#specter'));
-      graphSpectralData(globalObject, $('#spectrogram'));
-      fillLuxUv(globalObject, $('#luxuv'));
-    });
-}
-
-function fillTable (obj, dom) {
-  // applies data in obj[0] to HTML tags with the obj's key as ID.
-  // useful mostly for slapping spectrometer JSON into HTML tables.
-  for (var i in obj[0]) {
-    $(dom).find('#' + i).text(obj[0][i]);
-  }
+  $.ajax({ // spawn an AJAX request
+    url: url,
+    success: function (data, status) {
+      console.log(data);
+      graphSpectralData(data[0], 0);
+      fillTableData(data);
+    },
+    timeout: 2500 // this should be a pretty sane timeout
+  });
 }
 
 function graphSpectralData (obj, dom) {
-  // graphs the data from obj[0] into canvas at dom
-  var arr = [];
-  ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'R', 'I', 'S', 'J', 'T', 'U', 'V', 'W', 'K', 'L'].forEach(function (i) {
-    arr.push(obj[0][i]);
-  });
-  var chart = new Chart(dom, {
-    type: 'line',
-    data: {
-      labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'R', 'I', 'S', 'J', 'T', 'U', 'V', 'W', 'K', 'L'],
-      datasets: [{
-        label: 'Spectrometer data',
-        data: arr
-      }]
-    },
-    options: {
-      responsive: false
-    }
+  // graph spectral data in obj into dom
+  var graphPoints = [];
+  var graphXTicks = [];
+
+  Object.keys(obj).forEach((element, index) => {
+    graphPoints.push([index, obj[element]]); // build array of points
+    graphXTicks.push([index, element]); // build array of axis labels
   });
+  // console.log(graphPoints);
+  const options = {
+    grid: {color: 'white'},
+    xaxis: {ticks: graphXTicks}
+  };
+  $.plot('#graph', [graphPoints], options);
+  // flot expects an array of arrays (lines) of 2-element arrays (points)
 }
 
-function fillLuxUv (obj, dom) {
-  $(dom).find('#lx').text(obj[1]);
-  $(dom).find('#uva').text(obj[2][0]);
-  $(dom).find('#uvb').text(obj[2][1]);
-  $(dom).find('#uvi').text(obj[2][2]);
+function fillTableData (obj) {
+  // fill the obj data into HTML tables
+  Object.keys(obj[0])
+    .forEach((element) => { $('#' + element).text(obj[0][element]); });
+  $('#lx').text(obj[1]);
+  $('#uva').text(obj[2][0]);
+  $('#uvb').text(obj[2][1]);
+  $('#uvi').text(obj[2][2]);
 }

frontend/index.html

@@ -10,16 +10,17 @@
 
 <body>
   <div class="container text-center">
-    <h1>TeraHz</h1>
+    <h1><img src="lib/logo-sq.png" height="64px">TeraHz</h1>
+
   </div>
   <div class="container">
     <button id="update" class="btn btn-primary m-1 float-right">Get data</button>
     <p id="debug">
     </p>
     <h3>Spectrogram</h3>
-    <canvas id="spectrogram" width="640px" height="480"></canvas>
+    <div id="graph" style="height:480px;width:720px"></div>
     <h3>Spectral readings</h3>
-    <table class="table table-sm" id="specter">
+    <table class="table table-dark table-sm" id="specter">
       <thead class="thead-dark">
         <tr>
           <th>Band</th>
@@ -120,7 +121,7 @@
     </table>
     <br>
     <h3>Lux and UV readings</h3>
-    <table class="table" id="luxuv">
+    <table class="table-dark table" id="luxuv">
       <thead class="thead-dark">
         <tr>
           <th>Parameter</th>
@@ -147,8 +148,15 @@
   </div>
   <script src="lib/bootstrap.bundle.min.js"></script>
   <script src="lib/jquery-3.4.1.min.js"></script>
-  <script src="lib/chart.bundle.js"></script>
+  <script src="lib/flot/jquery.flot.js"></script>
   <script src="frontend.js"></script>
+  <script src="lib/flot/jquery.canvaswrapper.js"></script>
+  <script src="lib/flot/jquery.colorhelpers.js"></script>
+  <script src="lib/flot/jquery.flot.js"></script>
+  <script src="lib/flot/jquery.flot.saturated.js"></script>
+  <script src="lib/flot/jquery.flot.browser.js"></script>
+  <script src="lib/flot/jquery.flot.drawSeries.js"></script>
+  <script src="lib/flot/jquery.flot.uiConstants.js"></script>
 </body>
 
 </html>

frontend/lib/flot/jquery.canvaswrapper.js

@@ -0,0 +1,550 @@
+/** ## jquery.flot.canvaswrapper
+
+This plugin contains the function for creating and manipulating both the canvas
+layers and svg layers.
+
+The Canvas object is a wrapper around an HTML5 canvas tag.
+The constructor Canvas(cls, container) takes as parameters cls,
+the list of classes to apply to the canvas adnd the containter,
+element onto which to append the canvas. The canvas operations
+don't work unless the canvas is attached to the DOM.
+
+### jquery.canvaswrapper.js API functions
+*/
+
+(function($) {
+    var Canvas = function(cls, container) {
+        var element = container.getElementsByClassName(cls)[0];
+
+        if (!element) {
+            element = document.createElement('canvas');
+            element.className = cls;
+            element.style.direction = 'ltr';
+            element.style.position = 'absolute';
+            element.style.left = '0px';
+            element.style.top = '0px';
+
+            container.appendChild(element);
+
+            // If HTML5 Canvas isn't available, throw
+
+            if (!element.getContext) {
+                throw new Error('Canvas is not available.');
+            }
+        }
+
+        this.element = element;
+
+        var context = this.context = element.getContext('2d');
+        this.pixelRatio = $.plot.browser.getPixelRatio(context);
+
+        // Size the canvas to match the internal dimensions of its container
+        var width = $(container).width();
+        var height = $(container).height();
+        this.resize(width, height);
+
+        // Collection of HTML div layers for text overlaid onto the canvas
+
+        this.SVGContainer = null;
+        this.SVG = {};
+
+        // Cache of text fragments and metrics, so we can avoid expensively
+        // re-calculating them when the plot is re-rendered in a loop.
+
+        this._textCache = {};
+    }
+
+    /**
+    - resize(width, height)
+
+     Resizes the canvas to the given dimensions.
+     The width represents the new width of the canvas, meanwhile the height
+     is the new height of the canvas, both of them in pixels.
+    */
+
+    Canvas.prototype.resize = function(width, height) {
+        var minSize = 10;
+        width = width < minSize ? minSize : width;
+        height = height < minSize ? minSize : height;
+
+        var element = this.element,
+            context = this.context,
+            pixelRatio = this.pixelRatio;
+
+        // Resize the canvas, increasing its density based on the display's
+        // pixel ratio; basically giving it more pixels without increasing the
+        // size of its element, to take advantage of the fact that retina
+        // displays have that many more pixels in the same advertised space.
+
+        // Resizing should reset the state (excanvas seems to be buggy though)
+
+        if (this.width !== width) {
+            element.width = width * pixelRatio;
+            element.style.width = width + 'px';
+            this.width = width;
+        }
+
+        if (this.height !== height) {
+            element.height = height * pixelRatio;
+            element.style.height = height + 'px';
+            this.height = height;
+        }
+
+        // Save the context, so we can reset in case we get replotted.  The
+        // restore ensure that we're really back at the initial state, and
+        // should be safe even if we haven't saved the initial state yet.
+
+        context.restore();
+        context.save();
+
+        // Scale the coordinate space to match the display density; so even though we
+        // may have twice as many pixels, we still want lines and other drawing to
+        // appear at the same size; the extra pixels will just make them crisper.
+
+        context.scale(pixelRatio, pixelRatio);
+    };
+
+    /**
+    - clear()
+
+     Clears the entire canvas area, not including any overlaid HTML text
+    */
+    Canvas.prototype.clear = function() {
+        this.context.clearRect(0, 0, this.width, this.height);
+    };
+
+    /**
+    - render()
+
+     Finishes rendering the canvas, including managing the text overlay.
+    */
+    Canvas.prototype.render = function() {
+        var cache = this._textCache;
+
+        // For each text layer, add elements marked as active that haven't
+        // already been rendered, and remove those that are no longer active.
+
+        for (var layerKey in cache) {
+            if (hasOwnProperty.call(cache, layerKey)) {
+                var layer = this.getSVGLayer(layerKey),
+                    layerCache = cache[layerKey];
+
+                var display = layer.style.display;
+                layer.style.display = 'none';
+
+                for (var styleKey in layerCache) {
+                    if (hasOwnProperty.call(layerCache, styleKey)) {
+                        var styleCache = layerCache[styleKey];
+                        for (var key in styleCache) {
+                            if (hasOwnProperty.call(styleCache, key)) {
+                                var val = styleCache[key],
+                                    positions = val.positions;
+
+                                for (var i = 0, position; positions[i]; i++) {
+                                    position = positions[i];
+                                    if (position.active) {
+                                        if (!position.rendered) {
+                                            layer.appendChild(position.element);
+                                            position.rendered = true;
+                                        }
+                                    } else {
+                                        positions.splice(i--, 1);
+                                        if (position.rendered) {
+                                            while (position.element.firstChild) {
+                                                position.element.removeChild(position.element.firstChild);
+                                            }
+                                            position.element.parentNode.removeChild(position.element);
+                                        }
+                                    }
+                                }
+
+                                if (positions.length === 0) {
+                                    if (val.measured) {
+                                        val.measured = false;
+                                    } else {
+                                        delete styleCache[key];
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+
+                layer.style.display = display;
+            }
+        }
+    };
+
+    /**
+    - getSVGLayer(classes)
+
+     Creates (if necessary) and returns the SVG overlay container.
+     The classes string represents the string of space-separated CSS classes
+     used to uniquely identify the text layer. It return the svg-layer div.
+    */
+    Canvas.prototype.getSVGLayer = function(classes) {
+        var layer = this.SVG[classes];
+
+        // Create the SVG layer if it doesn't exist
+
+        if (!layer) {
+            // Create the svg layer container, if it doesn't exist
+
+            var svgElement;
+
+            if (!this.SVGContainer) {
+                this.SVGContainer = document.createElement('div');
+                this.SVGContainer.className = 'flot-svg';
+                this.SVGContainer.style.position = 'absolute';
+                this.SVGContainer.style.top = '0px';
+                this.SVGContainer.style.left = '0px';
+                this.SVGContainer.style.height = '100%';
+                this.SVGContainer.style.width = '100%';
+                this.SVGContainer.style.pointerEvents = 'none';
+                this.element.parentNode.appendChild(this.SVGContainer);
+
+                svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+                svgElement.style.width = '100%';
+                svgElement.style.height = '100%';
+
+                this.SVGContainer.appendChild(svgElement);
+            } else {
+                svgElement = this.SVGContainer.firstChild;
+            }
+
+            layer = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+            layer.setAttribute('class', classes);
+            layer.style.position = 'absolute';
+            layer.style.top = '0px';
+            layer.style.left = '0px';
+            layer.style.bottom = '0px';
+            layer.style.right = '0px';
+            svgElement.appendChild(layer);
+            this.SVG[classes] = layer;
+        }
+
+        return layer;
+    };
+
+    /**
+    - getTextInfo(layer, text, font, angle, width)
+
+     Creates (if necessary) and returns a text info object.
+     The object looks like this:
+     ```js
+     {
+         width //Width of the text's wrapper div.
+         height //Height of the text's wrapper div.
+         element //The HTML div containing the text.
+         positions //Array of positions at which this text is drawn.
+      }
+      ```
+      The positions array contains objects that look like this:
+      ```js
+      {
+         active //Flag indicating whether the text should be visible.
+         rendered //Flag indicating whether the text is currently visible.
+         element //The HTML div containing the text.
+         text //The actual text and is identical with element[0].textContent.
+         x //X coordinate at which to draw the text.
+         y //Y coordinate at which to draw the text.
+      }
+      ```
+      Each position after the first receives a clone of the original element.
+      The idea is that that the width, height, and general 'identity' of the
+      text is constant no matter where it is placed; the placements are a
+      secondary property.
+
+      Canvas maintains a cache of recently-used text info objects; getTextInfo
+      either returns the cached element or creates a new entry.
+
+     The layer parameter is string of space-separated CSS classes uniquely
+     identifying the layer containing this text.
+     Text is the text string to retrieve info for.
+     Font is either a string of space-separated CSS classes or a font-spec object,
+     defining the text's font and style.
+     Angle is the angle at which to rotate the text, in degrees. Angle is currently unused,
+     it will be implemented in the future.
+     The last parameter is the Maximum width of the text before it wraps.
+     The method returns a text info object.
+    */
+    Canvas.prototype.getTextInfo = function(layer, text, font, angle, width) {
+        var textStyle, layerCache, styleCache, info;
+
+        // Cast the value to a string, in case we were given a number or such
+
+        text = '' + text;
+
+        // If the font is a font-spec object, generate a CSS font definition
+
+        if (typeof font === 'object') {
+            textStyle = font.style + ' ' + font.variant + ' ' + font.weight + ' ' + font.size + 'px/' + font.lineHeight + 'px ' + font.family;
+        } else {
+            textStyle = font;
+        }
+
+        // Retrieve (or create) the cache for the text's layer and styles
+
+        layerCache = this._textCache[layer];
+
+        if (layerCache == null) {
+            layerCache = this._textCache[layer] = {};
+        }
+
+        styleCache = layerCache[textStyle];
+
+        if (styleCache == null) {
+            styleCache = layerCache[textStyle] = {};
+        }
+
+        var key = generateKey(text);
+        info = styleCache[key];
+
+        // If we can't find a matching element in our cache, create a new one
+
+        if (!info) {
+            var element = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+            if (text.indexOf('<br>') !== -1) {
+                addTspanElements(text, element, -9999);
+            } else {
+                var textNode = document.createTextNode(text);
+                element.appendChild(textNode);
+            }
+
+            element.style.position = 'absolute';
+            element.style.maxWidth = width;
+            element.setAttributeNS(null, 'x', -9999);
+            element.setAttributeNS(null, 'y', -9999);
+
+            if (typeof font === 'object') {
+                element.style.font = textStyle;
+                element.style.fill = font.fill;
+            } else if (typeof font === 'string') {
+                element.setAttribute('class', font);
+            }
+
+            this.getSVGLayer(layer).appendChild(element);
+            var elementRect = element.getBBox();
+
+            info = styleCache[key] = {
+                width: elementRect.width,
+                height: elementRect.height,
+                measured: true,
+                element: element,
+                positions: []
+            };
+
+            //remove elements from dom
+            while (element.firstChild) {
+                element.removeChild(element.firstChild);
+            }
+            element.parentNode.removeChild(element);
+        }
+
+        info.measured = true;
+        return info;
+    };
+
+    function updateTransforms (element, transforms) {
+        element.transform.baseVal.clear();
+        if (transforms) {
+            transforms.forEach(function(t) {
+                element.transform.baseVal.appendItem(t);
+            });
+        }
+    }
+
+    /**
+    - addText (layer, x, y, text, font, angle, width, halign, valign, transforms)
+
+     Adds a text string to the canvas text overlay.
+     The text isn't drawn immediately; it is marked as rendering, which will
+     result in its addition to the canvas on the next render pass.
+
+     The layer is string of space-separated CSS classes uniquely
+     identifying the layer containing this text.
+     X and Y represents the X and Y coordinate at which to draw the text.
+     and text is the string to draw
+    */
+    Canvas.prototype.addText = function(layer, x, y, text, font, angle, width, halign, valign, transforms) {
+        var info = this.getTextInfo(layer, text, font, angle, width),
+            positions = info.positions;
+
+        // Tweak the div's position to match the text's alignment
+
+        if (halign === 'center') {
+            x -= info.width / 2;
+        } else if (halign === 'right') {
+            x -= info.width;
+        }
+
+        if (valign === 'middle') {
+            y -= info.height / 2;
+        } else if (valign === 'bottom') {
+            y -= info.height;
+        }
+
+        y += 0.75 * info.height;
+
+
+        // Determine whether this text already exists at this position.
+        // If so, mark it for inclusion in the next render pass.
+
+        for (var i = 0, position; positions[i]; i++) {
+            position = positions[i];
+            if (position.x === x && position.y === y && position.text === text) {
+                position.active = true;
+                // update the transforms
+                updateTransforms(position.element, transforms);
+
+                return;
+            } else if (position.active === false) {
+                position.active = true;
+                position.text = text;
+                if (text.indexOf('<br>') !== -1) {
+                    y -= 0.25 * info.height;
+                    addTspanElements(text, position.element, x);
+                } else {
+                    position.element.textContent = text;
+                }
+                position.element.setAttributeNS(null, 'x', x);
+                position.element.setAttributeNS(null, 'y', y);
+                position.x = x;
+                position.y = y;
+                // update the transforms
+                updateTransforms(position.element, transforms);
+
+                return;
+            }
+        }
+
+        // If the text doesn't exist at this position, create a new entry
+
+        // For the very first position we'll re-use the original element,
+        // while for subsequent ones we'll clone it.
+
+        position = {
+            active: true,
+            rendered: false,
+            element: positions.length ? info.element.cloneNode() : info.element,
+            text: text,
+            x: x,
+            y: y
+        };
+
+        positions.push(position);
+
+        if (text.indexOf('<br>') !== -1) {
+            y -= 0.25 * info.height;
+            addTspanElements(text, position.element, x);
+        } else {
+            position.element.textContent = text;
+        }
+
+        // Move the element to its final position within the container
+        position.element.setAttributeNS(null, 'x', x);
+        position.element.setAttributeNS(null, 'y', y);
+        position.element.style.textAlign = halign;
+        // update the transforms
+        updateTransforms(position.element, transforms);
+   };
+
+    var addTspanElements = function(text, element, x) {
+        var lines = text.split('<br>'),
+            tspan, i, offset;
+
+        for (i = 0; i < lines.length; i++) {
+            if (!element.childNodes[i]) {
+                tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
+                element.appendChild(tspan);
+            } else {
+                tspan = element.childNodes[i];
+            }
+            tspan.textContent = lines[i];
+            offset = i * 1 + 'em';
+            tspan.setAttributeNS(null, 'dy', offset);
+            tspan.setAttributeNS(null, 'x', x);
+        }
+    }
+
+    /**
+    - removeText (layer, x, y, text, font, angle)
+
+      The function removes one or more text strings from the canvas text overlay.
+      If no parameters are given, all text within the layer is removed.
+
+      Note that the text is not immediately removed; it is simply marked as
+      inactive, which will result in its removal on the next render pass.
+      This avoids the performance penalty for 'clear and redraw' behavior,
+      where we potentially get rid of all text on a layer, but will likely
+      add back most or all of it later, as when redrawing axes, for example.
+
+      The layer is a string of space-separated CSS classes uniquely
+      identifying the layer containing this text. The following parameter are
+      X and Y coordinate of the text.
+      Text is the string to remove, while the font is either a string of space-separated CSS
+      classes or a font-spec object, defining the text's font and style.
+     */
+    Canvas.prototype.removeText = function(layer, x, y, text, font, angle) {
+        var info, htmlYCoord;
+        if (text == null) {
+            var layerCache = this._textCache[layer];
+            if (layerCache != null) {
+                for (var styleKey in layerCache) {
+                    if (hasOwnProperty.call(layerCache, styleKey)) {
+                        var styleCache = layerCache[styleKey];
+                        for (var key in styleCache) {
+                            if (hasOwnProperty.call(styleCache, key)) {
+                                var positions = styleCache[key].positions;
+                                positions.forEach(function(position) {
+                                    position.active = false;
+                                });
+                            }
+                        }
+                    }
+                }
+            }
+        } else {
+            info = this.getTextInfo(layer, text, font, angle);
+            positions = info.positions;
+            positions.forEach(function(position) {
+                htmlYCoord = y + 0.75 * info.height;
+                if (position.x === x && position.y === htmlYCoord && position.text === text) {
+                    position.active = false;
+                }
+            });
+        }
+    };
+
+    /**
+    - clearCache()
+
+     Clears the cache used to speed up the text size measurements.
+     As an (unfortunate) side effect all text within the text Layer is removed.
+     Use this function before plot.setupGrid() and plot.draw() if the plot just
+     became visible or the styles changed.
+    */
+    Canvas.prototype.clearCache = function() {
+        var cache = this._textCache;
+        for (var layerKey in cache) {
+            if (hasOwnProperty.call(cache, layerKey)) {
+                var layer = this.getSVGLayer(layerKey);
+                while (layer.firstChild) {
+                    layer.removeChild(layer.firstChild);
+                }
+            }
+        };
+
+        this._textCache = {};
+    };
+
+    function generateKey(text) {
+        return text.replace(/0|1|2|3|4|5|6|7|8|9/g, '0');
+    }
+
+    if (!window.Flot) {
+        window.Flot = {};
+    }
+
+    window.Flot.Canvas = Canvas;
+})(jQuery);

frontend/lib/flot/jquery.colorhelpers.js

@@ -0,0 +1,199 @@
+/* Plugin for jQuery for working with colors.
+ *
+ * Version 1.1.
+ *
+ * Inspiration from jQuery color animation plugin by John Resig.
+ *
+ * Released under the MIT license by Ole Laursen, October 2009.
+ *
+ * Examples:
+ *
+ *   $.color.parse("#fff").scale('rgb', 0.25).add('a', -0.5).toString()
+ *   var c = $.color.extract($("#mydiv"), 'background-color');
+ *   console.log(c.r, c.g, c.b, c.a);
+ *   $.color.make(100, 50, 25, 0.4).toString() // returns "rgba(100,50,25,0.4)"
+ *
+ * Note that .scale() and .add() return the same modified object
+ * instead of making a new one.
+ *
+ * V. 1.1: Fix error handling so e.g. parsing an empty string does
+ * produce a color rather than just crashing.
+ */
+
+(function($) {
+    $.color = {};
+
+    // construct color object with some convenient chainable helpers
+    $.color.make = function (r, g, b, a) {
+        var o = {};
+        o.r = r || 0;
+        o.g = g || 0;
+        o.b = b || 0;
+        o.a = a != null ? a : 1;
+
+        o.add = function (c, d) {
+            for (var i = 0; i < c.length; ++i) {
+                o[c.charAt(i)] += d;
+            }
+
+            return o.normalize();
+        };
+
+        o.scale = function (c, f) {
+            for (var i = 0; i < c.length; ++i) {
+                o[c.charAt(i)] *= f;
+            }
+
+            return o.normalize();
+        };
+
+        o.toString = function () {
+            if (o.a >= 1.0) {
+                return "rgb(" + [o.r, o.g, o.b].join(",") + ")";
+            } else {
+                return "rgba(" + [o.r, o.g, o.b, o.a].join(",") + ")";
+            }
+        };
+
+        o.normalize = function () {
+            function clamp(min, value, max) {
+                return value < min ? min : (value > max ? max : value);
+            }
+
+            o.r = clamp(0, parseInt(o.r), 255);
+            o.g = clamp(0, parseInt(o.g), 255);
+            o.b = clamp(0, parseInt(o.b), 255);
+            o.a = clamp(0, o.a, 1);
+            return o;
+        };
+
+        o.clone = function () {
+            return $.color.make(o.r, o.b, o.g, o.a);
+        };
+
+        return o.normalize();
+    }
+
+    // extract CSS color property from element, going up in the DOM
+    // if it's "transparent"
+    $.color.extract = function (elem, css) {
+        var c;
+
+        do {
+            c = elem.css(css).toLowerCase();
+            // keep going until we find an element that has color, or
+            // we hit the body or root (have no parent)
+            if (c !== '' && c !== 'transparent') {
+                break;
+            }
+
+            elem = elem.parent();
+        } while (elem.length && !$.nodeName(elem.get(0), "body"));
+
+        // catch Safari's way of signalling transparent
+        if (c === "rgba(0, 0, 0, 0)") {
+            c = "transparent";
+        }
+
+        return $.color.parse(c);
+    }
+
+    // parse CSS color string (like "rgb(10, 32, 43)" or "#fff"),
+    // returns color object, if parsing failed, you get black (0, 0,
+    // 0) out
+    $.color.parse = function (str) {
+        var res, m = $.color.make;
+
+        // Look for rgb(num,num,num)
+        res = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(str);
+        if (res) {
+            return m(parseInt(res[1], 10), parseInt(res[2], 10), parseInt(res[3], 10));
+        }
+
+        // Look for rgba(num,num,num,num)
+        res = /rgba\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]+(?:\.[0-9]+)?)\s*\)/.exec(str)
+        if (res) {
+            return m(parseInt(res[1], 10), parseInt(res[2], 10), parseInt(res[3], 10), parseFloat(res[4]));
+        }
+
+        // Look for rgb(num%,num%,num%)
+        res = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)%\s*,\s*([0-9]+(?:\.[0-9]+)?)%\s*,\s*([0-9]+(?:\.[0-9]+)?)%\s*\)/.exec(str);
+        if (res) {
+            return m(parseFloat(res[1]) * 2.55, parseFloat(res[2]) * 2.55, parseFloat(res[3]) * 2.55);
+        }
+
+        // Look for rgba(num%,num%,num%,num)
+        res = /rgba\(\s*([0-9]+(?:\.[0-9]+)?)%\s*,\s*([0-9]+(?:\.[0-9]+)?)%\s*,\s*([0-9]+(?:\.[0-9]+)?)%\s*,\s*([0-9]+(?:\.[0-9]+)?)\s*\)/.exec(str);
+        if (res) {
+            return m(parseFloat(res[1]) * 2.55, parseFloat(res[2]) * 2.55, parseFloat(res[3]) * 2.55, parseFloat(res[4]));
+        }
+
+        // Look for #a0b1c2
+        res = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(str);
+        if (res) {
+            return m(parseInt(res[1], 16), parseInt(res[2], 16), parseInt(res[3], 16));
+        }
+
+        // Look for #fff
+        res = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(str);
+        if (res) {
+            return m(parseInt(res[1] + res[1], 16), parseInt(res[2] + res[2], 16), parseInt(res[3] + res[3], 16));
+        }
+
+        // Otherwise, we're most likely dealing with a named color
+        var name = $.trim(str).toLowerCase();
+        if (name === "transparent") {
+            return m(255, 255, 255, 0);
+        } else {
+            // default to black
+            res = lookupColors[name] || [0, 0, 0];
+            return m(res[0], res[1], res[2]);
+        }
+    }
+
+    var lookupColors = {
+        aqua: [0, 255, 255],
+        azure: [240, 255, 255],
+        beige: [245, 245, 220],
+        black: [0, 0, 0],
+        blue: [0, 0, 255],
+        brown: [165, 42, 42],
+        cyan: [0, 255, 255],
+        darkblue: [0, 0, 139],
+        darkcyan: [0, 139, 139],
+        darkgrey: [169, 169, 169],
+        darkgreen: [0, 100, 0],
+        darkkhaki: [189, 183, 107],
+        darkmagenta: [139, 0, 139],
+        darkolivegreen: [85, 107, 47],
+        darkorange: [255, 140, 0],
+        darkorchid: [153, 50, 204],
+        darkred: [139, 0, 0],
+        darksalmon: [233, 150, 122],
+        darkviolet: [148, 0, 211],
+        fuchsia: [255, 0, 255],
+        gold: [255, 215, 0],
+        green: [0, 128, 0],
+        indigo: [75, 0, 130],
+        khaki: [240, 230, 140],
+        lightblue: [173, 216, 230],
+        lightcyan: [224, 255, 255],
+        lightgreen: [144, 238, 144],
+        lightgrey: [211, 211, 211],
+        lightpink: [255, 182, 193],
+        lightyellow: [255, 255, 224],
+        lime: [0, 255, 0],
+        magenta: [255, 0, 255],
+        maroon: [128, 0, 0],
+        navy: [0, 0, 128],
+        olive: [128, 128, 0],
+        orange: [255, 165, 0],
+        pink: [255, 192, 203],
+        purple: [128, 0, 128],
+        violet: [128, 0, 128],
+        red: [255, 0, 0],
+        silver: [192, 192, 192],
+        white: [255, 255, 255],
+        yellow: [255, 255, 0]
+    };
+})(jQuery);

frontend/lib/flot/jquery.flot.axislabels.js

@@ -0,0 +1,212 @@
+/*
+Axis label plugin for flot
+
+Derived from:
+Axis Labels Plugin for flot.
+http://github.com/markrcote/flot-axislabels
+
+Original code is Copyright (c) 2010 Xuan Luo.
+Original code was released under the GPLv3 license by Xuan Luo, September 2010.
+Original code was rereleased under the MIT license by Xuan Luo, April 2012.
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+*/
+
+(function($) {
+    "use strict";
+
+    var options = {
+        axisLabels: {
+            show: true
+        }
+    };
+
+    function AxisLabel(axisName, position, padding, placeholder, axisLabel, surface) {
+        this.axisName = axisName;
+        this.position = position;
+        this.padding = padding;
+        this.placeholder = placeholder;
+        this.axisLabel = axisLabel;
+        this.surface = surface;
+        this.width = 0;
+        this.height = 0;
+        this.elem = null;
+    }
+
+    AxisLabel.prototype.calculateSize = function() {
+        var axisId = this.axisName + 'Label',
+            layerId = axisId + 'Layer',
+            className = axisId + ' axisLabels';
+
+        var info = this.surface.getTextInfo(layerId, this.axisLabel, className);
+        this.labelWidth = info.width;
+        this.labelHeight = info.height;
+
+        if (this.position === 'left' || this.position === 'right') {
+            this.width = this.labelHeight + this.padding;
+            this.height = 0;
+        } else {
+            this.width = 0;
+            this.height = this.labelHeight + this.padding;
+        }
+    };
+
+    AxisLabel.prototype.transforms = function(degrees, x, y, svgLayer) {
+        var transforms = [], translate, rotate;
+        if (x !== 0 || y !== 0) {
+            translate = svgLayer.createSVGTransform();
+            translate.setTranslate(x, y);
+            transforms.push(translate);
+        }
+        if (degrees !== 0) {
+            rotate = svgLayer.createSVGTransform();
+            var centerX = Math.round(this.labelWidth / 2),
+                centerY = 0;
+            rotate.setRotate(degrees, centerX, centerY);
+            transforms.push(rotate);
+        }
+
+        return transforms;
+    };
+
+    AxisLabel.prototype.calculateOffsets = function(box) {
+        var offsets = {
+            x: 0,
+            y: 0,
+            degrees: 0
+        };
+        if (this.position === 'bottom') {
+            offsets.x = box.left + box.width / 2 - this.labelWidth / 2;
+            offsets.y = box.top + box.height - this.labelHeight;
+        } else if (this.position === 'top') {
+            offsets.x = box.left + box.width / 2 - this.labelWidth / 2;
+            offsets.y = box.top;
+        } else if (this.position === 'left') {
+            offsets.degrees = -90;
+            offsets.x = box.left - this.labelWidth / 2;
+            offsets.y = box.height / 2 + box.top;
+        } else if (this.position === 'right') {
+            offsets.degrees = 90;
+            offsets.x = box.left + box.width - this.labelWidth / 2;
+            offsets.y = box.height / 2 + box.top;
+        }
+        offsets.x = Math.round(offsets.x);
+        offsets.y = Math.round(offsets.y);
+
+        return offsets;
+    };
+
+    AxisLabel.prototype.cleanup = function() {
+        var axisId = this.axisName + 'Label',
+            layerId = axisId + 'Layer',
+            className = axisId + ' axisLabels';
+        this.surface.removeText(layerId, 0, 0, this.axisLabel, className);
+    };
+
+    AxisLabel.prototype.draw = function(box) {
+        var axisId = this.axisName + 'Label',
+            layerId = axisId + 'Layer',
+            className = axisId + ' axisLabels',
+            offsets = this.calculateOffsets(box),
+            style = {
+                position: 'absolute',
+                bottom: '',
+                right: '',
+                display: 'inline-block',
+                'white-space': 'nowrap'
+            };
+
+        var layer = this.surface.getSVGLayer(layerId);
+        var transforms = this.transforms(offsets.degrees, offsets.x, offsets.y, layer.parentNode);
+
+        this.surface.addText(layerId, 0, 0, this.axisLabel, className, undefined, undefined, undefined, undefined, transforms);
+        this.surface.render();
+        Object.keys(style).forEach(function(key) {
+            layer.style[key] = style[key];
+        });
+    };
+
+    function init(plot) {
+        plot.hooks.processOptions.push(function(plot, options) {
+            if (!options.axisLabels.show) {
+                return;
+            }
+
+            var axisLabels = {};
+            var defaultPadding = 2; // padding between axis and tick labels
+
+            plot.hooks.axisReserveSpace.push(function(plot, axis) {
+                var opts = axis.options;
+                var axisName = axis.direction + axis.n;
+
+                axis.labelHeight += axis.boxPosition.centerY;
+                axis.labelWidth += axis.boxPosition.centerX;
+
+                if (!opts || !opts.axisLabel || !axis.show) {
+                    return;
+                }
+
+                var padding = opts.axisLabelPadding === undefined
+                    ? defaultPadding
+                    : opts.axisLabelPadding;
+
+                var axisLabel = axisLabels[axisName];
+                if (!axisLabel) {
+                    axisLabel = new AxisLabel(axisName,
+                        opts.position, padding,
+                        plot.getPlaceholder()[0], opts.axisLabel, plot.getSurface());
+                    axisLabels[axisName] = axisLabel;
+                }
+
+                axisLabel.calculateSize();
+
+                // Incrementing the sizes of the tick labels.
+                axis.labelHeight += axisLabel.height;
+                axis.labelWidth += axisLabel.width;
+            });
+
+            // TODO - use the drawAxis hook
+            plot.hooks.draw.push(function(plot, ctx) {
+                $.each(plot.getAxes(), function(flotAxisName, axis) {
+                    var opts = axis.options;
+                    if (!opts || !opts.axisLabel || !axis.show) {
+                        return;
+                    }
+
+                    var axisName = axis.direction + axis.n;
+                    axisLabels[axisName].draw(axis.box);
+                });
+            });
+
+            plot.hooks.shutdown.push(function(plot, eventHolder) {
+                for (var axisName in axisLabels) {
+                    axisLabels[axisName].cleanup();
+                }
+            });
+        });
+    };
+
+    $.plot.plugins.push({
+        init: init,
+        options: options,
+        name: 'axisLabels',
+        version: '3.0'
+    });
+})(jQuery);

frontend/lib/flot/jquery.flot.browser.js

@@ -0,0 +1,98 @@
+/** ## jquery.flot.browser.js
+
+This plugin is used to make available some browser-related utility functions.
+
+### Methods
+*/
+
+(function ($) {
+    'use strict';
+
+    var browser = {
+        /**
+        - getPageXY(e)
+
+         Calculates the pageX and pageY using the screenX, screenY properties of the event
+         and the scrolling of the page. This is needed because the pageX and pageY
+         properties of the event are not correct while running tests in Edge. */
+        getPageXY: function (e) {
+            // This code is inspired from https://stackoverflow.com/a/3464890
+            var doc = document.documentElement,
+                pageX = e.clientX + (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0),
+                pageY = e.clientY + (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
+            return { X: pageX, Y: pageY };
+        },
+
+        /**
+        - getPixelRatio(context)
+
+         This function returns the current pixel ratio defined by the product of desktop
+         zoom and page zoom.
+         Additional info: https://www.html5rocks.com/en/tutorials/canvas/hidpi/
+        */
+        getPixelRatio: function(context) {
+            var devicePixelRatio = window.devicePixelRatio || 1,
+                backingStoreRatio =
+                context.webkitBackingStorePixelRatio ||
+                context.mozBackingStorePixelRatio ||
+                context.msBackingStorePixelRatio ||
+                context.oBackingStorePixelRatio ||
+                context.backingStorePixelRatio || 1;
+            return devicePixelRatio / backingStoreRatio;
+        },
+
+        /**
+        - isSafari, isMobileSafari, isOpera, isFirefox, isIE, isEdge, isChrome, isBlink
+
+         This is a collection of functions, used to check if the code is running in a
+         particular browser or Javascript engine.
+        */
+        isSafari: function() {
+            // *** https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser
+            // Safari 3.0+ "[object HTMLElementConstructor]"
+            return /constructor/i.test(window.top.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window.top['safari'] || (typeof window.top.safari !== 'undefined' && window.top.safari.pushNotification));
+        },
+
+        isMobileSafari: function() {
+            //isMobileSafari adapted from https://stackoverflow.com/questions/3007480/determine-if-user-navigated-from-mobile-safari
+            return navigator.userAgent.match(/(iPod|iPhone|iPad)/) && navigator.userAgent.match(/AppleWebKit/);
+        },
+
+        isOpera: function() {
+            // *** https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser
+            //Opera 8.0+
+            return (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
+        },
+
+        isFirefox: function() {
+            // *** https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser
+            // Firefox 1.0+
+            return typeof InstallTrigger !== 'undefined';
+        },
+
+        isIE: function() {
+            // *** https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser
+            // Internet Explorer 6-11
+            return /*@cc_on!@*/false || !!document.documentMode;
+        },
+
+        isEdge: function() {
+            // *** https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser
+            // Edge 20+
+            return !browser.isIE() && !!window.StyleMedia;
+        },
+
+        isChrome: function() {
+            // *** https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser
+            // Chrome 1+
+            return !!window.chrome && !!window.chrome.webstore;
+        },
+
+        isBlink: function() {
+            // *** https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser
+            return (browser.isChrome() || browser.isOpera()) && !!window.CSS;
+        }
+    };
+
+    $.plot.browser = browser;
+})(jQuery);

frontend/lib/flot/jquery.flot.categories.js

@@ -0,0 +1,202 @@
+/* Flot plugin for plotting textual data or categories.
+
+Copyright (c) 2007-2014 IOLA and Ole Laursen.
+Licensed under the MIT license.
+
+Consider a dataset like [["February", 34], ["March", 20], ...]. This plugin
+allows you to plot such a dataset directly.
+
+To enable it, you must specify mode: "categories" on the axis with the textual
+labels, e.g.
+
+    $.plot("#placeholder", data, { xaxis: { mode: "categories" } });
+
+By default, the labels are ordered as they are met in the data series. If you
+need a different ordering, you can specify "categories" on the axis options
+and list the categories there:
+
+    xaxis: {
+        mode: "categories",
+        categories: ["February", "March", "April"]
+    }
+
+If you need to customize the distances between the categories, you can specify
+"categories" as an object mapping labels to values
+
+    xaxis: {
+        mode: "categories",
+        categories: { "February": 1, "March": 3, "April": 4 }
+    }
+
+If you don't specify all categories, the remaining categories will be numbered
+from the max value plus 1 (with a spacing of 1 between each).
+
+Internally, the plugin works by transforming the input data through an auto-
+generated mapping where the first category becomes 0, the second 1, etc.
+Hence, a point like ["February", 34] becomes [0, 34] internally in Flot (this
+is visible in hover and click events that return numbers rather than the
+category labels). The plugin also overrides the tick generator to spit out the
+categories as ticks instead of the values.
+
+If you need to map a value back to its label, the mapping is always accessible
+as "categories" on the axis object, e.g. plot.getAxes().xaxis.categories.
+
+*/
+
+(function ($) {
+    var options = {
+        xaxis: {
+            categories: null
+        },
+        yaxis: {
+            categories: null
+        }
+    };
+
+    function processRawData(plot, series, data, datapoints) {
+        // if categories are enabled, we need to disable
+        // auto-transformation to numbers so the strings are intact
+        // for later processing
+
+        var xCategories = series.xaxis.options.mode === "categories",
+            yCategories = series.yaxis.options.mode === "categories";
+
+        if (!(xCategories || yCategories)) {
+            return;
+        }
+
+        var format = datapoints.format;
+
+        if (!format) {
+            // FIXME: auto-detection should really not be defined here
+            var s = series;
+            format = [];
+            format.push({ x: true, number: true, required: true, computeRange: true});
+            format.push({ y: true, number: true, required: true, computeRange: true });
+
+            if (s.bars.show || (s.lines.show && s.lines.fill)) {
+                var autoScale = !!((s.bars.show && s.bars.zero) || (s.lines.show && s.lines.zero));
+                format.push({ y: true, number: true, required: false, defaultValue: 0, computeRange: autoScale });
+                if (s.bars.horizontal) {
+                    delete format[format.length - 1].y;
+                    format[format.length - 1].x = true;
+                }
+            }
+
+            datapoints.format = format;
+        }
+
+        for (var m = 0; m < format.length; ++m) {
+            if (format[m].x && xCategories) {
+                format[m].number = false;
+            }
+
+            if (format[m].y && yCategories) {
+                format[m].number = false;
+                format[m].computeRange = false;
+            }
+        }
+    }
+
+    function getNextIndex(categories) {
+        var index = -1;
+
+        for (var v in categories) {
+            if (categories[v] > index) {
+                index = categories[v];
+            }
+        }
+
+        return index + 1;
+    }
+
+    function categoriesTickGenerator(axis) {
+        var res = [];
+        for (var label in axis.categories) {
+            var v = axis.categories[label];
+            if (v >= axis.min && v <= axis.max) {
+                res.push([v, label]);
+            }
+        }
+
+        res.sort(function (a, b) { return a[0] - b[0]; });
+
+        return res;
+    }
+
+    function setupCategoriesForAxis(series, axis, datapoints) {
+        if (series[axis].options.mode !== "categories") {
+            return;
+        }
+
+        if (!series[axis].categories) {
+            // parse options
+            var c = {}, o = series[axis].options.categories || {};
+            if ($.isArray(o)) {
+                for (var i = 0; i < o.length; ++i) {
+                    c[o[i]] = i;
+                }
+            } else {
+                for (var v in o) {
+                    c[v] = o[v];
+                }
+            }
+
+            series[axis].categories = c;
+        }
+
+        // fix ticks
+        if (!series[axis].options.ticks) {
+            series[axis].options.ticks = categoriesTickGenerator;
+        }
+
+        transformPointsOnAxis(datapoints, axis, series[axis].categories);
+    }
+
+    function transformPointsOnAxis(datapoints, axis, categories) {
+        // go through the points, transforming them
+        var points = datapoints.points,
+            ps = datapoints.pointsize,
+            format = datapoints.format,
+            formatColumn = axis.charAt(0),
+            index = getNextIndex(categories);
+
+        for (var i = 0; i < points.length; i += ps) {
+            if (points[i] == null) {
+                continue;
+            }
+
+            for (var m = 0; m < ps; ++m) {
+                var val = points[i + m];
+
+                if (val == null || !format[m][formatColumn]) {
+                    continue;
+                }
+
+                if (!(val in categories)) {
+                    categories[val] = index;
+                    ++index;
+                }
+
+                points[i + m] = categories[val];
+            }
+        }
+    }
+
+    function processDatapoints(plot, series, datapoints) {
+        setupCategoriesForAxis(series, "xaxis", datapoints);
+        setupCategoriesForAxis(series, "yaxis", datapoints);
+    }
+
+    function init(plot) {
+        plot.hooks.processRawData.push(processRawData);
+        plot.hooks.processDatapoints.push(processDatapoints);
+    }
+
+    $.plot.plugins.push({
+        init: init,
+        options: options,
+        name: 'categories',
+        version: '1.0'
+    });
+})(jQuery);

frontend/lib/flot/jquery.flot.composeImages.js

@@ -0,0 +1,330 @@
+/** ## jquery.flot.composeImages.js
+
+This plugin is used to expose a function used to overlap several canvases and
+SVGs, for the purpose of creating a snaphot out of them.
+
+### When composeImages is used:
+When multiple canvases and SVGs have to be overlapped into a single image
+and their offset on the page, must be preserved.
+
+### Where can be used:
+In creating a downloadable snapshot of the plots, axes, cursors etc of a graph.
+
+### How it works:
+The entry point is composeImages function. It expects an array of objects,
+which should be either canvases or SVGs (or a mix). It does a prevalidation
+of them, by verifying if they will be usable or not, later in the flow.
+After selecting only usable sources, it passes them to getGenerateTempImg
+function, which generates temporary images out of them. This function
+expects that some of the passed sources (canvas or SVG) may still have
+problems being converted to an image and makes sure the promises system,
+used by composeImages function, moves forward. As an example, SVGs with
+missing information from header or with unsupported content, may lead to
+failure in generating the temporary image. Temporary images are required
+mostly on extracting content from SVGs, but this is also where the x/y
+offsets are extracted for each image which will be added. For SVGs in
+particular, their CSS rules have to be applied.
+After all temporary images are generated, they are overlapped using
+getExecuteImgComposition function. This is where the destination canvas
+is set to the proper dimensions. It is then output by composeImages.
+This function returns a promise, which can be used to wait for the whole
+composition process. It requires to be asynchronous, because this is how
+temporary images load their data.
+*/
+
+(function($) {
+    "use strict";
+    const GENERALFAILURECALLBACKERROR = -100; //simply a negative number
+    const SUCCESSFULIMAGEPREPARATION = 0;
+    const EMPTYARRAYOFIMAGESOURCES = -1;
+    const NEGATIVEIMAGESIZE = -2;
+    var pixelRatio = 1;
+    var browser = $.plot.browser;
+    var getPixelRatio = browser.getPixelRatio;
+
+    function composeImages(canvasOrSvgSources, destinationCanvas) {
+        var validCanvasOrSvgSources = canvasOrSvgSources.filter(isValidSource);
+        pixelRatio = getPixelRatio(destinationCanvas.getContext('2d'));
+
+        var allImgCompositionPromises = validCanvasOrSvgSources.map(function(validCanvasOrSvgSource) {
+            var tempImg = new Image();
+            var currentPromise = new Promise(getGenerateTempImg(tempImg, validCanvasOrSvgSource));
+            return currentPromise;
+        });
+
+        var lastPromise = Promise.all(allImgCompositionPromises).then(getExecuteImgComposition(destinationCanvas), failureCallback);
+        return lastPromise;
+    }
+
+    function isValidSource(canvasOrSvgSource) {
+        var isValidFromCanvas = true;
+        var isValidFromContent = true;
+        if ((canvasOrSvgSource === null) || (canvasOrSvgSource === undefined)) {
+            isValidFromContent = false;
+        } else {
+            if (canvasOrSvgSource.tagName === 'CANVAS') {
+                if ((canvasOrSvgSource.getBoundingClientRect().right === canvasOrSvgSource.getBoundingClientRect().left) ||
+                    (canvasOrSvgSource.getBoundingClientRect().bottom === canvasOrSvgSource.getBoundingClientRect().top)) {
+                    isValidFromCanvas = false;
+                }
+            }
+        }
+        return isValidFromContent && isValidFromCanvas && (window.getComputedStyle(canvasOrSvgSource).visibility === 'visible');
+    }
+
+    function getGenerateTempImg(tempImg, canvasOrSvgSource) {
+        tempImg.sourceDescription = '<info className="' + canvasOrSvgSource.className + '" tagName="' + canvasOrSvgSource.tagName + '" id="' + canvasOrSvgSource.id + '">';
+        tempImg.sourceComponent = canvasOrSvgSource;
+
+        return function doGenerateTempImg(successCallbackFunc, failureCallbackFunc) {
+            tempImg.onload = function(evt) {
+                tempImg.successfullyLoaded = true;
+                successCallbackFunc(tempImg);
+            };
+
+            tempImg.onabort = function(evt) {
+                tempImg.successfullyLoaded = false;
+                console.log('Can\'t generate temp image from ' + tempImg.sourceDescription + '. It is possible that it is missing some properties or its content is not supported by this browser. Source component:', tempImg.sourceComponent);
+                successCallbackFunc(tempImg); //call successCallback, to allow snapshot of all working images
+            };
+
+            tempImg.onerror = function(evt) {
+                tempImg.successfullyLoaded = false;
+                console.log('Can\'t generate temp image from ' + tempImg.sourceDescription + '. It is possible that it is missing some properties or its content is not supported by this browser. Source component:', tempImg.sourceComponent);
+                successCallbackFunc(tempImg); //call successCallback, to allow snapshot of all working images
+            };
+
+            generateTempImageFromCanvasOrSvg(canvasOrSvgSource, tempImg);
+        };
+    }
+
+    function getExecuteImgComposition(destinationCanvas) {
+        return function executeImgComposition(tempImgs) {
+            var compositionResult = copyImgsToCanvas(tempImgs, destinationCanvas);
+            return compositionResult;
+        };
+    }
+
+    function copyCanvasToImg(canvas, img) {
+        img.src = canvas.toDataURL('image/png');
+    }
+
+    function getCSSRules(document) {
+        var styleSheets = document.styleSheets,
+            rulesList = [];
+        for (var i = 0; i < styleSheets.length; i++) {
+            // CORS requests for style sheets throw and an exception on Chrome > 64
+            try {
+                // in Chrome, the external CSS files are empty when the page is directly loaded from disk
+                var rules = styleSheets[i].cssRules || [];
+                for (var j = 0; j < rules.length; j++) {
+                    var rule = rules[j];
+                    rulesList.push(rule.cssText);
+                }
+            } catch (e) {
+                console.log('Failed to get some css rules');
+            }
+        }
+        return rulesList;
+    }
+
+    function embedCSSRulesInSVG(rules, svg) {
+        var text = [
+            '<svg class="snapshot ' + svg.classList + '" width="' + svg.width.baseVal.value * pixelRatio + '" height="' + svg.height.baseVal.value * pixelRatio + '" viewBox="0 0 ' + svg.width.baseVal.value + ' ' + svg.height.baseVal.value + '" xmlns="http://www.w3.org/2000/svg">',
+            '<style>',
+            '/* <![CDATA[ */',
+            rules.join('\n'),
+            '/* ]]> */',
+            '</style>',
+            svg.innerHTML,
+            '</svg>'
+        ].join('\n');
+        return text;
+    }
+
+    function copySVGToImgMostBrowsers(svg, img) {
+        var rules = getCSSRules(document),
+            source = embedCSSRulesInSVG(rules, svg);
+
+        source = patchSVGSource(source);
+
+        var blob = new Blob([source], {type: "image/svg+xml;charset=utf-8"}),
+            domURL = self.URL || self.webkitURL || self,
+            url = domURL.createObjectURL(blob);
+        img.src = url;
+    }
+
+    function copySVGToImgSafari(svg, img) {
+        // Use this method to convert a string buffer array to a binary string.
+        // Do so by breaking up large strings into smaller substrings; this is necessary to avoid the
+        // "maximum call stack size exceeded" exception that can happen when calling 'String.fromCharCode.apply'
+        // with a very long array.
+        function buildBinaryString (arrayBuffer) {
+            var binaryString = "";
+            const utf8Array = new Uint8Array(arrayBuffer);
+            const blockSize = 16384;
+            for (var i = 0; i < utf8Array.length; i = i + blockSize) {
+                const binarySubString = String.fromCharCode.apply(null, utf8Array.subarray(i, i + blockSize));
+                binaryString = binaryString + binarySubString;
+            }
+            return binaryString;
+        };
+
+        var rules = getCSSRules(document),
+            source = embedCSSRulesInSVG(rules, svg),
+            data,
+            utf8BinaryString;
+
+        source = patchSVGSource(source);
+
+        // Encode the string as UTF-8 and convert it to a binary string. The UTF-8 encoding is required to
+        // capture unicode characters correctly.
+        utf8BinaryString = buildBinaryString(new (TextEncoder || TextEncoderLite)('utf-8').encode(source));
+
+        data = "data:image/svg+xml;base64," + btoa(utf8BinaryString);
+        img.src = data;
+    }
+
+    function patchSVGSource(svgSource) {
+        var source = '';
+        //add name spaces.
+        if (!svgSource.match(/^<svg[^>]+xmlns="http:\/\/www\.w3\.org\/2000\/svg"/)) {
+            source = svgSource.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"');
+        }
+        if (!svgSource.match(/^<svg[^>]+"http:\/\/www\.w3\.org\/1999\/xlink"/)) {
+            source = svgSource.replace(/^<svg/, '<svg xmlns:xlink="http://www.w3.org/1999/xlink"');
+        }
+
+        //add xml declaration
+        return '<?xml version="1.0" standalone="no"?>\r\n' + source;
+    }
+
+    function copySVGToImg(svg, img) {
+        if (browser.isSafari() || browser.isMobileSafari()) {
+            copySVGToImgSafari(svg, img);
+        } else {
+            copySVGToImgMostBrowsers(svg, img);
+        }
+    }
+
+    function adaptDestSizeToZoom(destinationCanvas, sources) {
+        function containsSVGs(source) {
+            return source.srcImgTagName === 'svg';
+        }
+
+        if (sources.find(containsSVGs) !== undefined) {
+            if (pixelRatio < 1) {
+                destinationCanvas.width = destinationCanvas.width * pixelRatio;
+                destinationCanvas.height = destinationCanvas.height * pixelRatio;
+            }
+        }
+    }
+
+    function prepareImagesToBeComposed(sources, destination) {
+        var result = SUCCESSFULIMAGEPREPARATION;
+        if (sources.length === 0) {
+            result = EMPTYARRAYOFIMAGESOURCES; //nothing to do if called without sources
+        } else {
+            var minX = sources[0].genLeft;
+            var minY = sources[0].genTop;
+            var maxX = sources[0].genRight;
+            var maxY = sources[0].genBottom;
+            var i = 0;
+
+            for (i = 1; i < sources.length; i++) {
+                if (minX > sources[i].genLeft) {
+                    minX = sources[i].genLeft;
+                }
+
+                if (minY > sources[i].genTop) {
+                    minY = sources[i].genTop;
+                }
+            }
+
+            for (i = 1; i < sources.length; i++) {
+                if (maxX < sources[i].genRight) {
+                    maxX = sources[i].genRight;
+                }
+
+                if (maxY < sources[i].genBottom) {
+                    maxY = sources[i].genBottom;
+                }
+            }
+
+            if ((maxX - minX <= 0) || (maxY - minY <= 0)) {
+                result = NEGATIVEIMAGESIZE; //this might occur on hidden images
+            } else {
+                destination.width = Math.round(maxX - minX);
+                destination.height = Math.round(maxY - minY);
+
+                for (i = 0; i < sources.length; i++) {
+                    sources[i].xCompOffset = sources[i].genLeft - minX;
+                    sources[i].yCompOffset = sources[i].genTop - minY;
+                }
+
+                adaptDestSizeToZoom(destination, sources);
+            }
+        }
+        return result;
+    }
+
+    function copyImgsToCanvas(sources, destination) {
+        var prepareImagesResult = prepareImagesToBeComposed(sources, destination);
+        if (prepareImagesResult === SUCCESSFULIMAGEPREPARATION) {
+            var destinationCtx = destination.getContext('2d');
+
+            for (var i = 0; i < sources.length; i++) {
+                if (sources[i].successfullyLoaded === true) {
+                    destinationCtx.drawImage(sources[i], sources[i].xCompOffset * pixelRatio, sources[i].yCompOffset * pixelRatio);
+                }
+            }
+        }
+        return prepareImagesResult;
+    }
+
+    function adnotateDestImgWithBoundingClientRect(srcCanvasOrSvg, destImg) {
+        destImg.genLeft = srcCanvasOrSvg.getBoundingClientRect().left;
+        destImg.genTop = srcCanvasOrSvg.getBoundingClientRect().top;
+
+        if (srcCanvasOrSvg.tagName === 'CANVAS') {
+            destImg.genRight = destImg.genLeft + srcCanvasOrSvg.width;
+            destImg.genBottom = destImg.genTop + srcCanvasOrSvg.height;
+        }
+
+        if (srcCanvasOrSvg.tagName === 'svg') {
+            destImg.genRight = srcCanvasOrSvg.getBoundingClientRect().right;
+            destImg.genBottom = srcCanvasOrSvg.getBoundingClientRect().bottom;
+        }
+    }
+
+    function generateTempImageFromCanvasOrSvg(srcCanvasOrSvg, destImg) {
+        if (srcCanvasOrSvg.tagName === 'CANVAS') {
+            copyCanvasToImg(srcCanvasOrSvg, destImg);
+        }
+
+        if (srcCanvasOrSvg.tagName === 'svg') {
+            copySVGToImg(srcCanvasOrSvg, destImg);
+        }
+
+        destImg.srcImgTagName = srcCanvasOrSvg.tagName;
+        adnotateDestImgWithBoundingClientRect(srcCanvasOrSvg, destImg);
+    }
+
+    function failureCallback() {
+        return GENERALFAILURECALLBACKERROR;
+    }
+
+    // used for testing
+    $.plot.composeImages = composeImages;
+
+    function init(plot) {
+        // used to extend the public API of the plot
+        plot.composeImages = composeImages;
+    }
+
+    $.plot.plugins.push({
+        init: init,
+        name: 'composeImages',
+        version: '1.0'
+    });
+})(jQuery);

frontend/lib/flot/jquery.flot.crosshair.js

@@ -0,0 +1,202 @@
+/* Flot plugin for showing crosshairs when the mouse hovers over the plot.
+
+Copyright (c) 2007-2014 IOLA and Ole Laursen.
+Licensed under the MIT license.
+
+The plugin supports these options:
+
+    crosshair: {
+        mode: null or "x" or "y" or "xy"
+        color: color
+        lineWidth: number
+    }
+
+Set the mode to one of "x", "y" or "xy". The "x" mode enables a vertical
+crosshair that lets you trace the values on the x axis, "y" enables a
+horizontal crosshair and "xy" enables them both. "color" is the color of the
+crosshair (default is "rgba(170, 0, 0, 0.80)"), "lineWidth" is the width of
+the drawn lines (default is 1).
+
+The plugin also adds four public methods:
+
+  - setCrosshair( pos )
+
+    Set the position of the crosshair. Note that this is cleared if the user
+    moves the mouse. "pos" is in coordinates of the plot and should be on the
+    form { x: xpos, y: ypos } (you can use x2/x3/... if you're using multiple
+    axes), which is coincidentally the same format as what you get from a
+    "plothover" event. If "pos" is null, the crosshair is cleared.
+
+  - clearCrosshair()
+
+    Clear the crosshair.
+
+  - lockCrosshair(pos)
+
+    Cause the crosshair to lock to the current location, no longer updating if
+    the user moves the mouse. Optionally supply a position (passed on to
+    setCrosshair()) to move it to.
+
+    Example usage:
+
+    var myFlot = $.plot( $("#graph"), ..., { crosshair: { mode: "x" } } };
+    $("#graph").bind( "plothover", function ( evt, position, item ) {
+        if ( item ) {
+            // Lock the crosshair to the data point being hovered
+            myFlot.lockCrosshair({
+                x: item.datapoint[ 0 ],
+                y: item.datapoint[ 1 ]
+            });
+        } else {
+            // Return normal crosshair operation
+            myFlot.unlockCrosshair();
+        }
+    });
+
+  - unlockCrosshair()
+
+    Free the crosshair to move again after locking it.
+*/
+
+(function ($) {
+    var options = {
+        crosshair: {
+            mode: null, // one of null, "x", "y" or "xy",
+            color: "rgba(170, 0, 0, 0.80)",
+            lineWidth: 1
+        }
+    };
+
+    function init(plot) {
+        // position of crosshair in pixels
+        var crosshair = {x: -1, y: -1, locked: false, highlighted: false};
+
+        plot.setCrosshair = function setCrosshair(pos) {
+            if (!pos) {
+                crosshair.x = -1;
+            } else {
+                var o = plot.p2c(pos);
+                crosshair.x = Math.max(0, Math.min(o.left, plot.width()));
+                crosshair.y = Math.max(0, Math.min(o.top, plot.height()));
+            }
+
+            plot.triggerRedrawOverlay();
+        };
+
+        plot.clearCrosshair = plot.setCrosshair; // passes null for pos
+
+        plot.lockCrosshair = function lockCrosshair(pos) {
+            if (pos) {
+                plot.setCrosshair(pos);
+            }
+
+            crosshair.locked = true;
+        };
+
+        plot.unlockCrosshair = function unlockCrosshair() {
+            crosshair.locked = false;
+            crosshair.rect = null;
+        };
+
+        function onMouseOut(e) {
+            if (crosshair.locked) {
+                return;
+            }
+
+            if (crosshair.x !== -1) {
+                crosshair.x = -1;
+                plot.triggerRedrawOverlay();
+            }
+        }
+
+        function onMouseMove(e) {
+            var offset = plot.offset();
+            if (crosshair.locked) {
+                var mouseX = Math.max(0, Math.min(e.pageX - offset.left, plot.width()));
+                var mouseY = Math.max(0, Math.min(e.pageY - offset.top, plot.height()));
+
+                if ((mouseX > crosshair.x - 4) && (mouseX < crosshair.x + 4) && (mouseY > crosshair.y - 4) && (mouseY < crosshair.y + 4)) {
+                    if (!crosshair.highlighted) {
+                        crosshair.highlighted = true;
+                        plot.triggerRedrawOverlay();
+                    }
+                } else {
+                    if (crosshair.highlighted) {
+                        crosshair.highlighted = false;
+                        plot.triggerRedrawOverlay();
+                    }
+                }
+                return;
+            }
+
+            if (plot.getSelection && plot.getSelection()) {
+                crosshair.x = -1; // hide the crosshair while selecting
+                return;
+            }
+
+            crosshair.x = Math.max(0, Math.min(e.pageX - offset.left, plot.width()));
+            crosshair.y = Math.max(0, Math.min(e.pageY - offset.top, plot.height()));
+            plot.triggerRedrawOverlay();
+        }
+
+        plot.hooks.bindEvents.push(function (plot, eventHolder) {
+            if (!plot.getOptions().crosshair.mode) {
+                return;
+            }
+
+            eventHolder.mouseout(onMouseOut);
+            eventHolder.mousemove(onMouseMove);
+        });
+
+        plot.hooks.drawOverlay.push(function (plot, ctx) {
+            var c = plot.getOptions().crosshair;
+            if (!c.mode) {
+                return;
+            }
+
+            var plotOffset = plot.getPlotOffset();
+
+            ctx.save();
+            ctx.translate(plotOffset.left, plotOffset.top);
+
+            if (crosshair.x !== -1) {
+                var adj = plot.getOptions().crosshair.lineWidth % 2 ? 0.5 : 0;
+
+                ctx.strokeStyle = c.color;
+                ctx.lineWidth = c.lineWidth;
+                ctx.lineJoin = "round";
+
+                ctx.beginPath();
+                if (c.mode.indexOf("x") !== -1) {
+                    var drawX = Math.floor(crosshair.x) + adj;
+                    ctx.moveTo(drawX, 0);
+                    ctx.lineTo(drawX, plot.height());
+                }
+                if (c.mode.indexOf("y") !== -1) {
+                    var drawY = Math.floor(crosshair.y) + adj;
+                    ctx.moveTo(0, drawY);
+                    ctx.lineTo(plot.width(), drawY);
+                }
+                if (crosshair.locked) {
+                    if (crosshair.highlighted) ctx.fillStyle = 'orange';
+                    else ctx.fillStyle = c.color;
+                    ctx.fillRect(Math.floor(crosshair.x) + adj - 4, Math.floor(crosshair.y) + adj - 4, 8, 8);
+                }
+                ctx.stroke();
+            }
+            ctx.restore();
+        });
+
+        plot.hooks.shutdown.push(function (plot, eventHolder) {
+            eventHolder.unbind("mouseout", onMouseOut);
+            eventHolder.unbind("mousemove", onMouseMove);
+        });
+    }
+
+    $.plot.plugins.push({
+        init: init,
+        options: options,
+        name: 'crosshair',
+        version: '1.0'
+    });
+})(jQuery);

frontend/lib/flot/jquery.flot.drawSeries.js

@@ -0,0 +1,663 @@
+/**
+## jquery.flot.drawSeries.js
+
+This plugin is used by flot for drawing lines, plots, bars or area.
+
+### Public methods
+*/
+
+(function($) {
+    "use strict";
+
+    function DrawSeries() {
+        function plotLine(datapoints, xoffset, yoffset, axisx, axisy, ctx, steps) {
+            var points = datapoints.points,
+                ps = datapoints.pointsize,
+                prevx = null,
+                prevy = null;
+            var x1 = 0.0,
+                y1 = 0.0,
+                x2 = 0.0,
+                y2 = 0.0,
+                mx = null,
+                my = null,
+                i = 0;
+
+            ctx.beginPath();
+            for (i = ps; i < points.length; i += ps) {
+                x1 = points[i - ps];
+                y1 = points[i - ps + 1];
+                x2 = points[i];
+                y2 = points[i + 1];
+
+                if (x1 === null || x2 === null) {
+                    mx = null;
+                    my = null;
+                    continue;
+                }
+
+                if (isNaN(x1) || isNaN(x2) || isNaN(y1) || isNaN(y2)) {
+                    prevx = null;
+                    prevy = null;
+                    continue;
+                }
+
+                if(steps){
+                    if (mx !== null && my !== null) {
+                        // if middle point exists, transfer p2 -> p1 and p1 -> mp
+                        x2 = x1;
+                        y2 = y1;
+                        x1 = mx;
+                        y1 = my;
+
+                        // 'remove' middle point
+                        mx = null;
+                        my = null;
+
+                        // subtract pointsize from i to have current point p1 handled again
+                        i -= ps;
+                    } else if (y1 !== y2 && x1 !== x2) {
+                        // create a middle point
+                        y2 = y1;
+                        mx = x2;
+                        my = y1;
+                    }
+                }
+
+                // clip with ymin
+                if (y1 <= y2 && y1 < axisy.min) {
+                    if (y2 < axisy.min) {
+                        // line segment is outside
+                        continue;
+                    }
+                    // compute new intersection point
+                    x1 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1;
+                    y1 = axisy.min;
+                } else if (y2 <= y1 && y2 < axisy.min) {
+                    if (y1 < axisy.min) {
+                        continue;
+                    }
+
+                    x2 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1;
+                    y2 = axisy.min;
+                }
+
+                // clip with ymax
+                if (y1 >= y2 && y1 > axisy.max) {
+                    if (y2 > axisy.max) {
+                        continue;
+                    }
+
+                    x1 = (axisy.max - y1) / (y2 - y1) * (x2 - x1) + x1;
+                    y1 = axisy.max;
+                } else if (y2 >= y1 && y2 > axisy.max) {
+                    if (y1 > axisy.max) {
+                        continue;
+                    }
+
+                    x2 = (axisy.max - y1) / (y2 - y1) * (x2 - x1) + x1;
+                    y2 = axisy.max;
+                }
+
+                // clip with xmin
+                if (x1 <= x2 && x1 < axisx.min) {
+                    if (x2 < axisx.min) {
+                        continue;
+                    }
+
+                    y1 = (axisx.min - x1) / (x2 - x1) * (y2 - y1) + y1;
+                    x1 = axisx.min;
+                } else if (x2 <= x1 && x2 < axisx.min) {
+                    if (x1 < axisx.min) {
+                        continue;
+                    }
+
+                    y2 = (axisx.min - x1) / (x2 - x1) * (y2 - y1) + y1;
+                    x2 = axisx.min;
+                }
+
+                // clip with xmax
+                if (x1 >= x2 && x1 > axisx.max) {
+                    if (x2 > axisx.max) {
+                        continue;
+                    }
+
+                    y1 = (axisx.max - x1) / (x2 - x1) * (y2 - y1) + y1;
+                    x1 = axisx.max;
+                } else if (x2 >= x1 && x2 > axisx.max) {
+                    if (x1 > axisx.max) {
+                        continue;
+                    }
+
+                    y2 = (axisx.max - x1) / (x2 - x1) * (y2 - y1) + y1;
+                    x2 = axisx.max;
+                }
+
+                if (x1 !== prevx || y1 !== prevy) {
+                    ctx.moveTo(axisx.p2c(x1) + xoffset, axisy.p2c(y1) + yoffset);
+                }
+
+                prevx = x2;
+                prevy = y2;
+                ctx.lineTo(axisx.p2c(x2) + xoffset, axisy.p2c(y2) + yoffset);
+            }
+            ctx.stroke();
+        }
+
+        function plotLineArea(datapoints, axisx, axisy, fillTowards, ctx, steps) {
+            var points = datapoints.points,
+                ps = datapoints.pointsize,
+                bottom = fillTowards > axisy.min ? Math.min(axisy.max, fillTowards) : axisy.min,
+                i = 0,
+                ypos = 1,
+                areaOpen = false,
+                segmentStart = 0,
+                segmentEnd = 0,
+                mx = null,
+                my = null;
+
+            // we process each segment in two turns, first forward
+            // direction to sketch out top, then once we hit the
+            // end we go backwards to sketch the bottom
+            while (true) {
+                if (ps > 0 && i > points.length + ps) {
+                    break;
+                }
+
+                i += ps; // ps is negative if going backwards
+
+                var x1 = points[i - ps],
+                    y1 = points[i - ps + ypos],
+                    x2 = points[i],
+                    y2 = points[i + ypos];
+
+                if (ps === -2) {
+                    /* going backwards and no value for the bottom provided in the series*/
+                    y1 = y2 = bottom;
+                }
+
+                if (areaOpen) {
+                    if (ps > 0 && x1 != null && x2 == null) {
+                        // at turning point
+                        segmentEnd = i;
+                        ps = -ps;
+                        ypos = 2;
+                        continue;
+                    }
+
+                    if (ps < 0 && i === segmentStart + ps) {
+                        // done with the reverse sweep
+                        ctx.fill();
+                        areaOpen = false;
+                        ps = -ps;
+                        ypos = 1;
+                        i = segmentStart = segmentEnd + ps;
+                        continue;
+                    }
+                }
+
+                if (x1 == null || x2 == null) {
+                    mx = null;
+                    my = null;
+                    continue;
+                }
+
+                if(steps){
+                    if (mx !== null && my !== null) {
+                        // if middle point exists, transfer p2 -> p1 and p1 -> mp
+                        x2 = x1;
+                        y2 = y1;
+                        x1 = mx;
+                        y1 = my;
+
+                        // 'remove' middle point
+                        mx = null;
+                        my = null;
+
+                        // subtract pointsize from i to have current point p1 handled again
+                        i -= ps;
+                    } else if (y1 !== y2 && x1 !== x2) {
+                        // create a middle point
+                        y2 = y1;
+                        mx = x2;
+                        my = y1;
+                    }
+                }
+
+                // clip x values
+
+                // clip with xmin
+                if (x1 <= x2 && x1 < axisx.min) {
+                    if (x2 < axisx.min) {
+                        continue;
+                    }
+
+                    y1 = (axisx.min - x1) / (x2 - x1) * (y2 - y1) + y1;
+                    x1 = axisx.min;
+                } else if (x2 <= x1 && x2 < axisx.min) {
+                    if (x1 < axisx.min) {
+                        continue;
+                    }
+
+                    y2 = (axisx.min - x1) / (x2 - x1) * (y2 - y1) + y1;
+                    x2 = axisx.min;
+                }
+
+                // clip with xmax
+                if (x1 >= x2 && x1 > axisx.max) {
+                    if (x2 > axisx.max) {
+                        continue;
+                    }
+
+                    y1 = (axisx.max - x1) / (x2 - x1) * (y2 - y1) + y1;
+                    x1 = axisx.max;
+                } else if (x2 >= x1 && x2 > axisx.max) {
+                    if (x1 > axisx.max) {
+                        continue;
+                    }
+
+                    y2 = (axisx.max - x1) / (x2 - x1) * (y2 - y1) + y1;
+                    x2 = axisx.max;
+                }
+
+                if (!areaOpen) {
+                    // open area
+                    ctx.beginPath();
+                    ctx.moveTo(axisx.p2c(x1), axisy.p2c(bottom));
+                    areaOpen = true;
+                }
+
+                // now first check the case where both is outside
+                if (y1 >= axisy.max && y2 >= axisy.max) {
+                    ctx.lineTo(axisx.p2c(x1), axisy.p2c(axisy.max));
+                    ctx.lineTo(axisx.p2c(x2), axisy.p2c(axisy.max));
+                    continue;
+                } else if (y1 <= axisy.min && y2 <= axisy.min) {
+                    ctx.lineTo(axisx.p2c(x1), axisy.p2c(axisy.min));
+                    ctx.lineTo(axisx.p2c(x2), axisy.p2c(axisy.min));
+                    continue;
+                }
+
+                // else it's a bit more complicated, there might
+                // be a flat maxed out rectangle first, then a
+                // triangular cutout or reverse; to find these
+                // keep track of the current x values
+                var x1old = x1,
+                    x2old = x2;
+
+                // clip the y values, without shortcutting, we
+                // go through all cases in turn
+
+                // clip with ymin
+                if (y1 <= y2 && y1 < axisy.min && y2 >= axisy.min) {
+                    x1 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1;
+                    y1 = axisy.min;
+                } else if (y2 <= y1 && y2 < axisy.min && y1 >= axisy.min) {
+                    x2 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1;
+                    y2 = axisy.min;
+                }
+
+                // clip with ymax
+                if (y1 >= y2 && y1 > axisy.max && y2 <= axisy.max) {
+                    x1 = (axisy.max - y1) / (y2 - y1) * (x2 - x1) + x1;
+                    y1 = axisy.max;
+                } else if (y2 >= y1 && y2 > axisy.max && y1 <= axisy.max) {
+                    x2 = (axisy.max - y1) / (y2 - y1) * (x2 - x1) + x1;
+                    y2 = axisy.max;
+                }
+
+                // if the x value was changed we got a rectangle
+                // to fill
+                if (x1 !== x1old) {
+                    ctx.lineTo(axisx.p2c(x1old), axisy.p2c(y1));
+                    // it goes to (x1, y1), but we fill that below
+                }
+
+                // fill triangular section, this sometimes result
+                // in redundant points if (x1, y1) hasn't changed
+                // from previous line to, but we just ignore that
+                ctx.lineTo(axisx.p2c(x1), axisy.p2c(y1));
+                ctx.lineTo(axisx.p2c(x2), axisy.p2c(y2));
+
+                // fill the other rectangle if it's there
+                if (x2 !== x2old) {
+                    ctx.lineTo(axisx.p2c(x2), axisy.p2c(y2));
+                    ctx.lineTo(axisx.p2c(x2old), axisy.p2c(y2));
+                }
+            }
+        }
+
+        /**
+        - drawSeriesLines(series, ctx, plotOffset, plotWidth, plotHeight, drawSymbol, getColorOrGradient)
+
+         This function is used for drawing lines or area fill.  In case the series has line decimation function
+         attached, before starting to draw, as an optimization the points will first be decimated.
+
+         The series parameter contains the series to be drawn on ctx context. The plotOffset, plotWidth and
+         plotHeight are the corresponding parameters of flot used to determine the drawing surface.
+         The function getColorOrGradient is used to compute the fill style of lines and area.
+        */
+        function drawSeriesLines(series, ctx, plotOffset, plotWidth, plotHeight, drawSymbol, getColorOrGradient) {
+            ctx.save();
+            ctx.translate(plotOffset.left, plotOffset.top);
+            ctx.lineJoin = "round";
+
+            if (series.lines.dashes && ctx.setLineDash) {
+                ctx.setLineDash(series.lines.dashes);
+            }
+
+            var datapoints = {
+                format: series.datapoints.format,
+                points: series.datapoints.points,
+                pointsize: series.datapoints.pointsize
+            };
+
+            if (series.decimate) {
+                datapoints.points = series.decimate(series, series.xaxis.min, series.xaxis.max, plotWidth, series.yaxis.min, series.yaxis.max, plotHeight);
+            }
+
+            var lw = series.lines.lineWidth;
+
+            ctx.lineWidth = lw;
+            ctx.strokeStyle = series.color;
+            var fillStyle = getFillStyle(series.lines, series.color, 0, plotHeight, getColorOrGradient);
+            if (fillStyle) {
+                ctx.fillStyle = fillStyle;
+                plotLineArea(datapoints, series.xaxis, series.yaxis, series.lines.fillTowards || 0, ctx, series.lines.steps);
+            }
+
+            if (lw > 0) {
+                plotLine(datapoints, 0, 0, series.xaxis, series.yaxis, ctx, series.lines.steps);
+            }
+
+            ctx.restore();
+        }
+
+        /**
+        - drawSeriesPoints(series, ctx, plotOffset, plotWidth, plotHeight, drawSymbol, getColorOrGradient)
+
+         This function is used for drawing points using a given symbol. In case the series has points decimation
+         function attached, before starting to draw, as an optimization the points will first be decimated.
+
+         The series parameter contains the series to be drawn on ctx context. The plotOffset, plotWidth and
+         plotHeight are the corresponding parameters of flot used to determine the drawing surface.
+         The function drawSymbol is used to compute and draw the symbol chosen for the points.
+        */
+        function drawSeriesPoints(series, ctx, plotOffset, plotWidth, plotHeight, drawSymbol, getColorOrGradient) {
+            function drawCircle(ctx, x, y, radius, shadow, fill) {
+                ctx.moveTo(x + radius, y);
+                ctx.arc(x, y, radius, 0, shadow ? Math.PI : Math.PI * 2, false);
+            }
+            drawCircle.fill = true;
+            function plotPoints(datapoints, radius, fill, offset, shadow, axisx, axisy, drawSymbolFn) {
+                var points = datapoints.points,
+                    ps = datapoints.pointsize;
+
+                ctx.beginPath();
+                for (var i = 0; i < points.length; i += ps) {
+                    var x = points[i],
+                        y = points[i + 1];
+                    if (x == null || x < axisx.min || x > axisx.max || y < axisy.min || y > axisy.max) {
+                        continue;
+                    }
+
+                    x = axisx.p2c(x);
+                    y = axisy.p2c(y) + offset;
+
+                    drawSymbolFn(ctx, x, y, radius, shadow, fill);
+                }
+                if (drawSymbolFn.fill && !shadow) {
+                    ctx.fill();
+                }
+                ctx.stroke();
+            }
+
+            ctx.save();
+            ctx.translate(plotOffset.left, plotOffset.top);
+
+            var datapoints = {
+                format: series.datapoints.format,
+                points: series.datapoints.points,
+                pointsize: series.datapoints.pointsize
+            };
+
+            if (series.decimatePoints) {
+                datapoints.points = series.decimatePoints(series, series.xaxis.min, series.xaxis.max, plotWidth, series.yaxis.min, series.yaxis.max, plotHeight);
+            }
+
+            var lw = series.points.lineWidth,
+                radius = series.points.radius,
+                symbol = series.points.symbol,
+                drawSymbolFn;
+
+            if (symbol === 'circle') {
+                drawSymbolFn = drawCircle;
+            } else if (typeof symbol === 'string' && drawSymbol && drawSymbol[symbol]) {
+                drawSymbolFn = drawSymbol[symbol];
+            } else if (typeof drawSymbol === 'function') {
+                drawSymbolFn = drawSymbol;
+            }
+
+            // If the user sets the line width to 0, we change it to a very
+            // small value. A line width of 0 seems to force the default of 1.
+
+            if (lw === 0) {
+                lw = 0.0001;
+            }
+
+            ctx.lineWidth = lw;
+            ctx.fillStyle = getFillStyle(series.points, series.color, null, null, getColorOrGradient);
+            ctx.strokeStyle = series.color;
+            plotPoints(datapoints, radius,
+                true, 0, false,
+                series.xaxis, series.yaxis, drawSymbolFn);
+            ctx.restore();
+        }
+
+        function drawBar(x, y, b, barLeft, barRight, fillStyleCallback, axisx, axisy, c, horizontal, lineWidth) {
+            var left = x + barLeft,
+                right = x + barRight,
+                bottom = b, top = y,
+                drawLeft, drawRight, drawTop, drawBottom = false,
+                tmp;
+
+            drawLeft = drawRight = drawTop = true;
+
+            // in horizontal mode, we start the bar from the left
+            // instead of from the bottom so it appears to be
+            // horizontal rather than vertical
+            if (horizontal) {
+                drawBottom = drawRight = drawTop = true;
+                drawLeft = false;
+                left = b;
+                right = x;
+                top = y + barLeft;
+                bottom = y + barRight;
+
+                // account for negative bars
+                if (right < left) {
+                    tmp = right;
+                    right = left;
+                    left = tmp;
+                    drawLeft = true;
+                    drawRight = false;
+                }
+            }
+            else {
+                drawLeft = drawRight = drawTop = true;
+                drawBottom = false;
+                left = x + barLeft;
+                right = x + barRight;
+                bottom = b;
+                top = y;
+
+                // account for negative bars
+                if (top < bottom) {
+                    tmp = top;
+                    top = bottom;
+                    bottom = tmp;
+                    drawBottom = true;
+                    drawTop = false;
+                }
+            }
+
+            // clip
+            if (right < axisx.min || left > axisx.max ||
+                top < axisy.min || bottom > axisy.max) {
+                return;
+            }
+
+            if (left < axisx.min) {
+                left = axisx.min;
+                drawLeft = false;
+            }
+
+            if (right > axisx.max) {
+                right = axisx.max;
+                drawRight = false;
+            }
+
+            if (bottom < axisy.min) {
+                bottom = axisy.min;
+                drawBottom = false;
+            }
+
+            if (top > axisy.max) {
+                top = axisy.max;
+                drawTop = false;
+            }
+
+            left = axisx.p2c(left);
+            bottom = axisy.p2c(bottom);
+            right = axisx.p2c(right);
+            top = axisy.p2c(top);
+
+            // fill the bar
+            if (fillStyleCallback) {
+                c.fillStyle = fillStyleCallback(bottom, top);
+                c.fillRect(left, top, right - left, bottom - top)
+            }
+
+            // draw outline
+            if (lineWidth > 0 && (drawLeft || drawRight || drawTop || drawBottom)) {
+                c.beginPath();
+
+                // FIXME: inline moveTo is buggy with excanvas
+                c.moveTo(left, bottom);
+                if (drawLeft) {
+                    c.lineTo(left, top);
+                } else {
+                    c.moveTo(left, top);
+                }
+
+                if (drawTop) {
+                    c.lineTo(right, top);
+                } else {
+                    c.moveTo(right, top);
+                }
+
+                if (drawRight) {
+                    c.lineTo(right, bottom);
+                } else {
+                    c.moveTo(right, bottom);
+                }
+
+                if (drawBottom) {
+                    c.lineTo(left, bottom);
+                } else {
+                    c.moveTo(left, bottom);
+                }
+
+                c.stroke();
+            }
+        }
+
+        /**
+        - drawSeriesBars(series, ctx, plotOffset, plotWidth, plotHeight, drawSymbol, getColorOrGradient)
+
+         This function is used for drawing series represented as bars. In case the series has decimation
+         function attached, before starting to draw, as an optimization the points will first be decimated.
+
+         The series parameter contains the series to be drawn on ctx context. The plotOffset, plotWidth and
+         plotHeight are the corresponding parameters of flot used to determine the drawing surface.
+         The function getColorOrGradient is used to compute the fill style of bars.
+        */
+        function drawSeriesBars(series, ctx, plotOffset, plotWidth, plotHeight, drawSymbol, getColorOrGradient) {
+            function plotBars(datapoints, barLeft, barRight, fillStyleCallback, axisx, axisy) {
+                var points = datapoints.points,
+                    ps = datapoints.pointsize,
+                    fillTowards = series.bars.fillTowards || 0,
+                    defaultBottom = fillTowards > axisy.min ? Math.min(axisy.max, fillTowards) : axisy.min;
+
+                for (var i = 0; i < points.length; i += ps) {
+                    if (points[i] == null) {
+                        continue;
+                    }
+
+                    // Use third point as bottom if pointsize is 3
+                    var bottom = ps === 3 ? points[i + 2] : defaultBottom;
+                    drawBar(points[i], points[i + 1], bottom, barLeft, barRight, fillStyleCallback, axisx, axisy, ctx, series.bars.horizontal, series.bars.lineWidth);
+                }
+            }
+
+            ctx.save();
+            ctx.translate(plotOffset.left, plotOffset.top);
+
+            var datapoints = {
+                format: series.datapoints.format,
+                points: series.datapoints.points,
+                pointsize: series.datapoints.pointsize
+            };
+
+            if (series.decimate) {
+                datapoints.points = series.decimate(series, series.xaxis.min, series.xaxis.max, plotWidth);
+            }
+
+            ctx.lineWidth = series.bars.lineWidth;
+            ctx.strokeStyle = series.color;
+
+            var barLeft;
+            var barWidth = series.bars.barWidth[0] || series.bars.barWidth;
+            switch (series.bars.align) {
+                case "left":
+                    barLeft = 0;
+                    break;
+                case "right":
+                    barLeft = -barWidth;
+                    break;
+                default:
+                    barLeft = -barWidth / 2;
+            }
+
+            var fillStyleCallback = series.bars.fill ? function(bottom, top) {
+                return getFillStyle(series.bars, series.color, bottom, top, getColorOrGradient);
+            } : null;
+
+            plotBars(datapoints, barLeft, barLeft + barWidth, fillStyleCallback, series.xaxis, series.yaxis);
+            ctx.restore();
+        }
+
+        function getFillStyle(filloptions, seriesColor, bottom, top, getColorOrGradient) {
+            var fill = filloptions.fill;
+            if (!fill) {
+                return null;
+            }
+
+            if (filloptions.fillColor) {
+                return getColorOrGradient(filloptions.fillColor, bottom, top, seriesColor);
+            }
+
+            var c = $.color.parse(seriesColor);
+            c.a = typeof fill === "number" ? fill : 0.4;
+            c.normalize();
+            return c.toString();
+        }
+
+        this.drawSeriesLines = drawSeriesLines;
+        this.drawSeriesPoints = drawSeriesPoints;
+        this.drawSeriesBars = drawSeriesBars;
+        this.drawBar = drawBar;
+    };
+
+    $.plot.drawSeries = new DrawSeries();
+})(jQuery);

frontend/lib/flot/jquery.flot.errorbars.js

@@ -0,0 +1,375 @@
+/* Flot plugin for plotting error bars.
+
+Copyright (c) 2007-2014 IOLA and Ole Laursen.
+Licensed under the MIT license.
+
+Error bars are used to show standard deviation and other statistical
+properties in a plot.
+
+* Created by Rui Pereira  -  rui (dot) pereira (at) gmail (dot) com
+
+This plugin allows you to plot error-bars over points. Set "errorbars" inside
+the points series to the axis name over which there will be error values in
+your data array (*even* if you do not intend to plot them later, by setting
+"show: null" on xerr/yerr).
+
+The plugin supports these options:
+
+    series: {
+        points: {
+            errorbars: "x" or "y" or "xy",
+            xerr: {
+                show: null/false or true,
+                asymmetric: null/false or true,
+                upperCap: null or "-" or function,
+                lowerCap: null or "-" or function,
+                color: null or color,
+                radius: null or number
+            },
+            yerr: { same options as xerr }
+        }
+    }
+
+Each data point array is expected to be of the type:
+
+    "x"  [ x, y, xerr ]
+    "y"  [ x, y, yerr ]
+    "xy" [ x, y, xerr, yerr ]
+
+Where xerr becomes xerr_lower,xerr_upper for the asymmetric error case, and
+equivalently for yerr. Eg., a datapoint for the "xy" case with symmetric
+error-bars on X and asymmetric on Y would be:
+
+    [ x, y, xerr, yerr_lower, yerr_upper ]
+
+By default no end caps are drawn. Setting upperCap and/or lowerCap to "-" will
+draw a small cap perpendicular to the error bar. They can also be set to a
+user-defined drawing function, with (ctx, x, y, radius) as parameters, as eg.
+
+    function drawSemiCircle( ctx, x, y, radius ) {
+        ctx.beginPath();
+        ctx.arc( x, y, radius, 0, Math.PI, false );
+        ctx.moveTo( x - radius, y );
+        ctx.lineTo( x + radius, y );
+        ctx.stroke();
+    }
+
+Color and radius both default to the same ones of the points series if not
+set. The independent radius parameter on xerr/yerr is useful for the case when
+we may want to add error-bars to a line, without showing the interconnecting
+points (with radius: 0), and still showing end caps on the error-bars.
+shadowSize and lineWidth are derived as well from the points series.
+
+*/
+
+(function ($) {
+    var options = {
+        series: {
+            points: {
+                errorbars: null, //should be 'x', 'y' or 'xy'
+                xerr: {err: 'x', show: null, asymmetric: null, upperCap: null, lowerCap: null, color: null, radius: null},
+                yerr: {err: 'y', show: null, asymmetric: null, upperCap: null, lowerCap: null, color: null, radius: null}
+            }
+        }
+    };
+
+    function processRawData(plot, series, data, datapoints) {
+        if (!series.points.errorbars) {
+            return;
+        }
+
+        // x,y values
+        var format = [
+            { x: true, number: true, required: true },
+            { y: true, number: true, required: true }
+        ];
+
+        var errors = series.points.errorbars;
+        // error bars - first X then Y
+        if (errors === 'x' || errors === 'xy') {
+            // lower / upper error
+            if (series.points.xerr.asymmetric) {
+                format.push({ x: true, number: true, required: true });
+                format.push({ x: true, number: true, required: true });
+            } else {
+                format.push({ x: true, number: true, required: true });
+            }
+        }
+        if (errors === 'y' || errors === 'xy') {
+            // lower / upper error
+            if (series.points.yerr.asymmetric) {
+                format.push({ y: true, number: true, required: true });
+                format.push({ y: true, number: true, required: true });
+            } else {
+                format.push({ y: true, number: true, required: true });
+            }
+        }
+        datapoints.format = format;
+    }
+
+    function parseErrors(series, i) {
+        var points = series.datapoints.points;
+
+        // read errors from points array
+        var exl = null,
+            exu = null,
+            eyl = null,
+            eyu = null;
+        var xerr = series.points.xerr,
+            yerr = series.points.yerr;
+
+        var eb = series.points.errorbars;
+        // error bars - first X
+        if (eb === 'x' || eb === 'xy') {
+            if (xerr.asymmetric) {
+                exl = points[i + 2];
+                exu = points[i + 3];
+                if (eb === 'xy') {
+                    if (yerr.asymmetric) {
+                        eyl = points[i + 4];
+                        eyu = points[i + 5];
+                    } else {
+                        eyl = points[i + 4];
+                    }
+                }
+            } else {
+                exl = points[i + 2];
+                if (eb === 'xy') {
+                    if (yerr.asymmetric) {
+                        eyl = points[i + 3];
+                        eyu = points[i + 4];
+                    } else {
+                        eyl = points[i + 3];
+                    }
+                }
+            }
+        // only Y
+        } else {
+            if (eb === 'y') {
+                if (yerr.asymmetric) {
+                    eyl = points[i + 2];
+                    eyu = points[i + 3];
+                } else {
+                    eyl = points[i + 2];
+                }
+            }
+        }
+
+        // symmetric errors?
+        if (exu == null) exu = exl;
+        if (eyu == null) eyu = eyl;
+
+        var errRanges = [exl, exu, eyl, eyu];
+        // nullify if not showing
+        if (!xerr.show) {
+            errRanges[0] = null;
+            errRanges[1] = null;
+        }
+        if (!yerr.show) {
+            errRanges[2] = null;
+            errRanges[3] = null;
+        }
+        return errRanges;
+    }
+
+    function drawSeriesErrors(plot, ctx, s) {
+        var points = s.datapoints.points,
+            ps = s.datapoints.pointsize,
+            ax = [s.xaxis, s.yaxis],
+            radius = s.points.radius,
+            err = [s.points.xerr, s.points.yerr],
+            tmp;
+
+        //sanity check, in case some inverted axis hack is applied to flot
+        var invertX = false;
+        if (ax[0].p2c(ax[0].max) < ax[0].p2c(ax[0].min)) {
+            invertX = true;
+            tmp = err[0].lowerCap;
+            err[0].lowerCap = err[0].upperCap;
+            err[0].upperCap = tmp;
+        }
+
+        var invertY = false;
+        if (ax[1].p2c(ax[1].min) < ax[1].p2c(ax[1].max)) {
+            invertY = true;
+            tmp = err[1].lowerCap;
+            err[1].lowerCap = err[1].upperCap;
+            err[1].upperCap = tmp;
+        }
+
+        for (var i = 0; i < s.datapoints.points.length; i += ps) {
+            //parse
+            var errRanges = parseErrors(s, i);
+
+            //cycle xerr & yerr
+            for (var e = 0; e < err.length; e++) {
+                var minmax = [ax[e].min, ax[e].max];
+
+                //draw this error?
+                if (errRanges[e * err.length]) {
+                    //data coordinates
+                    var x = points[i],
+                        y = points[i + 1];
+
+                    //errorbar ranges
+                    var upper = [x, y][e] + errRanges[e * err.length + 1],
+                        lower = [x, y][e] - errRanges[e * err.length];
+
+                    //points outside of the canvas
+                    if (err[e].err === 'x') {
+                        if (y > ax[1].max || y < ax[1].min || upper < ax[0].min || lower > ax[0].max) {
+                            continue;
+                        }
+                    }
+
+                    if (err[e].err === 'y') {
+                        if (x > ax[0].max || x < ax[0].min || upper < ax[1].min || lower > ax[1].max) {
+                            continue;
+                        }
+                    }
+
+                    // prevent errorbars getting out of the canvas
+                    var drawUpper = true,
+                        drawLower = true;
+
+                    if (upper > minmax[1]) {
+                        drawUpper = false;
+                        upper = minmax[1];
+                    }
+                    if (lower < minmax[0]) {
+                        drawLower = false;
+                        lower = minmax[0];
+                    }
+
+                    //sanity check, in case some inverted axis hack is applied to flot
+                    if ((err[e].err === 'x' && invertX) || (err[e].err === 'y' && invertY)) {
+                        //swap coordinates
+                        tmp = lower;
+                        lower = upper;
+                        upper = tmp;
+                        tmp = drawLower;
+                        drawLower = drawUpper;
+                        drawUpper = tmp;
+                        tmp = minmax[0];
+                        minmax[0] = minmax[1];
+                        minmax[1] = tmp;
+                    }
+
+                    // convert to pixels
+                    x = ax[0].p2c(x);
+                    y = ax[1].p2c(y);
+                    upper = ax[e].p2c(upper);
+                    lower = ax[e].p2c(lower);
+                    minmax[0] = ax[e].p2c(minmax[0]);
+                    minmax[1] = ax[e].p2c(minmax[1]);
+
+                    //same style as points by default
+                    var lw = err[e].lineWidth ? err[e].lineWidth : s.points.lineWidth,
+                        sw = s.points.shadowSize != null ? s.points.shadowSize : s.shadowSize;
+
+                    //shadow as for points
+                    if (lw > 0 && sw > 0) {
+                        var w = sw / 2;
+                        ctx.lineWidth = w;
+                        ctx.strokeStyle = "rgba(0,0,0,0.1)";
+                        drawError(ctx, err[e], x, y, upper, lower, drawUpper, drawLower, radius, w + w / 2, minmax);
+
+                        ctx.strokeStyle = "rgba(0,0,0,0.2)";
+                        drawError(ctx, err[e], x, y, upper, lower, drawUpper, drawLower, radius, w / 2, minmax);
+                    }
+
+                    ctx.strokeStyle = err[e].color
+                        ? err[e].color
+                        : s.color;
+                    ctx.lineWidth = lw;
+                    //draw it
+                    drawError(ctx, err[e], x, y, upper, lower, drawUpper, drawLower, radius, 0, minmax);
+                }
+            }
+        }
+    }
+
+    function drawError(ctx, err, x, y, upper, lower, drawUpper, drawLower, radius, offset, minmax) {
+        //shadow offset
+        y += offset;
+        upper += offset;
+        lower += offset;
+
+        // error bar - avoid plotting over circles
+        if (err.err === 'x') {
+            if (upper > x + radius) drawPath(ctx, [[upper, y], [Math.max(x + radius, minmax[0]), y]]);
+            else drawUpper = false;
+
+            if (lower < x - radius) drawPath(ctx, [[Math.min(x - radius, minmax[1]), y], [lower, y]]);
+            else drawLower = false;
+        } else {
+            if (upper < y - radius) drawPath(ctx, [[x, upper], [x, Math.min(y - radius, minmax[0])]]);
+            else drawUpper = false;
+
+            if (lower > y + radius) drawPath(ctx, [[x, Math.max(y + radius, minmax[1])], [x, lower]]);
+            else drawLower = false;
+        }
+
+        //internal radius value in errorbar, allows to plot radius 0 points and still keep proper sized caps
+        //this is a way to get errorbars on lines without visible connecting dots
+        radius = err.radius != null
+            ? err.radius
+            : radius;
+
+        // upper cap
+        if (drawUpper) {
+            if (err.upperCap === '-') {
+                if (err.err === 'x') drawPath(ctx, [[upper, y - radius], [upper, y + radius]]);
+                else drawPath(ctx, [[x - radius, upper], [x + radius, upper]]);
+            } else if ($.isFunction(err.upperCap)) {
+                if (err.err === 'x') err.upperCap(ctx, upper, y, radius);
+                else err.upperCap(ctx, x, upper, radius);
+            }
+        }
+        // lower cap
+        if (drawLower) {
+            if (err.lowerCap === '-') {
+                if (err.err === 'x') drawPath(ctx, [[lower, y - radius], [lower, y + radius]]);
+                else drawPath(ctx, [[x - radius, lower], [x + radius, lower]]);
+            } else if ($.isFunction(err.lowerCap)) {
+                if (err.err === 'x') err.lowerCap(ctx, lower, y, radius);
+                else err.lowerCap(ctx, x, lower, radius);
+            }
+        }
+    }
+
+    function drawPath(ctx, pts) {
+        ctx.beginPath();
+        ctx.moveTo(pts[0][0], pts[0][1]);
+        for (var p = 1; p < pts.length; p++) {
+            ctx.lineTo(pts[p][0], pts[p][1]);
+        }
+
+        ctx.stroke();
+    }
+
+    function draw(plot, ctx) {
+        var plotOffset = plot.getPlotOffset();
+
+        ctx.save();
+        ctx.translate(plotOffset.left, plotOffset.top);
+        $.each(plot.getData(), function (i, s) {
+            if (s.points.errorbars && (s.points.xerr.show || s.points.yerr.show)) {
+                drawSeriesErrors(plot, ctx, s);
+            }
+        });
+        ctx.restore();
+    }
+
+    function init(plot) {
+        plot.hooks.processRawData.push(processRawData);
+        plot.hooks.draw.push(draw);
+    }
+
+    $.plot.plugins.push({
+        init: init,
+        options: options,
+        name: 'errorbars',
+        version: '1.0'
+    });
+})(jQuery);

frontend/lib/flot/jquery.flot.fillbetween.js

@@ -0,0 +1,254 @@
+/* Flot plugin for computing bottoms for filled line and bar charts.
+
+Copyright (c) 2007-2014 IOLA and Ole Laursen.
+Licensed under the MIT license.
+
+The case: you've got two series that you want to fill the area between. In Flot
+terms, you need to use one as the fill bottom of the other. You can specify the
+bottom of each data point as the third coordinate manually, or you can use this
+plugin to compute it for you.
+
+In order to name the other series, you need to give it an id, like this:
+
+    var dataset = [
+        { data: [ ... ], id: "foo" } ,         // use default bottom
+        { data: [ ... ], fillBetween: "foo" }, // use first dataset as bottom
+    ];
+
+    $.plot($("#placeholder"), dataset, { lines: { show: true, fill: true }});
+
+As a convenience, if the id given is a number that doesn't appear as an id in
+the series, it is interpreted as the index in the array instead (so fillBetween:
+0 can also mean the first series).
+
+Internally, the plugin modifies the datapoints in each series. For line series,
+extra data points might be inserted through interpolation. Note that at points
+where the bottom line is not defined (due to a null point or start/end of line),
+the current line will show a gap too. The algorithm comes from the
+jquery.flot.stack.js plugin, possibly some code could be shared.
+
+*/
+
+(function ($) {
+    var options = {
+        series: {
+            fillBetween: null    // or number
+        }
+    };
+
+    function init(plot) {
+        function findBottomSeries(s, allseries) {
+            var i;
+
+            for (i = 0; i < allseries.length; ++i) {
+                if (allseries[ i ].id === s.fillBetween) {
+                    return allseries[ i ];
+                }
+            }
+
+            if (typeof s.fillBetween === "number") {
+                if (s.fillBetween < 0 || s.fillBetween >= allseries.length) {
+                    return null;
+                }
+                return allseries[ s.fillBetween ];
+            }
+
+            return null;
+        }
+
+        function computeFormat(plot, s, data, datapoints) {
+            if (s.fillBetween == null) {
+                return;
+            }
+            
+            format = datapoints.format;
+            var plotHasId = function(id) {
+                var plotData = plot.getData();
+                for (i = 0; i < plotData.length; i++) {
+                    if (plotData[i].id === id) {
+                        return true;
+                    }
+                }
+
+                return false;
+            }
+
+            if (!format) {
+                format = [];
+
+                format.push({ 
+                    x: true, 
+                    number: true, 
+                    computeRange: s.xaxis.options.autoScale !== 'none',
+                    required: true 
+                });
+                format.push({ 
+                    y: true, 
+                    number: true, 
+                    computeRange: s.yaxis.options.autoScale !== 'none',
+                    required: true 
+                });
+
+                if (s.fillBetween !== undefined && s.fillBetween !== '' && plotHasId(s.fillBetween) && s.fillBetween !== s.id) {
+                    format.push({
+                        x: false,
+                        y: true,
+                        number: true,
+                        required: false,
+                        computeRange: s.yaxis.options.autoScale !== 'none',
+                        defaultValue: 0
+                    });
+                }
+
+                datapoints.format = format;
+            }
+        }
+
+        function computeFillBottoms(plot, s, datapoints) {
+            if (s.fillBetween == null) {
+                return;
+            }
+
+            var other = findBottomSeries(s, plot.getData());
+
+            if (!other) {
+                return;
+            }
+
+            var ps = datapoints.pointsize,
+                points = datapoints.points,
+                otherps = other.datapoints.pointsize,
+                otherpoints = other.datapoints.points,
+                newpoints = [],
+                px, py, intery, qx, qy, bottom,
+                withlines = s.lines.show,
+                withbottom = ps > 2 && datapoints.format[2].y,
+                withsteps = withlines && s.lines.steps,
+                fromgap = true,
+                i = 0,
+                j = 0,
+                l, m;
+
+            while (true) {
+                if (i >= points.length) {
+                    break;
+                }
+
+                l = newpoints.length;
+
+                if (points[ i ] == null) {
+                    // copy gaps
+                    for (m = 0; m < ps; ++m) {
+                        newpoints.push(points[ i + m ]);
+                    }
+
+                    i += ps;
+                } else if (j >= otherpoints.length) {
+                    // for lines, we can't use the rest of the points
+                    if (!withlines) {
+                        for (m = 0; m < ps; ++m) {
+                            newpoints.push(points[ i + m ]);
+                        }
+                    }
+
+                    i += ps;
+                } else if (otherpoints[ j ] == null) {
+                    // oops, got a gap
+                    for (m = 0; m < ps; ++m) {
+                        newpoints.push(null);
+                    }
+
+                    fromgap = true;
+                    j += otherps;
+                } else {
+                    // cases where we actually got two points
+                    px = points[ i ];
+                    py = points[ i + 1 ];
+                    qx = otherpoints[ j ];
+                    qy = otherpoints[ j + 1 ];
+                    bottom = 0;
+
+                    if (px === qx) {
+                        for (m = 0; m < ps; ++m) {
+                            newpoints.push(points[ i + m ]);
+                        }
+
+                        //newpoints[ l + 1 ] += qy;
+                        bottom = qy;
+
+                        i += ps;
+                        j += otherps;
+                    } else if (px > qx) {
+                        // we got past point below, might need to
+                        // insert interpolated extra point
+
+                        if (withlines && i > 0 && points[ i - ps ] != null) {
+                            intery = py + (points[ i - ps + 1 ] - py) * (qx - px) / (points[ i - ps ] - px);
+                            newpoints.push(qx);
+                            newpoints.push(intery);
+                            for (m = 2; m < ps; ++m) {
+                                newpoints.push(points[ i + m ]);
+                            }
+                            bottom = qy;
+                        }
+
+                        j += otherps;
+                    } else {
+                        // px < qx
+                        // if we come from a gap, we just skip this point
+
+                        if (fromgap && withlines) {
+                            i += ps;
+                            continue;
+                        }
+
+                        for (m = 0; m < ps; ++m) {
+                            newpoints.push(points[ i + m ]);
+                        }
+
+                        // we might be able to interpolate a point below,
+                        // this can give us a better y
+
+                        if (withlines && j > 0 && otherpoints[ j - otherps ] != null) {
+                            bottom = qy + (otherpoints[ j - otherps + 1 ] - qy) * (px - qx) / (otherpoints[ j - otherps ] - qx);
+                        }
+
+                        //newpoints[l + 1] += bottom;
+
+                        i += ps;
+                    }
+
+                    fromgap = false;
+
+                    if (l !== newpoints.length && withbottom) {
+                        newpoints[ l + 2 ] = bottom;
+                    }
+                }
+
+                // maintain the line steps invariant
+
+                if (withsteps && l !== newpoints.length && l > 0 &&
+                    newpoints[ l ] !== null &&
+                    newpoints[ l ] !== newpoints[ l - ps ] &&
+                    newpoints[ l + 1 ] !== newpoints[ l - ps + 1 ]) {
+                    for (m = 0; m < ps; ++m) {
+                        newpoints[ l + ps + m ] = newpoints[ l + m ];
+                    }
+                    newpoints[ l + 1 ] = newpoints[ l - ps + 1 ];
+                }
+            }
+
+            datapoints.points = newpoints;
+        }
+
+        plot.hooks.processRawData.push(computeFormat);
+        plot.hooks.processDatapoints.push(computeFillBottoms);
+    }
+
+    $.plot.plugins.push({
+        init: init,
+        options: options,
+        name: "fillbetween",
+        version: "1.0"
+    });
+})(jQuery);

frontend/lib/flot/jquery.flot.flatdata.js

@@ -0,0 +1,47 @@
+/* Support for flat 1D data series.
+
+A 1D flat data series is a data series in the form of a regular 1D array. The
+main reason for using a flat data series is that it performs better, consumes
+less memory and generates less garbage collection than the regular flot format.
+
+Example:
+
+    plot.setData([[[0,0], [1,1], [2,2], [3,3]]]); // regular flot format
+    plot.setData([{flatdata: true, data: [0, 1, 2, 3]}]); // flatdata format
+
+Set series.flatdata to true to enable this plugin.
+
+You can use series.start to specify the starting index of the series (default is 0)
+You can use series.step to specify the interval between consecutive indexes of the series (default is 1)
+*/
+
+/* global jQuery*/
+
+(function ($) {
+    'use strict';
+
+    function process1DRawData(plot, series, data, datapoints) {
+        if (series.flatdata === true) {
+            var start = series.start || 0;
+            var step = typeof series.step === 'number' ? series.step : 1;
+            datapoints.pointsize = 2;
+            for (var i = 0, j = 0; i < data.length; i++, j += 2) {
+                datapoints.points[j] = start + (i * step);
+                datapoints.points[j + 1] = data[i];
+            }
+            if (datapoints.points !== undefined) {
+                datapoints.points.length = data.length * 2;
+            } else {
+                datapoints.points = [];
+            }
+        }
+    }
+
+    $.plot.plugins.push({
+        init: function(plot) {
+            plot.hooks.processRawData.push(process1DRawData);
+        },
+        name: 'flatdata',
+        version: '0.0.2'
+    });
+})(jQuery);

frontend/lib/flot/jquery.flot.hover.js

@@ -0,0 +1,350 @@
+/* global jQuery */
+
+/**
+## jquery.flot.hover.js
+
+This plugin is used for mouse hover and tap on a point of plot series.
+It supports the following options:
+```js
+grid: {
+    hoverable: false, //to trigger plothover event on mouse hover or tap on a point
+    clickable: false //to trigger plotclick event on mouse hover
+}
+```
+
+It listens to native mouse move event or click, as well as artificial generated
+tap and touchevent.
+
+When the mouse is over a point or a tap on a point is performed, that point or
+the correscponding bar will be highlighted and a "plothover" event will be generated.
+
+Custom "touchevent" is triggered when any touch interaction is made. Hover plugin
+handles this events by unhighlighting all of the previously highlighted points and generates
+"plothovercleanup" event to notify any part that is handling plothover (for exemple to cleanup
+the tooltip from webcharts).
+*/
+
+(function($) {
+    'use strict';
+
+    var options = {
+        grid: {
+            hoverable: false,
+            clickable: false
+        }
+    };
+
+    var browser = $.plot.browser;
+
+    var eventType = {
+        click: 'click',
+        hover: 'hover'
+    }
+
+    function init(plot) {
+        var lastMouseMoveEvent;
+        var highlights = [];
+
+        function bindEvents(plot, eventHolder) {
+            var o = plot.getOptions();
+
+            if (o.grid.hoverable || o.grid.clickable) {
+                eventHolder[0].addEventListener('touchevent', triggerCleanupEvent, false);
+                eventHolder[0].addEventListener('tap', generatePlothoverEvent, false);
+            }
+
+            if (o.grid.clickable) {
+                eventHolder.bind("click", onClick);
+            }
+
+            if (o.grid.hoverable) {
+                eventHolder.bind("mousemove", onMouseMove);
+
+                // Use bind, rather than .mouseleave, because we officially
+                // still support jQuery 1.2.6, which doesn't define a shortcut
+                // for mouseenter or mouseleave.  This was a bug/oversight that
+                // was fixed somewhere around 1.3.x.  We can return to using
+                // .mouseleave when we drop support for 1.2.6.
+
+                eventHolder.bind("mouseleave", onMouseLeave);
+            }
+        }
+
+        function shutdown(plot, eventHolder) {
+            eventHolder[0].removeEventListener('tap', generatePlothoverEvent);
+            eventHolder[0].removeEventListener('touchevent', triggerCleanupEvent);
+            eventHolder.unbind("mousemove", onMouseMove);
+            eventHolder.unbind("mouseleave", onMouseLeave);
+            eventHolder.unbind("click", onClick);
+            highlights = [];
+        }
+
+
+        function generatePlothoverEvent(e) {
+            var o = plot.getOptions(),
+                newEvent = new CustomEvent('mouseevent');
+
+            //transform from touch event to mouse event format
+            newEvent.pageX = e.detail.changedTouches[0].pageX;
+            newEvent.pageY = e.detail.changedTouches[0].pageY;
+            newEvent.clientX = e.detail.changedTouches[0].clientX;
+            newEvent.clientY = e.detail.changedTouches[0].clientY;
+
+            if (o.grid.hoverable) {
+                doTriggerClickHoverEvent(newEvent, eventType.hover, 30);
+            }
+            return false;
+        }
+
+        function doTriggerClickHoverEvent(event, eventType, searchDistance) {
+            var series = plot.getData();
+            if (event !== undefined
+                && series.length > 0
+                && series[0].xaxis.c2p !== undefined
+                && series[0].yaxis.c2p !== undefined) {
+                var eventToTrigger = "plot" + eventType;
+                var seriesFlag = eventType + "able";
+                triggerClickHoverEvent(eventToTrigger, event,
+                    function(i) {
+                        return series[i][seriesFlag] !== false;
+                    }, searchDistance);
+            }
+        }
+
+        function onMouseMove(e) {
+            lastMouseMoveEvent = e;
+            plot.getPlaceholder()[0].lastMouseMoveEvent = e;
+            doTriggerClickHoverEvent(e, eventType.hover);
+        }
+
+        function onMouseLeave(e) {
+            lastMouseMoveEvent = undefined;
+            plot.getPlaceholder()[0].lastMouseMoveEvent = undefined;
+            triggerClickHoverEvent("plothover", e,
+                function(i) {
+                    return false;
+                });
+        }
+
+        function onClick(e) {
+            doTriggerClickHoverEvent(e, eventType.click);
+        }
+
+        function triggerCleanupEvent() {
+            plot.unhighlight();
+            plot.getPlaceholder().trigger('plothovercleanup');
+        }
+
+        // trigger click or hover event (they send the same parameters
+        // so we share their code)
+        function triggerClickHoverEvent(eventname, event, seriesFilter, searchDistance) {
+            var options = plot.getOptions(),
+                offset = plot.offset(),
+                page = browser.getPageXY(event),
+                canvasX = page.X - offset.left,
+                canvasY = page.Y - offset.top,
+                pos = plot.c2p({
+                    left: canvasX,
+                    top: canvasY
+                }),
+                distance = searchDistance !== undefined ? searchDistance : options.grid.mouseActiveRadius;
+
+            pos.pageX = page.X;
+            pos.pageY = page.Y;
+
+            var item = plot.findNearbyItem(canvasX, canvasY, seriesFilter, distance);
+
+            if (item) {
+                // fill in mouse pos for any listeners out there
+                item.pageX = parseInt(item.series.xaxis.p2c(item.datapoint[0]) + offset.left, 10);
+                item.pageY = parseInt(item.series.yaxis.p2c(item.datapoint[1]) + offset.top, 10);
+            }
+
+            if (options.grid.autoHighlight) {
+                // clear auto-highlights
+                for (var i = 0; i < highlights.length; ++i) {
+                    var h = highlights[i];
+                    if ((h.auto === eventname &&
+                        !(item && h.series === item.series &&
+                            h.point[0] === item.datapoint[0] &&
+                            h.point[1] === item.datapoint[1])) || !item) {
+                        unhighlight(h.series, h.point);
+                    }
+                }
+
+                if (item) {
+                    highlight(item.series, item.datapoint, eventname);
+                }
+            }
+
+            plot.getPlaceholder().trigger(eventname, [pos, item]);
+        }
+
+        function highlight(s, point, auto) {
+            if (typeof s === "number") {
+                s = plot.getData()[s];
+            }
+
+            if (typeof point === "number") {
+                var ps = s.datapoints.pointsize;
+                point = s.datapoints.points.slice(ps * point, ps * (point + 1));
+            }
+
+            var i = indexOfHighlight(s, point);
+            if (i === -1) {
+                highlights.push({
+                    series: s,
+                    point: point,
+                    auto: auto
+                });
+
+                plot.triggerRedrawOverlay();
+            } else if (!auto) {
+                highlights[i].auto = false;
+            }
+        }
+
+        function unhighlight(s, point) {
+            if (s == null && point == null) {
+                highlights = [];
+                plot.triggerRedrawOverlay();
+                return;
+            }
+
+            if (typeof s === "number") {
+                s = plot.getData()[s];
+            }
+
+            if (typeof point === "number") {
+                var ps = s.datapoints.pointsize;
+                point = s.datapoints.points.slice(ps * point, ps * (point + 1));
+            }
+
+            var i = indexOfHighlight(s, point);
+            if (i !== -1) {
+                highlights.splice(i, 1);
+
+                plot.triggerRedrawOverlay();
+            }
+        }
+
+        function indexOfHighlight(s, p) {
+            for (var i = 0; i < highlights.length; ++i) {
+                var h = highlights[i];
+                if (h.series === s &&
+                    h.point[0] === p[0] &&
+                    h.point[1] === p[1]) {
+                    return i;
+                }
+            }
+
+            return -1;
+        }
+
+        function processDatapoints() {
+            triggerCleanupEvent();
+            doTriggerClickHoverEvent(lastMouseMoveEvent, eventType.hover);
+        }
+
+        function setupGrid() {
+            doTriggerClickHoverEvent(lastMouseMoveEvent, eventType.hover);
+        }
+
+        function drawOverlay(plot, octx, overlay) {
+            var plotOffset = plot.getPlotOffset(),
+                i, hi;
+
+            octx.save();
+            octx.translate(plotOffset.left, plotOffset.top);
+            for (i = 0; i < highlights.length; ++i) {
+                hi = highlights[i];
+
+                if (hi.series.bars.show) drawBarHighlight(hi.series, hi.point, octx);
+                else drawPointHighlight(hi.series, hi.point, octx, plot);
+            }
+            octx.restore();
+        }
+
+        function drawPointHighlight(series, point, octx, plot) {
+            var x = point[0],
+                y = point[1],
+                axisx = series.xaxis,
+                axisy = series.yaxis,
+                highlightColor = (typeof series.highlightColor === "string") ? series.highlightColor : $.color.parse(series.color).scale('a', 0.5).toString();
+
+            if (x < axisx.min || x > axisx.max || y < axisy.min || y > axisy.max) {
+                return;
+            }
+
+            var pointRadius = series.points.radius + series.points.lineWidth / 2;
+            octx.lineWidth = pointRadius;
+            octx.strokeStyle = highlightColor;
+            var radius = 1.5 * pointRadius;
+            x = axisx.p2c(x);
+            y = axisy.p2c(y);
+
+            octx.beginPath();
+            var symbol = series.points.symbol;
+            if (symbol === 'circle') {
+                octx.arc(x, y, radius, 0, 2 * Math.PI, false);
+            } else if (typeof symbol === 'string' && plot.drawSymbol && plot.drawSymbol[symbol]) {
+                plot.drawSymbol[symbol](octx, x, y, radius, false);
+            }
+
+            octx.closePath();
+            octx.stroke();
+        }
+
+        function drawBarHighlight(series, point, octx) {
+            var highlightColor = (typeof series.highlightColor === "string") ? series.highlightColor : $.color.parse(series.color).scale('a', 0.5).toString(),
+                fillStyle = highlightColor,
+                barLeft;
+
+            var barWidth = series.bars.barWidth[0] || series.bars.barWidth;
+            switch (series.bars.align) {
+                case "left":
+                    barLeft = 0;
+                    break;
+                case "right":
+                    barLeft = -barWidth;
+                    break;
+                default:
+                    barLeft = -barWidth / 2;
+            }
+
+            octx.lineWidth = series.bars.lineWidth;
+            octx.strokeStyle = highlightColor;
+
+            var fillTowards = series.bars.fillTowards || 0,
+                bottom = fillTowards > series.yaxis.min ? Math.min(series.yaxis.max, fillTowards) : series.yaxis.min;
+
+            $.plot.drawSeries.drawBar(point[0], point[1], point[2] || bottom, barLeft, barLeft + barWidth,
+                function() {
+                    return fillStyle;
+                }, series.xaxis, series.yaxis, octx, series.bars.horizontal, series.bars.lineWidth);
+        }
+
+        function initHover(plot, options) {
+            plot.highlight = highlight;
+            plot.unhighlight = unhighlight;
+            if (options.grid.hoverable || options.grid.clickable) {
+                plot.hooks.drawOverlay.push(drawOverlay);
+                plot.hooks.processDatapoints.push(processDatapoints);
+                plot.hooks.setupGrid.push(setupGrid);
+            }
+
+            lastMouseMoveEvent = plot.getPlaceholder()[0].lastMouseMoveEvent;
+        }
+
+        plot.hooks.bindEvents.push(bindEvents);
+        plot.hooks.shutdown.push(shutdown);
+        plot.hooks.processOptions.push(initHover);
+    }
+
+    $.plot.plugins.push({
+        init: init,
+        options: options,
+        name: 'hover',
+        version: '0.1'
+    });
+})(jQuery);

frontend/lib/flot/jquery.flot.image.js

@@ -0,0 +1,249 @@
+/* Flot plugin for plotting images.
+
+Copyright (c) 2007-2014 IOLA and Ole Laursen.
+Licensed under the MIT license.
+
+The data syntax is [ [ image, x1, y1, x2, y2 ], ... ] where (x1, y1) and
+(x2, y2) are where you intend the two opposite corners of the image to end up
+in the plot. Image must be a fully loaded Javascript image (you can make one
+with new Image()). If the image is not complete, it's skipped when plotting.
+
+There are two helpers included for retrieving images. The easiest work the way
+that you put in URLs instead of images in the data, like this:
+
+    [ "myimage.png", 0, 0, 10, 10 ]
+
+Then call $.plot.image.loadData( data, options, callback ) where data and
+options are the same as you pass in to $.plot. This loads the images, replaces
+the URLs in the data with the corresponding images and calls "callback" when
+all images are loaded (or failed loading). In the callback, you can then call
+$.plot with the data set. See the included example.
+
+A more low-level helper, $.plot.image.load(urls, callback) is also included.
+Given a list of URLs, it calls callback with an object mapping from URL to
+Image object when all images are loaded or have failed loading.
+
+The plugin supports these options:
+
+    series: {
+        images: {
+            show: boolean
+            anchor: "corner" or "center"
+            alpha: [ 0, 1 ]
+        }
+    }
+
+They can be specified for a specific series:
+
+    $.plot( $("#placeholder"), [{
+        data: [ ... ],
+        images: { ... }
+    ])
+
+Note that because the data format is different from usual data points, you
+can't use images with anything else in a specific data series.
+
+Setting "anchor" to "center" causes the pixels in the image to be anchored at
+the corner pixel centers inside of at the pixel corners, effectively letting
+half a pixel stick out to each side in the plot.
+
+A possible future direction could be support for tiling for large images (like
+Google Maps).
+
+*/
+
+(function ($) {
+    var options = {
+        series: {
+            images: {
+                show: false,
+                alpha: 1,
+                anchor: "corner" // or "center"
+            }
+        }
+    };
+
+    $.plot.image = {};
+
+    $.plot.image.loadDataImages = function (series, options, callback) {
+        var urls = [], points = [];
+
+        var defaultShow = options.series.images.show;
+
+        $.each(series, function (i, s) {
+            if (!(defaultShow || s.images.show)) {
+                return;
+            }
+
+            if (s.data) {
+                s = s.data;
+            }
+
+            $.each(s, function (i, p) {
+                if (typeof p[0] === "string") {
+                    urls.push(p[0]);
+                    points.push(p);
+                }
+            });
+        });
+
+        $.plot.image.load(urls, function (loadedImages) {
+            $.each(points, function (i, p) {
+                var url = p[0];
+                if (loadedImages[url]) {
+                    p[0] = loadedImages[url];
+                }
+            });
+
+            callback();
+        });
+    }
+
+    $.plot.image.load = function (urls, callback) {
+        var missing = urls.length, loaded = {};
+        if (missing === 0) {
+            callback({});
+        }
+
+        $.each(urls, function (i, url) {
+            var handler = function () {
+                --missing;
+                loaded[url] = this;
+
+                if (missing === 0) {
+                    callback(loaded);
+                }
+            };
+
+            $('<img />').load(handler).error(handler).attr('src', url);
+        });
+    };
+
+    function drawSeries(plot, ctx, series) {
+        var plotOffset = plot.getPlotOffset();
+
+        if (!series.images || !series.images.show) {
+            return;
+        }
+
+        var points = series.datapoints.points,
+            ps = series.datapoints.pointsize;
+
+        for (var i = 0; i < points.length; i += ps) {
+            var img = points[i],
+                x1 = points[i + 1], y1 = points[i + 2],
+                x2 = points[i + 3], y2 = points[i + 4],
+                xaxis = series.xaxis, yaxis = series.yaxis,
+                tmp;
+
+            // actually we should check img.complete, but it
+            // appears to be a somewhat unreliable indicator in
+            // IE6 (false even after load event)
+            if (!img || img.width <= 0 || img.height <= 0) {
+                continue;
+            }
+
+            if (x1 > x2) {
+                tmp = x2;
+                x2 = x1;
+                x1 = tmp;
+            }
+            if (y1 > y2) {
+                tmp = y2;
+                y2 = y1;
+                y1 = tmp;
+            }
+
+            // if the anchor is at the center of the pixel, expand the
+            // image by 1/2 pixel in each direction
+            if (series.images.anchor === "center") {
+                tmp = 0.5 * (x2 - x1) / (img.width - 1);
+                x1 -= tmp;
+                x2 += tmp;
+                tmp = 0.5 * (y2 - y1) / (img.height - 1);
+                y1 -= tmp;
+                y2 += tmp;
+            }
+
+            // clip
+            if (x1 === x2 || y1 === y2 ||
+                x1 >= xaxis.max || x2 <= xaxis.min ||
+                y1 >= yaxis.max || y2 <= yaxis.min) {
+                continue;
+            }
+
+            var sx1 = 0, sy1 = 0, sx2 = img.width, sy2 = img.height;
+            if (x1 < xaxis.min) {
+                sx1 += (sx2 - sx1) * (xaxis.min - x1) / (x2 - x1);
+                x1 = xaxis.min;
+            }
+
+            if (x2 > xaxis.max) {
+                sx2 += (sx2 - sx1) * (xaxis.max - x2) / (x2 - x1);
+                x2 = xaxis.max;
+            }
+
+            if (y1 < yaxis.min) {
+                sy2 += (sy1 - sy2) * (yaxis.min - y1) / (y2 - y1);
+                y1 = yaxis.min;
+            }
+
+            if (y2 > yaxis.max) {
+                sy1 += (sy1 - sy2) * (yaxis.max - y2) / (y2 - y1);
+                y2 = yaxis.max;
+            }
+
+            x1 = xaxis.p2c(x1);
+            x2 = xaxis.p2c(x2);
+            y1 = yaxis.p2c(y1);
+            y2 = yaxis.p2c(y2);
+
+            // the transformation may have swapped us
+            if (x1 > x2) {
+                tmp = x2;
+                x2 = x1;
+                x1 = tmp;
+            }
+            if (y1 > y2) {
+                tmp = y2;
+                y2 = y1;
+                y1 = tmp;
+            }
+
+            tmp = ctx.globalAlpha;
+            ctx.globalAlpha *= series.images.alpha;
+            ctx.drawImage(img,
+                          sx1, sy1, sx2 - sx1, sy2 - sy1,
+                          x1 + plotOffset.left, y1 + plotOffset.top,
+                          x2 - x1, y2 - y1);
+            ctx.globalAlpha = tmp;
+        }
+    }
+
+    function processRawData(plot, series, data, datapoints) {
+        if (!series.images.show) {
+            return;
+        }
+
+        // format is Image, x1, y1, x2, y2 (opposite corners)
+        datapoints.format = [
+            { required: true },
+            { x: true, number: true, required: true },
+            { y: true, number: true, required: true },
+            { x: true, number: true, required: true },
+            { y: true, number: true, required: true }
+        ];
+    }
+
+    function init(plot) {
+        plot.hooks.processRawData.push(processRawData);
+        plot.hooks.drawSeries.push(drawSeries);
+    }
+
+    $.plot.plugins.push({
+        init: init,
+        options: options,
+        name: 'image',
+        version: '1.1'
+    });
+})(jQuery);

frontend/lib/flot/jquery.flot.legend.js

@@ -0,0 +1,437 @@
+/* Flot plugin for drawing legends.
+
+*/
+
+(function($) {
+    var defaultOptions = {
+        legend: {
+            show: false,
+            noColumns: 1,
+            labelFormatter: null, // fn: string -> string
+            container: null, // container (as jQuery object) to put legend in, null means default on top of graph
+            position: 'ne', // position of default legend container within plot
+            margin: 5, // distance from grid edge to default legend container within plot
+            sorted: null // default to no legend sorting
+        }
+    };
+
+    function insertLegend(plot, options, placeholder, legendEntries) {
+        // clear before redraw
+        if (options.legend.container != null) {
+            $(options.legend.container).html('');
+        } else {
+            placeholder.find('.legend').remove();
+        }
+
+        if (!options.legend.show) {
+            return;
+        }
+
+        // Save the legend entries in legend options
+        var entries = options.legend.legendEntries = legendEntries,
+            plotOffset = options.legend.plotOffset = plot.getPlotOffset(),
+            html = [],
+            entry, labelHtml, iconHtml,
+            j = 0,
+            i,
+            pos = "",
+            p = options.legend.position,
+            m = options.legend.margin,
+            shape = {
+                name: '',
+                label: '',
+                xPos: '',
+                yPos: ''
+            };
+
+        html[j++] = '<svg class="legendLayer" style="width:inherit;height:inherit;">';
+        html[j++] = '<rect class="background" width="100%" height="100%"/>';
+        html[j++] = svgShapeDefs;
+
+        var left = 0;
+        var columnWidths = [];
+        var style = window.getComputedStyle(document.querySelector('body'));
+        for (i = 0; i < entries.length; ++i) {
+            var columnIndex = i % options.legend.noColumns;
+            entry = entries[i];
+            shape.label = entry.label;
+            var info = plot.getSurface().getTextInfo('', shape.label, {
+                style: style.fontStyle,
+                variant: style.fontVariant,
+                weight: style.fontWeight,
+                size: parseInt(style.fontSize),
+                lineHeight: parseInt(style.lineHeight),
+                family: style.fontFamily
+            });
+
+            var labelWidth = info.width;
+            // 36px = 1.5em + 6px margin
+            var iconWidth = 48;
+            if (columnWidths[columnIndex]) {
+                if (labelWidth > columnWidths[columnIndex]) {
+                    columnWidths[columnIndex] = labelWidth + iconWidth;
+                }
+            } else {
+                columnWidths[columnIndex] = labelWidth + iconWidth;
+            }
+        }
+
+        // Generate html for icons and labels from a list of entries
+        for (i = 0; i < entries.length; ++i) {
+            var columnIndex = i % options.legend.noColumns;
+            entry = entries[i];
+            iconHtml = '';
+            shape.label = entry.label;
+            shape.xPos = (left + 3) + 'px';
+            left += columnWidths[columnIndex];
+            if ((i + 1) % options.legend.noColumns === 0) {
+                left = 0;
+            }
+            shape.yPos = Math.floor(i / options.legend.noColumns) * 1.5 + 'em';
+            // area
+            if (entry.options.lines.show && entry.options.lines.fill) {
+                shape.name = 'area';
+                shape.fillColor = entry.color;
+                iconHtml += getEntryIconHtml(shape);
+            }
+            // bars
+            if (entry.options.bars.show) {
+                shape.name = 'bar';
+                shape.fillColor = entry.color;
+                iconHtml += getEntryIconHtml(shape);
+            }
+            // lines
+            if (entry.options.lines.show && !entry.options.lines.fill) {
+                shape.name = 'line';
+                shape.strokeColor = entry.color;
+                shape.strokeWidth = entry.options.lines.lineWidth;
+                iconHtml += getEntryIconHtml(shape);
+            }
+            // points
+            if (entry.options.points.show) {
+                shape.name = entry.options.points.symbol;
+                shape.strokeColor = entry.color;
+                shape.fillColor = entry.options.points.fillColor;
+                shape.strokeWidth = entry.options.points.lineWidth;
+                iconHtml += getEntryIconHtml(shape);
+            }
+
+            labelHtml = '<text x="' + shape.xPos + '" y="' + shape.yPos + '" text-anchor="start"><tspan dx="2em" dy="1.2em">' + shape.label + '</tspan></text>'
+            html[j++] = '<g>' + iconHtml + labelHtml + '</g>';
+        }
+
+        html[j++] = '</svg>';
+        if (m[0] == null) {
+            m = [m, m];
+        }
+
+        if (p.charAt(0) === 'n') {
+            pos += 'top:' + (m[1] + plotOffset.top) + 'px;';
+        } else if (p.charAt(0) === 's') {
+            pos += 'bottom:' + (m[1] + plotOffset.bottom) + 'px;';
+        }
+
+        if (p.charAt(1) === 'e') {
+            pos += 'right:' + (m[0] + plotOffset.right) + 'px;';
+        } else if (p.charAt(1) === 'w') {
+            pos += 'left:' + (m[0] + plotOffset.left) + 'px;';
+        }
+
+        var width = 6;
+        for (i = 0; i < columnWidths.length; ++i) {
+            width += columnWidths[i];
+        }
+
+        var legendEl,
+            height = Math.ceil(entries.length / options.legend.noColumns) * 1.6;
+        if (!options.legend.container) {
+            legendEl = $('<div class="legend" style="position:absolute;' + pos + '">' + html.join('') + '</div>').appendTo(placeholder);
+            legendEl.css('width', width + 'px');
+            legendEl.css('height', height + 'em');
+            legendEl.css('pointerEvents', 'none');
+        } else {
+            legendEl = $(html.join('')).appendTo(options.legend.container)[0];
+            options.legend.container.style.width = width + 'px';
+            options.legend.container.style.height = height + 'em';
+        }
+    }
+
+    // Generate html for a shape
+    function getEntryIconHtml(shape) {
+        var html = '',
+            name = shape.name,
+            x = shape.xPos,
+            y = shape.yPos,
+            fill = shape.fillColor,
+            stroke = shape.strokeColor,
+            width = shape.strokeWidth;
+        switch (name) {
+            case 'circle':
+                html = '<use xlink:href="#circle" class="legendIcon" ' +
+                    'x="' + x + '" ' +
+                    'y="' + y + '" ' +
+                    'fill="' + fill + '" ' +
+                    'stroke="' + stroke + '" ' +
+                    'stroke-width="' + width + '" ' +
+                    'width="1.5em" height="1.5em"' +
+                    '/>';
+                break;
+            case 'diamond':
+                html = '<use xlink:href="#diamond" class="legendIcon" ' +
+                    'x="' + x + '" ' +
+                    'y="' + y + '" ' +
+                    'fill="' + fill + '" ' +
+                    'stroke="' + stroke + '" ' +
+                    'stroke-width="' + width + '" ' +
+                    'width="1.5em" height="1.5em"' +
+                    '/>';
+                break;
+            case 'cross':
+                html = '<use xlink:href="#cross" class="legendIcon" ' +
+                    'x="' + x + '" ' +
+                    'y="' + y + '" ' +
+                    // 'fill="' + fill + '" ' +
+                    'stroke="' + stroke + '" ' +
+                    'stroke-width="' + width + '" ' +
+                    'width="1.5em" height="1.5em"' +
+                    '/>';
+                break;
+            case 'rectangle':
+                html = '<use xlink:href="#rectangle" class="legendIcon" ' +
+                    'x="' + x + '" ' +
+                    'y="' + y + '" ' +
+                    'fill="' + fill + '" ' +
+                    'stroke="' + stroke + '" ' +
+                    'stroke-width="' + width + '" ' +
+                    'width="1.5em" height="1.5em"' +
+                    '/>';
+                break;
+            case 'plus':
+                html = '<use xlink:href="#plus" class="legendIcon" ' +
+                    'x="' + x + '" ' +
+                    'y="' + y + '" ' +
+                    // 'fill="' + fill + '" ' +
+                    'stroke="' + stroke + '" ' +
+                    'stroke-width="' + width + '" ' +
+                    'width="1.5em" height="1.5em"' +
+                    '/>';
+                break;
+            case 'bar':
+                html = '<use xlink:href="#bars" class="legendIcon" ' +
+                    'x="' + x + '" ' +
+                    'y="' + y + '" ' +
+                    'fill="' + fill + '" ' +
+                    // 'stroke="' + stroke + '" ' +
+                    // 'stroke-width="' + width + '" ' +
+                    'width="1.5em" height="1.5em"' +
+                    '/>';
+                break;
+            case 'area':
+                html = '<use xlink:href="#area" class="legendIcon" ' +
+                    'x="' + x + '" ' +
+                    'y="' + y + '" ' +
+                    'fill="' + fill + '" ' +
+                    // 'stroke="' + stroke + '" ' +
+                    // 'stroke-width="' + width + '" ' +
+                    'width="1.5em" height="1.5em"' +
+                    '/>';
+                break;
+            case 'line':
+                html = '<use xlink:href="#line" class="legendIcon" ' +
+                    'x="' + x + '" ' +
+                    'y="' + y + '" ' +
+                    // 'fill="' + fill + '" ' +
+                    'stroke="' + stroke + '" ' +
+                    'stroke-width="' + width + '" ' +
+                    'width="1.5em" height="1.5em"' +
+                    '/>';
+                break;
+            default:
+                // default is circle
+                html = '<use xlink:href="#circle" class="legendIcon" ' +
+                    'x="' + x + '" ' +
+                    'y="' + y + '" ' +
+                    'fill="' + fill + '" ' +
+                    'stroke="' + stroke + '" ' +
+                    'stroke-width="' + width + '" ' +
+                    'width="1.5em" height="1.5em"' +
+                    '/>';
+        }
+
+        return html;
+    }
+
+    // Define svg symbols for shapes
+    var svgShapeDefs = '' +
+        '<defs>' +
+            '<symbol id="line" fill="none" viewBox="-5 -5 25 25">' +
+                '<polyline points="0,15 5,5 10,10 15,0"/>' +
+            '</symbol>' +
+
+            '<symbol id="area" stroke-width="1" viewBox="-5 -5 25 25">' +
+                '<polyline points="0,15 5,5 10,10 15,0, 15,15, 0,15"/>' +
+            '</symbol>' +
+
+            '<symbol id="bars" stroke-width="1" viewBox="-5 -5 25 25">' +
+                '<polyline points="1.5,15.5 1.5,12.5, 4.5,12.5 4.5,15.5 6.5,15.5 6.5,3.5, 9.5,3.5 9.5,15.5 11.5,15.5 11.5,7.5 14.5,7.5 14.5,15.5 1.5,15.5"/>' +
+            '</symbol>' +
+
+            '<symbol id="circle" viewBox="-5 -5 25 25">' +
+                '<circle cx="0" cy="15" r="2.5"/>' +
+                '<circle cx="5" cy="5" r="2.5"/>' +
+                '<circle cx="10" cy="10" r="2.5"/>' +
+                '<circle cx="15" cy="0" r="2.5"/>' +
+            '</symbol>' +
+
+            '<symbol id="rectangle" viewBox="-5 -5 25 25">' +
+                '<rect x="-2.1" y="12.9" width="4.2" height="4.2"/>' +
+                '<rect x="2.9" y="2.9" width="4.2" height="4.2"/>' +
+                '<rect x="7.9" y="7.9" width="4.2" height="4.2"/>' +
+                '<rect x="12.9" y="-2.1" width="4.2" height="4.2"/>' +
+            '</symbol>' +
+
+            '<symbol id="diamond" viewBox="-5 -5 25 25">' +
+                '<path d="M-3,15 L0,12 L3,15, L0,18 Z"/>' +
+                '<path d="M2,5 L5,2 L8,5, L5,8 Z"/>' +
+                '<path d="M7,10 L10,7 L13,10, L10,13 Z"/>' +
+                '<path d="M12,0 L15,-3 L18,0, L15,3 Z"/>' +
+            '</symbol>' +
+
+            '<symbol id="cross" fill="none" viewBox="-5 -5 25 25">' +
+                '<path d="M-2.1,12.9 L2.1,17.1, M2.1,12.9 L-2.1,17.1 Z"/>' +
+                '<path d="M2.9,2.9 L7.1,7.1 M7.1,2.9 L2.9,7.1 Z"/>' +
+                '<path d="M7.9,7.9 L12.1,12.1 M12.1,7.9 L7.9,12.1 Z"/>' +
+                '<path d="M12.9,-2.1 L17.1,2.1 M17.1,-2.1 L12.9,2.1 Z"/>' +
+            '</symbol>' +
+
+            '<symbol id="plus" fill="none" viewBox="-5 -5 25 25">' +
+                '<path d="M0,12 L0,18, M-3,15 L3,15 Z"/>' +
+                '<path d="M5,2 L5,8 M2,5 L8,5 Z"/>' +
+                '<path d="M10,7 L10,13 M7,10 L13,10 Z"/>' +
+                '<path d="M15,-3 L15,3 M12,0 L18,0 Z"/>' +
+            '</symbol>' +
+        '</defs>';
+
+    // Generate a list of legend entries in their final order
+    function getLegendEntries(series, labelFormatter, sorted) {
+        var lf = labelFormatter,
+            legendEntries = series.reduce(function(validEntries, s, i) {
+                var labelEval = (lf ? lf(s.label, s) : s.label)
+                if (s.hasOwnProperty("label") ? labelEval : true) {
+                    var entry = {
+                        label: labelEval || 'Plot ' + (i + 1),
+                        color: s.color,
+                        options: {
+                            lines: s.lines,
+                            points: s.points,
+                            bars: s.bars
+                        }
+                    }
+                    validEntries.push(entry)
+                }
+                return validEntries;
+            }, []);
+
+        // Sort the legend using either the default or a custom comparator
+        if (sorted) {
+            if ($.isFunction(sorted)) {
+                legendEntries.sort(sorted);
+            } else if (sorted === 'reverse') {
+                legendEntries.reverse();
+            } else {
+                var ascending = (sorted !== 'descending');
+                legendEntries.sort(function(a, b) {
+                    return a.label === b.label
+                        ? 0
+                        : ((a.label < b.label) !== ascending ? 1 : -1 // Logical XOR
+                        );
+                });
+            }
+        }
+
+        return legendEntries;
+    }
+
+    // return false if opts1 same as opts2
+    function checkOptions(opts1, opts2) {
+        for (var prop in opts1) {
+            if (opts1.hasOwnProperty(prop)) {
+                if (opts1[prop] !== opts2[prop]) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+
+    // Compare two lists of legend entries
+    function shouldRedraw(oldEntries, newEntries) {
+        if (!oldEntries || !newEntries) {
+            return true;
+        }
+
+        if (oldEntries.length !== newEntries.length) {
+            return true;
+        }
+        var i, newEntry, oldEntry, newOpts, oldOpts;
+        for (i = 0; i < newEntries.length; i++) {
+            newEntry = newEntries[i];
+            oldEntry = oldEntries[i];
+
+            if (newEntry.label !== oldEntry.label) {
+                return true;
+            }
+
+            if (newEntry.color !== oldEntry.color) {
+                return true;
+            }
+
+            // check for changes in lines options
+            newOpts = newEntry.options.lines;
+            oldOpts = oldEntry.options.lines;
+            if (checkOptions(newOpts, oldOpts)) {
+                return true;
+            }
+
+            // check for changes in points options
+            newOpts = newEntry.options.points;
+            oldOpts = oldEntry.options.points;
+            if (checkOptions(newOpts, oldOpts)) {
+                return true;
+            }
+
+            // check for changes in bars options
+            newOpts = newEntry.options.bars;
+            oldOpts = oldEntry.options.bars;
+            if (checkOptions(newOpts, oldOpts)) {
+                return true;
+            }
+        }
+
+        return false;
+    }
+
+    function init(plot) {
+        plot.hooks.setupGrid.push(function (plot) {
+            var options = plot.getOptions();
+            var series = plot.getData(),
+                labelFormatter = options.legend.labelFormatter,
+                oldEntries = options.legend.legendEntries,
+                oldPlotOffset = options.legend.plotOffset,
+                newEntries = getLegendEntries(series, labelFormatter, options.legend.sorted),
+                newPlotOffset = plot.getPlotOffset();
+
+            if (shouldRedraw(oldEntries, newEntries) ||
+                checkOptions(oldPlotOffset, newPlotOffset)) {
+                insertLegend(plot, options, plot.getPlaceholder(), newEntries);
+            }
+        });
+    }
+
+    $.plot.plugins.push({
+        init: init,
+        options: defaultOptions,
+        name: 'legend',
+        version: '1.0'
+    });
+})(jQuery);

frontend/lib/flot/jquery.flot.logaxis.js

@@ -0,0 +1,298 @@
+/* Pretty handling of log axes.
+
+Copyright (c) 2007-2014 IOLA and Ole Laursen.
+Copyright (c) 2015 Ciprian Ceteras cipix2000@gmail.com.
+Copyright (c) 2017 Raluca Portase
+Licensed under the MIT license.
+
+Set axis.mode to "log" to enable.
+*/
+
+/* global jQuery*/
+
+/**
+## jquery.flot.logaxis
+This plugin is used to create logarithmic axis. This includes tick generation,
+formatters and transformers to and from logarithmic representation.
+
+### Methods and hooks
+*/
+
+(function ($) {
+    'use strict';
+
+    var options = {
+        xaxis: {}
+    };
+
+    /*tick generators and formatters*/
+    var PREFERRED_LOG_TICK_VALUES = computePreferedLogTickValues(Number.MAX_VALUE, 10),
+        EXTENDED_LOG_TICK_VALUES = computePreferedLogTickValues(Number.MAX_VALUE, 4);
+
+    function computePreferedLogTickValues(endLimit, rangeStep) {
+        var log10End = Math.floor(Math.log(endLimit) * Math.LOG10E) - 1,
+            log10Start = -log10End,
+            val, range, vals = [];
+
+        for (var power = log10Start; power <= log10End; power++) {
+            range = parseFloat('1e' + power);
+            for (var mult = 1; mult < 9; mult += rangeStep) {
+                val = range * mult;
+                vals.push(val);
+            }
+        }
+        return vals;
+    }
+
+    /**
+    - logTickGenerator(plot, axis, noTicks)
+
+    Generates logarithmic ticks, depending on axis range.
+    In case the number of ticks that can be generated is less than the expected noTicks/4,
+    a linear tick generation is used.
+    */
+    var logTickGenerator = function (plot, axis, noTicks) {
+        var ticks = [],
+            minIdx = -1,
+            maxIdx = -1,
+            surface = plot.getCanvas(),
+            logTickValues = PREFERRED_LOG_TICK_VALUES,
+            min = clampAxis(axis, plot),
+            max = axis.max;
+
+        if (!noTicks) {
+            noTicks = 0.3 * Math.sqrt(axis.direction === "x" ? surface.width : surface.height);
+        }
+
+        PREFERRED_LOG_TICK_VALUES.some(function (val, i) {
+            if (val >= min) {
+                minIdx = i;
+                return true;
+            } else {
+                return false;
+            }
+        });
+
+        PREFERRED_LOG_TICK_VALUES.some(function (val, i) {
+            if (val >= max) {
+                maxIdx = i;
+                return true;
+            } else {
+                return false;
+            }
+        });
+
+        if (maxIdx === -1) {
+            maxIdx = PREFERRED_LOG_TICK_VALUES.length - 1;
+        }
+
+        if (maxIdx - minIdx <= noTicks / 4 && logTickValues.length !== EXTENDED_LOG_TICK_VALUES.length) {
+            //try with multiple of 5 for tick values
+            logTickValues = EXTENDED_LOG_TICK_VALUES;
+            minIdx *= 2;
+            maxIdx *= 2;
+        }
+
+        var lastDisplayed = null,
+            inverseNoTicks = 1 / noTicks,
+            tickValue, pixelCoord, tick;
+
+        // Count the number of tick values would appear, if we can get at least
+        // nTicks / 4 accept them.
+        if (maxIdx - minIdx >= noTicks / 4) {
+            for (var idx = maxIdx; idx >= minIdx; idx--) {
+                tickValue = logTickValues[idx];
+                pixelCoord = (Math.log(tickValue) - Math.log(min)) / (Math.log(max) - Math.log(min));
+                tick = tickValue;
+
+                if (lastDisplayed === null) {
+                    lastDisplayed = {
+                        pixelCoord: pixelCoord,
+                        idealPixelCoord: pixelCoord
+                    };
+                } else {
+                    if (Math.abs(pixelCoord - lastDisplayed.pixelCoord) >= inverseNoTicks) {
+                        lastDisplayed = {
+                            pixelCoord: pixelCoord,
+                            idealPixelCoord: lastDisplayed.idealPixelCoord - inverseNoTicks
+                        };
+                    } else {
+                        tick = null;
+                    }
+                }
+
+                if (tick) {
+                    ticks.push(tick);
+                }
+            }
+            // Since we went in backwards order.
+            ticks.reverse();
+        } else {
+            var tickSize = plot.computeTickSize(min, max, noTicks),
+                customAxis = {min: min, max: max, tickSize: tickSize};
+            ticks = $.plot.linearTickGenerator(customAxis);
+        }
+
+        return ticks;
+    };
+
+    var clampAxis = function (axis, plot) {
+        var min = axis.min,
+            max = axis.max;
+
+        if (min <= 0) {
+            //for empty graph if axis.min is not strictly positive make it 0.1
+            if (axis.datamin === null) {
+                min = axis.min = 0.1;
+            } else {
+                min = processAxisOffset(plot, axis);
+            }
+
+            if (max < min) {
+                axis.max = axis.datamax !== null ? axis.datamax : axis.options.max;
+                axis.options.offset.below = 0;
+                axis.options.offset.above = 0;
+            }
+        }
+
+        return min;
+    }
+
+    /**
+    - logTickFormatter(value, axis, precision)
+
+    This is the corresponding tickFormatter of the logaxis.
+    For a number greater that 10^6 or smaller than 10^(-3), this will be drawn
+    with e representation
+    */
+    var logTickFormatter = function (value, axis, precision) {
+        var tenExponent = value > 0 ? Math.floor(Math.log(value) / Math.LN10) : 0;
+
+        if (precision) {
+            if ((tenExponent >= -4) && (tenExponent <= 7)) {
+                return $.plot.defaultTickFormatter(value, axis, precision);
+            } else {
+                return $.plot.expRepTickFormatter(value, axis, precision);
+            }
+        }
+        if ((tenExponent >= -4) && (tenExponent <= 7)) {
+            //if we have float numbers, return a limited length string(ex: 0.0009 is represented as 0.000900001)
+            var formattedValue = tenExponent < 0 ? value.toFixed(-tenExponent) : value.toFixed(tenExponent + 2);
+            if (formattedValue.indexOf('.') !== -1) {
+                var lastZero = formattedValue.lastIndexOf('0');
+
+                while (lastZero === formattedValue.length - 1) {
+                    formattedValue = formattedValue.slice(0, -1);
+                    lastZero = formattedValue.lastIndexOf('0');
+                }
+
+                //delete the dot if is last
+                if (formattedValue.indexOf('.') === formattedValue.length - 1) {
+                    formattedValue = formattedValue.slice(0, -1);
+                }
+            }
+            return formattedValue;
+        } else {
+            return $.plot.expRepTickFormatter(value, axis);
+        }
+    };
+
+    /*logaxis caracteristic functions*/
+    var logTransform = function (v) {
+        if (v < PREFERRED_LOG_TICK_VALUES[0]) {
+            v = PREFERRED_LOG_TICK_VALUES[0];
+        }
+
+        return Math.log(v);
+    };
+
+    var logInverseTransform = function (v) {
+        return Math.exp(v);
+    };
+
+    var invertedTransform = function (v) {
+        return -v;
+    }
+
+    var invertedLogTransform = function (v) {
+        return -logTransform(v);
+    }
+
+    var invertedLogInverseTransform = function (v) {
+        return logInverseTransform(-v);
+    }
+
+    /**
+    - setDataminRange(plot, axis)
+
+    It is used for clamping the starting point of a logarithmic axis.
+    This will set the axis datamin range to 0.1 or to the first datapoint greater then 0.
+    The function is usefull since the logarithmic representation can not show
+    values less than or equal to 0.
+    */
+    function setDataminRange(plot, axis) {
+        if (axis.options.mode === 'log' && axis.datamin <= 0) {
+            if (axis.datamin === null) {
+                axis.datamin = 0.1;
+            } else {
+                axis.datamin = processAxisOffset(plot, axis);
+            }
+        }
+    }
+
+    function processAxisOffset(plot, axis) {
+        var series = plot.getData(),
+            range = series
+                .filter(function(series) {
+                    return series.xaxis === axis || series.yaxis === axis;
+                })
+                .map(function(series) {
+                    return plot.computeRangeForDataSeries(series, null, isValid);
+                }),
+            min = axis.direction === 'x' 
+            ? Math.min(0.1, range && range[0] ? range[0].xmin : 0.1) 
+            : Math.min(0.1, range && range[0] ? range[0].ymin : 0.1);
+
+        axis.min = min;
+
+        return min;
+    }
+
+    function isValid(a) {
+        return a > 0;
+    }
+
+    function init(plot) {
+        plot.hooks.processOptions.push(function (plot) {
+            $.each(plot.getAxes(), function (axisName, axis) {
+                var opts = axis.options;
+                if (opts.mode === 'log') {
+                    axis.tickGenerator = function (axis) {
+                        var noTicks = 11;
+                        return logTickGenerator(plot, axis, noTicks);
+                    };
+                    if (typeof axis.options.tickFormatter !== 'function') {
+                        axis.options.tickFormatter = logTickFormatter;
+                    }
+                    axis.options.transform = opts.inverted ? invertedLogTransform : logTransform;
+                    axis.options.inverseTransform = opts.inverted ? invertedLogInverseTransform : logInverseTransform;
+                    axis.options.autoScaleMargin = 0;
+                    plot.hooks.setRange.push(setDataminRange);
+                } else if (opts.inverted) {
+                    axis.options.transform = invertedTransform;
+                    axis.options.inverseTransform = invertedTransform;
+                }
+            });
+        });
+    }
+
+    $.plot.plugins.push({
+        init: init,
+        options: options,
+        name: 'log',
+        version: '0.1'
+    });
+
+    $.plot.logTicksGenerator = logTickGenerator;
+    $.plot.logTickFormatter = logTickFormatter;
+})(jQuery);

frontend/lib/flot/jquery.flot.navigate.js

@@ -0,0 +1,798 @@
+/* Flot plugin for adding the ability to pan and zoom the plot.
+
+Copyright (c) 2007-2014 IOLA and Ole Laursen.
+Copyright (c) 2016 Ciprian Ceteras.
+Copyright (c) 2017 Raluca Portase.
+Licensed under the MIT license.
+
+*/
+
+/**
+## jquery.flot.navigate.js
+
+This flot plugin is used for adding the ability to pan and zoom the plot.
+A higher level overview is available at [interactions](interactions.md) documentation.
+
+The default behaviour is scrollwheel up/down to zoom in, drag
+to pan. The plugin defines plot.zoom({ center }), plot.zoomOut() and
+plot.pan( offset ) so you easily can add custom controls. It also fires
+"plotpan" and "plotzoom" events, useful for synchronizing plots.
+
+The plugin supports these options:
+```js
+    zoom: {
+        interactive: false,
+        active: false,
+        amount: 1.5         // 2 = 200% (zoom in), 0.5 = 50% (zoom out)
+    }
+
+    pan: {
+        interactive: false,
+        active: false,
+        cursor: "move",     // CSS mouse cursor value used when dragging, e.g. "pointer"
+        frameRate: 60,
+        mode: "smart"       // enable smart pan mode
+    }
+
+    xaxis: {
+        axisZoom: true, //zoom axis when mouse over it is allowed
+        plotZoom: true, //zoom axis is allowed for plot zoom
+        axisPan: true, //pan axis when mouse over it is allowed
+        plotPan: true //pan axis is allowed for plot pan
+    }
+
+    yaxis: {
+        axisZoom: true, //zoom axis when mouse over it is allowed
+        plotZoom: true, //zoom axis is allowed for plot zoom
+        axisPan: true, //pan axis when mouse over it is allowed
+        plotPan: true //pan axis is allowed for plot pan
+    }
+```
+**interactive** enables the built-in drag/click behaviour. If you enable
+interactive for pan, then you'll have a basic plot that supports moving
+around; the same for zoom.
+
+**active** is true after a touch tap on plot. This enables plot navigation.
+Once activated, zoom and pan cannot be deactivated. When the plot becomes active,
+"plotactivated" event is triggered.
+
+**amount** specifies the default amount to zoom in (so 1.5 = 150%) relative to
+the current viewport.
+
+**cursor** is a standard CSS mouse cursor string used for visual feedback to the
+user when dragging.
+
+**frameRate** specifies the maximum number of times per second the plot will
+update itself while the user is panning around on it (set to null to disable
+intermediate pans, the plot will then not update until the mouse button is
+released).
+
+**mode** a string specifies the pan mode for mouse interaction. Accepted values:
+'manual': no pan hint or direction snapping;
+'smart': The graph shows pan hint bar and the pan movement will snap
+to one direction when the drag direction is close to it;
+'smartLock'. The graph shows pan hint bar and the pan movement will always
+snap to a direction that the drag diorection started with.
+
+Example API usage:
+```js
+    plot = $.plot(...);
+
+    // zoom default amount in on the pixel ( 10, 20 )
+    plot.zoom({ center: { left: 10, top: 20 } });
+
+    // zoom out again
+    plot.zoomOut({ center: { left: 10, top: 20 } });
+
+    // zoom 200% in on the pixel (10, 20)
+    plot.zoom({ amount: 2, center: { left: 10, top: 20 } });
+
+    // pan 100 pixels to the left (changing x-range in a positive way) and 20 down
+    plot.pan({ left: -100, top: 20 })
+```
+
+Here, "center" specifies where the center of the zooming should happen. Note
+that this is defined in pixel space, not the space of the data points (you can
+use the p2c helpers on the axes in Flot to help you convert between these).
+
+**amount** is the amount to zoom the viewport relative to the current range, so
+1 is 100% (i.e. no change), 1.5 is 150% (zoom in), 0.7 is 70% (zoom out). You
+can set the default in the options.
+*/
+
+/* eslint-enable */
+(function($) {
+    'use strict';
+
+    var options = {
+        zoom: {
+            interactive: false,
+            active: false,
+            amount: 1.5 // how much to zoom relative to current position, 2 = 200% (zoom in), 0.5 = 50% (zoom out)
+        },
+        pan: {
+            interactive: false,
+            active: false,
+            cursor: "move",
+            frameRate: 60,
+            mode: 'smart'
+        },
+        recenter: {
+            interactive: true
+        },
+        xaxis: {
+            axisZoom: true, //zoom axis when mouse over it is allowed
+            plotZoom: true, //zoom axis is allowed for plot zoom
+            axisPan: true, //pan axis when mouse over it is allowed
+            plotPan: true //pan axis is allowed for plot pan
+        },
+        yaxis: {
+            axisZoom: true,
+            plotZoom: true,
+            axisPan: true,
+            plotPan: true
+        }
+    };
+
+    var saturated = $.plot.saturated;
+    var browser = $.plot.browser;
+    var SNAPPING_CONSTANT = $.plot.uiConstants.SNAPPING_CONSTANT;
+    var PANHINT_LENGTH_CONSTANT = $.plot.uiConstants.PANHINT_LENGTH_CONSTANT;
+
+    function init(plot) {
+        plot.hooks.processOptions.push(initNevigation);
+    }
+
+    function initNevigation(plot, options) {
+        var panAxes = null;
+        var canDrag = false;
+        var useManualPan = options.pan.mode === 'manual',
+            smartPanLock = options.pan.mode === 'smartLock',
+            useSmartPan = smartPanLock || options.pan.mode === 'smart';
+
+        function onZoomClick(e, zoomOut, amount) {
+            var page = browser.getPageXY(e);
+
+            var c = plot.offset();
+            c.left = page.X - c.left;
+            c.top = page.Y - c.top;
+
+            var ec = plot.getPlaceholder().offset();
+            ec.left = page.X - ec.left;
+            ec.top = page.Y - ec.top;
+
+            var axes = plot.getXAxes().concat(plot.getYAxes()).filter(function (axis) {
+                var box = axis.box;
+                if (box !== undefined) {
+                    return (ec.left > box.left) && (ec.left < box.left + box.width) &&
+                        (ec.top > box.top) && (ec.top < box.top + box.height);
+                }
+            });
+
+            if (axes.length === 0) {
+                axes = undefined;
+            }
+
+            if (zoomOut) {
+                plot.zoomOut({
+                    center: c,
+                    axes: axes,
+                    amount: amount
+                });
+            } else {
+                plot.zoom({
+                    center: c,
+                    axes: axes,
+                    amount: amount
+                });
+            }
+        }
+
+        var prevCursor = 'default',
+            panHint = null,
+            panTimeout = null,
+            plotState,
+            prevDragPosition = { x: 0, y: 0 },
+            isPanAction = false;
+
+        function onMouseWheel(e, delta) {
+            var maxAbsoluteDeltaOnMac = 1,
+                isMacScroll = Math.abs(e.originalEvent.deltaY) <= maxAbsoluteDeltaOnMac,
+                defaultNonMacScrollAmount = null,
+                macMagicRatio = 50,
+                amount = isMacScroll ? 1 + Math.abs(e.originalEvent.deltaY) / macMagicRatio : defaultNonMacScrollAmount;
+
+            if (isPanAction) {
+                onDragEnd(e);
+            }
+
+            if (plot.getOptions().zoom.active) {
+                e.preventDefault();
+                onZoomClick(e, delta < 0, amount);
+                return false;
+            }
+        }
+
+        plot.navigationState = function(startPageX, startPageY) {
+            var axes = this.getAxes();
+            var result = {};
+            Object.keys(axes).forEach(function(axisName) {
+                var axis = axes[axisName];
+                result[axisName] = {
+                    navigationOffset: { below: axis.options.offset.below || 0,
+                        above: axis.options.offset.above || 0},
+                    axisMin: axis.min,
+                    axisMax: axis.max,
+                    diagMode: false
+                }
+            });
+
+            result.startPageX = startPageX || 0;
+            result.startPageY = startPageY || 0;
+            return result;
+        }
+
+        function onMouseDown(e) {
+            canDrag = true;
+        }
+
+        function onMouseUp(e) {
+            canDrag = false;
+        }
+
+        function isLeftMouseButtonPressed(e) {
+            return e.button === 0;
+        }
+
+        function onDragStart(e) {
+            if (!canDrag || !isLeftMouseButtonPressed(e)) {
+                return false;
+            }
+
+            isPanAction = true;
+            var page = browser.getPageXY(e);
+
+            var ec = plot.getPlaceholder().offset();
+            ec.left = page.X - ec.left;
+            ec.top = page.Y - ec.top;
+
+            panAxes = plot.getXAxes().concat(plot.getYAxes()).filter(function (axis) {
+                var box = axis.box;
+                if (box !== undefined) {
+                    return (ec.left > box.left) && (ec.left < box.left + box.width) &&
+                        (ec.top > box.top) && (ec.top < box.top + box.height);
+                }
+            });
+
+            if (panAxes.length === 0) {
+                panAxes = undefined;
+            }
+
+            var c = plot.getPlaceholder().css('cursor');
+            if (c) {
+                prevCursor = c;
+            }
+
+            plot.getPlaceholder().css('cursor', plot.getOptions().pan.cursor);
+
+            if (useSmartPan) {
+                plotState = plot.navigationState(page.X, page.Y);
+            } else if (useManualPan) {
+                prevDragPosition.x = page.X;
+                prevDragPosition.y = page.Y;
+            }
+        }
+        
+        function onDrag(e) {
+            if (!isPanAction) { 
+                return; 
+            }
+
+            var page = browser.getPageXY(e);
+            var frameRate = plot.getOptions().pan.frameRate;
+
+            if (frameRate === -1) {
+                if (useSmartPan) {
+                    plot.smartPan({
+                        x: plotState.startPageX - page.X,
+                        y: plotState.startPageY - page.Y
+                    }, plotState, panAxes, false, smartPanLock);
+                } else if (useManualPan) {
+                    plot.pan({
+                        left: prevDragPosition.x - page.X,
+                        top: prevDragPosition.y - page.Y,
+                        axes: panAxes
+                    });
+                    prevDragPosition.x = page.X;
+                    prevDragPosition.y = page.Y;
+                }
+                return;
+            }
+
+            if (panTimeout || !frameRate) return;
+
+            panTimeout = setTimeout(function() {
+                if (useSmartPan) {
+                    plot.smartPan({
+                        x: plotState.startPageX - page.X,
+                        y: plotState.startPageY - page.Y
+                    }, plotState, panAxes, false, smartPanLock);
+                } else if (useManualPan) {
+                    plot.pan({
+                        left: prevDragPosition.x - page.X,
+                        top: prevDragPosition.y - page.Y,
+                        axes: panAxes
+                    });
+                    prevDragPosition.x = page.X;
+                    prevDragPosition.y = page.Y;
+                }
+
+                panTimeout = null;
+            }, 1 / frameRate * 1000);
+        }
+
+        function onDragEnd(e) {
+            if (!isPanAction) { 
+                return; 
+            }
+
+            if (panTimeout) {
+                clearTimeout(panTimeout);
+                panTimeout = null;
+            }
+
+            isPanAction = false;
+            var page = browser.getPageXY(e);
+
+            plot.getPlaceholder().css('cursor', prevCursor);
+
+            if (useSmartPan) {
+                plot.smartPan({
+                    x: plotState.startPageX - page.X,
+                    y: plotState.startPageY - page.Y
+                }, plotState, panAxes, false, smartPanLock);
+                plot.smartPan.end();
+            } else if (useManualPan) {
+                plot.pan({
+                    left: prevDragPosition.x - page.X,
+                    top: prevDragPosition.y - page.Y,
+                    axes: panAxes
+                });
+                prevDragPosition.x = 0;
+                prevDragPosition.y = 0;
+            }
+        }
+
+        function onDblClick(e) {
+            plot.activate();
+            var o = plot.getOptions()
+
+            if (!o.recenter.interactive) { return; }
+
+            var axes = plot.getTouchedAxis(e.clientX, e.clientY),
+                event;
+
+            plot.recenter({ axes: axes[0] ? axes : null });
+
+            if (axes[0]) {
+                event = new $.Event('re-center', { detail: {
+                    axisTouched: axes[0]
+                }});
+            } else {
+                event = new $.Event('re-center', { detail: e });
+            }
+            plot.getPlaceholder().trigger(event);
+        }
+
+        function onClick(e) {
+            plot.activate();
+
+            if (isPanAction) {
+                onDragEnd(e);
+            }
+
+            return false;
+        }
+
+        plot.activate = function() {
+            var o = plot.getOptions();
+            if (!o.pan.active || !o.zoom.active) {
+                o.pan.active = true;
+                o.zoom.active = true;
+                plot.getPlaceholder().trigger("plotactivated", [plot]);
+            }
+        }
+
+        function bindEvents(plot, eventHolder) {
+            var o = plot.getOptions();
+            if (o.zoom.interactive) {
+                eventHolder.mousewheel(onMouseWheel);
+            }
+
+            if (o.pan.interactive) {
+                plot.addEventHandler("dragstart", onDragStart, eventHolder, 0);
+                plot.addEventHandler("drag", onDrag, eventHolder, 0);
+                plot.addEventHandler("dragend", onDragEnd, eventHolder, 0);
+                eventHolder.bind("mousedown", onMouseDown);
+                eventHolder.bind("mouseup", onMouseUp);
+            }
+
+            eventHolder.dblclick(onDblClick);
+            eventHolder.click(onClick);
+        }
+
+        plot.zoomOut = function(args) {
+            if (!args) {
+                args = {};
+            }
+
+            if (!args.amount) {
+                args.amount = plot.getOptions().zoom.amount;
+            }
+
+            args.amount = 1 / args.amount;
+            plot.zoom(args);
+        };
+
+        plot.zoom = function(args) {
+            if (!args) {
+                args = {};
+            }
+
+            var c = args.center,
+                amount = args.amount || plot.getOptions().zoom.amount,
+                w = plot.width(),
+                h = plot.height(),
+                axes = args.axes || plot.getAxes();
+
+            if (!c) {
+                c = {
+                    left: w / 2,
+                    top: h / 2
+                };
+            }
+
+            var xf = c.left / w,
+                yf = c.top / h,
+                minmax = {
+                    x: {
+                        min: c.left - xf * w / amount,
+                        max: c.left + (1 - xf) * w / amount
+                    },
+                    y: {
+                        min: c.top - yf * h / amount,
+                        max: c.top + (1 - yf) * h / amount
+                    }
+                };
+
+            for (var key in axes) {
+                if (!axes.hasOwnProperty(key)) {
+                    continue;
+                }
+
+                var axis = axes[key],
+                    opts = axis.options,
+                    min = minmax[axis.direction].min,
+                    max = minmax[axis.direction].max,
+                    navigationOffset = axis.options.offset;
+
+                //skip axis without axisZoom when zooming only on certain axis or axis without plotZoom for zoom on entire plot
+                if ((!opts.axisZoom && args.axes) || (!args.axes && !opts.plotZoom)) {
+                    continue;
+                }
+
+                min = $.plot.saturated.saturate(axis.c2p(min));
+                max = $.plot.saturated.saturate(axis.c2p(max));
+                if (min > max) {
+                    // make sure min < max
+                    var tmp = min;
+                    min = max;
+                    max = tmp;
+                }
+
+                var offsetBelow = $.plot.saturated.saturate(navigationOffset.below - (axis.min - min));
+                var offsetAbove = $.plot.saturated.saturate(navigationOffset.above - (axis.max - max));
+                opts.offset = { below: offsetBelow, above: offsetAbove };
+            };
+
+            plot.setupGrid(true);
+            plot.draw();
+
+            if (!args.preventEvent) {
+                plot.getPlaceholder().trigger("plotzoom", [plot, args]);
+            }
+        };
+
+        plot.pan = function(args) {
+            var delta = {
+                x: +args.left,
+                y: +args.top
+            };
+
+            if (isNaN(delta.x)) delta.x = 0;
+            if (isNaN(delta.y)) delta.y = 0;
+
+            $.each(args.axes || plot.getAxes(), function(_, axis) {
+                var opts = axis.options,
+                    d = delta[axis.direction];
+
+                //skip axis without axisPan when panning only on certain axis or axis without plotPan for pan the entire plot
+                if ((!opts.axisPan && args.axes) || (!opts.plotPan && !args.axes)) {
+                    return;
+                }
+
+                if (d !== 0) {
+                    var navigationOffsetBelow = saturated.saturate(axis.c2p(axis.p2c(axis.min) + d) - axis.c2p(axis.p2c(axis.min))),
+                        navigationOffsetAbove = saturated.saturate(axis.c2p(axis.p2c(axis.max) + d) - axis.c2p(axis.p2c(axis.max)));
+
+                    if (!isFinite(navigationOffsetBelow)) {
+                        navigationOffsetBelow = 0;
+                    }
+
+                    if (!isFinite(navigationOffsetAbove)) {
+                        navigationOffsetAbove = 0;
+                    }
+
+                    opts.offset = {
+                        below: saturated.saturate(navigationOffsetBelow + (opts.offset.below || 0)),
+                        above: saturated.saturate(navigationOffsetAbove + (opts.offset.above || 0))
+                    };
+                }
+            });
+
+            plot.setupGrid(true);
+            plot.draw();
+            if (!args.preventEvent) {
+                plot.getPlaceholder().trigger("plotpan", [plot, args]);
+            }
+        };
+
+        plot.recenter = function(args) {
+            $.each(args.axes || plot.getAxes(), function(_, axis) {
+                if (args.axes) {
+                    if (this.direction === 'x') {
+                        axis.options.offset = { below: 0 };
+                    } else if (this.direction === 'y') {
+                        axis.options.offset = { above: 0 };
+                    }
+                } else {
+                    axis.options.offset = { below: 0, above: 0 };
+                }
+            });
+            plot.setupGrid(true);
+            plot.draw();
+        };
+
+        var shouldSnap = function(delta) {
+            return (Math.abs(delta.y) < SNAPPING_CONSTANT && Math.abs(delta.x) >= SNAPPING_CONSTANT) ||
+                (Math.abs(delta.x) < SNAPPING_CONSTANT && Math.abs(delta.y) >= SNAPPING_CONSTANT);
+        }
+
+        // adjust delta so the pan action is constrained on the vertical or horizontal direction
+        // it the movements in the other direction are small
+        var adjustDeltaToSnap = function(delta) {
+            if (Math.abs(delta.x) < SNAPPING_CONSTANT && Math.abs(delta.y) >= SNAPPING_CONSTANT) {
+                return {x: 0, y: delta.y};
+            }
+
+            if (Math.abs(delta.y) < SNAPPING_CONSTANT && Math.abs(delta.x) >= SNAPPING_CONSTANT) {
+                return {x: delta.x, y: 0};
+            }
+
+            return delta;
+        }
+
+        var lockedDirection = null;
+        var lockDeltaDirection = function(delta) {
+            if (!lockedDirection && Math.max(Math.abs(delta.x), Math.abs(delta.y)) >= SNAPPING_CONSTANT) {
+                lockedDirection = Math.abs(delta.x) < Math.abs(delta.y) ? 'y' : 'x';
+            }
+
+            switch (lockedDirection) {
+                case 'x':
+                    return { x: delta.x, y: 0 };
+                case 'y':
+                    return { x: 0, y: delta.y };
+                default:
+                    return { x: 0, y: 0 };
+            }
+        }
+
+        var isDiagonalMode = function(delta) {
+            if (Math.abs(delta.x) > 0 && Math.abs(delta.y) > 0) {
+                return true;
+            }
+            return false;
+        }
+
+        var restoreAxisOffset = function(axes, initialState, delta) {
+            var axis;
+            Object.keys(axes).forEach(function(axisName) {
+                axis = axes[axisName];
+                if (delta[axis.direction] === 0) {
+                    axis.options.offset.below = initialState[axisName].navigationOffset.below;
+                    axis.options.offset.above = initialState[axisName].navigationOffset.above;
+                }
+            });
+        }
+
+        var prevDelta = { x: 0, y: 0 };
+        plot.smartPan = function(delta, initialState, panAxes, preventEvent, smartLock) {
+            var snap = smartLock ? true : shouldSnap(delta),
+                axes = plot.getAxes(),
+                opts;
+            delta = smartLock ? lockDeltaDirection(delta) : adjustDeltaToSnap(delta);
+
+            if (isDiagonalMode(delta)) {
+                initialState.diagMode = true;
+            }
+
+            if (snap && initialState.diagMode === true) {
+                initialState.diagMode = false;
+                restoreAxisOffset(axes, initialState, delta);
+            }
+
+            if (snap) {
+                panHint = {
+                    start: {
+                        x: initialState.startPageX - plot.offset().left + plot.getPlotOffset().left,
+                        y: initialState.startPageY - plot.offset().top + plot.getPlotOffset().top
+                    },
+                    end: {
+                        x: initialState.startPageX - delta.x - plot.offset().left + plot.getPlotOffset().left,
+                        y: initialState.startPageY - delta.y - plot.offset().top + plot.getPlotOffset().top
+                    }
+                }
+            } else {
+                panHint = {
+                    start: {
+                        x: initialState.startPageX - plot.offset().left + plot.getPlotOffset().left,
+                        y: initialState.startPageY - plot.offset().top + plot.getPlotOffset().top
+                    },
+                    end: false
+                }
+            }
+
+            if (isNaN(delta.x)) delta.x = 0;
+            if (isNaN(delta.y)) delta.y = 0;
+
+            if (panAxes) {
+                axes = panAxes;
+            }
+
+            var axis, axisMin, axisMax, p, d;
+            Object.keys(axes).forEach(function(axisName) {
+                axis = axes[axisName];
+                axisMin = axis.min;
+                axisMax = axis.max;
+                opts = axis.options;
+
+                d = delta[axis.direction];
+                p = prevDelta[axis.direction];
+
+                //skip axis without axisPan when panning only on certain axis or axis without plotPan for pan the entire plot
+                if ((!opts.axisPan && panAxes) || (!panAxes && !opts.plotPan)) {
+                    return;
+                }
+
+                if (d !== 0) {
+                    var navigationOffsetBelow = saturated.saturate(axis.c2p(axis.p2c(axisMin) - (p - d)) - axis.c2p(axis.p2c(axisMin))),
+                        navigationOffsetAbove = saturated.saturate(axis.c2p(axis.p2c(axisMax) - (p - d)) - axis.c2p(axis.p2c(axisMax)));
+
+                    if (!isFinite(navigationOffsetBelow)) {
+                        navigationOffsetBelow = 0;
+                    }
+
+                    if (!isFinite(navigationOffsetAbove)) {
+                        navigationOffsetAbove = 0;
+                    }
+
+                    axis.options.offset.below = saturated.saturate(navigationOffsetBelow + (axis.options.offset.below || 0));
+                    axis.options.offset.above = saturated.saturate(navigationOffsetAbove + (axis.options.offset.above || 0));
+                }
+            });
+
+            prevDelta = delta;
+            plot.setupGrid(true);
+            plot.draw();
+
+            if (!preventEvent) {
+                plot.getPlaceholder().trigger("plotpan", [plot, delta, panAxes, initialState]);
+            }
+        };
+
+        plot.smartPan.end = function() {
+            panHint = null;
+            lockedDirection = null;
+            prevDelta = { x: 0, y: 0 };
+            plot.triggerRedrawOverlay();
+        }
+
+        function shutdown(plot, eventHolder) {
+            eventHolder.unbind("mousewheel", onMouseWheel);
+            eventHolder.unbind("mousedown", onMouseDown);
+            eventHolder.unbind("mouseup", onMouseUp);
+            eventHolder.unbind("dragstart", onDragStart);
+            eventHolder.unbind("drag", onDrag);
+            eventHolder.unbind("dragend", onDragEnd);
+            eventHolder.unbind("dblclick", onDblClick);
+            eventHolder.unbind("click", onClick);
+
+            if (panTimeout) clearTimeout(panTimeout);
+        }
+
+        function drawOverlay(plot, ctx) {
+            if (panHint) {
+                ctx.strokeStyle = 'rgba(96, 160, 208, 0.7)';
+                ctx.lineWidth = 2;
+                ctx.lineJoin = "round";
+                var startx = Math.round(panHint.start.x),
+                    starty = Math.round(panHint.start.y),
+                    endx, endy;
+
+                if (panAxes) {
+                    if (panAxes[0].direction === 'x') {
+                        endy = Math.round(panHint.start.y);
+                        endx = Math.round(panHint.end.x);
+                    } else if (panAxes[0].direction === 'y') {
+                        endx = Math.round(panHint.start.x);
+                        endy = Math.round(panHint.end.y);
+                    }
+                } else {
+                    endx = Math.round(panHint.end.x);
+                    endy = Math.round(panHint.end.y);
+                }
+
+                ctx.beginPath();
+
+                if (panHint.end === false) {
+                    ctx.moveTo(startx, starty - PANHINT_LENGTH_CONSTANT);
+                    ctx.lineTo(startx, starty + PANHINT_LENGTH_CONSTANT);
+
+                    ctx.moveTo(startx + PANHINT_LENGTH_CONSTANT, starty);
+                    ctx.lineTo(startx - PANHINT_LENGTH_CONSTANT, starty);
+                } else {
+                    var dirX = starty === endy;
+
+                    ctx.moveTo(startx - (dirX ? 0 : PANHINT_LENGTH_CONSTANT), starty - (dirX ? PANHINT_LENGTH_CONSTANT : 0));
+                    ctx.lineTo(startx + (dirX ? 0 : PANHINT_LENGTH_CONSTANT), starty + (dirX ? PANHINT_LENGTH_CONSTANT : 0));
+
+                    ctx.moveTo(startx, starty);
+                    ctx.lineTo(endx, endy);
+
+                    ctx.moveTo(endx - (dirX ? 0 : PANHINT_LENGTH_CONSTANT), endy - (dirX ? PANHINT_LENGTH_CONSTANT : 0));
+                    ctx.lineTo(endx + (dirX ? 0 : PANHINT_LENGTH_CONSTANT), endy + (dirX ? PANHINT_LENGTH_CONSTANT : 0));
+                }
+
+                ctx.stroke();
+            }
+        }
+
+        plot.getTouchedAxis = function(touchPointX, touchPointY) {
+            var ec = plot.getPlaceholder().offset();
+            ec.left = touchPointX - ec.left;
+            ec.top = touchPointY - ec.top;
+
+            var axis = plot.getXAxes().concat(plot.getYAxes()).filter(function (axis) {
+                var box = axis.box;
+                if (box !== undefined) {
+                    return (ec.left > box.left) && (ec.left < box.left + box.width) &&
+                            (ec.top > box.top) && (ec.top < box.top + box.height);
+                }
+            });
+
+            return axis;
+        }
+
+        plot.hooks.drawOverlay.push(drawOverlay);
+        plot.hooks.bindEvents.push(bindEvents);
+        plot.hooks.shutdown.push(shutdown);
+    }
+
+    $.plot.plugins.push({
+        init: init,
+        options: options,
+        name: 'navigate',
+        version: '1.3'
+    });
+})(jQuery);

frontend/lib/flot/jquery.flot.pie.js

@@ -0,0 +1,786 @@
+/* Flot plugin for rendering pie charts.
+
+Copyright (c) 2007-2014 IOLA and Ole Laursen.
+Licensed under the MIT license.
+
+The plugin assumes that each series has a single data value, and that each
+value is a positive integer or zero.  Negative numbers don't make sense for a
+pie chart, and have unpredictable results.  The values do NOT need to be
+passed in as percentages; the plugin will calculate the total and per-slice
+percentages internally.
+
+* Created by Brian Medendorp
+
+* Updated with contributions from btburnett3, Anthony Aragues and Xavi Ivars
+
+The plugin supports these options:
+
+    series: {
+        pie: {
+            show: true/false
+            radius: 0-1 for percentage of fullsize, or a specified pixel length, or 'auto'
+            innerRadius: 0-1 for percentage of fullsize or a specified pixel length, for creating a donut effect
+            startAngle: 0-2 factor of PI used for starting angle (in radians) i.e 3/2 starts at the top, 0 and 2 have the same result
+            tilt: 0-1 for percentage to tilt the pie, where 1 is no tilt, and 0 is completely flat (nothing will show)
+            offset: {
+                top: integer value to move the pie up or down
+                left: integer value to move the pie left or right, or 'auto'
+            },
+            stroke: {
+                color: any hexidecimal color value (other formats may or may not work, so best to stick with something like '#FFF')
+                width: integer pixel width of the stroke
+            },
+            label: {
+                show: true/false, or 'auto'
+                formatter:  a user-defined function that modifies the text/style of the label text
+                radius: 0-1 for percentage of fullsize, or a specified pixel length
+                background: {
+                    color: any hexidecimal color value (other formats may or may not work, so best to stick with something like '#000')
+                    opacity: 0-1
+                },
+                threshold: 0-1 for the percentage value at which to hide labels (if they're too small)
+            },
+            combine: {
+                threshold: 0-1 for the percentage value at which to combine slices (if they're too small)
+                color: any hexidecimal color value (other formats may or may not work, so best to stick with something like '#CCC'), if null, the plugin will automatically use the color of the first slice to be combined
+                label: any text value of what the combined slice should be labeled
+            }
+            highlight: {
+                opacity: 0-1
+            }
+        }
+    }
+
+More detail and specific examples can be found in the included HTML file.
+
+*/
+
+(function($) {
+    // Maximum redraw attempts when fitting labels within the plot
+
+    var REDRAW_ATTEMPTS = 10;
+
+    // Factor by which to shrink the pie when fitting labels within the plot
+
+    var REDRAW_SHRINK = 0.95;
+
+    function init(plot) {
+        var canvas = null,
+            target = null,
+            options = null,
+            maxRadius = null,
+            centerLeft = null,
+            centerTop = null,
+            processed = false,
+            ctx = null;
+
+        // interactive variables
+
+        var highlights = [];
+
+        // add hook to determine if pie plugin in enabled, and then perform necessary operations
+
+        plot.hooks.processOptions.push(function(plot, options) {
+            if (options.series.pie.show) {
+                options.grid.show = false;
+
+                // set labels.show
+
+                if (options.series.pie.label.show === "auto") {
+                    if (options.legend.show) {
+                        options.series.pie.label.show = false;
+                    } else {
+                        options.series.pie.label.show = true;
+                    }
+                }
+
+                // set radius
+
+                if (options.series.pie.radius === "auto") {
+                    if (options.series.pie.label.show) {
+                        options.series.pie.radius = 3 / 4;
+                    } else {
+                        options.series.pie.radius = 1;
+                    }
+                }
+
+                // ensure sane tilt
+
+                if (options.series.pie.tilt > 1) {
+                    options.series.pie.tilt = 1;
+                } else if (options.series.pie.tilt < 0) {
+                    options.series.pie.tilt = 0;
+                }
+            }
+        });
+
+        plot.hooks.bindEvents.push(function(plot, eventHolder) {
+            var options = plot.getOptions();
+            if (options.series.pie.show) {
+                if (options.grid.hoverable) {
+                    eventHolder.unbind("mousemove").mousemove(onMouseMove);
+                }
+                if (options.grid.clickable) {
+                    eventHolder.unbind("click").click(onClick);
+                }
+            }
+        });
+
+        plot.hooks.processDatapoints.push(function(plot, series, data, datapoints) {
+            var options = plot.getOptions();
+            if (options.series.pie.show) {
+                processDatapoints(plot, series, data, datapoints);
+            }
+        });
+
+        plot.hooks.drawOverlay.push(function(plot, octx) {
+            var options = plot.getOptions();
+            if (options.series.pie.show) {
+                drawOverlay(plot, octx);
+            }
+        });
+
+        plot.hooks.draw.push(function(plot, newCtx) {
+            var options = plot.getOptions();
+            if (options.series.pie.show) {
+                draw(plot, newCtx);
+            }
+        });
+
+        function processDatapoints(plot, series, datapoints) {
+            if (!processed) {
+                processed = true;
+                canvas = plot.getCanvas();
+                target = $(canvas).parent();
+                options = plot.getOptions();
+                plot.setData(combine(plot.getData()));
+            }
+        }
+
+        function combine(data) {
+            var total = 0,
+                combined = 0,
+                numCombined = 0,
+                color = options.series.pie.combine.color,
+                newdata = [],
+                i,
+                value;
+
+            // Fix up the raw data from Flot, ensuring the data is numeric
+
+            for (i = 0; i < data.length; ++i) {
+                value = data[i].data;
+
+                // If the data is an array, we'll assume that it's a standard
+                // Flot x-y pair, and are concerned only with the second value.
+
+                // Note how we use the original array, rather than creating a
+                // new one; this is more efficient and preserves any extra data
+                // that the user may have stored in higher indexes.
+
+                if ($.isArray(value) && value.length === 1) {
+                    value = value[0];
+                }
+
+                if ($.isArray(value)) {
+                    // Equivalent to $.isNumeric() but compatible with jQuery < 1.7
+                    if (!isNaN(parseFloat(value[1])) && isFinite(value[1])) {
+                        value[1] = +value[1];
+                    } else {
+                        value[1] = 0;
+                    }
+                } else if (!isNaN(parseFloat(value)) && isFinite(value)) {
+                    value = [1, +value];
+                } else {
+                    value = [1, 0];
+                }
+
+                data[i].data = [value];
+            }
+
+            // Sum up all the slices, so we can calculate percentages for each
+
+            for (i = 0; i < data.length; ++i) {
+                total += data[i].data[0][1];
+            }
+
+            // Count the number of slices with percentages below the combine
+            // threshold; if it turns out to be just one, we won't combine.
+
+            for (i = 0; i < data.length; ++i) {
+                value = data[i].data[0][1];
+                if (value / total <= options.series.pie.combine.threshold) {
+                    combined += value;
+                    numCombined++;
+                    if (!color) {
+                        color = data[i].color;
+                    }
+                }
+            }
+
+            for (i = 0; i < data.length; ++i) {
+                value = data[i].data[0][1];
+                if (numCombined < 2 || value / total > options.series.pie.combine.threshold) {
+                    newdata.push(
+                        $.extend(data[i], {     /* extend to allow keeping all other original data values
+                                                   and using them e.g. in labelFormatter. */
+                            data: [[1, value]],
+                            color: data[i].color,
+                            label: data[i].label,
+                            angle: value * Math.PI * 2 / total,
+                            percent: value / (total / 100)
+                        })
+                    );
+                }
+            }
+
+            if (numCombined > 1) {
+                newdata.push({
+                    data: [[1, combined]],
+                    color: color,
+                    label: options.series.pie.combine.label,
+                    angle: combined * Math.PI * 2 / total,
+                    percent: combined / (total / 100)
+                });
+            }
+
+            return newdata;
+        }
+
+        function draw(plot, newCtx) {
+            if (!target) {
+                return; // if no series were passed
+            }
+
+            var canvasWidth = plot.getPlaceholder().width(),
+                canvasHeight = plot.getPlaceholder().height(),
+                legendWidth = target.children().filter(".legend").children().width() || 0;
+
+            ctx = newCtx;
+
+            // WARNING: HACK! REWRITE THIS CODE AS SOON AS POSSIBLE!
+
+            // When combining smaller slices into an 'other' slice, we need to
+            // add a new series.  Since Flot gives plugins no way to modify the
+            // list of series, the pie plugin uses a hack where the first call
+            // to processDatapoints results in a call to setData with the new
+            // list of series, then subsequent processDatapoints do nothing.
+
+            // The plugin-global 'processed' flag is used to control this hack;
+            // it starts out false, and is set to true after the first call to
+            // processDatapoints.
+
+            // Unfortunately this turns future setData calls into no-ops; they
+            // call processDatapoints, the flag is true, and nothing happens.
+
+            // To fix this we'll set the flag back to false here in draw, when
+            // all series have been processed, so the next sequence of calls to
+            // processDatapoints once again starts out with a slice-combine.
+            // This is really a hack; in 0.9 we need to give plugins a proper
+            // way to modify series before any processing begins.
+
+            processed = false;
+
+            // calculate maximum radius and center point
+            maxRadius = Math.min(canvasWidth, canvasHeight / options.series.pie.tilt) / 2;
+            centerTop = canvasHeight / 2 + options.series.pie.offset.top;
+            centerLeft = canvasWidth / 2;
+
+            if (options.series.pie.offset.left === "auto") {
+                if (options.legend.position.match("w")) {
+                    centerLeft += legendWidth / 2;
+                } else {
+                    centerLeft -= legendWidth / 2;
+                }
+                if (centerLeft < maxRadius) {
+                    centerLeft = maxRadius;
+                } else if (centerLeft > canvasWidth - maxRadius) {
+                    centerLeft = canvasWidth - maxRadius;
+                }
+            } else {
+                centerLeft += options.series.pie.offset.left;
+            }
+
+            var slices = plot.getData(),
+                attempts = 0;
+
+            // Keep shrinking the pie's radius until drawPie returns true,
+            // indicating that all the labels fit, or we try too many times.
+            do {
+                if (attempts > 0) {
+                    maxRadius *= REDRAW_SHRINK;
+                }
+                attempts += 1;
+                clear();
+                if (options.series.pie.tilt <= 0.8) {
+                    drawShadow();
+                }
+            } while (!drawPie() && attempts < REDRAW_ATTEMPTS)
+
+            if (attempts >= REDRAW_ATTEMPTS) {
+                clear();
+                target.prepend("<div class='error'>Could not draw pie with labels contained inside canvas</div>");
+            }
+
+            if (plot.setSeries && plot.insertLegend) {
+                plot.setSeries(slices);
+                plot.insertLegend();
+            }
+
+            // we're actually done at this point, just defining internal functions at this point
+            function clear() {
+                ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+                target.children().filter(".pieLabel, .pieLabelBackground").remove();
+            }
+
+            function drawShadow() {
+                var shadowLeft = options.series.pie.shadow.left;
+                var shadowTop = options.series.pie.shadow.top;
+                var edge = 10;
+                var alpha = options.series.pie.shadow.alpha;
+                var radius = options.series.pie.radius > 1 ? options.series.pie.radius : maxRadius * options.series.pie.radius;
+
+                if (radius >= canvasWidth / 2 - shadowLeft || radius * options.series.pie.tilt >= canvasHeight / 2 - shadowTop || radius <= edge) {
+                    return;    // shadow would be outside canvas, so don't draw it
+                }
+
+                ctx.save();
+                ctx.translate(shadowLeft, shadowTop);
+                ctx.globalAlpha = alpha;
+                ctx.fillStyle = "#000";
+
+                // center and rotate to starting position
+                ctx.translate(centerLeft, centerTop);
+                ctx.scale(1, options.series.pie.tilt);
+
+                //radius -= edge;
+                for (var i = 1; i <= edge; i++) {
+                    ctx.beginPath();
+                    ctx.arc(0, 0, radius, 0, Math.PI * 2, false);
+                    ctx.fill();
+                    radius -= i;
+                }
+
+                ctx.restore();
+            }
+
+            function drawPie() {
+                var startAngle = Math.PI * options.series.pie.startAngle;
+                var radius = options.series.pie.radius > 1 ? options.series.pie.radius : maxRadius * options.series.pie.radius;
+                var i;
+                // center and rotate to starting position
+
+                ctx.save();
+                ctx.translate(centerLeft, centerTop);
+                ctx.scale(1, options.series.pie.tilt);
+                //ctx.rotate(startAngle); // start at top; -- This doesn't work properly in Opera
+
+                // draw slices
+                ctx.save();
+
+                var currentAngle = startAngle;
+                for (i = 0; i < slices.length; ++i) {
+                    slices[i].startAngle = currentAngle;
+                    drawSlice(slices[i].angle, slices[i].color, true);
+                }
+
+                ctx.restore();
+
+                // draw slice outlines
+                if (options.series.pie.stroke.width > 0) {
+                    ctx.save();
+                    ctx.lineWidth = options.series.pie.stroke.width;
+                    currentAngle = startAngle;
+                    for (i = 0; i < slices.length; ++i) {
+                        drawSlice(slices[i].angle, options.series.pie.stroke.color, false);
+                    }
+
+                    ctx.restore();
+                }
+
+                // draw donut hole
+                drawDonutHole(ctx);
+
+                ctx.restore();
+
+                // Draw the labels, returning true if they fit within the plot
+                if (options.series.pie.label.show) {
+                    return drawLabels();
+                } else return true;
+
+                function drawSlice(angle, color, fill) {
+                    if (angle <= 0 || isNaN(angle)) {
+                        return;
+                    }
+
+                    if (fill) {
+                        ctx.fillStyle = color;
+                    } else {
+                        ctx.strokeStyle = color;
+                        ctx.lineJoin = "round";
+                    }
+
+                    ctx.beginPath();
+                    if (Math.abs(angle - Math.PI * 2) > 0.000000001) {
+                        ctx.moveTo(0, 0); // Center of the pie
+                    }
+
+                    //ctx.arc(0, 0, radius, 0, angle, false); // This doesn't work properly in Opera
+                    ctx.arc(0, 0, radius, currentAngle, currentAngle + angle / 2, false);
+                    ctx.arc(0, 0, radius, currentAngle + angle / 2, currentAngle + angle, false);
+                    ctx.closePath();
+                    //ctx.rotate(angle); // This doesn't work properly in Opera
+                    currentAngle += angle;
+
+                    if (fill) {
+                        ctx.fill();
+                    } else {
+                        ctx.stroke();
+                    }
+                }
+
+                function drawLabels() {
+                    var currentAngle = startAngle;
+                    var radius = options.series.pie.label.radius > 1 ? options.series.pie.label.radius : maxRadius * options.series.pie.label.radius;
+
+                    for (var i = 0; i < slices.length; ++i) {
+                        if (slices[i].percent >= options.series.pie.label.threshold * 100) {
+                            if (!drawLabel(slices[i], currentAngle, i)) {
+                                return false;
+                            }
+                        }
+                        currentAngle += slices[i].angle;
+                    }
+
+                    return true;
+
+                    function drawLabel(slice, startAngle, index) {
+                        if (slice.data[0][1] === 0) {
+                            return true;
+                        }
+
+                        // format label text
+                        var lf = options.legend.labelFormatter, text, plf = options.series.pie.label.formatter;
+
+                        if (lf) {
+                            text = lf(slice.label, slice);
+                        } else {
+                            text = slice.label;
+                        }
+
+                        if (plf) {
+                            text = plf(text, slice);
+                        }
+
+                        var halfAngle = ((startAngle + slice.angle) + startAngle) / 2;
+                        var x = centerLeft + Math.round(Math.cos(halfAngle) * radius);
+                        var y = centerTop + Math.round(Math.sin(halfAngle) * radius) * options.series.pie.tilt;
+
+                        var html = "<span class='pieLabel' id='pieLabel" + index + "' style='position:absolute;top:" + y + "px;left:" + x + "px;'>" + text + "</span>";
+                        target.append(html);
+
+                        var label = target.children("#pieLabel" + index);
+                        var labelTop = (y - label.height() / 2);
+                        var labelLeft = (x - label.width() / 2);
+
+                        label.css("top", labelTop);
+                        label.css("left", labelLeft);
+
+                        // check to make sure that the label is not outside the canvas
+                        if (0 - labelTop > 0 || 0 - labelLeft > 0 || canvasHeight - (labelTop + label.height()) < 0 || canvasWidth - (labelLeft + label.width()) < 0) {
+                            return false;
+                        }
+
+                        if (options.series.pie.label.background.opacity !== 0) {
+                            // put in the transparent background separately to avoid blended labels and label boxes
+                            var c = options.series.pie.label.background.color;
+                            if (c == null) {
+                                c = slice.color;
+                            }
+
+                            var pos = "top:" + labelTop + "px;left:" + labelLeft + "px;";
+                            $("<div class='pieLabelBackground' style='position:absolute;width:" + label.width() + "px;height:" + label.height() + "px;" + pos + "background-color:" + c + ";'></div>")
+                                .css("opacity", options.series.pie.label.background.opacity)
+                                .insertBefore(label);
+                        }
+
+                        return true;
+                    } // end individual label function
+                } // end drawLabels function
+            } // end drawPie function
+        } // end draw function
+
+        // Placed here because it needs to be accessed from multiple locations
+
+        function drawDonutHole(layer) {
+            if (options.series.pie.innerRadius > 0) {
+                // subtract the center
+                layer.save();
+                var innerRadius = options.series.pie.innerRadius > 1 ? options.series.pie.innerRadius : maxRadius * options.series.pie.innerRadius;
+                layer.globalCompositeOperation = "destination-out"; // this does not work with excanvas, but it will fall back to using the stroke color
+                layer.beginPath();
+                layer.fillStyle = options.series.pie.stroke.color;
+                layer.arc(0, 0, innerRadius, 0, Math.PI * 2, false);
+                layer.fill();
+                layer.closePath();
+                layer.restore();
+
+                // add inner stroke
+                layer.save();
+                layer.beginPath();
+                layer.strokeStyle = options.series.pie.stroke.color;
+                layer.arc(0, 0, innerRadius, 0, Math.PI * 2, false);
+                layer.stroke();
+                layer.closePath();
+                layer.restore();
+
+                // TODO: add extra shadow inside hole (with a mask) if the pie is tilted.
+            }
+        }
+
+        //-- Additional Interactive related functions --
+
+        function isPointInPoly(poly, pt) {
+            for (var c = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i) {
+                ((poly[i][1] <= pt[1] && pt[1] < poly[j][1]) ||
+                (poly[j][1] <= pt[1] && pt[1] < poly[i][1])) &&
+                (pt[0] < (poly[j][0] - poly[i][0]) * (pt[1] - poly[i][1]) / (poly[j][1] - poly[i][1]) + poly[i][0]) &&
+                (c = !c);
+            }
+            return c;
+        }
+
+        function findNearbySlice(mouseX, mouseY) {
+            var slices = plot.getData(),
+                options = plot.getOptions(),
+                radius = options.series.pie.radius > 1 ? options.series.pie.radius : maxRadius * options.series.pie.radius,
+                x, y;
+
+            for (var i = 0; i < slices.length; ++i) {
+                var s = slices[i];
+                if (s.pie.show) {
+                    ctx.save();
+                    ctx.beginPath();
+                    ctx.moveTo(0, 0); // Center of the pie
+                    //ctx.scale(1, options.series.pie.tilt);    // this actually seems to break everything when here.
+                    ctx.arc(0, 0, radius, s.startAngle, s.startAngle + s.angle / 2, false);
+                    ctx.arc(0, 0, radius, s.startAngle + s.angle / 2, s.startAngle + s.angle, false);
+                    ctx.closePath();
+                    x = mouseX - centerLeft;
+                    y = mouseY - centerTop;
+
+                    if (ctx.isPointInPath) {
+                        if (ctx.isPointInPath(mouseX - centerLeft, mouseY - centerTop)) {
+                            ctx.restore();
+                            return {
+                                datapoint: [s.percent, s.data],
+                                dataIndex: 0,
+                                series: s,
+                                seriesIndex: i
+                            };
+                        }
+                    } else {
+                        // excanvas for IE doesn;t support isPointInPath, this is a workaround.
+                        var p1X = radius * Math.cos(s.startAngle),
+                            p1Y = radius * Math.sin(s.startAngle),
+                            p2X = radius * Math.cos(s.startAngle + s.angle / 4),
+                            p2Y = radius * Math.sin(s.startAngle + s.angle / 4),
+                            p3X = radius * Math.cos(s.startAngle + s.angle / 2),
+                            p3Y = radius * Math.sin(s.startAngle + s.angle / 2),
+                            p4X = radius * Math.cos(s.startAngle + s.angle / 1.5),
+                            p4Y = radius * Math.sin(s.startAngle + s.angle / 1.5),
+                            p5X = radius * Math.cos(s.startAngle + s.angle),
+                            p5Y = radius * Math.sin(s.startAngle + s.angle),
+                            arrPoly = [[0, 0], [p1X, p1Y], [p2X, p2Y], [p3X, p3Y], [p4X, p4Y], [p5X, p5Y]],
+                            arrPoint = [x, y];
+
+                        // TODO: perhaps do some mathmatical trickery here with the Y-coordinate to compensate for pie tilt?
+
+                        if (isPointInPoly(arrPoly, arrPoint)) {
+                            ctx.restore();
+                            return {
+                                datapoint: [s.percent, s.data],
+                                dataIndex: 0,
+                                series: s,
+                                seriesIndex: i
+                            };
+                        }
+                    }
+
+                    ctx.restore();
+                }
+            }
+
+            return null;
+        }
+
+        function onMouseMove(e) {
+            triggerClickHoverEvent("plothover", e);
+        }
+
+        function onClick(e) {
+            triggerClickHoverEvent("plotclick", e);
+        }
+
+        // trigger click or hover event (they send the same parameters so we share their code)
+
+        function triggerClickHoverEvent(eventname, e) {
+            var offset = plot.offset();
+            var canvasX = parseInt(e.pageX - offset.left);
+            var canvasY = parseInt(e.pageY - offset.top);
+            var item = findNearbySlice(canvasX, canvasY);
+
+            if (options.grid.autoHighlight) {
+                // clear auto-highlights
+                for (var i = 0; i < highlights.length; ++i) {
+                    var h = highlights[i];
+                    if (h.auto === eventname && !(item && h.series === item.series)) {
+                        unhighlight(h.series);
+                    }
+                }
+            }
+
+            // highlight the slice
+
+            if (item) {
+                highlight(item.series, eventname);
+            }
+
+            // trigger any hover bind events
+
+            var pos = { pageX: e.pageX, pageY: e.pageY };
+            target.trigger(eventname, [pos, item]);
+        }
+
+        function highlight(s, auto) {
+            //if (typeof s == "number") {
+            //    s = series[s];
+            //}
+
+            var i = indexOfHighlight(s);
+
+            if (i === -1) {
+                highlights.push({ series: s, auto: auto });
+                plot.triggerRedrawOverlay();
+            } else if (!auto) {
+                highlights[i].auto = false;
+            }
+        }
+
+        function unhighlight(s) {
+            if (s == null) {
+                highlights = [];
+                plot.triggerRedrawOverlay();
+            }
+
+            //if (typeof s == "number") {
+            //    s = series[s];
+            //}
+
+            var i = indexOfHighlight(s);
+
+            if (i !== -1) {
+                highlights.splice(i, 1);
+                plot.triggerRedrawOverlay();
+            }
+        }
+
+        function indexOfHighlight(s) {
+            for (var i = 0; i < highlights.length; ++i) {
+                var h = highlights[i];
+                if (h.series === s) {
+                    return i;
+                }
+            }
+            return -1;
+        }
+
+        function drawOverlay(plot, octx) {
+            var options = plot.getOptions();
+            var radius = options.series.pie.radius > 1 ? options.series.pie.radius : maxRadius * options.series.pie.radius;
+
+            octx.save();
+            octx.translate(centerLeft, centerTop);
+            octx.scale(1, options.series.pie.tilt);
+
+            for (var i = 0; i < highlights.length; ++i) {
+                drawHighlight(highlights[i].series);
+            }
+
+            drawDonutHole(octx);
+
+            octx.restore();
+
+            function drawHighlight(series) {
+                if (series.angle <= 0 || isNaN(series.angle)) {
+                    return;
+                }
+
+                //octx.fillStyle = parseColor(options.series.pie.highlight.color).scale(null, null, null, options.series.pie.highlight.opacity).toString();
+                octx.fillStyle = "rgba(255, 255, 255, " + options.series.pie.highlight.opacity + ")"; // this is temporary until we have access to parseColor
+                octx.beginPath();
+                if (Math.abs(series.angle - Math.PI * 2) > 0.000000001) {
+                    octx.moveTo(0, 0); // Center of the pie
+                }
+                octx.arc(0, 0, radius, series.startAngle, series.startAngle + series.angle / 2, false);
+                octx.arc(0, 0, radius, series.startAngle + series.angle / 2, series.startAngle + series.angle, false);
+                octx.closePath();
+                octx.fill();
+            }
+        }
+    } // end init (plugin body)
+
+    // define pie specific options and their default values
+    var options = {
+        series: {
+            pie: {
+                show: false,
+                radius: "auto",    // actual radius of the visible pie (based on full calculated radius if <=1, or hard pixel value)
+                innerRadius: 0, /* for donut */
+                startAngle: 3 / 2,
+                tilt: 1,
+                shadow: {
+                    left: 5,    // shadow left offset
+                    top: 15,    // shadow top offset
+                    alpha: 0.02    // shadow alpha
+                },
+                offset: {
+                    top: 0,
+                    left: "auto"
+                },
+                stroke: {
+                    color: "#fff",
+                    width: 1
+                },
+                label: {
+                    show: "auto",
+                    formatter: function(label, slice) {
+                        return "<div style='font-size:x-small;text-align:center;padding:2px;color:" + slice.color + ";'>" + label + "<br/>" + Math.round(slice.percent) + "%</div>";
+                    },    // formatter function
+                    radius: 1,    // radius at which to place the labels (based on full calculated radius if <=1, or hard pixel value)
+                    background: {
+                        color: null,
+                        opacity: 0
+                    },
+                    threshold: 0    // percentage at which to hide the label (i.e. the slice is too narrow)
+                },
+                combine: {
+                    threshold: -1,    // percentage at which to combine little slices into one larger slice
+                    color: null,    // color to give the new slice (auto-generated if null)
+                    label: "Other"    // label to give the new slice
+                },
+                highlight: {
+                    //color: "#fff",        // will add this functionality once parseColor is available
+                    opacity: 0.5
+                }
+            }
+        }
+    };
+
+    $.plot.plugins.push({
+        init: init,
+        options: options,
+        name: "pie",
+        version: "1.1"
+    });
+})(jQuery);

frontend/lib/flot/jquery.flot.resize.js

@@ -0,0 +1,60 @@
+/* eslint-disable */
+/* Flot plugin for automatically redrawing plots as the placeholder resizes.
+
+Copyright (c) 2007-2014 IOLA and Ole Laursen.
+Licensed under the MIT license.
+
+It works by listening for changes on the placeholder div (through the jQuery
+resize event plugin) - if the size changes, it will redraw the plot.
+
+There are no options. If you need to disable the plugin for some plots, you
+can just fix the size of their placeholders.
+
+*/
+
+/* Inline dependency:
+ * jQuery resize event - v1.1 - 3/14/2010
+ * http://benalman.com/projects/jquery-resize-plugin/
+ *
+ * Copyright (c) 2010 "Cowboy" Ben Alman
+ * Dual licensed under the MIT and GPL licenses.
+ * http://benalman.com/about/license/
+ */
+(function($,e,t){"$:nomunge";var i=[],n=$.resize=$.extend($.resize,{}),a,r=false,s="setTimeout",u="resize",m=u+"-special-event",o="pendingDelay",l="activeDelay",f="throttleWindow";n[o]=200;n[l]=20;n[f]=true;$.event.special[u]={setup:function(){if(!n[f]&&this[s]){return false}var e=$(this);i.push(this);e.data(m,{w:e.width(),h:e.height()});if(i.length===1){a=t;h()}},teardown:function(){if(!n[f]&&this[s]){return false}var e=$(this);for(var t=i.length-1;t>=0;t--){if(i[t]==this){i.splice(t,1);break}}e.removeData(m);if(!i.length){if(r){cancelAnimationFrame(a)}else{clearTimeout(a)}a=null}},add:function(e){if(!n[f]&&this[s]){return false}var i;function a(e,n,a){var r=$(this),s=r.data(m)||{};s.w=n!==t?n:r.width();s.h=a!==t?a:r.height();i.apply(this,arguments)}if($.isFunction(e)){i=e;return a}else{i=e.handler;e.handler=a}}};function h(t){if(r===true){r=t||1}for(var s=i.length-1;s>=0;s--){var l=$(i[s]);if(l[0]==e||l.is(":visible")){var f=l.width(),c=l.height(),d=l.data(m);if(d&&(f!==d.w||c!==d.h)){l.trigger(u,[d.w=f,d.h=c]);r=t||true}}else{d=l.data(m);d.w=0;d.h=0}}if(a!==null){if(r&&(t==null||t-r<1e3)){a=e.requestAnimationFrame(h)}else{a=setTimeout(h,n[o]);r=false}}}if(!e.requestAnimationFrame){e.requestAnimationFrame=function(){return e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(t,i){return e.setTimeout(function(){t((new Date).getTime())},n[l])}}()}if(!e.cancelAnimationFrame){e.cancelAnimationFrame=function(){return e.webkitCancelRequestAnimationFrame||e.mozCancelRequestAnimationFrame||e.oCancelRequestAnimationFrame||e.msCancelRequestAnimationFrame||clearTimeout}()}})(jQuery,this);
+
+/* eslint-enable */
+(function ($) {
+    var options = { }; // no options
+
+    function init(plot) {
+        function onResize() {
+            var placeholder = plot.getPlaceholder();
+
+            // somebody might have hidden us and we can't plot
+            // when we don't have the dimensions
+            if (placeholder.width() === 0 || placeholder.height() === 0) return;
+
+            plot.resize();
+            plot.setupGrid();
+            plot.draw();
+        }
+
+        function bindEvents(plot, eventHolder) {
+            plot.getPlaceholder().resize(onResize);
+        }
+
+        function shutdown(plot, eventHolder) {
+            plot.getPlaceholder().unbind("resize", onResize);
+        }
+
+        plot.hooks.bindEvents.push(bindEvents);
+        plot.hooks.shutdown.push(shutdown);
+    }
+
+    $.plot.plugins.push({
+        init: init,
+        options: options,
+        name: 'resize',
+        version: '1.0'
+    });
+})(jQuery);

frontend/lib/flot/jquery.flot.saturated.js

@@ -0,0 +1,43 @@
+(function ($) {
+    'use strict';
+    var saturated = {
+        saturate: function (a) {
+            if (a === Infinity) {
+                return Number.MAX_VALUE;
+            }
+
+            if (a === -Infinity) {
+                return -Number.MAX_VALUE;
+            }
+
+            return a;
+        },
+        delta: function(min, max, noTicks) {
+            return ((max - min) / noTicks) === Infinity ? (max / noTicks - min / noTicks) : (max - min) / noTicks
+        },
+        multiply: function (a, b) {
+            return saturated.saturate(a * b);
+        },
+        // returns c * bInt * a. Beahves properly in the case where c is negative
+        // and bInt * a is bigger that Number.MAX_VALUE (Infinity)
+        multiplyAdd: function (a, bInt, c) {
+            if (isFinite(a * bInt)) {
+                return saturated.saturate(a * bInt + c);
+            } else {
+                var result = c;
+
+                for (var i = 0; i < bInt; i++) {
+                    result += a;
+                }
+
+                return saturated.saturate(result);
+            }
+        },
+        // round to nearby lower multiple of base
+        floorInBase: function(n, base) {
+            return base * Math.floor(n / base);
+        }
+    };
+
+    $.plot.saturated = saturated;
+})(jQuery);

frontend/lib/flot/jquery.flot.selection.js

@@ -0,0 +1,517 @@
+/* Flot plugin for selecting regions of a plot.
+
+Copyright (c) 2007-2014 IOLA and Ole Laursen.
+Licensed under the MIT license.
+
+The plugin supports these options:
+
+selection: {
+    mode: null or "x" or "y" or "xy" or "smart",
+    color: color,
+    shape: "round" or "miter" or "bevel",
+    visualization: "fill" or "focus",
+    minSize: number of pixels
+}
+
+Selection support is enabled by setting the mode to one of "x", "y" or "xy".
+In "x" mode, the user will only be able to specify the x range, similarly for
+"y" mode. For "xy", the selection becomes a rectangle where both ranges can be
+specified. "color" is color of the selection (if you need to change the color
+later on, you can get to it with plot.getOptions().selection.color). "shape"
+is the shape of the corners of the selection.
+
+The way how the selection is visualized, can be changed by using the option
+"visualization". Flot currently supports two modes: "focus" and "fill". The
+option "focus" draws a colored bezel around the selected area while keeping
+the selected area clear. The option "fill" highlights (i.e., fills) the
+selected area with a colored highlight.
+
+"minSize" is the minimum size a selection can be in pixels. This value can
+be customized to determine the smallest size a selection can be and still
+have the selection rectangle be displayed. When customizing this value, the
+fact that it refers to pixels, not axis units must be taken into account.
+Thus, for example, if there is a bar graph in time mode with BarWidth set to 1
+minute, setting "minSize" to 1 will not make the minimum selection size 1
+minute, but rather 1 pixel. Note also that setting "minSize" to 0 will prevent
+"plotunselected" events from being fired when the user clicks the mouse without
+dragging.
+
+When selection support is enabled, a "plotselected" event will be emitted on
+the DOM element you passed into the plot function. The event handler gets a
+parameter with the ranges selected on the axes, like this:
+
+    placeholder.bind( "plotselected", function( event, ranges ) {
+        alert("You selected " + ranges.xaxis.from + " to " + ranges.xaxis.to)
+        // similar for yaxis - with multiple axes, the extra ones are in
+        // x2axis, x3axis, ...
+    });
+
+The "plotselected" event is only fired when the user has finished making the
+selection. A "plotselecting" event is fired during the process with the same
+parameters as the "plotselected" event, in case you want to know what's
+happening while it's happening,
+
+A "plotunselected" event with no arguments is emitted when the user clicks the
+mouse to remove the selection. As stated above, setting "minSize" to 0 will
+destroy this behavior.
+
+The plugin allso adds the following methods to the plot object:
+
+- setSelection( ranges, preventEvent )
+
+  Set the selection rectangle. The passed in ranges is on the same form as
+  returned in the "plotselected" event. If the selection mode is "x", you
+  should put in either an xaxis range, if the mode is "y" you need to put in
+  an yaxis range and both xaxis and yaxis if the selection mode is "xy", like
+  this:
+
+    setSelection({ xaxis: { from: 0, to: 10 }, yaxis: { from: 40, to: 60 } });
+
+  setSelection will trigger the "plotselected" event when called. If you don't
+  want that to happen, e.g. if you're inside a "plotselected" handler, pass
+  true as the second parameter. If you are using multiple axes, you can
+  specify the ranges on any of those, e.g. as x2axis/x3axis/... instead of
+  xaxis, the plugin picks the first one it sees.
+
+- clearSelection( preventEvent )
+
+  Clear the selection rectangle. Pass in true to avoid getting a
+  "plotunselected" event.
+
+- getSelection()
+
+  Returns the current selection in the same format as the "plotselected"
+  event. If there's currently no selection, the function returns null.
+
+*/
+
+(function ($) {
+    function init(plot) {
+        var selection = {
+            first: {x: -1, y: -1},
+            second: {x: -1, y: -1},
+            show: false,
+            currentMode: 'xy',
+            active: false
+        };
+
+        var SNAPPING_CONSTANT = $.plot.uiConstants.SNAPPING_CONSTANT;
+
+        // FIXME: The drag handling implemented here should be
+        // abstracted out, there's some similar code from a library in
+        // the navigation plugin, this should be massaged a bit to fit
+        // the Flot cases here better and reused. Doing this would
+        // make this plugin much slimmer.
+        var savedhandlers = {};
+
+        function onDrag(e) {
+            if (selection.active) {
+                updateSelection(e);
+
+                plot.getPlaceholder().trigger("plotselecting", [ getSelection() ]);
+            }
+        }
+
+        function onDragStart(e) {
+            var o = plot.getOptions();
+            // only accept left-click
+            if (e.which !== 1 || o.selection.mode === null) return;
+
+            // reinitialize currentMode
+            selection.currentMode = 'xy';
+
+            // cancel out any text selections
+            document.body.focus();
+
+            // prevent text selection and drag in old-school browsers
+            if (document.onselectstart !== undefined && savedhandlers.onselectstart == null) {
+                savedhandlers.onselectstart = document.onselectstart;
+                document.onselectstart = function () { return false; };
+            }
+            if (document.ondrag !== undefined && savedhandlers.ondrag == null) {
+                savedhandlers.ondrag = document.ondrag;
+                document.ondrag = function () { return false; };
+            }
+
+            setSelectionPos(selection.first, e);
+
+            selection.active = true;
+        }
+
+        function onDragEnd(e) {
+            // revert drag stuff for old-school browsers
+            if (document.onselectstart !== undefined) {
+                document.onselectstart = savedhandlers.onselectstart;
+            }
+
+            if (document.ondrag !== undefined) {
+                document.ondrag = savedhandlers.ondrag;
+            }
+
+            // no more dragging
+            selection.active = false;
+            updateSelection(e);
+
+            if (selectionIsSane()) {
+                triggerSelectedEvent();
+            } else {
+                // this counts as a clear
+                plot.getPlaceholder().trigger("plotunselected", [ ]);
+                plot.getPlaceholder().trigger("plotselecting", [ null ]);
+            }
+
+            return false;
+        }
+
+        function getSelection() {
+            if (!selectionIsSane()) return null;
+
+            if (!selection.show) return null;
+
+            var r = {},
+                c1 = {x: selection.first.x, y: selection.first.y},
+                c2 = {x: selection.second.x, y: selection.second.y};
+
+            if (selectionDirection(plot) === 'x') {
+                c1.y = 0;
+                c2.y = plot.height();
+            }
+
+            if (selectionDirection(plot) === 'y') {
+                c1.x = 0;
+                c2.x = plot.width();
+            }
+
+            $.each(plot.getAxes(), function (name, axis) {
+                if (axis.used) {
+                    var p1 = axis.c2p(c1[axis.direction]), p2 = axis.c2p(c2[axis.direction]);
+                    r[name] = { from: Math.min(p1, p2), to: Math.max(p1, p2) };
+                }
+            });
+            return r;
+        }
+
+        function triggerSelectedEvent() {
+            var r = getSelection();
+
+            plot.getPlaceholder().trigger("plotselected", [ r ]);
+
+            // backwards-compat stuff, to be removed in future
+            if (r.xaxis && r.yaxis) {
+                plot.getPlaceholder().trigger("selected", [ { x1: r.xaxis.from, y1: r.yaxis.from, x2: r.xaxis.to, y2: r.yaxis.to } ]);
+            }
+        }
+
+        function clamp(min, value, max) {
+            return value < min ? min : (value > max ? max : value);
+        }
+
+        function selectionDirection(plot) {
+            var o = plot.getOptions();
+
+            if (o.selection.mode === 'smart') {
+                return selection.currentMode;
+            } else {
+                return o.selection.mode;
+            }
+        }
+
+        function updateMode(pos) {
+            if (selection.first) {
+                var delta = {
+                    x: pos.x - selection.first.x,
+                    y: pos.y - selection.first.y
+                };
+
+                if (Math.abs(delta.x) < SNAPPING_CONSTANT) {
+                    selection.currentMode = 'y';
+                } else if (Math.abs(delta.y) < SNAPPING_CONSTANT) {
+                    selection.currentMode = 'x';
+                } else {
+                    selection.currentMode = 'xy';
+                }
+            }
+        }
+
+        function setSelectionPos(pos, e) {
+            var offset = plot.getPlaceholder().offset();
+            var plotOffset = plot.getPlotOffset();
+            pos.x = clamp(0, e.pageX - offset.left - plotOffset.left, plot.width());
+            pos.y = clamp(0, e.pageY - offset.top - plotOffset.top, plot.height());
+
+            if (pos !== selection.first) updateMode(pos);
+
+            if (selectionDirection(plot) === "y") {
+                pos.x = pos === selection.first ? 0 : plot.width();
+            }
+
+            if (selectionDirection(plot) === "x") {
+                pos.y = pos === selection.first ? 0 : plot.height();
+            }
+        }
+
+        function updateSelection(pos) {
+            if (pos.pageX == null) return;
+
+            setSelectionPos(selection.second, pos);
+            if (selectionIsSane()) {
+                selection.show = true;
+                plot.triggerRedrawOverlay();
+            } else clearSelection(true);
+        }
+
+        function clearSelection(preventEvent) {
+            if (selection.show) {
+                selection.show = false;
+                selection.currentMode = '';
+                plot.triggerRedrawOverlay();
+                if (!preventEvent) {
+                    plot.getPlaceholder().trigger("plotunselected", [ ]);
+                }
+            }
+        }
+
+        // function taken from markings support in Flot
+        function extractRange(ranges, coord) {
+            var axis, from, to, key, axes = plot.getAxes();
+
+            for (var k in axes) {
+                axis = axes[k];
+                if (axis.direction === coord) {
+                    key = coord + axis.n + "axis";
+                    if (!ranges[key] && axis.n === 1) {
+                        // support x1axis as xaxis
+                        key = coord + "axis";
+                    }
+
+                    if (ranges[key]) {
+                        from = ranges[key].from;
+                        to = ranges[key].to;
+                        break;
+                    }
+                }
+            }
+
+            // backwards-compat stuff - to be removed in future
+            if (!ranges[key]) {
+                axis = coord === "x" ? plot.getXAxes()[0] : plot.getYAxes()[0];
+                from = ranges[coord + "1"];
+                to = ranges[coord + "2"];
+            }
+
+            // auto-reverse as an added bonus
+            if (from != null && to != null && from > to) {
+                var tmp = from;
+                from = to;
+                to = tmp;
+            }
+
+            return { from: from, to: to, axis: axis };
+        }
+
+        function setSelection(ranges, preventEvent) {
+            var range;
+
+            if (selectionDirection(plot) === "y") {
+                selection.first.x = 0;
+                selection.second.x = plot.width();
+            } else {
+                range = extractRange(ranges, "x");
+                selection.first.x = range.axis.p2c(range.from);
+                selection.second.x = range.axis.p2c(range.to);
+            }
+
+            if (selectionDirection(plot) === "x") {
+                selection.first.y = 0;
+                selection.second.y = plot.height();
+            } else {
+                range = extractRange(ranges, "y");
+                selection.first.y = range.axis.p2c(range.from);
+                selection.second.y = range.axis.p2c(range.to);
+            }
+
+            selection.show = true;
+            plot.triggerRedrawOverlay();
+            if (!preventEvent && selectionIsSane()) {
+                triggerSelectedEvent();
+            }
+        }
+
+        function selectionIsSane() {
+            var minSize = plot.getOptions().selection.minSize;
+            return Math.abs(selection.second.x - selection.first.x) >= minSize &&
+                Math.abs(selection.second.y - selection.first.y) >= minSize;
+        }
+
+        plot.clearSelection = clearSelection;
+        plot.setSelection = setSelection;
+        plot.getSelection = getSelection;
+
+        plot.hooks.bindEvents.push(function(plot, eventHolder) {
+            var o = plot.getOptions();
+            if (o.selection.mode != null) {
+                plot.addEventHandler("dragstart", onDragStart, eventHolder, 0);
+                plot.addEventHandler("drag", onDrag, eventHolder, 0);
+                plot.addEventHandler("dragend", onDragEnd, eventHolder, 0);
+            }
+        });
+
+        function drawSelectionDecorations(ctx, x, y, w, h, oX, oY, mode) {
+            var spacing = 3;
+            var fullEarWidth = 15;
+            var earWidth = Math.max(0, Math.min(fullEarWidth, w / 2 - 2, h / 2 - 2));
+            ctx.fillStyle = '#ffffff';
+
+            if (mode === 'xy') {
+                ctx.beginPath();
+                ctx.moveTo(x, y + earWidth);
+                ctx.lineTo(x - 3, y + earWidth);
+                ctx.lineTo(x - 3, y - 3);
+                ctx.lineTo(x + earWidth, y - 3);
+                ctx.lineTo(x + earWidth, y);
+                ctx.lineTo(x, y);
+                ctx.closePath();
+
+                ctx.moveTo(x, y + h - earWidth);
+                ctx.lineTo(x - 3, y + h - earWidth);
+                ctx.lineTo(x - 3, y + h + 3);
+                ctx.lineTo(x + earWidth, y + h + 3);
+                ctx.lineTo(x + earWidth, y + h);
+                ctx.lineTo(x, y + h);
+                ctx.closePath();
+
+                ctx.moveTo(x + w, y + earWidth);
+                ctx.lineTo(x + w + 3, y + earWidth);
+                ctx.lineTo(x + w + 3, y - 3);
+                ctx.lineTo(x + w - earWidth, y - 3);
+                ctx.lineTo(x + w - earWidth, y);
+                ctx.lineTo(x + w, y);
+                ctx.closePath();
+
+                ctx.moveTo(x + w, y + h - earWidth);
+                ctx.lineTo(x + w + 3, y + h - earWidth);
+                ctx.lineTo(x + w + 3, y + h + 3);
+                ctx.lineTo(x + w - earWidth, y + h + 3);
+                ctx.lineTo(x + w - earWidth, y + h);
+                ctx.lineTo(x + w, y + h);
+                ctx.closePath();
+
+                ctx.stroke();
+                ctx.fill();
+            }
+
+            x = oX;
+            y = oY;
+
+            if (mode === 'x') {
+                ctx.beginPath();
+                ctx.moveTo(x, y + fullEarWidth);
+                ctx.lineTo(x, y - fullEarWidth);
+                ctx.lineTo(x - spacing, y - fullEarWidth);
+                ctx.lineTo(x - spacing, y + fullEarWidth);
+                ctx.closePath();
+
+                ctx.moveTo(x + w, y + fullEarWidth);
+                ctx.lineTo(x + w, y - fullEarWidth);
+                ctx.lineTo(x + w + spacing, y - fullEarWidth);
+                ctx.lineTo(x + w + spacing, y + fullEarWidth);
+                ctx.closePath();
+                ctx.stroke();
+                ctx.fill();
+            }
+
+            if (mode === 'y') {
+                ctx.beginPath();
+
+                ctx.moveTo(x - fullEarWidth, y);
+                ctx.lineTo(x + fullEarWidth, y);
+                ctx.lineTo(x + fullEarWidth, y - spacing);
+                ctx.lineTo(x - fullEarWidth, y - spacing);
+                ctx.closePath();
+
+                ctx.moveTo(x - fullEarWidth, y + h);
+                ctx.lineTo(x + fullEarWidth, y + h);
+                ctx.lineTo(x + fullEarWidth, y + h + spacing);
+                ctx.lineTo(x - fullEarWidth, y + h + spacing);
+                ctx.closePath();
+                ctx.stroke();
+                ctx.fill();
+            }
+        }
+
+        plot.hooks.drawOverlay.push(function (plot, ctx) {
+            // draw selection
+            if (selection.show && selectionIsSane()) {
+                var plotOffset = plot.getPlotOffset();
+                var o = plot.getOptions();
+
+                ctx.save();
+                ctx.translate(plotOffset.left, plotOffset.top);
+
+                var c = $.color.parse(o.selection.color);
+                var visualization = o.selection.visualization;
+
+                var scalingFactor = 1;
+
+                // use a dimmer scaling factor if visualization is "fill"
+                if (visualization === "fill") {
+                    scalingFactor = 0.8;
+                }
+
+                ctx.strokeStyle = c.scale('a', scalingFactor).toString();
+                ctx.lineWidth = 1;
+                ctx.lineJoin = o.selection.shape;
+                ctx.fillStyle = c.scale('a', 0.4).toString();
+
+                var x = Math.min(selection.first.x, selection.second.x) + 0.5,
+                    oX = x,
+                    y = Math.min(selection.first.y, selection.second.y) + 0.5,
+                    oY = y,
+                    w = Math.abs(selection.second.x - selection.first.x) - 1,
+                    h = Math.abs(selection.second.y - selection.first.y) - 1;
+
+                if (selectionDirection(plot) === 'x') {
+                    h += y;
+                    y = 0;
+                }
+
+                if (selectionDirection(plot) === 'y') {
+                    w += x;
+                    x = 0;
+                }
+
+                if (visualization === "fill") {
+                    ctx.fillRect(x, y, w, h);
+                    ctx.strokeRect(x, y, w, h);
+                } else {
+                    ctx.fillRect(0, 0, plot.width(), plot.height());
+                    ctx.clearRect(x, y, w, h);
+                    drawSelectionDecorations(ctx, x, y, w, h, oX, oY, selectionDirection(plot));
+                }
+
+                ctx.restore();
+            }
+        });
+
+        plot.hooks.shutdown.push(function (plot, eventHolder) {
+            eventHolder.unbind("dragstart", onDragStart);
+            eventHolder.unbind("drag", onDrag);
+            eventHolder.unbind("dragend", onDragEnd);
+        });
+    }
+
+    $.plot.plugins.push({
+        init: init,
+        options: {
+            selection: {
+                mode: null, // one of null, "x", "y" or "xy"
+                visualization: "focus", // "focus" or "fill"
+                color: "#888888",
+                shape: "round", // one of "round", "miter", or "bevel"
+                minSize: 5 // minimum number of pixels
+            }
+        },
+        name: 'selection',
+        version: '1.1'
+    });
+})(jQuery);

frontend/lib/flot/jquery.flot.stack.js

@@ -0,0 +1,220 @@
+/* Flot plugin for stacking data sets rather than overlaying them.
+
+Copyright (c) 2007-2014 IOLA and Ole Laursen.
+Licensed under the MIT license.
+
+The plugin assumes the data is sorted on x (or y if stacking horizontally).
+For line charts, it is assumed that if a line has an undefined gap (from a
+null point), then the line above it should have the same gap - insert zeros
+instead of "null" if you want another behaviour. This also holds for the start
+and end of the chart. Note that stacking a mix of positive and negative values
+in most instances doesn't make sense (so it looks weird).
+
+Two or more series are stacked when their "stack" attribute is set to the same
+key (which can be any number or string or just "true"). To specify the default
+stack, you can set the stack option like this:
+
+    series: {
+        stack: null/false, true, or a key (number/string)
+    }
+
+You can also specify it for a single series, like this:
+
+    $.plot( $("#placeholder"), [{
+        data: [ ... ],
+        stack: true
+    }])
+
+The stacking order is determined by the order of the data series in the array
+(later series end up on top of the previous).
+
+Internally, the plugin modifies the datapoints in each series, adding an
+offset to the y value. For line series, extra data points are inserted through
+interpolation. If there's a second y value, it's also adjusted (e.g for bar
+charts or filled areas).
+
+*/
+
+(function ($) {
+    var options = {
+        series: { stack: null } // or number/string
+    };
+
+    function init(plot) {
+        function findMatchingSeries(s, allseries) {
+            var res = null;
+            for (var i = 0; i < allseries.length; ++i) {
+                if (s === allseries[i]) break;
+
+                if (allseries[i].stack === s.stack) {
+                    res = allseries[i];
+                }
+            }
+
+            return res;
+        }
+
+        function addBottomPoints (s, datapoints) {
+            var formattedPoints = [];
+            for (var i = 0; i < datapoints.points.length; i += 2) {
+                formattedPoints.push(datapoints.points[i]);
+                formattedPoints.push(datapoints.points[i + 1]);
+                formattedPoints.push(0);
+            }
+
+            datapoints.format.push({
+                x: false,
+                y: true,
+                number: true,
+                required: false,
+                computeRange: s.yaxis.options.autoScale !== 'none',
+                defaultValue: 0
+            });
+            datapoints.points = formattedPoints;
+            datapoints.pointsize = 3;
+        }
+
+        function stackData(plot, s, datapoints) {
+            if (s.stack == null || s.stack === false) return;
+
+            var needsBottom = s.bars.show || (s.lines.show && s.lines.fill);
+            var hasBottom = datapoints.pointsize > 2 && (horizontal ? datapoints.format[2].x : datapoints.format[2].y);
+            // Series data is missing bottom points - need to format
+            if (needsBottom && !hasBottom) {
+                addBottomPoints(s, datapoints);
+            }
+
+            var other = findMatchingSeries(s, plot.getData());
+            if (!other) return;
+
+            var ps = datapoints.pointsize,
+                points = datapoints.points,
+                otherps = other.datapoints.pointsize,
+                otherpoints = other.datapoints.points,
+                newpoints = [],
+                px, py, intery, qx, qy, bottom,
+                withlines = s.lines.show,
+                horizontal = s.bars.horizontal,
+                withsteps = withlines && s.lines.steps,
+                fromgap = true,
+                keyOffset = horizontal ? 1 : 0,
+                accumulateOffset = horizontal ? 0 : 1,
+                i = 0, j = 0, l, m;
+
+            while (true) {
+                if (i >= points.length) break;
+
+                l = newpoints.length;
+
+                if (points[i] == null) {
+                    // copy gaps
+                    for (m = 0; m < ps; ++m) {
+                        newpoints.push(points[i + m]);
+                    }
+
+                    i += ps;
+                } else if (j >= otherpoints.length) {
+                    // for lines, we can't use the rest of the points
+                    if (!withlines) {
+                        for (m = 0; m < ps; ++m) {
+                            newpoints.push(points[i + m]);
+                        }
+                    }
+
+                    i += ps;
+                } else if (otherpoints[j] == null) {
+                    // oops, got a gap
+                    for (m = 0; m < ps; ++m) {
+                        newpoints.push(null);
+                    }
+
+                    fromgap = true;
+                    j += otherps;
+                } else {
+                    // cases where we actually got two points
+                    px = points[i + keyOffset];
+                    py = points[i + accumulateOffset];
+                    qx = otherpoints[j + keyOffset];
+                    qy = otherpoints[j + accumulateOffset];
+                    bottom = 0;
+
+                    if (px === qx) {
+                        for (m = 0; m < ps; ++m) {
+                            newpoints.push(points[i + m]);
+                        }
+
+                        newpoints[l + accumulateOffset] += qy;
+                        bottom = qy;
+
+                        i += ps;
+                        j += otherps;
+                    } else if (px > qx) {
+                        // we got past point below, might need to
+                        // insert interpolated extra point
+                        if (withlines && i > 0 && points[i - ps] != null) {
+                            intery = py + (points[i - ps + accumulateOffset] - py) * (qx - px) / (points[i - ps + keyOffset] - px);
+                            newpoints.push(qx);
+                            newpoints.push(intery + qy);
+                            for (m = 2; m < ps; ++m) {
+                                newpoints.push(points[i + m]);
+                            }
+
+                            bottom = qy;
+                        }
+
+                        j += otherps;
+                    } else { // px < qx
+                        if (fromgap && withlines) {
+                            // if we come from a gap, we just skip this point
+                            i += ps;
+                            continue;
+                        }
+
+                        for (m = 0; m < ps; ++m) {
+                            newpoints.push(points[i + m]);
+                        }
+
+                        // we might be able to interpolate a point below,
+                        // this can give us a better y
+                        if (withlines && j > 0 && otherpoints[j - otherps] != null) {
+                            bottom = qy + (otherpoints[j - otherps + accumulateOffset] - qy) * (px - qx) / (otherpoints[j - otherps + keyOffset] - qx);
+                        }
+
+                        newpoints[l + accumulateOffset] += bottom;
+
+                        i += ps;
+                    }
+
+                    fromgap = false;
+
+                    if (l !== newpoints.length && needsBottom) {
+                        newpoints[l + 2] += bottom;
+                    }
+                }
+
+                // maintain the line steps invariant
+                if (withsteps && l !== newpoints.length && l > 0 &&
+                    newpoints[l] !== null &&
+                    newpoints[l] !== newpoints[l - ps] &&
+                    newpoints[l + 1] !== newpoints[l - ps + 1]) {
+                    for (m = 0; m < ps; ++m) {
+                        newpoints[l + ps + m] = newpoints[l + m];
+                    }
+
+                    newpoints[l + 1] = newpoints[l - ps + 1];
+                }
+            }
+
+            datapoints.points = newpoints;
+        }
+
+        plot.hooks.processDatapoints.push(stackData);
+    }
+
+    $.plot.plugins.push({
+        init: init,
+        options: options,
+        name: 'stack',
+        version: '1.2'
+    });
+})(jQuery);

frontend/lib/flot/jquery.flot.symbol.js

@@ -0,0 +1,98 @@
+/* Flot plugin that adds some extra symbols for plotting points.
+
+Copyright (c) 2007-2014 IOLA and Ole Laursen.
+Licensed under the MIT license.
+
+The symbols are accessed as strings through the standard symbol options:
+
+    series: {
+        points: {
+            symbol: "square" // or "diamond", "triangle", "cross", "plus", "ellipse", "rectangle"
+        }
+    }
+
+*/
+
+(function ($) {
+    // we normalize the area of each symbol so it is approximately the
+    // same as a circle of the given radius
+
+    var square = function (ctx, x, y, radius, shadow) {
+            // pi * r^2 = (2s)^2  =>  s = r * sqrt(pi)/2
+            var size = radius * Math.sqrt(Math.PI) / 2;
+            ctx.rect(x - size, y - size, size + size, size + size);
+        },
+        rectangle = function (ctx, x, y, radius, shadow) {
+            // pi * r^2 = (2s)^2  =>  s = r * sqrt(pi)/2
+            var size = radius * Math.sqrt(Math.PI) / 2;
+            ctx.rect(x - size, y - size, size + size, size + size);
+        },
+        diamond = function (ctx, x, y, radius, shadow) {
+            // pi * r^2 = 2s^2  =>  s = r * sqrt(pi/2)
+            var size = radius * Math.sqrt(Math.PI / 2);
+            ctx.moveTo(x - size, y);
+            ctx.lineTo(x, y - size);
+            ctx.lineTo(x + size, y);
+            ctx.lineTo(x, y + size);
+            ctx.lineTo(x - size, y);
+            ctx.lineTo(x, y - size);
+        },
+        triangle = function (ctx, x, y, radius, shadow) {
+            // pi * r^2 = 1/2 * s^2 * sin (pi / 3)  =>  s = r * sqrt(2 * pi / sin(pi / 3))
+            var size = radius * Math.sqrt(2 * Math.PI / Math.sin(Math.PI / 3));
+            var height = size * Math.sin(Math.PI / 3);
+            ctx.moveTo(x - size / 2, y + height / 2);
+            ctx.lineTo(x + size / 2, y + height / 2);
+            if (!shadow) {
+                ctx.lineTo(x, y - height / 2);
+                ctx.lineTo(x - size / 2, y + height / 2);
+                ctx.lineTo(x + size / 2, y + height / 2);
+            }
+        },
+        cross = function (ctx, x, y, radius, shadow) {
+            // pi * r^2 = (2s)^2  =>  s = r * sqrt(pi)/2
+            var size = radius * Math.sqrt(Math.PI) / 2;
+            ctx.moveTo(x - size, y - size);
+            ctx.lineTo(x + size, y + size);
+            ctx.moveTo(x - size, y + size);
+            ctx.lineTo(x + size, y - size);
+        },
+        ellipse = function(ctx, x, y, radius, shadow, fill) {
+            if (!shadow) {
+                ctx.moveTo(x + radius, y);
+                ctx.arc(x, y, radius, 0, Math.PI * 2, false);
+            }
+        },
+        plus = function (ctx, x, y, radius, shadow) {
+            var size = radius * Math.sqrt(Math.PI / 2);
+            ctx.moveTo(x - size, y);
+            ctx.lineTo(x + size, y);
+            ctx.moveTo(x, y + size);
+            ctx.lineTo(x, y - size);
+        },
+        handlers = {
+            square: square,
+            rectangle: rectangle,
+            diamond: diamond,
+            triangle: triangle,
+            cross: cross,
+            ellipse: ellipse,
+            plus: plus
+        };
+
+    square.fill = true;
+    rectangle.fill = true;
+    diamond.fill = true;
+    triangle.fill = true;
+    ellipse.fill = true;
+
+    function init(plot) {
+        plot.drawSymbol = handlers;
+    }
+
+    $.plot.plugins.push({
+        init: init,
+        name: 'symbols',
+        version: '1.0'
+    });
+})(jQuery);