@gitlab/ui 72.11.1 → 72.12.0

package/dist/components/charts/stacked_column/stacked_column.js

@@ -1,335 +0,0 @@
-import merge from 'lodash/merge';
-import { yAxis, generateBarSeries, generateLineSeries, defaultChartOptions, gridWithSecondaryYAxis, grid, 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_TYPE_LINE, HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
-import { colorFromDefaultPalette } from '../../../utils/charts/theme';
-import { columnOptions } from '../../../utils/constants';
-import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format';
-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';
-
-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: 'stacked',
-      validator: value => ['stacked', 'tiled'].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: () => []
-    },
-    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;
-      }
-    },
-    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
-    }
-  },
-  data() {
-    return {
-      chart: null,
-      tooltipTitle: '',
-      tooltipContent: {}
-    };
-  },
-  computed: {
-    hasSecondaryAxis() {
-      return Boolean(this.secondaryData.length);
-    },
-    barSeries() {
-      return this.bars.map((_ref, index) => {
-        let {
-          name,
-          data
-        } = _ref;
-        const stack = this.presentation === 'stacked' ? this.groupBy : null;
-        const color = this.getColor(index);
-        return generateBarSeries({
-          stack,
-          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 = columnOptions.tiled
-        } = _ref3;
-        const color = this.getColor(offset + index);
-        return type === CHART_TYPE_LINE ? generateLineSeries({
-          color,
-          name,
-          data,
-          yAxisIndex: 1
-        }) : generateBarSeries({
-          color,
-          name,
-          data,
-          yAxisIndex: 1,
-          stack
-        });
-      });
-    },
-    series() {
-      return [...this.barSeries, ...this.lineSeries, ...this.secondarySeries];
-    },
-    options() {
-      const mergedOptions = merge({}, defaultChartOptions, {
-        grid: this.hasSecondaryAxis ? gridWithSecondaryYAxis : grid,
-        xAxis: {
-          boundaryGap: true,
-          axisLabel: {
-            margin: 20,
-            verticalAlign: 'bottom'
-          },
-          axisLine: {
-            show: false
-          },
-          axisPointer: {
-            show: true,
-            type: 'none',
-            label: {
-              formatter: this.onLabelChange
-            }
-          },
-          data: this.groupBy,
-          name: this.xAxisTitle,
-          type: this.xAxisType
-        },
-        yAxis: [{
-          ...yAxisDefaults,
-          name: this.yAxisTitle
-        }, {
-          ...yAxisDefaults,
-          name: this.secondaryDataTitle,
-          show: this.hasSecondaryAxis
-        }],
-        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);
-    },
-    legendStyle() {
-      return {
-        paddingLeft: `${grid.left}px`
-      };
-    },
-    compiledOptions() {
-      return this.chart ? this.chart.getOption() : null;
-    },
-    seriesInfo() {
-      return this.compiledOptions.series.reduce((acc, series, index) => {
-        acc.push({
-          name: series.name,
-          type: series.type,
-          color: this.getColor(index),
-          data: series.data.map(data => data),
-          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);
-    },
-    defaultFormatTooltipText(params) {
-      const {
-        tooltipContent
-      } = params.seriesData.reverse().reduce((acc, bar) => {
-        acc.tooltipContent[bar.seriesName] = {
-          value: bar.value,
-          index: bar.seriesIndex,
-          color: this.getColor(bar.seriesIndex)
-        };
-        return acc;
-      }, {
-        tooltipContent: {}
-      });
-      this.tooltipTitle = params.value;
-      this.$set(this, 'tooltipContent', tooltipContent);
-    },
-    onLabelChange(params) {
-      if (this.formatTooltipText) {
-        this.formatTooltipText(params);
-      } else {
-        this.defaultFormatTooltipText(params);
-      }
-    }
-  },
-  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 [_vm._t("tooltip-title",function(){return [_vm._v(_vm._s(_vm.tooltipTitle)+" ("+_vm._s(_vm.xAxisTitle)+")")]})]},proxy:true}],null,true)},[_vm._v(" "),_vm._t("tooltip-content",function(){return [_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.tooltipContent}})]})],2):_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/tooltip/tooltip.js

@@ -1,251 +0,0 @@
-import * as echarts from 'echarts';
-import { uid, debounceByAnimationFrame } from '../../../utils/utils';
-import GlPopover from '../../base/popover/popover';
-import { popoverPlacements } from '../../../utils/constants';
-import { TOOLTIP_LEFT_OFFSET, TOOLTIP_TOP_OFFSET } from '../../../utils/charts/constants';
-import { getTooltipTitle, getTooltipContent } from '../../../utils/charts/config';
-import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-//
-var script = {
-  name: 'GlChartTooltip',
-  components: {
-    GlPopover,
-    TooltipDefaultFormat
-  },
-  inheritAttrs: false,
-  props: {
-    chart: {
-      type: Object,
-      required: true,
-      validator(chart) {
-        return Object.is(chart, echarts.getInstanceByDom(chart.getDom()));
-      }
-    },
-    id: {
-      type: String,
-      required: false,
-      default: () => uid()
-    },
-    /**
-     * Position of the popover respective to the chart.
-     * Sets the `top` style property.
-     */
-    top: {
-      type: String,
-      required: false,
-      default: null
-    },
-    /**
-     * Position of the popover respective to the chart.
-     * Sets the `bottom` style property.
-     */
-    bottom: {
-      type: String,
-      required: false,
-      default: null
-    },
-    /**
-     * Position of the popover respective to the chart.
-     * Sets the `left` style property.
-     */
-    left: {
-      type: String,
-      required: false,
-      default: null
-    },
-    /**
-     * Position of the popover respective to the chart.
-     * Sets the `right` style property.
-     */
-    right: {
-      type: String,
-      required: false,
-      default: null
-    },
-    /**
-     * Set to `true` to show, set to `false` to not show.
-     * Set to `null` to show only when the mouse is in the chart.
-     */
-    show: {
-      type: Boolean,
-      required: false,
-      default: null
-    },
-    /**
-     * Popover placement
-     */
-    placement: {
-      type: String,
-      required: false,
-      default: popoverPlacements.right
-    },
-    /**
-     * Distance between the popover and the pointer when
-     * no position is defined
-     */
-    xOffset: {
-      type: Number,
-      required: false,
-      default: TOOLTIP_LEFT_OFFSET,
-      validator(value) {
-        // popover target must have a size of at least 1
-        return value >= 1;
-      }
-    },
-    /**
-     * Distance between the popover and the pointer when
-     * no position is defined
-     */
-    yOffset: {
-      type: Number,
-      required: false,
-      default: TOOLTIP_TOP_OFFSET,
-      validator(value) {
-        // popover target must have a size of at least 1
-        return value >= 1;
-      }
-    },
-    /**
-     * Set to true to use the default tooltip formatter.
-     */
-    useDefaultTooltipFormatter: {
-      type: Boolean,
-      required: false,
-      default: false
-    }
-  },
-  data() {
-    return {
-      pointerPosition: null,
-      isPointerInChart: false,
-      debouncedMouseHandler: debounceByAnimationFrame(this.mouseHandler),
-      title: null,
-      content: {},
-      params: null
-    };
-  },
-  computed: {
-    targetId() {
-      // if multiple tooltips are used in a chart component,
-      // `this.id` can be used to uniquely identify them
-      return `${this.chart.getDom().getAttribute('_echarts_instance_')}-tooltip-${this.id}`;
-    },
-    targetStyle() {
-      // the target is a rectangular space between cursor and popover
-      return {
-        marginTop: `${-this.yOffset}px`,
-        height: `${this.yOffset * 2}px`,
-        marginLeft: `${-this.xOffset}px`,
-        width: `${this.xOffset * 2}px`
-      };
-    },
-    fixedPosition() {
-      const {
-        top,
-        left,
-        bottom,
-        right
-      } = this;
-      if (top || left || bottom || right) {
-        return {
-          top,
-          left,
-          bottom,
-          right
-        };
-      }
-      return null;
-    },
-    shouldShowPopover() {
-      if (this.show !== null) {
-        return this.show;
-      }
-      return this.isPointerInChart;
-    }
-  },
-  created() {
-    this.chart.getZr().on('mousemove', this.debouncedMouseHandler);
-    this.chart.getZr().on('mouseout', this.debouncedMouseHandler);
-    if (this.useDefaultTooltipFormatter) {
-      this.chart.setOption({
-        xAxis: {
-          axisPointer: {
-            show: true,
-            label: {
-              formatter: params => {
-                var _options$xAxis, _options$xAxis$, _options$yAxis, _options$yAxis$;
-                const options = this.chart.getOption();
-                const titleAxisName = (_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;
-                const valueAxisName = (_options$yAxis = options.yAxis) === null || _options$yAxis === void 0 ? void 0 : (_options$yAxis$ = _options$yAxis[0]) === null || _options$yAxis$ === void 0 ? void 0 : _options$yAxis$.name;
-                this.title = getTooltipTitle(params, titleAxisName);
-                this.content = getTooltipContent(params, valueAxisName);
-                this.params = params;
-              }
-            }
-          }
-        }
-      });
-    }
-  },
-  beforeDestroy() {
-    this.chart.getZr().off('mousemove', this.debouncedMouseHandler);
-    this.chart.getZr().off('mouseout', this.debouncedMouseHandler);
-  },
-  methods: {
-    mouseHandler(event) {
-      let {
-        zrX: x,
-        zrY: y
-      } = event.event;
-      if (Number.isFinite(x) && Number.isFinite(y)) {
-        x = Math.round(x);
-        y = Math.round(y);
-        this.pointerPosition = {
-          left: `${x}px`,
-          top: `${y}px`
-        };
-        this.isPointerInChart = this.chart.containPixel('grid', [x, y]);
-      }
-    }
-  }
-};
-
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.chart)?_c('div',{staticClass:"gl-pointer-events-none"},[_c('div',{staticClass:"gl-chart-tooltip",style:(Object.assign({}, (_vm.fixedPosition || _vm.pointerPosition), _vm.targetStyle)),attrs:{"id":_vm.targetId}}),_vm._v(" "),_c('gl-popover',_vm._b({attrs:{"show":_vm.shouldShowPopover,"target":_vm.targetId,"container":_vm.targetId,"placement":_vm.placement,"triggers":""},scopedSlots:_vm._u([{key:"title",fn:function(){return [_vm._t("title",function(){return [_vm._v(_vm._s(_vm.title))]},null,{ title: _vm.title, params: _vm.params })]},proxy:true}],null,true)},'gl-popover',_vm.$attrs,false),[_vm._v(" "),_vm._t("default",function(){return [_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.content},scopedSlots:_vm._u([(_vm.$scopedSlots['tooltip-value'])?{key:"tooltip-value",fn:function(scope){return [_vm._t("tooltip-value",null,null,scope)]}}:null],null,true)})]},null,{ content: _vm.content, params: _vm.params })],2)],1):_vm._e()};
-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/experimental/duo/chat/components/duo_chat_conversation/duo_chat_conversation.js

@@ -1,83 +0,0 @@
-import GlDuoChatMessage from '../duo_chat_message/duo_chat_message';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-const i18n = {
-  CONVERSATION_NEW_CHAT: 'New chat'
-};
-const isMessage = item => Boolean(item) && (item === null || item === void 0 ? void 0 : item.role);
-
-// eslint-disable-next-line unicorn/no-array-callback-reference
-const itemsValidator = items => items.every(isMessage);
-var script = {
-  name: 'GlDuoChatConversation',
-  components: {
-    GlDuoChatMessage
-  },
-  props: {
-    /**
-     * Messages to display
-     */
-    messages: {
-      type: Array,
-      required: false,
-      default: () => [],
-      validator: itemsValidator
-    },
-    /**
-     * Whether to show the delimiter before this conversation
-     */
-    showDelimiter: {
-      type: Boolean,
-      required: false,
-      default: true
-    }
-  },
-  methods: {
-    onTrackFeedback(event) {
-      /**
-       * Notify listeners about the feedback form submission on a response message.
-       * @param {*} event An event, containing the feedback choices and the extended feedback text.
-       */
-      this.$emit('track-feedback', event);
-    }
-  },
-  i18n
-};
-
-/* 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('div',{staticClass:"gl-display-flex gl-flex-direction-column gl-justify-content-end"},[(_vm.showDelimiter)?_c('div',{staticClass:"gl-my-5 gl-display-flex gl-align-items-center gl-text-gray-500 gl-gap-4",attrs:{"data-testid":"conversation-delimiter"}},[_c('hr',{staticClass:"gl-flex-grow-1"}),_vm._v(" "),_c('span',[_vm._v(_vm._s(_vm.$options.i18n.CONVERSATION_NEW_CHAT))]),_vm._v(" "),_c('hr',{staticClass:"gl-flex-grow-1"})]):_vm._e(),_vm._v(" "),_vm._l((_vm.messages),function(msg,index){return _c('gl-duo-chat-message',{key:((msg.role) + "-" + index),attrs:{"message":msg},on:{"track-feedback":_vm.onTrackFeedback}})})],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__ = __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__;