1 /**
  2  * Constructs a new wedge with default properties. Wedges are not typically
  3  * constructed directly, but by adding to a panel or an existing mark via
  4  * {@link pv.Mark#add}.
  5  *
  6  * @class Represents a wedge, or pie slice. Specified in terms of start and end
  7  * angle, inner and outer radius, wedges can be used to construct donut charts
  8  * and polar bar charts as well. If the {@link #angle} property is used, the end
  9  * angle is implied by adding this value to start angle. By default, the start
 10  * angle is the previously-generated wedge's end angle. This design allows
 11  * explicit control over the wedge placement if desired, while offering
 12  * convenient defaults for the construction of radial graphs.
 13  *
 14  * <p>The center point of the circle is positioned using the standard box model.
 15  * The wedge can be stroked and filled, similar to {@link pv.Bar}.
 16  *
 17  * <p>See also the <a href="../../api/Wedge.html">Wedge guide</a>.
 18  *
 19  * @extends pv.Mark
 20  */
 21 pv.Wedge = function() {
 22   pv.Mark.call(this);
 23 };
 24 
 25 pv.Wedge.prototype = pv.extend(pv.Mark)
 26     .property("startAngle", Number)
 27     .property("endAngle", Number)
 28     .property("angle", Number)
 29     .property("innerRadius", Number)
 30     .property("outerRadius", Number)
 31     .property("lineWidth", Number)
 32     .property("strokeStyle", pv.color)
 33     .property("fillStyle", pv.color);
 34 
 35 pv.Wedge.prototype.type = "wedge";
 36 
 37 /**
 38  * The start angle of the wedge, in radians. The start angle is measured
 39  * clockwise from the 3 o'clock position. The default value of this property is
 40  * the end angle of the previous instance (the {@link Mark#sibling}), or -PI / 2
 41  * for the first wedge; for pie and donut charts, typically only the
 42  * {@link #angle} property needs to be specified.
 43  *
 44  * @type number
 45  * @name pv.Wedge.prototype.startAngle
 46  */
 47 
 48 /**
 49  * The end angle of the wedge, in radians. If not specified, the end angle is
 50  * implied as the start angle plus the {@link #angle}.
 51  *
 52  * @type number
 53  * @name pv.Wedge.prototype.endAngle
 54  */
 55 
 56 /**
 57  * The angular span of the wedge, in radians. This property is used if end angle
 58  * is not specified.
 59  *
 60  * @type number
 61  * @name pv.Wedge.prototype.angle
 62  */
 63 
 64 /**
 65  * The inner radius of the wedge, in pixels. The default value of this property
 66  * is zero; a positive value will produce a donut slice rather than a pie slice.
 67  * The inner radius can vary per-wedge.
 68  *
 69  * @type number
 70  * @name pv.Wedge.prototype.innerRadius
 71  */
 72 
 73 /**
 74  * The outer radius of the wedge, in pixels. This property is required. For
 75  * pies, only this radius is required; for donuts, the inner radius must be
 76  * specified as well. The outer radius can vary per-wedge.
 77  *
 78  * @type number
 79  * @name pv.Wedge.prototype.outerRadius
 80  */
 81 
 82 /**
 83  * The width of stroked lines, in pixels; used in conjunction with
 84  * <tt>strokeStyle</tt> to stroke the wedge's border.
 85  *
 86  * @type number
 87  * @name pv.Wedge.prototype.lineWidth
 88  */
 89 
 90 /**
 91  * The style of stroked lines; used in conjunction with <tt>lineWidth</tt> to
 92  * stroke the wedge's border. The default value of this property is null,
 93  * meaning wedges are not stroked by default.
 94  *
 95  * @type string
 96  * @name pv.Wedge.prototype.strokeStyle
 97  * @see pv.color
 98  */
 99 
100 /**
101  * The wedge fill style; if non-null, the interior of the wedge is filled with
102  * the specified color. The default value of this property is a categorical
103  * color.
104  *
105  * @type string
106  * @name pv.Wedge.prototype.fillStyle
107  * @see pv.color
108  */
109 
110 /**
111  * Default properties for wedges. By default, there is no stroke and the fill
112  * style is a categorical color.
113  *
114  * @type pv.Wedge
115  */
116 pv.Wedge.prototype.defaults = new pv.Wedge()
117     .extend(pv.Mark.prototype.defaults)
118     .startAngle(function() {
119         var s = this.sibling();
120         return s ? s.endAngle : -Math.PI / 2;
121       })
122     .innerRadius(0)
123     .lineWidth(1.5)
124     .strokeStyle(null)
125     .fillStyle(pv.Colors.category20().by(pv.index));
126 
127 /**
128  * Returns the mid-radius of the wedge, which is defined as half-way between the
129  * inner and outer radii.
130  *
131  * @see #innerRadius
132  * @see #outerRadius
133  * @returns {number} the mid-radius, in pixels.
134  */
135 pv.Wedge.prototype.midRadius = function() {
136   return (this.innerRadius() + this.outerRadius()) / 2;
137 };
138 
139 /**
140  * Returns the mid-angle of the wedge, which is defined as half-way between the
141  * start and end angles.
142  *
143  * @see #startAngle
144  * @see #endAngle
145  * @returns {number} the mid-angle, in radians.
146  */
147 pv.Wedge.prototype.midAngle = function() {
148   return (this.startAngle() + this.endAngle()) / 2;
149 };
150 
151 /**
152  * Constructs a new wedge anchor with default properties. Wedges support five
153  * different anchors:<ul>
154  *
155  * <li>outer
156  * <li>inner
157  * <li>center
158  * <li>start
159  * <li>end
160  *
161  * </ul>In addition to positioning properties (left, right, top bottom), the
162  * anchors support text rendering properties (text-align, text-baseline,
163  * textAngle). Text is rendered to appear inside the wedge.
164  *
165  * @param {string} name the anchor name; either a string or a property function.
166  * @returns {pv.Anchor}
167  */
168 pv.Wedge.prototype.anchor = function(name) {
169   function partial(s) { return s.innerRadius || s.angle < 2 * Math.PI; }
170   function midRadius(s) { return (s.innerRadius + s.outerRadius) / 2; }
171   function midAngle(s) { return (s.startAngle + s.endAngle) / 2; }
172   var scene;
173   return pv.Mark.prototype.anchor.call(this, name)
174     .def("$wedge.anchor", function() {
175         scene = this.scene.target;
176       })
177     .left(function() {
178         var s = scene[this.index];
179         if (partial(s)) switch (this.name()) {
180           case "outer": return s.left + s.outerRadius * Math.cos(midAngle(s));
181           case "inner": return s.left + s.innerRadius * Math.cos(midAngle(s));
182           case "start": return s.left + midRadius(s) * Math.cos(s.startAngle);
183           case "center": return s.left + midRadius(s) * Math.cos(midAngle(s));
184           case "end": return s.left + midRadius(s) * Math.cos(s.endAngle);
185         }
186         return s.left;
187       })
188     .top(function() {
189         var s = scene[this.index];
190         if (partial(s)) switch (this.name()) {
191           case "outer": return s.top + s.outerRadius * Math.sin(midAngle(s));
192           case "inner": return s.top + s.innerRadius * Math.sin(midAngle(s));
193           case "start": return s.top + midRadius(s) * Math.sin(s.startAngle);
194           case "center": return s.top + midRadius(s) * Math.sin(midAngle(s));
195           case "end": return s.top + midRadius(s) * Math.sin(s.endAngle);
196         }
197         return s.top;
198       })
199     .textAlign(function() {
200         var s = scene[this.index];
201         if (partial(s)) switch (this.name()) {
202           case "outer": return pv.Wedge.upright(midAngle(s)) ? "right" : "left";
203           case "inner": return pv.Wedge.upright(midAngle(s)) ? "left" : "right";
204         }
205         return "center";
206       })
207     .textBaseline(function() {
208         var s = scene[this.index];
209         if (partial(s)) switch (this.name()) {
210           case "start": return pv.Wedge.upright(s.startAngle) ? "top" : "bottom";
211           case "end": return pv.Wedge.upright(s.endAngle) ? "bottom" : "top";
212         }
213         return "middle";
214       })
215     .textAngle(function() {
216         var s = scene[this.index], a = 0;
217         if (partial(s)) switch (this.name()) {
218           case "center":
219           case "inner":
220           case "outer": a = midAngle(s); break;
221           case "start": a = s.startAngle; break;
222           case "end": a = s.endAngle; break;
223         }
224         return pv.Wedge.upright(a) ? a : (a + Math.PI);
225       });
226 };
227 
228 /**
229  * Returns true if the specified angle is considered "upright", as in, text
230  * rendered at that angle would appear upright. If the angle is not upright,
231  * text is rotated 180 degrees to be upright, and the text alignment properties
232  * are correspondingly changed.
233  *
234  * @param {number} angle an angle, in radius.
235  * @returns {boolean} true if the specified angle is upright.
236  */
237 pv.Wedge.upright = function(angle) {
238   angle = angle % (2 * Math.PI);
239   angle = (angle < 0) ? (2 * Math.PI + angle) : angle;
240   return (angle < Math.PI / 2) || (angle >= 3 * Math.PI / 2);
241 };
242 
243 /** @private Sets angle based on endAngle or vice versa. */
244 pv.Wedge.prototype.buildImplied = function(s) {
245   if (s.angle == null) s.angle = s.endAngle - s.startAngle;
246   else if (s.endAngle == null) s.endAngle = s.startAngle + s.angle;
247   pv.Mark.prototype.buildImplied.call(this, s);
248 };
249