Added concept extraction page

refs #23

Signed-off-by: Gustavo Vera Scuderi <gvescu@gmail.com>

frontoffice/scss/customizations/concept.scss

@@ -0,0 +1,17 @@
+.concept-extraction {
+  .card-header {
+    background-color: white;
+    span {
+      text-transform: uppercase;
+      font-weight: bold;
+      color: #6c6c6c;
+      i {
+        color: #3A9D5D;
+        margin-right: 0.6rem;
+      }
+    }
+    button {
+      color: #20a8d8;
+    }
+  }
+}

frontoffice/scss/style.scss

@@ -80,4 +80,4 @@
 // CrowdAnalytics Customizations
 @import "customizations/projects";
 @import "customizations/sentiment";
-// @import "customizations/concept";
+@import "customizations/concept";

frontoffice/src/router/index.js

@@ -11,7 +11,7 @@ import Projects from '@/views/Projects'
 // Views - Analytics
 // import Sentiment from '@/views/analytics/Sentiment'
 import Category from '@/views/analytics/Category'
-import Concept from '@/views/analytics/Concept'
+// import Concept from '@/views/analytics/Concept'
 import Similar from '@/views/analytics/Similar'
 
 // Views - Projects
@@ -21,7 +21,7 @@ import New from '@/views/projects/New'
 import Analysis from '@/views/sentiment/Analysis'
 
 // Concept Axtraction
-// import Extraction from '@/views/concept/Extraction'
+import Extraction from '@/views/concept/Extraction'
 
 Vue.use(Router)
 
@@ -57,8 +57,7 @@ export default new Router({
             {
               path: 'concept',
               name: 'Concept Extraction',
-              // component: Extraction
-              component: Concept
+              component: Extraction
             },
             {
               path: 'category',

frontoffice/src/views/concept/Extraction.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="animated concept-extraction fadeIn">
+    <div class="row">
+      <div class="col">
+        <div class="card">
+          <div class="card-header">
+            <span><i class="icon-chart"></i>Concept Extraction</span>
+            <dropdown class="float-right" type="transparent p-1">
+              <i slot="button" class="icon-options-vertical"></i>
+              <div slot="dropdown-menu" class="dropdown-menu dropdown-menu-right">
+                <a class="dropdown-item" href="#">Print Chart</a>
+                <li><a class="dropdown-item" href="#">Download as PNG Image</a></li>
+                <li><a class="dropdown-item" href="#">Download as JPEG Image</a></li>
+                <li><a class="dropdown-item" href="#">Download as SVG Image</a></li>
+                <li><a class="dropdown-item" href="#">Download as PDF Document</a></li>
+              </div>
+            </dropdown>
+          </div>
+          <div class="card-block">
+            <div>
+              <line-chart/>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col">
+        <div class="card">
+          <div class="card-block">
+            <form action="" method="post" class="form-horizontal">
+              <div class="form-group row">
+                <div class="col">
+                  <div class="input-group">
+                    <span class="input-group-btn">
+                      <button type="button" class="btn btn-primary"><i class="fa fa-search"></i> Search</button>
+                    </span>
+                    <input type="text" id="input1-group2" name="input1-group2" class="form-control" placeholder="Search concept">
+                  </div>
+                </div>
+              </div>
+            </form>
+            <table class="table table-striped table-responsive">
+              <thead>
+                <tr>
+                  <th>Concept</th>
+                  <th>Occurrences</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>Parking</td>
+                  <td>80</td>
+                </tr>
+                <tr>
+                  <td>Cars</td>
+                  <td>60</td>
+                </tr>
+                <tr>
+                  <td>Drive</td>
+                  <td>56</td>
+                </tr>
+                <tr>
+                  <td>People</td>
+                  <td>55</td>
+                </tr>
+                <tr>
+                  <td>Reduce</td>
+                  <td>43</td>
+                </tr>
+                <tr>
+                  <td>Road</td>                
+                  <td>38</td>
+                </tr>
+                <tr>
+                  <td>Bike</td>                
+                  <td>33</td>
+                </tr>
+                <tr>
+                  <td>Park</td>                
+                  <td>28</td>
+                </tr>
+                <tr>
+                  <td>Buses</td>                
+                  <td>20</td>
+                </tr>
+                <tr>
+                  <td>Walk</td>                
+                  <td>18</td>
+                </tr>
+                <tr>
+                  <td>Avenue</td>                
+                  <td>17</td>
+                </tr>
+                <tr>
+                  <td>Allow</td>                
+                  <td>10</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import LineChart from '../charts/LineChart'
+
+import { dropdown } from 'vue-strap'
+
+export default {
+  name: 'concept-extraction',
+  components: {
+    LineChart,
+    dropdown
+  }
+}
+</script>

frontoffice/static/css/style.css

@@ -9103,3 +9103,15 @@ hr.transparent {
       margin-right: 0.6rem; }
   .sentiment-analysis .card-header button {
     color: #20a8d8; }
+
+.concept-extraction .card-header {
+  background-color: white; }
+  .concept-extraction .card-header span {
+    text-transform: uppercase;
+    font-weight: bold;
+    color: #6c6c6c; }
+    .concept-extraction .card-header span i {
+      color: #3A9D5D;
+      margin-right: 0.6rem; }
+  .concept-extraction .card-header button {
+    color: #20a8d8; }