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

GitLab UI Components

import { badgeVariantOptions, variantCssColorMap } from '../../../utils/constants';
import GlBadge from '../../base/badge/badge';
import GlIcon from '../../base/icon/icon';
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';

var script = {
  components: {
    GlIcon: GlIcon,
    GlBadge: GlBadge
  },
  props: {
    title: {
      type: String,
      required: true
    },
    value: {
      type: String,
      required: true
    },
    unit: {
      type: [String, Number],
      required: false,
      default: null
    },
    variant: {
      type: String,
      required: false,
      default: badgeVariantOptions.muted,
      validator: function validator(variant) {
        return Object.values(badgeVariantOptions).includes(variant);
      }
    },
    titleIcon: {
      type: String,
      required: false,
      default: null
    },
    metaIcon: {
      type: String,
      required: false,
      default: null
    },
    metaText: {
      type: String,
      required: false,
      default: null
    }
  },
  computed: {
    showMetaIcon: function showMetaIcon() {
      return Boolean(this.metaIcon && !this.metaText);
    },
    showBadge: function showBadge() {
      return Boolean(this.metaText);
    },
    showTitleIcon: function showTitleIcon() {
      return Boolean(this.titleIcon);
    },
    textColor: function textColor() {
      return variantCssColorMap[this.variant];
    }
  }
};

/* 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-single-stat gl-display-flex gl-flex-direction-column"},[_c('div',{staticClass:"gl-display-flex gl-align-items-center gl-text-gray-700 gl-mb-2"},[(_vm.showTitleIcon)?_c('gl-icon',{staticClass:"gl-mr-2",attrs:{"name":_vm.titleIcon,"data-testid":"title-icon"}}):_vm._e(),_vm._v(" "),_c('span',{staticClass:"gl-font-base gl-font-weight-normal",attrs:{"data-testid":"title-text"}},[_vm._v(_vm._s(_vm.title))])],1),_vm._v(" "),_c('div',{staticClass:"gl-display-flex gl-align-items-baseline gl-font-weight-bold gl-text-gray-900"},[_c('span',{staticClass:"gl-font-size-h-display",class:{ 'gl-mr-2': !_vm.unit },attrs:{"data-testid":"value"}},[_vm._v(_vm._s(_vm.value))]),_vm._v(" "),(_vm.unit)?_c('span',{staticClass:"gl-font-sm gl-mr-2",attrs:{"data-testid":"unit"}},[_vm._v(_vm._s(_vm.unit))]):_vm._e(),_vm._v(" "),(_vm.showMetaIcon)?_c('gl-icon',{class:_vm.textColor,attrs:{"name":_vm.metaIcon,"data-testid":"meta-icon"}}):_vm._e(),_vm._v(" "),(_vm.showBadge)?_c('gl-badge',{attrs:{"variant":_vm.variant,"icon":_vm.metaIcon,"data-testid":"meta-badge"}},[_vm._v(_vm._s(_vm.metaText))]):_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__;