lib/yuilib/3.13.0/series-combo/series-combo.js

   1 /*
   2 YUI 3.13.0 (build 508226d)
   3 Copyright 2013 Yahoo! Inc. All rights reserved.
   4 Licensed under the BSD License.
   5 http://yuilibrary.com/license/
   6 */
   7
   8 YUI.add('series-combo', function (Y, NAME) {
   9
  10 /**
  11  * Provides functionality for creating a combo series.
  12  *
  13  * @module charts
  14  * @submodule series-combo
  15  */
  16 /**
  17  * The ComboSeries class renders a combination of lines, plots and area fills in a single series.
  18  * Each series type has a corresponding boolean attribute indicating if it is rendered. By default,
  19  * lines and plots are rendered and area is not.
  20  *
  21  * @class ComboSeries
  22  * @extends CartesianSeries
  23  * @uses Fills
  24  * @uses Lines
  25  * @uses Plots
  26  * @constructor
  27  * @param {Object} config (optional) Configuration parameters.
  28  * @submodule series-combo
  29  */
  30 Y.ComboSeries = Y.Base.create("comboSeries", Y.CartesianSeries, [Y.Fills, Y.Lines, Y.Plots], {
  31         /**
  32      * @protected
  33      *
  34      * Draws the series.
  35      *
  36      * @method drawSeries
  37      */
  38     drawSeries: function()
  39     {
  40         if(this.get("showAreaFill"))
  41         {
  42             this.drawFill.apply(this, this._getClosingPoints());
  43         }
  44         if(this.get("showLines"))
  45         {
  46             this.drawLines();
  47         }
  48         if(this.get("showMarkers"))
  49         {
  50             this.drawPlots();
  51         }
  52     },
  53
  54     /**
  55      * Toggles visibility
  56      *
  57      * @method _toggleVisible
  58      * @param {Boolean} visible indicates visibilitye
  59      * @private
  60      */
  61     _toggleVisible: function(visible)
  62     {
  63         var markers,
  64             marker,
  65             len,
  66             i;
  67         if(this.get("showAreaFill") && this._path)
  68         {
  69             this._path.set("visible", visible);
  70         }
  71         if(this.get("showLines") && this._lineGraphic)
  72         {
  73             this._lineGraphic.set("visible", visible);
  74         }
  75         if(this.get("showMarkers"))
  76         {
  77             markers = this.get("markers");
  78             if(markers)
  79             {
  80                 i = 0;
  81                 len = markers.length;
  82                 for(; i < len; ++i)
  83                 {
  84                     marker = markers[i];
  85                     if(marker)
  86                     {
  87                         marker.set("visible", visible);
  88                     }
  89                 }
  90             }
  91         }
  92     },
  93
  94     /**
  95      * @protected
  96      *
  97      * Returns the default hash for the `styles` attribute.
  98      *
  99      * @method _getDefaultStyles
 100      * @return Object
 101      */
 102     _getDefaultStyles: function()
 103     {
 104         var styles = Y.ComboSeries.superclass._getDefaultStyles();
 105         styles.line = this._getLineDefaults();
 106         styles.marker = this._getPlotDefaults();
 107         styles.area = this._getAreaDefaults();
 108         return styles;
 109     }
 110 },
 111 {
 112     ATTRS: {
 113         /**
 114          * Read-only attribute indicating the type of series.
 115          *
 116          * @attribute type
 117          * @type String
 118          * @default combo
 119          */
 120         type: {
 121             value:"combo"
 122         },
 123
 124         /**
 125          * Indicates whether a fill is displayed.
 126          *
 127          * @attribute showAreaFill
 128          * @type Boolean
 129          * @default false
 130          */
 131         showAreaFill: {
 132             value: false
 133         },
 134
 135         /**
 136          * Indicates whether lines are displayed.
 137          *
 138          * @attribute showLines
 139          * @type Boolean
 140          * @default true
 141          */
 142         showLines: {
 143             value: true
 144         },
 145
 146         /**
 147          * Indicates whether markers are displayed.
 148          *
 149          * @attribute showMarkers
 150          * @type Boolean
 151          * @default true
 152          */
 153         showMarkers: {
 154             value: true
 155         },
 156
 157         /**
 158          * Reference to the styles of the markers. These styles can also
 159          * be accessed through the `styles` attribute. Below are default
 160          * values:
 161          *  <dl>
 162          *      <dt>fill</dt><dd>A hash containing the following values:
 163          *          <dl>
 164          *              <dt>color</dt><dd>Color of the fill. The default value is determined by the order of the series on the
 165          *              graph. The color will be retrieved from the below array:<br/>
 166          *              `["#6084d0", "#eeb647", "#6c6b5f", "#d6484f", "#ce9ed1", "#ff9f3b", "#93b7ff", "#e0ddd0", "#94ecba", "#309687"]`
 167          *              </dd>
 168          *              <dt>alpha</dt><dd>Number from 0 to 1 indicating the opacity of the marker fill. The default value is 1.</dd>
 169          *          </dl>
 170          *      </dd>
 171          *      <dt>border</dt><dd>A hash containing the following values:
 172          *          <dl>
 173          *              <dt>color</dt><dd>Color of the border. The default value is determined by the order of the series on the graph.
 174          *              The color will be retrieved from the below array:<br/>
 175          *              `["#205096", "#b38206", "#000000", "#94001e", "#9d6fa0", "#e55b00", "#5e85c9", "#adab9e", "#6ac291", "#006457"]`
 176          *              <dt>alpha</dt><dd>Number from 0 to 1 indicating the opacity of the marker border. The default value is 1.</dd>
 177          *              <dt>weight</dt><dd>Number indicating the width of the border. The default value is 1.</dd>
 178          *          </dl>
 179          *      </dd>
 180          *      <dt>width</dt><dd>indicates the width of the marker. The default value is 10.</dd>
 181          *      <dt>height</dt><dd>indicates the height of the marker The default value is 10.</dd>
 182          *      <dt>over</dt><dd>hash containing styles for markers when highlighted by a `mouseover` event. The default
 183          *      values for each style is null. When an over style is not set, the non-over value will be used. For example,
 184          *      the default value for `marker.over.fill.color` is equivalent to `marker.fill.color`.</dd>
 185          *  </dl>
 186          *
 187          * @attribute marker
 188          * @type Object
 189          */
 190         marker: {
 191             lazyAdd: false,
 192             getter: function()
 193             {
 194                 return this.get("styles").marker;
 195             },
 196             setter: function(val)
 197             {
 198                 this.set("styles", {marker:val});
 199             }
 200         },
 201
 202         /**
 203          * Reference to the styles of the lines. These styles can also be accessed through the `styles` attribute.
 204          * Below are the default values:
 205          *  <dl>
 206          *      <dt>color</dt><dd>The color of the line. The default value is determined by the order of the series on the graph. The color
 207          *      will be retrieved from the following array:
 208          *      `["#426ab3", "#d09b2c", "#000000", "#b82837", "#b384b5", "#ff7200", "#779de3", "#cbc8ba", "#7ed7a6", "#007a6c"]`
 209          *      <dt>weight</dt><dd>Number that indicates the width of the line. The default value is 6.</dd>
 210          *      <dt>alpha</dt><dd>Number between 0 and 1 that indicates the opacity of the line. The default value is 1.</dd>
 211          *      <dt>lineType</dt><dd>Indicates whether the line is solid or dashed. The default value is solid.</dd>
 212          *      <dt>dashLength</dt><dd>When the `lineType` is dashed, indicates the length of the dash. The default value is 10.</dd>
 213          *      <dt>gapSpace</dt><dd>When the `lineType` is dashed, indicates the distance between dashes. The default value is 10.</dd>
 214          *      <dt>connectDiscontinuousPoints</dt><dd>Indicates whether or not to connect lines when there is a missing or null value
 215          *      between points. The default value is true.</dd>
 216          *      <dt>discontinuousType</dt><dd>Indicates whether the line between discontinuous points is solid or dashed. The default
 217          *      value is solid.</dd>
 218          *      <dt>discontinuousDashLength</dt><dd>When the `discontinuousType` is dashed, indicates the length of the dash. The default
 219          *      value is 10.</dd>
 220          *      <dt>discontinuousGapSpace</dt><dd>When the `discontinuousType` is dashed, indicates the distance between dashes. The default
 221          *      value is 10.</dd>
 222          *  </dl>
 223          *
 224          * @attribute line
 225          * @type Object
 226          */
 227         line: {
 228             lazyAdd: false,
 229             getter: function()
 230             {
 231                 return this.get("styles").line;
 232             },
 233             setter: function(val)
 234             {
 235                 this.set("styles", {line:val});
 236             }
 237         },
 238
 239         /**
 240          * Reference to the styles of the area fills. These styles can also be accessed through the `styles` attribute.
 241          * Below are the default values:
 242          *
 243          *  <dl>
 244          *      <dt>color</dt><dd>The color of the fill. The default value is determined by the order of the series on the
 245          *      graph. The color will be retrieved from the following array:
 246          *      `["#66007f", "#a86f41", "#295454", "#996ab2", "#e8cdb7", "#90bdbd","#000000","#c3b8ca", "#968373", "#678585"]`
 247          *      </dd>
 248          *      <dt>alpha</dt><dd>Number between 0 and 1 that indicates the opacity of the fill. The default value is 1</dd>
 249          *  </dl>
 250          *
 251          * @attribute area
 252          * @type Object
 253          */
 254         area: {
 255             lazyAdd: false,
 256             getter: function()
 257             {
 258                 return this.get("styles").area;
 259             },
 260             setter: function(val)
 261             {
 262                 this.set("styles", {area:val});
 263             }
 264         }
 265
 266         /**
 267          * Style properties for the series. Contains a key indexed hash of the following:
 268          *  <dl>
 269          *      <dt>marker</dt><dd>Style properties for the markers in the series. Specific style attributes are listed
 270          *      <a href="#attr_marker">here</a>.</dd>
 271          *      <dt>line</dt><dd>Style properties for the lines in the series. Specific
 272          *      style attributes are listed <a href="#attr_line">here</a>.</dd>
 273          *      <dt>area</dt><dd>Style properties for the area fills in the series. Specific style attributes are listed
 274          *      <a href="#attr_area">here</a>.</dd>
 275          *  </dl>
 276          *
 277          * @attribute styles
 278          * @type Object
 279          */
 280     }
 281 });
 282
 283
 284
 285
 286
 287
 288
 289
 290 }, '3.13.0', {"requires": ["series-cartesian", "series-line-util", "series-plot-util", "series-fill-util"]});