@gitlab/ui 131.2.0 → 131.3.1

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

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

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