@gitlab/ui/dist/components/charts/area/area.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, { defaultAreaOpacity, lineStyle, getThresholdConfig, generateAnnotationSeries, dataZoomAdjustments, mergeSeriesToOptions, mergeAnnotationAxisToOptions, grid, getDefaultTooltipContent } from '../../../utils/charts/config';
import { debounceByAnimationFrame } from '../../../utils/utils';
import { colorFromDefaultPalette } from '../../../utils/charts/theme';
import { LEGEND_AVERAGE_TEXT, LEGEND_MAX_TEXT, LEGEND_MIN_TEXT, LEGEND_CURRENT_TEXT, LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE, DATA_TOOLTIP_LEFT_OFFSET, ANNOTATION_TOOLTIP_TOP_OFFSET } from '../../../utils/charts/constants';
import { seriesHasAnnotations, isDataPointAnnotation } from '../../../utils/charts/utils';
import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format';
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';

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 script = {
  components: {
    Chart: Chart,
    ChartLegend: ChartLegend,
    ChartTooltip: ChartTooltip,
    TooltipDefaultFormat: TooltipDefaultFormat
  },
  mixins: [ToolboxMixin],
  inheritAttrs: false,
  props: {
    data: {
      type: Array,
      required: true
    },
    option: {
      type: Object,
      required: false,
      default: function _default() {
        return {};
      }
    },
    thresholds: {
      type: Array,
      required: false,
      default: function _default() {
        return [];
      }
    },
    annotations: {
      type: Array,
      required: false,
      default: function _default() {
        return [];
      }
    },
    includeLegendAvgMax: {
      type: Boolean,
      required: false,
      default: true
    },
    formatAnnotationsTooltipText: {
      type: Function,
      required: false,
      default: null
    },
    formatTooltipText: {
      type: Function,
      required: false,
      default: null
    },
    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: function validator(layout) {
        return [LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE].indexOf(layout) !== -1;
      }
    }
  },
  data: function data() {
    // Part of the tooltip related data can be
    // moved into the tooltip component.
    // Tracking that progress in
    // https://gitlab.com/gitlab-org/gitlab-ui/-/issues/618
    return {
      chart: null,
      showDataTooltip: false,
      dataTooltipTitle: '',
      dataTooltipContent: {},
      dataTooltipPosition: {
        left: '0',
        top: '0'
      },
      showAnnotationsTooltip: false,
      annotationsTooltipTitle: '',
      annotationsTooltipContent: '',
      annotationsTooltipPosition: {
        left: '0',
        top: '0'
      },
      debouncedShowHideTooltip: debounceByAnimationFrame(this.showHideTooltip),
      selectedFormatTooltipText: this.formatTooltipText || this.defaultFormatTooltipText
    };
  },
  computed: {
    series: function series() {
      var _this = this;

      var dataSeries = this.data.map(function (series, index) {
        var defaultColor = colorFromDefaultPalette(index);

        var getColor = function getColor(type) {
          return series[type] && series[type].color ? series[type].color : defaultColor;
        };

        return merge({
          areaStyle: {
            opacity: defaultAreaOpacity,
            color: getColor('areaStyle')
          },
          showSymbol: false,
          lineStyle: {
            color: getColor('lineStyle')
          },
          itemStyle: {
            color: getColor('itemStyle')
          }
        }, lineStyle, series, getThresholdConfig(_this.thresholds));
      }); // if annotation series exists, append it
      // along with data series

      if (this.annotationSeries) {
        return [].concat(_toConsumableArray(dataSeries), [this.annotationSeries]);
      }

      return dataSeries;
    },
    annotationSeries: function annotationSeries() {
      return generateAnnotationSeries(this.annotations);
    },
    options: function options() {
      var defaultAreaChartOptions = {
        xAxis: {
          axisPointer: {
            show: true,
            label: {
              formatter: this.onLabelChange
            }
          }
        },
        yAxis: {
          axisTick: {
            show: false
          }
        },
        legend: {
          show: false
        }
      };
      var mergedOptions = merge({}, defaultChartOptions, defaultAreaChartOptions, this.option, dataZoomAdjustments(this.option.dataZoom), this.toolboxAdjustments); // All chart options can be merged but series
      // needs to be handled specially.

      return mergeSeriesToOptions(mergeAnnotationAxisToOptions(mergedOptions, this.hasAnnotations), this.series);
    },

    /**
     * Annotations currently are passed as series options in monitoring dashboard.
     * Once https://gitlab.com/gitlab-org/gitlab/-/issues/213390 is closed,
     * annotations will be passed as props and not as series options.
     *
     * For backward compatibility, we're having to check for both.
     */
    hasAnnotations: function hasAnnotations() {
      return this.annotations.length !== 0 || seriesHasAnnotations(this.option.series);
    },
    shouldShowAnnotationsTooltip: function shouldShowAnnotationsTooltip() {
      return this.chart && this.hasAnnotations;
    },
    compiledOptions: function compiledOptions() {
      return this.chart ? this.chart.getOption() : null;
    },
    legendStyle: function legendStyle() {
      return {
        paddingLeft: "".concat(grid.left, "px")
      };
    },
    seriesInfo: function seriesInfo() {
      var _this2 = this;

      return this.compiledOptions.series.reduce(function (acc, series, index) {
        if (series.type === 'line') {
          acc.push({
            name: series.name,
            type: series.lineStyle.type,
            color: series.lineStyle.color || colorFromDefaultPalette(index),
            data: _this2.includeLegendAvgMax ? series.data.map(function (data) {
              return data[1];
            }) : undefined
          });
        }

        return acc;
      }, []);
    }
  },
  beforeDestroy: function beforeDestroy() {
    this.chart.getDom().removeEventListener('mousemove', this.debouncedShowHideTooltip);
    this.chart.getDom().removeEventListener('mouseout', this.debouncedShowHideTooltip);
    this.chart.off('mouseout', this.hideAnnotationsTooltip);
    this.chart.off('mouseover', this.onChartMouseOver);
  },
  methods: {
    defaultFormatTooltipText: function defaultFormatTooltipText(params) {
      var _getDefaultTooltipCon = getDefaultTooltipContent(params, this.options.yAxis.name),
          xLabels = _getDefaultTooltipCon.xLabels,
          tooltipContent = _getDefaultTooltipCon.tooltipContent;

      this.$set(this, 'dataTooltipContent', tooltipContent);
      this.tooltipTitle = xLabels.join(', ');
    },
    defaultAnnotationTooltipText: function defaultAnnotationTooltipText(params) {
      var _params$data$tooltipD;

      return {
        title: params.data.xAxis,
        content: (_params$data$tooltipD = params.data.tooltipData) === null || _params$data$tooltipD === void 0 ? void 0 : _params$data$tooltipD.content
      };
    },
    onCreated: function onCreated(chart) {
      // These listeners are used to show/hide data tooltips
      // when the mouse is hovered over the parent container
      // of echarts' svg element. This works only for data points
      // and not markPoints.
      chart.getDom().addEventListener('mousemove', this.debouncedShowHideTooltip);
      chart.getDom().addEventListener('mouseout', this.debouncedShowHideTooltip); // eCharts inbuild mouse events
      // https://echarts.apache.org/en/api.html#events.Mouse%20events
      // is used to attach listeners to markPoints. These listeners
      // are currently used for annotation arrows at the bottom of the chart.
      // Because data points and annotations arrows are in different
      // sections of the charts with their own mouseovers and mouseouts,
      // there shouldn't be an overlapping situation where both tooltips
      // are visible.

      if (this.hasAnnotations) {
        chart.on('mouseout', this.onChartDataPointMouseOut);
        chart.on('mouseover', this.onChartDataPointMouseOver);
      }

      this.chart = chart;
      this.$emit('created', chart);
    },
    showHideTooltip: function showHideTooltip(mouseEvent) {
      this.showDataTooltip = this.chart.containPixel('grid', [mouseEvent.zrX, mouseEvent.zrY]);
      this.dataTooltipPosition = {
        left: "".concat(mouseEvent.zrX + DATA_TOOLTIP_LEFT_OFFSET, "px"),
        top: "".concat(mouseEvent.zrY, "px")
      };
    },
    onChartDataPointMouseOut: function onChartDataPointMouseOut() {
      this.showAnnotationsTooltip = false;
    },

    /**
     * Check if the hovered data point is an annotation
     * point to show the annotation tooltip.
     */
    onChartDataPointMouseOver: function onChartDataPointMouseOver(params) {
      if (isDataPointAnnotation(params)) {
        var event = params.event;
        var toolTipFormatter = this.formatAnnotationsTooltipText || this.defaultAnnotationTooltipText;

        var _toolTipFormatter = toolTipFormatter(params),
            _toolTipFormatter$tit = _toolTipFormatter.title,
            title = _toolTipFormatter$tit === void 0 ? '' : _toolTipFormatter$tit,
            _toolTipFormatter$con = _toolTipFormatter.content,
            content = _toolTipFormatter$con === void 0 ? '' : _toolTipFormatter$con;

        this.showAnnotationsTooltip = true;
        this.annotationsTooltipTitle = title;
        this.annotationsTooltipContent = content;
        this.annotationsTooltipPosition = {
          left: "".concat(event.event.zrX, "px"),
          top: "".concat(event.event.zrY + ANNOTATION_TOOLTIP_TOP_OFFSET, "px")
        };
      }
    },
    onLabelChange: function onLabelChange(params) {
      this.selectedFormatTooltipText(params);
    }
  }
};

/* 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.shouldShowAnnotationsTooltip)?_c('chart-tooltip',{ref:"annotationsTooltip",attrs:{"id":"annotationsTooltip","show":_vm.showAnnotationsTooltip,"chart":_vm.chart,"top":_vm.annotationsTooltipPosition.top,"left":_vm.annotationsTooltipPosition.left,"placement":"bottom"}},[[_c('div',{attrs:{"slot":"title","name":"tooltipTitle"},slot:"title"},[_vm._v(_vm._s(_vm.annotationsTooltipTitle))]),_vm._v(" "),_c('div',{attrs:{"name":"tooltipContent"}},[_vm._v(_vm._s(_vm.annotationsTooltipContent))])]],2):_vm._e(),_vm._v(" "),(_vm.chart)?_c('chart-tooltip',{ref:"dataTooltip",staticClass:"gl-pointer-events-none",attrs:{"id":"dataTooltip","show":_vm.showDataTooltip,"chart":_vm.chart,"top":_vm.dataTooltipPosition.top,"left":_vm.dataTooltipPosition.left}},[(_vm.formatTooltipText)?[_vm._t("tooltipTitle",null,{"slot":"title"}),_vm._v(" "),_vm._t("tooltipContent")]:[_c('div',{attrs:{"slot":"title"},slot:"title"},[_vm._v("\n        "+_vm._s(_vm.dataTooltipTitle)+"\n        "),(_vm.options.xAxis.name)?[_vm._v("("+_vm._s(_vm.options.xAxis.name)+")")]:_vm._e()],2),_vm._v(" "),_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.dataTooltipContent}})]],2):_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__ = __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__;