iep-ui/es/double-air-line/tooltip.js

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

import toolkits from '../toolkits';
import PropTypes from '../_util/vue-types';

export default {
  name: 'Tooltip',
  props: {
    chartData: {
      type: Array,
      'default': function _default() {
        return [];
      }
    },
    gap: PropTypes.string.def('160px'),
    theme: PropTypes.oneOf(['dark', 'light']).def('dark')
  },
  data: function data() {
    return {
      topLegend: ['AQI', 'PM2.5', 'PM10', 'SO2', 'NO2', 'CO', 'O3', 'VOC'],
      bottomLegend: ['温度', '湿度', '风速', '风级'],
      endData: {
        top: [],
        bottom: []
      }
    };
  },

  watch: {
    chartData: {
      handler: function handler(e) {
        var _this = this;

        e.forEach(function (item) {
          if (_this.topLegend.includes(item.value1)) {
            _this.endData.top.push(item);
          }
          if (_this.bottomLegend.includes(item.value1)) {
            _this.endData.bottom.push(item);
          }
        });
      },

      deep: true,
      immediate: true
    }
  },
  render: function render() {
    var h = arguments[0];

    var childTopNodes = this.endData.top.map(function (item) {
      return h(
        'span',
        { 'class': 'tooltip-sub-cell' },
        [h(
          'span',
          { 'class': 'tooltip-sub-cell-item' },
          [h('span', { style: { background: item.color } }), h('span', [item.value1])]
        ), h(
          'span',
          { 'class': 'tooltip-sub-cell-item' },
          [h('span', [item.value]), h('span', [toolkits.pollutionFactors.factorDict.factor[item.value1.toLocaleLowerCase().replace('.', '')].unit || ''])]
        )]
      );
    });
    var childBottomNodes = this.endData.bottom.map(function (item) {
      return h(
        'span',
        { 'class': 'tooltip-sub-cell' },
        [h(
          'span',
          { 'class': 'tooltip-sub-cell-item' },
          [h('span', { style: { background: item.color } }), h('span', [item.value1])]
        ), h(
          'span',
          { 'class': 'tooltip-sub-cell-item' },
          [h('span', [item.value]), h('span', [item.value1 === '温度' ? '°C' : item.value1 === '湿度' ? '%' : item.value1 === '风速' ? 'm/s' : item.value1 === '风级' ? '级' : '']), h('span', [item.windVal && '(' + item.windVal + ')'])]
        )]
      );
    });
    var topNodes = this.endData.top.length > 0 ? h(
      'span',
      { 'class': 'tooltip-header tooltip-item', style: { '--gap': this.$props.gap } },
      [h(
        'span',
        { 'class': 'tooltip-title' },
        [h('span', [this.endData.top[0].date])]
      ), h(
        'span',
        { 'class': 'tooltip-sub' },
        [childTopNodes]
      )]
    ) : null;
    var bottomNodes = this.endData.bottom.length > 0 ? h(
      'span',
      { 'class': 'tooltip-footer tooltip-item' },
      [h(
        'span',
        { 'class': 'tooltip-title' },
        [h('span', [this.endData.top[0].date])]
      ), h(
        'span',
        { 'class': 'tooltip-sub' },
        [childBottomNodes]
      )]
    ) : null;
    return h(
      'span',
      { 'class': ['tooltip', 'tooltip-inner-' + this.theme] },
      [topNodes, bottomNodes]
    );
  }
};