iep-ui/lib/solid-bar-chart/main.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');

var _colorUtils = require('../toolkits/colorUtils');

var _colorUtils2 = _interopRequireDefault(_colorUtils);

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

exports['default'] = {
  name: 'IepSolidBarChart',
  props: (0, _propsUtil.mergeProps)({
    xData: _vueTypes2['default'].array.def(function () {
      return [];
    }),
    yData: _vueTypes2['default'].array.def(function () {
      return [];
    }),
    barWidth: _vueTypes2['default'].number.def(20),
    color: _vueTypes2['default'].array.def(function () {
      return ['#65EDFF', '#0077EA'];
    }),
    theme: _vueTypes2['default'].oneOf(['dark', 'light']).def('dark'),
    mixinOptions: _vueTypes2['default'].object.def(function () {})
  }, _chartTemplate2['default'].props),
  render: function render() {
    var h = arguments[0];
    var _$props = this.$props,
        xData = _$props.xData,
        yData = _$props.yData,
        mixinOptions = _$props.mixinOptions,
        theme = _$props.theme,
        color = _$props.color,
        barWidth = _$props.barWidth;

    var colors = {
      type: 'linear',
      x: 0,
      x2: 1,
      y: 0,
      y2: 1,
      colorStops: [{
        offset: 0,
        color: color[0]
      }, {
        offset: 1,
        color: color[1]
      }, {
        offset: 0,
        color: color[0]
      }, {
        offset: 1,
        color: color[1]
      }]
    };
    var barColors = {
      type: 'linear',
      x: 1,
      x2: 0,
      y: 0,
      y2: 0,
      colorStops: [{
        offset: 1,
        color: color[0]
      }, {
        offset: 0,
        color: color[0]
      }, {
        offset: 0,
        color: color[0]
      }, {
        offset: 0,
        color: color[1]
      }]
    };
    var props = (0, _extends3['default'])({}, (0, _lodash.omit)(this.$props, ['xData', 'yData', 'options', 'mixinOptions', 'theme', 'color']), {
      options: (0, _extends3['default'])({
        grid: {
          containLabel: true,
          left: 0,
          right: 0,
          bottom: 0,
          top: '3%'
        },
        xAxis: {
          axisLabel: {
            color: theme === 'dark' ? '#888' : '#999999',
            fontSize: 12,
            interval: 0
          },
          splitLine: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: theme === 'dark' ? '#888' : 'rgba(153, 153, 153, 0.3)',
              width: 1
            },
            show: true
          },
          data: xData,
          type: 'category'
        },
        yAxis: {
          axisLabel: {
            color: theme === 'dark' ? '#888' : '#999999',
            fontSize: 12
          },
          splitLine: {
            show: theme === 'light',
            lineStyle: {
              color: theme === 'dark' ? '#fff' : 'rgba(153, 153, 153, 0.3)',
              type: 'dashed'
            }
          },
          axisLine: {
            lineStyle: {
              color: theme === 'dark' ? '#888' : 'rgba(153, 153, 153, 0.3)',
              width: 1
            },
            show: true
          }
        },
        series: [{
          data: yData,
          type: 'bar',
          barWidth: barWidth,
          itemStyle: {
            normal: {
              color: colors
            }
          },
          label: {
            show: true,
            position: 'top',
            distance: 10,
            color: theme === 'dark' ? '#fff' : '#333333'
          }
        }, {
          data: yData,
          type: 'bar',
          barWidth: 1.8,
          barGap: '-52%',
          itemStyle: {
            normal: {
              color: barColors
            }
          }
        }, {
          z: 3,
          type: 'pictorialBar',
          symbolPosition: 'end',
          data: yData,
          symbol: 'diamond',
          symbolOffset: ['24%', '-50%'],
          symbolSize: [barWidth, barWidth / 2],
          itemStyle: {
            normal: {
              color: _colorUtils2['default'].lighten(color[1], 0.46)
            }
          }
        }],
        tooltip: {
          trigger: 'axis',
          formatter: '{b} : {c}',
          axisPointer: {
            type: 'shadow'
          }
        }
      }, mixinOptions)
    });
    return h(_chartTemplate2['default'], { props: props });
  }
};