WebCompDev / COMPONENTS

Browse Code »

Commit 3fe24d39766a29b00cffaeb98d843b2d432582b2

Authored by pina 2015-10-30 16:06:05 +0100

1 parent da107995

a new datalet

Inline Side-by-side

Showing 5 changed files with 359 additions and 0 deletions

datalets/bubble3d-datalet/bubble3d-datalet.html 0 → 100644

View file @3fe24d3

	1	+<!--
	2	+@license
	3	+ The MIT License (MIT)
	4	+
	5	+ Copyright (c) 2015 Dipartimento di Informatica - Universit� di Salerno - Italy
	6	+
	7	+ Permission is hereby granted, free of charge, to any person obtaining a copy
	8	+ of this software and associated documentation files (the "Software"), to deal
	9	+ in the Software without restriction, including without limitation the rights
	10	+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
	11	+ copies of the Software, and to permit persons to whom the Software is
	12	+ furnished to do so, subject to the following conditions:
	13	+
	14	+ The above copyright notice and this permission notice shall be included in
	15	+ all copies or substantial portions of the Software.
	16	+
	17	+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
	18	+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
	19	+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
	20	+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
	21	+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
	22	+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
	23	+ THE SOFTWARE.
	24	+-->
	25	+
	26	+<!--
	27	+* Developed by :
	28	+* ROUTE-TO-PA Project - grant No 645860. - www.routetopa.eu
	29	+*
	30	+-->
	31	+
	32	+<link rel="import" href="../highcharts-datalet/highcharts-datalet.html">
	33	+<script src="http://code.highcharts.com/highcharts-more.js"></script>
	34	+
	35	+<!--
	36	+`bubble3d-datalet` is a 3D bubbles datalet based on highcharts project <http://www.highcharts.com/>
	37	+
	38	+Examples:
	39	+
	40	+ An example to create a 3d Bubble chart with multiple series specified (fields4)
	41	+
	42	+ <bubble3d-datalet
	43	+ data-url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=#"
	44	+ fields='["field1","field2","field3","field4"]'>
	45	+ </bubble3d-datalet>
	46	+
	47	+ An example to create a 3d Bubble chart with x and y values, and a size value (field3)
	48	+
	49	+ <bubble3d-datalet
	50	+ data-url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=#"
	51	+ fields='["field1","field2","field3"]'>
	52	+ </bubble3d-datalet>
	53	+
	54	+@element bubble3d-datalet
	55	+@status v0.1
	56	+@demo demo/index.html
	57	+@group datalets
	58	+-->
	59	+
	60	+<dom-module name="bubble3d-datalet">
	61	+ <template>
	62	+ <highcharts-datalet id="charts" data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}"></highcharts-datalet>
	63	+ </template>
	64	+ <script>
	65	+
	66	+ var Bubble3dBehavior = {
	67	+ /**
	68	+ * Build Highchart object
	69	+ *
	70	+ * @method presentData
	71	+ */
	72	+ presentData: function() {
	73	+ var categoryName = [];
	74	+ var color = {};
	75	+ var bubble3DSeriesData = {};
	76	+ var b3dserie = [];
	77	+
	78	+ Bubble3DArr = [];
	79	+ var dataTmp = [];
	80	+ //Example 1: No Series name is specified in the query
	81	+ if(this.data.length == 3){
	82	+ for (var i = 0; i < this.data[0].data.length; i++) {
	83	+ Bubble3DArr = [this.data[0].data[i], parseFloat(this.data[1].data[i]), parseFloat(this.data[2].data[i])];
	84	+ dataTmp.push(Bubble3DArr)
	85	+ }
	86	+ color = {
	87	+ fillColor: {
	88	+ radialGradient: {cx: 0.4, cy: 0.3, r: 0.7},
	89	+ stops: [
	90	+ [0, 'rgba(255,255,255,0.5)']
	91	+ ]
	92	+ }
	93	+ }
	94	+ //add data to the series
	95	+ bubble3DSeriesData = {
	96	+ name: "Series",
	97	+ data: dataTmp,
	98	+ marker: color
	99	+ }
	100	+ b3dserie.push(bubble3DSeriesData);
	101	+ }
	102	+ //Example 2: A multi-series 3d bubble charts
	103	+ else{
	104	+ var categoryNameDuplicateValue = [];
	105	+ for (i = 0; i < this.data[0].data.length; i++) {
	106	+ categoryNameDuplicateValue.push(this.data[3].data[i]);
	107	+ }
	108	+ categoryName = categoryNameDuplicateValue.filter(function (itm, i, categoryNameDuplicateValue) {
	109	+ return i == categoryNameDuplicateValue.indexOf(itm);
	110	+ });
	111	+ for (var index = 0; index < categoryName.length; index++) {
	112	+ for (var i = 0; i < this.data[0].data.length; i++) {
	113	+ if (this.data[3].data[i] == categoryName[index]) {
	114	+ Bubble3DArr = [this.data[0].data[i], this.data[1].data[i], parseFloat(this.data[2].data[i])];
	115	+ dataTmp.push(Bubble3DArr);
	116	+ //A different color for each series
	117	+ color = {
	118	+ fillColor: {
	119	+ radialGradient: {cx: 0.4, cy: 0.3, r: 0.7},
	120	+ stops: [
	121	+ [0, 'rgba(255,255,255,0.5)'],
	122	+ [1, Highcharts.Color(Highcharts.getOptions().colors[index]).setOpacity(0.5).get('rgba')]
	123	+ ]
	124	+ }
	125	+ }
	126	+ }
	127	+ }
	128	+ //add data to the series
	129	+ bubble3DSeriesData = {
	130	+ name: "Series: " + categoryName[index],
	131	+ data: dataTmp,
	132	+ marker: color
	133	+ }
	134	+
	135	+ b3dserie.push(bubble3DSeriesData);
	136	+ dataTmp = [];
	137	+ }
	138	+ }
	139	+ $(this._component.$.charts.$.container).highcharts({
	140	+ chart: {
	141	+ type: 'bubble',
	142	+ plotBorderWidth: 1,
	143	+ zoomType: 'xy'
	144	+ },
	145	+
	146	+ legend: {
	147	+ enabled: true
	148	+ },
	149	+
	150	+ title: {
	151	+ text: "" + this._component.title
	152	+ },
	153	+ xAxis: {
	154	+ categories: this.properties.categories.value,
	155	+ title: {
	156	+ text: this._component.xAxisLabel
	157	+ }
	158	+ },
	159	+
	160	+ yAxis: {
	161	+ categories: this.properties.categories.value,
	162	+ title: {
	163	+ text: this._component.yAxisLabel
	164	+ }
	165	+ },
	166	+ title: {
	167	+ text: this._component.title
	168	+ },
	169	+ subtitle: {
	170	+ text: this._component.title
	171	+ },
	172	+ //A custom tooltip
	173	+ tooltip: {
	174	+ shared: true,
	175	+ useHTML: true,
	176	+ headerFormat:
	177	+ '<table ><tr><td style="color: {series.color}">{series.name}</td></tr>' +
	178	+ '<tr><td <b> {point.key}</b> , <b>{point.y}</b></tr>',
	179	+ pointFormat:
	180	+ '<td style="text-align: right"><b>{point.z}</b></td></tr>',
	181	+ footerFormat: '</table>',
	182	+ followPointer: true
	183	+ },
	184	+ plotOptions: {
	185	+ series: {
	186	+ dataLabels: {
	187	+ enabled: false, //enable for label for each bubble
	188	+ format: '{point.z}'
	189	+ }
	190	+ }
	191	+ },
	192	+ //hide link HighChart
	193	+ credits: {
	194	+ enabled: false
	195	+ },
	196	+ series: b3dserie
	197	+ });
	198	+ }
	199	+ };
	200	+ /**
	201	+ * Element registration
	202	+ */
	203	+ Bubble3dDatalet = Polymer({
	204	+ is: 'bubble3d-datalet',
	205	+ properties: {
	206	+ /**
	207	+ * It's the label for X axis
	208	+ *
	209	+ * @attribute xAxisLabel
	210	+ * @type String
	211	+ * @default ''
	212	+ */
	213	+ xAxisLabel: {
	214	+ type: String,
	215	+ value: ""
	216	+ },
	217	+ /**
	218	+ * It's the label for Y axis
	219	+ *
	220	+ * @attribute yAxisLabel
	221	+ * @type String
	222	+ * @default ''
	223	+ */
	224	+ yAxisLabel: {
	225	+ type: String,
	226	+ value: ""
	227	+ },
	228	+ /**
	229	+ * It's the title of the chart
	230	+ *
	231	+ * @attribute title
	232	+ * @type Strig
	233	+ * @default ''
	234	+ */
	235	+ title: {
	236	+ type: String,
	237	+ value: ""
	238	+ },
	239	+ /**
	240	+ * It's the component behavior
	241	+ *
	242	+ * @attribute behavior
	243	+ * @type Object
	244	+ * @default {}
	245	+ */
	246	+ behavior : {
	247	+ type : Object,
	248	+ value : {}
	249	+ }
	250	+ },
	251	+ /**
	252	+ * 'ready' callback extend the Bubble3dBehavior with HighchartsComponentBehavior and Bubble3dBehavior
	253	+ * and run the Datalet workcycle.
	254	+ *
	255	+ * @method ready
	256	+ */
	257	+ ready: function(){
	258	+ this.behavior = $.extend(true, {}, HighchartsComponentBehavior, Bubble3dBehavior);
	259	+ this.async(function(){this.behavior.init(this)},1);
	260	+ }
	261	+ });
	262	+ </script>
	263	+</dom-module>
0	264	\ No newline at end of file
...	...

datalets/bubble3d-datalet/bubble3d-datalet.png 0 → 100644

View file @3fe24d3

15.8 KB

datalets/bubble3d-datalet/bubble3d-datalet.xml 0 → 100644

View file @3fe24d3

	1	+<component>
	2	+ <name>bubble3d-datalet</name>
	3	+ <attributes>
	4	+ <attribute>
	5	+ <name>data-url</name>
	6	+ </attribute>
	7	+ <attribute>
	8	+ <name>fields</name>
	9	+ </attribute>
	10	+ </attributes>
	11	+ <idm>
	12	+ <inputs>
	13	+ <input>
	14	+ <name>Categories</name>
	15	+ <description>The chart categories. Its values will be put in the horizontal axis. You need one value for each series.</description>
	16	+ <scale>nominal</scale>
	17	+ <role>domain</role>
	18	+ <selection>11</selection>
	19	+ </input>
	20	+ <input>
	21	+ <name>Y values</name>
	22	+ <description>The chart plots y values. Its values will be put in the vertical axis.</description>
	23	+ <scale>nominal</scale>
	24	+ <role>domain</role>
	25	+ <selection>11</selection>
	26	+ </input>
	27	+ <input>
	28	+ <name>Z values</name>
	29	+ <description>The chart plots z value. Its values represent the size of the bubble.</description>
	30	+ <scale>nominal</scale>
	31	+ <role>domain</role>
	32	+ <selection>11</selection>
	33	+ </input>
	34	+ <input>
	35	+ <name>Series</name>
	36	+ <description>The chart series. Its values visualize multi- series bubbles chart.</description>
	37	+ <scale>nominal</scale>
	38	+ <role>domain</role>
	39	+ <selection>11</selection>
	40	+ </input>
	41	+ <layouts>
	42	+ <input>
	43	+ <name>title</name>
	44	+ <description>The label for the title of the chart</description>
	45	+ </input>
	46	+ <input>
	47	+ <name>x-axis-label</name>
	48	+ <description>The label for the X axis</description>
	49	+ </input>
	50	+ <input>
	51	+ <name>y-axis-label</name>
	52	+ <description>The label for the Y axis</description>
	53	+ </input>
	54	+ <input>
	55	+ <name>suffix</name>
	56	+ <description>The values suffix(eg units, dollars, euro, ...)</description>
	57	+ </input>
	58	+ <input>
	59	+ <name>comment</name>
	60	+ <description>The values suffix(eg units, dollars, euro, ...)</description>
	61	+ </input>
	62	+ </layouts>
	63	+ </inputs>
	64	+ </idm>
	65	+</component>
0	66	\ No newline at end of file
...	...

datalets/bubble3d-datalet/demo/index.html 0 → 100644

View file @3fe24d3

	1	+<!DOCTYPE html>
	2	+<html lang="en">
	3	+<head>
	4	+ <meta charset="UTF-8">
	5	+ <title></title>
	6	+
	7	+ <script>
	8	+ </script>
	9	+
	10	+</head>
	11	+<body>
	12	+
	13	+<script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
	14	+<link rel="import" href="../bubble3d-datalet.html" />
	15	+<bubble3d-datalet data-url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=0cb600fc-19ad-4aaf-9794-1e6ea851840a"
	16	+ fields='["result,records,risorsa","result,records,capitolo","result,records,movimento", "result,records,categoria"]'></bubble3d-datalet>
	17	+
	18	+</body>
	19	+</html>
...	...

datalets/bubble3d-datalet/docs.html 0 → 100644

View file @3fe24d3

	1	+<!DOCTYPE html>
	2	+<html lang="en">
	3	+<head>
	4	+ <link rel="import" href="../../bower_components/iron-component-page/iron-component-page.html">
	5	+ <meta charset="UTF-8">
	6	+</head>
	7	+<body>
	8	+
	9	+<iron-component-page src="bubble3d-datalet.html"></iron-component-page>
	10	+
	11	+</body>
	12	+</html>
0	13	\ No newline at end of file
...	...