Skip to content

Commit e3d0477

Browse files
fxedelfxedel
committed
Complete overhaul of demo and docs, set default size to 150
1 parent aa8d43e commit e3d0477

File tree

2 files changed

+89
-29
lines changed

2 files changed

+89
-29
lines changed

‎demo/index.html

Lines changed: 64 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,71 @@
11
<!doctype html>
22
<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>
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</title>
66

7-
<script src="../../webcomponentsjs/webcomponents-lite.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">
9+
<link rel="import" href="../../paper-styles/demo-pages.html">
910

10-
</head>
11-
<body>
11+
<style is="custom-style">
12+
.vertical-section-container {
13+
max-width: 48em;
14+
margin: 0 auto;
15+
}
16+
.horizontal-section {
17+
text-align: center;
18+
}
19+
</style>
20+
</head>
21+
<body>
1222

13-
<p>An example of using <code>&lt;svg-piechart></code>:</p>
23+
<div class="vertical-section-container">
24+
<div>
25+
<h4>Normal</h4>
26+
<div class="horizontal-section">
27+
<svg-piechart data="[10,50,20,10]"></svg-piechart>
28+
</div>
29+
</div>
30+
<div>
31+
<h4>Bigger (<code>size</code> is <code>250</code>)</h4>
32+
<div class="horizontal-section">
33+
<svg-piechart size="250" data="[10,50,20,10]"></svg-piechart>
34+
</div>
35+
</div>
36+
<div>
37+
<h4>Custom colors</h4>
38+
<div class="horizontal-section">
39+
<svg-piechart
40+
colors='[
41+
"rgba(255, 0, 0, .1)",
42+
"rgba(255, 0, 0, .3)",
43+
"rgba(255, 0, 0, .5)",
44+
"rgba(255, 0, 0, .7)",
45+
"rgba(255, 0, 0, .9)"]'
46+
data="[1,1,1,1,1]">
47+
</svg-piechart>
48+
</div>
49+
</div>
50+
<div>
51+
<h4>Smallest default color palette (up to 4 different colors)</h4>
52+
<div class="horizontal-section">
53+
<svg-piechart data="[1,1,1,1]"></svg-piechart>
54+
</div>
55+
</div>
56+
<div>
57+
<h4>Mid-size default color palette (up to 8 different colors)</h4>
58+
<div class="horizontal-section">
59+
<svg-piechart data="[1,1,1,1,1,1,1,1]"></svg-piechart>
60+
</div>
61+
</div>
62+
<div>
63+
<h4>Biggest default color palette (up to 16 different colors)</h4>
64+
<div class="horizontal-section">
65+
<svg-piechart data="[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]"></svg-piechart>
66+
</div>
67+
</div>
68+
</div>
1469

15-
<svg-piechart size="250" data="[10,50,20,10]"></svg-piechart>
16-
17-
18-
</body>
70+
</body>
1971
</html>

‎svg-piechart.html

Lines changed: 25 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,28 @@
11
<link rel="import" href="../polymer/polymer.html">
22

33
<!--
4-
The `svg-piechart` element draws a piechart using SVG
4+
`svg-piechart` draws a piechart using SVG. The absolut values are defined as an array in `data`.
5+
6+
<svg-piechart data="[10,20,40,50]"></svg-piechart>
7+
8+
Height and width in pixels can be changed by setting `size`:
9+
10+
<svg-piechart size="250" data="[10,20,40,50]"></svg-piechart>
11+
12+
There are three default color palettes included. They all use the official <a href="http://www.google.com/design/spec/style/color.html">Material Colors</a>. One has 4 different colors, one 8 and one 16. The chart element automatically uses the smallest palette that covers the amount of given values. (So with 6 given values, the 8-color-palette is used.)
13+
14+
To use custom colors, set the `colors` property to an array of rgb or rgba values:
15+
16+
<svg-piechart
17+
colors='["red", "#666", "#1e88e5", "rgba(255, 0, 20, .4)"]'
18+
data=" [ 10, 20, 40, 50]">
19+
</svg-piechart>
520
6-
##### Example
721
8-
<svg-piechart size="50" data="[10,20,40,50]"></svg-piechart>
922
1023
@demo
11-
@element svg-piechart
12-
@blurb Draws a piechart using DOM and CSS3
24+
@element
25+
@blurb Draws a piechart using SVG.
1326
@status alpha
1427
@homepage http://timeu.github.io/svg-piechart
1528
-->
@@ -20,7 +33,7 @@
2033
display:block;
2134
}
2235

23-
.slice:hover + text {
36+
.slice {
2437
}
2538
</style>
2639

@@ -86,9 +99,7 @@
8699
*/
87100
colors: {
88101
type: Array,
89-
value: function() {
90-
return [];
91-
}
102+
value: []
92103
},
93104

94105
/**
@@ -98,20 +109,18 @@
98109
*/
99110
size: {
100111
type: Number,
101-
value: 50
112+
value: 150
102113
},
103114

104115
/**
105116
* The `data` property specifies the values for each slice .
106117
*
107118
* @attribute data
108119
*/
109-
data : {
120+
data: {
110121
type: Array,
111-
value: function() {
112-
return [];
113-
}
114-
}
122+
value: []
123+
}
115124
},
116125

117126
observers: [
@@ -127,12 +136,11 @@
127136
},
128137

129138
_computePath: function(arc) {
130-
return "M180,180 L" + arc.x1 + "," + arc.y1 + " A180,180 0 " + arc.largeArcFlag + ",1 " + arc.x2 + "," + arc.y2 + " z";
139+
return 'M180,180 L' + arc.x1 + ',' + arc.y1 + ' A180,180 0 ' + arc.largeArcFlag + ',1 ' + arc.x2 + ',' + arc.y2 + ' z';
131140
},
132141

133142
_getColors: function(colors) {
134143
if (!colors || colors.length == 0) {
135-
// colors = this.data.length > 10 ? DEFAULT_COLORS20 : DEFAULT_COLORS10;
136144
if (this.data.length > 8) {
137145
colors = DEFAULT_COLORS16;
138146
}

0 commit comments

Comments
 (0)