Skip to content

GitLab

Commit b0156629 authored by Daniel Suarez Souto's avatar Daniel Suarez Souto
Browse files

added categories-chart

parent 9422cfb2
Pipeline #1152 passed with stages
in 29 seconds
Hide whitespace changes
Inline Side-by-side
dashboard-gsicrawler.env.html
View file @ b0156629
......@@ -211,7 +211,7 @@
<entities-chart
field="entities.name"
data="{{data}}"
title="Organizations"
title="Entities"
icon="icons:list"
param="{{param}}"
id="entitieschart"
......@@ -229,6 +229,15 @@
</people-chart>
</div>
</div>
<categories-chart
field="categories.name"
data="{{data}}"
title="Categories"
icon="icons:list"
param="{{param}}"
id="categorieschart"
filters="{{filters}}">
</categories-chart>
<br>
<div class="row">
<div class="col-md-6">
......@@ -530,7 +539,15 @@ H2020 RIA Action Grant No. 740934 under the call SEC-06-FCT-2016 — Developing
}
}
},
'categories.name': {
terms: {
field: "taxonomies.rdfs:label.keyword"
size:8,
order: {
_count:"desc"
}
}
},
sentiment: {
terms: {
field: "sentiments.marl:hasPolarity.keyword",
......
dashboard-gsicrawler.html
View file @ b0156629
......@@ -13,6 +13,7 @@
<link rel="import" href="/bower_components/paper-menu/paper-menu.html">
<link rel="import" href="/bower_components/paper-autocomplete/paper-autocomplete.html">
<link rel="import" href="/elements/entities-chart/entities-chart.html">
<link rel="import" href="/elements/categories-chart/categories-chart.html">
<link rel="import" href="/elements/people-chart/people-chart.html">
<link rel="import" href="/elements/news-chart/news-chart.html">
<link rel="import" href="/elements/propaganda-chart/propaganda-chart.html">
......@@ -211,7 +212,7 @@
<entities-chart
field="entities.name"
data="{{data}}"
title="Organizations"
title="Entities"
icon="icons:list"
param="{{param}}"
id="entitieschart"
......@@ -219,16 +220,19 @@
</entities-chart>
</div>
<div class="col-md-6">
<people-chart
<categories-chart
field="categories.name"
data="{{data}}"
title="People"
icon="maps:person-pin"
title="Categories"
icon="icons:list"
param="{{param}}"
id="entitieschart"
id="categorieschart"
filters="{{filters}}">
</people-chart>
</categories-chart>
</div>
</div>
<br>
<div class="row">
<div class="col-md-6">
......@@ -246,6 +250,20 @@
</google-chart>
</div>
<div class="col-md-6">
<people-chart
data="{{data}}"
title="People"
icon="maps:person-pin"
param="{{param}}"
id="entitieschart"
filters="{{filters}}">
</people-chart>
</div>
</div>
<br>
<div class="row">
<div class="col-md-12">
<google-chart
field="schema:datePublished"
data="{{data}}"
......@@ -319,6 +337,7 @@
</happymap-element>
</div>
</div>
</div>
<div>
<yasgui-ui
......@@ -530,7 +549,15 @@ H2020 RIA Action Grant No. 740934 under the call SEC-06-FCT-2016 — Developing
}
}
},
'categories.name': {
terms: {
field: "taxonomies.rdfs:label.keyword",
size:8,
order: {
_count:"desc"
}
}
},
sentiment: {
terms: {
field: "sentiments.marl:hasPolarity.keyword",
......
demo/elements/categories-chart/bower.json 0 → 100644
View file @ b0156629
{
"name": "entities-chart",
"authors": [
"gsi-upm"
],
"version" : "1.0.1",
"description": "Web Component designed to visualize entities present in Tweets",
"main": "entities-chart.html",
"keywords": [
"entities",
"polymer",
"elasticsearch",
"webcomponents"
],
"dependencies": {
"iron-icons": "PolymerElements/iron-icons#^1.0.0",
"paper-button": "PolymerElements/paper-button#^1.0.0",
"polymer": "Polymer/polymer#^1.1.0"
},
"license": "MIT",
"homepage": "https://lab.cluster.gsi.dit.upm.es/sefarad/entities-chart"
}
demo/elements/categories-chart/categories-chart.css 0 → 100644
View file @ b0156629
:host {
margin: 0;
padding: 0;
width: 400px;
height: 300px;
}
.top-bar{
width: 100%;
background-color: var(--dark-primary-color);
border-radius: 5px 5px 0 0;
color: white;
text-align: center;
height: 35px;
line-height: 35px;
}
.top-bar span {
vertical-align: middle;
}
paper-icon-button.green {
color: var(--paper-green-500);
}
paper-icon-button.green:hover {
background: var(--paper-green-50);
border-radius: 50%;
}
\ No newline at end of file
demo/elements/categories-chart/categories-chart.html 0 → 100644
View file @ b0156629
<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/iron-icons/iron-icons.html">
<link rel="import" href="/bower_components/paper-button/paper-button.html">
<dom-module id="categories-chart">
<style is="custom-style">
@import url("../../styles/app-theme.html");
</style>
<link rel="import" type="css" href="categories-chart.css">
<template>
<style type="text/css">
#chart {
width: 100%;
}
.number {
padding: 1px 3px;
border: 1px solid #9e5c26;
border-radius: 5px;
box-shadow: inset 0 1px 0 #f5bf8c;
margin-left: 7px;
color: white;
}
.active .number {
background-color: #ed943f;
background-image: linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);
background-image: -o-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);
background-image: -moz-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);
background-image: -ms-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);
}
.idle .number {
background-color: #666;
background-image: linear-gradient(bottom, rgb(102,102,102) 0%, rgb(123,123,123) 100%);
background-image: -o-linear-gradient(bottom, rgb(102,102,102) 0%, rgb(123,123,123) 100%);
background-image: -moz-linear-gradient(bottom, rgb(102,102,102) 0%, rgb(123,123,123) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(102,102,102) 0%, rgb(123,123,123) 100%);
background-image: -ms-linear-gradient(bottom, rgb(102,102,102) 0%, rgb(123,123,123) 100%);
}
.tag {
display: inline-block;
margin: 0 0 7px 20px;
position: relative;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 0.9em;
font-weight: bold;
text-decoration: none;
text-shadow: 0px 2px 0px rgba(255,255,255,.4);
height: 2em;
line-height: 2em;
padding: 0 0.5em 0 1em;
border-top: 0.0625em solid #d99d38;
border-right: 0.0625em solid #d99d38;
border-bottom: 0.0625em solid #d99d38;
-webkit-border-radius: 0 0.25em 0.25em 0;
-moz-border-radius: 0 0.25em 0.25em 0;
border-radius: 0 0.25em 0.25em 0;
background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba47');
-webkit-box-shadow: inset 0 1px 0 #faeaba, 0 1px 1px rgba(0,0,0,.1);
-moz-box-shadow: inset 0 1px 0 #faeaba, 0 1px 1px rgba(0,0,0,.1);
box-shadow: inset 0 1px 0 #faeaba, 0 1px 1px rgba(0,0,0,.1);
}
.tag:before {
content: '';
width: 1.4584em;
height: 1.4584em;
background-image: -webkit-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -moz-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -o-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -ms-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#feda71', EndColorStr='#feba47');
position: absolute;
left: 0em;
top: -0.0625em;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
border-left: 0.0625em solid #d99d38;
border-bottom: 0.0625em solid #d99d38;
-webkit-border-radius: 0 0 0 0.25em;
-moz-border-radius: 0 0 0 0.25em;
border-radius: 0 0 0 0.25em;
}
#tag-wrapper {
margin: 10px 10px 10px 20px;
min-height: 215px;
visibility: visible;
box-shadow: 0 0 black;
}
.content.paper-button {
padding: 0 0.57em;
}
.tag {
padding: 0em 0em !important;
color:#000;
margin-bottom: 10px;
}
.tag span{
position: relative;
top:0px;
margin-right: 2px;
}
#nodata {
position: absolute;
width: 100%;
line-height: 35px;
text-align: center;
}
</style>
<!-- Shadow DOM -->
<paper-material class="categories" elevation="1" style="min-height: 325px; display: flex; flex-direction: column; justify-content: space-between;">
<div class="top-bar">
<iron-icon icon="{{icon}}"></iron-icon>
<span>{{title}}</span>
</div>
<div id="nodata" style="margin-top: 35px">No entries match the current filters</div>
<div id="tagwrapper" style="min-height: 215px;">
<br>
<template is="dom-repeat" items="{{categories}}" as="category">
<paper-button class="tag active" data$="{{category.0}}" on-tap="filter"><span>{{getCategory(category.0)}}</span><span class="number">{{category.1}}</span></paper-button>
</template>
</div>
<div style="float: right; bottom: 10px; width: 100%; display: flex; flex-direction: row; justify-content: flex-end; align-content: center;">
<small style="align-self: center;">Clear Filters</small>
<paper-icon-button icon="delete" alt="menu" class="green" on-tap="removeFilters"></paper-icon-button>
</div>
<div style="width:100%; clear: both"></div>
</paper-material>
</template>
<script>
var filtered = false;
Polymer({
is: 'categories-chart',
properties: {
data: {
type: Object,
observer: '_dataChanged'
},
icon: {
type: String
},
categories: {
type: Array
},
title: {
type: String,
value: "Categories Chart"
},
query: {
type: String,
observer: '_queryChanged'
},
index: {
type: String
},
subindex: {
type: String
},
fields: {
type: Array,
value: function() { return []; }
},
field: {
type: String
},
host: {
type: String
},
param: {
type: String,
notify: true
},
filters: {
type: Array,
notify: true,
value: function() { return []; }
}
},
_dataChanged: function() {
var that = this
var aggs = 0
//console.log(this.field)
try{
var hits = this.data.aggregations[this.field].buckets;
}
catch(err){
var hits = []
}
//console.log(hits)
var data = [];
hits.forEach(function(entry) {
data.push([entry.key, entry.doc_count]);
});
if(data.length == 0 ){
this.$.tagwrapper.style.visibility = 'hidden';
this.$.nodata.style.visibility = 'visible';
} else {
this.$.tagwrapper.style.visibility = 'visible';
this.$.nodata.style.visibility = 'hidden';
}
that.categories = data;
filtered = true;
},
getCategory: function(category){
arr_category=category.split("/")
return arr_category[arr_category.length -1]
},
removeFilters: function(){
this.filters = [];
},
filter: function(e) {
console.log(e)
var myfilters = [e.model.__data__.category[0]]
//console.log(myfilters)
this.push('filters', { terms: { 'taxonomies.rdfs:label.keyword': myfilters}})
}
});
</script>
</dom-module>
demo/index.html
View file @ b0156629
......@@ -26,7 +26,7 @@
<app-location route="{{route}}"></app-location>
<elastic-client
config='{"host": "http://sefarad-elasticsearch.cluster.gsi.dit.upm.es"}'
config='{"host": "http://localhost:19200"}'
client="{{client}}"
cluster-status="{{myStatus}}">
</elastic-client>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment