@gitlab/ui 72.12.0 → 72.12.1

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

@@ -0,0 +1,311 @@
+import merge from 'lodash/merge';
+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 '../tooltip/tooltip';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+//
+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,
+      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 defaultAreaChartOptions = {
+        xAxis: {
+          axisPointer: {
+            show: true,
+            lineStyle: {
+              type: 'solid'
+            },
+            label: {
+              formatter: this.formatTooltipText
+            }
+          }
+        },
+        yAxis: {
+          axisTick: {
+            show: false
+          }
+        },
+        legend: {
+          show: false
+        }
+      };
+      const mergedOptions = merge({}, defaultChartOptions, defaultAreaChartOptions, 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;
+    },
+    compiledOptions() {
+      return this.chart ? this.chart.getOption() : null;
+    },
+    legendStyle() {
+      return {
+        paddingLeft: `${grid.left}px`
+      };
+    },
+    seriesInfo() {
+      if (this.legendSeriesInfo.length > 0) return this.legendSeriesInfo;
+      return this.compiledOptions.series.reduce((acc, series, index) => {
+        if (series.type === 'line') {
+          acc.push({
+            name: series.name,
+            type: series.lineStyle.type,
+            color: series.lineStyle.color || colorFromDefaultPalette(index),
+            data: this.includeLegendAvgMax ? 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);
+    },
+    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:"position-relative",class:( _obj = {}, _obj[_vm.$options.HEIGHT_AUTO_CLASSES] = _vm.autoHeight, _obj )},[_c('chart',_vm._g(_vm._b({class:{ 'gl-flex-grow-1': _vm.autoHeight },attrs:{"height":_vm.height,"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,"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__ = __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__;

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

@@ -0,0 +1,253 @@
+import merge from 'lodash/merge';
+import truncate from 'lodash/truncate';
+import { dataZoomAdjustments, mergeSeriesToOptions, grid } from '../../../utils/charts/config';
+import { 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 TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format';
+import Chart from '../chart/chart';
+import ChartTooltip from '../tooltip/tooltip';
+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: '...'
+      })
+    }
+  }
+};
+var script = {
+  name: 'GlBarChart',
+  components: {
+    Chart,
+    ChartTooltip,
+    TooltipDefaultFormat
+  },
+  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
+    }
+  },
+  data() {
+    return {
+      chart: null,
+      tooltipTitle: '',
+      tooltipContent: {}
+    };
+  },
+  computed: {
+    series() {
+      return Object.keys(this.data).map((key, index) => {
+        const barColor = colorFromDefaultPalette(index);
+        return {
+          name: key,
+          data: this.data[key],
+          type: 'bar',
+          stack: 'chart',
+          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
+          },
+          axisPointer: {
+            show: true,
+            type: 'none',
+            label: {
+              formatter: this.onLabelChange
+            }
+          }
+        },
+        legend: {
+          show: false
+        }
+      }, 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);
+    },
+    onLabelChange(params) {
+      const {
+        yLabels,
+        tooltipContent
+      } = this.getTooltipContent(params, this.xAxisTitle);
+      this.$set(this, 'tooltipContent', tooltipContent);
+      this.tooltipTitle = yLabels.join(', ');
+    },
+    /**
+     * For bar charts, the tooltip should be against x-axis values.
+     * This method will be removed after https://gitlab.com/gitlab-org/gitlab-ui/-/issues/674
+     *
+     * @param {Object} params series data
+     * @param {String} xAxisTitle x-axis title
+     * @returns {Object} tooltip title and content
+     */
+    getTooltipContent(params) {
+      let xAxisTitle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+      const seriesDataLength = params.seriesData.length;
+      const {
+        yLabels,
+        tooltipContent
+      } = params.seriesData.reduce((acc, chartItem) => {
+        const [value, title] = chartItem.value || [];
+        // The x axis title is used instead of y axis
+        const seriesName = seriesDataLength === 1 && xAxisTitle ? xAxisTitle : chartItem.seriesName;
+        const color = seriesDataLength === 1 ? '' : chartItem.color;
+        acc.tooltipContent[seriesName] = {
+          value,
+          color
+        };
+        if (!acc.yLabels.includes(title)) {
+          acc.yLabels.push(title);
+        }
+        return acc;
+      }, {
+        yLabels: [],
+        tooltipContent: {}
+      });
+      return {
+        yLabels,
+        tooltipContent
+      };
+    }
+  },
+  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:"position-relative",class:( _obj = {}, _obj[_vm.$options.HEIGHT_AUTO_CLASSES] = _vm.autoHeight, _obj )},[_c('chart',_vm._g(_vm._b({class:{ 'gl-flex-grow-1': _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},scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('div',[_vm._v(_vm._s(_vm.tooltipTitle)+" ("+_vm._s(_vm.yAxisTitle)+")")])]},proxy:true}],null,false,1644826356)},[_vm._v(" "),_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.tooltipContent}})],1):_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__;