@gitlab/duo-ui 0.1.0

package/src/components/charts/stacked_column/stacked_column.vue

@@ -0,0 +1,330 @@
+<script>
+import merge from 'lodash/merge';
+import {
+  defaultChartOptions,
+  grid,
+  gridWithSecondaryYAxis,
+  yAxis,
+  dataZoomAdjustments,
+  mergeSeriesToOptions,
+  generateBarSeries,
+  generateLineSeries,
+} from '../../../utils/charts/config';
+import {
+  LEGEND_LAYOUT_INLINE,
+  LEGEND_LAYOUT_TABLE,
+  LEGEND_AVERAGE_TEXT,
+  LEGEND_CURRENT_TEXT,
+  LEGEND_MIN_TEXT,
+  LEGEND_MAX_TEXT,
+  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.vue';
+import Chart from '../chart/chart.vue';
+import ChartLegend from '../legend/legend.vue';
+import ChartTooltip from '../tooltip/tooltip.vue';
+
+const yAxisDefaults = {
+  ...yAxis,
+  nameLocation: 'center',
+  axisTick: {
+    show: false,
+  },
+};
+
+export default {
+  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: () => [],
+    },
+    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;
+      },
+    },
+    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(({ name, data }, index) => {
+        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(({ name, data }, index) => {
+        const color = this.getColor(offset + index);
+        return generateLineSeries({ name, data, color });
+      });
+    },
+    secondarySeries() {
+      const offset = this.bars.length + this.lines.length;
+      return this.secondaryData.map(({ name, data, type, stack = columnOptions.tiled }, index) => {
+        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: this.includeLegendAvgMax ? series.data.map((data) => data) : undefined,
+          yAxisIndex: series.yAxisIndex,
+        });
+        return acc;
+      }, []);
+    },
+    autoHeight() {
+      return this.height === 'auto';
+    },
+  },
+  methods: {
+    getColor(index) {
+      return this.customPalette ? 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>
+<template>
+  <div class="position-relative" :class="{ [$options.HEIGHT_AUTO_CLASSES]: autoHeight }">
+    <chart
+      v-bind="$attrs"
+      :class="{ 'gl-grow': autoHeight }"
+      :height="height"
+      :options="options"
+      v-on="$listeners"
+      @created="onCreated"
+    />
+    <chart-tooltip v-if="chart" :chart="chart">
+      <template #title>
+        <slot name="tooltip-title">{{ tooltipTitle }} ({{ xAxisTitle }})</slot>
+      </template>
+
+      <slot name="tooltip-content">
+        <tooltip-default-format :tooltip-content="tooltipContent" />
+      </slot>
+    </chart-tooltip>
+    <chart-legend
+      v-if="compiledOptions"
+      :chart="chart"
+      :style="legendStyle"
+      :series-info="seriesInfo"
+      :text-style="compiledOptions.textStyle"
+      :min-text="legendMinText"
+      :max-text="legendMaxText"
+      :average-text="legendAverageText"
+      :current-text="legendCurrentText"
+      :layout="legendLayout"
+    />
+  </div>
+</template>

package/src/components/charts/tooltip/tooltip.md

@@ -0,0 +1,3 @@
+### ECharts custom tooltip
+
+Uses GitLab UI's `popover` component in lieu of echart's tooltip.

package/src/components/charts/tooltip/tooltip.scss

@@ -0,0 +1,9 @@
+.gl-chart-tooltip {
+  position: absolute;
+
+  > .popover {
+    @apply gl-min-w-0;
+    @apply gl-w-max;
+    max-width: $chart-tooltip-max-width;
+  }
+}

package/src/components/charts/tooltip/tooltip.vue

@@ -0,0 +1,253 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<script>
+import * as echarts from 'echarts';
+import { uid, debounceByAnimationFrame } from '../../../utils/utils';
+import GlPopover from '../../base/popover/popover.vue';
+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.vue';
+
+export default {
+  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) => {
+                const options = this.chart.getOption();
+                const titleAxisName = options.xAxis?.[0]?.name;
+                const valueAxisName = options.yAxis?.[0]?.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>
+
+<template>
+  <div v-if="chart" class="gl-pointer-events-none">
+    <div
+      :id="targetId"
+      :style="{ ...(fixedPosition || pointerPosition), ...targetStyle }"
+      class="gl-chart-tooltip"
+    ></div>
+    <!--
+      Is shown using `show` property directly so
+      `triggers` are set to an empty string
+    -->
+    <gl-popover
+      v-bind="$attrs"
+      :show="shouldShowPopover"
+      :target="targetId"
+      :container="targetId"
+      :placement="placement"
+      triggers=""
+    >
+      <template #title>
+        <!--
+          @slot Tooltip title
+          @binding {string} title - Default title
+          @binding {object} params
+        -->
+        <slot name="title" v-bind="{ title, params }">{{ title }}</slot>
+      </template>
+      <!--
+        @slot Tooltip content
+        @binding {object} content - Key-value pairs of series information
+        @binding {object} params - Full list of params from `onLabelChange`. Can be null before tooltip is shown
+       -->
+      <slot v-bind="{ content, params }">
+        <tooltip-default-format :tooltip-content="content">
+          <template v-if="$scopedSlots['tooltip-value']" #tooltip-value="scope">
+            <!-- @slot Tooltip value formatter -->
+            <slot name="tooltip-value" v-bind="scope"></slot>
+          </template>
+        </tooltip-default-format>
+      </slot>
+    </gl-popover>
+  </div>
+</template>

package/src/components/experimental/duo/chat/components/duo_chat_context/constants.js

@@ -0,0 +1,11 @@
+export const CONTEXT_ITEM_CATEGORY_ISSUE = 'issue';
+export const CONTEXT_ITEM_CATEGORY_MERGE_REQUEST = 'merge_request';
+export const CONTEXT_ITEM_CATEGORY_FILE = 'file';
+export const CONTEXT_ITEM_CATEGORY_LOCAL_GIT = 'local_git';
+
+export const CONTEXT_ITEM_LOCAL_GIT_COMMIT = 'commit';
+export const CONTEXT_ITEM_LOCAL_GIT_DIFF = 'diff';
+
+export const LANGUAGE_IDENTIFIER_PREFIX = 'language-';
+export const LANGUAGE_IDENTIFIER_DIFF = 'language-diff';
+export const LANGUAGE_IDENTIFIER_PLAINTEXT = 'language-plaintext';