368 lines
10 KiB
JavaScript
368 lines
10 KiB
JavaScript
'use strict';
|
|
|
|
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
|
|
|
|
var constants = require('./constants');
|
|
var utils = require('./utils');
|
|
var utilsLite = require('utils-lite');
|
|
require('echarts/lib/chart/bar');
|
|
var Core = _interopDefault(require('./core'));
|
|
|
|
var defineProperty = function (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;
|
|
};
|
|
|
|
var _extends = Object.assign || function (target) {
|
|
for (var i = 1; i < arguments.length; i++) {
|
|
var source = arguments[i];
|
|
|
|
for (var key in source) {
|
|
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
target[key] = source[key];
|
|
}
|
|
}
|
|
}
|
|
|
|
return target;
|
|
};
|
|
|
|
// default opacity of bar while dim-axis type is 'value'
|
|
var VALUE_AXIS_OPACITY = 0.5;
|
|
|
|
function getBarDimAxis(args) {
|
|
var innerRows = args.innerRows,
|
|
dimAxisName = args.dimAxisName,
|
|
dimension = args.dimension,
|
|
axisVisible = args.axisVisible,
|
|
dimAxisType = args.dimAxisType,
|
|
dims = args.dims;
|
|
|
|
return dimension.map(function (item) {
|
|
return {
|
|
type: 'category',
|
|
name: dimAxisName,
|
|
nameLocation: 'middle',
|
|
nameGap: 22,
|
|
data: dimAxisType === 'value' ? getValueAxisData(dims) : innerRows.map(function (row) {
|
|
return row[item];
|
|
}),
|
|
axisLabel: {
|
|
formatter: function formatter(v) {
|
|
return String(v);
|
|
}
|
|
},
|
|
show: axisVisible
|
|
};
|
|
});
|
|
}
|
|
|
|
function getValueAxisData(dims) {
|
|
var max = Math.max.apply(null, dims);
|
|
var min = Math.min.apply(null, dims);
|
|
var result = [];
|
|
for (var i = min; i <= max; i++) {
|
|
result.push(i);
|
|
}
|
|
return result;
|
|
}
|
|
|
|
function getBarMeaAxis(args) {
|
|
var meaAxisName = args.meaAxisName,
|
|
meaAxisType = args.meaAxisType,
|
|
axisVisible = args.axisVisible,
|
|
digit = args.digit,
|
|
scale = args.scale,
|
|
min = args.min,
|
|
max = args.max;
|
|
|
|
var meaAxisBase = {
|
|
type: 'value',
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
show: axisVisible
|
|
};
|
|
var meaAxis = [];
|
|
|
|
var _loop = function _loop(i) {
|
|
if (meaAxisType[i]) {
|
|
meaAxis[i] = _extends({}, meaAxisBase, {
|
|
axisLabel: {
|
|
formatter: function formatter(val) {
|
|
return utils.getFormated(val, meaAxisType[i], digit);
|
|
}
|
|
}
|
|
});
|
|
} else {
|
|
meaAxis[i] = _extends({}, meaAxisBase);
|
|
}
|
|
meaAxis[i].name = meaAxisName[i] || '';
|
|
meaAxis[i].scale = scale[i] || false;
|
|
meaAxis[i].min = min[i] || null;
|
|
meaAxis[i].max = max[i] || null;
|
|
};
|
|
|
|
for (var i = 0; i < 2; i++) {
|
|
_loop(i);
|
|
}
|
|
|
|
return meaAxis;
|
|
}
|
|
|
|
function getBarTooltip(args) {
|
|
var axisSite = args.axisSite,
|
|
isHistogram = args.isHistogram,
|
|
meaAxisType = args.meaAxisType,
|
|
digit = args.digit,
|
|
labelMap = args.labelMap;
|
|
|
|
var secondAxis = isHistogram ? axisSite.right || [] : axisSite.top || [];
|
|
if (labelMap) {
|
|
secondAxis = secondAxis.map(function (item) {
|
|
return labelMap[item] === undefined ? item : labelMap[item];
|
|
});
|
|
}
|
|
return {
|
|
trigger: 'axis',
|
|
formatter: function formatter(items) {
|
|
var tpl = [];
|
|
tpl.push(items[0].name + '<br>');
|
|
items.forEach(function (item) {
|
|
var seriesName = item.seriesName;
|
|
var type = ~secondAxis.indexOf(seriesName) ? meaAxisType[1] : meaAxisType[0];
|
|
tpl.push(constants.itemPoint(item.color));
|
|
tpl.push(seriesName + ': ');
|
|
tpl.push(utils.getFormated(item.value, type, digit));
|
|
tpl.push('<br>');
|
|
});
|
|
|
|
return tpl.join('');
|
|
}
|
|
};
|
|
}
|
|
|
|
function getValueData(seriesTemp, dims) {
|
|
var max = Math.max.apply(null, dims);
|
|
var min = Math.min.apply(null, dims);
|
|
var result = [];
|
|
for (var i = min; i <= max; i++) {
|
|
var index = dims.indexOf(i);
|
|
if (~index) {
|
|
result.push(seriesTemp[index]);
|
|
} else {
|
|
result.push(null);
|
|
}
|
|
}
|
|
return result;
|
|
}
|
|
|
|
function getBarSeries(args) {
|
|
var innerRows = args.innerRows,
|
|
metrics = args.metrics,
|
|
stack = args.stack,
|
|
axisSite = args.axisSite,
|
|
isHistogram = args.isHistogram,
|
|
labelMap = args.labelMap,
|
|
itemStyle = args.itemStyle,
|
|
label = args.label,
|
|
_args$showLine = args.showLine,
|
|
showLine = _args$showLine === undefined ? [] : _args$showLine,
|
|
dimAxisType = args.dimAxisType,
|
|
barGap = args.barGap,
|
|
opacity = args.opacity,
|
|
dims = args.dims;
|
|
|
|
var series = [];
|
|
var seriesTemp = {};
|
|
var secondAxis = isHistogram ? axisSite.right || [] : axisSite.top || [];
|
|
var secondDimAxisIndex = isHistogram ? 'yAxisIndex' : 'xAxisIndex';
|
|
var stackMap = stack && utils.getStackMap(stack);
|
|
metrics.forEach(function (item) {
|
|
seriesTemp[item] = [];
|
|
});
|
|
innerRows.forEach(function (row) {
|
|
metrics.forEach(function (item) {
|
|
seriesTemp[item].push(row[item]);
|
|
});
|
|
});
|
|
series = Object.keys(seriesTemp).map(function (item, index) {
|
|
var data = dimAxisType === 'value' ? getValueData(seriesTemp[item], dims) : seriesTemp[item];
|
|
var seriesItem = defineProperty({
|
|
name: labelMap[item] != null ? labelMap[item] : item,
|
|
type: ~showLine.indexOf(item) ? 'line' : 'bar',
|
|
data: data
|
|
}, secondDimAxisIndex, ~secondAxis.indexOf(item) ? '1' : '0');
|
|
|
|
if (stack && stackMap[item]) seriesItem.stack = stackMap[item];
|
|
|
|
if (label) seriesItem.label = label;
|
|
if (itemStyle) seriesItem.itemStyle = itemStyle;
|
|
|
|
var itemOpacity = opacity || utilsLite.get(seriesItem, 'itemStyle.normal.opacity');
|
|
if (dimAxisType === 'value') {
|
|
seriesItem.barGap = barGap;
|
|
seriesItem.barCategoryGap = '1%';
|
|
if (itemOpacity == null) itemOpacity = VALUE_AXIS_OPACITY;
|
|
}
|
|
|
|
if (itemOpacity != null) {
|
|
utilsLite.set(seriesItem, 'itemStyle.normal.opacity', itemOpacity);
|
|
}
|
|
|
|
return seriesItem;
|
|
});
|
|
|
|
return series.length ? series : false;
|
|
}
|
|
|
|
function getLegend(args) {
|
|
var metrics = args.metrics,
|
|
labelMap = args.labelMap,
|
|
legendName = args.legendName;
|
|
|
|
if (!legendName && !labelMap) return { data: metrics };
|
|
var data = labelMap ? metrics.map(function (item) {
|
|
return labelMap[item] == null ? item : labelMap[item];
|
|
}) : metrics;
|
|
return {
|
|
data: data,
|
|
formatter: function formatter(name) {
|
|
return legendName[name] != null ? legendName[name] : name;
|
|
}
|
|
};
|
|
}
|
|
|
|
function getDims(rows, dimension) {
|
|
return rows.map(function (row) {
|
|
return row[dimension[0]];
|
|
});
|
|
}
|
|
|
|
var bar$1 = function bar$$1(columns, rows, settings, extra) {
|
|
var innerRows = utilsLite.cloneDeep(rows);
|
|
var _settings$axisSite = settings.axisSite,
|
|
axisSite = _settings$axisSite === undefined ? {} : _settings$axisSite,
|
|
_settings$dimension = settings.dimension,
|
|
dimension = _settings$dimension === undefined ? [columns[0]] : _settings$dimension,
|
|
_settings$stack = settings.stack,
|
|
stack = _settings$stack === undefined ? {} : _settings$stack,
|
|
_settings$axisVisible = settings.axisVisible,
|
|
axisVisible = _settings$axisVisible === undefined ? true : _settings$axisVisible,
|
|
_settings$digit = settings.digit,
|
|
digit = _settings$digit === undefined ? 2 : _settings$digit,
|
|
_settings$dataOrder = settings.dataOrder,
|
|
dataOrder = _settings$dataOrder === undefined ? false : _settings$dataOrder,
|
|
_settings$scale = settings.scale,
|
|
scale = _settings$scale === undefined ? [false, false] : _settings$scale,
|
|
_settings$min = settings.min,
|
|
min = _settings$min === undefined ? [null, null] : _settings$min,
|
|
_settings$max = settings.max,
|
|
max = _settings$max === undefined ? [null, null] : _settings$max,
|
|
_settings$legendName = settings.legendName,
|
|
legendName = _settings$legendName === undefined ? {} : _settings$legendName,
|
|
_settings$labelMap = settings.labelMap,
|
|
labelMap = _settings$labelMap === undefined ? {} : _settings$labelMap,
|
|
label = settings.label,
|
|
itemStyle = settings.itemStyle,
|
|
showLine = settings.showLine,
|
|
_settings$barGap = settings.barGap,
|
|
barGap = _settings$barGap === undefined ? '-100%' : _settings$barGap,
|
|
opacity = settings.opacity;
|
|
var tooltipVisible = extra.tooltipVisible,
|
|
legendVisible = extra.legendVisible;
|
|
|
|
var metrics = columns.slice();
|
|
if (axisSite.top && axisSite.bottom) {
|
|
metrics = axisSite.top.concat(axisSite.bottom);
|
|
} else if (axisSite.bottom && !axisSite.right) {
|
|
metrics = axisSite.bottom;
|
|
} else if (settings.metrics) {
|
|
metrics = settings.metrics;
|
|
} else {
|
|
metrics.splice(columns.indexOf(dimension[0]), 1);
|
|
}
|
|
var meaAxisType = settings.xAxisType || ['normal', 'normal'];
|
|
var dimAxisType = settings.yAxisType || 'category';
|
|
var meaAxisName = settings.xAxisName || [];
|
|
var dimAxisName = settings.yAxisName || '';
|
|
var isHistogram = false;
|
|
|
|
if (dataOrder) {
|
|
var _label = dataOrder.label,
|
|
order = dataOrder.order;
|
|
|
|
if (!_label || !order) {
|
|
console.warn('Need to provide name and order parameters');
|
|
} else {
|
|
innerRows.sort(function (a, b) {
|
|
if (order === 'desc') {
|
|
return a[_label] - b[_label];
|
|
} else {
|
|
return b[_label] - a[_label];
|
|
}
|
|
});
|
|
}
|
|
}
|
|
var dims = getDims(innerRows, dimension);
|
|
|
|
var legend = legendVisible && getLegend({ metrics: metrics, labelMap: labelMap, legendName: legendName });
|
|
var yAxis = getBarDimAxis({
|
|
innerRows: innerRows,
|
|
dimAxisName: dimAxisName,
|
|
dimension: dimension,
|
|
axisVisible: axisVisible,
|
|
dimAxisType: dimAxisType,
|
|
dims: dims
|
|
});
|
|
var xAxis = getBarMeaAxis({
|
|
meaAxisName: meaAxisName,
|
|
meaAxisType: meaAxisType,
|
|
axisVisible: axisVisible,
|
|
digit: digit,
|
|
scale: scale,
|
|
min: min,
|
|
max: max
|
|
});
|
|
var series = getBarSeries({
|
|
innerRows: innerRows,
|
|
metrics: metrics,
|
|
stack: stack,
|
|
axisSite: axisSite,
|
|
isHistogram: isHistogram,
|
|
labelMap: labelMap,
|
|
itemStyle: itemStyle,
|
|
label: label,
|
|
showLine: showLine,
|
|
dimAxisType: dimAxisType,
|
|
dimension: dimension,
|
|
barGap: barGap,
|
|
opacity: opacity,
|
|
dims: dims
|
|
});
|
|
var tooltipParams = { axisSite: axisSite, isHistogram: isHistogram, meaAxisType: meaAxisType, digit: digit, labelMap: labelMap };
|
|
var tooltip = tooltipVisible && getBarTooltip(tooltipParams);
|
|
var options = { legend: legend, yAxis: yAxis, series: series, xAxis: xAxis, tooltip: tooltip };
|
|
return options;
|
|
};
|
|
|
|
var index = _extends({}, Core, {
|
|
name: 'VeBar',
|
|
data: function data() {
|
|
this.chartHandler = bar$1;
|
|
return {};
|
|
}
|
|
});
|
|
|
|
module.exports = index;
|