px-vis-chart-navigator.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" />
<link rel="import" href="px-vis-behavior-datetime.html" />
<link rel="import" href="px-vis-behavior-chart.html" />
<link rel="import" href="px-vis-svg.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="px-vis-scale.html"/>
<link rel="import" href="../px-datetime-common/px-datetime-imports.html"/>
<link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html" />
<link rel="import" href="../px-colors-design/colors.html" />

<!--
Provides an interactive chart navigator with a brush to adjust the chart domain

##### 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="[[currentDomainX]]"
        chart-domain-y="[[currentDomainY]]"
        range="[[range]]"
        disable-empty-render
        selected-domain="{{selectedDomain}}">
    </px-vis-chart-navigator>

@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
-->

<link rel="import" href="css/px-vis-styles.html">

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

      <div id="wrapper" style="height:100%;width:100%">
        <px-vis-scale
          x-axis-type="[[xAxisType]]"
          y-axis-type="[[yAxisType]]"
          width="[[width]]"
          height="[[height]]"
          margin="[[margin]]"
          x="{{x}}"
          y="{{y}}"
          chart-extents="[[chartExtents]]"
          data-extents="[[dataExtents]]"
          complete-series-config="[[completeSeriesConfig]]"
          chart-data="[[chartData]]"
          domain-changed="{{domainChanged}}"
          current-domain-x="{{currentDomainX}}"
          current-domain-y="{{currentDomainY}}">
        </px-vis-scale>
        <px-vis-svg
          width="[[width]]"
          height="[[height]]"
          margin="[[margin]]"
          svg="{{svg}}"
          px-svg-elem="{{pxSvgElem}}">
        </px-vis-svg>

        <template is="dom-repeat" items="[[_seriesKeys]]">
          <template is="dom-if" if="[[_limitSeries(index,navSeriesLimit)]]">
            <template is="dom-if" if="[[_chartTypeLine(item,completeSeriesConfig)]]">
              <px-vis-line-svg
                svg="[[layer.1]]"
                series-id="[[item]]"
                chart-data="[[chartData]]"
                complete-series-config="[[completeSeriesConfig]]"
                x="[[x]]"
                y="[[y]]"
                current-domain-x="[[currentDomainX]]"
                current-domain-y="[[currentDomainY]]"
                domain-changed="[[domainChanged]]"
                muted-series="[[mutedSeries]]">
              </px-vis-line-svg>
            </template>
            <template is="dom-if" if="[[_chartTypeScatter(item,completeSeriesConfig)]]">
              <px-vis-scatter
                svg="[[layer.1]]"
                series-id="[[item]]"
                chart-data="[[chartData]]"
                complete-series-config="[[completeSeriesConfig]]"
                marker-size="2"
                x="[[x]]"
                y="[[y]]"
                domain-changed="[[domainChanged]]"
                current-domain-x="[[currentDomainX]]"
                current-domain-y="[[currentDomainY]]"
                muted-series="[[mutedSeries]]">
              </px-vis-scatter>
            </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]]"
          current-domain="[[currentDomainX]]">
        </px-vis-axis>
        <px-vis-brush
          svg="[[layer.2]]"
          axis="[[x]]"
          height="[[height]]"
          width="[[width]]"
          margin="[[margin]]"
          current-domain="[[currentDomainX]]"
          chart-domain=[[chartDomainX]]
          selected-domain="{{selectedDomain}}"
          gradient-overlay="[[gradientOverlay]]">
        </px-vis-brush>
      </div>
    </template>
</dom-module>

<script>
    Polymer({

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

        behaviors: [
          PxVisBehavior.sizing,
          PxVisBehavior.formatting,
          PxVisBehaviorTime.datetime,
          PxVisBehaviorD3.svg,
          PxVisBehaviorD3.axes,
          PxVisBehaviorD3.axis,
          PxVisBehaviorD3.selectedDomain,
          PxVisBehavior.dataset,
          PxVisBehavior.completeSeriesConfig,
          PxVisBehavior.commonMethods,
          PxVisBehavior.chartExtents,
          PxVisBehavior.dataExtents,
          PxVisBehavior.axisTypes,
          PxVisBehaviorChart.chartCommon,
          Polymer.IronResizableBehavior,
          PxVisBehaviorChart.saveImage,
          PxVisBehaviorChart.chartAutoResize,
          PxVisBehaviorD3.domainUpdate,
          PxVisBehaviorChart.registerConfigs,
          PxVisBehaviorChart.axisConfigs,
          PxVisBehaviorChart.subConfiguration,
          PxVisBehaviorChart.layers,
          PxColorsBehavior.dataVisColorTheming,
          commonColors
        ],

        /**
         * 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
          },
          /**
           * Boolean specifying if the rectangle overlay should have a gradient applied
           *
           */
          gradientOverlay: {
            type: Boolean,
            value: false
          },
          /**
           * Can be set to override the time span shown by the navigator. Allows to use
           * the navigator without data.
           *
           * * Format ISO8601 strings
           * ```
           * {
           *    "from": "2013-01-07T22:44:30.652Z",
           *    "to" : "2013-02-04T22:44:30.652Z"
           * }
           * ```
           *
           */
          range: {
            type: Object,
            observer: '_rangeChanged'
          },
          /**
           * Boolean specifying if the navigator should be allowed to render empty or not
           */
          disableEmptyRender: {
            type: Boolean,
            value: false
          },
        },

        observers: [
          '_xAxisConfigChanged(xAxisConfig.*)',
        ],

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

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

        _xAxisConfigChanged: function(conf) {
          this._applyConfigToElement(this.xAxisConfig, this.$.xAxis);
        },

        /**
         * Dom if function to decide if a repeated item is above our limit
         */
        _limitSeries: function(i) {
          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);
        },

        /**
         * When a range from rangepicker changes
         */
        _rangeChanged: function() {
          var newXRange = [
            Number(Px.moment(this.range.from, Px.moment.ISO_8601).format('x')),
            Number(Px.moment(this.range.to, Px.moment.ISO_8601).format('x'))
            // Px.moment(this.range.from),Px.moment(this.range.to)
          ];

          //if we don't have data create 'empty' datra with new range
          if(!this.disableEmptyRender && (!this.chartData || this.chartData.length === 0)) {

            if(!this.seriesConfig || !this._doesObjHaveValues(this.seriesConfig)) {
              this.set('seriesConfig', {
               dummy: {
                  "type": "line",
                  "name": "dummy",
                  "x":"x",
                  "y":"y"
                }
              });
            }

            this._updateDummyData(newXRange);

            this.set('dataExtents', {
              "x":newXRange,
              "y":[Infinity,-Infinity]});

          } else if(this._doesObjHaveValues(this.dataExtents) && this._doesObjHaveValues(this.dataExtents.x) && this._doesObjHaveValues(this.dataExtents.y)) {
            if(!this.disableEmptyRender){
              var config = this.seriesConfig[Object.keys(this.seriesConfig)[0]];
              //if we're using dummy data make sure it reflects the new range
              if(this.chartData.length === 2 && this.chartData[0][config.y] === 0 &&
                this.chartData[1][config.y] === 0) {
                this._updateDummyData(newXRange);
              }
            }
            //set range in the data
            this.set('dataExtents', {
              "x": newXRange,
              "y": [this.dataExtents.y[0],this.dataExtents.y[1]]
            });

            var newDomain = {
              'x': [newXRange[0], newXRange[1]],
              'y': this.selectedDomain.y
            };
            this.set('selectedDomain', newDomain);
          }
        },

        /**
         * Creates some dummy data for iniitial use
         */
        _updateDummyData: function(newXRange) {
          var config = this.seriesConfig[Object.keys(this.seriesConfig)[0]],
            newData1 = {},
            newData2 = {};

            newData1[config.x] = newXRange[0];
            newData1[config.y] = 0;
            newData2[config.x] = newXRange[1];
            newData2[config.y] = 0;
            this.set('chartData', [newData1, newData2]);
        }
    });
</script>