@gitlab/ui/dist/components/charts/column/column.js

GitLab UI Components

import merge from 'lodash/merge';
import defaultChartOptions, { yAxis, generateBarSeries, generateLineSeries, gridWithSecondaryYAxis, grid, dataZoomAdjustments, mergeSeriesToOptions, getDefaultTooltipContent } from '../../../utils/charts/config';
import { CHART_TYPE_LINE, TOOLTIP_LEFT_OFFSET } from '../../../utils/charts/constants';
import { colorFromDefaultPalette } from '../../../utils/charts/theme';
import { columnOptions } from '../../../utils/constants';
import { debounceByAnimationFrame } from '../../../utils/utils';
import ToolboxMixin from '../../mixins/toolbox_mixin';
import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format';
import Chart from '../chart/chart';
import ChartTooltip from '../tooltip/tooltip';
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';

function _defineProperty(obj, key, value) {
  if (key in obj) {
    Object.defineProperty(obj, key, {
      value: value,
      enumerable: true,
      configurable: true,
      writable: true
    });
  } else {
    obj[key] = value;
  }

  return obj;
}

function ownKeys(object, enumerableOnly) {
  var keys = Object.keys(object);

  if (Object.getOwnPropertySymbols) {
    var symbols = Object.getOwnPropertySymbols(object);
    if (enumerableOnly) symbols = symbols.filter(function (sym) {
      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
    });
    keys.push.apply(keys, symbols);
  }

  return keys;
}

function _objectSpread2(target) {
  for (var i = 1; i < arguments.length; i++) {
    var source = arguments[i] != null ? arguments[i] : {};

    if (i % 2) {
      ownKeys(Object(source), true).forEach(function (key) {
        _defineProperty(target, key, source[key]);
      });
    } else if (Object.getOwnPropertyDescriptors) {
      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
    } else {
      ownKeys(Object(source)).forEach(function (key) {
        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
      });
    }
  }

  return target;
}

function _toConsumableArray(arr) {
  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
}

function _arrayWithoutHoles(arr) {
  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
}

function _iterableToArray(iter) {
  if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
}

function _unsupportedIterableToArray(o, minLen) {
  if (!o) return;
  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
  var n = Object.prototype.toString.call(o).slice(8, -1);
  if (n === "Object" && o.constructor) n = o.constructor.name;
  if (n === "Map" || n === "Set") return Array.from(o);
  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}

function _arrayLikeToArray(arr, len) {
  if (len == null || len > arr.length) len = arr.length;

  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];

  return arr2;
}

function _nonIterableSpread() {
  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}

var yAxisDefaults = _objectSpread2(_objectSpread2({}, yAxis), {}, {
  nameLocation: 'center',
  axisTick: {
    show: false
  }
});

var script = {
  components: {
    Chart: Chart,
    ChartTooltip: ChartTooltip,
    TooltipDefaultFormat: TooltipDefaultFormat
  },
  mixins: [ToolboxMixin],
  inheritAttrs: false,
  props: {
    bars: {
      type: Array,
      required: false,
      default: function _default() {
        return [];
      }
    },
    lines: {
      type: Array,
      required: false,
      default: function _default() {
        return [];
      }
    },
    secondaryData: {
      type: Array,
      required: false,
      default: function _default() {
        return [];
      }
    },
    option: {
      type: Object,
      required: false,
      default: function _default() {
        return {};
      }
    },
    yAxisTitle: {
      type: String,
      required: true
    },
    secondaryDataTitle: {
      type: String,
      required: false,
      default: ''
    },
    xAxisTitle: {
      type: String,
      required: true
    },
    xAxisType: {
      type: String,
      required: true,
      validator: function validator(value) {
        return ['value', 'category', 'time', 'log'].indexOf(value) !== -1;
      }
    }
  },
  data: function data() {
    return {
      chart: null,
      showTooltip: false,
      tooltipTitle: '',
      tooltipContent: {},
      tooltipPosition: {
        left: '0',
        top: '0'
      },
      debouncedMoveShowTooltip: debounceByAnimationFrame(this.moveShowTooltip)
    };
  },
  computed: {
    hasSecondaryAxis: function hasSecondaryAxis() {
      return Boolean(this.secondaryData.length);
    },
    barSeries: function barSeries() {
      var _this = this;

      return this.bars.map(function (_ref, index) {
        var name = _ref.name,
            data = _ref.data;
        var color = colorFromDefaultPalette(index);
        return generateBarSeries({
          stack: _this.groupBy,
          name: name,
          data: data,
          color: color
        });
      });
    },
    lineSeries: function lineSeries() {
      var offset = this.bars.length;
      return this.lines.map(function (_ref2, index) {
        var name = _ref2.name,
            data = _ref2.data;
        var color = colorFromDefaultPalette(offset + index);
        return generateLineSeries({
          name: name,
          data: data,
          color: color
        });
      });
    },
    secondarySeries: function secondarySeries() {
      var offset = this.bars.length + this.lines.length;
      return this.secondaryData.map(function (_ref3, index) {
        var name = _ref3.name,
            data = _ref3.data,
            type = _ref3.type,
            _ref3$stack = _ref3.stack,
            stack = _ref3$stack === void 0 ? columnOptions.tiled : _ref3$stack;
        var color = colorFromDefaultPalette(offset + index);
        return type === CHART_TYPE_LINE ? generateLineSeries({
          color: color,
          name: name,
          data: data,
          yAxisIndex: 1
        }) : generateBarSeries({
          color: color,
          name: name,
          data: data,
          yAxisIndex: 1,
          stack: stack
        });
      });
    },
    series: function series() {
      return [].concat(_toConsumableArray(this.barSeries), _toConsumableArray(this.lineSeries), _toConsumableArray(this.secondarySeries));
    },
    options: function options() {
      var mergedOptions = merge({}, defaultChartOptions, {
        grid: this.hasSecondaryAxis ? gridWithSecondaryYAxis : grid,
        xAxis: {
          boundaryGap: true,
          axisLabel: {
            margin: 20,
            verticalAlign: 'bottom'
          },
          axisLine: {
            show: false
          },
          axisPointer: {
            show: true,
            type: 'none',
            label: {
              formatter: this.onLabelChange
            }
          },
          name: this.xAxisTitle,
          type: this.xAxisType
        },
        yAxis: [_objectSpread2(_objectSpread2({}, yAxisDefaults), {}, {
          name: this.yAxisTitle
        }), _objectSpread2(_objectSpread2({}, yAxisDefaults), {}, {
          name: this.secondaryDataTitle,
          show: this.hasSecondaryAxis
        })],
        legend: {
          show: false
        }
      }, this.option, dataZoomAdjustments(this.option.dataZoom), this.toolboxAdjustments); // All chart options can be merged but series
      // needs to be handled specially

      return mergeSeriesToOptions(mergedOptions, this.series);
    }
  },
  beforeDestroy: function beforeDestroy() {
    this.chart.getDom().removeEventListener('mousemove', this.debouncedMoveShowTooltip);
    this.chart.getDom().removeEventListener('mouseout', this.debouncedMoveShowTooltip);
  },
  methods: {
    moveShowTooltip: function moveShowTooltip(mouseEvent) {
      this.tooltipPosition = {
        left: "".concat(mouseEvent.zrX + TOOLTIP_LEFT_OFFSET, "px"),
        top: "".concat(mouseEvent.zrY, "px")
      };
      this.showTooltip = this.chart.containPixel('grid', [mouseEvent.zrX, mouseEvent.zrY]);
    },
    onCreated: function onCreated(chart) {
      chart.getDom().addEventListener('mousemove', this.debouncedMoveShowTooltip);
      chart.getDom().addEventListener('mouseout', this.debouncedMoveShowTooltip);
      this.chart = chart;
      this.$emit('created', chart);
    },
    onLabelChange: function onLabelChange(params) {
      var _getDefaultTooltipCon = getDefaultTooltipContent(params, this.yAxisTitle),
          xLabels = _getDefaultTooltipCon.xLabels,
          tooltipContent = _getDefaultTooltipCon.tooltipContent;

      this.$set(this, 'tooltipContent', tooltipContent);
      this.tooltipTitle = xLabels.join(', ');
    }
  }
};

/* script */
const __vue_script__ = script;

/* template */
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"position-relative"},[_c('chart',_vm._g(_vm._b({attrs:{"options":_vm.options},on:{"created":_vm.onCreated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.chart)?_c('chart-tooltip',{attrs:{"show":_vm.showTooltip,"chart":_vm.chart,"top":_vm.tooltipPosition.top,"left":_vm.tooltipPosition.left}},[_c('div',{attrs:{"slot":"title"},slot:"title"},[_vm._v(_vm._s(_vm.tooltipTitle)+" ("+_vm._s(_vm.xAxisTitle)+")")]),_vm._v(" "),_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.tooltipContent}})],1):_vm._e()],1)};
var __vue_staticRenderFns__ = [];

  /* style */
  const __vue_inject_styles__ = undefined;
  /* scoped */
  const __vue_scope_id__ = undefined;
  /* module identifier */
  const __vue_module_identifier__ = undefined;
  /* functional template */
  const __vue_is_functional_template__ = false;
  /* style inject */
  
  /* style inject SSR */
  
  /* style inject shadow dom */
  

  
  const __vue_component__ = __vue_normalize__(
    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
    __vue_inject_styles__,
    __vue_script__,
    __vue_scope_id__,
    __vue_is_functional_template__,
    __vue_module_identifier__,
    false,
    undefined,
    undefined,
    undefined
  );

export default __vue_component__;