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


<!--

FIXME STARTED BUT ABANDONED. MAY OR MAY NOT WORK AT THIS POINT.

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-radial-scale
        width="[[width]]"
        height="[[height]]"
        margin="[[margin]]"
        dimensions="[[dimensions]]"
        chart-data="[[chartData]]"
        complete-series-config="[[completeSeriesConfig]]"
        chart-extents="[[chartExtents]]"
        x="{{x}}"
        y="{{y}}"
        current-domain-x="{{currentDomainX}}"
        current-domain-y="{{currentDomainY}}">
    </px-vis-multi-radial-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-radial-scale">
    <template>
      <content></content>
    </template>
</dom-module>

<script>
  Polymer({

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

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

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

    observers: [
      '_setXScale(width)',
      '_setYScale(width,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, radial scale
     *
     * @method _setXScale
     */
    _setXScale: function() {
    //  this.debounce('setXScale', function() {

        var range = [0, 2 * Math.PI];

        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' });
  //    }.bind(this), 5);
    },
    /**
     * Sets the y scale to multiple linear scales
     *
     * @method _setYScale
     */
    _setYScale: function(width,axes) {
    //  this.debounce('setYScale', function() {

        var range = [20, Math.max(width - 20, 20)],
            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' });
   //   }.bind(this), 5);
    },

    _getDataExtents: function(d,yKeysArr){
      var a = [];
      for(var i = 0; i < yKeysArr.length; i++){
        var key = yKeysArr[i];
        a.push(d[this.completeSeriesConfig[key]['y']]);
      }
      return [ Math.min.apply(null,a),Math.max.apply(null,a) ];
    },

    /**
     * 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.dimensions
            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
        this.set('currentDomainX', this.x.domain());
        this.set('currentDomainY', this.y[dims[0]].domain());
        this.set('domainChanged', (this.domainChanged === null) ? true : !this.domainChanged);

        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.fire('px-vis-domain-changed-updated', { 'dataVar': 'domainChanged', 'data': this.domainChanged, 'method':'set' });
      }
    }
  });
</script>