in web/frontend/libs/@deltix/hd.components-depth-chart/index.esm.js [644:782]
text: getFormattedNumber(formattedVolume),
style: volumeStyle,
vertical: 'top'
}, void 0)
}), void 0)]
}, void 0);
});
var ELinePosition;
(function (ELinePosition) {
ELinePosition["left"] = "left";
ELinePosition["right"] = "right";
})(ELinePosition || (ELinePosition = {}));
const labelOffset = 1.5;
const labelWidth = 250;
const labelHeight = 80;
const getLabelX = (width, labelWidth, pointX, type) => {
const left = pointX - labelWidth - labelOffset;
const right = pointX + labelOffset;
switch (type) {
case L2MessageSide.sell:
if (pointX + labelOffset < labelWidth) {
return right;
} else {
return left;
}
case L2MessageSide.buy:
if (width - pointX < labelWidth + labelOffset) {
return left;
} else {
return right;
}
}
};
const getLabelY = (height, labelWidth, pointY) => {
const below = pointY + labelOffset;
const above = pointY - labelHeight - labelOffset;
if (pointY + labelHeight + labelOffset >= height) {
return above;
} else {
return below;
}
};
const mapStateToProps$1 = state => {
const width = state.viewport.width;
const highlightPrices = state.app.highlightPrices;
const type = highlightPrices.mainSide;
const price = highlightPrices[type];
const pointX = getXByPrice(state, price, type);
if (!type) {
return SkipRenderProps;
}
if (!price) {
return SkipRenderProps;
}
if (priceInSpread(state, price)) {
return SkipRenderProps;
}
if (pointX === undefined) {
return SkipRenderProps;
}
if (pointX < 0) {
return SkipRenderProps;
}
if (pointX > width) {
return SkipRenderProps;
}
const color = type === L2MessageSide.sell ? 0xff6939 : 0x4da53c;
const volume = getQuantityByPrice(state, price, type);
const pointY = getYByPrice(state, price, type);
const labelY = getLabelY(state.viewport.height, labelWidth, pointY);
const labelX = getLabelX(width, labelWidth, pointX, type);
const linePosition = type === L2MessageSide.sell ? ELinePosition.left : ELinePosition.right;
return {
type,
color,
pointX,
pointY,
labelX,
labelY,
linePosition,
price,
volume,
symbol: state.app.symbol
};
};
const CrossHair = /*#__PURE__*/React.memo(props => jsx(Styled, {
children: ({
depthChart: {
tooltip
}
}) => jsx(Container, Object.assign({
x: props.labelX + 1.5,
y: props.labelY
}, {
children: jsx(Legend, {
labelWidth: labelWidth,
labelHeight: labelHeight,
price: props.price,
volume: props.volume,
lineColor: tooltip[props.type].color,
linePosition: props.linePosition,
symbol: props.symbol,
type: props.type
}, void 0)
}), void 0)
}, void 0));
const ConnectedCrossHair = connectWithSkip(mapStateToProps$1, CrossHair);
const width = 3;
const radius = width * 2;
const alpha = 1;
const Highlight = /*#__PURE__*/React.memo(({
height
}) => {
const {
sell,
buy
} = useSelector(highlightPricesSelector);
return jsx(Styled, {
children: ({
depthChart: {