@gitlab/ui 72.12.0 → 72.12.1

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

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

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

@@ -0,0 +1,83 @@
+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__;