@gitlab/ui/dist/components/charts/legend/legend.js

GitLab UI Components

import echarts from 'echarts';
import GlChartSeriesLabel from '../series_label/series_label';
import { engineeringNotation, average } from '../../../utils/number_utils';
import { defaultFontSize } from '../../../utils/charts/config';
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';

function _defineProperty(obj, key, value) {
  if (key in obj) {
    Object.defineProperty(obj, key, {
      value: value,
      enumerable: true,
      configurable: true,
      writable: true
    });
  } else {
    obj[key] = value;
  }

  return obj;
}

function _objectSpread(target) {
  for (var i = 1; i < arguments.length; i++) {
    var source = arguments[i] != null ? arguments[i] : {};
    var ownKeys = Object.keys(source);

    if (typeof Object.getOwnPropertySymbols === 'function') {
      ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
        return Object.getOwnPropertyDescriptor(source, sym).enumerable;
      }));
    }

    ownKeys.forEach(function (key) {
      _defineProperty(target, key, source[key]);
    });
  }

  return target;
}

function _toConsumableArray(arr) {
  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
}

function _arrayWithoutHoles(arr) {
  if (Array.isArray(arr)) {
    for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];

    return arr2;
  }
}

function _iterableToArray(iter) {
  if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
}

function _nonIterableSpread() {
  throw new TypeError("Invalid attempt to spread non-iterable instance");
}

var gray200 = '#dfdfdf';

var script = {
  components: {
    GlChartSeriesLabel: GlChartSeriesLabel
  },
  props: {
    chart: {
      type: Object,
      required: true,
      validator: function validator(chart) {
        return Object.is(chart, echarts.getInstanceByDom(chart.getDom()));
      }
    },
    seriesInfo: {
      type: Array,
      required: true,
      validator: function validator(seriesInfo) {
        return seriesInfo.every(function (series) {
          return series.type && series.name && series.color;
        });
      }
    },
    textStyle: {
      type: Object,
      required: false,
      default: function _default() {
        return {};
      }
    },
    averageText: {
      type: String,
      required: false,
      default: 'Avg'
    },
    maxText: {
      type: String,
      required: false,
      default: 'Max'
    }
  },
  data: function data() {
    return {
      disabledSeries: {}
    };
  },
  computed: {
    fontStyle: function fontStyle() {
      return {
        fontFamily: this.textStyle.fontFamily || 'sans-serif',
        fontSize: "".concat(this.textStyle.fontSize || defaultFontSize, "px")
      };
    }
  },
  methods: {
    seriesAverage: function seriesAverage(seriesData) {
      return engineeringNotation(average.apply(void 0, _toConsumableArray(seriesData)));
    },
    seriesMax: function seriesMax(seriesData) {
      return engineeringNotation(Math.max.apply(Math, _toConsumableArray(seriesData)));
    },
    handleClick: function handleClick(name, key) {
      this.chart.dispatchAction({
        type: 'legendToggleSelect',
        name: name
      });
      this.disabledSeries = _objectSpread({}, this.disabledSeries, _defineProperty({}, key, !this.disabledSeries[key]));
    },
    handleMouseEnter: function handleMouseEnter(name) {
      this.chart.dispatchAction({
        type: 'highlight',
        seriesName: name
      });
    },
    handleMouseLeave: function handleMouseLeave(name) {
      this.chart.dispatchAction({
        type: 'downplay',
        seriesName: name
      });
    },
    getColor: function getColor(color, key) {
      return this.disabledSeries[key] ? gray200 : color;
    }
  }
};

/* 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"},_vm._l((_vm.seriesInfo),function(series,key){return _c('div',{key:key,staticClass:"gl-legend-series",class:{ 'text-muted': _vm.disabledSeries[key] },style:(_vm.fontStyle),attrs:{"role":"button"},on:{"click":function($event){return _vm.handleClick(series.name, 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-series-label",attrs:{"color":_vm.getColor(series.color, key),"type":series.type}},[_c('strong',[_vm._v(_vm._s(series.name))])]),_vm._v(" "),(series.data && series.data.length)?_c('span',[_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)};
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__;