@gitlab/ui 72.12.0 → 72.12.1

package/dist/components/charts/chart/chart.js

@@ -0,0 +1,215 @@
+import * as echarts from 'echarts';
+import { validRenderers, defaultWidth, defaultHeight, toolboxHeight } from '../../../utils/charts/config';
+import { themeName, createTheme } from '../../../utils/charts/theme';
+import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
+import { debounceByAnimationFrame } from '../../../utils/utils';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+//
+
+/**
+ * Allowed values by eCharts
+ * https://echarts.apache.org/en/api.html#echartsInstance.resize
+ */
+const sizeValidator = size => Number.isFinite(size) || size === 'auto' || size == null;
+const isChartWithToolbox = options => (options === null || options === void 0 ? void 0 : options.toolbox) !== undefined;
+const increaseChartGridTop = (options, increaseBy) => {
+  var _options$grid;
+  return {
+    ...options,
+    grid: {
+      ...options.grid,
+      top: ((options === null || options === void 0 ? void 0 : (_options$grid = options.grid) === null || _options$grid === void 0 ? void 0 : _options$grid.top) || 0) + increaseBy
+    }
+  };
+};
+var script = {
+  name: 'GlChart',
+  directives: {
+    resizeObserver: GlResizeObserverDirective
+  },
+  props: {
+    /**
+     * The ECharts configuration object.
+     * https://echarts.apache.org/en/option.html#title
+     */
+    options: {
+      type: Object,
+      required: true
+    },
+    /**
+     * Warning: this prop is deprecated and will soon be removed
+     * Please do not utilize `disableTheme` for formatting
+     * Use the `options` prop to set desired echarts formatting
+     */
+    disableTheme: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    width: {
+      type: [Number, String],
+      required: false,
+      default: null,
+      validator: sizeValidator
+    },
+    /**
+     * 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,
+      validator: sizeValidator
+    },
+    /**
+     * An ECharts group id. Used to connect multiple charts.
+     * https://echarts.apache.org/en/api.html#echarts.connect
+     */
+    groupId: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    /**
+     * How the chart should be rendered. Valid options are 'canvas' or 'svg'.
+     * https://echarts.apache.org/handbook/en/best-practices/canvas-vs-svg/
+     */
+    renderer: {
+      type: String,
+      required: false,
+      default: 'svg',
+      validator(renderer) {
+        return validRenderers.includes(renderer);
+      }
+    },
+    responsive: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  data() {
+    return {
+      chart: null,
+      debouncedHandleResize: debounceByAnimationFrame(this.handleResize)
+    };
+  },
+  computed: {
+    normalizedOptions() {
+      return isChartWithToolbox(this.options) ? increaseChartGridTop(this.options, toolboxHeight) : this.options;
+    }
+  },
+  watch: {
+    options() {
+      if (this.chart) {
+        this.draw();
+      }
+    },
+    width() {
+      this.setChartSize();
+    },
+    height() {
+      this.setChartSize();
+    }
+  },
+  created() {
+    if (!this.disableTheme) {
+      echarts.registerTheme(themeName, createTheme(this.options));
+    }
+  },
+  async mounted() {
+    await this.$nextTick();
+    const chart = echarts.init(this.$refs.chart, this.disableTheme ? null : themeName, {
+      renderer: this.renderer,
+      width: defaultWidth,
+      height: defaultHeight
+    });
+    // FIXME: temporary workaround to ensure compatibility with @vue/compat
+    // eslint-disable-next-line no-underscore-dangle
+    chart.__v_skip = true;
+    this.chart = chart;
+    if (this.groupId.length) {
+      this.chart.group = this.groupId;
+      echarts.connect(this.groupId);
+    }
+    this.chart.on('click', this.handleClick);
+    /**
+     * Emitted after calling `echarts.init`
+     */
+    this.$emit('created', this.chart);
+    this.draw();
+    this.setChartSize();
+  },
+  beforeDestroy() {
+    this.chart.off('click', this.handleClick);
+  },
+  methods: {
+    draw() {
+      this.chart.setOption(this.normalizedOptions);
+      /**
+       * Emitted after calling `echarts.setOption`
+       */
+      this.$emit('updated', this.chart);
+    },
+    setChartSize() {
+      this.chart.resize({
+        width: this.width || 'auto',
+        height: this.height || defaultHeight
+      });
+    },
+    handleClick(params) {
+      /**
+       * Emitted when clicked on a data item in the chart (e.g., a bar/column).
+       *
+       * @property {object} chart The chart instance
+       * @property {object} params A params object, see also https://echarts.apache.org/en/api.html#events.Mouse%20events
+       */
+      this.$emit('chartItemClicked', {
+        chart: this.chart,
+        params
+      });
+    },
+    handleResize() {
+      this.chart.resize();
+    }
+  }
+};
+
+/* 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',{directives:[{name:"resize-observer",rawName:"v-resize-observer:[responsive]",value:(_vm.debouncedHandleResize),expression:"debouncedHandleResize",arg:_vm.responsive}],ref:"chart"})};
+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/column/column.js

@@ -0,0 +1,226 @@
+import merge from 'lodash/merge';
+import { yAxis, generateBarSeries, generateLineSeries, defaultChartOptions, gridWithSecondaryYAxis, grid, dataZoomAdjustments, mergeSeriesToOptions } from '../../../utils/charts/config';
+import { CHART_TYPE_LINE, HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
+import { colorFromDefaultPalette } from '../../../utils/charts/theme';
+import { columnOptions } from '../../../utils/constants';
+import Chart from '../chart/chart';
+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: 'GlColumnChart',
+  components: {
+    Chart,
+    ChartTooltip
+  },
+  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: () => ({})
+    },
+    yAxisTitle: {
+      type: String,
+      required: true
+    },
+    secondaryDataTitle: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    xAxisTitle: {
+      type: String,
+      required: true
+    },
+    xAxisType: {
+      type: String,
+      required: true,
+      validator: value => ['value', 'category', 'time', 'log'].indexOf(value) !== -1
+    },
+    /**
+     * 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
+    };
+  },
+  computed: {
+    hasSecondaryAxis() {
+      return Boolean(this.secondaryData.length);
+    },
+    barSeries() {
+      return this.bars.map((_ref, index) => {
+        let {
+          name,
+          data,
+          stack
+        } = _ref;
+        const color = colorFromDefaultPalette(index);
+        return generateBarSeries({
+          name,
+          data,
+          stack,
+          color
+        });
+      });
+    },
+    lineSeries() {
+      const offset = this.bars.length;
+      return this.lines.map((_ref2, index) => {
+        let {
+          name,
+          data
+        } = _ref2;
+        const color = colorFromDefaultPalette(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 = colorFromDefaultPalette(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 yAxisPrimary = {
+        ...yAxisDefaults,
+        name: this.yAxisTitle
+      };
+      const mergedOptions = merge({}, defaultChartOptions, {
+        grid: this.hasSecondaryAxis ? gridWithSecondaryYAxis : grid,
+        xAxis: {
+          boundaryGap: true,
+          axisLabel: {
+            margin: 20,
+            verticalAlign: 'bottom'
+          },
+          axisLine: {
+            show: false
+          },
+          axisPointer: {
+            type: 'none'
+          },
+          name: this.xAxisTitle,
+          type: this.xAxisType
+        },
+        yAxis: this.hasSecondaryAxis ? [yAxisPrimary, {
+          ...yAxisDefaults,
+          name: this.secondaryDataTitle,
+          show: this.hasSecondaryAxis
+        }] : yAxisPrimary,
+        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);
+    },
+    autoHeight() {
+      return this.height === 'auto';
+    }
+  },
+  methods: {
+    onCreated(chart) {
+      this.chart = chart;
+      this.$emit('created', chart);
+    }
+  },
+  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',{ref:"dataTooltip",attrs:{"chart":_vm.chart,"use-default-tooltip-formatter":true},scopedSlots:_vm._u([(_vm.$scopedSlots['tooltip-title'])?{key:"title",fn:function(scope){return [_vm._t("tooltip-title",null,null,scope)]}}:null,(_vm.$scopedSlots['tooltip-content'])?{key:"default",fn:function(scope){return [_vm._t("tooltip-content",null,null,scope)]}}:null,(_vm.$scopedSlots['tooltip-value'])?{key:"tooltip-value",fn:function(scope){return [_vm._t("tooltip-value",null,null,scope)]}}:null],null,true)}):_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/discrete_scatter/discrete_scatter.js

@@ -0,0 +1,203 @@
+import merge from 'lodash/merge';
+import { GRAY_200 } from '../../../../dist/tokens/js/tokens';
+import { defaultChartOptions, dataZoomAdjustments, mergeSeriesToOptions } from '../../../utils/charts/config';
+import { colorFromDefaultPalette } from '../../../utils/charts/theme';
+import { HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
+import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format';
+import Chart from '../chart/chart';
+import ChartTooltip from '../tooltip/tooltip';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlDiscreteScatterChart',
+  components: {
+    Chart,
+    ChartTooltip,
+    TooltipDefaultFormat
+  },
+  inheritAttrs: false,
+  props: {
+    data: {
+      type: Array,
+      required: true
+    },
+    option: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
+    yAxisTitle: {
+      type: String,
+      required: true
+    },
+    xAxisTitle: {
+      type: String,
+      required: true
+    },
+    symbolSize: {
+      type: Number,
+      required: false,
+      default: 8
+    },
+    formatTooltipText: {
+      type: Function,
+      required: false,
+      default: null
+    },
+    disableTooltip: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * 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: {},
+      tooltipPosition: {
+        left: '0',
+        top: '0'
+      },
+      selectedFormatTooltipText: this.formatTooltipText || this.defaultFormatTooltipText
+    };
+  },
+  computed: {
+    series() {
+      return this.data.map((series, index) => {
+        const defaultColor = colorFromDefaultPalette(index);
+        const getColor = type => series[type] && series[type].color ? series[type].color : defaultColor;
+        return merge({
+          symbolSize: this.symbolSize,
+          lineStyle: {
+            color: getColor('lineStyle')
+          },
+          itemStyle: {
+            color: getColor('itemStyle')
+          }
+        }, series);
+      });
+    },
+    options() {
+      const mergedOptions = merge({}, defaultChartOptions, {
+        tooltip: this.disableTooltip ? undefined : {
+          formatter: this.onLabelChange
+        },
+        xAxis: {
+          type: 'category',
+          name: this.xAxisTitle,
+          axisTick: {
+            alignWithLabel: true,
+            show: true,
+            lineStyle: {
+              color: GRAY_200
+            }
+          },
+          axisLabel: {
+            margin: 20,
+            verticalAlign: 'bottom'
+          }
+        },
+        yAxis: {
+          type: 'value',
+          name: this.yAxisTitle
+        },
+        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);
+    },
+    autoHeight() {
+      return this.height === 'auto';
+    }
+  },
+  methods: {
+    defaultFormatTooltipText(params) {
+      const data = this.getChartData(params);
+      const [title, content] = data;
+      this.tooltipTitle = title;
+      const seriesName = this.yAxisTitle;
+      const tooltipContent = {
+        [seriesName]: {
+          value: content,
+          color: ''
+        }
+      };
+      this.$set(this, 'tooltipContent', tooltipContent);
+    },
+    onCreated(chart) {
+      this.chart = chart;
+      this.$emit('created', chart);
+    },
+    onLabelChange(params) {
+      this.selectedFormatTooltipText(params);
+      const data = this.getChartData(params);
+      if (data.length) {
+        const [left, top] = this.chart.convertToPixel('grid', data);
+        this.tooltipPosition = {
+          left: `${left}px`,
+          top: `${top}px`
+        };
+      }
+    },
+    getChartData(_ref) {
+      let {
+        data
+      } = _ref;
+      const chartData = (data === null || data === void 0 ? void 0 : data.value) || data;
+      return Array.isArray(chartData) ? chartData : [];
+    }
+  },
+  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.disableTooltip && _vm.chart)?_c('chart-tooltip',{attrs:{"chart":_vm.chart,"top":_vm.tooltipPosition.top,"left":_vm.tooltipPosition.left},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()],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__;