Commit 3f734da4 authored by Alberto Pascual's avatar Alberto Pascual

initial version

parents
{
"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%;
}
\ 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="entities-chart">
<style is="custom-style">
@import url("../../styles/app-theme.html");
</style>
<link rel="import" type="css" href="entities-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;
}
.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">
<div class="top-bar">
<iron-icon icon="{{icon}}"></iron-icon>
<span>{{title}}</span>
</div>
<div id="nodata">No entries match the current filters</div>
<div id="tagwrapper">
<br>
<template is="dom-repeat" items="{{entities}}" as="entity">
<paper-button class="tag active" on-tap="filter"><span>{{entity.0}}</span><span class="number">{{entity.1}}</span></paper-button>
</template>
</div>
<div style="float:right">
<small>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: 'entities-chart',
properties: {
data: {
type: Object,
observer: '_dataChanged'
},
icon: {
type: String
},
entities: {
type: Array
},
title: {
type: String,
value: "Entities 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 = []
}
var data = [];
hits.forEach(function(entry) {
data.push([entry.key.toUpperCase().split("/")[4], 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.entities = data;
filtered = true;
},
removeFilters: function(){
this.filters = [];
},
filter: function(e) {
var myfilters = e.model.__data__.entity[0].toLowerCase().split(" ")
this.push('filters', { terms: { 'topics.rdfs:subClassOf': myfilters}})
}
});
</script>
</dom-module>
Markdown is supported
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