px-vis-tooltip.html

<link rel="import" href="../polymer/polymer.html"/>
<link rel="import" href="../px-tooltip/px-tooltip.html" />
<link rel="import" href="px-vis-behavior-common.html" />
<link rel="import" href="px-vis-behavior-register.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-register.html" />


<!--
Element providing on-chart tooltip display
- Consumes tooltipData property


##### Usage

    <px-vis-tooltip
        hover-target=[[mouseRect]]
        mouse-position="[[mousePosition]]"
        width="250"
        margin="[[margin]]"
        chart-data="[[chartData]]"
        tooltip-data="[[tooltipData]]"
        complete-series-config="[[completeSeriesConfig]]"
        x-axis-type="time"
        tooltip-style="light"
        muted-series="[[mutedSeries]]">
    </px-vis-tooltip>

@element px-vis-tooltip
@blurb Element providing on-chart hover functionality to get data values near the mouse cursor.
@homepage index.html
@demo demo.html

-->

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

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

    <template is="dom-if" if="[[_tooltipDataHidden(tooltipData)]]">
      <px-tooltip
        id="tooltip"
        tooltip-style="[[tooltipStyle]]"
        for="[[hoverTarget]]"
        delay="50"
        orientation="[[orientation]]"
        follow-mouse
        mouse-coords="[[mousePosition]]">
          <px-vis-register
            id="register"
            tooltip-style="[[tooltipStyle]]"
            truncation-length="100"
            groupings="[[_groupings]]"
            force-date-time-display="[[forceDateTimeDisplay]]"
            tooltip-data=[[tooltipData]]
            chart-data="[[chartData]]"
            x-axis-type="[[xAxisType]]"
            y-axis-type="[[yAxisType]]"
            complete-series-config="[[completeSeriesConfig]]"
            muted-series="[[mutedSeries]]"
            number-format="[[numberFormat]]"
            number-format-culture="[[numberFormatCulture]]"
            number-format-is-currency$="[[numberFormatIsCurrency]]"
            number-format-currency="[[numberFormatCurrency]]"
            number-format-zero="[[numberFormatZero]]"
            first-date-time-format="[[firstDateTimeFormat]]"
            second-date-time-format="[[secondDateTimeFormat]]"
            separator="[[separator]]"
            timezone="[[timezone]]"
            prevent-min-size>
          </px-vis-register>
      </px-tooltip>
    </template>
  </template>
</dom-module>

<script>
  Polymer({

    is: 'px-vis-tooltip',

    behaviors: [
      PxVisBehavior.dataset,
      PxVisBehavior.tooltipData,
      PxVisBehavior.axisTypes,
      PxVisBehavior.completeSeriesConfig,
      PxVisBehavior.mutedSeries,
      PxVisBehavior.formatting,
      PxVisBehaviorTime.datetime,
      PxVisBehavior.forceDateTimeDisplay,
      PxVisBehaviorRegister.groupings
    ],

    /**
     * Properties block, expose attribute values to the DOM via 'reflect'
     *
     * @property properties
     * @type Object
     */
    properties: {
      /**
       * The dom element over which the tooltip should be shown. Generally some <g> or <rect> element on the svg
       *
       */
      hoverTarget: {
        type: Object
      },
      /**
       * x,y screen position where you want the tooltip to be displayed. Can be the mouse position; can also be any arbitraty screen position.
       *
       */
      mousePosition:{
        type: Array
      },
      /**
       * Tooltip style supports two values:
       * - `light` : gives tooltip a white background
       * - `dark`  : gives tooltip a balck backgound. Default
       *
       */
      tooltipStyle: {
        type: String,
        value: "dark"
      },
      /**
       * The actual px-tooltip elem in case we need access to it higher up the dom.
       *
       */
      tooltipElem: {
        type: Object
      },
      /**
       * Orientation for the tooltip
       *
       */
      orientation: {
        type: String,
        value: "auto"
      },

      _groupings: {
        type: Number,
        value: 1,
        computed: '_checkGroups(tooltipData.*, groupings)'
      }

    }, //properties

    ready: function() {
      this.set('tooltipElem', this.$.tooltip);
    },

    detached: function() {
      this.tooltipElem.remove();
    },

    _checkGroups: function() {
      // if the dev specified a number of groups
      if(this.groupings && this.groupings > 1) {
        return this.groupings
      }

      if(this.tooltipData.series.length < 16) {
        return 1;
      } else if(this.tooltipData.series.length < 24) {
        return 2;
      } else {
        return 3;
      }
    },

    _tooltipDataHidden: function(tooltipData) {
      return tooltipData.hidden !== true;
    }
  });
</script>