Skip to content

Commit 852aea7

Browse files
timeutimeu
committed
Initial release
0 parents  commit 852aea7

File tree

6 files changed

+241
-0
lines changed

6 files changed

+241
-0
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.bowerrc

‎README.md

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
# <svg-piechart>
2+
3+
> A web-component to draw a piechart using Polymer and SVG.
4+
5+
## Demo
6+
> [Check it live](http://timeu.github.io/svg-piechart/components/svg-piechart/demo.html).
7+
8+
## Install
9+
10+
Install the component using [Bower](http://bower.io/):
11+
12+
```sh
13+
$ bower install svg-piechart --save
14+
```
15+
16+
Or [download as ZIP](https://github.com/timeu/svg-piechart/archive/master.zip).
17+
18+
## Usage
19+
20+
1. Import Web Components' polyfill:
21+
22+
```html
23+
<script src="bower_components/platform/platform.js"></script>
24+
```
25+
26+
2. Import Custom Element:
27+
28+
```html
29+
<link rel="import" href="bower_components/svg-piechart/svg-piechart.html">
30+
```
31+
32+
3. Start using it!
33+
34+
```html
35+
<svg-piechart size="250" data="[10,20,50,20]"></svg-piechart>
36+
37+
38+
## Options
39+
40+
See the [component page](http://timeu.github.io/svg-piechart) for more information.
41+
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+
48+
49+
## Browser Support
50+
51+
![IE](https://raw.github.com/paulirish/browser-logos/master/internet-explorer/internet-explorer_48x48.png) | ![Chrome](https://raw.github.com/paulirish/browser-logos/master/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/paulirish/browser-logos/master/firefox/firefox_48x48.png) | ![Opera](https://raw.github.com/paulirish/browser-logos/master/opera/opera_48x48.png) | ![Safari](https://raw.github.com/paulirish/browser-logos/master/safari/safari_48x48.png)
52+
--- | --- | --- | --- | --- |
53+
IE 10+ ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
54+
55+
## Contributing
56+
57+
1. Fork it!
58+
2. Create your feature branch: `git checkout -b my-new-feature`
59+
3. Commit your changes: `git commit -m 'Add some feature'`
60+
4. Push to the branch: `git push origin my-new-feature`
61+
5. Submit a pull request :D
62+
63+
## History
64+
65+
Check [Release](https://github.com/timeu/google-map-markerclusterer/releases) list.
66+
67+
## License
68+
69+
[MIT License](http://timeu.mit-license.org/) © Ümit Seren

‎bower.json

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"name": "svg-piechart",
3+
"version": "0.0.1",
4+
"authors": ["Uemit Seren <uemit.seren@gmail.com>"],
5+
"description": "Element to draw a piechart on a SVG.",
6+
"keywords": "svg, piechart, polymer, web-components",
7+
"main": "svg-piechart.html",
8+
"license": "MIT",
9+
"homepage": "https://github.com/timeu/svg-piechart/",
10+
"ignore": [
11+
"**/.*"
12+
],
13+
"dependencies": {
14+
"polymer": "Polymer/polymer#master"
15+
}
16+
}

‎demo.html

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
5+
<title>svg-piechart Demo</title>
6+
7+
<script src="../platform/platform.js"></script>
8+
<link rel="import" href="svg-piechart.html">
9+
10+
</head>
11+
<body unresolved>
12+
13+
<p>An example of using <code>&lt;svg-piechart></code>:</p>
14+
15+
<svg-piechart size="250" data="[10,50,20,10]"></svg-piechart>
16+
17+
18+
</body>
19+
</html>

‎index.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!doctype html>
2+
<!--
3+
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
4+
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
5+
The complete set of authors may be found at http://polymer.github.io/AUTHORS
6+
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
7+
Code distributed by Google as part of the polymer project is also
8+
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
9+
-->
10+
<html>
11+
<head>
12+
<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">
16+
17+
</head>
18+
<body unresolved>
19+
20+
<core-component-page></core-component-page>
21+
22+
</body>
23+
</html>

‎svg-piechart.html

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
<link rel="import" href="../polymer/polymer.html">
2+
3+
<!--
4+
The `svg-piechart` element draws a piechart using SVG
5+
6+
##### Example
7+
8+
<svg-piechart size="50" data="[10,20,40,50]"></svg-piechart>
9+
10+
@element svg-piechart
11+
@blurb Draws a piechart using DOM and CSS3
12+
@status alpha
13+
@homepage http://timeu.github.io/svg-piechart
14+
-->
15+
<polymer-element name="svg-piechart" attributes="size data">
16+
<template>
17+
<style>
18+
:host {
19+
display:block;
20+
}
21+
.slice {
22+
23+
}
24+
</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>
29+
</svg>
30+
</template>
31+
<script>
32+
(function() {
33+
34+
var DEFAULT_COLORS20 = ["#1f77b4", "#aec7e8", "#ff7f0e", "#ffbb78", "#2ca02c", "#98df8a", "#d62728", "#ff9896", "#9467bd", "#c5b0d5", "#8c564b", "#c49c94", "#e377c2", "#f7b6d2", "#7f7f7f", "#c7c7c7", "#bcbd22", "#dbdb8d", "#17becf", "#9edae5"];
35+
var DEFAULT_COLORS10 = ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"];
36+
37+
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_',
65+
},
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() {
77+
var total = 0;
78+
for (var i =0;i<this.data.length;i++) {
79+
total += this.data[i];
80+
}
81+
return total;
82+
83+
},
84+
getArcs_ : function() {
85+
var colors = this.getColors_();
86+
var total = this.getTotal_();
87+
var startAngle = 0;
88+
var endAngle = -90;
89+
var arcs = [];
90+
for(var i=0; i < this.data.length; i++){
91+
var angle = (360 * this.data[i]/total);
92+
var largeArcFlag=0;
93+
if (angle>180) {largeArcFlag = 1;}
94+
95+
startAngle = endAngle;
96+
endAngle = startAngle + angle;
97+
98+
x1 = ((180 + 180*Math.cos(Math.PI*startAngle/180)));
99+
y1 = ((180 + 180*Math.sin(Math.PI*startAngle/180)));
100+
x2 = ((180 + 180*Math.cos(Math.PI*endAngle/180)));
101+
y2 = ((180 + 180*Math.sin(Math.PI*endAngle/180)));
102+
color = colors[i];
103+
arcs.push({x1:x1,y1:y1,x2:x2,y2:y2,largeArcFlag:largeArcFlag,color:color});
104+
105+
}
106+
return arcs;
107+
},
108+
render_ : function() {
109+
this.arcs = this.getArcs_();
110+
}
111+
})
112+
})();
113+
</script>

0 commit comments

Comments
 (0)