px-vis-xy-chart.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/px-vis-behavior-common.html"/>
<link rel="import" href="../px-vis/px-vis-behavior-d3.html"/>
<link rel="import" href="../px-vis/px-vis-behavior-renderer.html"/>
<link rel="import" href="../px-vis/px-vis-behavior-chart.html"/>
<link rel="import" href="../px-vis/px-vis-behavior-scale.html"/>
<link rel="import" href="../px-vis/px-vis-svg-canvas.html"/>
<link rel="import" href="../px-vis/px-vis-scatter.html"/>
<link rel="import" href="../px-vis/px-vis-scatter-canvas.html"/>
<link rel="import" href="../px-vis/px-vis-line-canvas.html"/>
<link rel="import" href="../px-vis/px-vis-line-svg.html"/>
<link rel="import" href="../px-vis/px-vis-axis.html"/>
<link rel="import" href="../px-vis/px-vis-multi-axis.html"/>
<link rel="import" href="../px-vis/px-vis-tooltip.html"/>
<link rel="import" href="../px-vis/px-vis-interaction-space.html"/>
<link rel="import" href="../px-vis/px-vis-register.html"/>
<link rel="import" href="../px-vis/px-vis-cursor.html"/>
<link rel="import" href="../px-vis/px-vis-clip-path.html"/>
<link rel="import" href="../px-vis/px-vis-event.html"/>
<link rel="import" href="../px-vis/px-vis-gridlines.html"/>
<link rel="import" href="../px-vis/px-vis-toolbar.html"/>
<link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html" />
<link rel="import" href="../px-vis/px-vis-highlight-point.html"/>
<link rel="import" href="../px-vis/px-vis-highlight-point-canvas.html"/>
<link rel="import" href="../px-vis/px-vis-markers.html"/>
<link rel="import" href="../px-vis/px-vis-annotations.html"/>
<link rel="import" href="../px-vis/px-vis-reference-curve.html"/>
<link rel="import" href="../px-vis/px-vis-central-tooltip-content.html"/>
<link rel="import" href="../px-tooltip/px-tooltip.html"/>

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


<!--
A chart which allows line drawing or scatter on arbitrary X and Y axis

### Usage

    <px-vis-xy-chart></px-vis-xy-chart>

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

Custom property | Description
----------------|-------------
  `--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
  |
  |
  |
  `--px-vis-cursor-line-color` | The color for the lines which track the cursor/data
  |
  |
  |
  `--px-vis-event-line-color` | The default color for the vertical lines below the icon
  `--px-vis-event-icon-color` | The default color for the event icon markers
  |
  |
  |
  `--px-vis-gridlines-color` | The color for the gridlines
  |
  |
  |
  `--px-vis-threshold-color` | The default color for a threshold
  |
  |
  |
  `--px-vis-zoom-brush-outline-color` | The stroke (border) color for the on-chart zoom/selection brush
  `--px-vis-zoom-brush-fill-color` | The fill (background) color for the on-chart zoom/selection brush
  `--px-vis-zoom-brush-fill-opacity` | The opacity for the on-chart zoom/selection brush
  |
  |
  |
  `--px-vis-register-series-name` | The color of the data series name
  `--px-vis-register-data-value` | The color of the data series value
  `--px-vis-register-box` | The color of the box around the register when a scrollbar is present
  |
  |
  |
  `--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` |
  |
  |
  |
  `--px-tooltip-background-color` | The color of the tooltip
  `--px-tooltip-text-color` | The color of the tooltip text
  `--px-tooltip-light-background-color` | The color of the light version tooltip
  `--px-tooltip-light-text-color` | The color of the light version tooltip text
  `--px-tooltip-light-border-color`| The color of the light version tooltip border
  |
  |
  |
  `--px-vis-font-family` | The font family for all labels and text


@element px-vis-xy-chart
@blurb A chart which allows line drawing or scatter on arbitrary X and Y axis
@homepage index.html
@demo demo.html
-->

<dom-module id="px-vis-xy-chart">
  <template>
    <style include="px-vis-xy-chart-styles"></style>
    <div id="wrapper" class$="{{_chartWrapperClass}}">
      <!-- Legend -->
      <div class$="{{_registerWrapperClass}} safari-flex-fix">
        <px-vis-register
          id="register"
          class$="{{_getHideClass(hideRegister)}}"
          height="[[_registerHeight]]"
          dynamic-menu-config="[[dynamicMenuConfig]]"
          tooltip-data="[[_registerTooltipData]]"
          chart-data="[[_filteredData]]"
          complete-series-config="[[completeSeriesConfig]]"
          muted-series={{mutedSeries}}
          type="{{_registerType}}"
          x-axis-type="[[xAxisType]]"
          y-axis-type="[[yAxisType]]"
          current-page="[[_registerCurrentPage]]"
          total-pages="[[_registerTotalPages]]"
          display-page-arrows="[[_registerDisplayPageArrows]]">
        </px-vis-register>
        <div id="drawingWrapper" class="flex--col inline--flex">
          <px-vis-toolbar
            id="toolbar"
            current-sub-config="[[toolbarSubConfig]]"
            action-config="{{actionConfig}}"
            within-chart
            chart-margin="[[_internalMargin]]"
            show-tooltip="{{_internalShowTooltip}}"
            config='{"zoom": true, "pan": true, "tooltip": true}'>
          </px-vis-toolbar>
          <!-- Core -->
          <px-vis-tooltip
            id="tooltip"
            tooltip-data="[[tooltipData]]"
            chart-data="[[_filteredData]]"
            muted-series="[[mutedSeries]]"
            x-axis-type="[[xAxisType]]"
            y-axis-type="[[yAxisType]]"
            complete-series-config="[[completeSeriesConfig]]"
            mouse-position="[[mousePosition]]"
            hover-target="[[mouseRect]]"
            tooltip-style="light"
            hard-mute="[[hardMute]]"
            series-keys="[[_seriesKeys]]">
          </px-vis-tooltip>
          <px-vis-svg-canvas
            class="inline--flex"
            id="svg"
            width="[[width]]"
            height="[[height]]"
            margin="[[_internalMargin]]"
            canvas-context="{{canvasContext}}"
            canvas-layers="{{canvasLayers}}"
            canvas-layers-config="[[canvasLayersConfig]]"
            svg="{{svg}}"
            px-svg-elem="{{pxSvgElem}}"
            svg-lower="{{svgLower}}"
            px-svg-elem-lower="{{pxSvgElemLower}}">
              <px-vis-annotations
                slot="4"
                svg="[[svg]]"
                x="[[x]]"
                y="[[y]]"
                margin="[[_internalMargin]]"
                domain-changed="[[domainChanged]]"
                complete-series-config="[[completeSeriesConfig]]"
                annotation-data="[[annotationData]]"
                show-strong-icon="[[showStrongIcon]]">
              </px-vis-annotations>
          </px-vis-svg-canvas>
        </div>
        <px-vis-clip-path
          svg="[[layer.1]]"
          x="[[x]]"
          y="[[y]]"
          width="[[width]]"
          height="[[height]]"
          margin="[[_internalMargin]]"
          clip-path="{{clipPath}}"
          series-clip-path-y-offset="-5"
          series-clip-path="{{seriesClipPath}}">
        </px-vis-clip-path>
        <!-- scatter series -->
        <template is="dom-repeat" items="[[_seriesKeys]]">
          <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="[[_filteredData]]"
                renderer-type="filteredChartData"
                complete-series-config="[[completeSeriesConfig]]"
                width="[[width]]"
                height="[[height]]"
                margin="[[_internalMargin]]"
                x="[[x]]"
                y="[[_returnYScale(item, completeSeriesConfig, domainChanged)]]"
                clip-path
                domain-changed="[[domainChanged]]"
                muted-series="[[mutedSeries]]"
                serie-to-redraw-on-top="[[serieToRedrawOnTop]]">
              </px-vis-scatter-canvas>
            </template>
            <template is="dom-if" if="[[!renderToCanvas]]" restamp>
              <px-vis-scatter
                svg="[[layer.1]]"
                series-id="[[item]]"
                chart-data="[[_filteredData]]"
                x="[[x]]"
                y="[[_returnYScale(item, completeSeriesConfig, domainChanged)]]"
                domain-changed="[[domainChanged]]"
                muted-series="[[mutedSeries]]"
                clip-path="[[seriesClipPath]]"
                complete-series-config="[[completeSeriesConfig]]"
                serie-to-redraw-on-top="[[serieToRedrawOnTop]]">
              </px-vis-scatter>
            </template>
          </template>
          <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]]"
                renderer-type="filteredChartData"
                series-id="[[item]]"
                chart-data="[[_filteredData]]"
                complete-series-config="[[completeSeriesConfig]]"
                x="[[x]]"
                y="[[_returnYScale(item, completeSeriesConfig, domainChanged)]]"
                domain-changed="[[domainChanged]]"
                show-gaps="[[showGaps]]"
                muted-series="[[mutedSeries]]"
                width="[[width]]"
                height="[[height]]"
                margin="[[_internalMargin]]"
                clip-path
                interpolation-function="[[interpolationFunction]]"
                serie-to-redraw-on-top="[[serieToRedrawOnTop]]">
              </px-vis-line-canvas>
            </template>
            <template is="dom-if" if="[[!renderToCanvas]]" restamp>
              <px-vis-line-svg
                svg="[[layer.1]]"
                series-id="[[item]]"
                chart-data="[[_filteredData]]"
                x="[[x]]"
                y="[[_returnYScale(item, completeSeriesConfig, domainChanged)]]"
                show-gaps="[[showGaps]]"
                domain-changed="[[domainChanged]]"
                muted-series="[[mutedSeries]]"
                clip-path="[[seriesClipPath]]"
                complete-series-config="[[completeSeriesConfig]]"
                interpolation-function="[[interpolationFunction]]"
                serie-to-redraw-on-top="[[serieToRedrawOnTop]]">
              </px-vis-line-svg>
            </template>
          </template>
        </template>
        <px-vis-cursor
          id="cursor"
          svg="[[layer.2]]"
          width="[[width]]"
          height="[[height]]"
          margin="[[_internalMargin]]"
          chart-data="[[_filteredData]]"
          tooltip-data="[[_registerTooltipData]]"
          complete-series-config="[[completeSeriesConfig]]"
          clip-path="[[seriesClipPath]]"
          muted-series="[[mutedSeries]]"
          hard-mute="[[hardMute]]"
          series-keys="[[_seriesKeys]]">
        </px-vis-cursor>
      </div>

      <!-- X axis -->
      <px-vis-axis
        id="xAxis"
        svg="[[layer.0]]"
        axis-type="[[xAxisType]]"
        axis="[[x]]"
        height="[[height]]"
        width="[[width]]"
        margin="[[_internalMargin]]"
        orientation="[[xAxisLocation]]"
        complete-series-config="[[completeSeriesConfig]]"
        prevent-series-bar
        domain-changed="[[domainChanged]]"
        muted-series="[[mutedSeries]]">
      </px-vis-axis>
      <!-- Y axis -->
      <px-vis-multi-axis
        id="yAxes"
        svg="[[layer.0]]"
        width="[[width]]"
        height="[[height]]"
        margin="[[_internalMargin]]"
        left-axis-size="[[leftAxisSize]]"
        right-axis-size="[[rightAxisSize]]"
        x="[[_axisX]]"
        y="[[y]]"
        domain-changed="[[_bothDomainsSet(_axisDomainChanged, domainChanged)]]"
        complete-series-config="[[_multiAxisSeriesConfig]]"
        chart-data="[[chartData]]"
        dimensions="[[dimensions]]"
        axes="[[axes]]"
        axis-config="[[yAxisConfig]]"
        append-unit-in-title
        orientation-from-dimensions
        disable-brush
        cartesian-drag-behavior
        allow-empty-title
        series-to-axes="[[seriesToAxes]]"
        muted-series="[[mutedSeries]]"
        action-config="[[_axisActionConfig]]">
      </px-vis-multi-axis>

      <template is="dom-if" if="[[!hideGridlinesX]]" restamp>
        <px-vis-gridlines
          svg="[[svgLower]]"
          axis="[[x]]"
          margin="[[_internalMargin]]"
          length="[[height]]"
          orientation="bottom"
          domain-changed="[[domainChanged]]">
        </px-vis-gridlines>
      </template>

      <template is="dom-if" if="[[_showHorizontalGrid(hideGridlinesY, axes, y, matchTicks)]]" restamp>
        <px-vis-gridlines
          svg="[[svgLower]]"
          axis="[[_returnGridAxis(domainChanged)]]"
          margin="[[_internalMargin]]"
          length="[[width]]"
          orientation="left"
          domain-changed="[[domainChanged]]">
        </px-vis-gridlines>
      </template>

      <px-vis-interaction-space
        id="interactionSpace"
        svg="[[layer.3]]"
        width="[[width]]"
        height="[[height]]"
        margin="[[_internalMargin]]"
        x="[[x]]"
        y="[[y]]"
        domain-changed="[[domainChanged]]"
        use-quadtree
        series-keys="[[_seriesKeys]]"
        chart-data="[[_filteredData]]"
        chart-id="[[chartId]]"
        tooltip-data="{{tooltipData}}"
        crosshair-data="{{crosshairData}}"
        default-empty-data="[[defaultEmptyData]]"
        generating-crosshair-data="{{generatingCrosshairData}}"
        extents-data="{{extentsData}}"
        x-axis-type="[[xAxisType]]"
        y-axis-type="[[yAxisType]]"
        complete-series-config="[[completeSeriesConfig]]"
        mouse-rect="{{mouseRect}}"
        time-data="[[timeData]]"
        action-config="{{actionConfig}}"
        show-tooltip="{{_computedShowTooltip}}"
        selection-type="[[selectionType]]"
        prevent-web-worker-synchronization="[[preventWebWorkerSynchronization]]"
        ww-data-sync-counter="[[wwDataSyncCounter]]"
        extents-action="{{extentsAction}}"
        hard-mute="[[hardMute]]"
        muted-series="[[mutedSeries]]"
        log-base="[[logBase]]">
      </px-vis-interaction-space>

      <px-vis-markers
        canvas-context="[[canvasLayers.markers]]"
        canvas-layers-config="{{canvasLayersConfig}}"
        width="[[width]]"
        height="[[height]]"
        x="[[x]]"
        domain-changed="[[domainChanged]]"
        marker-data="[[markerData]]"
        marker-config="[[markerConfig]]"
        margin="[[_internalMarginMarkers]]"
        resources="[[resources]]"
        language="[[language]]"
        formats="[[formats]]">
      </px-vis-markers>

      <px-vis-event
        svg="[[layer.0]]"
        event-data="[[eventData]]"
        x-axis-type="[[xAxisType]]"
        height="[[height]]"
        margin="[[_internalMargin]]"
        x="[[x]]"
        domain-changed="[[domainChanged]]"
        event-config="[[eventConfig]]"
        clip-path="[[clipPath]]"
        resources="[[resources]]"
        language="[[language]]"
        formats="[[formats]]">
      </px-vis-event>
    </div>

    <template id="highlighterDomIf" is="dom-if" if="[[renderToCanvas]]" restamp on-dom-change="_highlighterConfigChanged">
      <px-vis-highlight-point-canvas
        id="highlighterCanvas"
        width="[[width]]"
        height="[[height]]"
        margin="[[_internalMargin]]"
        canvas-context="[[canvasLayers.highlighter]]"
        canvas-layers-config="{{canvasLayersConfig}}"
        layers-to-mask="[[canvasContext]]"
        clip-path
        x="[[x]]"
        y="[[y]]"
        domain-changed="[[domainChanged]]"
        time-data="[[timeData]]"
        complete-series-config="[[completeSeriesConfig]]"
        series-keys="[[_seriesKeys]]"
        chart-data="[[chartData]]"
        generating-crosshair-data="[[generatingCrosshairData]]"
        default-empty-data="{{defaultEmptyData}}"
        crosshair-data="[[crosshairData]]"
        tooltip-data="{{tooltipData}}"
        hard-mute="[[hardMute]]"
        muted-series="[[mutedSeries]]">
      </px-vis-highlight-point-canvas>
    </template>
    <template is="dom-if" if="[[!renderToCanvas]]" restamp on-dom-change="_highlighterConfigChanged">
      <px-vis-highlight-point
        id="highlighter"
        svg="[[layer.2]]"
        layers-to-mask="[[layer.1]]"
        x="[[x]]"
        y="[[y]]"
        domain-changed="[[domainChanged]]"
        time-data="[[timeData]]"
        series-keys="[[_seriesKeys]]"
        complete-series-config="[[completeSeriesConfig]]"
        chart-data="[[chartData]]"
        generating-crosshair-data="[[generatingCrosshairData]]"
        crosshair-data="[[crosshairData]]"
        default-empty-data="{{defaultEmptyData}}"
        tooltip-data="{{tooltipData}}"
        clip-path="[[seriesClipPath]]"
        hard-mute="[[hardMute]]"
        muted-series="[[mutedSeries]]">
      </px-vis-highlight-point>
    </template>

    <template id="ref" is="dom-if" if="[[_showRef(referenceData.*)]]" restamp>
      <px-vis-reference-curve
        id="referenceCurve"
        chart-id="[[chartId]]"
        svg="[[layer.2]]"
        x="[[x]]"
        y="[[y]]"
        domain-changed="[[domainChanged]]"
        reference-config="[[referenceConfig]]"
        reference-data="[[referenceData]]"
        clip-path="[[seriesClipPath]]">
      </px-vis-reference-curve>
    </template>

    <px-tooltip
      id="centralTooltip"
      smart-orientation
      ignore-target-events
      orientation="[[tooltipOrientation]]">
      <px-vis-central-tooltip-content
        resources="[[resources]]"
        use-key-if-missing="[[useKeyIfMissing]]"
        language="[[language]]"
        first-date-time-format="[[firstDateTimeFormat]]"
        second-date-time-format="[[secondDateTimeFormat]]"
        separator="[[separator]]"
        timezone="[[timezone]]">
      </px-vis-central-tooltip-content>
    </px-tooltip>

  </template>
</dom-module>

<script>
  Polymer({

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

    behaviors: [
      PxVisBehavior.observerCheck,
      PxVisBehaviorScale.scale,
      PxVisBehaviorD3.svg,
      PxVisBehaviorD3.axes,
      PxVisBehaviorD3.selectedDomain,
      PxVisBehaviorD3.clipPath,
      PxVisBehavior.dataset,
      PxVisBehavior.mutedSeries,
      PxVisBehavior.sizing,
      PxVisBehavior.tooltipData,
      PxVisBehavior.extentsData,
      PxVisBehavior.chartExtents,
      PxVisBehavior.axisTypes,
      PxVisBehavior.events,
      PxVisBehavior.completeSeriesConfig,
      PxVisBehaviorChart.chartCommon,
      PxVisBehaviorChart.saveImage,
      PxVisBehaviorChart.subConfiguration,
      PxVisBehaviorChart.timeFiltering,
      PxVisBehaviorD3.domainUpdate,
      PxVisBehaviorChart.registerPositioning,
      PxVisBehaviorChart.chartAutoResize,
      PxVisBehaviorChart.layers,
      PxColorsBehavior.dataVisColorTheming,
      PxVisBehavior.serieToRedrawOnTop,
      PxVisBehavior.dynamicMenuConfig,
      PxVisBehavior.actionConfig,
      PxVisBehaviorChart.zooming,
      PxVisBehaviorChart.actionRequest,
      PxVisBehaviorChart.toolbarSubConfig,
      PxVisBehaviorChart.noDebounceOnPanning,
      PxVisBehaviorChart.chartToolbarConfig,
      PxVisBehaviorChart.multiAxis,
      PxVisBehaviorD3.lineGaps,
      PxVisBehaviorChart.showTooltip,
      PxVisBehavior.muteUnmuteSeries,
      PxVisBehavior.zoomSelection,
      PxVisBehaviorChart.tooltipFollowMouseCalculation,
      PxVisBehavior.selectionType,
      PxVisBehaviorD3.canvasContext,
      PxVisBehaviorD3.renderToCanvas,
      PxVisBehaviorChart.highlighterConfigs,
      PxVisBehaviorChart.mouseCusorConfig,
      PxVisBehavior.crosshairData,
      PxVisBehaviorChart.webWorkerSynchronization,
      Polymer.AppLocalizeBehavior,
      PxVisBehaviorRenderer.base,
      PxVisBehavior.annotationData,
      PxVisBehaviorChart.cursorConfig,
      PxVisBehaviorChart.registerPagnation,
      PxVisBehaviorChart.sizeVerticalRegister,
      PxVisBehavior.referenceCurveProps,
      PxVisBehaviorChart.centralTooltip

    ],
    properties: {
      /** 
       * Determines the position of the X axis.
       * - `bottom`
       * - `top`
       *
       * @property xAxisLocation
       * @type String
       * @default bottom
       */
      xAxisLocation: {
        type: String,
        value: 'bottom'
      },
      /**
       * Configuration object used to customize the X axis cosmetic properties.
       * Please refer to px-vis-axis (https://github.com/PredixDev/px-vis) for a list of supported proerties
       *
       */
      xAxisConfig: {
        type: Object
      },
      /**
       * Configuration object used to customize the Y axis cosmetic properties.
       * Please refer to px-vis-axis (https://github.com/PredixDev/px-vis) for a list of supported proerties
       *
       */
      yAxisConfig: {
        type: Object
      },
      /**
       * Configuration object used to customize the tooltip.
       * Please refer to px-vis-tooltip (https://github.com/PredixDev/px-vis) for a list of supported properties.
       * Most interesting properties include:
       * -width
       * -height
       *
       */
      tooltipConfig: {
        type: Object
      },
      /**
       * Configuration object used to customize the tooltip.
       * Please refer to px-vis-register (https://github.com/PredixDev/px-vis) for a list of supported properties.
       * Most interesting properties include:
       * -width
       * -height
       *
       */
      registerConfig: {
        type: Object
      },
      mouseRect: {
        type: Object
      },
      /**
       * Whether to hide the gridlines perpendicular to the X axis
       */
      hideGridlinesX: {
        type: Boolean,
        value: false
      },
      /**
       * Whether to hide the gridlines perpendicular to the Y axis
       */
      hideGridlinesY: {
        type: Boolean,
        value: false
      },

      /**
       * Defines the adjusted margin for adding markers. By default the chart
       * already calculates margins for the markers (taking into account
       * axes and normal margin) but this can be used to manually adjust
       * where the markers are drawn
       * margin object:
       * - top
       * - bottom
       * - left
       * - right
       * Not every property needs to be defined, only the one that have been
       * defined will be used.
       */
      marginMarkersAdjustment: {
        type: Object,
        value: function() { return {}; },
      },
      _internalMargin: {
        type: Object,
        notify: true
      },
      _internalMarginNav: {
        type: Object
      },
      _internalMarginMarkers: {
        type: Object
      },

      /**
       * A boolean to specify if the axis ticks should align (which affects
       * their individual range). Default (false) is for each have their own
       * ranges and tick marks may not align
       * Only useful if using multiple axis
       */
      matchTicks: {
        type: Boolean,
        value: false
      },

      _axisActionConfig: {
        type: Object,
        notify: true,
        computed: '_computeAxisActionConfig(dimensions.*, _isAttached)'
      },

      /**
       * List of key/values to be included for translating this component
       */
      resources: {
        type: Object
      },
      /**
      * set a default for localizing
      */
      language: {
        type: String,
        value: 'en'
      },
      /**
      * Use the key for localization if value for  language is missing. Should
      * always be true for  our components
      */
      useKeyIfMissing: {
        type: Boolean,
        value: true
      }
    },
    observers: [
      '_xAxisConfigChanged(xAxisConfig.*)',
      '_toolbarConfigChanged(toolbarConfig.*)',
      '_createLayersOnce(svg, numberOfLayers)',
      '_highlighterConfigChanged(highlighterConfig.*)',
      '_mouseCursorConfigChanged(mouseCursorConfig.*)',
      '_cursorConfigChanged(cursorConfig.*)',
      '_interactionSpaceConfigChanged(interactionSpaceConfig.*)',
      '_registerConfigChanged(registerConfig.*)',
      '_tooltipConfigChanged(tooltipConfig.*)',

      '_calcAxes(completeSeriesConfig.*)',
      '_calcAxes(leftAxisSize, rightAxisSize)',
      '_calcMargins(margin.*, numRightAxes, numLeftAxes)',
      '_calcMarkerMargins(_internalMargin, marginMarkersAdjustment)',
      '_setXScale(width, _internalMargin)',
      '_setMultiYScale(height, _internalMargin, axes.*)',
      '_setDomainCaller(wwDataSyncCounter, x, y, dataExtents, seriesToAxes.*)',
      '_setDomainCaller(x, y, dataExtents, seriesToAxes.*)',
      '_setDomainCaller(x, y, chartExtents, dataExtents)',
      '_updateDomain(selectedDomain)',
      '_keepDataInSync(_filteredData.*, chartId)',
      '_seriesKeysChanged(_seriesKeys.*)',
      '_langChanged(language)',
      '_mutedChanged(mutedSeries.*, hardMute)',
      '_tooltipDataUpdated(tooltipData.*)',

      //renderer
      '_renderFilteredChartData(domainChanged, canvasContext, _filteredData.*, completeSeriesConfig.*, preventInitialDrawing, renderToCanvas)',
      '_renderOnMute(mutedSeries.*)',
      '_renderHighlight(domainChanged, canvasLayers.highlighter, completeSeriesConfig.*, preventInitialDrawing)',
      '_renderSeriesOnTop(serieToRedrawOnTop)',
      '_renderMarkers(canvasLayers.markers, domainChanged, markerData, markerConfig, preventInitialDrawing)'
    ],

    created: function() {
      this._tooltipCalcHoverTargetId = 'wrapper';
      this._wwSyncDataPropName = '_filteredData';
    },

    ready: function() {
      this.set('_verticalRegisterDrawingCanvasId', 'svg');
      this.set('_verticalRegisterHeightDeductions', ['toolbar']);
      this.set('numberOfLayers',4);
    },
    attached: function() {
      this._isAttached = true;
    },

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

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

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

      this._applyConfigToElement(this.tooltipConfig, this.$.tooltip);
    },
    _registerConfigChanged: function(conf) {
     if(this.hasUndefinedArguments(arguments)) {
       return;
     }

      this._applyConfigToElement(this.registerConfig, this.$.register);
    },
    _toolbarConfigChanged: function(conf) {
     if(this.hasUndefinedArguments(arguments)) {
       return;
     }

      this._applyConfigToElement(this.toolbarConfig, this.$.toolbar);
    },
    _interactionSpaceConfigChanged: function(interactionSpaceConfig) {
     if(this.hasUndefinedArguments(arguments)) {
       return;
     }

      this._applyConfigToElement(this.interactionSpaceConfig, this.$.interactionSpace)
    },

    _highlighterConfigChanged: function() {

      var elem = this.renderToCanvas ? this.$$('#highlighterCanvas') : this.$$('#highlighter');
      if(elem && this._doesObjHaveValues(this.highlighterConfig)) {
        this._applyConfigToElement(this.highlighterConfig, elem);
      }
    },
    _cursorConfigChanged: function(conf) {
     if(this.hasUndefinedArguments(arguments)) {
       return;
     }

      this._applyConfigToElement(this.cursorConfig, this.$.cursor);
    },
    _mouseCursorConfigChanged: function(conf) {
     if(this.hasUndefinedArguments(arguments)) {
       return;
     }

      this._applyConfigToElement(this.mouseCursorConfig, this.$.mouseCursor);
    },

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

      //make sure we clean the canvas so that ols series are removed
      if(this.renderToCanvas && this.canvasContext && this.canvasContext.pxClearCanvas) {
        this.canvasContext.pxClearCanvas();
      }
    },

    _resizeCalculations: function() {

      //make sure we are not preventing resize in case it changed while debouncing
      if(this.preventResize) {
        return;
      }
      var wrapperRect = this.$.wrapper.getBoundingClientRect(),
          registerRect = this.$.register.getBoundingClientRect(),
          toolbarRect = this.$.toolbar.getBoundingClientRect(),
          heightDeduct = 0,
          widthDeduct = 0;


      if(this.$.register.type === 'horizontal') {
        heightDeduct += registerRect.height;
      } else {
        widthDeduct += registerRect.width;
      }

      heightDeduct += toolbarRect.height;

      this.set('width', Math.max(wrapperRect.width - widthDeduct, 0));
      this.set('height', Math.max(wrapperRect.height - heightDeduct, 0));
      this._computeVerticalRegisterHeight([toolbarRect.height]);
    },

    /**
     * Overwrites default margins based on settings
     *
     * @method _calcMargins
     */
    _calcMargins:function() {
     if(this.hasUndefinedArguments(arguments)) {
       return;
     }

      this.debounce('_calcMargin', function() {
        var margin,
            topMargin = 25,
            rightMargin = 10,
            bottomMargin = 10,
            leftMargin = 10;

        // if the dev didnt set the margin, then calc it
        if(JSON.stringify(this._defaultMargin) === JSON.stringify(this.margin)) {
          if(this.xAxisLocation === 'bottom') {
            bottomMargin = 40;
          } else if(this.xAxisLocation === 'top') {
            topMargin = 40;
          }

          if(this.yAxisLocation === 'left') {
            leftMargin = 50;
          } else if(this.yAxisLocation === 'right') {
            rightMargin = 50;
          }

          margin = {
            'top': topMargin,
            'right': rightMargin,
            'bottom': bottomMargin,
            'left': leftMargin
          };

          this._calcMultiMargins(margin, 50, 50);

        } else { //is dev set, use it
          margin = {
            'top': Number(this.margin.top) || Number(this.margin.top) === 0 ? Number(this.margin.top) : topMargin,
            'right': Number(this.margin.right) || Number(this.margin.right) === 0 ? Number(this.margin.right) : rightMargin,
            'bottom': Number(this.margin.bottom) || Number(this.margin.bottom) === 0 ? Number(this.margin.bottom) : bottomMargin,
            'left':  Number(this.margin.left) || Number(this.margin.left) === 0 ? Number(this.margin.left) : leftMargin
          };

          // FIXME
          // assume the margin is the side for one axis. Might not be a good assumption. Rethink this
          this._calcMultiMargins(margin, margin.left, margin.right);
        }

        this.set('_internalMargin', margin);

      }, 5);
    },
    _calcMarkerMargins: function () {
      if (this.hasUndefinedArguments(arguments)) {
        return;
      }

      var newMarg = {
        'top': this._internalMargin.top,
        'left': this._internalMargin.left,
        'right': this._internalMargin.right,
        'bottom': this._internalMargin.bottom
      }

      // Handle X axis
      if (this.xAxisLocation === 'bottom') {
        newMarg.bottom -= 40;
      } else if (this.xAxisLocation === 'top') {
        newMarg.top -= 40;
      }

      newMarg.top += Number(this.marginMarkersAdjustment.top || 0);
      newMarg.bottom += Number(this.marginMarkersAdjustment.bottom || 0);
      newMarg.left += Number(this.marginMarkersAdjustment.left || 0);
      newMarg.right += Number(this.marginMarkersAdjustment.right || 0);

      this.set('_internalMarginMarkers', newMarg);
    },

    _showHorizontalGrid: function(hideGrid, axes, y, matchTicks) {
      if(this.hasUndefinedArguments(arguments)) {
        return;
      }

      if(hideGrid) {
        return false;
      }

      if(this.axes.length > 1 && !matchTicks) {
        return false;
      }

      return true;
    },

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

        return this.y[this.axes[0]];
    },

    _returnXDomain: function() {
      if(this.domainChanged) {
        return this.x.domain();
      }
    },

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

      if(this.hardMute === true) {
        this._setDomainCaller();
      }
    },

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

      if(this._doesObjHaveValues(this.seriesToAxes)) {
        this._setDomain();
      }
    },

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

      if(this.domainChanged && this._axisDomainChanged) {
		  // check if 'this.$.yAxes.domainChanged' is undefined use
		  // 'this.domainChanged' to initialize 'domainChanged' property on 'px-vis-multi-axis'
		  return this.$.yAxes.domainChanged ? (this.$.yAxes.domainChanged + 1) : (this.domainChanged + 1);
      }
    },

    _renderOnMute: function() {
      if(!this.domainChanged || !this.canvasContext) {
        return;
      }

      if(this.hardMute) {
        this.canvasContext.pxClearCanvas();
        return;
      }

      this._renderFilteredChartData();
    },

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

      var conf;

      conf = this.dimensions.length > 2 ? {
          "mouseout": null,
          "mousemove": null,
          "mousedown": 'callAxisDrag',
          "mouseup": 'callAxisDrag'
        } : {
          "mouseout": null,
          "mousemove": null,
          "mousedown": null,
          "mouseup": null
        };

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

      //recreate X and Y in case d3 locale changed
      this._recreateScales(this.width, this.height, this._internalMargin);
    },

    _showRef: function() {
      return this.referenceData && this.referenceData.length ? true : false;
    }
  });
</script>