px-vis-behavior-common.html

<link rel="import" href="px-vis-polyfills.html" />
<link rel="import" href="../px-colors-design/colors.html" />


<script>
var PxVisBehavior = PxVisBehavior || {};

/*
    Name:
    PxVisBehavior.baseSize

    Description:
    Polymer behavior that provides height and width

    @polymerBehavior PxVisBehavior.baseSize
*/
PxVisBehavior.baseSize = {

  properties: {
    /**
    * The width of the elem; generally the width of the charting area for most components
    *
    */
    width: {
      type: Number,
      notify: true
    },

    /**
    * The height of the component; generally the height of the charting area for most components.
    *
    */
    height: {
      type: Number,
      notify: true
    }
  }
};

/*
    Name:
    PxVisBehavior.baseSize

    Description:
    Polymer behavior that provides height and width

    @polymerBehavior PxVisBehavior.baseSize
*/
PxVisBehavior.margins = {

  properties: {
    /**
    * Copy of the default margin for checking if it has changed
    *
    */
    _defaultMargin:{
      type:Object,
      notify: true,
      value: function() {
        return {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0
        };
      }
    },
    /**
    * Defines the base margin for the chart. Calcs are run to add to the margin to accommodate axes and other elements which exist within the SVG frame, but outside the chart frame.
    *
    */
    margin:{
      type:Object,
      notify: true,
      value: function() {
        return {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0
        };
      }
    }
  }
};

/*
    Name:
    PxVisBehavior.sizing

    Description:
    Polymer behavior that provides the basic sizing properties for px-vis components.

    Dependencies:
    - none

    @polymerBehavior PxVisBehavior.sizing
*/
PxVisBehavior.sizing = [{
  properties: {
    /**
     * An optional offset for a variety of elements
     *
     *
     */
    offset: {
      type: Array,
      value: function() {
        return [0,0]
      }
    }
  }
}, PxVisBehavior.baseSize, PxVisBehavior.margins];

/*
    Name:
    PxVisBehavior.truncating

    Description:
    Polymer behavior that provides the string truncation method

    @polymerBehavior PxVisBehavior.truncating
*/
PxVisBehavior.truncating = {
  properties: {
    /**
     * Defines if the label should get truncated and to how many characters.
     *
     * Default length is 10 characters, not including the ellipsis which gets inserted.
     *
     * The length must be at least 2.
     *
     * To disable truncation, set the value to -1
     *
     * @property truncationLength
     * @type Number
     * @default 10
    */
    truncationLength: {
      type: Number,
      value: 10
    },
  },
  /**
   * _truncateName takes a string and string length [optional].
   * Returns a truncated string with the middle replaced by an ellipsis. The ellipsis does not count towards the total character count.
   * Follows these truncation principles: http://www.gesdh.com/predix/product/principles/truncation/
   * Example: LNG_BAH_HOT_EFFECTIVENESS_CORE8 --> LNG_B...CORE8
   *
   * Length cannot be less than 2 characters.
   * Default length is 10 characters.
   *
   * If the string is less than or equal to the length or the length is invalid, returns the original string.
   *
   * @param {String} name, {Integer} len
   * @return {String} truncatedString
  */
  _truncateName:function(name,len) {
    var len = len || this.truncationLength;

    // make sure length is legit
    if(len < 2) {
      return name;
    }

    //check that name is greater than length; if not, return it
    if(name.length <= len) {
      return name;
    }

    // truncate
    var frontLen = Math.ceil(len / 2),
        backLen = Math.floor(len / 2),
        front = name.slice(0,frontLen),
        back = name.slice(-backLen);

    return front + '...' + back;
  }
};

/*
    Name:
    PxVisBehavior.formatting

    Description:
    Polymer behavior that provides the string and number formating options and methods. Includes name truncation and numbro-element number formating options.

    Dependencies:
    - numbro-element components

    @polymerBehavior PxVisBehavior.formatting
*/
PxVisBehavior.formatting = [{
  properties: {
    /**
     * Defines how a display number should be formatted:
     * Provide localization for currency formatting
     *
     * For valid formats and features, see: http://numbrojs.com/languages.html
     * For docs on the component, see: https://metanov.github.io/numbro-element/components/numbro-element/
     *
     * @property numberFormatCulture
     * @type String
     * @default 'en-US'
     */
    numberFormatCulture: {
      type:String,
      notify: true,
      value: 'en-US'
    },
    /**
     * Defines how a display number should be formatted:
     * Specify whether the value should be formatted as a currency
     *
     * For valid formats and features, see: http://numbrojs.com/format.html
     * For docs on the component, see: https://metanov.github.io/numbro-element/components/numbro-element/
     *
     * @property numberFormatIsCurrency
     * @type Boolean
     * @default false
     */
    numberFormatIsCurrency: {
      type :Boolean,
      notify: true,
      value: false
    },
    /**
     * Defines how a display number should be formatted:
     * Provide a new default format for currency
     *
     * For valid formats and features, see: http://numbrojs.com/format.html
     * For docs on the component, see: https://metanov.github.io/numbro-element/components/numbro-element/
     *
     * @property numberFormatCurrency
     * @type String
     * @default '$0,0.00'
     */
    numberFormatCurrency: {
      type: String,
      notify: true,
      value:'$0,0.00'
    },
    /**
     * Defines how a display number should be formatted:
     * Provides a new default format
     *
     * For valid formats and features, see: http://numbrojs.com/format.html
     * For docs on the component, see: https://metanov.github.io/numbro-element/components/numbro-element/
     *
     * @property numberFormatDefault
     * @type String
     * @default '0,0.0000'
     */
    numberFormatDefault: {
      type: String,
      notify: true,
      value: '0,0.0000'
    },
    /**
     * Defines how a display number should be formatted:
     * The format used to generate the output
     *
     * For valid formats and features, see: http://numbrojs.com/format.html
     * For docs on the component, see: https://metanov.github.io/numbro-element/components/numbro-element/
     *
     * @property numberFormat
     * @type String
     * @default '0,0.00'
     */
    numberFormat: {
      type: String,
      notify: true,
      value: '0,0.00'
    },
    /**
     * Defines how a display number should be converted back to a Number:
     * A formatted String to extract a value from
     *
     * For valid formats and features, see: http://numbrojs.com/format.html#unformat
     * For docs on the component, see: https://metanov.github.io/numbro-element/components/numbro-element/
     *
     * @property numberFormatUnformat
     * @type String
     * @default '0,0.0000'
     */
    numberFormatUnformat: {
      type: String,
      notify: true,
      value: '0,0.0000'
    },
    /**
     * Defines how to display 0 values
     *
     * For valid formats and features, see: http://numbrojs.com/format.html
     * For docs on the component, see: https://metanov.github.io/numbro-element/components/numbro-element/
     *
     * @property numberFormatZero
     * @type String
     * @default ''
     */
    numberFormatZero: {
      type: String,
      notify: true,
      value:'0'
    }
  }
}, PxVisBehavior.truncating];

/*
    Name:
    PxVisBehavior.dataset

    Description:
    Polymer behavior that provides the data object for d3 components.

    Dependencies:
    - D3.js

    @polymerBehavior PxVisBehavior.dataset
*/
PxVisBehavior.dataset = {
    properties: {
      /**
       * container for the data object that drives the chart / component
       * Generally loaded with an iron-ajax tag (but doesnt have to be)
       * This can be set declaratively
       *
       * @property chartData
       * @type Object
       */
      chartData:{
        type: Array,
        notify: true
      }
    },
    /**
     * returns true if the data is valid: non NaN, null or undefined
     */
    _isValidData: function(d) {
      //false and "" will return false, which is fine as they're not valid data
      return d || d === 0;
    },

    /**
     * returns true if the data is not null
     */
    _isDataNotNull: function(d) {
      //false and "" will return false, which is fine as they're not valid data
      return d !== null;
    }
};

/*
    Name:
    PxVisBehavior.completeSeriesConfig

    Description:
    Polymer behavior that provides a computed series configuration object to components.

    Dependencies:
    - D3.js

    @polymerBehavior PxVisBehavior.completeSeriesConfig
*/

PxVisBehavior.completeSeriesConfig = {
    properties: {
      /**
       * A configuration file generated by the chart behavior based on seriesConfig and defaultSeriesConfig.
       *
       */
       completeSeriesConfig: {
         type: Object,
         notify: true
       }
    }
};

/*
    Name:
    PxVisBehavior.mutedSeries

    Description:
    Polymer behavior that provides the mutedSeries property px-vis components.

    Dependencies:
    -

    @polymerBehavior PxVisBehavior.mutedSeries
*/
PxVisBehavior.mutedSeries = {
  properties: {
    /**
     * A list of user selected muted series. Tied declaratively to series components
     *
     * The series name is the key and the value is a boolean for whether it is muted or not:
     *
     *```
     * {
     *     'seriesId1':true,
     *     'seriesId2':false,
     *  }
     *```
     *
     * In this example, seriesId1 is muted. seriesId2 was muted, but has been turned back on.
     *
     */
    mutedSeries:{
      type:Object,
      notify: true,
      value:function(){ return {}; },
    }
  }
};

/*
    Name:
    PxVisBehavior.muteUnmuteSeries

    Description:
    Polymer behavior that provides the mutedSeries property and methods to mute/unmute series for px-vis components.

    Dependencies:
    -

    @polymerBehavior PxVisBehavior.muteUnmuteSeries
*/
PxVisBehavior.muteUnmuteSeries = [{
  properties: {},

  /**
   * Method to mute or umute
   *
   */
  muteUnmuteSeries: function(series, fromRegister) {
    //TODO Polymer 2.0: fix this
    // make sure we are not dealing with APM's IDs
    if(series.indexOf('.') === -1) {
      // if it doesnt exist, let's add it and set to true
      if( typeof(this.mutedSeries[series]) === 'undefined' ) {
        this.set('mutedSeries.' + series, true);
      } else {
        //if does exist, flip the bit
        this.set('mutedSeries.' + series, !this.mutedSeries[series]);
      }
    } else {
      var muted = this.mutedSeries;
      this.mutedSeries = [];
      muted[series] = typeof(muted[series]) === 'undefined' ? true : !muted[series];
      this.set('mutedSeries', muted);
    }

    this.fire('px-vis-muted-series-updated', { 'name': series, 'value': this.mutedSeries[series], 'fromRegister': fromRegister});
  }
}, PxVisBehavior.mutedSeries];

/*
    Name:
    PxVisBehavior.progressiveRendering

    Description:
    Polymer behavior that provides canvas progressive rendering options

    Dependencies:
    -

    @polymerBehavior PxVisBehavior.progressiveRendering
*/
PxVisBehavior.progressiveRendering = {
  properties: {
    /**
    * By default the lines are rendered progressively for a better user experience.
    * Use this to prevent progressive rendering
    */
    noCanvasProgressiveRendering: {
      type: Boolean,
      value: false
    }
  }
};


/*
    Name:
    PxVisBehavior.tooltipData

    Description:
    Polymer behavior that provides the tooltipData property px-vis components.

    Dependencies:
    -

    @polymerBehavior PxVisBehavior.tooltipData
*/
PxVisBehavior.tooltipData = {
  properties: {
    /**
     * Data reported back by the interaction space component. Displays the series name, values, and timestamp in the register. tooltipData is in the form:
     *
     *```
     *    {
     *        "time": "2015-03-25T20:34:47.085Z",
     *        "hidden": false,
     *        "series":[{
     *            "name":"seriesId1",
     *            "coord":[xCoord1, yCoord1],  //in pixel space
     *            "value":{
     *                "x":xVal1,             //in data space
     *                "seriesId1":yVal1    //in data space
     *            }
     *        },{
     *            "name":"seriesId2",
     *            "coord":[xCoord2, yCoord2],  //in pixel space
     *            "value":{
     *                "x":xVal2,             //in data space
     *                "seriesId2":yVal2    //in data space
     *            },
     *        }],
     *        "mouse":[ mouseX, mouseY ],   //in pixel space
     *        "xArr":[xCoord1 , xCoord2],   //in pixel space
     *        "yArr":[yCoord1 , yCoord2],   //in pixel space
     *    }
     *```
     *
     * When not hovering on a chart, the tooltipData should still have the series names in order for them to still appear in the register. IE:
     *
     *```
     *    {
     *        "time": null,
     *        "hidden": true,
     *        "series":[{
     *            "name":"seriesId1",
     *            "value": null
     *        },{
     *            "name":"seriesName1",
     *            "value": null
     *        }],
     *        "mouse": null,
     *        "xArr": null,
     *        "yArr": null
     *    }
     *```
     *
     * @property tooltipData
     * @type Object
     */
    tooltipData:{
      type:Object,
      notify:true
    }
  }
};

/*
    Name:
    PxVisBehavior.extentsData

    Description:
    Polymer behavior that provides the extentsData property px-vis components.

    Dependencies:
    -

    @polymerBehavior PxVisBehavior.extentsData
*/
PxVisBehavior.extentsData = {
  properties: {
    /**
     * Data reported back by the interaction space. Displays the interpreted x & y coords, width and height, and domain extents. extentsData is in the form:
     *
     *```
     *   {
     *     x1 = {pixel-space}
     *     y1 = {pixel-space}
     *     x2 = {pixel-space}
     *     y2 = {pixel-space}
     *     w = {pixels}
     *     h = {pixels}
     *     eX = [{domain}, {domain}];
     *     eY = [{domain}, {domain}];
     *   }
     *```
     *
     * @property extentsData
     * @type Object
     */
    extentsData:{
      type:Object,
      notify:true
    }
  }
};

/*
    Name:
    PxVisBehavior.commonMethods

    Description:
    Polymer behavior that provides the commonMethods properties px-vis components.

    Dependencies:
    -

    @polymerBehavior PxVisBehavior.commonMethods
*/
PxVisBehavior.commonMethods = {
  properties: {
  },

  /**
   * Checks to see if an object is empty
   *
   * @param {object}
   * @return {bool}
   */
  _isObjEmpty:function(obj){
    if(typeof(obj) === 'undefined' || obj === null) {
      return true;
    }
    return Object.keys(obj).length === 0;
  },

  /**
   * Checks to see if an d3 obj is empty
   *
   * @param {object}
   * @return {bool}
   */
  _isD3Empty:function(obj){
    if(this._isObjEmpty(obj)) {
      return true;
    }
    return obj.empty();
  },

  /**
   * Checks to see if an d3 obj has something
   *
   * @param {object}
   * @return {bool}
   */
  _doesD3HaveValues:function(obj){
    if(this._isObjEmpty(obj)) {
      return false;
    }
    return !obj.empty();
  },

  /**
   * Checks to see if an object has values
   *
   * @param {object}
   * @return {bool}
   */
  _doesObjHaveValues:function(obj){
    if(typeof(obj) === 'undefined' || obj === null) {
      return false;
    }
    return Object.keys(obj).length > 0;
  },
  /**
   * Checks to see if an object is defined
   *
   * @param {object}
   * @return {bool}
   */
  _isVarDefined:function(obj){
    if(typeof(obj) === 'undefined'){
      return false;
    }
    return true
  },
  /**
   * Checks to see if an object is defined
   *
   * @param {object}
   * @return {bool}
   */
  _isVarUndefined:function(obj){
    if(typeof(obj) === 'undefined'){
      return true;
    }
    return false
  },
  /**
   *  Returns the color used for a pie slice given a specific index
   *
   */
  _getPieColorForIndex: function(index) {
    return this.dataVisColors[this.seriesColorOrder[index]];
  },
  /**
   * escapes '.' in css selectors so that we can appropriately select stuff with dots in thei ids
   */
  _escapeCssSelector: function(selector) {
    return selector.replace('.', '\\.');
  },

  /**
   * Checks if a theme variable exists, if so, returns the theme value, if not, returns the default
   */
  _checkThemeVariable: function(varName, defaultValue) {
    var themeVar = this.getComputedStyleValue(varName);
    return (themeVar.length === 0) ? defaultValue : themeVar;
  },

  /**
   * Checks if a color is already hex or rgb, if must be a colors obj
   */
  _checkColorType: function(c) {
    if(c[0] === '#' || (c[0] === 'r' && c[1] === 'g' && c[2] === 'b')) {
      return c;
    }
    return this.colors[c];
  },

  /**
   * converts a hex to rgb color
   */
  _hexToRgb: function(hex) {
      // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
      var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
      hex = hex.replace(shorthandRegex, function(m, r, g, b) {
          return r + r + g + g + b + b;
      });

      var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
      return result ? 'rgb(' + parseInt(result[1], 16) + ',' +
                               parseInt(result[2], 16)+ ',' +
                               parseInt(result[3], 16) + ')' : null;
  }
};

/*
    Name:
    PxVisBehavior.getSeriesColors

    Description:
    Polymer behavior that provides the ability to retrieve the color of a serie given an index

    Dependencies:
    -

    @polymerBehavior PxVisBehavior.getSeriesColors
*/
PxVisBehavior.getSeriesColors = [{
  /**
   * Helper function to return the correct color for a particular index.
   **/
  _getColor: function(i) {
    var l = this.seriesColorOrder.length,
        index = this._calcIndex(i,l);
    return this.dataVisColors[this.seriesColorOrder[ index ]];
  },

  /**
   * Helper function to calculate the index. When we run out of indcies, it loops back over valid indicies.
   **/
  _calcIndex: function(i, l) {
    return i < l ? i : this._calcIndex(i - l,l);
  }
}, PxColorsBehavior.dataVisColors ];

/*
    Name:
    PxVisBehavior.axisTypes

    Description:
    Polymer behavior that provides 2 properties defining the type of axis of a
    px-vis components.

    Dependencies:
    -

    @polymerBehavior PxVisBehavior.axisTypes
*/
PxVisBehavior.axisTypes = {
  properties: {
    /**
     * Sets the type of data for the x values
     *
     * Valid entries are:
     * - `ordinal`: for discrete input domains, such as names or categories.
     * - `time`: for time domains.
     * - `linear`: for continuous input domains, such as numbers.
     * - 'pie': for pie/donut charts
     */
    xAxisType: {
      type: String,
      value: 'linear',
      notify: true
    },
    /**
     * Sets the type of data for the y values
     *
     * Valid entries are:
     * - `ordinal`: for discrete input domains, such as names or categories.
     * - `linear`: for continuous input domains, such as numbers.
     * - 'pie': for pie/donut charts
     */
    yAxisType: {
      type: String,
      value: 'linear',
      notify: true
    }
  }
};
/*
    Name:
    PxVisBehavior.zoomSelection

    Description:
    Polymer behavior that provides 1 property defining how the selection should
    behave when user draw a box for zooming

    Dependencies:
    -

    @polymerBehavior PxVisBehavior.zoomSelection
*/

PxVisBehavior.zoomSelection = {
  properties: {
    /**
     *
     * The shape of selection (zoom) the user can do. Can be:
     * - 'xy': user can draw a rectangle freely
     * - 'xAxis': user can select a range within the X axis, the Y axis always
     *   being entirely selected
     * - 'yAxis': user can select a range within the Y axis, the X axis always
     *   being entirely selected
     */
    selectionType: {
      type: String,
      value: 'xy'
    }
  }
};

/*
     Name:
    PxVisBehavior.chartExtents

    Description:
    Polymer behavior that provides a chartExtents object to components.


    @polymerBehavior PxVisBehavior.chartExtents
*/


PxVisBehavior.chartExtents = {
  properties: {
    /**
    *
    *```
    *  {
    *      "x": [0,100],
    *      "y": [5,50],
    *  }
    *```
    *
    * For an ordinal dataset, chart extents can be set like this:
    *```
    *  {
    *      "x": ['low','medium','high'],
    *      "y": [5,50],
    *  }
    *```
    */
    chartExtents: {
      type: Object,
      notify: true
    }
  }
};

/*
     Name:
    PxVisBehavior.dataExtents

    Description:
    Polymer behavior that provides a dataExtents object to components.


    @polymerBehavior PxVisBehavior.dataExtents
*/


PxVisBehavior.dataExtents = {
  properties: {
    /**
    *
    *```
    *  {
    *      "x": [0,100],
    *      "y": [5,50],
    *  }
    *```
    *
    * For an ordinal dataset, chart extents can be set like this:
    *```
    *  {
    *      "x": ['low','medium','high'],
    *      "y": [5,50],
    *  }
    *```
    */
    _dataExtents: {
      type: Object,
      notify: true
    }
  }
};

/*
     Name:
    PxVisBehavior.events

    Description:
    Polymer behavior that provides config and data to manage "events" (px-vis-event) on the chart


    @polymerBehavior PxVisBehavior.events
*/

PxVisBehavior.events = {
  properties: {
    /**
     * Configuration object to define what event should map to what icon and color.
     * The object has a key being the event name, the value being a configuration object for that event. The configuration object has four properties:
     * - `color`: A valid color name found in the px-colors-design
     * - `icon`: the reference to the icon; for Font Awesome, it can be a class or a unicode value; for an image, it is a path
     * - `type`: 'fa', 'unicode', or 'image'. 'fa' and 'unicode' are font-awesome icons, 'fa' referring to the class ('fa-camera') and 'unicode' referring to the unicode value for the icon formatted as '\uf004'
     * - `offset`: a 2 element array with the number of pixels to offset the icon. offset[0] is along the x-axis; offset[1] is along the y-axis; necessary for some icons to adjust their values to achieve a better alignment over the event line.
     * - `size`: a size in pixels for images.
     *
     * ```
     * Format: {
     *   "Event-Name-A":{
     *     "color": "a color, rgb or hex",
     *     "icon": "font-awesome-class",
     *     "type": "fa",
     *     "offset":[0,0]
     *   },
     *   "Event-Name-B":{
     *     "color": "a color, rgb or hex",
     *     "icon": "unicode-of-the-font-character",
     *     "type": "unicode",
     *     "offset":[0,0]
     *   },
     *   "Event-Name-C":{
     *     "color": "a color, rgb or hex",
     *     "icon": "path-to-an-img",
     *     "type": "image",
     *     "offset":[0,0]
     *   },
     * }
     * ```
     *
     * ```
     * Example: {
     *   "Recalibrate":{
     *     "color": "rgb(0,0,255)",
     *     "icon": "fa-camera",
     *     "type": "fa",
     *     "offset":[-3,0]
     *   },
     *   "Fan start":{
     *     "color": "rgb(0,255,0)",
     *     "icon": "\uf015",
     *     "type": "unicode",
     *     "offset":[5,0]
     *   },
     *   "Fan stop":{
     *     "icon": "Dancing_banana.gif",
     *     "type": "image",
     *     "offset":[-2,-20],
     *     "size":"25"
     *    }
     * }
     *```
     *
     * @property eventConfig
     * @type Object
     */
    eventConfig: {
      type: Object
    },
    /**
     * Configuration object to define what the default icon should be. This gets used if a) no eventConfig is defined or b) the particular event is not defined in the eventConfig object.
     *
     *```
     * Default: {
     *   'color': 'grey7', //or theme var
     *   'icon': 'fa-circle',
     *   'type': 'fa',
     *   'offset': 0,
     *   'size': '16'
     * }
     *```
     *
     * @property defaultEventConfig
     * @type Object
     */
    defaultEventConfig: {
      type: Object
    },
    /**
     * Default defaultEventConfig
     *
     *```
     * Default: {
     *   'color': 'grey7',
     *   'icon': 'fa-circle',
     *   'type': 'fa',
     *   'offset': 0,
     *   'size': '16'
     * }
     *```
     *
     */
    _defaultDefaultEventConfig: {
      type: Object,
      value: function() {
        return {
          'color': 'grey7',
          'icon': 'fa-info-circle',
          'type': 'fa',
          'offset': [0,0],
          'size':'16'
        };
      }
    },
    /**
     * Defines the default lineConfig
     *
     *```
     * Default: {
     *   'color': 'grey9',
     *   'weight': 1
     * }
     *```
     *
     * @property lineConfig
     * @type Object
     */
    _lineConfigDefault: {
      type: Object,
      value:function() {
        return {
          'color': 'grey9',
          'weight': 1
        };
      }
    },
    /**
     * Defines the color and weight styles for the event line.
     *
     *```
     * Default: {
     *   'color': 'grey9', //or theme var
     *   'weight': 1
     * }
     *```
     *
     * @property lineConfig
     * @type Object
     */
    lineConfig: {
      type: Object
    },
    /**
     * Data representing the events. Example:
     * [
     *    {
     *      "id": "123",
     *      "x": 2,
     *      "label": "Recalibrate"
     *    },
     *    {
     *      "id": "456",
     *      "x": 3,
     *      "label": "Fan start"
     *    },
     *    {
     *      "id": "789",
     *      "x": 4,
     *      "label": "Fan stop"
     *    },
     *    {
     *      "id": "333",
     *      "x": 8,
     *      "label": "Default"
     *    }
     *  ]
     */
    eventData: {
      type: Array
    }
  }
};

/*
     Name:
    PxVisBehavior.thresholds

    Description:
    Polymer behavior that provides config and data to manage "thresholds" (px-vis-threshold) on the chart


    @polymerBehavior PxVisBehavior.thresholds
*/

PxVisBehavior.thresholds = {
  properties: {
    /**
     * Configuration object to define what threshold should map to what color and line style.
     * The object has a key being the threshold name, the value being a configuration object for that threshold. The configuration object has four properties:
     * - `color`: A valid color name found in the px-colors-design. If no color is supplied, then it will match the series color or fallback to a default color.
     * - `strokeWidth`: the stroke width for the line.
     * - `dashPattern`: string for the dash pattern for the line in the form of stroke,gap. `5,2` would be a 5px dash with 2px gap. `5,2,1,2` would be a 5px dash, 2px gap, 1px dash, 2px gap. '5,0' would be effectively create a solid line.
     * - `title`: The display title
     *
     *
     * ```
     * Example: {
     *   "max":{
     *     "color": "blue",
     *     "strokeWidth": "2",
     *     "dashPattern": "5",
     *     "title": "Maximum"
     *   },
     *   "avg":{
     *     "color": "green",
     *     "strokeWidth": "1",
     *     "dashPattern": "5,2,1,2",
     *     "title": "Fleet Average"
     *   },
     *   "min":{
     *     "title": "Min"
     *    }
     * }
     *```
     *
     */
    thresholdConfig: {
      type: Object,
      value: function() { return {}; }
    },
    /**
     * Configuration object to define what the default icon should be. This gets used if a) no eventConfig is defined or b) the particular event is not defined in the eventConfig object.
     *
     *```
     * Default: {
     *   'strokeWidth': '1',
     *   'dashPattern': '5,2'
     * }
     *```
     *
     */
    _defaultThresholdConfig: {
      type: Object,
      value: function() {
        return {
          'strokeWidth': '1',
          'dashPattern': '5,2'
        };
      }
    },
    /**
     * Data representing the events. Example:
     * ```
     * [
     *      { "for":"y0", "type":"max", "value":35.4784 },
     *      { "for":"y0", "type":"min", "value":7.6531 },
     *      { "for":"y0", "type":"mean", "value":15.330657585139331 },
     *      { "for":"y1", "type":"mean", "value":75 },
     *      { "for":"", "type":"quartile", "value":17 }
     *  ]
     * ```
     */
    thresholdData: {
      type: Array
    }
  }
};

/*
     Name:
    PxVisBehavior.dimensions

    Description:
    Polymer behavior that provides dimension behaviors


    @polymerBehavior PxVisBehavior.dimensions
*/

PxVisBehavior.dimensions = {
  properties: {
    /**
     * An optional dev set array to specify which dimensions to plot
     *
     */
    axes: {
      type: Array,
      notify: true
    },
    /**
    * An array of dimensions which the chart uses.
    * @private
    */
    dimensions: {
      type: Array,
      notify: true
    },
    /**
    * A string specifying which key to use as the series
    *
    */
    seriesKey: {
      type: String,
      notify: true
    },
  }
};

/*
     Name:
    PxVisBehavior.categories

    Description:
    Polymer behavior that provides categories definitions which can be used to color the series lines by category


    @polymerBehavior PxVisBehavior.categories
*/

PxVisBehavior.categories = {
  properties: {
    /**
     * A dev set string speciying which key to use as the category to use to color the series lines
     *
     */
    categoryKey: {
      type: String,
      notify: true
    },
    /**
     * A dev set array defining the categories values.
     *
     */
    categories: {
      type: Array,
      notify: true,
      value: function(){ return []; }
    }
  }
};


/*
    Name:
    PxVisBehaviorD3.commonAxis

    Description:
    Polymer behavior that provides a boolean to specify a common axis for a chart.

    Dependencies:
    - D3.js

    @polymerBehavior PxVisBehaviorD3.commonAxis
*/
PxVisBehavior.commonAxis = {
  properties: {
    /**
     * A boolean specifying if all axes should share the same range
     *
     */
    commonAxis: {
      type: Boolean,
      value: false
    }
  }
};

/*
    Name:
    PxVisBehaviorD3.tooltipOnHover

    Description:
    Polymer behavior that provides a boolean to specify whether to display a tooltip
    on hovering over a data point

    Dependencies:
    - D3.js

    @polymerBehavior PxVisBehaviorD3.tooltipOnHover
*/
PxVisBehavior.tooltipOnHover = {
  properties: {
    /**
     * A boolean specifying whether to display a tooltip
     * on hovering over a data point
     */
    tooltipOnHover: {
      type: Boolean,
      value: false
    }
  }
};

/*
    Name:
    PxVisBehaviorD3.polarData

    Description:
    Polymer behavior that provides properties used when working with polar data

    Dependencies:
    - D3.js

    @polymerBehavior PxVisBehaviorD3.polarData
*/
PxVisBehavior.polarData = {
  properties: {
    /**
     * whether the polar data should be interpreted clockwise or counter-clockwise
     */
    counterClockwise: {
      type: Boolean,
      value: false
    },
    /**
     * Whether the angle data should be processed as degrees, as opposed to be processed as radians
     */
    useDegrees: {
      type: Boolean,
      value: false
    }
  }
};

/*
    Name:
    PxVisBehavior.seriesId

    Description:
    Polymer behavior that provides seriesId property

    Dependencies:
    - D3.js

    @polymerBehavior PxVisBehavior.seriesId
*/
PxVisBehavior.seriesId = {
  properties: {
  /**
    * A unique ID for each line series
    *
    */
    seriesId:{
      type:String
    }
  }
};

/*
    Name:
    PxVisBehavior.dynamicConfigProperties

    Description:
    Polymer behavior that allows the dynamic creation of properties that will be
    searched for in the completeSeriesConfig

    Dependencies:
    - D3.js

    @polymerBehavior PxVisBehavior.dynamicConfigProperties
*/
PxVisBehavior.dynamicConfigProperties = [{
  properties: {
    /**
      * A list of the dynamic properties
      *
      */
    _dynamicProperties: {
      type: Array,
      value: function() {
        return [];
      }
    }
  },

  observers: ['_processConfig(completeSeriesConfig.*, seriesId)'],

  /**
    * Decides if it should use a default or user specified value
    *
    */
  _computeValue: function(configValue, def) {
    return (typeof configValue !== 'undefined' && configValue !== null) ?
                              configValue : def;
  },

  /**
    * sets each property listed in dynamicProperies
    *
    */
  _processConfig: function(completeSeriesConfig, seriesId) {

    var conf = this.completeSeriesConfig[this.seriesId],
        name;
    for(var i=0; i<this._dynamicProperties.length; i++) {
      name = this._dynamicProperties[i];
      this.set(name, this._computeValue(conf[name], this['_default' + name]));
    }
  },

  /**
    * Cycles through properties and adds them to dynamic properties
    *
    */
  _watchConfigProperty: function(name, defValue) {
    this.push('_dynamicProperties', name);
    this['_default' + name] = defValue;

    //if we have the config compute value now. If we don't it will be processed
    //when the config comes in
    if(this.completeSeriesConfig && this.seriesId) {
      var conf = this.completeSeriesConfig[this.seriesId]
      this[name] = this._computeValue(conf[name], defValue);
    }
  }

},PxVisBehavior.completeSeriesConfig, PxVisBehavior.seriesId];



/*
    Name:
    PxVisBehavior.radial

    Description:
    Polymer behavior that provides the radial definition

    Dependencies:
    - D3.js

    @polymerBehavior PxVisBehavior.radial
*/
PxVisBehavior.radial = {
  properties: {
    /**
     * Boolean specifying if the chart is a polar chart or a cartesian chart
     *
     */
    radial: {
      type: Boolean,
      value: false
    }
  }
};


/*
    Name:
    PxVisBehavior.forceDateTimeDisplay

    Description:
    Polymer behavior that provides the forceDateTimeDisplay definition

    Dependencies:
    - D3.js

    @polymerBehavior PxVisBehavior.forceDateTimeDisplay
*/
PxVisBehavior.forceDateTimeDisplay = {
  properties: {
    /**
     * Forces the use of the timestamp at the top
     */
    forceDateTimeDisplay: {
      type: Boolean,
      value: false
    }
  }
};

/*
    Name:
    PxVisBehavior.seriesKeys

    Description:
    Polymer behavior that provides the seriesKeys definition

    Dependencies:
    - D3.js

    @polymerBehavior PxVisBehavior.seriesKeys
*/
PxVisBehavior.seriesKeys = {
  properties: {
    /**
     *  Representes the keys avaiable in completeSeriesConfig.
     */
    seriesKeys: {
      type: Array
    }
  }
};

/*
    Name:
    PxVisBehavior.serieToRedrawOnTop

    Description:
    Polymer behavior that provides the serieToRedrawOnTop definition

    Dependencies:
    - D3.js

    @polymerBehavior PxVisBehavior.serieToRedrawOnTop
*/
PxVisBehavior.serieToRedrawOnTop = {
  properties: {
    /**
     *  Array containing a set of series to redraw on top of everything (in the order
     * they are found in this array)
     */
    serieToRedrawOnTop: {
      type: Array
    }
  },
};

/*
    Name:
    PxVisBehavior.svgDefinition

    Description:
    Polymer behavior that provides the svg property

    Dependencies:
    - D3.js

    @polymerBehavior PxVisBehavior.svgDefinition
*/
PxVisBehavior.svgDefinition = {
  properties: {
    /**
     * svg is a holder for the d3 instantiated svg container to draw to.
     * Must be set in ready and passed to all components so they know whom to draw to.
     *
     * FUTURE: when Polymer supports SVG, this only need be set on the SVG element.
     *
     * @property svg
     * @type Object
     */
    svg: {
      type: Object,
      notify:true
    }
  }
};

/*
    Name:
    PxVisBehavior.svgLowerDefinition

    Description:
    Polymer behavior that provides the svg property

    Dependencies:
    - D3.js

    @polymerBehavior PxVisBehavior.svgLowerDefinition
*/

PxVisBehavior.svgLowerDefinition = {
  properties: {
    /**
     * svg is a holder for the d3 instantiated svg container to draw to.
     * Must be set in ready and passed to all components so they know whom to draw to.
     *
     * FUTURE: when Polymer supports SVG, this only need be set on the SVG element.
     *
     * @property svg
     * @type Object
     */
    svgLower: {
      type: Object,
      notify:true
    }
  }
};

/*
    Name:
    PxVisBehavior.dynamicMenuConfig

    Description:
    Polymer behavior that provides the dynamicMenuConfig property

    @polymerBehavior PxVisBehavior.dynamicMenuConfig
*/
PxVisBehavior.dynamicMenuConfig = {
  properties: {
    /**
     *  The config used by a dynamic menu to create menu entries. Example:
     * ```
     * [
     *     {
     *      'name': 'Delete',
     *       'action': function(data) {
     *         console.log('run delete');
     *       },
     *       'actionContext': aComponent,
     *       'eventName': 'delete',
     *       'icon': 'fa-trash'
     *     },
     *     {
     *       'name': 'Bring To Front',
     *       'action': function(data) {
     *         console.log('run bring to front');
     *       },
     *       'eventName': 'bring-to-front',
     *       'icon': 'fa-arrow-up'
     *     }
     *   ];
     * ```
     *
     * - `action` is function that will be run when a menu item is clicked. You can pass
     * a specific context to be used in that function through `actionContext`. Otherwsie the
     * context is going to be the chart itself. The `data` parameter has 2 properties: `itemConfig`
     * which is this specific menu item config object and `additionalDetail` which represents the
     * register item: `value` and `name` (name is the serie id). Please note that because `itemConfig`
     * is being passed back you could tie anything to it and have it available in this function.
     * If dynamicMenuConfig is passed in directly in the HTML then `action` will have to be passed in
     * as a string with quotes escaped rather than directly as a function.
     * - `name` is the menu item displayed text
     * - if `eventName` is defined then an event with this name will be fired when clicking the item
     * the detail of this event will include `data` which ahs 2 properties: `itemConfig` and `additionalDetail`
     * just like `action` is getting. The event is fired from the chart
     * - `icon` is optional and defines a font-awesome icon to be used for the menu entry
     *
     */
    dynamicMenuConfig: {
      type: Array
    }
  }
}

/*
    Name:
    PxVisBehavior.actionConfig

    Description:
    Polymer behavior that provides the actionConfig property

    @polymerBehavior PxVisBehavior.actionConfig
*/
PxVisBehavior.actionConfig = {
  properties: {
    /**
      * Configuration used to define what actions happen on events. Each key represents an event,
      * each value can be:
      * - a predefined action found in px-vis-interaction-space `actionMapping`
      * - a function which context will be bound to the chart
      */
    actionConfig: {
      type: Object,
      notify: true,
      value: {
        'mousedown': 'startZooming',
        'mouseup': 'stopZooming',
        'mouseout': 'resetTooltip',
        'mousemove': 'calcTooltipData'
      }
    }
  }
};

/*
    Name:
    PxVisBehavior.toolbarConfig

    Description:
    Polymer behavior that provides the toolbarConfig property

    @polymerBehavior PxVisBehavior.toolbarConfig
*/
PxVisBehavior.toolbarConfig = {
  properties: {
    /**
       * Configuration object for the toolbar. This object drives what buttons are available on 
       * the toolbar and what they do. Three actions can be used out of the box by passing them
       * as keys in this config: 'zoom', 'pan' and 'tooltip'. Any other kind of actions and 
       * buttons can be defined through this object.
       * Example of a custom config:
       * ```
       * {
       *   "customzoom": {
       *     "tooltipLabel": "zoom",          //label used for the tooltip for this button
       *     "icon": "fa-search",             //font-awesome icon used for this button
       *     "buttonGroup": 1,              //if a button is part of a button group then it
       * becomes blue when clicked and all other buttons with the same button group in the 
       * same row become deselected (not blue)
       *     "selected": true,                //force this button to be selected at start
       *     "actionConfig": {                //this config will be propagated to 
       * px-vis-interaction-space
       *       "mousedown": "startZooming",   //key is an event, value is either a  
       * predefined action defined in `actionMapping` in px-vis-interaction-space or a 
       * function which context is bound to the chart
       *         "mouseup": "stopZooming",
       *         "mouseout": "null",          //by specifying null it ensures previous 
       * actions registered against this event will be removed
       *         "mousemove": "function() { console.log(\"Mouse moved on the chart!\");}"
       *       },
       *       "subConfig": {                 //subConfig allows you to defined a second row
       * of buttons which will be displayed when clicking the main button
       *         "x": {
       *           "title": "X",              //you can use a title instead of/in addition to
       * the icon
       *           "tooltipLabel": "Zoom on X axis only",
       *           "eventName": "my-custom-click", //an event will be fired when clicking on
       * this button
       *           "selectable": true,
       *           "selected": true,
       *           "onClick": "function() { this.set(\"selectionType\", \"xAxis\");}" //this 
       * function will be run when clicking the button. The chart will be the context of this 
       * function. If defined in HTML this needs to be a string, but if defined in javascript 
       * this can be a function
       *         },
       *         "y": {
       *           "title": "Y",
       *           "tooltipLabel": "Zoom on Y axis only",
       *           "selectable": true,
       *           "onClick": "function() { this.set(\"selectionType\", \"yAxis\");}"
       *         },
       *         "xy": {
       *           "title": "XY",
       *           "tooltipLabel": "Zoom on X and Y axis",
       *           "selectable": true,
       *           "onClick": "function() { this.set(\"selectionType\", \"xy\");}"
       *         },
       *         "zoomIn": {
       *           "icon": "fa-plus",
       *           "tooltipLabel": "zoom in",
       *           "eventName": "px-vis-toolbar-zoom-in" //those events are vis specific 
       * events and are automatically caught by the chart to do something
       *         },
       *         "zoomOut": {
       *           "icon": "fa-minus",
       *           "tooltipLabel": "zoom out",
       *           "eventName": "px-vis-toolbar-zoom-out"
       *         },
       *         "undoZoom": {
       *           "icon": "fa-undo",
       *           "tooltipLabel": "undo zoom",
       *           "eventName": "px-vis-toolbar-undo-zoom"
       *         },
       *         "resetZoom": {
       *           "icon": "fa-expand",
       *           "tooltipLabel": "reset zoom to inital value",
       *           "eventName": "px-vis-toolbar-reset-zoom"
       *         }
       *       }
       *     },
       *     "pan": true,           //default "out of the box" panning button
       *     "tooltip": true        //default "out of the box" tooltip button
       * ```
       */
      toolbarConfig: {
        type: Object,
        value: function() {
          return {"zoom": true, "pan": true, "tooltip": true};
        }
      }
  }
};

</script>