iep-ui/lib/time-analysis-chart/TimeAnalysisChart.js

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

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _vueTypes = require('../_util/vue-types');

var _vueTypes2 = _interopRequireDefault(_vueTypes);

var _chartTemplate = require('../chart-template');

var _chartTemplate2 = _interopRequireDefault(_chartTemplate);

var _propsUtil = require('../_util/props-util');

var _lodash = require('lodash');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

exports['default'] = {
  name: 'IepTimeAnalysisChart',
  props: (0, _propsUtil.mergeProps)({
    data: _vueTypes2['default'].object.def(function () {}),
    axis: _vueTypes2['default'].array.def(function () {
      return [];
    }),
    unit: _vueTypes2['default'].array.def(function () {
      return [];
    }),
    theme: _vueTypes2['default'].oneOf(['dark', 'light']).def('dark'),
    mixinOptions: _vueTypes2['default'].object.def(function () {}),
    paramsName: _vueTypes2['default'].array.def(function () {
      return [];
    })
  }, _chartTemplate2['default'].props),
  data: function data() {
    return {
      chartOptions: {},
      themeColor: ['#0F6EFF', '#34D59B', '#FF9540', '#A36AFF', '#FFD240', '#80D8FF', '#FB4848', '#B8C32C', '#FF7BB8', '#82A8FF']
    };
  },

  computed: {
    factor: function factor() {
      var _$props = this.$props,
          data = _$props.data,
          axis = _$props.axis,
          loading = _$props.loading,
          theme = _$props.theme;

      return {
        data: data,
        axis: axis,
        loading: loading,
        theme: theme
      };
    }
  },
  watch: {
    factor: {
      handler: function handler(e) {
        var _$props2 = this.$props,
            theme = _$props2.theme,
            mixinOptions = _$props2.mixinOptions;

        var data = (0, _lodash.cloneDeep)(e.data.data);
        if (!(0, _lodash.isEmpty)(e.data) && e.data.data) {
          data = data.map(function (item) {
            if (item[2]) {
              item[2] = isNaN(item[2] * 1) ? 0 : item[2] * 1;
            }
            return item;
          });
        }
        this.chartOptions = (0, _extends3['default'])({}, (0, _lodash.omit)(this.$props, ['data', 'axis', 'mixinOptions', 'theme']), {
          theme: theme,
          loading: e.loading,
          options: (0, _extends3['default'])({
            grid: {
              top: 0,
              bottom: '10%'
            },
            xAxis: {
              type: 'category',
              data: e.data.xAixsData ? e.data.xAixsData : ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23: 00'],
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              splitArea: {
                show: false
              }
            },
            tooltip: {
              show: true,
              formatter: function formatter(val) {
                return '<div>\n                <div>' + val.name + '</div>\n                <div>' + val.marker + ' ' + e.data.yAixsData[val.data[1]] + ': ' + e.data.data[val.dataIndex][2] + '</div>\n                </div>';
              },
              className: 'iep-chart-tooltip-' + theme
            },
            yAxis: {
              type: 'category',
              data: e.data.yAixsData ? e.data.yAixsData : ['O3', 'CO', 'NO', 'SO2', 'PM10', 'PM2.5'],
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              splitArea: {
                show: false
              },
              axisLabel: {
                align: 'left',
                margin: 34
              }
            },
            visualMap: {
              calculable: true,
              show: false,
              color: e.data.colorTransition ? e.data.colorTransition : ['rgba(255, 105, 119, 1)', 'rgba(255, 105, 119, 0.1)']
            },
            series: [{
              name: 'Punch Card',
              type: 'scatter',
              data: data,
              symbolSize: e.data.symbolSize ? e.data.symbolSize : 20,
              symbol: 'rect',
              label: {
                show: true
              }
            }]
          }, mixinOptions)
        });
      },

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

    if (!(0, _lodash.isEmpty)(chartOptions)) {
      return h(_chartTemplate2['default'], { props: (0, _extends3['default'])({}, chartOptions) });
    } else {
      return h(_chartTemplate2['default']);
    }
  }
};