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

GitLab UI Components

import merge from 'lodash/merge';
import Chart from '../chart/chart';
import ChartLegend from '../legend/legend';
import ChartTooltip from '../tooltip/tooltip';
import ToolboxMixin from '../../mixins/toolbox_mixin';
import defaultChartOptions, { dataZoomAdjustments, mergeSeriesToOptions, grid } from '../../../utils/charts/config';
import { debounceByAnimationFrame, hexToRgba } from '../../../utils/utils';
import { colorFromPalette } from '../../../utils/charts/theme';
import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format';
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';

var script = {
  components: {
    Chart: Chart,
    ChartTooltip: ChartTooltip,
    ChartLegend: ChartLegend,
    TooltipDefaultFormat: TooltipDefaultFormat
  },
  mixins: [ToolboxMixin],
  inheritAttrs: false,
  props: {
    data: {
      type: Array,
      required: true
    },
    option: {
      type: Object,
      required: false,
      default: function _default() {
        return {};
      }
    },
    presentation: {
      type: String,
      required: false,
      default: 'stacked',
      validator: function validator(value) {
        return ['stacked', 'tiled'].indexOf(value) !== -1;
      }
    },
    groupBy: {
      type: Array,
      required: true
    },
    xAxisType: {
      type: String,
      required: true,
      validator: function validator(value) {
        return ['value', 'category', 'time', 'log'].indexOf(value) !== -1;
      }
    },
    xAxisTitle: {
      type: String,
      required: true
    },
    yAxisTitle: {
      type: String,
      required: true
    },
    seriesNames: {
      type: Array,
      required: true
    },
    legendAverageText: {
      type: String,
      required: false,
      default: 'Avg'
    },
    legendMaxText: {
      type: String,
      required: false,
      default: 'Max'
    }
  },
  data: function data() {
    return {
      chart: null,
      showTooltip: false,
      tooltipTitle: '',
      tooltipContent: {},
      tooltipPosition: {
        left: '0',
        top: '0'
      },
      debouncedMoveShowTooltip: debounceByAnimationFrame(this.moveShowTooltip)
    };
  },
  computed: {
    series: function series() {
      var _this = this;

      return this.data.map(function (series, index) {
        var barColor = colorFromPalette(index);
        return {
          type: 'bar',
          stack: _this.presentation === 'stacked' ? _this.groupBy : null,
          name: _this.seriesNames[index],
          data: series,
          barMaxWidth: '50%',
          itemStyle: {
            color: hexToRgba(barColor, 0.2),
            barBorderColor: barColor,
            barBorderWidth: 1
          },
          emphasis: {
            itemStyle: {
              color: hexToRgba(barColor, 0.4)
            }
          }
        };
      });
    },
    options: function options() {
      var mergedOptions = merge({}, defaultChartOptions, {
        xAxis: {
          boundaryGap: true,
          axisLabel: {
            margin: 20,
            verticalAlign: 'bottom'
          },
          axisLine: {
            show: false
          },
          axisPointer: {
            show: true,
            type: 'none',
            label: {
              formatter: this.onLabelChange
            }
          },
          data: this.groupBy,
          name: this.xAxisTitle,
          type: this.xAxisType
        },
        yAxis: {
          name: this.yAxisTitle,
          axisTick: {
            show: false
          }
        },
        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);
    },
    legendStyle: function legendStyle() {
      return {
        paddingLeft: "".concat(grid.left, "px")
      };
    },
    compiledOptions: function compiledOptions() {
      return this.chart ? this.chart.getOption() : null;
    },
    seriesInfo: function seriesInfo() {
      return this.compiledOptions.series.reduce(function (acc, series, index) {
        acc.push({
          name: series.name,
          type: series.type,
          color: colorFromPalette(index),
          data: series.data.map(function (data) {
            return data;
          })
        });
        return acc;
      }, []);
    }
  },
  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, "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);
    },
    onUpdated: function onUpdated(chart) {
      this.$emit('updated', chart);
    },
    onLabelChange: function onLabelChange(params) {
      var _params$seriesData$re = params.seriesData.reduce(function (acc, bar) {
        var barColor = colorFromPalette(bar.seriesIndex);
        acc.tooltipContent[bar.seriesName] = {
          value: bar.value,
          index: bar.seriesIndex,
          color: barColor
        };
        return acc;
      }, {
        tooltipContent: {}
      }),
          tooltipContent = _params$seriesData$re.tooltipContent;

      this.tooltipTitle = params.value;
      this.$set(this, 'tooltipContent', tooltipContent);
    }
  }
};

/* 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,"updated":_vm.onUpdated}},'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(),_vm._v(" "),(_vm.compiledOptions)?_c('chart-legend',{style:(_vm.legendStyle),attrs:{"chart":_vm.chart,"series-info":_vm.seriesInfo,"text-style":_vm.compiledOptions.textStyle,"average-text":_vm.legendAverageText,"max-text":_vm.legendMaxText}}):_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__;