Skip to content

Commit 386bace

Browse files
committed
Upgraded to Polymer 1.0
1 parent 852aea7 commit 386bace

File tree

7 files changed

+227
-79
lines changed

7 files changed

+227
-79
lines changed

README.md

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,14 @@
33
> A web-component to draw a piechart using Polymer and SVG.
44
55
## Demo
6-
> [Check it live](http://timeu.github.io/svg-piechart/components/svg-piechart/demo.html).
6+
> [Check it live](http://timeu.github.io/svg-piechart/components/svg-piechart/demo/index.html).
77
88
## Install
99

1010
Install the component using [Bower](http://bower.io/):
1111

1212
```sh
13-
$ bower install svg-piechart --save
13+
$ bower install --save svg-piechart
1414
```
1515

1616
Or [download as ZIP](https://github.com/timeu/svg-piechart/archive/master.zip).
@@ -20,31 +20,25 @@ Or [download as ZIP](https://github.com/timeu/svg-piechart/archive/master.zip).
2020
1. Import Web Components' polyfill:
2121

2222
```html
23-
<script src="bower_components/platform/platform.js"></script>
23+
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
2424
```
2525

2626
2. Import Custom Element:
2727

2828
```html
29-
<link rel="import" href="bower_components/svg-piechart/svg-piechart.html">
29+
<link rel="import" href="../svg-piechart/svg-piechart.html">
3030
```
3131

3232
3. Start using it!
3333

3434
```html
3535
<svg-piechart size="250" data="[10,20,50,20]"></svg-piechart>
36-
36+
```
3737

3838
## Options
3939

4040
See the [component page](http://timeu.github.io/svg-piechart) for more information.
4141

42-
Attribute | Options | Default | Description
43-
--- | --- | --- | ---
44-
`size` | number | 50 | The size of the piechart in pixel.
45-
`data` | array[number] | null | The values for each slice.
46-
`colors` | array[string] | ColorBrewer Colors | Specifies the colors to be used for each slice of the piechart.
47-
4842

4943
## Browser Support
5044

@@ -62,7 +56,7 @@ IE 10+ ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
6256

6357
## History
6458

65-
Check [Release](https://github.com/timeu/google-map-markerclusterer/releases) list.
59+
Check [Release](https://github.com/timeu/svg-piechart/releases) list.
6660

6761
## License
6862

bower.json

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,22 @@
11
{
22
"name": "svg-piechart",
3-
"version": "0.0.1",
3+
"version": "1.0.0",
44
"authors": ["Uemit Seren <uemit.seren@gmail.com>"],
55
"description": "Element to draw a piechart on a SVG.",
66
"keywords": "svg, piechart, polymer, web-components",
77
"main": "svg-piechart.html",
88
"license": "MIT",
99
"homepage": "https://github.com/timeu/svg-piechart/",
1010
"ignore": [
11-
"**/.*"
11+
"/.*",
12+
"/test/",
13+
"/demo/"
1214
],
1315
"dependencies": {
14-
"polymer": "Polymer/polymer#master"
16+
"polymer": "Polymer/polymer#^1.0.0"
17+
},
18+
"devDependencies": {
19+
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
20+
"web-component-tester": "*"
1521
}
1622
}

demo.html renamed to demo/index.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@
44
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
55
<title>svg-piechart Demo</title>
66

7-
<script src="../platform/platform.js"></script>
8-
<link rel="import" href="svg-piechart.html">
7+
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
8+
<link rel="import" href="../svg-piechart.html">
99

1010
</head>
11-
<body unresolved>
11+
<body>
1212

1313
<p>An example of using <code>&lt;svg-piechart></code>:</p>
1414

index.html

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,13 @@
1010
<html>
1111
<head>
1212
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
13-
<script src="../platform/platform.js"></script>
14-
<link rel="import" href="../polymer/polymer.html">
15-
<link rel="import" href="../core-component-page/core-component-page.html">
13+
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
14+
<link rel="import" href="../iron-component-page/iron-component-page.html">
1615

1716
</head>
1817
<body unresolved>
1918

20-
<core-component-page></core-component-page>
19+
<iron-component-page></iron-component-page>
2120

2221
</body>
2322
</html>

svg-piechart.html

Lines changed: 85 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -7,88 +7,105 @@
77
88
<svg-piechart size="50" data="[10,20,40,50]"></svg-piechart>
99
10+
@demo
1011
@element svg-piechart
1112
@blurb Draws a piechart using DOM and CSS3
1213
@status alpha
1314
@homepage http://timeu.github.io/svg-piechart
1415
-->
15-
<polymer-element name="svg-piechart" attributes="size data">
16-
<template>
17-
<style>
16+
17+
<dom-module id="svg-piechart">
18+
<style>
1819
:host {
1920
display:block;
2021
}
2122
.slice {
22-
2323
}
2424
</style>
25-
<svg id="svg" width="{{size}}" height="{{size}}" viewBox="0 0 360 360">
26-
<template repeat="{{arc in arcs}}">
27-
<path class="style" d="M180,180 L{{arc.x1}},{{arc.y1}} A180,180 0 {{arc.largeArcFlag}},1 {{arc.x2}},{{arc.y2}} z"style="fill: {{arc.color}}"/>
28-
</template>
25+
26+
<template>
27+
<svg id="svg" width$="[[size]]" height$="[[size]]" viewBox="0 0 360 360">
28+
<!--
29+
<template is="dom-repeat" {{_arcs}}>
30+
<path class="slice" d="M180,180 L{{item.x1}},{{item.y1}} A180,180 0 {{item.largeArcFlag}},1 {{item.x2}},{{item.y2}} z"style="fill: {{item.color}}"/>
31+
</template>-->
2932
</svg>
3033
</template>
31-
<script>
34+
35+
</dom-module>
36+
37+
<script>
3238
(function() {
3339

3440
var DEFAULT_COLORS20 = ["#1f77b4", "#aec7e8", "#ff7f0e", "#ffbb78", "#2ca02c", "#98df8a", "#d62728", "#ff9896", "#9467bd", "#c5b0d5", "#8c564b", "#c49c94", "#e377c2", "#f7b6d2", "#7f7f7f", "#c7c7c7", "#bcbd22", "#dbdb8d", "#17becf", "#9edae5"];
3541
var DEFAULT_COLORS10 = ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"];
3642

3743

38-
Polymer('svg-piechart',{
39-
/**
40-
* The `colors` attribute specifies the colors to be used for each slice.
41-
* If no colors are specified then the default-colors are used.
42-
*
43-
* @attribute colors
44-
* @type array[string]
45-
*/
46-
colors: null,
47-
48-
/**
49-
* The `size` property specifies the size of the piechart (Default: 50).
50-
*
51-
* @attribute size
52-
* @type number
53-
*/
54-
size: 50,
55-
/**
56-
* The `data` property specifies the values for each slice .
57-
*
58-
* @attribute data
59-
* @type array[number]
60-
*/
61-
arcs : null,
62-
baseColor_ : "transparent",
63-
observe : {
64-
data : 'render_',
44+
Polymer({
45+
46+
is: 'svg-piechart',
47+
48+
properties: {
49+
/**
50+
* The `colors` attribute specifies the colors to be used for each slice.
51+
* If no colors are specified then the default-colors are used.
52+
*
53+
* @attribute colors
54+
*/
55+
colors: {
56+
type:Array,
57+
value:function() {return []}
58+
},
59+
60+
/**
61+
* The `size` property specifies the size of the piechart (Default: 50).
62+
*
63+
* @attribute size
64+
*/
65+
size: {
66+
type:Number,
67+
value:50
68+
},
69+
70+
/**
71+
* The `data` property specifies the values for each slice .
72+
*
73+
* @attribute data
74+
*/
75+
data : {
76+
type:Array,
77+
value: function() { return []; }
78+
}
6579
},
66-
created : function() {
67-
this.data = this.data || [];
68-
},
69-
getColors_ : function() {
70-
var colors = this.colors;
71-
if (!colors) {
72-
colors = this.data.length > 10 ? DEFAULT_COLORS20 : DEFAULT_COLORS10;
73-
}
74-
return colors;
75-
},
76-
getTotal_: function() {
80+
81+
observers: [
82+
'_render(colors,data)'
83+
],
84+
_calculateTotal: function(data) {
7785
var total = 0;
78-
for (var i =0;i<this.data.length;i++) {
79-
total += this.data[i];
86+
for (var i =0;i<data.length;i++) {
87+
total += data[i];
8088
}
8189
return total;
8290

8391
},
84-
getArcs_ : function() {
85-
var colors = this.getColors_();
86-
var total = this.getTotal_();
92+
_computePath: function(arc) {
93+
return "M180,180 L"+arc.x1+","+arc.y1+" A180,180 0 "+arc.largeArcFlag+",1 "+arc.x2+","+arc.y2+" z";
94+
},
95+
_getColors : function(colors) {
96+
if (!colors || colors.length == 0) {
97+
colors = this.data.length > 10 ? DEFAULT_COLORS20 : DEFAULT_COLORS10;
98+
}
99+
return colors;
100+
},
101+
_calculateArcs : function(colors,data) {
102+
var total = this._calculateTotal(data);
103+
var colors = this._getColors(colors);
87104
var startAngle = 0;
88105
var endAngle = -90;
89106
var arcs = [];
90-
for(var i=0; i < this.data.length; i++){
91-
var angle = (360 * this.data[i]/total);
107+
for(var i=0; i < data.length; i++){
108+
var angle = (360 * data[i]/total);
92109
var largeArcFlag=0;
93110
if (angle>180) {largeArcFlag = 1;}
94111

@@ -105,9 +122,20 @@
105122
}
106123
return arcs;
107124
},
108-
render_ : function() {
109-
this.arcs = this.getArcs_();
125+
_render : function(colors,data) {
126+
var arcs = this._calculateArcs(colors,data);
127+
var svg = Polymer.dom(this.$.svg);
128+
while (svg.firstChild) {
129+
svg.removeChild(svg.firstChild);
130+
}
131+
for (i =0;i<arcs.length;i++) {
132+
var path = document.createElementNS('http://www.w3.org/2000/svg',"path");
133+
path.classList.add("slice");
134+
path.style.fill= arcs[i].color;
135+
path.setAttributeNS(null,"d",this._computePath(arcs[i]));
136+
svg.appendChild(path);
137+
}
110138
}
111139
})
112140
})();
113-
</script>
141+
</script>

test/basic-test.html

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<!doctype html>
2+
<!--
3+
@license
4+
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
5+
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
6+
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
7+
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
8+
Code distributed by Google as part of the polymer project is also
9+
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10+
-->
11+
<html>
12+
<head>
13+
<meta charset="utf-8">
14+
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
15+
16+
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
17+
<script src="../../web-component-tester/browser.js"></script>
18+
19+
<!-- Step 1: import the element to test -->
20+
<link rel="import" href="../svg-piechart.html">
21+
</head>
22+
<body>
23+
24+
<!-- You can use the document as a place to set up your fixtures. -->
25+
<svg-piechart></svg-piechart>
26+
27+
<script>
28+
var myEl = document.querySelector('svg-piechart');
29+
30+
suite('<css-piechart>', function() {
31+
// Clean up after ourselves.
32+
teardown(function(done) {
33+
myEl.colors = [];
34+
myEl.data = []
35+
myEl.size = 50;
36+
flush(done);
37+
});
38+
39+
test('defaults', function() {
40+
assert.equal(myEl.colors.length,0);
41+
assert.equal(myEl.size,50);
42+
assert.equal(myEl.data.length,0);
43+
});
44+
45+
test('get custom colors when defined',function() {
46+
var customColors = ['red','green','blue'];
47+
myEl.colors = customColors;
48+
assert.equal(myEl.colors,customColors);
49+
assert.equal(myEl._getColors(customColors),customColors);
50+
});
51+
52+
test('get 10 colors when slices <=10',function() {
53+
assert.equal(myEl.colors.length,0);
54+
assert.equal(myEl._getColors([]).length,10);
55+
});
56+
test('get 20 colors when slices > 10',function() {
57+
assert.equal(myEl.colors.length,0);
58+
myEl.data = [1,2,3,4,5,6,7,8,9,10,11];
59+
assert.equal(myEl._getColors().length,20);
60+
});
61+
test('calculate total',function() {
62+
var data = [1,2,4,5,6,7,8,9,10];
63+
assert.equal(myEl._calculateTotal(data),52);
64+
});
65+
test('compute arcs', function() {
66+
var arcsToCheck = [{color:'red',x1:180,x2:351.19017293312766,largeArcFlag:0,y1:0,y2:124.37694101250946},
67+
{color:'green',x1:351.19017293312766,x2:74.19865458735485,largeArcFlag:0,y1:124.37694101250946,y2:325.62305898749054},
68+
{color:'blue',x1:74.19865458735485,x2:179.99999999999997,largeArcFlag:0,y1:325.62305898749054,y2:0}]
69+
var data = [20,40,40];
70+
var colors = ['red','green','blue'];
71+
var arcs = myEl._calculateArcs(colors,data);
72+
assert.equal(arcs.length,3);
73+
assert.deepEqual(arcs,arcsToCheck);
74+
});
75+
test('test DOM', function(done) {
76+
myEl.data = [20,40,40];
77+
myEl.colors = ['red','green','blue'];
78+
var background = Polymer.dom(myEl.root).querySelector("#svg");
79+
assert.equal(background.getAttribute("width"),50);
80+
assert.equal(background.getAttribute("height"),50);
81+
async.nextTick(function() {
82+
var slicesEl = Polymer.dom(myEl.root).querySelectorAll('.slice');
83+
assert.equal(slicesEl.length,3);
84+
done();
85+
});
86+
});
87+
});
88+
</script>
89+
90+
</body>
91+
</html>

0 commit comments

Comments
 (0)