px-vis-cursor.html

<link rel="import" href="../polymer/polymer.html"/>
<link rel="import" href="px-vis-behavior-common.html" />
<link rel="import" href="px-vis-behavior-d3.html" />
<link rel="import" href="../px-colors-design/colors.html" />


<!--
Element which draws crosshairs around mouse pointer / data points and highlight adjacent datapoints.
- Uses tooltipData property.

##### Usage

    <px-vis-cursor
        svg="[[svg]]"
        width="[[width]]"
        height="[[height]]"
        margin="[[margin]]"
        chart-data="[[chartData]]"
        horizontal-line="none"
        tooltip-data="[[tooltipData]]">
    </px-vis-cursor>

@element px-vis-cursor
@blurb Element which draws crosshairs around mouse pointer / data points and highlight adjacent datapoints.
@homepage index.html
@demo demo.html

TODO implement a dev setting to choose between only showing data at that x, snapping to nearest data, or interpolating value at x

-->

<link rel="import" href="css/px-vis-styles.html">

<dom-module id="px-vis-cursor">
    <template>
      <style include="px-vis-styles"></style>


    </template>
</dom-module>

<script>
  Polymer({

    is: 'px-vis-cursor',

    behaviors: [
      PxVisBehavior.sizing,
      PxVisBehaviorD3.svg,
      PxVisBehaviorD3.axes,
      PxVisBehavior.dataset,
      PxVisBehavior.commonMethods,
      PxVisBehavior.tooltipData,
      PxVisBehavior.completeSeriesConfig,
      PxVisBehaviorD3.clipPath,
      PxColorsBehavior.baseColors,
      PxVisBehavior.mutedSeries,
      PxVisBehavior.dynamicConfigProperties
    ],

    /**
     * Properties block, expose attribute values to the DOM via 'reflect'
     *
     * @property properties
     * @type Object
     */
    properties: {
      /**
       * Holder for the cursor drawing objects
       *
       * @property _cursor
       * @type Object
       */
      _cursor:{
        type:Object
      },
      /**
       * Holder for the vertical line drawing object
       *
       * @property _vLine
       * @type Object
       */
      _vLine:{
        type:Object
      },
      /**
       * Holder for the horizonal line drawing objects
       *
       * @property _hLines
       * @type Object
       */
      _hLines:{
        type:Object
      },
      /**
       * Holder for the tooltip circle drawing objects
       *
       * @property _circles
       * @type Object
       */
      _circles:{
        type:Object
      },
      /**
       * Object used to build the horizontal lines
       */
      _hLinesBuilder: {
        type: Object
      },
      /**
       * Draws a horizontal line through the point. Valid entries:
       * - full
       * - none
       * - left
       * - right
       *
       * <px-vis-tooltip horizontal-line="left" ...></px-vis-tooltip>
       *
       * @property horizontalLine
       * @type String
       * @default full
       */
      horizontalLine:{
        type:String,
        value:'full'
      },
      /**
       * Draws a vertical line through the point. Valid entries:
       * - full
       * - none
       * - bottom
       * - top
       *
       * <px-vis-tooltip vertical-line='bottom' ...></px-vis-tooltip>
       *
       * @property verticalLine
       * @type String
       * @default bottom
       */
      verticalLine:{
        type:String,
        value:'full'
      },
      /**
       * Draws a circle at the through the point. Valid entries:
       * - yes
       * - no
       *
       * <px-vis-tooltip circle-point="no" ...></px-vis-tooltip>
       *
       * @property circlePoint
       * @type String
       * @default yes
       */
      circlePoint:{
        type:String,
        value:'yes'
      },
      /**
       * the opacity value of the fill to be used when muting a serie (stroke is not drawn on mute)
       * This property will be read from the completeSeriesConfig
       */
      mutedOpacity: {
        type: Number
      },
    }, //properties

    observers: [
      'drawElement(svg,chartData.*,completeSeriesConfig.*, width, height)',
      '_cursorChange(tooltipData.*,_cursor)',
      '_addClipPath(clipPath)',
      '_processOpacity(mutedSeries.*, completeSeriesConfig)'
    ],
    ready: function() {
      this._watchConfigProperty('mutedOpacity', 0.3);
    },
    /**
     * Draws the tooltip elements and sets up listeners and callbacks on chart hover
     * Sets the tooltipData property which gets passed to the register.
     *
     * @method drawElement
     */
    drawElement: function() {
      // add circle to the line and hide it
      if(!this._cursor) {
        this._cursor = this.svg.append('g')
            .attr('display', 'none');
      }

      // TODO add a cursor option for horizontal?
      if(this.horizontalLine !== 'none') {
        // append the x line
        this._hLinesBuilder = this._cursor.selectAll('line.xline')
          .data(Object.keys(this.completeSeriesConfig));

        this._hLinesBuilder.exit().remove();

        this._hLines = this._hLinesBuilder
          .enter()
            .append('line')
            .attr('class', 'xline')
            .attr('stroke', this._checkThemeVariable("--px-vis-cursor-line-color", this.colors.gray5))
            .attr('stroke-dasharray', '3,3')
            .attr('opacity', 1)
            .attr('x1', 0)
          .merge(this._hLinesBuilder)
            .attr('x2', this.width);
      }

      if(this.verticalLine !== 'none') {
        // append the y line
        if(!this._vLine) {
          this._vLine = this._cursor
            .append('line')
            .attr('class', 'yline')
            .attr('stroke', this._checkThemeVariable("--px-vis-cursor-line-color", this.colors.gray5))
            .attr('stroke-dasharray', '3,3')
            .attr('opacity', 1)
            .attr('y1', 0)
            .attr('y2', this.height);
        } else {
          //just update the size
          this._vLine.attr('y2', this.height);
        }

      }

      if(this.circlePoint === 'yes') {
        // append the circle
        this._circles = this._cursor.selectAll('circle.tooltipPoint')
          .data(Object.keys(this.completeSeriesConfig));

        this._circles.exit().remove();

        this._circles
          .enter()
            .append('circle')
            .attr('class', 'tooltipPoint')
            .attr('r', 3)
            .attr('stroke-width', 12)
            .attr('stroke-opacity', 0.3)
          .merge(this._circles)
            .attr('fill', (function(d) {
              return this.completeSeriesConfig[d]['color']
            }).bind(this))
            .attr('stroke', (function(d) {
              return this.completeSeriesConfig[d]['color']
            }).bind(this));

          this._circles = this._cursor.selectAll('circle.tooltipPoint');

      }

      this._addClipPath();
      this._processOpacity();

    },  //drawElement
    /**
     * Function called by observer
     * Determins if the cursor should be shown or hidden
     *
     * @method _cursorChange
     */
    _cursorChange: function() {
      if(!this._isD3Empty(this._cursor)) {
        if(this.tooltipData.mouse === null) {
          this._hideCursor();
        } else {
          this._showCursor();
          this._moveCursor();
        }
      }
    },
    /**
     * Helper function called on mouseover
     * Shows the cursor elements
     *
     * @method _showCursor
     */
    _showCursor:function() {
      this._cursor.attr('display', null);
    },

    /**
     * Helper function called on mouseout
     * Hides the cursor elements
     *
     * @method _hideCursor
     */
    _hideCursor: function() {
      this._cursor.attr('display', 'none');
    },

    /**
     * Helper function called on mousemove
     * Moves the cursor elems to their proper location
     *
     * @method _moveCursor
     */
    _moveCursor:function() {
      // move the circles into position
      if(this.circlePoint === 'yes') {
        // this._circles.attr('transform', function(d,i) {
        //   return 'translate(' + this.tooltipData.series[i]['coord'][0] + ',' + this.tooltipData.series[i]['coord'][1] + ')'
        this._circles.attr('cx', function(d,i) {
          if(!isNaN(this.tooltipData.series[i]['coord'][0])) {
            return this.tooltipData.series[i]['coord'][0];
          } else {
            return '';
          }
        }.bind(this))
        .attr('cy', function(d,i) {
          if(!isNaN(this.tooltipData.series[i]['coord'][1])) {
            return this.tooltipData.series[i]['coord'][1];
          } else {
            return '';
          }
        }.bind(this));
      }

      // move the horizontal lines into position
      if(this.horizontalLine === 'full') {
        this._hLines
          .attr('y1', function(d,i) {
            return this.tooltipData.series[i]['coord'][1] ? this.tooltipData.series[i]['coord'][1] : '';
          }.bind(this))
          .attr('y2', function(d,i) {
            return this.tooltipData.series[i]['coord'][1] ? this.tooltipData.series[i]['coord'][1] : '';
          }.bind(this));

      } else if(this.horizontalLine === 'left') {
        this._hLines
          .attr('x2', function(d,i) {
            return this.tooltipData.series[i]['coord'][0] ? this.tooltipData.series[i]['coord'][0] : '';
          }.bind(this))
          .attr('y1', function(d,i) {
            return this.tooltipData.series[i]['coord'][1] ? this.tooltipData.series[i]['coord'][1] : '';
          }.bind(this))
          .attr('y2', function(d,i) {
            return this.tooltipData.series[i]['coord'][1] ? this.tooltipData.series[i]['coord'][1] : '';
          }.bind(this));

      } else if(this.horizontalLine === 'right') {
        this._hLines
          .attr('x1', function(d,i) {
            return this.tooltipData.series[i]['coord'][0] ? this.tooltipData.series[i]['coord'][0] : '';
          }.bind(this))
          .attr('y1', function(d,i) {
            return this.tooltipData.series[i]['coord'][1] ? this.tooltipData.series[i]['coord'][1] : '';
          }.bind(this))
          .attr('y2', function(d,i) {
            return this.tooltipData.series[i]['coord'][1] ? this.tooltipData.series[i]['coord'][1] : '';
          }.bind(this));

      }

      /*
        Move the vertical line into position;
        If bottom, just take the lowest datapoint
        If top, take the highest
      */
      if(this.verticalLine === 'full') {
        this._vLine.attr('transform','translate(' + this.tooltipData.mouse[0] + ',0)');
      } else if(this.verticalLine === 'bottom') {
        var maxY = Px.d3.max(this.tooltipData.yArr);
        this._vLine.attr('transform','translate(' + this.tooltipData.xArr[this.tooltipData.yArr.indexOf(maxY)] + ',' + maxY + ')');
      } else if(this.verticalLine === 'top') {
        var minY = Px.d3.min(this.tooltipData.yArr);
        this._vLine.attr('transform','translate(' + this.tooltipData.xArr[this.tooltipData.yArr.indexOf(minY)] + ',' + minY + ')')
          .attr('y2', -this.height);
      }
    }, //mousemove

    _addClipPath: function() {
      if(this.clipPath) {
        if(this.verticalLine !== 'none' && this._vLine) {
          this.addClipPath(this._vLine);
        }

        if(this.horizontalLine !== 'none' && this._hLines) {
          var hl = this._hLines.nodes();
          for(var i = 0; i < hl.length; i++){
            this.addClipPath(Px.d3.select(hl[i]));
          }
        }

        if(this.verticalLine !== 'none' && this._circles) {
          this.addClipPath(this._circles);
        }
      }
    },

    _processOpacity: function() {
      var allMuted = true,
          keys = Object.keys(this.completeSeriesConfig),
          vLineOpacity,
          _this = this,
          isMultiSerie = keys.length > 1;

      for(var i=0; i<keys.length; i++) {
        if(!this.mutedSeries[keys[i]]) {
          allMuted = false;
          break;
        }
      }

      if(this._vLine) {
        //should we average all muted opacities for all series?
        this._vLine.attr('opacity', allMuted ? this._defaultmutedOpacity : 1);
      }
      
      if(this._hLines) {
        this._hLines.each(function(d) {
          var muted = _this.mutedSeries && _this.mutedSeries[d] === true,
              opacity;

          if(muted) {
            opacity = _this.completeSeriesConfig[d].mutedOpacity ? _this.completeSeriesConfig[d].mutedOpacity : _this._defaultmutedOpacity;
          } else {
            opacity = 1;
          }

          this.setAttribute('opacity', opacity);
        });
      }
      
      if(this._circles) {
        this._circles.each(function(d) {
          var muted = _this.mutedSeries && _this.mutedSeries[d] === true,
              mutedOpacity,
              opacity,
              strokeOpacity;

          if(muted) {
            mutedOpacity = _this.completeSeriesConfig[d].mutedOpacity ? _this.completeSeriesConfig[d].mutedOpacity : _this._defaultmutedOpacity;
          } else {
            mutedOpacity = 1;
          }

          opacity = muted ? mutedOpacity * 1 : 1,
          strokeOpacity = muted ? mutedOpacity * 0.3 : 0.3;

          this.setAttribute('opacity', opacity);
          this.setAttribute('stroke-opacity', strokeOpacity);
        });
      }
      //var multiplier = 
    }
  });
</script>