px-vis-scatter.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" />

<!--
Element which draws scatter series onto the chart

##### Usage

    <px-vis-scatter
        svg="[[svg]]"
        clip-path="[[clipPath]]"
        series-id="[[item.name]]"
        series-number="[[index]]"
        chart-data="[[item]]"
        x="[[x]]"
        y="[[y]]"
        current-domain-x="[[currentDomainX]]"
        current-domain-y="[[currentDomainY]]"
        domain-changed="[[domainChanged]]"
        muted-series="[[mutedSeries]]">
    </px-vis-scatter>

@element px-vis-scatter
@blurb Element which draws lines series onto the chart
@homepage index.html
@demo demo.html
-->

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

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


  </template>
</dom-module>

<script>
  Polymer({

    is: 'px-vis-scatter',

    behaviors: [
      PxVisBehaviorD3.svg,
      PxVisBehaviorD3.axes,
      PxVisBehavior.dataset,
      PxVisBehavior.mutedSeries,
      PxVisBehavior.commonMethods,
      PxVisBehaviorD3.clipPath,
      PxVisBehavior.completeSeriesConfig,
      PxVisBehaviorD3.radialLineGenerator,
      PxVisBehavior.tooltipData,
      PxVisBehaviorD3.domainUpdate,
      PxVisBehavior.polarData,
      PxVisBehavior.seriesId,
      PxVisBehavior.dynamicConfigProperties,
      PxVisBehaviorD3.serieToRedrawOnTopSVG,
      PxColorsBehavior.baseColors
    ],

    /**
     * Properties block, expose attribute values to the DOM via 'reflect'
     *
     * @property properties
     * @type Object
     */
    properties: {
      /**
       * An index of the series used for calculating its color
       *
       * @property scatterNumber
       * @type String
       */
      seriesNumber:{
        type:Number,
        value:0
      },
      /**
       * Maps dev input markers to d3 symbols
       *
       */
      _markerMapping: {
        type: Object,
        readOnly: true,
        value: {
          'circle': Px.d3.symbolCircle,
          'cross': Px.d3.symbolCross,
          'diamond': Px.d3.symbolDiamond,
          'square': Px.d3.symbolSquare,
          'triangle-up': Px.d3.symbolTriangle,
          'star': Px.d3.symbolStar,
          'wye': Px.d3.symbolWye
        },
        /**
         * The symbol used for the marker. Supported symbols:
         * - 'circle'
         * - 'cross'
         * - 'diamond'
         * - 'square'
         * - 'triangle-up'
         * - 'star'
         * - 'wye'
         * more info at https://github.com/d3/d3-shape/blob/master/README.md#symbols
         * This property will be read from the completeSeriesConfig
         */
        markerSymbol: {
          type: String
        },
        /**
         * Scales the size of the scatter marker
         * This property will be read from the completeSeriesConfig
         */
        markerScale: {
          type: Number
        },
        /**
         * the size of the markers
         * This property will be read from the completeSeriesConfig
         */
        markerSize: {
          type: Number
        },
        /**
         * The opacity of the fill (inside) of the marker
         * This property will be read from the completeSeriesConfig
         */
        markerFillOpacity: {
          type: Number
        },
        /**
         * The opacity of the stroke (outside) of the marker
         * This property will be read from the completeSeriesConfig
         */
        markerStrokeOpacity: {
          type: Number
        },
        /**
         * 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
        },
      },
      /**
       * A holder object for the series group
       *
       * @property scatterGroup
       * @type Object
       */
      scatterGroup:{
        type:Object,
        value: function() {return{};}
      },
      /**
       * A holder object for the series objects
       *
       */
      scatterDots:{
        type:Object
      },
      /**
       * A holder object for the series builder
       *
       */
      scatterBuilder: {
        type: Object
      },
      /**
       * Whether the scatter plot is using radial coiordinates (x=phase, y=amplitude)
       */
      radial: {
        type: Boolean,
        value: false
      },
      /**
       * Name of the variable holding the time stamp in the data. Used for non timeseries charts
       */
      timeData: {
        type: String,
        value: 'Timestamp'
      },
    },

    observers: [
      'drawElement(svg, domainChanged, chartData.*, completeSeriesConfig.*, radial, counterClockwise,markerSymbol, markerScale, markerSize, markerFillOpacity, markerStrokeOpacity)',
      'isIdInMuted(mutedSeries.*)',
      '_addClipPath(clipPath)',
      '_drawOnTop(serieToRedrawOnTop)'
     ],

    ready:function() {
      //generate properties dynamically
      this._watchConfigProperty('markerSymbol', 'circle');
      this._watchConfigProperty('markerScale', 1);
      this._watchConfigProperty('markerSize', 64);
      this._watchConfigProperty('markerFillOpacity', 0.6);
      this._watchConfigProperty('markerStrokeOpacity', 1);
      this._watchConfigProperty('mutedOpacity', 0.3);
    },
    detached: function() {
     this.scatterGroup.remove();
    },
    /**
     * Draws or updates the scatter element.
     * Called from an observer watching for data and the necessary d3 objects
     *
     * @method drawElement
     */
    drawElement: function() {
      if(typeof this.domainChanged !== 'undefined' && this.domainChanged !== null) {
        var data = this.chartData;

        // checks to see if the group already exists. If not, create; if so, update
        if(this._isObjEmpty(this.scatterGroup)) {

          // draw the path
          this.scatterGroup = this.svg.append('g')
            .attr('series-id', 'scatter_' + this.seriesId)
            .attr('class', 'series-scatter');

          //send empty tooltip data so the register shows up
          this._hideTooltip();
        }

        if(this.radial) {
          this._defineRadialLine(false, this.multiPath, this.counterClockwise, this.useDegrees);
        }

        var _this = this;

        this.scatterBuilder = this.scatterGroup.selectAll('path.symbol')
          .data(data);

          this.scatterGroup.on('mousedown', function() {
            console.log('SCATTER GROUP MOUSE DOWN')
          })

        this.scatterBuilder.exit().remove();

        this.scatterBuilder.enter()
          .append('path')
          .attr('class', 'symbol')
          .on('mouseover', this._mouseEnterSymbol.bind(this))
          .on('mouseleave', this._mouseLeaveSymbol.bind(this))
          .on('mousedown', function() {
            console.log('SCATTER MOUSE DOWN')
          })
        .merge(this.scatterBuilder)
          .attr('d', Px.d3.symbol().type(this._markerMapping[this.markerSymbol]).size(this.markerSize))
          .attr('transform', this._applyTransform.bind(this))
          .each(function(d,i) {
            // if this series is missing a datapoint, remove that point
            if(!_this._isValidData(d[_this.completeSeriesConfig[_this.seriesId]['y']])) {
              this.remove();
            }
          });

        this.scatterDots = this.scatterGroup.selectAll('path.symbol');

        this._colorScatter();

        this._addClipPath();
      }
    },

    /**
     * Mouseevent when mouse enters
     *
     */
    _mouseEnterSymbol: function(d, i, paths) {
      this._showTooltip(d, i, paths);
      if(!this.mutedSeries[this.seriesId]) {

      //if radial make sur eon hover we have 100% opacity
      Px.d3.event.currentTarget.setAttribute('fill-opacity', 1);
      }
    },
    /**
     * generates tooltipData
     */
    _showTooltip: function(d, i, paths) {

      // setup a holder for our data to pass out
      var dataObj = {
        'time': d[this.timeData],
        'series': [],
        'mouse': [],
        'xArr': null,
        'yArr': null
      },
      values = {},
      xKey = this.completeSeriesConfig[this.seriesId].x,
      yKey = this.completeSeriesConfig[this.seriesId].y,
      box = paths[i].getBoundingClientRect(),
      center = [window.pageXOffset + box.left + box.width/2, window.pageYOffset + box.top + box.height/2];

      //TODO: boolean to convert this to radians if someone wants radians in their tooltip
      values[xKey] = d[xKey];
      values[yKey] = d[yKey];

      dataObj.series.push({'name': this.seriesId, 'value': values});

      this.set('tooltipData',dataObj);
      this.fire('px-vis-tooltip-updated', { 'dataVar': 'tooltipData', 'data': dataObj, 'method':'set' });
      this.fire('px-vis-scatter-request-tooltip', {'show': true, 'mouseCoords': center});
    },
    /**
     * Mousevent on leave
     */
    _mouseLeaveSymbol: function(d) {
      this._hideTooltip(d);

      if(!this.mutedSeries[this.seriesId]) {

        //if radial make sur eon hover we have 100% opacity
        Px.d3.event.currentTarget.setAttribute('fill-opacity', this.markerFillOpacity);
      }
    },

    /**
     * Resets tooltipData
     */
    _hideTooltip: function(d) {
      var dataObj = {
        'time': null,
        'series': [{'name': this.seriesId, 'value':null}],
        'mouse': [],
        'xArr': null,
        'yArr': null
      };
      this.set('tooltipData',dataObj);
      this.fire('px-vis-tooltip-updated', { 'dataVar': 'tooltipData', 'data': dataObj, 'method':'set' });
      this.fire('px-vis-scatter-request-tooltip', {'show': false});
    },

    /**
     * Helper to call addClipPath with the elem
     *
     * @method _addClipPath
     */
    _addClipPath: function() {
      this.addClipPath(this.scatterGroup);
    },

    /**
     * Checks mutedSeries to see if this ID is in there
     * Called from an observer watching mutedSeries
     *
     * @method isIdInMuted
     */
    isIdInMuted: function() {
      if(this.mutedSeries.hasOwnProperty(this.seriesId)){

        this._colorScatter();
      }
    },

    /**
     * Applies the necessary translate and scale to the scatterDots
     *
     */
    _applyTransform: function(d) {

      if(!this._isValidData(d[this.completeSeriesConfig[this.seriesId]['y']])) {
        return '';
      }

      if(this.radial) {

        var coors = this.line([d]).slice(1).slice(0, -1);
        return 'translate(' + coors + ')' + ' scale(' + this.markerScale + ')';
      } else {

        var xTrans,
            yTrans;

        if(this._isValidData(d[this.completeSeriesConfig[this.seriesId]['x']])) {
          xTrans = this.x(d[this.completeSeriesConfig[this.seriesId]['x']]);
        }
        if(this._isValidData(d[this.completeSeriesConfig[this.seriesId]['y']])) {
          yTrans = this.y(d[this.completeSeriesConfig[this.seriesId]['y']]);
        }

        //make sure we have a value
        xTrans = xTrans ? xTrans : 0;
        yTrans = yTrans ? yTrans : 0;

        return 'translate(' + xTrans + ',' + yTrans + ')' + ' scale(' + this.markerScale + ')';
      }
    },

    /**
     * Adds full color to the scatters.
     *
     * @method _colorScatter
     */
    _colorScatter:function() {
      var index = this.seriesNumber,
          muted = this.mutedSeries[this.seriesId];
      this.scatterDots
        .attr('fill',this.completeSeriesConfig[this.seriesId]['color'])
        .attr('fill-opacity', muted ? this.mutedOpacity : this.markerFillOpacity)
        .attr('stroke',this.completeSeriesConfig[this.seriesId]['color'])
        .attr('stroke-opacity', muted ? 0 : this.markerStrokeOpacity);
    },
    /**
     * Redraw this serie on top if needed
     */
    _drawOnTop: function(serieToRedrawOnTop) {
      if(this.scatterGroup && this.seriesId) {
        this._drawSVGOnTop(serieToRedrawOnTop, this.seriesId, this.scatterGroup);
      }
    }
  });
</script>