@jiaminghi/charts
Version:
Lightweight charting
815 lines (712 loc) • 23.6 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.bar = bar;
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _updater = require("../class/updater.class");
var _config = require("../config");
var _util = require("@jiaminghi/c-render/lib/plugin/util");
var _util2 = require("../util");
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function bar(chart) {
var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var xAxis = option.xAxis,
yAxis = option.yAxis,
series = option.series;
var bars = [];
if (xAxis && yAxis && series) {
bars = (0, _util2.initNeedSeries)(series, _config.barConfig, 'bar');
bars = setBarAxis(bars, chart);
bars = setBarPositionData(bars, chart);
bars = calcBarsPosition(bars, chart);
}
(0, _updater.doUpdate)({
chart: chart,
series: bars.slice(-1),
key: 'backgroundBar',
getGraphConfig: getBackgroundBarConfig
});
bars.reverse();
(0, _updater.doUpdate)({
chart: chart,
series: bars,
key: 'bar',
getGraphConfig: getBarConfig,
getStartGraphConfig: getStartBarConfig,
beforeUpdate: beforeUpdateBar
});
(0, _updater.doUpdate)({
chart: chart,
series: bars,
key: 'barLabel',
getGraphConfig: getLabelConfig
});
}
function setBarAxis(bars, chart) {
var axisData = chart.axisData;
bars.forEach(function (bar) {
var xAxisIndex = bar.xAxisIndex,
yAxisIndex = bar.yAxisIndex;
if (typeof xAxisIndex !== 'number') xAxisIndex = 0;
if (typeof yAxisIndex !== 'number') yAxisIndex = 0;
var xAxis = axisData.find(function (_ref) {
var axis = _ref.axis,
index = _ref.index;
return "".concat(axis).concat(index) === "x".concat(xAxisIndex);
});
var yAxis = axisData.find(function (_ref2) {
var axis = _ref2.axis,
index = _ref2.index;
return "".concat(axis).concat(index) === "y".concat(yAxisIndex);
});
var axis = [xAxis, yAxis];
var valueAxisIndex = axis.findIndex(function (_ref3) {
var data = _ref3.data;
return data === 'value';
});
bar.valueAxis = axis[valueAxisIndex];
bar.labelAxis = axis[1 - valueAxisIndex];
});
return bars;
}
function setBarPositionData(bars, chart) {
var labelBarGroup = groupBarByLabelAxis(bars);
labelBarGroup.forEach(function (group) {
setBarIndex(group);
setBarNum(group);
setBarCategoryWidth(group, chart);
setBarWidthAndGap(group);
setBarAllWidthAndGap(group);
});
return bars;
}
function setBarIndex(bars) {
var stacks = getBarStack(bars);
stacks = stacks.map(function (stack) {
return {
stack: stack,
index: -1
};
});
var currentIndex = 0;
bars.forEach(function (bar) {
var stack = bar.stack;
if (!stack) {
bar.barIndex = currentIndex;
currentIndex++;
} else {
var stackData = stacks.find(function (_ref4) {
var s = _ref4.stack;
return s === stack;
});
if (stackData.index === -1) {
stackData.index = currentIndex;
currentIndex++;
}
bar.barIndex = stackData.index;
}
});
}
function groupBarByLabelAxis(bars) {
var labelAxis = bars.map(function (_ref5) {
var _ref5$labelAxis = _ref5.labelAxis,
axis = _ref5$labelAxis.axis,
index = _ref5$labelAxis.index;
return axis + index;
});
labelAxis = (0, _toConsumableArray2["default"])(new Set(labelAxis));
return labelAxis.map(function (axisIndex) {
return bars.filter(function (_ref6) {
var _ref6$labelAxis = _ref6.labelAxis,
axis = _ref6$labelAxis.axis,
index = _ref6$labelAxis.index;
return axis + index === axisIndex;
});
});
}
function getBarStack(bars) {
var stacks = [];
bars.forEach(function (_ref7) {
var stack = _ref7.stack;
if (stack) stacks.push(stack);
});
return (0, _toConsumableArray2["default"])(new Set(stacks));
}
function setBarNum(bars) {
var barNum = (0, _toConsumableArray2["default"])(new Set(bars.map(function (_ref8) {
var barIndex = _ref8.barIndex;
return barIndex;
}))).length;
bars.forEach(function (bar) {
return bar.barNum = barNum;
});
}
function setBarCategoryWidth(bars) {
var lastBar = bars.slice(-1)[0];
var barCategoryGap = lastBar.barCategoryGap,
tickGap = lastBar.labelAxis.tickGap;
var barCategoryWidth = 0;
if (typeof barCategoryGap === 'number') {
barCategoryWidth = barCategoryGap;
} else {
barCategoryWidth = (1 - parseInt(barCategoryGap) / 100) * tickGap;
}
bars.forEach(function (bar) {
return bar.barCategoryWidth = barCategoryWidth;
});
}
function setBarWidthAndGap(bars) {
var _bars$slice$ = bars.slice(-1)[0],
barCategoryWidth = _bars$slice$.barCategoryWidth,
barWidth = _bars$slice$.barWidth,
barGap = _bars$slice$.barGap,
barNum = _bars$slice$.barNum;
var widthAndGap = [];
if (typeof barWidth === 'number' || barWidth !== 'auto') {
widthAndGap = getBarWidthAndGapWithPercentOrNumber(barCategoryWidth, barWidth, barGap, barNum);
} else if (barWidth === 'auto') {
widthAndGap = getBarWidthAndGapWidthAuto(barCategoryWidth, barWidth, barGap, barNum);
}
var _widthAndGap = widthAndGap,
_widthAndGap2 = (0, _slicedToArray2["default"])(_widthAndGap, 2),
width = _widthAndGap2[0],
gap = _widthAndGap2[1];
bars.forEach(function (bar) {
bar.barWidth = width;
bar.barGap = gap;
});
}
function getBarWidthAndGapWithPercentOrNumber(barCategoryWidth, barWidth, barGap) {
var width = 0,
gap = 0;
if (typeof barWidth === 'number') {
width = barWidth;
} else {
width = parseInt(barWidth) / 100 * barCategoryWidth;
}
if (typeof barGap === 'number') {
gap = barGap;
} else {
gap = parseInt(barGap) / 100 * width;
}
return [width, gap];
}
function getBarWidthAndGapWidthAuto(barCategoryWidth, barWidth, barGap, barNum) {
var width = 0,
gap = 0;
var barItemWidth = barCategoryWidth / barNum;
if (typeof barGap === 'number') {
gap = barGap;
width = barItemWidth - gap;
} else {
var percent = 10 + parseInt(barGap) / 10;
if (percent === 0) {
width = barItemWidth * 2;
gap = -width;
} else {
width = barItemWidth / percent * 10;
gap = barItemWidth - width;
}
}
return [width, gap];
}
function setBarAllWidthAndGap(bars) {
var _bars$slice$2 = bars.slice(-1)[0],
barGap = _bars$slice$2.barGap,
barWidth = _bars$slice$2.barWidth,
barNum = _bars$slice$2.barNum;
var barAllWidthAndGap = (barGap + barWidth) * barNum - barGap;
bars.forEach(function (bar) {
return bar.barAllWidthAndGap = barAllWidthAndGap;
});
}
function calcBarsPosition(bars, chart) {
bars = calcBarValueAxisCoordinate(bars);
bars = calcBarLabelAxisCoordinate(bars);
bars = eliminateNullBarLabelAxis(bars);
bars = keepSameNumBetweenBarAndData(bars);
return bars;
}
function calcBarLabelAxisCoordinate(bars) {
return bars.map(function (bar) {
var labelAxis = bar.labelAxis,
barAllWidthAndGap = bar.barAllWidthAndGap,
barGap = bar.barGap,
barWidth = bar.barWidth,
barIndex = bar.barIndex;
var tickGap = labelAxis.tickGap,
tickPosition = labelAxis.tickPosition,
axis = labelAxis.axis;
var coordinateIndex = axis === 'x' ? 0 : 1;
var barLabelAxisPos = tickPosition.map(function (tick, i) {
var barCategoryStartPos = tickPosition[i][coordinateIndex] - tickGap / 2;
var barItemsStartPos = barCategoryStartPos + (tickGap - barAllWidthAndGap) / 2;
return barItemsStartPos + (barIndex + 0.5) * barWidth + barIndex * barGap;
});
return _objectSpread(_objectSpread({}, bar), {}, {
barLabelAxisPos: barLabelAxisPos
});
});
}
function calcBarValueAxisCoordinate(bars) {
return bars.map(function (bar) {
var data = (0, _util2.mergeSameStackData)(bar, bars);
data = eliminateNonNumberData(bar, data);
var _bar$valueAxis = bar.valueAxis,
axis = _bar$valueAxis.axis,
minValue = _bar$valueAxis.minValue,
maxValue = _bar$valueAxis.maxValue,
linePosition = _bar$valueAxis.linePosition;
var startPos = getValuePos(minValue, maxValue, minValue < 0 ? 0 : minValue, linePosition, axis);
var endPos = data.map(function (v) {
return getValuePos(minValue, maxValue, v, linePosition, axis);
});
var barValueAxisPos = endPos.map(function (p) {
return [startPos, p];
});
return _objectSpread(_objectSpread({}, bar), {}, {
barValueAxisPos: barValueAxisPos
});
});
}
function eliminateNonNumberData(barItem, barData) {
var data = barItem.data;
return barData.map(function (v, i) {
return typeof data[i] === 'number' ? v : null;
}).filter(function (d) {
return d !== null;
});
}
function eliminateNullBarLabelAxis(bars) {
return bars.map(function (bar) {
var barLabelAxisPos = bar.barLabelAxisPos,
data = bar.data;
data.forEach(function (d, i) {
if (typeof d === 'number') return;
barLabelAxisPos[i] = null;
});
return _objectSpread(_objectSpread({}, bar), {}, {
barLabelAxisPos: barLabelAxisPos.filter(function (p) {
return p !== null;
})
});
});
}
function keepSameNumBetweenBarAndData(bars) {
bars.forEach(function (bar) {
var data = bar.data,
barLabelAxisPos = bar.barLabelAxisPos,
barValueAxisPos = bar.barValueAxisPos;
var dataNum = data.filter(function (d) {
return typeof d === 'number';
}).length;
var axisPosNum = barLabelAxisPos.length;
if (axisPosNum > dataNum) {
barLabelAxisPos.splice(dataNum);
barValueAxisPos.splice(dataNum);
}
});
return bars;
}
function getValuePos(min, max, value, linePosition, axis) {
if (typeof value !== 'number') return null;
var valueMinus = max - min;
var coordinateIndex = axis === 'x' ? 0 : 1;
var posMinus = linePosition[1][coordinateIndex] - linePosition[0][coordinateIndex];
var percent = (value - min) / valueMinus;
if (valueMinus === 0) percent = 0;
var pos = percent * posMinus;
return pos + linePosition[0][coordinateIndex];
}
function getBackgroundBarConfig(barItem) {
var animationCurve = barItem.animationCurve,
animationFrame = barItem.animationFrame,
rLevel = barItem.rLevel;
var shapes = getBackgroundBarShapes(barItem);
var style = getBackgroundBarStyle(barItem);
return shapes.map(function (shape) {
return {
name: 'rect',
index: rLevel,
visible: barItem.backgroundBar.show,
animationCurve: animationCurve,
animationFrame: animationFrame,
shape: shape,
style: style
};
});
}
function getBackgroundBarShapes(barItem) {
var labelAxis = barItem.labelAxis,
valueAxis = barItem.valueAxis;
var tickPosition = labelAxis.tickPosition;
var axis = valueAxis.axis,
linePosition = valueAxis.linePosition;
var width = getBackgroundBarWidth(barItem);
var haltWidth = width / 2;
var posIndex = axis === 'x' ? 0 : 1;
var centerPos = tickPosition.map(function (p) {
return p[1 - posIndex];
});
var _ref9 = [linePosition[0][posIndex], linePosition[1][posIndex]],
start = _ref9[0],
end = _ref9[1];
return centerPos.map(function (center) {
if (axis === 'x') {
return {
x: start,
y: center - haltWidth,
w: end - start,
h: width
};
} else {
return {
x: center - haltWidth,
y: end,
w: width,
h: start - end
};
}
});
}
function getBackgroundBarWidth(barItem) {
var barAllWidthAndGap = barItem.barAllWidthAndGap,
barCategoryWidth = barItem.barCategoryWidth,
backgroundBar = barItem.backgroundBar;
var width = backgroundBar.width;
if (typeof width === 'number') return width;
if (width === 'auto') return barAllWidthAndGap;
return parseInt(width) / 100 * barCategoryWidth;
}
function getBackgroundBarStyle(barItem) {
return barItem.backgroundBar.style;
}
function getBarConfig(barItem) {
var barLabelAxisPos = barItem.barLabelAxisPos,
animationCurve = barItem.animationCurve,
animationFrame = barItem.animationFrame,
rLevel = barItem.rLevel;
var name = getBarName(barItem);
return barLabelAxisPos.map(function (foo, i) {
return {
name: name,
index: rLevel,
animationCurve: animationCurve,
animationFrame: animationFrame,
shape: getBarShape(barItem, i),
style: getBarStyle(barItem, i)
};
});
}
function getBarName(barItem) {
var shapeType = barItem.shapeType;
if (shapeType === 'leftEchelon' || shapeType === 'rightEchelon') return 'polyline';
return 'rect';
}
function getBarShape(barItem, i) {
var shapeType = barItem.shapeType;
if (shapeType === 'leftEchelon') {
return getLeftEchelonShape(barItem, i);
} else if (shapeType === 'rightEchelon') {
return getRightEchelonShape(barItem, i);
} else {
return getNormalBarShape(barItem, i);
}
}
function getLeftEchelonShape(barItem, i) {
var barValueAxisPos = barItem.barValueAxisPos,
barLabelAxisPos = barItem.barLabelAxisPos,
barWidth = barItem.barWidth,
echelonOffset = barItem.echelonOffset;
var _barValueAxisPos$i = (0, _slicedToArray2["default"])(barValueAxisPos[i], 2),
start = _barValueAxisPos$i[0],
end = _barValueAxisPos$i[1];
var labelAxisPos = barLabelAxisPos[i];
var halfWidth = barWidth / 2;
var valueAxis = barItem.valueAxis.axis;
var points = [];
if (valueAxis === 'x') {
points[0] = [end, labelAxisPos - halfWidth];
points[1] = [end, labelAxisPos + halfWidth];
points[2] = [start, labelAxisPos + halfWidth];
points[3] = [start + echelonOffset, labelAxisPos - halfWidth];
if (end - start < echelonOffset) points.splice(3, 1);
} else {
points[0] = [labelAxisPos - halfWidth, end];
points[1] = [labelAxisPos + halfWidth, end];
points[2] = [labelAxisPos + halfWidth, start];
points[3] = [labelAxisPos - halfWidth, start - echelonOffset];
if (start - end < echelonOffset) points.splice(3, 1);
}
return {
points: points,
close: true
};
}
function getRightEchelonShape(barItem, i) {
var barValueAxisPos = barItem.barValueAxisPos,
barLabelAxisPos = barItem.barLabelAxisPos,
barWidth = barItem.barWidth,
echelonOffset = barItem.echelonOffset;
var _barValueAxisPos$i2 = (0, _slicedToArray2["default"])(barValueAxisPos[i], 2),
start = _barValueAxisPos$i2[0],
end = _barValueAxisPos$i2[1];
var labelAxisPos = barLabelAxisPos[i];
var halfWidth = barWidth / 2;
var valueAxis = barItem.valueAxis.axis;
var points = [];
if (valueAxis === 'x') {
points[0] = [end, labelAxisPos + halfWidth];
points[1] = [end, labelAxisPos - halfWidth];
points[2] = [start, labelAxisPos - halfWidth];
points[3] = [start + echelonOffset, labelAxisPos + halfWidth];
if (end - start < echelonOffset) points.splice(2, 1);
} else {
points[0] = [labelAxisPos + halfWidth, end];
points[1] = [labelAxisPos - halfWidth, end];
points[2] = [labelAxisPos - halfWidth, start];
points[3] = [labelAxisPos + halfWidth, start - echelonOffset];
if (start - end < echelonOffset) points.splice(2, 1);
}
return {
points: points,
close: true
};
}
function getNormalBarShape(barItem, i) {
var barValueAxisPos = barItem.barValueAxisPos,
barLabelAxisPos = barItem.barLabelAxisPos,
barWidth = barItem.barWidth;
var _barValueAxisPos$i3 = (0, _slicedToArray2["default"])(barValueAxisPos[i], 2),
start = _barValueAxisPos$i3[0],
end = _barValueAxisPos$i3[1];
var labelAxisPos = barLabelAxisPos[i];
var valueAxis = barItem.valueAxis.axis;
var shape = {};
if (valueAxis === 'x') {
shape.x = start;
shape.y = labelAxisPos - barWidth / 2;
shape.w = end - start;
shape.h = barWidth;
} else {
shape.x = labelAxisPos - barWidth / 2;
shape.y = end;
shape.w = barWidth;
shape.h = start - end;
}
return shape;
}
function getBarStyle(barItem, i) {
var barStyle = barItem.barStyle,
gradient = barItem.gradient,
color = barItem.color,
independentColor = barItem.independentColor,
independentColors = barItem.independentColors;
var fillColor = [barStyle.fill || color];
var gradientColor = (0, _util2.deepMerge)(fillColor, gradient.color);
if (independentColor) {
var idtColor = independentColors[i % independentColors.length];
gradientColor = idtColor instanceof Array ? idtColor : [idtColor];
}
if (gradientColor.length === 1) gradientColor.push(gradientColor[0]);
var gradientParams = getGradientParams(barItem, i);
return (0, _util2.deepMerge)({
gradientColor: gradientColor,
gradientParams: gradientParams,
gradientType: 'linear',
gradientWith: 'fill'
}, barStyle);
}
function getGradientParams(barItem, i) {
var barValueAxisPos = barItem.barValueAxisPos,
barLabelAxisPos = barItem.barLabelAxisPos,
data = barItem.data;
var _barItem$valueAxis = barItem.valueAxis,
linePosition = _barItem$valueAxis.linePosition,
axis = _barItem$valueAxis.axis;
var _barValueAxisPos$i4 = (0, _slicedToArray2["default"])(barValueAxisPos[i], 2),
start = _barValueAxisPos$i4[0],
end = _barValueAxisPos$i4[1];
var labelAxisPos = barLabelAxisPos[i];
var value = data[i];
var _linePosition = (0, _slicedToArray2["default"])(linePosition, 2),
lineStart = _linePosition[0],
lineEnd = _linePosition[1];
var valueAxisIndex = axis === 'x' ? 0 : 1;
var endPos = end;
if (!barItem.gradient.local) {
endPos = value < 0 ? lineStart[valueAxisIndex] : lineEnd[valueAxisIndex];
}
if (axis === 'y') {
return [labelAxisPos, endPos, labelAxisPos, start];
} else {
return [endPos, labelAxisPos, start, labelAxisPos];
}
}
function getStartBarConfig(barItem) {
var configs = getBarConfig(barItem);
var shapeType = barItem.shapeType;
configs.forEach(function (config) {
var shape = config.shape;
if (shapeType === 'leftEchelon') {
shape = getStartLeftEchelonShape(shape, barItem);
} else if (shapeType === 'rightEchelon') {
shape = getStartRightEchelonShape(shape, barItem);
} else {
shape = getStartNormalBarShape(shape, barItem);
}
config.shape = shape;
});
return configs;
}
function getStartLeftEchelonShape(shape, barItem) {
var axis = barItem.valueAxis.axis;
shape = (0, _util.deepClone)(shape);
var _shape = shape,
points = _shape.points;
var index = axis === 'x' ? 0 : 1;
var start = points[2][index];
points.forEach(function (point) {
return point[index] = start;
});
return shape;
}
function getStartRightEchelonShape(shape, barItem) {
var axis = barItem.valueAxis.axis;
shape = (0, _util.deepClone)(shape);
var _shape2 = shape,
points = _shape2.points;
var index = axis === 'x' ? 0 : 1;
var start = points[2][index];
points.forEach(function (point) {
return point[index] = start;
});
return shape;
}
function getStartNormalBarShape(shape, barItem) {
var axis = barItem.valueAxis.axis;
var x = shape.x,
y = shape.y,
w = shape.w,
h = shape.h;
if (axis === 'x') {
w = 0;
} else {
y = y + h;
h = 0;
}
return {
x: x,
y: y,
w: w,
h: h
};
}
function beforeUpdateBar(graphs, barItem, i, updater) {
var render = updater.chart.render;
var name = getBarName(barItem);
if (graphs[i] && graphs[i][0].name !== name) {
graphs[i].forEach(function (g) {
return render.delGraph(g);
});
graphs[i] = null;
}
}
function getLabelConfig(barItem) {
var animationCurve = barItem.animationCurve,
animationFrame = barItem.animationFrame,
rLevel = barItem.rLevel;
var shapes = getLabelShapes(barItem);
var style = getLabelStyle(barItem);
return shapes.map(function (shape) {
return {
name: 'text',
index: rLevel,
visible: barItem.label.show,
animationCurve: animationCurve,
animationFrame: animationFrame,
shape: shape,
style: style
};
});
}
function getLabelShapes(barItem) {
var contents = getFormatterLabels(barItem);
var position = getLabelsPosition(barItem);
return position.map(function (pos, i) {
return {
position: pos,
content: contents[i]
};
});
}
function getFormatterLabels(barItem) {
var data = barItem.data,
label = barItem.label;
var formatter = label.formatter;
data = data.filter(function (d) {
return typeof d === 'number';
}).map(function (d) {
return d.toString();
});
if (!formatter) return data;
var type = (0, _typeof2["default"])(formatter);
if (type === 'string') return data.map(function (d) {
return formatter.replace('{value}', d);
});
if (type === 'function') return data.map(function (d, i) {
return formatter({
value: d,
index: i
});
});
return data;
}
function getLabelsPosition(barItem) {
var label = barItem.label,
barValueAxisPos = barItem.barValueAxisPos,
barLabelAxisPos = barItem.barLabelAxisPos;
var position = label.position,
offset = label.offset;
var axis = barItem.valueAxis.axis;
return barValueAxisPos.map(function (_ref10, i) {
var _ref11 = (0, _slicedToArray2["default"])(_ref10, 2),
start = _ref11[0],
end = _ref11[1];
var labelAxisPos = barLabelAxisPos[i];
var pos = [end, labelAxisPos];
if (position === 'bottom') {
pos = [start, labelAxisPos];
}
if (position === 'center') {
pos = [(start + end) / 2, labelAxisPos];
}
if (axis === 'y') pos.reverse();
return getOffsetedPoint(pos, offset);
});
}
function getOffsetedPoint(_ref12, _ref13) {
var _ref14 = (0, _slicedToArray2["default"])(_ref12, 2),
x = _ref14[0],
y = _ref14[1];
var _ref15 = (0, _slicedToArray2["default"])(_ref13, 2),
ox = _ref15[0],
oy = _ref15[1];
return [x + ox, y + oy];
}
function getLabelStyle(barItem) {
var color = barItem.color,
style = barItem.label.style,
gc = barItem.gradient.color;
if (gc.length) color = gc[0];
style = (0, _util2.deepMerge)({
fill: color
}, style);
return style;
}