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


<!--
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-radial-scale
        width="[[_minDim]]"
        margin="[[margin]]"
        amplitude-keys="[[dimensions]]"
        chart-data="[[chartData]]"
        chart-extents="[[chartExtents]]"
        x="{{x}}"
        y="{{y}}"
        current-domain-x="{{currentDomainX}}"
        current-domain-y="{{currentDomainY}}"
        center-offset="[[centerOffset]]">
    </px-vis-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-radial-scale">
    <template>
      <content></content>
    </template>
</dom-module>

<script>
  Polymer({

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

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

    /**
     * Properties block, expose attribute values to the DOM via 'reflect'
     *
     * @property properties
     * @type Object
     */
    properties: {
      /**
      * Array of the amplitude keys
      *
      */
      amplitudeKeys: {
        type: Array,
        notify: true
      },
      /**
      * Holder for the calculated extents
      *
      */
      _calculatedExtents: {
        type: Object,
        notify: true
      }
    },

    observers: [
      '_setXScale(width)',
      '_setYScale(width,margin,centerOffset)',
      '_generateChartExtents(chartData.*, amplitudeKeys)',
      '_generateChartExtents(chartExtents)',
      '_currentDomain(x, y, _calculatedExtents)'
    ],
    /**
    * 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() {
        var range = [0, 2 * Math.PI],
            x;

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

        this.set('x',x);
        this.notifyPath('x.range', 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(width,margin,centerOffset) {
      var range = [centerOffset, width],
          y = Px.d3.scaleLinear().nice().range(range);

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

    /**
     * Find overall data max and min
     *
     */
    _generateChartExtents: function() {
      if(this.chartData && this.chartData.length > 0 && this.amplitudeKeys && this.amplitudeKeys.length > 0) {
        var ext = {
              "x": this.amplitudeKeys,
              "y": (this.chartExtents && this.chartExtents.y) ? this.chartExtents.y : null
            },
            min = Infinity,
            max = -Infinity;

        if(!ext.y) {
          // go through all data and find min and max
          for(var i = 0; i < this.amplitudeKeys.length; i++){
            for(var j = 0; j < this.chartData.length; j++){
              if(this._isValidData(this.chartData[j][this.amplitudeKeys[i]])) {
                min = Math.min(min, this.chartData[j][this.amplitudeKeys[i]]);
                max = Math.max(max, this.chartData[j][this.amplitudeKeys[i]]);
              }
            }
          }

          // if all data is the same value, add 1 so we still get a range
          if(min === max){
            max += 1;
          }

          ext.y = [min,max];
        }

        this.set('_calculatedExtents',ext);
      }
    },

    /**
     * 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._calculatedExtents)){

        var exts = this._calculatedExtents;

        this.x.domain(exts.x);
        this.y.domain(exts.y);

        // Set the domains
        this.set('currentDomainX', this.x.domain());
        this.set('currentDomainY', this.y.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>