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


<!--
Interpreter component which creates x & y interpreters.

Interpreter components act as a converter, translating data points into their corresponding pixel coordinate. To do this, the interpreter needs to understand what type of data you have (xScale, yScale), the size of the drawing area you have (width, height, margin), and the extents of your data / domain (chartData, selectedDomain). It then returns the interpreter functions for `x` and `y` and arrays for the current domain those `x` and `y` functions are using.

##### Usage
    <px-vis-multi-scale
        width="[[width]]"
        height="[[height]]"
        margin="[[margin]]"
        axes="[[axes]]"
        chart-data="[[chartData]]"
        chart-extents="[[chartExtents]]"
        x="{{x}}"
        y="{{y}}"
        current-domain-x="{{currentDomainX}}"
        current-domain-y="{{currentDomainY}}"
        domain-changed="{{domainChanged}}">
    </px-vis-multi-scale>


##### d3 Reference
https://github.com/d3/d3/wiki/Scales

https://github.com/d3/d3/wiki/API-Reference#d3scale-scales

@element px-vis-scale
@blurb Interpreter component which creates x & y interpreters.
@homepage index.html
@demo demo.html
-->
<dom-module id="px-vis-multi-scale">
    <template>

      <content></content>
    </template>
</dom-module>

<script>
  Polymer({

    is: 'px-vis-multi-scale',

    behaviors: [
      PxVisBehaviorD3.svg,
      PxVisBehavior.sizing,
      PxVisBehaviorD3.axes,
      PxVisBehavior.dataset,
      PxVisBehavior.commonMethods,
      PxVisBehaviorD3.selectedDomain,
      PxVisBehavior.axisTypes,
      PxVisBehavior.chartExtents,
      PxVisBehavior.dimensions,
      PxVisBehaviorD3.domainUpdate
    ],

    /**
     * Properties block, expose attribute values to the DOM via 'reflect'
     *
     * @property properties
     * @type Object
     */
    properties: {
    },

    observers: [
      '_setXScale(width,margin)',
      '_setYScale(height,margin,axes)',
      '_currentDomain(x,y,chartExtents)'
    ],
    /**
    * when attached, re-fire set properties for precipitation pattern
    *
    * @method attached
    */
    attached: function(){
      if(this._doesObjHaveValues(this.x)){
        this.fire('px-vis-x-updated', { 'dataVar': 'x', 'data': this.x, 'method':'set' });
      }

      if(this._doesObjHaveValues(this.y)){
        this.fire('px-vis-y-updated', { 'dataVar': 'y', 'data': this.y, 'method':'set' });
      }

      if(this._doesObjHaveValues(this.currentDomainX)){
        this.fire('px-vis-current-domain-x-updated', { 'dataVar': 'currentDomainX', 'data': this.currentDomainX, 'method':'set' });
      }

      if(this._doesObjHaveValues(this.currentDomainY)){
        this.fire('px-vis-current-domain-y-updated', { 'dataVar': 'currentDomainY', 'data': this.currentDomainY, 'method':'set' });
      }

      if(this.domainChanged){
        this.fire('px-vis-domain-changed-updated', { 'dataVar': 'domainChanged', 'data': this.domainChanged, 'method':'set' });
      }
    },

    /**
     *  Sets the x scale to a single ordinal scale
     *
     * @method _setXScale
     */
    _setXScale: function(width,margin) {
      var w = Math.max(width - margin.left - margin.right,0),
          range = [0, w];

      if(this.x) {
        var oldDomain = this.x.domain();
        this.x = Px.d3.scalePoint().range(range).domain(oldDomain).padding(0.5);
      } else {
        this.x = Px.d3.scalePoint().range(range).padding(0.5);
      }

      this.notifyPath('x.range', this.x.range);
      this.fire('px-vis-x-updated', { 'dataVar': 'x', 'data': this.x, 'method':'set' });
    },

    /**
     * Sets the y scale to multiple linear scales
     *
     * @method _setYScale
     */
    _setYScale: function(height,margin,axes) {
      var h = Math.max(height - margin.top - margin.bottom,0),
          range = [h, 0],
          newY = {};// y is an object with multiple scales

      // iterate through the axes and create a scale for each; set them in the y obj with the axes as keys so we can easily access them again later
      for(var i = 0; i < axes.length; i++){
        newY[axes[i]] = Px.d3.scaleLinear().nice().range(range);
      }

      this.set('y', newY);
      this.fire('px-vis-y-updated', { 'dataVar': 'y', 'data': this.y, 'method':'set' });
    },

    /**
     * Calculates and Sets the x and y domain after data loads
     *
     * https://github.com/mbostock/d3/wiki/API-Reference
     *
     * @method _currentDomain
     */
     _currentDomain: function() {
      // check to make sure there is data
      if(this._doesObjHaveValues(this.x) &&
      this._doesObjHaveValues(this.y) && this._doesObjHaveValues(this.chartExtents)){

        var dims = this.chartExtents.x
            exts = this.chartExtents;

        for(var i = 0; i < dims.length; i++){
          if(!this.y[dims[i]]) {
            return;
          }
          this.y[dims[i]].domain(exts.y[dims[i]]);
        }
        this.x.domain(exts.x);

        // Set the domains
        if(this.x.domain().length > 0 && dims.length > 0){
          this.set('currentDomainX', this.x.domain());
          this.set('currentDomainY', this.y[dims[0]].domain());

          this.fire('px-vis-current-domain-x-updated', { 'dataVar': 'currentDomainX', 'data': this.currentDomainX, 'method':'set' });
          this.fire('px-vis-current-domain-y-updated', { 'dataVar': 'currentDomainY', 'data': this.currentDomainY, 'method':'set' });

        } else {

          this.set('currentDomainX', []);
          this.set('currentDomainY', []);

          this.fire('px-vis-current-domain-x-updated', { 'dataVar': 'currentDomainX', 'data': this.currentDomainX, 'method':'set' });
          this.fire('px-vis-current-domain-y-updated', { 'dataVar': 'currentDomainY', 'data': this.currentDomainY, 'method':'set' });
        }

        this.set('domainChanged', (this.domainChanged === null) ? true : !this.domainChanged);
        this.fire('px-vis-domain-changed-updated', { 'dataVar': 'domainChanged', 'data': this.domainChanged, 'method':'set' });
      }
    }
  });
</script>