Adds datepicker and improved graph/piechart

Adds ability to control time period shown on graph and pie chart in
reporting tab. Preset range buttons have been included under two
dropdown buttons, and it is possible to see the previous/next set range
with the arrow buttons.

Interactive legends have been added to both the datepicker and the
piechart.

Change-Id: Ieea8f22a5ac7e21996d4bd4223ea01694591bd72
Signed-off-by: Leonie Chamberlin-Medd <leonie@stackhpc.com>

Author: L-Chams

cloudkittydashboard/dashboards/project/reporting/templates/reporting/_datepicker_reporting.html

@@ -0,0 +1,19 @@
+{% load i18n %}
+
+{% block trimmed %}
+<div class="input-group date">
+  {{ datepicker_input }}
+  <label class="sr-only">{{ datepicker_label }}</label>
+  <span class="input-group-addon datepicker-addon">
+    <span class="fa fa-calendar"></span>
+  </span>
+</div>
+<script>
+  $(function () {
+    $('.datepicker input').datepicker({
+      todayBtn: "linked", // Enables the today button which quickly links back to today
+      endDate: '0d', // Prevents the user from picking a date in the future
+    });
+  });
+</script>
+{% endblock %}

cloudkittydashboard/dashboards/project/reporting/templates/reporting/_datepicker_reporting_form.html

@@ -0,0 +1,61 @@
+{% load i18n %}
+{%load static %}
+
+<link rel="stylesheet" href="{% static 'cloudkitty/css/datepicker.css' %}">
+<script src="{% static 'cloudkitty/js/datepicker.js' %}" type="text/javascript" charset="utf-8"></script>
+
+<form action="?" method="get" id="{{ datepicker_id }}" class="form-inline">
+    <h4>{% trans "Select a period of time to view data in:" %}
+        <span class="small help-block">{% trans "The date should be in YYYY-MM-DD format." %}</span>
+    </h4>
+    <div class="datepicker form-group">
+        {% with datepicker_input=form.start datepicker_label="From" %}
+        {% include 'project/reporting/_datepicker_reporting.html' %}
+        {% endwith %}
+    </div>
+    <span class="datepicker-delimiter">
+        <span class="datepicker-delimiter-text">{% trans 'to' %}</span>
+    </span>
+    <div class="datepicker form-group">
+        {% with datepicker_input=form.end datepicker_label="To" %}
+        {% include 'project/reporting/_datepicker_reporting.html' %}
+        {% endwith %}
+    </div>
+    <button class="btn btn-primary" type="submit">{% trans "Submit" %}</button>
+</form>
+
+<div class="controls-container">
+    <div class="dropdown default-ranges">
+        <button class="dropbtn">{% trans "Period Range" %}</button>
+        <div class="dropdown-content">
+            <button data-period="day" data-view="current">{% trans "Day View" %}</button>
+            <button data-period="week" data-view="current">{% trans "Week View" %}</button>
+            <button data-period="month" data-view="current">{% trans "Month View" %}</button>
+            <button data-period="year" data-view="current">{% trans "Year View" %}</button>
+        </div>
+    </div>
+    <div class="dropdown preset-ranges">
+        <button class="dropbtn">{% trans "Preset Ranges" %}</button>
+        <div class="dropdown-content">
+            <button data-period="day" data-view="yesterday">{% trans "Yesterday" %}</button>
+            <button data-period="week" data-view="last">{% trans "Last Week" %}</button>
+            <button data-period="month" data-view="last">{% trans "Last Month" %}</button>
+            <button data-period="month" data-view="last" data-amount="3">{% trans "Last 3 Months" %}</button>
+            <button data-period="month" data-view="last" data-amount="6">{% trans "Last 6 Months" %}</button>
+            <button data-period="year" data-view="last">{% trans "Last Year" %}</button>
+        </div>
+    </div>
+    <button class="arrow-btn" data-direction="prev">&laquo;</button>
+    <button class="arrow-btn" data-direction="next">&raquo;</button>
+</div>
+
+
+<script>
+    $(function () {
+        initDatepicker({
+            formId: '{{ datepicker_id }}',
+            startFieldName: '{{ form.start.name }}',
+            endFieldName: '{{ form.end.name }}'
+        });
+    });
+</script>