text: getFormattedNumber()

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: {