@gitlab/ui 132.0.1 → 132.0.3

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

@@ -0,0 +1,54 @@
+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

@@ -0,0 +1,329 @@
+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

@@ -0,0 +1,207 @@
+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 };