@gitlab/ui 132.0.1 → 132.0.3

package/dist/components/charts/sparkline/sparkline.js

@@ -0,0 +1,299 @@
+import { merge, isNil } from 'lodash-es';
+import { graphic } from 'echarts';
+import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
+import { defaultChartOptions, mergeSeriesToOptions, symbolSize } from '../../../utils/charts/config';
+import { HEIGHT_AUTO_HORIZONTAL_LAYOUT_CLASSES } from '../../../utils/charts/constants';
+import Chart from '../chart/chart';
+import ChartTooltip from '../shared/tooltip/tooltip';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+// the padding is needed so the mark points don't overflow when visible
+const gridPadding = symbolSize / 2;
+const generateGradient = colors => {
+  return new graphic.LinearGradient(0, 0, 0, 1, colors.map((color, index) => {
+    const offset = index / (colors.length - 1);
+    return {
+      offset,
+      color
+    };
+  }));
+};
+var script = {
+  name: 'GlSparklineChart',
+  components: {
+    Chart,
+    ChartTooltip
+  },
+  directives: {
+    resizeObserver: GlResizeObserverDirective
+  },
+  props: {
+    /**
+     * The data that is used to plot the chart.
+     */
+    data: {
+      type: Array,
+      required: true
+    },
+    /**
+     * Controls the label that is shown within the chart's tooltip. Use it to describe your data.
+     */
+    tooltipLabel: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    /**
+     * Sets the chart's height in pixels. Set to `"auto"` to use the height of the container.
+     */
+    height: {
+      type: [Number, String],
+      required: false,
+      default: 50
+    },
+    /**
+     * If enabled will show the value of the latest "y" data-point on the side right of the chart.
+     */
+    showLastYValue: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    /**
+     * Sets a colour gradient for the sparkline
+     */
+    gradient: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    /**
+     * The smoothness of the line, valued from 0 to 1. A smaller value makes it less smooth.
+     */
+    smooth: {
+      type: Number,
+      required: false,
+      default: 0,
+      validator: x => x >= 0 && x <= 1
+    },
+    /**
+     * Whether to connect the line across null points.
+     */
+    connectNulls: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  data() {
+    return {
+      chartInstance: null,
+      tooltip: {
+        show: false,
+        title: '',
+        content: '',
+        position: {
+          left: '0',
+          top: '0'
+        }
+      }
+    };
+  },
+  computed: {
+    options() {
+      const sparkLineChartOptions = {
+        grid: {
+          top: gridPadding,
+          bottom: gridPadding,
+          left: gridPadding,
+          right: gridPadding
+        },
+        xAxis: {
+          type: 'category',
+          show: false,
+          axisLabel: {
+            show: true
+          },
+          axisPointer: {
+            show: true,
+            type: 'none',
+            label: {
+              formatter: this.generateTooltip
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          show: false,
+          min: 'datamin'
+        }
+      };
+      const mergedOptions = merge({}, defaultChartOptions, sparkLineChartOptions);
+      return mergeSeriesToOptions(mergedOptions, this.series);
+    },
+    willShowLastYValue() {
+      return this.showLastYValue && this.data.length;
+    },
+    series() {
+      const {
+        data,
+        smooth,
+        itemStyle,
+        willShowLastYValue,
+        connectNulls
+      } = this;
+      const markPoint = willShowLastYValue ? {
+        symbol: 'circle',
+        cursor: 'auto',
+        animation: false,
+        symbolSize,
+        data: [{
+          xAxis: data.length - 1,
+          yAxis: data[data.length - 1][1]
+        }]
+      } : undefined;
+      return {
+        type: 'line',
+        symbol: 'circle',
+        animation: true,
+        cursor: 'auto',
+        symbolSize,
+        markPoint,
+        data,
+        smooth,
+        itemStyle,
+        lineStyle: {
+          cap: 'round'
+        },
+        connectNulls
+      };
+    },
+    itemStyle() {
+      if (this.applyGradient) {
+        return {
+          color: generateGradient(this.gradient)
+        };
+      }
+      if (this.gradient.length) {
+        // If the gradient cannot be used, then apply
+        // the first colour to the entire line.
+        return {
+          color: this.gradient[0]
+        };
+      }
+      return {};
+    },
+    applyGradient() {
+      if (this.gradient.length && this.data.length) {
+        // Applying a gradient a constant line will cause it to not render,
+        // so skip the gradient if all values are equal.
+        const [, firstValue] = this.data[0];
+        return this.data.some(_ref => {
+          let [, value] = _ref;
+          return firstValue !== value;
+        });
+      }
+      return false;
+    },
+    lastYValue() {
+      if (!this.willShowLastYValue) return undefined;
+      const latestEntry = this.data.slice(-1)[0];
+      return latestEntry[1];
+    },
+    autoHeight() {
+      return this.height === 'auto';
+    }
+  },
+  methods: {
+    onChartCreated(chartInstance) {
+      this.chartInstance = chartInstance;
+      this.tooltip.show = false;
+
+      /**
+       * Emitted when the chart is created.
+       * The payload contains the echarts instance.
+       * @event chartCreated
+       * @type {object}
+       */
+      this.$emit('chartCreated', chartInstance);
+    },
+    handleResize() {
+      this.chartInstance.resize();
+    },
+    isNilOrBlank(text) {
+      return isNil(text) || typeof text === 'string' && text.trim() === '';
+    },
+    setTooltipPosition(data) {
+      const [left, top] = this.chartInstance.convertToPixel('grid', data);
+      this.tooltip.position = {
+        left: `${left}px`,
+        top: `${top}px`
+      };
+    },
+    // This function is called any time the axis pointer is changed (the black bubble showing which
+    // point on the line is selected). Note that it will not trigger if the axis pointer is removed,
+    // only when it changes from one point to another or is shown for the first time.
+    generateTooltip(_ref2) {
+      let {
+        seriesData = []
+      } = _ref2;
+      this.tooltip.show = false;
+
+      // seriesData is an array of nearby data point coordinates
+      // seriesData[0] is the nearest point at which the tooltip is displayed
+      // https://echarts.apache.org/en/option.html#xAxis.axisPointer.label.formatter
+      const [firstEntry = {}] = seriesData;
+      const {
+        data
+      } = firstEntry;
+      if (!data) return;
+      const [title, content] = data;
+      if (this.isNilOrBlank(title) || this.isNilOrBlank(content)) return;
+      this.tooltip.title = title;
+      this.tooltip.content = content;
+      this.setTooltipPosition(data);
+      this.tooltip.show = null;
+    }
+  },
+  HEIGHT_AUTO_HORIZONTAL_LAYOUT_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',{directives:[{name:"resize-observer",rawName:"v-resize-observer",value:(_vm.handleResize),expression:"handleResize"}],staticClass:"gl-flex gl-items-center",class:{ 'gl-h-full': _vm.autoHeight }},[_vm._t("default"),_vm._v(" "),_c('div',{staticClass:"gl-relative gl-grow",class:( _obj = {}, _obj[_vm.$options.HEIGHT_AUTO_HORIZONTAL_LAYOUT_CLASSES] = _vm.autoHeight, _obj ),attrs:{"data-testid":"chart-container"}},[_c('chart',_vm._g(_vm._b({class:{ 'gl-grow': _vm.autoHeight },attrs:{"height":_vm.height,"options":_vm.options},on:{"created":_vm.onChartCreated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.chartInstance)?_c('chart-tooltip',{attrs:{"show":_vm.tooltip.show,"chart":_vm.chartInstance,"top":_vm.tooltip.position.top,"left":_vm.tooltip.position.left,"placement":"top"},scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('div',{staticClass:"gl-whitespace-nowrap",attrs:{"data-testid":"tooltip-title"}},[_vm._v("\n          "+_vm._s(_vm.tooltip.title)+"\n        ")])]},proxy:true},{key:"default",fn:function(){return [_c('div',{staticClass:"gl-flex",attrs:{"data-testid":"tooltip-content"}},[(_vm.tooltipLabel)?_c('span',{staticClass:"gl-mr-auto gl-pr-6"},[_vm._v(_vm._s(_vm.tooltipLabel))]):_vm._e(),_vm._v(" "),_c('strong',[_vm._v(_vm._s(_vm.tooltip.content))])])]},proxy:true}],null,false,4012348801)}):_vm._e()],1),_vm._v(" "),(_vm.showLastYValue)?_c('span',{staticClass:"gl-ml-5 gl-inline-flex gl-justify-center",attrs:{"data-testid":"last-y-value"}},[_vm._v("\n    "+_vm._s(_vm.lastYValue)+"\n  ")]):_vm._e()],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/stacked_column/stacked_column.js

@@ -0,0 +1,380 @@
+import { merge, groupBy } from 'lodash-es';
+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
+    },
+    /**
+     * Controls whether the tooltip should be pinned when clicked.
+     */
+    clickToPinTooltip: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  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 {};
+
+      // Group by stack and invert order within so it matches `stacked` presentation (see https://github.com/apache/echarts/issues/14700).
+      const seriesDataGroupedByStack = groupBy(params.seriesData, _ref6 => {
+        let {
+          stack,
+          seriesIndex
+        } = _ref6;
+        return stack !== null && stack !== void 0 ? stack : seriesIndex;
+      });
+      const sortedSeriesData = Object.values(seriesDataGroupedByStack).flatMap(seriesDataStack => seriesDataStack.toSorted((a, b) => b.seriesIndex - a.seriesIndex));
+      const tooltipContentEntries = sortedSeriesData.map(_ref7 => {
+        let {
+          seriesName = '',
+          value,
+          borderColor,
+          color
+        } = _ref7;
+        return [seriesName, {
+          value,
+          color: borderColor !== null && borderColor !== void 0 ? borderColor : color
+        }];
+      });
+      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,"click-to-pin":_vm.clickToPinTooltip},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 };