You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
parttimejob/node_modules/echarts/lib/chart/bar/BarView.js

892 lines
33 KiB

1 month ago
/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
/**
* AUTO-GENERATED FILE. DO NOT MODIFY.
*/
/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import { __extends } from "tslib";
import Path from 'zrender/lib/graphic/Path.js';
import Group from 'zrender/lib/graphic/Group.js';
import { extend, each, map } from 'zrender/lib/core/util.js';
import { Rect, Sector, updateProps, initProps, removeElementWithFadeOut, traverseElements } from '../../util/graphic.js';
import { getECData } from '../../util/innerStore.js';
import { setStatesStylesFromModel, toggleHoverEmphasis } from '../../util/states.js';
import { setLabelStyle, getLabelStatesModels, setLabelValueAnimation, labelInner } from '../../label/labelStyle.js';
import { throttle } from '../../util/throttle.js';
import { createClipPath } from '../helper/createClipPathFromCoordSys.js';
import Sausage from '../../util/shape/sausage.js';
import ChartView from '../../view/Chart.js';
import { isCoordinateSystemType } from '../../coord/CoordinateSystem.js';
import { getDefaultLabel, getDefaultInterpolatedLabel } from '../helper/labelHelper.js';
import { warn } from '../../util/log.js';
import { createSectorCalculateTextPosition, setSectorTextRotation } from '../../label/sectorLabel.js';
import { saveOldStyle } from '../../animation/basicTransition.js';
import { getSectorCornerRadius } from '../helper/sectorHelper.js';
var mathMax = Math.max;
var mathMin = Math.min;
function getClipArea(coord, data) {
var coordSysClipArea = coord.getArea && coord.getArea();
if (isCoordinateSystemType(coord, 'cartesian2d')) {
var baseAxis = coord.getBaseAxis();
// When boundaryGap is false or using time axis. bar may exceed the grid.
// We should not clip this part.
// See test/bar2.html
if (baseAxis.type !== 'category' || !baseAxis.onBand) {
var expandWidth = data.getLayout('bandWidth');
if (baseAxis.isHorizontal()) {
coordSysClipArea.x -= expandWidth;
coordSysClipArea.width += expandWidth * 2;
} else {
coordSysClipArea.y -= expandWidth;
coordSysClipArea.height += expandWidth * 2;
}
}
}
return coordSysClipArea;
}
var BarView = /** @class */function (_super) {
__extends(BarView, _super);
function BarView() {
var _this = _super.call(this) || this;
_this.type = BarView.type;
_this._isFirstFrame = true;
return _this;
}
BarView.prototype.render = function (seriesModel, ecModel, api, payload) {
this._model = seriesModel;
this._removeOnRenderedListener(api);
this._updateDrawMode(seriesModel);
var coordinateSystemType = seriesModel.get('coordinateSystem');
if (coordinateSystemType === 'cartesian2d' || coordinateSystemType === 'polar') {
// Clear previously rendered progressive elements.
this._progressiveEls = null;
this._isLargeDraw ? this._renderLarge(seriesModel, ecModel, api) : this._renderNormal(seriesModel, ecModel, api, payload);
} else if (process.env.NODE_ENV !== 'production') {
warn('Only cartesian2d and polar supported for bar.');
}
};
BarView.prototype.incrementalPrepareRender = function (seriesModel) {
this._clear();
this._updateDrawMode(seriesModel);
// incremental also need to clip, otherwise might be overlow.
// But must not set clip in each frame, otherwise all of the children will be marked redraw.
this._updateLargeClip(seriesModel);
};
BarView.prototype.incrementalRender = function (params, seriesModel) {
// Reset
this._progressiveEls = [];
// Do not support progressive in normal mode.
this._incrementalRenderLarge(params, seriesModel);
};
BarView.prototype.eachRendered = function (cb) {
traverseElements(this._progressiveEls || this.group, cb);
};
BarView.prototype._updateDrawMode = function (seriesModel) {
var isLargeDraw = seriesModel.pipelineContext.large;
if (this._isLargeDraw == null || isLargeDraw !== this._isLargeDraw) {
this._isLargeDraw = isLargeDraw;
this._clear();
}
};
BarView.prototype._renderNormal = function (seriesModel, ecModel, api, payload) {
var group = this.group;
var data = seriesModel.getData();
var oldData = this._data;
var coord = seriesModel.coordinateSystem;
var baseAxis = coord.getBaseAxis();
var isHorizontalOrRadial;
if (coord.type === 'cartesian2d') {
isHorizontalOrRadial = baseAxis.isHorizontal();
} else if (coord.type === 'polar') {
isHorizontalOrRadial = baseAxis.dim === 'angle';
}
var animationModel = seriesModel.isAnimationEnabled() ? seriesModel : null;
var realtimeSortCfg = shouldRealtimeSort(seriesModel, coord);
if (realtimeSortCfg) {
this._enableRealtimeSort(realtimeSortCfg, data, api);
}
var needsClip = seriesModel.get('clip', true) || realtimeSortCfg;
var coordSysClipArea = getClipArea(coord, data);
// If there is clipPath created in large mode. Remove it.
group.removeClipPath();
// We don't use clipPath in normal mode because we needs a perfect animation
// And don't want the label are clipped.
var roundCap = seriesModel.get('roundCap', true);
var drawBackground = seriesModel.get('showBackground', true);
var backgroundModel = seriesModel.getModel('backgroundStyle');
var barBorderRadius = backgroundModel.get('borderRadius') || 0;
var bgEls = [];
var oldBgEls = this._backgroundEls;
var isInitSort = payload && payload.isInitSort;
var isChangeOrder = payload && payload.type === 'changeAxisOrder';
function createBackground(dataIndex) {
var bgLayout = getLayout[coord.type](data, dataIndex);
var bgEl = createBackgroundEl(coord, isHorizontalOrRadial, bgLayout);
bgEl.useStyle(backgroundModel.getItemStyle());
// Only cartesian2d support borderRadius.
if (coord.type === 'cartesian2d') {
bgEl.setShape('r', barBorderRadius);
} else {
bgEl.setShape('cornerRadius', barBorderRadius);
}
bgEls[dataIndex] = bgEl;
return bgEl;
}
;
data.diff(oldData).add(function (dataIndex) {
var itemModel = data.getItemModel(dataIndex);
var layout = getLayout[coord.type](data, dataIndex, itemModel);
if (drawBackground) {
createBackground(dataIndex);
}
// If dataZoom in filteMode: 'empty', the baseValue can be set as NaN in "axisProxy".
if (!data.hasValue(dataIndex) || !isValidLayout[coord.type](layout)) {
return;
}
var isClipped = false;
if (needsClip) {
// Clip will modify the layout params.
// And return a boolean to determine if the shape are fully clipped.
isClipped = clip[coord.type](coordSysClipArea, layout);
}
var el = elementCreator[coord.type](seriesModel, data, dataIndex, layout, isHorizontalOrRadial, animationModel, baseAxis.model, false, roundCap);
if (realtimeSortCfg) {
/**
* Force label animation because even if the element is
* ignored because it's clipped, it may not be clipped after
* changing order. Then, if not using forceLabelAnimation,
* the label animation was never started, in which case,
* the label will be the final value and doesn't have label
* animation.
*/
el.forceLabelAnimation = true;
}
updateStyle(el, data, dataIndex, itemModel, layout, seriesModel, isHorizontalOrRadial, coord.type === 'polar');
if (isInitSort) {
el.attr({
shape: layout
});
} else if (realtimeSortCfg) {
updateRealtimeAnimation(realtimeSortCfg, animationModel, el, layout, dataIndex, isHorizontalOrRadial, false, false);
} else {
initProps(el, {
shape: layout
}, seriesModel, dataIndex);
}
data.setItemGraphicEl(dataIndex, el);
group.add(el);
el.ignore = isClipped;
}).update(function (newIndex, oldIndex) {
var itemModel = data.getItemModel(newIndex);
var layout = getLayout[coord.type](data, newIndex, itemModel);
if (drawBackground) {
var bgEl = void 0;
if (oldBgEls.length === 0) {
bgEl = createBackground(oldIndex);
} else {
bgEl = oldBgEls[oldIndex];
bgEl.useStyle(backgroundModel.getItemStyle());
// Only cartesian2d support borderRadius.
if (coord.type === 'cartesian2d') {
bgEl.setShape('r', barBorderRadius);
} else {
bgEl.setShape('cornerRadius', barBorderRadius);
}
bgEls[newIndex] = bgEl;
}
var bgLayout = getLayout[coord.type](data, newIndex);
var shape = createBackgroundShape(isHorizontalOrRadial, bgLayout, coord);
updateProps(bgEl, {
shape: shape
}, animationModel, newIndex);
}
var el = oldData.getItemGraphicEl(oldIndex);
if (!data.hasValue(newIndex) || !isValidLayout[coord.type](layout)) {
group.remove(el);
return;
}
var isClipped = false;
if (needsClip) {
isClipped = clip[coord.type](coordSysClipArea, layout);
if (isClipped) {
group.remove(el);
}
}
if (!el) {
el = elementCreator[coord.type](seriesModel, data, newIndex, layout, isHorizontalOrRadial, animationModel, baseAxis.model, !!el, roundCap);
} else {
saveOldStyle(el);
}
if (realtimeSortCfg) {
el.forceLabelAnimation = true;
}
if (isChangeOrder) {
var textEl = el.getTextContent();
if (textEl) {
var labelInnerStore = labelInner(textEl);
if (labelInnerStore.prevValue != null) {
/**
* Set preValue to be value so that no new label
* should be started, otherwise, it will take a full
* `animationDurationUpdate` time to finish the
* animation, which is not expected.
*/
labelInnerStore.prevValue = labelInnerStore.value;
}
}
}
// Not change anything if only order changed.
// Especially not change label.
else {
updateStyle(el, data, newIndex, itemModel, layout, seriesModel, isHorizontalOrRadial, coord.type === 'polar');
}
if (isInitSort) {
el.attr({
shape: layout
});
} else if (realtimeSortCfg) {
updateRealtimeAnimation(realtimeSortCfg, animationModel, el, layout, newIndex, isHorizontalOrRadial, true, isChangeOrder);
} else {
updateProps(el, {
shape: layout
}, seriesModel, newIndex, null);
}
data.setItemGraphicEl(newIndex, el);
el.ignore = isClipped;
group.add(el);
}).remove(function (dataIndex) {
var el = oldData.getItemGraphicEl(dataIndex);
el && removeElementWithFadeOut(el, seriesModel, dataIndex);
}).execute();
var bgGroup = this._backgroundGroup || (this._backgroundGroup = new Group());
bgGroup.removeAll();
for (var i = 0; i < bgEls.length; ++i) {
bgGroup.add(bgEls[i]);
}
group.add(bgGroup);
this._backgroundEls = bgEls;
this._data = data;
};
BarView.prototype._renderLarge = function (seriesModel, ecModel, api) {
this._clear();
createLarge(seriesModel, this.group);
this._updateLargeClip(seriesModel);
};
BarView.prototype._incrementalRenderLarge = function (params, seriesModel) {
this._removeBackground();
createLarge(seriesModel, this.group, this._progressiveEls, true);
};
BarView.prototype._updateLargeClip = function (seriesModel) {
// Use clipPath in large mode.
var clipPath = seriesModel.get('clip', true) && createClipPath(seriesModel.coordinateSystem, false, seriesModel);
var group = this.group;
if (clipPath) {
group.setClipPath(clipPath);
} else {
group.removeClipPath();
}
};
BarView.prototype._enableRealtimeSort = function (realtimeSortCfg, data, api) {
var _this = this;
// If no data in the first frame, wait for data to initSort
if (!data.count()) {
return;
}
var baseAxis = realtimeSortCfg.baseAxis;
if (this._isFirstFrame) {
this._dispatchInitSort(data, realtimeSortCfg, api);
this._isFirstFrame = false;
} else {
var orderMapping_1 = function (idx) {
var el = data.getItemGraphicEl(idx);
var shape = el && el.shape;
return shape &&
// The result should be consistent with the initial sort by data value.
// Do not support the case that both positive and negative exist.
Math.abs(baseAxis.isHorizontal() ? shape.height : shape.width)
// If data is NaN, shape.xxx may be NaN, so use || 0 here in case
|| 0;
};
this._onRendered = function () {
_this._updateSortWithinSameData(data, orderMapping_1, baseAxis, api);
};
api.getZr().on('rendered', this._onRendered);
}
};
BarView.prototype._dataSort = function (data, baseAxis, orderMapping) {
var info = [];
data.each(data.mapDimension(baseAxis.dim), function (ordinalNumber, dataIdx) {
var mappedValue = orderMapping(dataIdx);
mappedValue = mappedValue == null ? NaN : mappedValue;
info.push({
dataIndex: dataIdx,
mappedValue: mappedValue,
ordinalNumber: ordinalNumber
});
});
info.sort(function (a, b) {
// If NaN, it will be treated as min val.
return b.mappedValue - a.mappedValue;
});
return {
ordinalNumbers: map(info, function (item) {
return item.ordinalNumber;
})
};
};
BarView.prototype._isOrderChangedWithinSameData = function (data, orderMapping, baseAxis) {
var scale = baseAxis.scale;
var ordinalDataDim = data.mapDimension(baseAxis.dim);
var lastValue = Number.MAX_VALUE;
for (var tickNum = 0, len = scale.getOrdinalMeta().categories.length; tickNum < len; ++tickNum) {
var rawIdx = data.rawIndexOf(ordinalDataDim, scale.getRawOrdinalNumber(tickNum));
var value = rawIdx < 0
// If some tick have no bar, the tick will be treated as min.
? Number.MIN_VALUE
// PENDING: if dataZoom on baseAxis exits, is it a performance issue?
: orderMapping(data.indexOfRawIndex(rawIdx));
if (value > lastValue) {
return true;
}
lastValue = value;
}
return false;
};
/*
* Consider the case when A and B changed order, whose representing
* bars are both out of sight, we don't wish to trigger reorder action
* as long as the order in the view doesn't change.
*/
BarView.prototype._isOrderDifferentInView = function (orderInfo, baseAxis) {
var scale = baseAxis.scale;
var extent = scale.getExtent();
var tickNum = Math.max(0, extent[0]);
var tickMax = Math.min(extent[1], scale.getOrdinalMeta().categories.length - 1);
for (; tickNum <= tickMax; ++tickNum) {
if (orderInfo.ordinalNumbers[tickNum] !== scale.getRawOrdinalNumber(tickNum)) {
return true;
}
}
};
BarView.prototype._updateSortWithinSameData = function (data, orderMapping, baseAxis, api) {
if (!this._isOrderChangedWithinSameData(data, orderMapping, baseAxis)) {
return;
}
var sortInfo = this._dataSort(data, baseAxis, orderMapping);
if (this._isOrderDifferentInView(sortInfo, baseAxis)) {
this._removeOnRenderedListener(api);
api.dispatchAction({
type: 'changeAxisOrder',
componentType: baseAxis.dim + 'Axis',
axisId: baseAxis.index,
sortInfo: sortInfo
});
}
};
BarView.prototype._dispatchInitSort = function (data, realtimeSortCfg, api) {
var baseAxis = realtimeSortCfg.baseAxis;
var sortResult = this._dataSort(data, baseAxis, function (dataIdx) {
return data.get(data.mapDimension(realtimeSortCfg.otherAxis.dim), dataIdx);
});
api.dispatchAction({
type: 'changeAxisOrder',
componentType: baseAxis.dim + 'Axis',
isInitSort: true,
axisId: baseAxis.index,
sortInfo: sortResult
});
};
BarView.prototype.remove = function (ecModel, api) {
this._clear(this._model);
this._removeOnRenderedListener(api);
};
BarView.prototype.dispose = function (ecModel, api) {
this._removeOnRenderedListener(api);
};
BarView.prototype._removeOnRenderedListener = function (api) {
if (this._onRendered) {
api.getZr().off('rendered', this._onRendered);
this._onRendered = null;
}
};
BarView.prototype._clear = function (model) {
var group = this.group;
var data = this._data;
if (model && model.isAnimationEnabled() && data && !this._isLargeDraw) {
this._removeBackground();
this._backgroundEls = [];
data.eachItemGraphicEl(function (el) {
removeElementWithFadeOut(el, model, getECData(el).dataIndex);
});
} else {
group.removeAll();
}
this._data = null;
this._isFirstFrame = true;
};
BarView.prototype._removeBackground = function () {
this.group.remove(this._backgroundGroup);
this._backgroundGroup = null;
};
BarView.type = 'bar';
return BarView;
}(ChartView);
var clip = {
cartesian2d: function (coordSysBoundingRect, layout) {
var signWidth = layout.width < 0 ? -1 : 1;
var signHeight = layout.height < 0 ? -1 : 1;
// Needs positive width and height
if (signWidth < 0) {
layout.x += layout.width;
layout.width = -layout.width;
}
if (signHeight < 0) {
layout.y += layout.height;
layout.height = -layout.height;
}
var coordSysX2 = coordSysBoundingRect.x + coordSysBoundingRect.width;
var coordSysY2 = coordSysBoundingRect.y + coordSysBoundingRect.height;
var x = mathMax(layout.x, coordSysBoundingRect.x);
var x2 = mathMin(layout.x + layout.width, coordSysX2);
var y = mathMax(layout.y, coordSysBoundingRect.y);
var y2 = mathMin(layout.y + layout.height, coordSysY2);
var xClipped = x2 < x;
var yClipped = y2 < y;
// When xClipped or yClipped, the element will be marked as `ignore`.
// But we should also place the element at the edge of the coord sys bounding rect.
// Because if data changed and the bar shows again, its transition animation
// will begin at this place.
layout.x = xClipped && x > coordSysX2 ? x2 : x;
layout.y = yClipped && y > coordSysY2 ? y2 : y;
layout.width = xClipped ? 0 : x2 - x;
layout.height = yClipped ? 0 : y2 - y;
// Reverse back
if (signWidth < 0) {
layout.x += layout.width;
layout.width = -layout.width;
}
if (signHeight < 0) {
layout.y += layout.height;
layout.height = -layout.height;
}
return xClipped || yClipped;
},
polar: function (coordSysClipArea, layout) {
var signR = layout.r0 <= layout.r ? 1 : -1;
// Make sure r is larger than r0
if (signR < 0) {
var tmp = layout.r;
layout.r = layout.r0;
layout.r0 = tmp;
}
var r = mathMin(layout.r, coordSysClipArea.r);
var r0 = mathMax(layout.r0, coordSysClipArea.r0);
layout.r = r;
layout.r0 = r0;
var clipped = r - r0 < 0;
// Reverse back
if (signR < 0) {
var tmp = layout.r;
layout.r = layout.r0;
layout.r0 = tmp;
}
return clipped;
}
};
var elementCreator = {
cartesian2d: function (seriesModel, data, newIndex, layout, isHorizontal, animationModel, axisModel, isUpdate, roundCap) {
var rect = new Rect({
shape: extend({}, layout),
z2: 1
});
rect.__dataIndex = newIndex;
rect.name = 'item';
if (animationModel) {
var rectShape = rect.shape;
var animateProperty = isHorizontal ? 'height' : 'width';
rectShape[animateProperty] = 0;
}
return rect;
},
polar: function (seriesModel, data, newIndex, layout, isRadial, animationModel, axisModel, isUpdate, roundCap) {
var ShapeClass = !isRadial && roundCap ? Sausage : Sector;
var sector = new ShapeClass({
shape: layout,
z2: 1
});
sector.name = 'item';
var positionMap = createPolarPositionMapping(isRadial);
sector.calculateTextPosition = createSectorCalculateTextPosition(positionMap, {
isRoundCap: ShapeClass === Sausage
});
// Animation
if (animationModel) {
var sectorShape = sector.shape;
var animateProperty = isRadial ? 'r' : 'endAngle';
var animateTarget = {};
sectorShape[animateProperty] = isRadial ? layout.r0 : layout.startAngle;
animateTarget[animateProperty] = layout[animateProperty];
(isUpdate ? updateProps : initProps)(sector, {
shape: animateTarget
// __value: typeof dataValue === 'string' ? parseInt(dataValue, 10) : dataValue
}, animationModel);
}
return sector;
}
};
function shouldRealtimeSort(seriesModel, coordSys) {
var realtimeSortOption = seriesModel.get('realtimeSort', true);
var baseAxis = coordSys.getBaseAxis();
if (process.env.NODE_ENV !== 'production') {
if (realtimeSortOption) {
if (baseAxis.type !== 'category') {
warn('`realtimeSort` will not work because this bar series is not based on a category axis.');
}
if (coordSys.type !== 'cartesian2d') {
warn('`realtimeSort` will not work because this bar series is not on cartesian2d.');
}
}
}
if (realtimeSortOption && baseAxis.type === 'category' && coordSys.type === 'cartesian2d') {
return {
baseAxis: baseAxis,
otherAxis: coordSys.getOtherAxis(baseAxis)
};
}
}
function updateRealtimeAnimation(realtimeSortCfg, seriesAnimationModel, el, layout, newIndex, isHorizontal, isUpdate, isChangeOrder) {
var seriesTarget;
var axisTarget;
if (isHorizontal) {
axisTarget = {
x: layout.x,
width: layout.width
};
seriesTarget = {
y: layout.y,
height: layout.height
};
} else {
axisTarget = {
y: layout.y,
height: layout.height
};
seriesTarget = {
x: layout.x,
width: layout.width
};
}
if (!isChangeOrder) {
// Keep the original growth animation if only axis order changed.
// Not start a new animation.
(isUpdate ? updateProps : initProps)(el, {
shape: seriesTarget
}, seriesAnimationModel, newIndex, null);
}
var axisAnimationModel = seriesAnimationModel ? realtimeSortCfg.baseAxis.model : null;
(isUpdate ? updateProps : initProps)(el, {
shape: axisTarget
}, axisAnimationModel, newIndex);
}
function checkPropertiesNotValid(obj, props) {
for (var i = 0; i < props.length; i++) {
if (!isFinite(obj[props[i]])) {
return true;
}
}
return false;
}
var rectPropties = ['x', 'y', 'width', 'height'];
var polarPropties = ['cx', 'cy', 'r', 'startAngle', 'endAngle'];
var isValidLayout = {
cartesian2d: function (layout) {
return !checkPropertiesNotValid(layout, rectPropties);
},
polar: function (layout) {
return !checkPropertiesNotValid(layout, polarPropties);
}
};
var getLayout = {
// itemModel is only used to get borderWidth, which is not needed
// when calculating bar background layout.
cartesian2d: function (data, dataIndex, itemModel) {
var layout = data.getItemLayout(dataIndex);
var fixedLineWidth = itemModel ? getLineWidth(itemModel, layout) : 0;
// fix layout with lineWidth
var signX = layout.width > 0 ? 1 : -1;
var signY = layout.height > 0 ? 1 : -1;
return {
x: layout.x + signX * fixedLineWidth / 2,
y: layout.y + signY * fixedLineWidth / 2,
width: layout.width - signX * fixedLineWidth,
height: layout.height - signY * fixedLineWidth
};
},
polar: function (data, dataIndex, itemModel) {
var layout = data.getItemLayout(dataIndex);
return {
cx: layout.cx,
cy: layout.cy,
r0: layout.r0,
r: layout.r,
startAngle: layout.startAngle,
endAngle: layout.endAngle,
clockwise: layout.clockwise
};
}
};
function isZeroOnPolar(layout) {
return layout.startAngle != null && layout.endAngle != null && layout.startAngle === layout.endAngle;
}
function createPolarPositionMapping(isRadial) {
return function (isRadial) {
var arcOrAngle = isRadial ? 'Arc' : 'Angle';
return function (position) {
switch (position) {
case 'start':
case 'insideStart':
case 'end':
case 'insideEnd':
return position + arcOrAngle;
default:
return position;
}
};
}(isRadial);
}
function updateStyle(el, data, dataIndex, itemModel, layout, seriesModel, isHorizontalOrRadial, isPolar) {
var style = data.getItemVisual(dataIndex, 'style');
if (!isPolar) {
var borderRadius = itemModel.get(['itemStyle', 'borderRadius']) || 0;
el.setShape('r', borderRadius);
} else if (!seriesModel.get('roundCap')) {
var sectorShape = el.shape;
var cornerRadius = getSectorCornerRadius(itemModel.getModel('itemStyle'), sectorShape, true);
extend(sectorShape, cornerRadius);
el.setShape(sectorShape);
}
el.useStyle(style);
var cursorStyle = itemModel.getShallow('cursor');
cursorStyle && el.attr('cursor', cursorStyle);
var labelPositionOutside = isPolar ? isHorizontalOrRadial ? layout.r >= layout.r0 ? 'endArc' : 'startArc' : layout.endAngle >= layout.startAngle ? 'endAngle' : 'startAngle' : isHorizontalOrRadial ? layout.height >= 0 ? 'bottom' : 'top' : layout.width >= 0 ? 'right' : 'left';
var labelStatesModels = getLabelStatesModels(itemModel);
setLabelStyle(el, labelStatesModels, {
labelFetcher: seriesModel,
labelDataIndex: dataIndex,
defaultText: getDefaultLabel(seriesModel.getData(), dataIndex),
inheritColor: style.fill,
defaultOpacity: style.opacity,
defaultOutsidePosition: labelPositionOutside
});
var label = el.getTextContent();
if (isPolar && label) {
var position = itemModel.get(['label', 'position']);
el.textConfig.inside = position === 'middle' ? true : null;
setSectorTextRotation(el, position === 'outside' ? labelPositionOutside : position, createPolarPositionMapping(isHorizontalOrRadial), itemModel.get(['label', 'rotate']));
}
setLabelValueAnimation(label, labelStatesModels, seriesModel.getRawValue(dataIndex), function (value) {
return getDefaultInterpolatedLabel(data, value);
});
var emphasisModel = itemModel.getModel(['emphasis']);
toggleHoverEmphasis(el, emphasisModel.get('focus'), emphasisModel.get('blurScope'), emphasisModel.get('disabled'));
setStatesStylesFromModel(el, itemModel);
if (isZeroOnPolar(layout)) {
el.style.fill = 'none';
el.style.stroke = 'none';
each(el.states, function (state) {
if (state.style) {
state.style.fill = state.style.stroke = 'none';
}
});
}
}
// In case width or height are too small.
function getLineWidth(itemModel, rawLayout) {
// Has no border.
var borderColor = itemModel.get(['itemStyle', 'borderColor']);
if (!borderColor || borderColor === 'none') {
return 0;
}
var lineWidth = itemModel.get(['itemStyle', 'borderWidth']) || 0;
// width or height may be NaN for empty data
var width = isNaN(rawLayout.width) ? Number.MAX_VALUE : Math.abs(rawLayout.width);
var height = isNaN(rawLayout.height) ? Number.MAX_VALUE : Math.abs(rawLayout.height);
return Math.min(lineWidth, width, height);
}
var LagePathShape = /** @class */function () {
function LagePathShape() {}
return LagePathShape;
}();
var LargePath = /** @class */function (_super) {
__extends(LargePath, _super);
function LargePath(opts) {
var _this = _super.call(this, opts) || this;
_this.type = 'largeBar';
return _this;
}
LargePath.prototype.getDefaultShape = function () {
return new LagePathShape();
};
LargePath.prototype.buildPath = function (ctx, shape) {
// Drawing lines is more efficient than drawing
// a whole line or drawing rects.
var points = shape.points;
var baseDimIdx = this.baseDimIdx;
var valueDimIdx = 1 - this.baseDimIdx;
var startPoint = [];
var size = [];
var barWidth = this.barWidth;
for (var i = 0; i < points.length; i += 3) {
size[baseDimIdx] = barWidth;
size[valueDimIdx] = points[i + 2];
startPoint[baseDimIdx] = points[i + baseDimIdx];
startPoint[valueDimIdx] = points[i + valueDimIdx];
ctx.rect(startPoint[0], startPoint[1], size[0], size[1]);
}
};
return LargePath;
}(Path);
function createLarge(seriesModel, group, progressiveEls, incremental) {
// TODO support polar
var data = seriesModel.getData();
var baseDimIdx = data.getLayout('valueAxisHorizontal') ? 1 : 0;
var largeDataIndices = data.getLayout('largeDataIndices');
var barWidth = data.getLayout('size');
var backgroundModel = seriesModel.getModel('backgroundStyle');
var bgPoints = data.getLayout('largeBackgroundPoints');
if (bgPoints) {
var bgEl = new LargePath({
shape: {
points: bgPoints
},
incremental: !!incremental,
silent: true,
z2: 0
});
bgEl.baseDimIdx = baseDimIdx;
bgEl.largeDataIndices = largeDataIndices;
bgEl.barWidth = barWidth;
bgEl.useStyle(backgroundModel.getItemStyle());
group.add(bgEl);
progressiveEls && progressiveEls.push(bgEl);
}
var el = new LargePath({
shape: {
points: data.getLayout('largePoints')
},
incremental: !!incremental,
ignoreCoarsePointer: true,
z2: 1
});
el.baseDimIdx = baseDimIdx;
el.largeDataIndices = largeDataIndices;
el.barWidth = barWidth;
group.add(el);
el.useStyle(data.getVisual('style'));
// Enable tooltip and user mouse/touch event handlers.
getECData(el).seriesIndex = seriesModel.seriesIndex;
if (!seriesModel.get('silent')) {
el.on('mousedown', largePathUpdateDataIndex);
el.on('mousemove', largePathUpdateDataIndex);
}
progressiveEls && progressiveEls.push(el);
}
// Use throttle to avoid frequently traverse to find dataIndex.
var largePathUpdateDataIndex = throttle(function (event) {
var largePath = this;
var dataIndex = largePathFindDataIndex(largePath, event.offsetX, event.offsetY);
getECData(largePath).dataIndex = dataIndex >= 0 ? dataIndex : null;
}, 30, false);
function largePathFindDataIndex(largePath, x, y) {
var baseDimIdx = largePath.baseDimIdx;
var valueDimIdx = 1 - baseDimIdx;
var points = largePath.shape.points;
var largeDataIndices = largePath.largeDataIndices;
var startPoint = [];
var size = [];
var barWidth = largePath.barWidth;
for (var i = 0, len = points.length / 3; i < len; i++) {
var ii = i * 3;
size[baseDimIdx] = barWidth;
size[valueDimIdx] = points[ii + 2];
startPoint[baseDimIdx] = points[ii + baseDimIdx];
startPoint[valueDimIdx] = points[ii + valueDimIdx];
if (size[valueDimIdx] < 0) {
startPoint[valueDimIdx] += size[valueDimIdx];
size[valueDimIdx] = -size[valueDimIdx];
}
if (x >= startPoint[0] && x <= startPoint[0] + size[0] && y >= startPoint[1] && y <= startPoint[1] + size[1]) {
return largeDataIndices[i];
}
}
return -1;
}
function createBackgroundShape(isHorizontalOrRadial, layout, coord) {
if (isCoordinateSystemType(coord, 'cartesian2d')) {
var rectShape = layout;
var coordLayout = coord.getArea();
return {
x: isHorizontalOrRadial ? rectShape.x : coordLayout.x,
y: isHorizontalOrRadial ? coordLayout.y : rectShape.y,
width: isHorizontalOrRadial ? rectShape.width : coordLayout.width,
height: isHorizontalOrRadial ? coordLayout.height : rectShape.height
};
} else {
var coordLayout = coord.getArea();
var sectorShape = layout;
return {
cx: coordLayout.cx,
cy: coordLayout.cy,
r0: isHorizontalOrRadial ? coordLayout.r0 : sectorShape.r0,
r: isHorizontalOrRadial ? coordLayout.r : sectorShape.r,
startAngle: isHorizontalOrRadial ? sectorShape.startAngle : 0,
endAngle: isHorizontalOrRadial ? sectorShape.endAngle : Math.PI * 2
};
}
}
function createBackgroundEl(coord, isHorizontalOrRadial, layout) {
var ElementClz = coord.type === 'polar' ? Sector : Rect;
return new ElementClz({
shape: createBackgroundShape(isHorizontalOrRadial, layout, coord),
silent: true,
z2: 0
});
}
export default BarView;