@gitlab/ui 131.3.0 → 131.3.2

package/dist/components/base/tooltip/tooltip.js

@@ -1,54 +0,0 @@
-import { BTooltip } from '../../../vendor/bootstrap-vue/src/components/tooltip/tooltip';
-import tooltipMixin from '../../mixins/tooltip_mixin';
-import { getGlTooltipDefaultContainer } from '../../../directives/tooltip/container';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-const tooltipRefName = 'bvTooltip';
-var script = {
-  name: 'GlTooltip',
-  components: {
-    BTooltip
-  },
-  mixins: [tooltipMixin(tooltipRefName)],
-  inheritAttrs: false,
-  tooltipRefName,
-  getGlTooltipDefaultContainer
-};
-
-/* 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('b-tooltip',_vm._g(_vm._b({ref:_vm.$options.tooltipRefName,attrs:{"container":_vm.$attrs.container || _vm.$options.getGlTooltipDefaultContainer()}},'b-tooltip',_vm.$attrs,false),_vm.$listeners),[_vm._t("default")],2)};
-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 };

package/dist/components/charts/area/area.js

@@ -1,329 +0,0 @@
-import { merge } from 'lodash-es';
-import { defaultAreaOpacity, lineStyle, getThresholdConfig, generateAnnotationSeries, defaultChartOptions, dataZoomAdjustments, mergeSeriesToOptions, mergeAnnotationAxisToOptions, grid } from '../../../utils/charts/config';
-import { LEGEND_AVERAGE_TEXT, LEGEND_MAX_TEXT, LEGEND_MIN_TEXT, LEGEND_CURRENT_TEXT, LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE, HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
-import { colorFromDefaultPalette } from '../../../utils/charts/theme';
-import { seriesHasAnnotations, isDataPointAnnotation } from '../../../utils/charts/utils';
-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';
-
-/**
- * Area charts as of %12.10 support annotations.
- * Annotations is composed of a dotted line and an arrow
- * at the bottom. The dotted line is constructed
- * with markLine and arrows with markPoint.
- *
- * Similar to how custom tooltips are displayed when area chart
- * is hovered, a tooltip should be displayed when the annotation
- * arrow is hovered. This component adds event listeners
- * to figure out if mouse is hovered on charts to show tooltips.
- * While that works for data points inside the grid, for arrows
- * that live right under the chart, we use eCharts inbuilt
- * event listeners to detect hover. Given this limitation,
- * we use a separate tooltip for data point and arrow.
- */
-
-var script = {
-  name: 'GlAreaChart',
-  components: {
-    Chart,
-    ChartLegend,
-    ChartTooltip
-  },
-  inheritAttrs: false,
-  props: {
-    data: {
-      type: Array,
-      required: true
-    },
-    option: {
-      type: Object,
-      required: false,
-      default: () => ({})
-    },
-    thresholds: {
-      type: Array,
-      required: false,
-      default: () => []
-    },
-    annotations: {
-      type: Array,
-      required: false,
-      default: () => []
-    },
-    includeLegendAvgMax: {
-      type: Boolean,
-      required: false,
-      default: true
-    },
-    formatAnnotationsTooltipText: {
-      type: Function,
-      required: false,
-      default: null
-    },
-    /**
-     * 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
-    },
-    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;
-      }
-    },
-    /**
-     * 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
-    },
-    legendSeriesInfo: {
-      type: Array,
-      required: false,
-      default: () => []
-    }
-  },
-  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,
-      compiledOptions: null,
-      showAnnotationsTooltip: false,
-      annotationsTooltipTitle: '',
-      annotationsTooltipContent: '',
-      annotationsTooltipPosition: {
-        left: '0',
-        top: '0'
-      }
-    };
-  },
-  computed: {
-    series() {
-      const dataSeries = this.data.map((series, index) => {
-        const defaultColor = colorFromDefaultPalette(index);
-        const getColor = type => 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 [...dataSeries, this.annotationSeries];
-      }
-      return dataSeries;
-    },
-    annotationSeries() {
-      return generateAnnotationSeries(this.annotations);
-    },
-    options() {
-      const areaChartOptions = {
-        yAxis: {
-          axisTick: {
-            show: false
-          }
-        }
-      };
-
-      // `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, areaChartOptions, this.formatTooltipText ? deprecatedTooltipFormatterOptions : {}, this.option, dataZoomAdjustments(this.option.dataZoom));
-      // 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() {
-      return this.annotations.length !== 0 || seriesHasAnnotations(this.option.series);
-    },
-    shouldShowAnnotationsTooltip() {
-      return this.chart && this.hasAnnotations;
-    },
-    legendStyle() {
-      return {
-        paddingLeft: `${grid.left}px`
-      };
-    },
-    seriesInfo() {
-      var _this$compiledOptions;
-      if (this.legendSeriesInfo.length > 0) return this.legendSeriesInfo;
-      const compiledSeries = ((_this$compiledOptions = this.compiledOptions) === null || _this$compiledOptions === void 0 ? void 0 : _this$compiledOptions.series) || [];
-      return compiledSeries.reduce((acc, series, index) => {
-        if (series.type === 'line') {
-          var _series$data;
-          acc.push({
-            name: series.name,
-            type: series.lineStyle.type,
-            color: series.lineStyle.color || colorFromDefaultPalette(index),
-            data: this.includeLegendAvgMax ? (_series$data = series.data) === null || _series$data === void 0 ? void 0 : _series$data.map(data => data[1]) : undefined
-          });
-        }
-        return acc;
-      }, []);
-    },
-    autoHeight() {
-      return this.height === 'auto';
-    }
-  },
-  beforeDestroy() {
-    this.chart.off('mouseout', this.hideAnnotationsTooltip);
-    this.chart.off('mouseover', this.onChartMouseOver);
-  },
-  methods: {
-    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(chart) {
-      // 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);
-    },
-    onUpdated() {
-      this.compiledOptions = this.chart.getOption();
-    },
-    onChartDataPointMouseOut() {
-      this.showAnnotationsTooltip = false;
-    },
-    /**
-     * Check if the hovered data point is an annotation
-     * point to show the annotation tooltip.
-     */
-    onChartDataPointMouseOver(params) {
-      if (isDataPointAnnotation(params)) {
-        const {
-          event
-        } = params;
-        const toolTipFormatter = this.formatAnnotationsTooltipText || this.defaultAnnotationTooltipText;
-        const {
-          title = '',
-          content = ''
-        } = toolTipFormatter(params);
-        this.showAnnotationsTooltip = true;
-        this.annotationsTooltipTitle = title;
-        this.annotationsTooltipContent = content;
-        this.annotationsTooltipPosition = {
-          left: `${event.event.zrX}px`,
-          top: `${event.event.zrY}px`
-        };
-      }
-    }
-  },
-  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.shouldShowAnnotationsTooltip)?_c('chart-tooltip',{ref:"annotationsTooltip",attrs:{"id":"annotationsTooltip","show":_vm.showAnnotationsTooltip,"top":_vm.annotationsTooltipPosition.top,"left":_vm.annotationsTooltipPosition.left,"chart":_vm.chart,"placement":"bottom"},scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('div',[_vm._v(_vm._s(_vm.annotationsTooltipTitle))])]},proxy:true}],null,false,1889294429)},[_vm._v(" "),_c('div',[_vm._v(_vm._s(_vm.annotationsTooltipContent))])]):_vm._e(),_vm._v(" "),(_vm.chart)?_c('chart-tooltip',{ref:"dataTooltip",attrs:{"chart":_vm.chart,"use-default-tooltip-formatter":!_vm.formatTooltipText},scopedSlots:_vm._u([(_vm.$scopedSlots['tooltip-title'])?{key:"title",fn:function(scope){return [_vm._t("tooltip-title",null,null,scope)]}}:null,(_vm.$scopedSlots['tooltip-content'])?{key:"default",fn:function(scope){return [_vm._t("tooltip-content",null,null,scope)]}}:null,(_vm.$scopedSlots['tooltip-value'])?{key:"tooltip-value",fn:function(scope){return [_vm._t("tooltip-value",null,null,scope)]}}:null],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 };

package/dist/components/charts/bar/bar.js

@@ -1,207 +0,0 @@
-import { merge, truncate } from 'lodash-es';
-import { dataZoomAdjustments, mergeSeriesToOptions, grid } from '../../../utils/charts/config';
-import { CHART_DEFAULT_SERIES_STACK, HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
-import { colorFromDefaultPalette } from '../../../utils/charts/theme';
-import { engineeringNotation } from '../../../utils/number_utils';
-import { hexToRgba } from '../../../utils/utils';
-import Chart from '../chart/chart';
-import ChartTooltip from '../shared/tooltip/tooltip';
-import { stackedPresentationOptions } from '../../../utils/constants';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-/**
- * `nameGap` in charts/config is set to 50 but it is not
- * used for bar charts as the axes are flipped. That is why
- * we're explicitly setting it here
- */
-const DEFAULT_NAME_GAP = 50;
-
-/**
- * This is the magic number at which the y-axis name
- * and y-axis labels don't overlap
- * @Number
- */
-const AXIS_LABEL_LENGTH = 7;
-
-/**
- * Because the axes are reversed in bar charts defaultChartOptions
- * xAxis and yAxis needs to be handled specifically.
- */
-const defaultOptions = {
-  grid,
-  xAxis: {
-    nameLocation: 'center',
-    axisLabel: {
-      formatter: num => engineeringNotation(num, 2)
-    }
-  },
-  yAxis: {
-    nameGap: DEFAULT_NAME_GAP,
-    boundaryGap: true,
-    nameLocation: 'center',
-    splitLine: {
-      show: false
-    },
-    axisLabel: {
-      interval: 0,
-      formatter: str => truncate(str, {
-        length: AXIS_LABEL_LENGTH,
-        separator: '...'
-      })
-    }
-  },
-  legend: {
-    show: false
-  }
-};
-var script = {
-  name: 'GlBarChart',
-  components: {
-    Chart,
-    ChartTooltip
-  },
-  inheritAttrs: false,
-  props: {
-    data: {
-      type: Object,
-      required: true
-    },
-    option: {
-      type: Object,
-      required: false,
-      default: () => ({})
-    },
-    yAxisTitle: {
-      type: String,
-      required: true
-    },
-    xAxisTitle: {
-      type: String,
-      required: true
-    },
-    xAxisType: {
-      type: String,
-      required: false,
-      default: 'value'
-    },
-    /**
-     * 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
-    },
-    /**
-     * Controls how multiple series data are displayed in the chart –
-     * `stacked` stacks series horizontally, and
-     * `tiled` displays series as grouped bars.
-     */
-    presentation: {
-      type: String,
-      required: false,
-      default: stackedPresentationOptions.stacked,
-      validator: value => Object.values(stackedPresentationOptions).includes(value)
-    }
-  },
-  data() {
-    return {
-      chart: null
-    };
-  },
-  computed: {
-    series() {
-      return Object.keys(this.data).map((key, index) => {
-        const barColor = colorFromDefaultPalette(index);
-        return {
-          name: key,
-          data: this.data[key],
-          type: 'bar',
-          stack: this.presentation === stackedPresentationOptions.tiled ? null : CHART_DEFAULT_SERIES_STACK,
-          itemStyle: {
-            color: hexToRgba(barColor, 0.2),
-            borderColor: barColor,
-            borderWidth: 1
-          },
-          emphasis: {
-            itemStyle: {
-              color: hexToRgba(barColor, 0.4)
-            }
-          },
-          barMaxWidth: '50%'
-        };
-      });
-    },
-    options() {
-      const mergedOptions = merge({}, defaultOptions, {
-        xAxis: {
-          axisLine: {
-            show: false
-          },
-          name: this.xAxisTitle,
-          type: this.xAxisType
-        },
-        yAxis: {
-          name: this.yAxisTitle,
-          type: 'category',
-          axisTick: {
-            show: true
-          }
-        }
-      }, this.option, dataZoomAdjustments(this.option.dataZoom));
-      // All chart options can be merged but series
-      // needs to be handled specially
-      return mergeSeriesToOptions(mergedOptions, this.series);
-    },
-    autoHeight() {
-      return this.height === 'auto';
-    }
-  },
-  methods: {
-    onCreated(chart) {
-      this.chart = chart;
-      this.$emit('created', chart);
-    }
-  },
-  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}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.chart)?_c('chart-tooltip',{attrs:{"chart":_vm.chart,"use-default-tooltip-formatter":true,"dimension-axis":"yAxis"},scopedSlots:_vm._u([(_vm.$scopedSlots['tooltip-title'])?{key:"title",fn:function(scope){return [_vm._t("tooltip-title",null,null,scope)]}}:null,(_vm.$scopedSlots['tooltip-content'])?{key:"default",fn:function(scope){return [_vm._t("tooltip-content",null,null,scope)]}}:null,(_vm.$scopedSlots['tooltip-value'])?{key:"tooltip-value",fn:function(scope){return [_vm._t("tooltip-value",null,null,scope)]}}:null],null,true)}):_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 };