iep-ui/es/multiple-data/tooltip.js

An enterprise-class UI design language and Vue-based implementation

import PropTypes from '../_util/vue-types';
import { WARN, WIND } from './enum';
import { isEmpty, isNumber } from 'lodash';

export default {
  name: 'Tooltip',
  props: {
    chartData: {
      type: Object,
      'default': function _default() {}
    },
    theme: PropTypes.oneOf(['dark', 'light']).def('dark')
  },
  data: function data() {
    return {};
  },
  render: function render() {
    var h = arguments[0];
    var chartData = this.$props.chartData;

    var eventVNodes = null;
    var footerNodes = function footerNodes() {
      return chartData.list.map(function (item) {
        var dom = '';
        if (chartData.mode === 'air') {
          switch (item.name) {
            case 'weather':
              dom = h('img', {
                attrs: { src: item.icon }
              });
              break;
            case 'windDirection':
              dom = isNumber(item.rotate) ? h('img', {
                attrs: { src: WIND },
                style: { transform: 'rotate(' + item.rotate * -1 + 'deg)' } }) : '--';
              break;
            default:
              dom = h('span', [item.value, item.mark ? h(
                'span',
                { style: 'padding: 0 5px' },
                [item.mark]
              ) : '', !isNaN(item.value * 1) ? item.unit : '']);
              break;
          }
        } else {
          dom = h('span', [item.value, !isNaN(item.value * 1) ? item.unit : '']);
        }
        if (item.event) {
          eventVNodes = h(
            'div',
            { 'class': 'tooltip-multiple-footer-item' },
            [h(
              'div',
              { 'class': 'tooltip-multiple-footer-item-left' },
              [h('img', {
                attrs: { src: WARN }
              }), h('span', ['\u4E8B\u4EF6'])]
            ), h(
              'div',
              { 'class': 'tooltip-multiple-footer-item-right' },
              [h('span', [item.event])]
            )]
          );
        }
        return h(
          'div',
          { 'class': 'tooltip-multiple-footer-item' },
          [h(
            'div',
            { 'class': 'tooltip-multiple-footer-item-left' },
            [h('span', {
              style: {
                '--bg-color': item.color && item.color !== 'transparent' ? item.color : '#116EFA'
              }
            }), h('span', [item.text])]
          ), h(
            'div',
            { 'class': 'tooltip-multiple-footer-item-right' },
            [dom]
          )]
        );
      });
    };
    return h(
      'div',
      { 'class': ['tooltip-multiple', 'tooltip-multiple-inner-' + this.theme] },
      [h(
        'div',
        { 'class': 'tooltip-multiple-header' },
        [chartData.title]
      ), h(
        'div',
        { 'class': 'tooltip-multiple-footer' },
        [footerNodes(), eventVNodes]
      )]
    );
  }
};