px-vis-chart-navigator.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="px-vis-behavior-datetime.html" />
<link rel="import" href="px-vis-behavior-chart.html" />
<link rel="import" href="px-vis-behavior-scale.html" />
<link rel="import" href="px-vis-behavior-renderer.html"/>
<link rel="import" href="px-vis-svg-canvas.html"/>
<link rel="import" href="px-vis-line-svg.html"/>
<link rel="import" href="px-vis-axis.html"/>
<link rel="import" href="px-vis-brush.html"/>
<link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html" />
<link rel="import" href="px-vis-behavior-colors.html" />
<link rel="import" href="css/px-vis-styles.html">

<!--

### Usage
    <px-vis-chart-navigator
        id="navigator"
        x-axis-type="time"
        y-axis-type="linear"
        width="[[width]]"
        height="100"
        margin="[[marginNav]]"
        default-series-config="[[defaultSeriesConfig]]"
        series-config="[[seriesConfig]]"
        include-all-series="[[includeAllSeries]]"
        chart-data="[[chartData]]"
        nav-series-limit="[[navSeriesLimit]]"
        chart-domain-x="[[chartDomainX]]"
        chart-domain-y="[[chartDomainY]]"
        disable-empty-render
        selected-domain="{{selectedDomain}}">
    </px-vis-chart-navigator>

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

Custom property | Description
:----------------|:-------------
  `--px-vis-nav-brush-outline-color` | The stroke (border) color for the brushed box
  `--px-vis-nav-brush-fill-color` | The fill (background) color for the brushed box
  `--px-vis-nav-brush-opacity` | The opacity of the brushed box
  `--px-vis-nav-brush-gradient-fill-color` | The fill (background) color for the brushed box when gradientColors is not defined
  `--px-vis-nav-brush-handle-fill-color` | The fill (background) color for the handles on the brushed box
  `--px-vis-nav-brush-handle-lines-color` | The stroke (border) color for the handles on the brushed box
  `--px-vis-nav-brush-handle-fill-color-hover` | The hover state fill (background) color for the handles on the brushed box
  `--px-vis-nav-brush-handle-lines-color-hover` | The hover state stroke (border) color for the handles on the brushed box
  `--px-vis-nav-brush-handle-fill-color-press` | The pressed/mousedown state fill (background) color for the handles on the brushed box
  `--px-vis-nav-brush-handle-lines-color-press` | The pressed/mousedown state stroke (border) color for the handles on the brushed box
  |
  |
  |
  `--px-vis-series-color-0` | These are the colors used to represent the data series on the charts. Used in numerical order by default. Colors MUST start at 0 and cannot contain gaps between numbers.
  `--px-vis-series-color-1` |
  `--px-vis-series-color-2` |
  `--px-vis-series-color-n` |


@element px-vis-chart-navigator
@blurb Provides an interactive chart navigator with a brush to adjust the chart domain
@homepage index.html
@demo demo.html
-->

<dom-module id="px-vis-chart-navigator">
    <template>
      <style include="px-vis-styles"></style>

      <div id="wrapper" class="inline--flex " style="height:100%;width:100%">
        <px-vis-svg-canvas
          class="inline--flex flex__item--msfix"
          width="[[width]]"
          height="[[height]]"
          margin="[[margin]]"
          svg="{{svg}}"
          px-svg-elem="{{pxSvgElem}}"
          canvas-context="{{canvasContext}}">
        </px-vis-svg-canvas>

        <template is="dom-if" if="[[!renderToCanvas]]">
          <px-vis-clip-path
            svg="[[layer.1]]"
            width="[[width]]"
            height="[[height]]"
            margin="[[margin]]"
            series-clip-path="{{seriesClipPath}}">
          </px-vis-clip-path>
        </template>

        <template is="dom-repeat" items="[[_seriesKeys]]">
          <template is="dom-if" if="[[_limitSeries(index,navSeriesLimit)]]">
            <template is="dom-if" if="[[_chartTypeLine(item,completeSeriesConfig)]]" restamp>
              <template is="dom-if" if="[[renderToCanvas]]" restamp>
                <px-vis-line-canvas
                  id="lineCanvas"
                  canvas-context="[[canvasContext]]"
                  series-id="[[item]]"
                  chart-data="[[chartData]]"
                  complete-series-config="[[completeSeriesConfig]]"
                  x="[[x]]"
                  y="[[y]]"
                  domain-changed="[[domainChanged]]"
                  show-gaps="[[showGaps]]"
                  width="[[width]]"
                  height="[[height]]"
                  margin="[[margin]]"
                  clip-path>
                </px-vis-line-canvas>
              </template>
              <template is="dom-if" if="[[!renderToCanvas]]" restamp>
                <px-vis-line-svg
                  svg="[[layer.1]]"
                  series-id="[[item]]"
                  chart-data="[[chartData]]"
                  complete-series-config="[[completeSeriesConfig]]"
                  x="[[x]]"
                  y="[[y]]"
                  clip-path="[[seriesClipPath]]"
                  domain-changed="[[domainChanged]]"
                  muted-series="[[mutedSeries]]">
                </px-vis-line-svg>
              </template>
            </template>
            <template is="dom-if" if="[[_chartTypeScatter(item,completeSeriesConfig)]]" restamp>
              <template is="dom-if" if="[[renderToCanvas]]" restamp>
                <px-vis-scatter-canvas
                  canvas-context="[[canvasContext]]"
                  series-id="[[item]]"
                  chart-data="[[chartData]]"
                  complete-series-config="[[completeSeriesConfig]]"
                  width="[[width]]"
                  height="[[height]]"
                  margin="[[margin]]"
                  x="[[x]]"
                  y="[[y]]"
                  clip-path
                  domain-changed="[[domainChanged]]"
                  marker-size="2">
                </px-vis-scatter-canvas>
              </template>
              <template is="dom-if" if="[[!renderToCanvas]]" restamp>
                <px-vis-scatter
                  svg="[[layer.1]]"
                  series-id="[[item]]"
                  chart-data="[[chartData]]"
                  complete-series-config="[[completeSeriesConfig]]"
                  marker-size="2"
                  x="[[x]]"
                  y="[[y]]"
                  clip-path="[[seriesClipPath]]"
                  domain-changed="[[domainChanged]]"
                  muted-series="[[mutedSeries]]">
                </px-vis-scatter>
              </template>
            </template>
          </template>
        </template>

        <px-vis-axis
          id="xAxis"
          svg="[[layer.0]]"
          axis="[[x]]"
          axis-id="x"
          axis-type="[[xAxisType]]"
          height="[[height]]"
          width="[[width]]"
          margin="[[margin]]"
          orientation="bottom"
          prevent-series-bar
          complete-series-config="[[completeSeriesConfig]]"
          domain-changed="[[domainChanged]]">
        </px-vis-axis>
        <px-vis-brush
          svg="[[layer.2]]"
          axis="[[x]]"
          height="[[height]]"
          width="[[width]]"
          margin="[[margin]]"
          domain-changed="[[domainChanged]]"
          chart-domain="[[chartDomainX]]"
          selected-domain="{{selectedDomain}}"
          gradient-colors="[[gradientColors]]">
        </px-vis-brush>
      </div>
    </template>
</dom-module>

<script>
    Polymer({

        is: 'px-vis-chart-navigator',

        behaviors: [
          PxVisBehavior.observerCheck,
          PxVisBehaviorScale.scale,
          PxVisBehavior.sizing,
          PxVisBehavior.formatting,
          PxVisBehaviorTime.datetime,
          PxVisBehaviorD3.svg,
          PxVisBehaviorD3.axes,
          PxVisBehaviorD3.axis,
          PxVisBehaviorD3.selectedDomain,
          PxVisBehavior.dataset,
          PxVisBehavior.completeSeriesConfig,
          PxVisBehavior.commonMethods,
          PxVisBehavior.dataExtents,
          PxVisBehavior.axisTypes,
          PxVisBehaviorD3.canvasContext,
          PxVisBehaviorD3.renderToCanvas,
          PxVisBehaviorChart.chartCommon,
          Polymer.IronResizableBehavior,
          PxVisBehaviorChart.saveImage,
          PxVisBehaviorChart.chartAutoResize,
          PxVisBehaviorD3.domainUpdate,
          PxVisBehaviorChart.registerConfigs,
          PxVisBehaviorChart.axisConfigs,
          PxVisBehaviorChart.subConfiguration,
          PxVisBehaviorChart.layers,
          PxColorsBehavior.dataVisColorTheming,
          PxVisBehaviorChart.webWorkerSynchronization,
          PxVisBehaviorD3.clipPath,
          PxVisBehaviorRenderer.base,
          PxVisBehavior.mutedSeries,
          PxVisBehavior.gradientColorsProperty
        ],

        /**
         * Properties block, expose attribute values to the DOM via 'reflect'
         *
         * @property properties
         * @type Object
         */
        properties: {
          /**
           * Number of series to display on the navigator
           *
           */
          navSeriesLimit:{
            type:Number,
            value: Infinity,
            notify: true
          },

          /**
           * The parent chart's extents
           *
           */
          chartDomainX: {
            type:Array,
            notify:true
          },
          /**
           * The parent chart's extents
           *
           */
          chartDomainY: {
            type:Array,
            notify:true
          },
          /**
          * Developer set chart extents for the chart. The chart will draw to whatever values are specified in the chartExtents.
          *```
          *  {
          *      "x": [0,100],
          *      "y": [5,50],
          *  }
          *```
          *
          * To force the chart to calculate based on data, use "dynamic".
          *```
          *  {
          *      "x": [0,"dynamic"],
          *      "y": [-10,"dynamic"],
          *  }
          *```
          */
          chartExtents: {
            type: Object,
            notify: true,
            value: function() {
              return {
                "x": [Infinity, -Infinity],
                "y": [Infinity, -Infinity]
              }
            }
          }
        },

        observers: [
          '_xAxisConfigChanged(xAxisConfig.*)',
          '_setXScale(width, margin, xAxisType)',
          '_setYScale(height, margin, yAxisType)',
          '_setDomain(wwDataSyncCounter, x, y, completeSeriesConfig, dataExtents)',
          '_setDomain(chartExtents, dataExtents)',
          '_keepDataInSync(chartData.*, chartId)',
          '_renderChartData(domainChanged, canvasContext, chartData.*, mutedSeries.*, completeSeriesConfig.*, preventInitialDrawing, renderToCanvas)'
        ],

        listeners: {
          'iron-resize': '_onIronResize'
        },

        attached: function() {
          this.set('numberOfLayers', 3);
          //this._onIronResize();
        },


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

          this._applyConfigToElement(this.xAxisConfig, this.$.xAxis);
        },

        /**
         * Dom if function to decide if a repeated item is above the limit
         */
        _limitSeries: function(i) {
         if(this.hasUndefinedArguments(arguments)) {
           return;
         }

          return i < this.navSeriesLimit;
        },

        /**
         * Forces the chart to resize and redraw
         */
        resizeChart: function() {
          this._onIronResize();
        },

        /**
         * Resizes the chart based on a container resize if prevent-resize is false (default)
         */
        _onIronResize: function() {
          this.debounce('ironresize', function() {
            if(!this.preventResize) {
              var wrapperRect = this.$.wrapper.getBoundingClientRect();

              this.set('width', wrapperRect.width);
              this.set('height', wrapperRect.height);
            }
          },100);
        }
    });
</script>