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

GitLab UI Components

import merge from 'lodash/merge';
import { yAxis, generateBarSeries, generateLineSeries, gridWithSecondaryYAxis, grid, defaultChartOptions, dataZoomAdjustments, mergeSeriesToOptions } from '../../../utils/charts/config';
import { LEGEND_AVERAGE_TEXT, LEGEND_MAX_TEXT, LEGEND_MIN_TEXT, LEGEND_CURRENT_TEXT, LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE, CHART_DEFAULT_SERIES_STACK, CHART_DEFAULT_SERIES_SECONDARY_STACK, CHART_TYPE_LINE, HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
import { colorFromDefaultPalette } from '../../../utils/charts/theme';
import { stackedPresentationOptions } from '../../../utils/constants';
import TooltipDefaultFormat from '../shared/tooltip/tooltip_default_format/tooltip_default_format';
import Chart from '../chart/chart';
import ChartLegend from '../legend/legend';
import ChartTooltip from '../shared/tooltip/tooltip';
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';

const yAxisDefaults = {
  ...yAxis,
  nameLocation: 'center',
  axisTick: {
    show: false
  }
};
var script = {
  name: 'GlStackedColumnChart',
  components: {
    Chart,
    ChartTooltip,
    ChartLegend,
    TooltipDefaultFormat
  },
  inheritAttrs: false,
  props: {
    bars: {
      type: Array,
      required: false,
      default: () => []
    },
    lines: {
      type: Array,
      required: false,
      default: () => []
    },
    secondaryData: {
      type: Array,
      required: false,
      default: () => []
    },
    option: {
      type: Object,
      required: false,
      default: () => ({})
    },
    presentation: {
      type: String,
      required: false,
      default: stackedPresentationOptions.stacked,
      validator: value => Object.values(stackedPresentationOptions).indexOf(value) !== -1
    },
    groupBy: {
      type: Array,
      required: true
    },
    xAxisType: {
      type: String,
      required: true,
      validator: value => ['value', 'category', 'time', 'log'].indexOf(value) !== -1
    },
    xAxisTitle: {
      type: String,
      required: true
    },
    yAxisTitle: {
      type: String,
      required: true
    },
    secondaryDataTitle: {
      type: String,
      required: false,
      default: ''
    },
    seriesNames: {
      type: Array,
      required: false,
      default: () => []
    },
    includeLegendAvgMax: {
      type: Boolean,
      required: false,
      default: true
    },
    legendAverageText: {
      type: String,
      required: false,
      default: LEGEND_AVERAGE_TEXT
    },
    legendMaxText: {
      type: String,
      required: false,
      default: LEGEND_MAX_TEXT
    },
    legendMinText: {
      type: String,
      required: false,
      default: LEGEND_MIN_TEXT
    },
    legendCurrentText: {
      type: String,
      required: false,
      default: LEGEND_CURRENT_TEXT
    },
    legendLayout: {
      type: String,
      required: false,
      default: LEGEND_LAYOUT_INLINE,
      validator(layout) {
        return [LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE].indexOf(layout) !== -1;
      }
    },
    /**
     * Callback called when showing or refreshing a tooltip.
     * **Deprecated:** Use slots `#tooltip-title`, `#tooltip-content` or `#tooltip-value`.
     *
     * @deprecated Use slots `#tooltip-title`, `#tooltip-content` or `#tooltip-value`.
     */
    formatTooltipText: {
      type: Function,
      required: false,
      default: null
    },
    customPalette: {
      type: Array,
      required: false,
      default: null
    },
    /**
     * Sets the chart's height in pixels. Set to `"auto"` to use the height of the container.
     */
    height: {
      type: [Number, String],
      required: false,
      default: null
    }
  },
  data() {
    return {
      chart: null,
      compiledOptions: null
    };
  },
  computed: {
    hasSecondaryAxis() {
      return Boolean(this.secondaryData.length);
    },
    barSeries() {
      return this.bars.map((_ref, index) => {
        let {
          name,
          data,
          stack
        } = _ref;
        const color = this.getColor(index);
        const seriesStack = this.presentation === stackedPresentationOptions.stacked ? stack || CHART_DEFAULT_SERIES_STACK : null;
        return generateBarSeries({
          stack: seriesStack,
          name,
          data,
          color
        });
      });
    },
    lineSeries() {
      const offset = this.bars.length;
      return this.lines.map((_ref2, index) => {
        let {
          name,
          data
        } = _ref2;
        const color = this.getColor(offset + index);
        return generateLineSeries({
          name,
          data,
          color
        });
      });
    },
    secondarySeries() {
      const offset = this.bars.length + this.lines.length;
      return this.secondaryData.map((_ref3, index) => {
        let {
          name,
          data,
          type,
          stack
        } = _ref3;
        const color = this.getColor(offset + index);
        const seriesStack = this.presentation === stackedPresentationOptions.stacked ? stack || CHART_DEFAULT_SERIES_SECONDARY_STACK : null;
        return type === CHART_TYPE_LINE ? generateLineSeries({
          color,
          name,
          data,
          yAxisIndex: 1
        }) : generateBarSeries({
          color,
          name,
          data,
          stack: seriesStack,
          yAxisIndex: 1
        });
      });
    },
    series() {
      return [...this.barSeries, ...this.lineSeries, ...this.secondarySeries];
    },
    options() {
      const stackedColumnChartOptions = {
        grid: this.hasSecondaryAxis ? gridWithSecondaryYAxis : grid,
        xAxis: {
          boundaryGap: true,
          axisLabel: {
            margin: 20,
            verticalAlign: 'bottom'
          },
          axisLine: {
            show: false
          },
          axisPointer: {
            type: 'none'
          },
          data: this.groupBy,
          name: this.xAxisTitle,
          type: this.xAxisType
        },
        yAxis: [{
          ...yAxisDefaults,
          name: this.yAxisTitle
        }, {
          ...yAxisDefaults,
          name: this.secondaryDataTitle,
          show: this.hasSecondaryAxis
        }]
      };

      // `formatTooltipText` is deprecated, these added options should be
      // removed when `formatTooltipText` is removed.
      const deprecatedTooltipFormatterOptions = {
        xAxis: {
          axisPointer: {
            show: true,
            label: {
              formatter: this.formatTooltipText
            }
          }
        }
      };
      const mergedOptions = merge({}, defaultChartOptions, stackedColumnChartOptions, this.formatTooltipText ? deprecatedTooltipFormatterOptions : {}, this.option, dataZoomAdjustments(this.option.dataZoom));
      // All chart options can be merged but series
      // needs to be handled specially
      return mergeSeriesToOptions(mergedOptions, this.series);
    },
    legendStyle() {
      return {
        paddingLeft: `${grid.left}px`
      };
    },
    seriesInfo() {
      var _this$compiledOptions;
      const compiledSeries = ((_this$compiledOptions = this.compiledOptions) === null || _this$compiledOptions === void 0 ? void 0 : _this$compiledOptions.series) || [];
      return compiledSeries.reduce((acc, series, index) => {
        acc.push({
          name: series.name,
          type: series.type,
          color: this.getColor(index),
          data: this.includeLegendAvgMax ? series.data.map(data => data) : undefined,
          yAxisIndex: series.yAxisIndex
        });
        return acc;
      }, []);
    },
    autoHeight() {
      return this.height === 'auto';
    }
  },
  methods: {
    getColor(index) {
      var _this$customPalette;
      return this.customPalette ? (_this$customPalette = this.customPalette) === null || _this$customPalette === void 0 ? void 0 : _this$customPalette[index] : colorFromDefaultPalette(index);
    },
    onCreated(chart) {
      this.chart = chart;
      this.$emit('created', chart);
    },
    onUpdated() {
      this.compiledOptions = this.chart.getOption();
    },
    getTooltipTitle(_ref4) {
      var _options$xAxis, _options$xAxis$;
      let {
        params
      } = _ref4;
      if (!params) return '';
      const options = this.chart.getOption();
      const titleAxisName = options === null || options === void 0 ? void 0 : (_options$xAxis = options.xAxis) === null || _options$xAxis === void 0 ? void 0 : (_options$xAxis$ = _options$xAxis[0]) === null || _options$xAxis$ === void 0 ? void 0 : _options$xAxis$.name;
      return titleAxisName ? `${params.value} (${titleAxisName})` : params.value;
    },
    getTooltipContent(_ref5) {
      let {
        params
      } = _ref5;
      if (!params) return {};
      const tooltipContentEntries = params.seriesData.toSorted((a, b) => b.seriesIndex - a.seriesIndex) // Invert stacking order so it matches chart (see https://github.com/apache/echarts/issues/14700)
      .map(_ref6 => {
        let {
          seriesName = '',
          value,
          borderColor
        } = _ref6;
        return [seriesName, {
          value,
          color: borderColor
        }];
      });
      return Object.fromEntries(tooltipContentEntries);
    }
  },
  HEIGHT_AUTO_CLASSES
};

/* script */
const __vue_script__ = script;

/* template */
var __vue_render__ = function () {
var _obj;
var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-relative",class:( _obj = {}, _obj[_vm.$options.HEIGHT_AUTO_CLASSES] = _vm.autoHeight, _obj )},[_c('chart',_vm._g(_vm._b({class:{ 'gl-grow': _vm.autoHeight },attrs:{"height":_vm.height,"options":_vm.options},on:{"created":_vm.onCreated,"updated":_vm.onUpdated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.chart)?_c('chart-tooltip',{attrs:{"chart":_vm.chart,"use-default-tooltip-formatter":!_vm.formatTooltipText},scopedSlots:_vm._u([{key:"title",fn:function(scope){return [_vm._t("tooltip-title",function(){return [_vm._v(_vm._s(_vm.getTooltipTitle(scope)))]},null,scope)]}},{key:"default",fn:function(scope){return [_vm._t("tooltip-content",function(){return [_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.getTooltipContent(scope)},scopedSlots:_vm._u([(_vm.$scopedSlots['tooltip-value'])?{key:"tooltip-value",fn:function(valueScope){return [_vm._t("tooltip-value",null,null,valueScope)]}}:null],null,true)})]},null,scope)]}}],null,true)}):_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,"min-text":_vm.legendMinText,"max-text":_vm.legendMaxText,"average-text":_vm.legendAverageText,"current-text":_vm.legendCurrentText,"layout":_vm.legendLayout}}):_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__ = /*#__PURE__*/__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 { __vue_component__ as default };