@gitlab/ui 72.11.1 → 72.12.0

package/dist/components/charts/legend/legend.js

@@ -1,228 +0,0 @@
-import * as echarts from 'echarts';
-import { GRAY_200 } from '../../../../dist/tokens/js/tokens';
-import { defaultFontSize } from '../../../utils/charts/config';
-import { LEGEND_AVERAGE_TEXT, LEGEND_CURRENT_TEXT, LEGEND_MIN_TEXT, LEGEND_MAX_TEXT, LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE } from '../../../utils/charts/constants';
-import { engineeringNotation, average } from '../../../utils/number_utils';
-import GlTruncate from '../../utilities/truncate/truncate';
-import GlChartSeriesLabel from '../series_label/series_label';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-//
-var script = {
-  name: 'GlChartLegend',
-  components: {
-    GlChartSeriesLabel,
-    GlTruncate
-  },
-  props: {
-    chart: {
-      type: Object,
-      required: true,
-      validator(chart) {
-        return Object.is(chart, echarts.getInstanceByDom(chart.getDom()));
-      }
-    },
-    seriesInfo: {
-      type: Array,
-      required: true,
-      validator(seriesInfo) {
-        return seriesInfo.every(series => series.type && series.name && series.color);
-      }
-    },
-    textStyle: {
-      type: Object,
-      required: false,
-      default: () => ({})
-    },
-    /**
-     * Text for data average (overridden by prop if needed for internationalization)
-     */
-    averageText: {
-      type: String,
-      required: false,
-      default: LEGEND_AVERAGE_TEXT
-    },
-    currentText: {
-      type: String,
-      required: false,
-      default: LEGEND_CURRENT_TEXT
-    },
-    minText: {
-      type: String,
-      required: false,
-      default: LEGEND_MIN_TEXT
-    },
-    /**
-     * Text for max amount (overridden by prop if needed for internationalization)
-     */
-    maxText: {
-      type: String,
-      required: false,
-      default: LEGEND_MAX_TEXT
-    },
-    /**
-     * Sets the display layout
-     */
-    layout: {
-      type: String,
-      required: false,
-      default: LEGEND_LAYOUT_INLINE,
-      validator(layout) {
-        return [LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE].indexOf(layout) !== -1;
-      }
-    }
-  },
-  data() {
-    return {
-      disabledSeries: {},
-      lastActiveSeriesLabel: null
-    };
-  },
-  computed: {
-    fontStyle() {
-      return {
-        fontFamily: this.textStyle.fontFamily || 'sans-serif',
-        fontSize: `${this.textStyle.fontSize || defaultFontSize}px`
-      };
-    },
-    hasOneSeriesElement() {
-      return this.seriesInfo.length === 1;
-    }
-  },
-  created() {
-    this.chart.on('legendselectchanged', this.suppressLastActiveSeriesLabelToggle);
-  },
-  beforeDestroy() {
-    this.chart.off('legendselectchanged', this.suppressLastActiveSeriesLabelToggle);
-  },
-  methods: {
-    sanitizeSeriesData(seriesData) {
-      var _seriesData$filter;
-      return (_seriesData$filter = seriesData === null || seriesData === void 0 ? void 0 : seriesData.filter(d => !Number.isNaN(d))) !== null && _seriesData$filter !== void 0 ? _seriesData$filter : [];
-    },
-    seriesAverage(seriesData) {
-      const sanitized = this.sanitizeSeriesData(seriesData);
-      return engineeringNotation(average(...sanitized));
-    },
-    seriesMax(seriesData) {
-      const sanitized = this.sanitizeSeriesData(seriesData);
-      return engineeringNotation(Math.max(...sanitized));
-    },
-    seriesMin(seriesData) {
-      const sanitized = this.sanitizeSeriesData(seriesData);
-      return engineeringNotation(Math.min(...sanitized));
-    },
-    seriesLast(seriesData) {
-      const sanitized = this.sanitizeSeriesData(seriesData);
-      return engineeringNotation(sanitized[sanitized.length - 1]);
-    },
-    seriesNameIsLong(seriesName) {
-      return seriesName.length > 120;
-    },
-    handleClick(_ref, key) {
-      let {
-        name,
-        disabled
-      } = _ref;
-      if (this.hasOneSeriesElement || this.isToggleDisabled(name, disabled)) return;
-      this.chart.dispatchAction({
-        type: 'legendToggleSelect',
-        name
-      });
-      this.disabledSeries = {
-        ...this.disabledSeries,
-        [key]: !this.disabledSeries[key]
-      };
-    },
-    handleMouseEnter(name) {
-      this.chart.dispatchAction({
-        type: 'highlight',
-        seriesName: name
-      });
-    },
-    handleMouseLeave(name) {
-      this.chart.dispatchAction({
-        type: 'downplay',
-        seriesName: name
-      });
-    },
-    getColor(color, key) {
-      return this.disabledSeries[key] ? GRAY_200 : color;
-    },
-    suppressLastActiveSeriesLabelToggle(_ref2) {
-      let {
-        selected
-      } = _ref2;
-      const selectedSeriesLabels = Object.entries(selected).filter(_ref3 => {
-        let [, isSelected] = _ref3;
-        return Boolean(isSelected);
-      });
-      this.lastActiveSeriesLabel = null;
-      if (selectedSeriesLabels.length === 1) {
-        const [lastActiveSeriesLabelName] = selectedSeriesLabels[0];
-        this.lastActiveSeriesLabel = lastActiveSeriesLabelName;
-      }
-    },
-    /**
-     * Disables toggling legend if it is the last active one or if its data series
-     * has a disabled property set to true
-     * @param {String} name Series name
-     * @param {Boolean} isDisabled Value of the series element's disabled property
-     * @returns {boolean}
-     */
-    isToggleDisabled(name, isDisabled) {
-      return name === this.lastActiveSeriesLabel || isDisabled;
-    }
-  },
-  legendLayoutTypes: {
-    LEGEND_LAYOUT_INLINE,
-    LEGEND_LAYOUT_TABLE
-  }
-};
-
-/* 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-legend",attrs:{"data-testid":"gl-chart-legend"}},[(_vm.layout === _vm.$options.legendLayoutTypes.LEGEND_LAYOUT_INLINE)?[_c('div',{staticClass:"gl-legend-inline"},_vm._l((_vm.seriesInfo),function(series,key){return _c('div',{key:key,staticClass:"gl-legend-inline-series",class:{
-          'text-muted': _vm.disabledSeries[key],
-          'w-100': _vm.seriesNameIsLong(series.name),
-          'gl-hover-cursor-not-allowed!':
-            _vm.hasOneSeriesElement || _vm.isToggleDisabled(series.name, series.disabled),
-        },style:(_vm.fontStyle),attrs:{"aria-disabled":_vm.hasOneSeriesElement || _vm.isToggleDisabled(series.name, series.disabled),"role":"button"},on:{"click":function($event){return _vm.handleClick(series, key)},"mouseenter":function($event){return _vm.handleMouseEnter(series.name)},"mouseleave":function($event){return _vm.handleMouseLeave(series.name)}}},[_c('gl-chart-series-label',{staticClass:"gl-legend-inline-series-label",class:{ 'w-75': _vm.seriesNameIsLong(series.name) },attrs:{"color":_vm.getColor(series.color, key),"type":series.type}},[_c('gl-truncate',{staticClass:"gl-font-weight-bold",attrs:{"text":series.name}})],1),_vm._v(" "),(series.data && series.data.length)?_c('span',{class:{ 'gl-white-space-nowrap': _vm.seriesNameIsLong(series.name) }},[_vm._v("\n          "+_vm._s(_vm.averageText)+": "+_vm._s(_vm.seriesAverage(series.data))+" · "+_vm._s(_vm.maxText)+":\n          "+_vm._s(_vm.seriesMax(series.data))+"\n        ")]):_vm._e()],1)}),0)]:_vm._e(),_vm._v(" "),(_vm.layout === _vm.$options.legendLayoutTypes.LEGEND_LAYOUT_TABLE)?[_c('div',{staticClass:"gl-legend-tabular",style:(_vm.fontStyle)},[_c('header',{staticClass:"gl-legend-tabular-header"},[_c('div',{staticClass:"gl-legend-tabular-header-cell"},[_vm._v(_vm._s(_vm.minText))]),_vm._v(" "),_c('div',{staticClass:"gl-legend-tabular-header-cell"},[_vm._v(_vm._s(_vm.maxText))]),_vm._v(" "),_c('div',{staticClass:"gl-legend-tabular-header-cell"},[_vm._v(_vm._s(_vm.averageText))]),_vm._v(" "),_c('div',{staticClass:"gl-legend-tabular-header-cell"},[_vm._v(_vm._s(_vm.currentText))])]),_vm._v(" "),_c('section',{staticClass:"gl-legend-tabular-body"},_vm._l((_vm.seriesInfo),function(series,key){return _c('div',{key:key,staticClass:"gl-legend-tabular-row",class:{
-            'text-muted': _vm.disabledSeries[key],
-            'gl-hover-cursor-not-allowed!':
-              _vm.hasOneSeriesElement || _vm.isToggleDisabled(series.name, series.disabled),
-          },style:(_vm.fontStyle),attrs:{"aria-disabled":_vm.isToggleDisabled(series.name, series.disabled),"role":"button"},on:{"click":function($event){return _vm.handleClick(series, key)},"mouseenter":function($event){return _vm.handleMouseEnter(series.name)},"mouseleave":function($event){return _vm.handleMouseLeave(series.name)}}},[_c('div',{staticClass:"gl-legend-tabular-title-cell"},[_c('gl-chart-series-label',{style:(_vm.fontStyle),attrs:{"color":_vm.getColor(series.color, key),"type":series.type}},[_c('gl-truncate',{staticClass:"gl-font-weight-bold",attrs:{"text":series.name}})],1)],1),_vm._v(" "),(_vm.sanitizeSeriesData(series.data).length)?[_c('div',{staticClass:"gl-legend-tabular-details-cell"},[_vm._v(_vm._s(_vm.seriesMin(series.data)))]),_vm._v(" "),_c('div',{staticClass:"gl-legend-tabular-details-cell"},[_vm._v(_vm._s(_vm.seriesMax(series.data)))]),_vm._v(" "),_c('div',{staticClass:"gl-legend-tabular-details-cell"},[_vm._v(_vm._s(_vm.seriesAverage(series.data)))]),_vm._v(" "),_c('div',{staticClass:"gl-legend-tabular-details-cell"},[_vm._v(_vm._s(_vm.seriesLast(series.data)))])]:[_c('div',{staticClass:"gl-legend-tabular-details-cell"},[_vm._v("-")]),_vm._v(" "),_c('div',{staticClass:"gl-legend-tabular-details-cell"},[_vm._v("-")]),_vm._v(" "),_c('div',{staticClass:"gl-legend-tabular-details-cell"},[_vm._v("-")]),_vm._v(" "),_c('div',{staticClass:"gl-legend-tabular-details-cell"},[_vm._v("-")])]],2)}),0)])]:_vm._e()],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__;

package/dist/components/charts/line/line.js

@@ -1,308 +0,0 @@
-import merge from 'lodash/merge';
-import { GRAY_200 } from '../../../../dist/tokens/js/tokens';
-import { symbolSize, lineStyle, getThresholdConfig, generateAnnotationSeries, defaultChartOptions, dataZoomAdjustments, mergeSeriesToOptions, mergeAnnotationAxisToOptions, grid } from '../../../utils/charts/config';
-import { LEGEND_AVERAGE_TEXT, LEGEND_MAX_TEXT, LEGEND_MIN_TEXT, LEGEND_CURRENT_TEXT, LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE, HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
-import { colorFromDefaultPalette } from '../../../utils/charts/theme';
-import { seriesHasAnnotations, isDataPointAnnotation } from '../../../utils/charts/utils';
-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';
-
-//
-var script = {
-  name: 'GlLineChart',
-  components: {
-    Chart,
-    ChartLegend,
-    ChartTooltip
-  },
-  inheritAttrs: false,
-  props: {
-    data: {
-      type: Array,
-      required: true
-    },
-    option: {
-      type: Object,
-      required: false,
-      default: () => ({})
-    },
-    thresholds: {
-      type: Array,
-      required: false,
-      default: () => []
-    },
-    annotations: {
-      type: Array,
-      required: false,
-      default: () => []
-    },
-    includeLegendAvgMax: {
-      type: Boolean,
-      required: false,
-      default: true
-    },
-    /**
-     * Callback called when showing or refreshing a tooltip.
-     * **Deprecated:** Use slots `#tooltip-title`, `#tooltip-content` or `#tooltip-value`.
-     *
-     * @deprecated Use slots `#tooltip-title`, `#tooltip-content` or `#tooltip-value`.
-     */
-    formatTooltipText: {
-      type: Function,
-      required: false,
-      default: null
-    },
-    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;
-      }
-    },
-    showLegend: {
-      type: Boolean,
-      required: false,
-      default: true
-    },
-    /**
-     * 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() {
-    // Part of the tooltip related data can be
-    // moved into the tooltip component.
-    // Tracking that progress in
-    // https://gitlab.com/gitlab-org/gitlab-ui/-/issues/618
-    return {
-      chart: null,
-      showAnnotationsTooltip: false,
-      annotationsTooltipTitle: '',
-      annotationsTooltipContent: '',
-      annotationsTooltipPosition: {
-        left: '0',
-        top: '0'
-      }
-    };
-  },
-  computed: {
-    series() {
-      const dataSeries = this.data.map((series, index) => {
-        const defaultColor = colorFromDefaultPalette(index);
-        const getColor = type => {
-          var _series$type$color, _series$type;
-          return (_series$type$color = (_series$type = series[type]) === null || _series$type === void 0 ? void 0 : _series$type.color) !== null && _series$type$color !== void 0 ? _series$type$color : defaultColor;
-        };
-        return merge({
-          showSymbol: true,
-          lineStyle: {
-            color: getColor('lineStyle')
-          },
-          itemStyle: {
-            color: getColor('itemStyle')
-          }
-        }, symbolSize, lineStyle, series, getThresholdConfig(this.thresholds));
-      });
-      // if annotation series exists, append it
-      // along with data series
-      if (this.annotationSeries) {
-        return [...dataSeries, this.annotationSeries];
-      }
-      return dataSeries;
-    },
-    annotationSeries() {
-      return generateAnnotationSeries(this.annotations);
-    },
-    options() {
-      const defaultLineChartOptions = {
-        xAxis: {
-          axisPointer: {
-            show: true,
-            label: {
-              formatter: this.formatTooltipText
-            }
-          },
-          axisTick: {
-            alignWithLabel: true,
-            show: true,
-            lineStyle: {
-              color: GRAY_200
-            }
-          }
-        },
-        legend: {
-          show: false
-        }
-      };
-      const mergedOptions = merge({}, defaultChartOptions, defaultLineChartOptions, this.option, dataZoomAdjustments(this.option.dataZoom));
-      // All chart options can be merged but series
-      // needs to be handled specially
-      return mergeSeriesToOptions(mergeAnnotationAxisToOptions(mergedOptions, this.hasAnnotations), this.series);
-    },
-    /**
-     * Annotations currently are passed as series options in monitoring dashboard.
-     * Once https://gitlab.com/gitlab-org/gitlab/-/issues/213390 is closed,
-     * annotations will be passed as props and not as series options.
-     *
-     * For backward compatibility, we're having to check for both.
-     */
-    hasAnnotations() {
-      return this.annotations.length !== 0 || seriesHasAnnotations(this.option.series);
-    },
-    shouldShowAnnotationsTooltip() {
-      return this.chart && this.hasAnnotations;
-    },
-    compiledOptions() {
-      return this.chart ? this.chart.getOption() : null;
-    },
-    legendStyle() {
-      return {
-        paddingLeft: `${grid.left}px`
-      };
-    },
-    hasLegend() {
-      return this.compiledOptions && this.showLegend;
-    },
-    seriesInfo() {
-      return this.compiledOptions.series.reduce((acc, series, index) => {
-        if (series.type === 'line') {
-          acc.push({
-            name: series.name,
-            type: series.lineStyle.type,
-            color: series.lineStyle.color || colorFromDefaultPalette(index),
-            data: this.includeLegendAvgMax ? series.data.map(data => data[1]) : undefined
-          });
-        }
-        return acc;
-      }, []);
-    },
-    autoHeight() {
-      return this.height === 'auto';
-    }
-  },
-  beforeDestroy() {
-    this.chart.off('mouseout', this.onChartDataPointMouseOut);
-    this.chart.off('mouseover', this.onChartDataPointMouseOver);
-  },
-  methods: {
-    defaultAnnotationTooltipText(params) {
-      var _params$data$tooltipD;
-      return {
-        title: params.data.xAxis,
-        content: (_params$data$tooltipD = params.data.tooltipData) === null || _params$data$tooltipD === void 0 ? void 0 : _params$data$tooltipD.content
-      };
-    },
-    onCreated(chart) {
-      // eCharts inbuild mouse events
-      // https://echarts.apache.org/en/api.html#events.Mouse%20events
-      // is used to attach listeners to markPoints. These listeners
-      // are currently used for annotation arrows at the bottom of the chart.
-
-      // Because data points and annotations arrows are in different
-      // sections of the charts with their own mouseovers and mouseouts,
-      // there shouldn't be an overlapping situation where both tooltips
-      // are visible.
-
-      if (this.hasAnnotations) {
-        chart.on('mouseout', this.onChartDataPointMouseOut);
-        chart.on('mouseover', this.onChartDataPointMouseOver);
-      }
-      this.chart = chart;
-      this.$emit('created', chart);
-    },
-    onChartDataPointMouseOut() {
-      this.showAnnotationsTooltip = false;
-    },
-    /**
-     * Check if the hovered data point is an annotation
-     * point to show the annotation tooltip.
-     */
-    onChartDataPointMouseOver(params) {
-      if (isDataPointAnnotation(params)) {
-        const {
-          event
-        } = params;
-        const toolTipFormatter = this.formatAnnotationsTooltipText || this.defaultAnnotationTooltipText;
-        const {
-          title = '',
-          content = ''
-        } = toolTipFormatter(params);
-        this.showAnnotationsTooltip = true;
-        this.annotationsTooltipTitle = title;
-        this.annotationsTooltipContent = content;
-        this.annotationsTooltipPosition = {
-          left: `${event.event.zrX}px`,
-          top: `${event.event.zrY}px`
-        };
-      }
-    }
-  },
-  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.shouldShowAnnotationsTooltip)?_c('chart-tooltip',{ref:"annotationsTooltip",attrs:{"id":"annotationsTooltip","show":_vm.showAnnotationsTooltip,"chart":_vm.chart,"top":_vm.annotationsTooltipPosition.top,"left":_vm.annotationsTooltipPosition.left,"placement":"bottom"},scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('div',[_vm._v(_vm._s(_vm.annotationsTooltipTitle))])]},proxy:true}],null,false,1889294429)},[_vm._v(" "),_c('div',[_vm._v(_vm._s(_vm.annotationsTooltipContent))])]):_vm._e(),_vm._v(" "),(_vm.chart)?_c('chart-tooltip',{ref:"dataTooltip",attrs:{"chart":_vm.chart,"use-default-tooltip-formatter":!_vm.formatTooltipText},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(),_vm._v(" "),(_vm.hasLegend)?_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/series_label/series_label.js

@@ -1,100 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-const makePathRect = (startX, startY, width, height) => `M${startX},${startY}H${startX + width}V${startY + height}H${startX}Z`;
-var script = {
-  name: 'GlChartSeriesLabel',
-  props: {
-    color: {
-      type: String,
-      required: true
-    },
-    type: {
-      type: String,
-      required: false,
-      default: 'solid'
-    }
-  },
-  data() {
-    return {
-      labelLineHeight: 0
-    };
-  },
-  computed: {
-    pathContent() {
-      const width = this.$options.svgWidth;
-      const height = this.$options.svgHeight;
-      if (this.type === 'dashed') {
-        const dashWidth = Math.ceil(width / 3);
-        const firstDash = makePathRect(0, 0, dashWidth, height);
-        const secondDash = makePathRect(width - dashWidth, 0, dashWidth, height);
-        return `${firstDash}${secondDash}`;
-      }
-      return makePathRect(0, 0, width, height);
-    },
-    svgStyles() {
-      return {
-        fill: this.color,
-        transform: `translateY(${this.formatPixelDimension(this.svgYTranslationValue)})`,
-        width: 'auto'
-      };
-    },
-    svgYTranslationValue() {
-      const value = this.labelLineHeight / 2 - this.$options.svgHeight / 2;
-      return Math.round(value) || 0;
-    }
-  },
-  mounted() {
-    if (getComputedStyle && this.$refs.label) {
-      const computedStyle = getComputedStyle(this.$refs.label);
-      const lineHeight = computedStyle['line-height'].match(/(\d+)px/);
-      if (lineHeight !== null) {
-        this.labelLineHeight = parseFloat(lineHeight[1]);
-      }
-    }
-  },
-  methods: {
-    formatPixelDimension(dimension) {
-      return `${dimension}px`;
-    }
-  },
-  svgWidth: 16,
-  svgHeight: 4
-};
-
-/* 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-series-label-container"},[(_vm.color.length)?_c('div',{staticClass:"gl-series-label-color"},[_c('svg',{style:(_vm.svgStyles),attrs:{"width":_vm.formatPixelDimension(_vm.$options.svgWidth),"height":_vm.formatPixelDimension(_vm.$options.svgHeight)}},[_c('path',{attrs:{"d":_vm.pathContent}})])]):_vm._e(),_vm._v(" "),_c('div',{ref:"label",staticClass:"gl-series-label-text"},[_vm._t("default")],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__;