@gitlab/ui 72.11.0 → 72.12.0

package/dist/components/charts/gauge/gauge.js

@@ -1,208 +0,0 @@
-import merge from 'lodash/merge';
-import uniq from 'lodash/uniq';
-import sortBy from 'lodash/sortBy';
-import { gaugeNeutralHues, gaugeSafeHues, gaugeWarningHue } from '../../../utils/charts/theme';
-import Chart from '../chart/chart';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-//
-const AXIS_LABEL_FONT_SIZE_PX = 14;
-const ARC_RADIUS = '80%';
-const DETAIL_FONT_SIZE_PX = 30;
-const DETAIL_FONT_FAMILY = 'sans-serif';
-const DETAIL_FONT_WEIGHT = 'bold';
-const POINTER_LENGTH = '65%';
-const POINTER_WIDTH_PX = 5;
-const gaugeChartSeries = _ref => {
-  let {
-    value,
-    text,
-    min,
-    max,
-    splitNumber,
-    axisColor
-  } = _ref;
-  return [{
-    type: 'gauge',
-    detail: {
-      show: true,
-      formatter: () => {
-        const currentValue = Number.isFinite(value) ? value : null;
-        return text || (currentValue !== null && currentValue !== void 0 ? currentValue : '--');
-      },
-      color: `${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: theValue => Number.isFinite(theValue) ? theValue : '--',
-      color: `${gaugeNeutralHues[1]}`
-    },
-    axisLine: {
-      lineStyle: {
-        color: axisColor
-      }
-    },
-    radius: ARC_RADIUS,
-    pointer: {
-      length: POINTER_LENGTH,
-      width: POINTER_WIDTH_PX
-    },
-    data: [{
-      value
-    }],
-    min,
-    max,
-    splitNumber
-  }];
-};
-var script = {
-  name: 'GlGaugeChart',
-  components: {
-    Chart
-  },
-  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: () => [],
-      validator: value => {
-        return value !== null && value !== void 0 && value.length ? value.every(item => Number.isFinite(item)) : true;
-      }
-    },
-    text: {
-      type: String,
-      required: false,
-      default: ''
-    },
-    splitNumber: {
-      type: Number,
-      required: false,
-      default: 10
-    },
-    option: {
-      type: Object,
-      required: false,
-      default: () => ({})
-    }
-  },
-  computed: {
-    options() {
-      const mergedOptions = merge({}, {
-        series: gaugeChartSeries({
-          value: this.value,
-          text: this.text,
-          min: this.min,
-          max: this.max,
-          splitNumber: this.splitNumber,
-          axisColor: this.axisColor
-        })
-      }, this.option);
-      return mergedOptions;
-    },
-    validThresholds() {
-      const {
-        thresholds,
-        min,
-        max
-      } = this;
-      if (!(thresholds !== null && thresholds !== void 0 && thresholds.length)) return [];
-      const uniqueThresholds = uniq(thresholds);
-      const filteredThresholds = uniqueThresholds.filter(threshold => {
-        return Number.isFinite(threshold) && threshold > min && threshold < max;
-      });
-      /**
-       * Only the first two thresholds will be used
-       */
-      const reducedThresholdsList = filteredThresholds.length > 2 ? [filteredThresholds[0], filteredThresholds[1]] : [...filteredThresholds];
-      const sortedThresholds = sortBy(reducedThresholdsList);
-      return sortedThresholds;
-    },
-    valueIsInLastThreshold() {
-      const {
-        validThresholds,
-        value
-      } = this;
-      return validThresholds.length > 0 && value >= validThresholds[validThresholds.length - 1];
-    },
-    axisColor() {
-      const {
-        validThresholds,
-        max
-      } = this;
-      let 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(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('chart',_vm._g(_vm._b({attrs:{"options":_vm.options},on:{"created":_vm.onCreated}},'chart',_vm.$attrs,false),_vm.$listeners))};
-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/heatmap/heatmap.js

@@ -1,295 +0,0 @@
-import merge from 'lodash/merge';
-import { GRAY_100, WHITE } from '../../../../dist/tokens/js/tokens';
-import { getTooltipTitle, getTooltipContent } from '../../../utils/charts/config';
-import { HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
-import { heatmapHues } from '../../../utils/charts/theme';
-import { engineeringNotation } from '../../../utils/number_utils';
-import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format';
-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';
-
-//
-const defaultOptions = {
-  visualMap: {
-    show: false,
-    inRange: {
-      color: heatmapHues
-    }
-  },
-  series: {
-    type: 'heatmap'
-  }
-};
-
-/*
- * The series is an array of arrays containing [x, y, value]
- * x and y are position, value determines the color
- * We want the min and max from value field to make the range of colors
- */
-function getRange(series) {
-  return series.reduce((acc, curr) => {
-    const value = curr[2] || 0;
-    if (value < acc.min) acc.min = value;
-    if (value > acc.max) acc.max = value;
-    return acc;
-  }, {
-    min: 0,
-    max: 0
-  });
-}
-var script = {
-  name: 'GlHeatmap',
-  components: {
-    Chart,
-    ChartLegend,
-    ChartTooltip,
-    TooltipDefaultFormat
-  },
-  props: {
-    options: {
-      type: Object,
-      required: false,
-      default: () => ({})
-    },
-    dataSeries: {
-      type: Array,
-      required: true
-    },
-    xAxisLabels: {
-      type: Array,
-      required: false,
-      default: () => []
-    },
-    yAxisLabels: {
-      type: Array,
-      required: false,
-      default: () => []
-    },
-    xAxisName: {
-      type: String,
-      required: false,
-      default: ''
-    },
-    yAxisName: {
-      type: String,
-      required: false,
-      default: ''
-    },
-    formatTooltipText: {
-      type: Function,
-      required: false,
-      default: null
-    },
-    legendAverageText: {
-      type: String,
-      required: false,
-      default: 'Avg'
-    },
-    legendMaxText: {
-      type: String,
-      required: false,
-      default: 'Max'
-    },
-    responsive: {
-      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() {
-    return {
-      chart: null,
-      tooltip: {
-        title: '',
-        content: {},
-        left: '0',
-        top: '0'
-      },
-      selectedFormatTooltipText: this.formatTooltipText || this.defaultFormatTooltipText
-    };
-  },
-  computed: {
-    computedOptions() {
-      const {
-        min,
-        max
-      } = getRange(this.dataSeries);
-      return merge({}, defaultOptions, {
-        series: {
-          data: this.dataSeries,
-          z: 2
-        },
-        grid: {
-          left: '64px',
-          right: '32px',
-          show: true,
-          borderWidth: 0,
-          backgroundColor: GRAY_100
-        },
-        visualMap: {
-          min,
-          max
-        },
-        xAxis: {
-          data: this.xAxisLabels,
-          z: 3,
-          axisTick: false,
-          axisLabel: {
-            margin: 2
-          },
-          name: this.xAxisName,
-          nameGap: 16,
-          nameLocation: 'middle',
-          nameTextStyle: {
-            verticalAlign: 'middle'
-          },
-          offset: 0,
-          splitLine: {
-            show: true,
-            interval: 0,
-            lineStyle: {
-              color: WHITE,
-              width: 2
-            }
-          },
-          axisPointer: {
-            show: true,
-            label: {
-              formatter: this.onLabelChange
-            }
-          }
-        },
-        yAxis: {
-          data: this.yAxisLabels,
-          z: 3,
-          type: 'category',
-          axisTick: false,
-          axisLabel: {
-            margin: 8
-          },
-          name: this.yAxisName,
-          nameLocation: 'center',
-          nameGap: 50,
-          nameRotate: 90,
-          splitLine: {
-            show: true,
-            interval: 0,
-            lineStyle: {
-              color: WHITE,
-              width: 2
-            }
-          }
-        }
-      }, this.options);
-    },
-    legendStyle() {
-      return {
-        paddingLeft: this.computedOptions.grid.left,
-        marginTop: '-32px'
-      };
-    },
-    compiledOptions() {
-      return this.chart ? this.chart.getOption() : null;
-    },
-    seriesInfo() {
-      const {
-        min,
-        max
-      } = getRange(this.dataSeries);
-      const step = (max - min) / heatmapHues.length;
-      return heatmapHues.map((color, index) => {
-        const lowerBound = engineeringNotation(min + step * index);
-        const upperBound = engineeringNotation(min + step * (index + 1));
-        return {
-          name: `${lowerBound} - ${upperBound}`,
-          color,
-          type: 'solid'
-        };
-      });
-    },
-    autoHeight() {
-      return this.height === 'auto';
-    }
-  },
-  methods: {
-    defaultFormatTooltipText(params) {
-      this.tooltip.title = getTooltipTitle(params, this.computedOptions.xAxis.name);
-      this.tooltip.content = getTooltipContent(params, this.computedOptions.yAxis.name);
-    },
-    onCreated(chart) {
-      this.chart = chart;
-      this.$emit('created', chart);
-    },
-    onLabelChange(params) {
-      this.selectedFormatTooltipText(params);
-      const {
-        seriesData = []
-      } = params;
-      if (seriesData.length && seriesData[0].value) {
-        const {
-          seriesId,
-          value
-        } = seriesData[0];
-        const [left, top] = this.chart.convertToPixel({
-          seriesId
-        }, value);
-        this.tooltip = {
-          ...this.tooltip,
-          left: `${left}px`,
-          top: `${top}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:"gl-heatmap",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.computedOptions},on:{"created":_vm.onCreated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.chart)?_c('chart-tooltip',{attrs:{"chart":_vm.chart,"top":_vm.tooltip.top,"left":_vm.tooltip.left},scopedSlots:_vm._u([{key:"title",fn:function(){return [(_vm.formatTooltipText)?_vm._t("tooltip-title"):_c('div',[_vm._v(_vm._s(_vm.tooltip.title))])]},proxy:true}],null,true)},[_vm._v(" "),(_vm.formatTooltipText)?_vm._t("tooltip-content"):_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.tooltip.content}})],2):_vm._e(),_vm._v(" "),(_vm.compiledOptions)?_c('chart-legend',{style:(_vm.legendStyle),attrs:{"chart":_vm.chart,"series-info":_vm.seriesInfo,"text-style":_vm.compiledOptions.textStyle,"max-text":_vm.legendMaxText,"average-text":_vm.legendAverageText}}):_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/heatmap/index.js

@@ -1,2 +0,0 @@
-import Heatmap from './heatmap';
-export { default } from './heatmap';