px-vis-line-canvas.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-d3.html" />
<link rel="import" href="css/px-vis-styles.html">

<!--

### Usage
      <px-vis-svg-canvas
        width="[[width]]"
        height="[[height]]"
        margin="[[margin]]"
        canvas-context="{{canvasContext}}">
      </px-vis-svg-canvas>
      <px-vis-scale
        x-axis-type="time"
        y-axis-type="linear"
        complete-series-config="[[seriesConfig]]"
        data-extents="[[dataExtents]]"
        width="[[width]]"
        height="[[height]]"
        margin="[[margin]]"
        chart-data={{chartData}}
        x="{{x}}"
        y="{{y}}"
        domainChanged="{{domainChanged}}"
        selected-domain="[[selectedDomain]]">
      </px-vis-scale>
      <px-vis-line-canvas
        series-id="mySeries"
        complete-series-config="[[seriesConfig]]"
        chart-data="[[chartData]]"
        x="[[x]]"
        y="[[y]]"
        width="[[width]]"
        height="[[height]]"
        margin="[[margin]]"
        canvas-context="[[canvasContext]]"
        domain-changed="[[domainChanged]]">
        </px-vis-line-canvas>

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

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

    </template>
</dom-module>

<script>
  Polymer({
    is: 'px-vis-line-canvas',

    behaviors: [
      PxVisBehaviorD3.canvasContext,
      PxVisBehaviorD3.lineShared,
      PxVisBehaviorD3.axes,
      PxVisBehavior.sizing,
      PxVisBehavior.dataset,
      PxVisBehavior.mutedSeries,
      PxVisBehavior.commonMethods,
      PxVisBehavior.completeSeriesConfig,
      PxVisBehavior.categories,
      PxVisBehaviorD3.selectedDomain,
      PxVisBehavior.serieToRedrawOnTop,
      PxVisBehaviorD3.domainUpdate,
      PxVisBehavior.preventInitialDrawing,
      PxVisBehavior.isAttached,
      PxVisBehavior.polarData,
      PxVisBehavior.rendererType,
      PxVisBehaviorD3.clipPathBoolean,
      PxVisBehavior.dynamicConfigProperties
    ],

    /**
     * Properties block, expose attribute values to the DOM via 'reflect'
     *
     * @property properties
     * @type Object
     */
    properties: {
       /**
       * The opacity value of the fill to be used when muting a series (stroke is not drawn on mute).
       */
      mutedOpacity: {
        type: Number,
        value: 0.3
      },
      /**
       * Holder for clipPath data.
       */
      _clipData: {
        type: Array
      },

      strokeWidth: {
        type: Number,
        value: 1
      },
      /**
       * Options currently in use for drawing lines: opacity, color, etc.
       */
      _currentDrawingOptions: {
        type: Object,
        value:function() {
          return {};
        }
      }
    },

    observers: [
      '_priorityChanged(priority)'
    ],

    ready: function() {
      this._watchConfigProperty('priority', 0);
      this._watchConfigProperty('strokeWidth', 1);
    },

    attached: function() {
      this.fire('px-vis-renderer-register', {'type': 'line', 'renderMode': 'canvas', 'rendererType': this.rendererType, 'priority': this.priority});
    },

    detached: function() {
      this.fire('px-vis-renderer-unregister',{'renderMode': 'canvas','rendererType': this.rendererType});
    },

    _priorityChanged: function() {
      this.fire('px-vis-renderer-update-target-props', {'propertyName': 'priority', 'propertyValue': this.priority ,'rendererType': this.rendererType});
    },

    /**
     * Defines the appropriate line generator and updates drawing
     * variables: opacity, colors, etc.
     */
    initializeDrawingSession: function() {

      //create our line generator
      if(this.parallelCoordinates) {
        this._defineMultiLine(true);
      } else if(this.radialLine) {
        this._defineRadialLine(true, this.multiPath, this.counterClockwise, this.useDegrees);
      } else {
        this._defineSingleLine(true);
      }

      //make sure we have the right muted opacity
      this._currentDrawingOptions.mutedOpacity = this.completeSeriesConfig[this.seriesId].mutedOpacity || this.completeSeriesConfig[this.seriesId].mutedOpacity === 0 ?
                            this.completeSeriesConfig[this.seriesId].mutedOpacity : this.mutedOpacity;
      this._currentDrawingOptions.strokeWidth = this.strokeWidth;

      //render differently depending on the type of line
      if(this.gradientLine || this.categoryKey) {
        //gradient line
        this._currentDrawingOptions.getColorValue = function(d) {

          var opacity = this._isSerieMuted(d) ? this._currentDrawingOptions.mutedOpacity : 1;

          if(opacity !== 0) {
            return this._getLineColor(d);
          } else {
            return null;
          }
        }.bind(this);
      }
    },

    /**
     * Draws a clip path for canvas.
     *
     * @method drawClipPath
     */
    drawClipPath: function() {
      /* not sure why this if statement bandaid is needed
         if you have chartData with all the same value (such as all 0) and some axes and you clear axes first, then clear chartData
         (not chartData and then axes), then reload the same data and axes (order doesnt matter), series do not plot.
         Clearly related to the clip path, but cannot isolate.
         If you load data that is not 100% 0, or change the chartData or axes on reload, doesnt happen.
         This if statement prevents clipPath from running under these circumstances and everything is fine
      */

      //TODO: extend for polar
      if(this.chartData && this.chartData.length > 0 && this.completeSeriesConfig[this.seriesId]["x"].length > 0) {
        if(this.radialLine) {
          this._drawRadarClipPath();
        } else {
          this._drawRectClipPath();
        }
      }
    },

    /**
     * Draws a clip path for radar.
     */
    _drawRadarClipPath: function() {

      //start off resetting our saved canvas
      this._generateRadarClipData();

      this.canvasContext.beginPath();

      this.line(this._clipData[0]);
      this.line(this._clipData[1]);

      this.canvasContext.clip("evenodd");
    },
    /**
     * Draws a rectangular clip path for cartesian charts.
     */
    _drawRectClipPath: function() {
      this.canvasContext.beginPath();

      var w = Math.max(this.width - this.margin.left - this.margin.right,0),
          h = Math.max(this.height - this.margin.top - this.margin.bottom,0);

      this.canvasContext.rect(0, 0, w, h);
      this.canvasContext.clip();
    },

    /**
     * Generates the edges for the radar clip path.
     *
     * @method _generateRadarClipPath
     */
    _generateRadarClipData: function() {
       var clipData = [{},{}];
       for(var i = 0; i < this.completeSeriesConfig[this.seriesId]['x'].length; i++) {
         clipData[0][ this.completeSeriesConfig[this.seriesId]['x'][i] ] = this.y.domain()[0];
         clipData[1][ this.completeSeriesConfig[this.seriesId]['x'][i] ] = this.y.domain()[1];
       }

       this._clipData = clipData;
     },

    renderOneBatch: function(start, stop) {

      var data;
      this.canvasContext.lineWidth = this._currentDrawingOptions.strokeWidth
      this.canvasContext.lineCap = "square";

      this.canvasContext.save();

      if(this.clipPath) {
        this.drawClipPath();
      }

      if(!this.multiPath) {
        //for single line we have to slice the array to pass it to the line function
        data = this.chartData.slice(start, stop);
      }

      if(this.gradientLine || this.categoryKey) {

        var color;
        //strike line by line since a gradient and or color is applied
        //for multipath because each point is 1 line no need to slice the array,
        //just access each point by the appropriate index
        for(var i = start; i < stop; i++) {
          color = this._currentDrawingOptions.getColorValue(this.chartData[i]);
          opacity = this._isSerieMuted(this.chartData[i]) ? this._currentDrawingOptions.mutedOpacity : 1;
          if(color) {
            this.canvasContext.beginPath();
            this.canvasContext.strokeStyle = color;
            this.canvasContext.globalAlpha = opacity;
            this.line(this.chartData[i]);
            this.canvasContext.stroke();
          }
        }
      } else {

        this.canvasContext.beginPath();

        if(!this.multiPath) {
          opacity = this._isSerieMuted(data) ? this._currentDrawingOptions.mutedOpacity : 1;
          if(opacity !== 0) {
            this.canvasContext.globalAlpha = opacity;
            this.line(data);
          }
        } else {

          //for multipath because each point is 1 line no need to slice the array,
          //just access each point by the appropriate index
          for(var i = start; i < stop; i++) {

            opacity = this._isSerieMuted(this.chartData[i]) ? this._currentDrawingOptions.mutedOpacity : 1;
            if(opacity !== 0) {
              this.line(this.chartData[i]);
            }
          }
        }

        var dashPattern = this.completeSeriesConfig[this.seriesId] && this.completeSeriesConfig[this.seriesId]["dashPattern"] ? this.completeSeriesConfig[this.seriesId]["dashPattern"] : '';
        dashPattern = JSON.parse('[' + dashPattern +']');
        this.canvasContext.setLineDash(dashPattern);

        //only strike once
        this.canvasContext.strokeStyle = this.completeSeriesConfig[this.seriesId]['color'];
        this.canvasContext.globalAlpha = opacity;
        this.canvasContext.stroke();
      }

      this.canvasContext.restore();
    },

    _isSerieMuted: function(d) {
      if(this.multiPath) {
        return this.mutedSeries[d[this.seriesId]] ? true : false;
      } else {
        return this.mutedSeries[this.seriesId] ? true : false;
      }
    }
  });
</script>