@gitlab/ui 72.12.0 → 72.12.1

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

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

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

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