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

included categories-chart in entities-chart

parent 134e3572
......@@ -118,11 +118,12 @@
icon="icons:list"
param="{{param}}"
id="entitieschart"
legend=true
filters="{{filters}}">
</entities-chart>
</div>
<div class="col-md-6">
<categories-chart
<entities-chart
field="categories.name"
data="{{data}}"
title="Categories"
......@@ -130,7 +131,7 @@
param="{{param}}"
id="categorieschart"
filters="{{filters}}">
</categories-chart>
</entities-chart>
</div>
</div>
......@@ -452,16 +453,6 @@ H2020 RIA Action Grant No. 740934 under the call SEC-06-FCT-2016 — Developing
}
}
},
'people.name':{
terms: {
field: "entities.schema:name.keyword",
size : 16,
order: {
_count: "desc"
}
include
}
}
'categories.name': {
terms: {
field: "taxonomies.rdfs:label.keyword",
......
{
"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"
}
: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%;
}
.categories .badge.badge-secondary {
background-color: #eaeaea;
color: #505050;
border: 1px solid;
border-bottom-left-radius: 0;
padding-right: 0px;
cursor:pointer;
margin-bottom:5px;
margin-right: 3px;
margin-left: 3px;
font-size: 13px;
}
.categories .badge.badge-secondary:hover {
color: white;
background-color: #505050 !important;
}
\ No newline at end of file
<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 {
color: white !important;
background-color: #505050;
padding: 2px;
padding-right: 15px;
padding-left: 10px;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
margin-right: -1px;
margin-left: 5px;
}
.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: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; padding-left: 12px; margin-top: 46px;">
<template is="dom-repeat" items="{{categories}}" as="category">
<span class="badge badge-secondary" on-tap="filter" title$="{{getTitle(category.0)}}" >{{getCategory(category.0)}}<span class="number">{{category.1}}</span></span>
</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("/")
name=arr_category[arr_category.length -1]
if(name.length<50){
return name
}
return name.substring(0,50)+"..."
},
getTitle: function(category){
arr_category=category.split("/")
name=arr_category[arr_category.length -1]
return name
},
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>
......@@ -42,3 +42,56 @@ paper-icon-button.green:hover {
.entities .badge.badge-secondary:hover {
color: white !important;
}
#chart {
width: 100%;
}
.number {
color: white !important;
padding: 2px;
padding-right: 15px;
padding-left: 10px;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
margin-right: -1px;
margin-left: 5px;
}
#tag-wrapper {
margin: 10px 10px 10px 20px;
min-height: 215px;
visibility: visible;
box-shadow: 0 0 black;
}
.content.paper-button {
padding: 0 0.57em;
}
#nodata {
position: absolute;
width: 100%;
line-height: 35px;
text-align: center;
}
#legend_list {
display: flex;
flex-direction: row;
justify-content: center;
margin-bottom: 13px;
margin-top: 13px;
visibility: hidden;
}
.legend_component {
display: flex;
flex-direction: row;
}
.legend_square {
width: 7px;
height: 7px;
float: left;
margin-top: 7px;
margin-right: 3px;
margin-left: 6px
}
\ No newline at end of file
......@@ -10,121 +10,25 @@
<link rel="import" type="css" href="entities-chart.css">
<template>
<style type="text/css">
#chart {
width: 100%;
}
.number {
color: white !important;
padding: 2px;
padding-right: 15px;
padding-left: 10px;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
margin-right: -1px;
margin-left: 5px;
}
.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: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="entities" 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: 80px">No entries match the current filters</div>
<div id="nodata" style="margin-top: 35px">No entries match the current filters</div>
<div class="content" style="text-align:center; margin: 0 auto;">
<div class="leyend" style="display: flex; flex-direction: row; justify-content: center; margin-bottom: 13px; margin-top: 13px;">
<div class="leyend_place" style="display: flex; flex-direction: row;">
<div style="width: 7px;height: 7px;background-color: #f90; float: left; margin-top: 7px;margin-right: 3px; margin-left: 6px" class="style-scope news-chart"></div>
<div id="legend_list">
<div class="legend_component">
<div class="legend_square" style="background-color: #f90;"></div>
Places
</div>
<div class="leyend_org" style="display: flex; flex-direction: row;">
<div style="width: 7px;height: 7px;background-color: #dd4b39; float: left; margin-top: 7px;margin-right: 3px; margin-left: 6px" class="style-scope news-chart"></div>
<div class="legend_component">
<div class="legend_square" style="background-color: #dd4b39;"></div>
Organization
</div>
<div class="leyend_person" style="display: flex; flex-direction: row;">
<div style="width: 7px;height: 7px;background-color: #00c0ef; float: left; margin-top: 7px;margin-right: 3px; margin-left: 6px" class="style-scope news-chart"></div>
<div class="legend_component">
<div class="legend_square" style="background-color: #00c0ef;"></div>
Person
</div>
......@@ -134,7 +38,7 @@
<template is="dom-repeat" items="{{entities}}" as="entity">
<span class="badge badge-secondary" on-tap="filter" style$="background-color: {{getBgColour(entity)}}7d; color:#505050; border-color:{{getBgColour(entity)}}" data-color$="{{getBgColour(entity)}}">{{entity.0}}<span class="number" style$="background-color:{{getBgColour(entity)}}">{{entity.1}}</span></span>
<span class="badge badge-secondary" on-tap="filter" style$="background-color: {{getBgColour(entity.2)}}7d; color:#505050; border-color:{{getBgColour(entity.2)}}" data-color$="{{getBgColour(entity.2)}}">{{getEntity(entity.0)}}<span class="number" style$="background-color:{{getBgColour(entity.2)}}">{{entity.1}}</span></span>
</template>
</div>
......@@ -172,6 +76,10 @@
type: String,
value: "Entities Chart"
},
legend: {
type: Boolean,
value: false
},
query: {
type: String,
......@@ -213,6 +121,11 @@
_dataChanged: function() {
var that = this
if(this.legend){
this.$.legend_list.style.visibility = 'visible';
}else{
this.$.legend_list.style.visibility = 'hidden';
}
var aggs = 0
//console.log(this.field)
try{
......@@ -223,14 +136,29 @@
}
//console.log(hits)
var data = [];
hits.forEach(function(entry) {
entry.entity_type.hits.hits[0]._source.entities.forEach(function(entity){
if(entry.key===entity['schema:name']){
//console.log([entry.key, entry.doc_count,entity['@type'][0]])
data.push([entry.key, entry.doc_count,entity['@type'][0]]);
}
});
});