@gitlab/ui 72.11.1 → 72.12.0

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

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

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

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