Skip to content

Commit 3ee8c4a

Browse files
timeutimeu
committed
Merge pull request #3 from fxedel/master
Material colors, better demo and docs, new default size
2 parents 386bace + f8c3b3e commit 3ee8c4a

File tree

3 files changed

+244
-132
lines changed

3 files changed

+244
-132
lines changed

‎bower.json

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,7 @@
99
"homepage": "https://github.com/timeu/svg-piechart/",
1010
"ignore": [
1111
"/.*",
12-
"/test/",
13-
"/demo/"
12+
"/test/"
1413
],
1514
"dependencies": {
1615
"polymer": "Polymer/polymer#^1.0.0"

‎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>

0 commit comments

Comments
 (0)