px-vis-multi-axis.html

<!--
Copyright (c) 2018, General Electric

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<link rel="import" href="../polymer/polymer.html"/>
<link rel="import" href="px-vis-behavior-common.html" />
<link rel="import" href="px-vis-behavior-chart.html" />
<link rel="import" href="px-vis-behavior-d3.html" />
<link rel="import" href="px-vis-interactive-axis.html"/>
<link rel="import" href="css/px-vis-styles.html">

<!--

### Usage

    <px-vis-multi-axis
        svg="[[svg]]"
        width="[[width]]"
        height="[[height]]"
        margin="[[margin]]"
        offset="[[_offset]]"
        length="[[_minDim]]"
        x="[[x]]"
        y="[[y]]"
        complete-series-config="{{completeSeriesConfig}}"
        series-key="[[seriesKey]]"
        chart-data="[[chartData]]"
        dimensions="[[dimensions]]"
        axes="[[axes]]"
        redraw-series="true"
        stroke-width="2"
        match-ticks="[[matchTicks]]"
        grid-ticks="{{gridTicks}}"
        grid-axis="{{gridAxis}}"
        common-axis="[[commonAxis]]"
        truncation-length="[[truncationLength]]"
        displayed-values="{{displayedValues}}"
        append-unit-in-title
        domain-changed="[[domainChanged]]"
        axis-groups="{{axisGroups}}"
        radial
        single-domain
        label-position="inline"
        label-one-axis
        axis-color="salmon"
        ticks="[[ticks]]"
        label-rotation="180"
        brush-to-remove="[[brushToRemove]]"
        center-offset="[[centerOffset]]"
        drawn-tick-values="{{drawnTickValues}}"
        title-type-size="15"
        label-type-size="12">
    </px-vis-multi-axis>

### d3 reference
https://github.com/mbostock/d3/wiki/SVG-Axes

### Styling
The following custom properties are available for styling:

Custom property | Description
:----------------|:-------------
  `--px-vis-font-family` | The font family for all labels and text
  `--px-vis-axis-color` | The color for the axis lines, axis ticks, and axis tick labels
  `--px-vis-axis-title-color` | The color for the axis title
  `--px-vis-axis-inline-title-color` | The color for the axis title
  `--px-vis-axis-inline-type-color` | The color for the axis lines, axis ticks, and axis tick labels when using 'inline' labelPosition
  `--px-vis-axis-inline-box-color` | The color for the tick boxes when using 'inline' labelPosition


@element px-vis-axis
@blurb d3 element creating an axis for the chart
@homepage index.html
@demo demo.html
-->

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

      <!-- don't bind domain changed since other props already depend on it, avoiding drawing each axis twice-->
      <!-- don't double bind drawnTickValues or each axis update will trigger multi axis to reset the prop on every axis. Use event instead-->
      <template id="bof" is="dom-repeat" items="[[_internalDimensions]]" >
        <px-vis-interactive-axis
          id="ia_[[item]]"
          prevent-initial-drawing="[[preventInitialDrawing]]"
          class="multiAxis"
          svg="[[svg]]"
          x="[[x]]"
          y="[[_returnY(item, _internalDimensionsChanged)]]"
          category-key="[[categoryKey]]"
          dimension="[[item]]"
          axes="[[axes]]"
          dimensions="[[dimensions]]"
          series-key="[[seriesKey]]"
          height="[[_heightOrLen]]"
          width="[[width]]"
          margin="[[margin]]"
          chart-data="[[chartData]]"
          radial="[[radial]]"
          orientation="[[_getOrientation(item, orientationFromDimensions, domainChanged, _pokeOrientation)]]"
          title="[[_getTitle(item,completeSeriesConfig, axisConfig)]]"
          title-location='[[_computeTitleLocation(item, titleLocation, _pokeTitleLocation)]]'
          title-type-size="[[titleTypeSize]]"
          label-type-size="[[labelTypeSize]]"
          stroke-width="[[strokeWidth]]"
          outer-tick-size="0"
          truncation-length="[[truncationLength]]"
          complete-series-config="[[completeSeriesConfig]]"
          append-unit-in-title="[[appendUnitInTitle]]"
          unit="[[_getUnit(item, completeSeriesConfig)]]"
          prevent-series-bar="[[preventSeriesBar]]"
          domain-changed="[[_internalDimensionsChanged]]"
          selected-domain="[[selectedDomain]]"
          title-truncation="true"
          disable-ticks="[[_calcDisableTicks(item,recalcTicks)]]"
          label-position="[[labelPosition]]"
          axis-color="[[axisColor]]"
          axis-line-color="[[axisLineColor]]"
          axis-tick-color="[[axisTickColor]]"
          axis-label-color="[[axisLabelColor]]"
          axis-title-color="[[axisTitleColor]]"
          ticks="[[ticks]]"
          tick-values="[[_returnTickValues(item, tickValues.*)]]"
          label-rotation="[[labelRotation]]"
          label-translation="[[labelTranslation]]"
          series-on-axis="[[_returnSeriesArray(seriesToAxes, item)]]"
          muted-series="[[mutedSeries]]"
          combined-muted-series="[[combinedMutedSeries]]"
          hard-mute="[[hardMute]]"
          drawn-tick-values="[[drawnTickValues]]"
          rebuild-on-draw="[[_rebuildOnDraw]]"
          disable-brush="[[disableBrush]]"
          drag-behavior="[[dragBehavior]]"
          prevent-initial-drawing="[[preventInitialDrawing]]"
          redraw-series="[[redrawSeries]]"
          brush-domains="[[brushDomains]]"
          hide-and-show-on-hover="[[_isFirst(index, commonAxis)]]"
          cartesian-drag-behavior="[[cartesianDragBehavior]]"
          brush-to-remove="[[brushToRemove]]"
          action-config="[[actionConfig]]"
          interaction-space-config="[[interactionSpaceConfig]]"
          center-offset="[[centerOffset]]"
          smaller-side="[[smallerSide]]"
          time-domain="[[timeDomain]]"
          title-truncation="[[titleTruncation]]">
        </px-vis-interactive-axis>
      </template>
    </template>
</dom-module>

<script>
  Polymer({

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

    behaviors: [
      PxVisBehavior.observerCheck,
      PxVisBehavior.svgDefinition,
      PxVisBehavior.sizing,
      PxVisBehavior.completeSeriesConfig,
      PxVisBehavior.commonMethods,
      PxVisBehaviorD3.axisConfig,
      PxVisBehavior.dataset,
      PxVisBehavior.dimensions,
      PxVisBehavior.mutedSeries,
      PxVisBehaviorD3.dynamicRedraw,
      PxVisBehavior.commonAxis,
      PxVisBehaviorD3.domainUpdate,
      PxVisBehaviorD3.selectedDomain,
      PxVisBehavior.radial,
      PxVisBehaviorD3.radialAxisConfig,
      PxVisBehavior.seriesToAxes,
      PxVisBehaviorChart.subConfiguration,
      PxVisBehavior.preventInitialDrawing,
      PxVisBehavior.categories,
      PxVisBehavior.actionConfigGeneric,
      PxVisBehavior.interactionSpaceConfigGeneric,
      PxVisBehavior.combinedMutedSeries,
      PxVisBehavior.brushDomains,
      PxVisBehavior.timeDomain,
      PxVisBehavior.titleTruncation
    ],

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

      /**
       * A boolean to specify if the axis ticks should align or each have their own ranges.
       *
       */
      matchTicks: {
        type: Boolean,
        value: false
      },
      /**
       * If matchTicks, generate the ticks so they match too.
       *
       */
      gridTicks: {
        type: Object,
        notify: true
      },
      /**
       * If matchTicks, generate the axis so it matches too.
       *
       */
      gridAxis: {
        type: Object,
        notify: true
      },
      /**
       * Whether to append unit in brackets in axis title, e.g [Hz].
       */
      appendUnitInTitle: {
        type: Boolean,
        value: false
      },
      /**
       * Array representing the actual displayed titles for each axis.
       */
      displayedValues: {
        type: Object,
        notify: true
      },
      /**
       * Internal dimensions to defeat race condition.
       */
      _internalDimensions: {
        type: Array
      },
      /**
       * Internal dimensions trigger to defeat race conditions.
       */
      _internalDimensionsChanged: {
        type: Number,
        value: 0
      },
      /**
       * Whether the scales are using a single scale or multi scale.
       */
      singleDomain: {
        type: Boolean,
        value: false
      },
      /**
       * Boolean to decide if all axes or just one axis should get ticks.
       */
      labelOneAxis:{
        type: Boolean,
        value: false
      },
      /**
       * Length of the axis.
       */
      length: {
        type: Number,
        value: null
      },
      /**
       * Whether to use the height or the length for axis length.
       */
      _heightOrLen: {
        type: Number,
        computed: '_calcH(height,length)'
      },
      /**
       * Boolean controlling if brushing should retain or delete series.
       */
      brushToRemove: {
        type: Boolean,
        value: false
      },
      /**
       * Boolean to decide if domainChanged changed or if something else triggered the observer.
       */
      _lastDomainChanged: {
        type: Number,
        value: 0
      },
      /**
       * Force a redraw for titleLocation.
       */
      _pokeTitleLocation: {
        type: Boolean,
        value: false
      },
      /**
       * Force a redraw of ticks.
       */
      recalcTicks: {
        type: Boolean,
        value: false
      },

      orientationFromDimensions: {
        type: Boolean,
        value: false
      },

      leftAxisSize: {
        type: Number
      },
      rightAxisSize: {
        type: Number
      },

      disableBrush: {
        type: Boolean,
        value: false
      },
      /**
        * Boolean to specify whether to draw the series bars.
        */
      preventSeriesBar: {
        type: Boolean,
        value: false
      },
      cartesianDragBehavior: {
        type: Boolean,
        value: false
      },
      _pokeOrientation: {
        type: Boolean,
        value: false
      },
      axisConfig: {
        type: Object,
        value: function() {
          return {};
        }
      },
      allowEmptyTitle: {
        type: Boolean,
        value: false
      },
      _axisDoneCounter: {
        type: Number,
        value: 0
      },
      _rebuildOnDraw: {
        type: Boolean,
        value: true
      },
      _mutedSeriesPerBrush: {
        type: Object,
        value: function() { return {}; }
      },
      /**
       * Counter for number of axis titles that have been updated.
       */
      _displayedTitlesCounter: {
        type: Number,
        value: 0
      },
      /**
       * Builder for current axis title updates.
       */
      _displayedTitlesBuilder: {
        type: Object,
        value: function() {
          return {};
        }
      },
      /**
       * Counter for number of drawn tick values that have been updated.
       */
      _drawnTickValuesChangedCounter: {
        type: Number,
        value: 0
      },

      _normalizedTicks: {
        type: Boolean,
        value: false
      },
      smallerSide: {
        type: Number,
        value: 0
      }
    },

    observers: [
      '_axisConfigChanged(axisConfig.*)',
      '_computedInternalDimensions(domainChanged, x, dimensions)',
      '_recalcGTransforms(leftAxisSize, rightAxisSize)',
      '_toggleTitleLocation(length)'
    ],

    listeners:{
      'px-vis-drag-dimension-swapped' : '_axisDragged',

      'px-vis-axis-displayed-title-changed': '_displayedTitleChanged',
      'px-vis-recalc-title-location' : '_toggleTitleLocation',
      "px-axis-orientation-changed" : '_toggleOrientation',
      'dom-change': '_axisConfigChanged',
      'px-vis-axis-drawn-tick-values-changed': '_drawnTickValuesChanged'
    },

    _axisConfigChanged: function(conf) {
      if(this.hasUndefinedArguments(arguments)) {
        return;
      }

      if(this.axisConfig && this._doesObjHaveValues(this.dimensions)) {
        var keys = Object.keys(this.axisConfig),
            hasProps = false,
            hasAC = false,
            props = {},
            propKeys = [],
            configs = {},
            axesConfigs = [];

        // iterate through the axisConfig keys
        for(var i = 0; i < keys.length; i++) {
          var k = keys[i];

          // if it is just a key, it is a property to apply to everyone
          if(this.dimensions.indexOf(k) === -1) {
            props[k] = this.axisConfig[k];
            propKeys.push(k);
            hasProps = true;

          // if the key is an axis, save for later
          } else {
            var o = {};
            o[k] = this.axisConfig[k];
            axesConfigs.push(o);
            hasAC = true;
          }
        }

        // if we dont have raw properties but do have axis specific configs, just apply the configs
        if(!hasProps && hasAC) {
          for(var i =0; i < axesConfigs.length; i++) {
            var obj = axesConfigs[i],
                a = Object.keys(obj);
            if(this.$$('#ia_' + a)) {
              this.$$('#ia_' + a).set('axisConfig', obj);
            }
          }

          return;
        }

        // if we have raw properties
        if(hasProps) {
          // first, create configs for each dimension
          for(var i = 0 ; i < this.dimensions.length; i++) {
            configs[this.dimensions[i]] = this._copyConfig(propKeys, props);
          }
        }

        // if we have config objects and props, mix em
        if(hasAC) {
          for(var i = 0; i < axesConfigs.length; i++) {
            var obj = axesConfigs[i],
                a = Object.keys(obj),
                confKeys = Object.keys(axesConfigs[i][a]);

            configs[a] = configs[a] || {};

            for(var j = 0; j < confKeys.length; j++) {
              configs[a][confKeys[j]] = obj[a][confKeys[j]];
            }
          }
        }

        // apply the configs
        for(var i = 0; i < this.dimensions.length; i++) {
          var a = this.dimensions[i]
          if(this.$$('#ia_' + a)) {
            this.$$('#ia_' + a).set('axisConfig', configs[a]);
          }
        }
      }
    },

    _copyConfig: function(k, conf) {
      var c = {};

      for(var i = 0; i < k.length; i++) {
        c[k[i]] = conf[k[i]];
      }

      return c;
    },

    _axisDragged: function(e) {
      if(this.cartesianDragBehavior) {
        this.x.leftDomain(e.detail.lDims);
        this.x.rightDomain(e.detail.rDims);

        this.set('dimensions', e.detail.dimensions);

      } else {
        this.x.domain(this.dimensions);

      }

      this.$$('px-vis-interactive-axis#ia_' + e.detail.swappedDim).recalcTranform();
    },

    /**
     * At ready, set the margin and titleLocation objects.
     * Used for radar to rotate the title appropriately.
     *
     * @method _computeTitleLocation
     */
    _computeTitleLocation: function(item, titleLocation) {
     if(this.hasUndefinedArguments(arguments)) {
       return;
     }

      if(this.radial) {
        var r = (this.x(item) * 180 / Math.PI),
            attrs = {
            'x': null,
            'y': null,
            'r': (r + 180) * -1,  //we rotate each group so we have to un-rotate each title
            'anchor': null
          };

        if(r > 10 && r <= 100) {
          attrs.anchor = 'start';
          attrs.x = 0;
          attrs.y = this.length + 10;
        } else if(r > 100 && r < 170) {
          attrs.anchor = 'start';
          attrs.x = -12 * Math.sin(Math.PI - this.x(item));
          attrs.y = this.length + 10 + 12 * Math.cos(Math.PI - this.x(item));
        } else if(r >= 170 && r <= 190){
          attrs.anchor = 'middle';
          attrs.x = -12 * Math.sin(Math.PI - this.x(item));
          attrs.y = this.length + 10 + 12 ; //text size plus spacer
        } else if(r > 190 && r < 260){
          attrs.anchor = 'end';
          attrs.x = -12 * Math.sin(Math.PI - this.x(item));
          attrs.y = this.length + 10 + 12 * Math.cos(Math.PI - this.x(item));
        } else if(r >= 260 && r < 355){
          attrs.anchor = 'end';
          attrs.x = 0;
          attrs.y = this.length + 10;
        } else {
          attrs.anchor = 'middle';
          attrs.x = -12 * Math.sin(Math.PI - this.x(item));
          attrs.y = this.length + 10;
        }

        return attrs;
      }
      return titleLocation;
    },

    /**
     * Forces a redraw of the titleLocation.
     *
     * @method _toggleTitleLocation
     */
    _toggleTitleLocation: function() {
     if(this.hasUndefinedArguments(arguments)) {
       return;
     }

      this.set('_pokeTitleLocation' , !this._pokeTitleLocation);
    },

    /**
     * returns length if it exists, otherwise returns height
     *
     */
    _calcH: function(height,length) {
     if(this.hasUndefinedArguments(arguments)) {
       return;
     }

      if(length) {
        return length;
      }
      return height
    },

    /**
     * Returns the appropriate scale for a dimension.
     *
     * @method _returnY
     */
    _returnY: function(item){
     if(this.hasUndefinedArguments(arguments)) {
       return;
     }

      return this.singleDomain ? this.y : this.y[item]
    },

    /**
     * Determines whether ticks are disabled.
     *
     * @method _calcDisableTicks
     */
    _calcDisableTicks: function(item) {
     if(this.hasUndefinedArguments(arguments)) {
       return;
     }

      if(this.labelOneAxis) {

        //check index of dimentions so it still works when we drag an axis
        return this.dimensions[0] === item ? false : true;
      }
      return false;
    },

    /**
     * Sets _internalDimensions to the value of dimensions but trigged AFTER the scale
     * has been set. Avoids an annoying race condition where dimensions triggers a
     * chart refresh but the new scale has yet to be triggered.
     *
     * @method _computedInternalDimensions
     */
    _computedInternalDimensions: function() {
     if(this.hasUndefinedArguments(arguments)) {
       return;
     }

      //makes sure we dont try to process a new dim before it has a new scale.
      if(this._lastDomainChanged !== this.domainChanged) {

        this._lastDomainChanged = this.domainChanged;
        this._rebuildOnDraw = true;

        // FIXME technically, we should look and see if we need to rerender;
        //if dimensions didnt change, but domainChanged did  due to a y domain
        //change, then we may rerender unncessarily.
        var notFirst = this._internalDimensions ? true : false,
            dimsChanged = (notFirst && this.dimensions.join() === this._internalDimensions.join()) ? false : true;

        this.set('_internalDimensions', this.dimensions);

        //don't force rendering the first time to have faster init
        if(dimsChanged && notFirst) {
          this.$.bof.render();

          this.set('_pokeTitleLocation', !this._pokeTitleLocation);
        }

        this.set('_internalDimensionsChanged', this._internalDimensionsChanged + 1);

      } else if(this.dimensions.length === 0 && this._internalDimensions && this._internalDimensions.length > 0) {
        this.set('_internalDimensions', []);
        this.set('_internalDimensionsChanged', 0);
      }
    },

    /**
     * Checks if there is a title specified in the series config and returns it; otherwise returns the axis id.
     *
     * @method _getTitle
     */
    _getTitle: function(item) {
     if(this.hasUndefinedArguments(arguments)) {
       return;
     }

      if(this.completeSeriesConfig) {
        if(this.axisConfig && this.axisConfig[item] && this.axisConfig[item].title) {
          return this.axisConfig[item].title
        } else if(this.completeSeriesConfig[item] && this.completeSeriesConfig[item].title) {
          return this.completeSeriesConfig[item].title;
        } else {
          return this.allowEmptyTitle ? '' : item ;
        }
      }
    },

    /**
     * Deletes the brushes on children axes.
     *
     * @method deleteAllBrushes
     */
    deleteAllBrushes: function() {
      this.$.axisBrush.deleteAllBrushes();
    },

    _getOrientation: function(axisId, orientationFromDimensions) {
      if(this.hasUndefinedArguments(arguments)) {
        return;
      }

      if(orientationFromDimensions) {
        var rDims = this.x.rightDomain();
        if(rDims.indexOf(axisId) !== -1) {
          return 'right'
        }
        return 'left'
      }
      return 'left'
    },

    _recalcGTransforms: function(leftSize, rightSize) {
      if(this.hasUndefinedArguments(arguments)) {
        return;
      }

      if(leftSize && rightSize && this._doesD3HaveValues(this.svg) && this._doesD3HaveValues(this.svg.selectAll('.dimension'))) {
        this.svg.selectAll('.dimension')
          .attr('transform', function(d) {
            return this.x(d) || this.x(d) === 0 ? 'translate(' + this.x(d) + ',0)' : '';
          }.bind(this));
      }
    },

    _returnSeriesArray: function(arr, axisId) {
      if(this.hasUndefinedArguments(arguments)) {
        return;
      }

      return (arr && arr[axisId]) ? arr[axisId] : [];
    },

    _toggleOrientation: function() {
      this.set('_pokeOrientation', !this._pokeOrientation);
    },

    _getUnit: function(item, completeSeriesConfig) {
      if(this.hasUndefinedArguments(arguments)) {
        return;
      }

      //if we are dealing with the axes in completeSeriesConfig (|| and radar)
      if(this.completeSeriesConfig[item] && this.completeSeriesConfig[item].yAxisUnit) {
        return this.completeSeriesConfig[item].yAxisUnit

      //if we are dealing with axes not in completeSeriesConfig (cartesian)
      } else if(this.seriesToAxes && this.seriesToAxes[item]) {
        for(var i = 0; i < this.seriesToAxes[item].length; i++) {
          var series = this.seriesToAxes[item][i];
          if(this.completeSeriesConfig[series] && this.completeSeriesConfig[series]['yAxisUnit']) {
            return this.completeSeriesConfig[series]['yAxisUnit']
          }
        }
      }
      return '';
    },

    _drawnTickValuesChanged: function(evt) {

      //try counting axis since most likely all axis will fire once.
      //set a debounce in case not all axis fired so we can fall back on the last value
      this._drawnTickValuesChangedCounter++;

      //"failure" scenario
      this.debounce('_drawnTickValuesChangedFallback', function() {

        this._applyDrawnTickValuesChanged(evt.detail.drawnTickValues);
      }.bind(this), 10);

      //all axis fired, cancel debounce and finish
      if(this._drawnTickValuesChangedCounter === this._internalDimensions.length) {

        this.cancelDebouncer('_drawnTickValuesChangedFallback');
        this._applyDrawnTickValuesChanged(evt.detail.drawnTickValues);
      }
    },

    _applyDrawnTickValuesChanged: function(val) {
      this.set('drawnTickValues', val);
      this._drawnTickValuesChangedCounter = 0;
    },

    /**
     * Sets the displayed value of the title including truncation
     *
     * @method _displayedTitleChanged
     */
    _displayedTitleChanged: function(evt) {

      this._displayedTitlesCounter++;
      this._displayedTitlesBuilder[evt.detail.id] = evt.detail.displayedTitle;

      //"failure" scenario
      this.debounce('_displayedTitleChangedFallback', function() {

        //fallback on existing values if possible
        if(this.displayedValues) {
          //copy everything that has not been updated to our builder
          var keys = Object.keys(this.displayedValues);
          for(var i=0; i<keys.length; i++) {
            //if it hasn't been updated then add it
            if(!this._displayedTitlesBuilder[keys[i]]) {
              this._displayedTitlesBuilder[keys[i]] = this.displayedValues[keys[i]];
            }
          }
        }
        this._applyDisplayedTitlesChanged();
      }.bind(this), 50);

      //all axis fired, cancel debounce and finish
      if(this._displayedTitlesCounter === this._internalDimensions.length) {

        this.cancelDebouncer('_displayedTitleChangedFallback');
        this._applyDisplayedTitlesChanged();
      }

      evt.stopPropagation();
      evt.stopImmediatePropagation();
    },

    _applyDisplayedTitlesChanged: function() {
      this.set('displayedValues', this._displayedTitlesBuilder);
      this._displayedTitlesCounter = 0;
      this._displayedTitlesBuilder = {};
    },

    _isFirst: function(index) {
      if(this.hasUndefinedArguments(arguments)) {
        return;
      }

      if(!this.commonAxis) {
        return false;
      }

      return index === 0 ? false : true;
    },

    _returnTickValues: function(item, tickValues) {
      if(this.tickValues) {
        return this.tickValues[item];
      }
    }
  });
</script>