px-vis-central-tooltip-content.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="../app-localize-behavior/app-localize-behavior.html"/>
<link rel="import" href="../px-icon-set/px-icon.html" />
<link rel="import" href="px-vis-behavior-datetime.html"/>
<link rel="import" href="../px-icon-set/px-icon-set-utility.html" />
<link rel="import" href="css/px-vis-central-tooltip-content-styles.html">

<!--

### Usage




@element px-vis-central-tooltip-content
@blurb Element which draws content for a central tooltip
@homepage index.html
@demo demo/index.html

-->

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

      <div class$="flex flex--middle u-mb- u-mt-- [[_buttonsShown(_multipleTooltips)]]">
        <template is="dom-if" if="[[_multipleTooltips]]">
          <button class$="btn btn--bare button--nav-left no-min-width [[_leftDisabled(_currentTooltipIndex)]]" on-click="_previousTooltip">
            <px-icon icon="px-utl:chevron-left"></px-icon>
          </button>
        </template>
        <div>
          <h1 class="epsilon u-mb- u-mt--">[[_currentData.title]]</h1>

          <template is="dom-if" if="[[_currentData.time]]">
            <div class="u-mt- u-mb-">[[_formatData(_currentData.time, 'time')]]</div>
          </template>

          <template id="infoTemplate" is="dom-repeat" items="[[_currentData.data]]" as="info">
            <div class="flex flex--justify u-mt--">
              <span class="u-mr"><b>[[localize(info.title)]]</b>:</span> <span>[[_formatInfo(info)]]</span>
            </div>
          </template>

          <template is="dom-if" if="[[_currentData.text]]">
            <div class="u-mt- u-mb-">[[_currentData.text]]</div>
          </template>
        </div>
        <template is="dom-if" if="[[_multipleTooltips]]">
          <button class$="btn btn--bare button--nav-right no-min-width [[_rightDisabled(_currentTooltipIndex)]]" on-click="_nextTooltip">
            <px-icon icon="px-utl:chevron-right"></px-icon>
          </button>
        </template>
      </div>
  </template>
</dom-module>

<script>
  Polymer({

    is: 'px-vis-central-tooltip-content',

    behaviors: [
      PxVisBehavior.observerCheck,
      Polymer.AppLocalizeBehavior,
      PxVisBehaviorTime.datetime
    ],

    /**
     * Properties block, expose attribute values to the DOM via 'reflect'
     *
     * @property properties
     * @type Object
     */
    properties: {
      _currentData: Array,
      /*
      * List of tooltips that can be displayed
      *
      * Array of Array of Objs
      *
      * Example:
      * ```
      * [{
      *   title: 'Tooltip Title',
      *   time: 123456789,
      *   text: "Blah blah"
      *   data: [{
      *     title: "Foo",
      *     value: 250,
      *     type: "number"
      *   },{
      *     title: "Bar",
      *     value: "ABC"
      *   }]
      * }]
      * ```
      *  `title` : Title to appear at the top of the tooltip
      *
      * `time` : Appears under the Title and will be formatted as a datetime using the provided datetime formating strings
      *
      * `text` : Appears at the bottom of the tooltip
      *
      * `data`: list of key value pairs to display: title:  value
      *
      * `data.title`: Will be localized
      *
      * `data.type` is optional. `values` without a type will just be displayed as provided. Valid entries are:
      *   - 'time' : instructs to format as a datetime using the provided datetime formating strings
      *   - 'number': format as a number using the px-number-formatter with provided options
      *   - 'localize': will localize value using provided resources
      *
      */
      tooltipDataResult: Array,

      /*
       * Title to display
       **/
       tooltipTitle: {
        type: String,
        value: ''
      },

      timestamp: {
        type: Number
      },

      /*
       * Whether the tooltips we are displaying can have several values (central)
       * on top of each other
       **/
      _multipleTooltips: {
        type: Boolean,
        computed: '_computeMultipleTooltips(tooltipDataResult)'
      },

      /**
       * Index of the current tooltip we are displaying (relative to tooltipDataResult)
       */
      _currentTooltipIndex: Number,

      /**
       * List of keys & values used for translating this component.
       */
      resources: {
        type: Object,
        value: function() {
          return {
            'en': {
              'Event': 'Event',
              'ID': 'ID',
              'Timestamp': 'Timestamp',
              'X': 'X'
            }
          };
        }
      },

      /**
      * Use the key for localization if value for language is missing.
      * Should always be true for Predix components.
      */
      useKeyIfMissing: {
        type: Boolean,
        value: true
      },

      /**
       * A valid IETF language tag as a string that will be
       * used to localize this component.
       *
       * See https://github.com/PolymerElements/app-localize-behavior for API
       * documentation and more information.
       */
      language: {
        type: String,
        value: 'en'
      }

    }, //properties

    observers: [
      '_dataChanged(tooltipDataResult.*)'
    ],

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

      this._currentTooltipIndex = 0;
      this._updateTooltipInfo(this.tooltipDataResult[this._currentTooltipIndex]);
    },

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

      return this.tooltipDataResult.length > 1;
    },


    _updateTooltipInfo: function() {
      this.debounce('updateInfo', function() {
        this.set('_currentData', this.tooltipDataResult[this._currentTooltipIndex]);

      }.bind(this), 5);
    },

    _previousTooltip: function() {
      this._updateTooltipInfo(this.tooltipDataResult[this._currentTooltipIndex--]);
    },

    _nextTooltip: function() {
      this._updateTooltipInfo(this.tooltipDataResult[this._currentTooltipIndex++]);
    },

    _formatData: function(data, type) {
      if(type === 'time') {
        return this._formatWholeTimestamp(data);

      } else if(type === 'number') {
        // TODO hook up number formater
        return data

      } else if(type === 'localizable') {
        return localize(data);

      }

      return data
    },

    _formatInfo: function(info) {
      return this._formatData(info.value, info.type || '');
    },

    _formatWholeTimestamp: function(time) {
      return `${this.formatTimestamp(time, this.timezone, this.firstDateTimeFormat)} ${this.separator} ${this.formatTimestamp(time, this.timezone, this.secondDateTimeFormat)}`;
    },

    _leftDisabled: function() {
      return this._currentTooltipIndex === 0 ? 'btn--disabled' : '';
    },

    _rightDisabled: function() {
      return this._currentTooltipIndex === this.tooltipDataResult.length-1 ? 'btn--disabled' : '';
    },

    _buttonsShown: function(buttonsShown) {
      return buttonsShown ? '' : ' u-ml- u-mr-';
    }
  });
</script>