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

GitLab UI Components

import _sortBy from 'lodash/sortBy';
import _uniq from 'lodash/uniq';
import _isFinite from 'lodash/isFinite';
import _merge from 'lodash/merge';
import { gaugeNeutralHues, gaugeSafeHues, gaugeWarningHue } from '../../../utils/charts/theme';
import ToolboxMixin from '../../mixins/toolbox_mixin';
import Chart from '../chart/chart';
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';

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

function _arrayWithoutHoles(arr) {
  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
}

function _iterableToArray(iter) {
  if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
}

function _unsupportedIterableToArray(o, minLen) {
  if (!o) return;
  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
  var n = Object.prototype.toString.call(o).slice(8, -1);
  if (n === "Object" && o.constructor) n = o.constructor.name;
  if (n === "Map" || n === "Set") return Array.from(o);
  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}

function _arrayLikeToArray(arr, len) {
  if (len == null || len > arr.length) len = arr.length;

  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];

  return arr2;
}

function _nonIterableSpread() {
  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}

var AXIS_LABEL_FONT_SIZE_PX = 14;
var ARC_RADIUS = '80%';
var DETAIL_FONT_SIZE_PX = 30;
var DETAIL_FONT_FAMILY = 'sans-serif';
var DETAIL_FONT_WEIGHT = 'bold';
var POINTER_LENGTH = '65%';
var POINTER_WIDTH_PX = 5;

var gaugeChartSeries = function gaugeChartSeries(_ref) {
  var value = _ref.value,
      text = _ref.text,
      min = _ref.min,
      max = _ref.max,
      splitNumber = _ref.splitNumber,
      axisColor = _ref.axisColor;
  return [{
    type: 'gauge',
    detail: {
      show: true,
      formatter: function formatter() {
        var currentValue = _isFinite(value) ? value : null;
        return text || (currentValue !== null && currentValue !== void 0 ? currentValue : '--');
      },
      color: "".concat(gaugeNeutralHues[0]),
      fontSize: DETAIL_FONT_SIZE_PX,
      fontFamily: DETAIL_FONT_FAMILY,
      fontWeight: DETAIL_FONT_WEIGHT
    },
    axisLabel: {
      show: true,
      fontSize: AXIS_LABEL_FONT_SIZE_PX,
      formatter: function formatter(theValue) {
        return _isFinite(theValue) ? theValue : '--';
      },
      color: "".concat(gaugeNeutralHues[1])
    },
    axisLine: {
      lineStyle: {
        color: axisColor
      }
    },
    radius: ARC_RADIUS,
    pointer: {
      length: POINTER_LENGTH,
      width: POINTER_WIDTH_PX
    },
    data: [{
      value: value
    }],
    min: min,
    max: max,
    splitNumber: splitNumber
  }];
};

var script = {
  components: {
    Chart: Chart
  },
  mixins: [ToolboxMixin],
  props: {
    value: {
      type: Number,
      required: true
    },
    min: {
      type: Number,
      required: false,
      default: 0
    },
    max: {
      type: Number,
      required: false,
      default: 100
    },
    thresholds: {
      type: Array,
      required: false,
      default: function _default() {
        return [];
      },
      validator: function validator(value) {
        return value !== null && value !== void 0 && value.length ? value.every(function (item) {
          return _isFinite(item);
        }) : true;
      }
    },
    text: {
      type: String,
      required: false,
      default: ''
    },
    splitNumber: {
      type: Number,
      required: false,
      default: 10
    },
    option: {
      type: Object,
      required: false,
      default: function _default() {
        return {};
      }
    }
  },
  computed: {
    options: function options() {
      var mergedOptions = _merge({}, {
        series: gaugeChartSeries({
          value: this.value,
          text: this.text,
          min: this.min,
          max: this.max,
          splitNumber: this.splitNumber,
          axisColor: this.axisColor
        })
      }, this.option, this.toolboxAdjustments);

      return mergedOptions;
    },
    validThresholds: function validThresholds() {
      var thresholds = this.thresholds,
          min = this.min,
          max = this.max;
      if (!(thresholds !== null && thresholds !== void 0 && thresholds.length)) return [];

      var uniqueThresholds = _uniq(thresholds);

      var filteredThresholds = uniqueThresholds.filter(function (threshold) {
        return _isFinite(threshold) && threshold > min && threshold < max;
      });
      /**
       * Only the first two thresholds will be used
       */

      var reducedThresholdsList = filteredThresholds.length > 2 ? [filteredThresholds[0], filteredThresholds[1]] : _toConsumableArray(filteredThresholds);

      var sortedThresholds = _sortBy(reducedThresholdsList);

      return sortedThresholds;
    },
    valueIsInLastThreshold: function valueIsInLastThreshold() {
      var validThresholds = this.validThresholds,
          value = this.value;
      return validThresholds.length > 0 && value >= validThresholds[validThresholds.length - 1];
    },
    axisColor: function axisColor() {
      var validThresholds = this.validThresholds,
          max = this.max;
      var color;

      if (validThresholds.length === 0) {
        color = [[1, gaugeSafeHues[0]]];
      } else if (validThresholds.length === 1) {
        color = [[validThresholds[0] / max, gaugeSafeHues[0]], [1, gaugeWarningHue]];
      } else if (validThresholds.length >= 2) {
        /**
         * If there are more than two ranges set, only the first two will
         * be used
         */
        color = [[validThresholds[0] / max, gaugeSafeHues[0]], [validThresholds[1] / max, gaugeSafeHues[1]], [1, gaugeWarningHue]];
      }

      return color;
    }
  },
  methods: {
    onCreated: function onCreated(chart) {
      this.$emit('created', chart);
    }
  }
};

/* 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',[_c('chart',_vm._g(_vm._b({attrs:{"options":_vm.options},on:{"created":_vm.onCreated}},'chart',_vm.$attrs,false),_vm.$listeners))],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__;