Skip to content

Commit aa8d43e

Browse files
committed
Fixed intentation and changed colors to material colors
1 parent 45cca8a commit aa8d43e

File tree

1 file changed

+168
-113
lines changed

1 file changed

+168
-113
lines changed

svg-piechart.html

Lines changed: 168 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -16,126 +16,181 @@
1616

1717
<dom-module id="svg-piechart">
1818
<style>
19-
:host {
20-
display:block;
21-
}
22-
.slice {
23-
}
19+
:host {
20+
display:block;
21+
}
22+
23+
.slice:hover + text {
24+
}
2425
</style>
2526

2627
<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>-->
28+
<svg id="svg" width$="[[size]]" height$="[[size]]" viewBox="0 0 360 360">
29+
<!-- <template is="dom-repeat" items={{_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> -->
3232
</svg>
3333
</template>
3434

3535
</dom-module>
3636

3737
<script>
38-
(function() {
39-
40-
var DEFAULT_COLORS20 = ["#1f77b4", "#aec7e8", "#ff7f0e", "#ffbb78", "#2ca02c", "#98df8a", "#d62728", "#ff9896", "#9467bd", "#c5b0d5", "#8c564b", "#c49c94", "#e377c2", "#f7b6d2", "#7f7f7f", "#c7c7c7", "#bcbd22", "#dbdb8d", "#17becf", "#9edae5"];
41-
var DEFAULT_COLORS10 = ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"];
42-
43-
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-
}
79-
},
80-
81-
observers: [
82-
'_render(colors,data)'
83-
],
84-
_calculateTotal: function(data) {
85-
var total = 0;
86-
for (var i =0;i<data.length;i++) {
87-
total += data[i];
88-
}
89-
return total;
90-
91-
},
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);
104-
var startAngle = 0;
105-
var endAngle = -90;
106-
var arcs = [];
107-
for(var i=0; i < data.length; i++){
108-
var angle = (360 * data[i]/total);
109-
var largeArcFlag=0;
110-
if (angle>180) {largeArcFlag = 1;}
111-
112-
startAngle = endAngle;
113-
endAngle = startAngle + angle;
114-
115-
x1 = ((180 + 180*Math.cos(Math.PI*startAngle/180)));
116-
y1 = ((180 + 180*Math.sin(Math.PI*startAngle/180)));
117-
x2 = ((180 + 180*Math.cos(Math.PI*endAngle/180)));
118-
y2 = ((180 + 180*Math.sin(Math.PI*endAngle/180)));
119-
color = colors[i];
120-
arcs.push({x1:x1,y1:y1,x2:x2,y2:y2,largeArcFlag:largeArcFlag,color:color});
121-
122-
}
123-
return arcs;
124-
},
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-
}
138-
}
139-
})
140-
})();
38+
(function() {
39+
40+
var DEFAULT_COLORS16 = [
41+
'#f44336',
42+
'#e91e63',
43+
'#9c27b0',
44+
'#673ab7',
45+
'#3f51b5',
46+
'#1e88e5',
47+
'#03a9f4',
48+
'#00bcd4',
49+
'#009688',
50+
'#4caf50',
51+
'#8bc34a',
52+
'#cddc39',
53+
'#ffeb3b',
54+
'#ffc107',
55+
'#ff9800',
56+
'#ff5722'
57+
];
58+
var DEFAULT_COLORS8 = [
59+
'#f44336',
60+
'#9c27b0',
61+
'#3f51b5',
62+
'#03a9f4',
63+
'#009688',
64+
'#8bc34a',
65+
'#ffeb3b',
66+
'#ff9800'
67+
];
68+
var DEFAULT_COLORS4 = [
69+
'#f44336',
70+
'#3f51b5',
71+
'#8bc34a',
72+
'#ffeb3b',
73+
];
74+
75+
76+
Polymer({
77+
78+
is: 'svg-piechart',
79+
80+
properties: {
81+
/**
82+
* The `colors` attribute specifies the colors to be used for each slice.
83+
* If no colors are specified then the default-colors are used.
84+
*
85+
* @attribute colors
86+
*/
87+
colors: {
88+
type: Array,
89+
value: function() {
90+
return [];
91+
}
92+
},
93+
94+
/**
95+
* The `size` property specifies the size of the piechart (Default: 50).
96+
*
97+
* @attribute size
98+
*/
99+
size: {
100+
type: Number,
101+
value: 50
102+
},
103+
104+
/**
105+
* The `data` property specifies the values for each slice .
106+
*
107+
* @attribute data
108+
*/
109+
data : {
110+
type: Array,
111+
value: function() {
112+
return [];
113+
}
114+
}
115+
},
116+
117+
observers: [
118+
'_render(colors, data)'
119+
],
120+
121+
_calculateTotal: function(data) {
122+
var total = 0;
123+
for (var i = 0; i < data.length; i++) {
124+
total += data[i];
125+
}
126+
return total;
127+
},
128+
129+
_computePath: function(arc) {
130+
return "M180,180 L" + arc.x1 + "," + arc.y1 + " A180,180 0 " + arc.largeArcFlag + ",1 " + arc.x2 + "," + arc.y2 + " z";
131+
},
132+
133+
_getColors: function(colors) {
134+
if (!colors || colors.length == 0) {
135+
// colors = this.data.length > 10 ? DEFAULT_COLORS20 : DEFAULT_COLORS10;
136+
if (this.data.length > 8) {
137+
colors = DEFAULT_COLORS16;
138+
}
139+
else if (this.data.length > 4) {
140+
colors = DEFAULT_COLORS8;
141+
}
142+
else {
143+
colors = DEFAULT_COLORS4;
144+
}
145+
}
146+
return colors;
147+
},
148+
149+
_calculateArcs: function(colors, data) {
150+
var total = this._calculateTotal(data);
151+
var colors = this._getColors(colors);
152+
var startAngle = 0;
153+
var endAngle = -90;
154+
var arcs = [];
155+
156+
for (var i = 0; i < data.length; i++) {
157+
var angle = (360*data[i]/total);
158+
var largeArcFlag = 0;
159+
if (angle > 180) {
160+
largeArcFlag = 1;
161+
}
162+
163+
startAngle = endAngle;
164+
endAngle = startAngle + angle;
165+
166+
arcs.push({
167+
x1: 180 + 180*Math.cos(Math.PI*startAngle/180),
168+
y1: 180 + 180*Math.sin(Math.PI*startAngle/180),
169+
x2: 180 + 180*Math.cos(Math.PI*endAngle/180),
170+
y2: 180 + 180*Math.sin(Math.PI*endAngle/180),
171+
largeArcFlag: largeArcFlag,
172+
color: colors[i]});
173+
}
174+
175+
return arcs;
176+
},
177+
178+
_render: function(colors, data) {
179+
var arcs = this._calculateArcs(colors, data);
180+
var svg = Polymer.dom(this.$.svg);
181+
182+
while (svg.firstChild) {
183+
svg.removeChild(svg.firstChild);
184+
}
185+
186+
for (i = 0; i < arcs.length; i++) {
187+
var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
188+
path.classList.add('slice');
189+
path.style.fill = arcs[i].color;
190+
path.setAttribute('d', this._computePath(arcs[i]));
191+
svg.appendChild(path);
192+
}
193+
}
194+
});
195+
})();
141196
</script>

0 commit comments

Comments
 (0)