@gitlab/ui
Version:
GitLab UI Components
327 lines (288 loc) • 8.52 kB
JavaScript
import merge from 'lodash/merge';
import castArray from 'lodash/castArray';
import isArray from 'lodash/isArray';
import Breakpoints from '../breakpoints';
import { engineeringNotation } from '../number_utils';
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 _slicedToArray(arr, i) {
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
}
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 _arrayWithHoles(arr) {
if (Array.isArray(arr)) return arr;
}
function _iterableToArray(iter) {
if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
}
function _iterableToArrayLimit(arr, i) {
var _arr = [];
var _n = true;
var _d = false;
var _e = undefined;
try {
for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
_arr.push(_s.value);
if (i && _arr.length === i) break;
}
} catch (err) {
_d = true;
_e = err;
} finally {
try {
if (!_n && _i["return"] != null) _i["return"]();
} finally {
if (_d) throw _e;
}
}
return _arr;
}
function _nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance");
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance");
}
var defaultAreaOpacity = 0.2;
var defaultFontSize = 12;
var defaultHeight = 400;
var validRenderers = ['canvas', 'svg'];
var axes = {
name: 'Value',
type: 'value',
nameLocation: 'center'
};
var xAxis = merge({}, axes, {
boundaryGap: false,
splitLine: {
show: false
}
});
var yAxis = merge({}, axes, {
nameGap: 50,
axisLabel: {
formatter: function formatter(num) {
return engineeringNotation(num, 2);
}
}
});
var grid = {
top: 16,
bottom: 44,
left: 64,
right: 32
};
var lineStyle = {
symbol: 'circle',
type: 'line',
width: 2
};
var symbolSize = 6;
/**
* All default dataZoom configs will have slider & inside
* (for reference, see https://gitlab.com/gitlab-org/gitlab-ui/issues/240)
* Inside is disabled for larger viewports (lg and xl)
* and is specifically to enable touch zoom for mobile devices
* @param {Object} options
*/
var getDataZoomConfig = function getDataZoomConfig() {
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
_ref$filterMode = _ref.filterMode,
filterMode = _ref$filterMode === void 0 ? 'none' : _ref$filterMode;
var disabledBreakpoints = ['lg', 'xl'];
var disabled = disabledBreakpoints.includes(Breakpoints.getBreakpointSize());
var minSpan = filterMode === 'none' ? 0.01 : null;
return {
grid: {
bottom: 81
},
xAxis: {
nameGap: 67
},
dataZoom: [{
type: 'slider',
bottom: 22,
filterMode: filterMode,
minSpan: minSpan
}, {
type: 'inside',
filterMode: filterMode,
minSpan: minSpan,
disabled: disabled
}]
};
}; // All chart options can be merged but series
// needs to be concatenated.
// Series can be an object for single series or
// an array of objects.
var mergeSeriesToOptions = function mergeSeriesToOptions(options) {
var series = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
var _options$series = options.series,
optSeries = _options$series === void 0 ? [] : _options$series;
return _objectSpread({}, options, {
series: [].concat(_toConsumableArray(castArray(series)), _toConsumableArray(castArray(optSeries)))
});
};
var dataZoomAdjustments = function dataZoomAdjustments(dataZoom) {
// handle cases where dataZoom is array and object.
var useSlider = dataZoom && isArray(dataZoom) ? dataZoom.length : Boolean(dataZoom);
return useSlider ? getDataZoomConfig({
filterMode: 'weakFilter'
}) : [];
};
var getToolboxConfig = function getToolboxConfig() {
var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
_ref2$restoreIconPath = _ref2.restoreIconPath,
restoreIconPath = _ref2$restoreIconPath === void 0 ? '' : _ref2$restoreIconPath,
_ref2$saveImageIconPa = _ref2.saveImageIconPath,
saveImageIconPath = _ref2$saveImageIconPa === void 0 ? '' : _ref2$saveImageIconPa,
_ref2$zoomIconPath = _ref2.zoomIconPath,
zoomIconPath = _ref2$zoomIconPath === void 0 ? '' : _ref2$zoomIconPath,
_ref2$backIconPath = _ref2.backIconPath,
backIconPath = _ref2$backIconPath === void 0 ? '' : _ref2$backIconPath;
var toolboxConfig = {
toolbox: {
feature: {}
}
};
if (restoreIconPath.length) {
toolboxConfig.toolbox.feature.restore = {
icon: restoreIconPath
};
}
if (saveImageIconPath.length) {
toolboxConfig.toolbox.feature.saveAsImage = {
icon: restoreIconPath
};
}
if (zoomIconPath.length && backIconPath.length) {
toolboxConfig.toolbox.feature.dataZoom = {
icon: {
zoom: zoomIconPath,
back: backIconPath
}
};
}
return toolboxConfig;
};
function getThresholdConfig(thresholds) {
if (!thresholds.length) {
return {};
}
var data = thresholds.reduce(function (acc, alert) {
var threshold = alert.threshold;
switch (alert.operator) {
case '>':
case '>':
acc.areas.push([{
xAxis: 'min',
yAxis: threshold
}, {
xAxis: 'max',
yAxis: Infinity
}]);
break;
case '<':
case '<':
acc.areas.push([{
xAxis: 'min',
yAxis: Number.NEGATIVE_INFINITY
}, {
xAxis: 'max',
yAxis: threshold
}]);
break;
}
acc.lines.push([{
xAxis: 'min',
yAxis: threshold
}, {
xAxis: 'max',
yAxis: threshold
}]);
return acc;
}, {
lines: [],
areas: []
});
return {
markLine: {
data: data.lines
},
markArea: {
data: data.areas,
zlevel: -1
}
};
}
var getDefaultTooltipContent = function getDefaultTooltipContent(params) {
var yAxisTitle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
var seriesDataLength = params.seriesData.length;
var _params$seriesData$re = params.seriesData.reduce(function (acc, chartItem) {
var _ref3 = chartItem.value || [],
_ref4 = _slicedToArray(_ref3, 2),
title = _ref4[0],
value = _ref4[1]; // Let's use the y axis title as series name when only one series exists
// This way, TooltipDefaultFormat will display the y axis title as label
var seriesName = seriesDataLength === 1 && yAxisTitle ? yAxisTitle : chartItem.seriesName;
var color = seriesDataLength === 1 ? '' : chartItem.color;
acc.tooltipContent[seriesName] = {
value: value,
color: color
};
if (!acc.xLabels.includes(title)) {
acc.xLabels.push(title);
}
return acc;
}, {
xLabels: [],
tooltipContent: {}
}),
xLabels = _params$seriesData$re.xLabels,
tooltipContent = _params$seriesData$re.tooltipContent;
return {
xLabels: xLabels,
tooltipContent: tooltipContent
};
};
var config = {
grid: grid,
xAxis: xAxis,
yAxis: yAxis
};
export default config;
export { axes, dataZoomAdjustments, defaultAreaOpacity, defaultFontSize, defaultHeight, getDataZoomConfig, getDefaultTooltipContent, getThresholdConfig, getToolboxConfig, grid, lineStyle, mergeSeriesToOptions, symbolSize, validRenderers, xAxis, yAxis };