@gitlab/duo-ui 0.1.0 → 0.3.0

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

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

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

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

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

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