Merge pull request #94 from TakwimuAfrica/feature/implement-data-visu…

…alisation

Implement data visualisation template

takwimu/templates/homepage.html

@@ -4,11 +4,12 @@
 
 {% block content %}
 
-  <div class="py-5 text-light" style="background: #6196a5 url('{% static 'img/bg/homepage-hero.jpg'%}') no-repeat center; background-size: cover;">
 
+  <div class="py-5 text-light" style="background: #6196a5 url('{% static 'img/bg/homepage-hero.jpg'%}') no-repeat center; background-size: cover;">
+
     <div class="container">
       <div style="max-width: 800px;">
-          
+
         <h3 class="font-weight-light">Creating actionable data for African decision-makers.</h3>
         <h5 class="font-weight-light">Takwimu is a free and <strong><u>open data</u></strong> platform that aims to transform the way development decisions are made in Africa.</h5>
         <p class="mt-4">
@@ -22,7 +23,7 @@ <h5 class="font-weight-light">Takwimu is a free and <strong><u>open data</u></st
       </div>
 
     </div>
-
+    
   </div>
 
   <div class="bg-light py-5">

takwimu/templates/takwimu/_includes/dataview/_index.html

@@ -0,0 +1,47 @@
+<div class="py-2">
+  <h5>{{ indicator.indicator.name }}</h5>
+
+  <div class="btn-group ml-4" role="group" style="margin-bottom: -100px;">
+    <button type="button" class="btn">
+      <i class="fa fa-flag"></i>
+    </button>
+    <button type="button" class="btn">
+      <i class="fa fa-exchange"></i>
+    </button>
+    <button type="button" class="btn">
+      <i class="fa fa-code"></i>
+    </button>
+    <button type="button" class="btn">
+      <i class="fa fa-download"></i>
+    </button>
+    <button type="button" class="btn">
+      <i class="fa fa-share-alt"></i>
+    </button>
+    <button type="button" class="btn">
+      <i class="fa fa-heart"></i>
+    </button>
+    <button type="button" class="btn">
+      <i class="fa fa-book-open"></i>
+    </button>
+  </div>
+
+  <ul class="nav nav-tabs justify-content-end pr-4" role="tablist">
+    <li class="nav-item">
+      <a class="nav-link active mr-1" id="d{{ indicator.indicator.id }}-dv-chart-tab" data-toggle="tab" href="#d{{ indicator.indicator.id }}-dv-chart" role="tab" 
+      aria-controls="d{{ indicator.indicator.id }}-dv-chart" aria-selected="true">Chart</a>
+    </li>
+    <li class="nav-item mr-1">
+      <a class="nav-link" id="d{{ indicator.indicator.id }}-dv-table-tab" data-toggle="tab" href="#d{{ indicator.indicator.id }}-dv-table" role="tab" 
+      aria-controls="d{{ indicator.indicator.id }}-dv-table" aria-selected="false">Table</a>
+    </li>
+  </ul>
+
+<div class="tab-content border border-top-0 p-3 pt-4">
+    <div class="tab-pane fade show active" id="d{{ indicator.indicator.id }}-dv-chart" role="tabpanel" aria-labelledby="d{{ indicator.indicator.id }}-dv-chart-tab">
+      {% include 'takwimu/_includes/dataview/chart.html' %}
+    </div>
+    <div class="tab-pane fade" id="d{{ indicator.indicator.id }}-dv-table" role="tabpanel" aria-labelledby="d{{ indicator.indicator.id }}-dv-table-tab">
+      {% include 'takwimu/_includes/dataview/table.html' %}
+    </div>
+  </div>
+</div>

takwimu/templates/takwimu/_includes/dataview/chart.html

@@ -0,0 +1,51 @@
+<h6 class="mt-1">Summary</h6>
+<h5>{{ indicator.indicator.description }}</h5>
+
+<div class="row px-4">
+  <canvas id="canvas"></canvas>
+</div>
+
+<p class="small text-muted mb-0 mt-2 ml-1"><i class="far fa-calendar-alt mr-1"></i>  Last updated 10 May 2018</p>
+
+<script>
+  var barChartData = {
+    labels: ['2015', '2016', '2017'],
+    datasets: [{
+      label: 'Youth Unemployment',
+      backgroundColor: 'rgb(54, 162, 235)', //Blue
+      data: [11,25,33]
+    }, {
+      label: 'Unemployment',
+      backgroundColor: 'rgb(153, 102, 255)', //Purple
+      data: [8,11,18],
+
+    }]
+  };
+  window.onload = function () {
+    var ctx = document.getElementById('canvas').getContext('2d');
+    window.myBar = new Chart(ctx, {
+      type: 'bar',
+      data: barChartData,
+      options: {
+        title: {
+          display: true,
+        },
+        tooltips: {
+          mode: 'index',
+          intersect: false
+        },
+        responsive: true,
+        scales: {
+          xAxes: [{
+            stacked: true,
+            barThickness: 50
+          }],
+          yAxes: [{
+            stacked: true,
+          }]
+        }
+      }
+    });
+  };
+
+</script>

takwimu/templates/takwimu/_includes/dataview/related.html

@@ -0,0 +1 @@
+TODO: Related

takwimu/templates/takwimu/_includes/dataview/table.html

@@ -0,0 +1 @@
+TODO: Table

takwimu/templates/takwimu/_includes/report/section_topics.html

@@ -2,6 +2,6 @@
 
 {% for topic in page.topics.all %}
 
-  {% include 'takwimu/_includes/report/topic.html' with topic=topic.topic %}
+  {% include 'takwimu/_includes/topic.html' with topic=topic.topic %}
 
 {% endfor %}

takwimu/templates/takwimu/_includes/report/topics_detail.html → takwimu/templates/takwimu/_includes/topic.html

@@ -1,23 +1,25 @@
 {% load staticfiles %}
 
-<div class="container py-5">
+<div class="container py-5 data-topic">
   <div class="row ">
 
     <!-- Left navigation of all indicators-->
-    <div class="col-3">
+    <div class="col-3 dataindicators-nav">
       <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist"
            aria-orientation="vertical">
         {% for indicator in topic.data_indicators.all %}
-          <a class="nav-link {% if forloop.first %}active show{% endif %}"
+          <a class="nav-link pl-5 py-3 d-flex align-items-center {% if forloop.first %} active show {% endif %}"
              id="d{{ indicator.indicator.id }}-tab-btn"
              data-toggle="pill" href="#d{{ indicator.indicator.id }}-tab"
              role="tab" aria-controls="d{{ indicator.indicator.id }}-tab"
               {% if forloop.first %} aria-selected="true" {% endif %}
-             aria-selected="false"><i class="fas fa-eye mr-3"></i>
-            {{ indicator.indicator.name }}</a>
+             aria-selected="false">
+            <i class="fas fa-eye fa-fw"></i>
+            {{ indicator.indicator.name }}
+          </a>
 
           {% if not forloop.last %}
-            <div class="separator mx-3 my-2"></div>{% endif %}
+            <hr class="mx-3 my-0" style="border-color: rgba(255, 255, 255, 0.2);"/>{% endif %}
         {% endfor %}
       </div>
       <!-- <div class="row pt-5 pb-5 text-dark">
@@ -32,14 +34,13 @@ <h1>{{ topic.title }}</h1>
       <div class="tab-content" id="v-pills-tabContent">
         {% for indicator in topic.data_indicators.all %}
           <div
-              class="tab-pane fade {% if forloop.first %} active show{% endif %}"
+              class="tab-pane fade {% if forloop.first %} active show {% endif %}"
               id="d{{ indicator.indicator.id }}-tab"
               role="tabpanel"
               aria-labelledby="d{{ indicator.indicator.id }}-tab-btn">
-            <h4 class="pt-5">{{ indicator.indicator.name }}</h4>
-            <p>{{ indicator.indicator.description }}</p>
 
-            <h3>HURUmap Visuals go here</h3>
+            {% include 'takwimu/_includes/dataview/_index.html' %}
+
           </div>
         {% endfor %}
       </div>
@@ -48,33 +49,27 @@ <h3>HURUmap Visuals go here</h3>
 </div>
 
 <style>
-  .nav-link {
+  .dataindicators-nav .nav-pills {
+    background-color: #005973;
+  }
+  .dataindicators-nav .nav-link {
     color: #f0f0f0;
   }
+  .dataindicators-nav .nav-link:hover {
+    color: #f0f0f0;;
+  }
 
-  .nav-link[aria-selected=false] .fa-eye {
+  .dataindicators-nav .nav-link .fa-eye {
     display: none;
+    margin-left: -2em;
+    position: absolute;
   }
-
-  .nav-link[aria-selected=true] .fa-eye {
+  .dataindicators-nav .nav-link[aria-selected=true] .fa-eye {
     display: inline;
   }
-
-  .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
+  .dataindicators-nav .nav-pills .nav-link.active, .dataindicators-nav .nav-pills .show > .nav-link {
     background-color: transparent;
     font-weight: 500;
   }
-
-  .nav-pills {
-    background-color: #005973;
-  }
-
-  .separator {
-    height: 1px;
-    background-color: #ffffff;
-  }
-
-  a.nav-link:hover {
-    color: #f0f0f0;;
-  }
 </style>
+

takwimu/templates/takwimu/_layouts/_base.html

@@ -53,6 +53,7 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha256-98vAGjEDGN79TjHkYWVD4s87rvWkdWLHPs5MC3FvFX4=" crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha256-xaF9RpdtRxzwYMWg4ldJoyPWqyDPCRD0Cv7YEEe6Ie8=" crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
   <script src="{% static 'js/main.js' %}"></script>
   <script src="{% static 'js/svg.js' %}"></script>
   <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script>

takwimu/templates/takwimu/topic_page.html

@@ -2,6 +2,6 @@
 
 {% block content %}
 
-{% include 'takwimu/_includes/report/topic.html' with topic=page %}
+{% include 'takwimu/_includes/topic.html' with topic=page %}
 
 {% endblock %}