render()

in web/frontend/libs/@deltix/hd.components-order-grid/index.umd.js [954:1078]

• 121 lines of code
• 14 McCabe index (conditional complexity)

    render() {
      const {
        quantity,
        next,
        hovered
      } = this.state;
      const {
        id,
        height,
        width,
        side,
        highlightOrders,
        quantityPrecision,
        formatQuantity,
        showCumulativeQuantity,
        inverse,
        abbreviations
      } = this.props;
      const {
        marketQuantityWidth,
        priceWidth,
        orderCountWidth,
        worstPriceWidth,
        cumulativeQuantityWidth
      } = this.getBlockSizes();
      setRectangleDimensions(this.orderLineHitArea, width, height);
      setRectangleDimensions(this.marketQuantityHitArea, marketQuantityWidth, height);
      setRectangleDimensions(this.cumulativeQuantityHitArea, cumulativeQuantityWidth, height);
      setRectangleDimensions(this.priceHitArea, priceWidth, height);
      setRectangleDimensions(this.orderCountHitArea, orderCountWidth, height);
      setRectangleDimensions(this.worstPriceHitArea, worstPriceWidth, height);
      const highlighted = this.props.aggregatingQuantity ? hovered : id === highlightOrders[side];
      const isBuy = side === (inverse ? hd_componentsOrderBook.L2MessageSide.sell : hd_componentsOrderBook.L2MessageSide.buy);
      const xOffset = isBuy ? 0 : width / 2 + 5;
      let xNumberOffset = xOffset;
      let xPriceOffset = xOffset;
      let xQtyOffset = xOffset;
      let xCumulativeQtyOffset = xOffset;
      let xWorstPriceOffset = xOffset;

      if (showCumulativeQuantity) {
        if (isBuy) {
          xPriceOffset += cumulativeQuantityWidth + marketQuantityWidth;
          xQtyOffset += cumulativeQuantityWidth;
        } else {
          xQtyOffset += priceWidth;
          xCumulativeQtyOffset += priceWidth + marketQuantityWidth;
        }
      } else if (worstPriceWidth > 0) {
        if (isBuy) {
          xPriceOffset += worstPriceWidth;
          xQtyOffset += worstPriceWidth + priceWidth;
        } else {
          xPriceOffset += marketQuantityWidth;
          xWorstPriceOffset += marketQuantityWidth + priceWidth;
        }
      } else {
        if (isBuy) {
          xPriceOffset += orderCountWidth + marketQuantityWidth;
          xQtyOffset += orderCountWidth;
        } else {
          xQtyOffset += priceWidth;
          xNumberOffset += priceWidth + marketQuantityWidth;
        }
      }

      return jsxRuntime.jsx(hd_componentsMultiApp.Styled, {
        children: ({
          orderGrid: {
            quantity: quantityColor,
            hovered: hoveredColor,
            highlighted: highlightedColor,
            price: priceColors
          }
        }) => {
          const priceStyle = hd_componentsCommon.fontStyleCache(hd_componentsCommon.robotoMonoRegular10, priceColors[side].color);
          const ceilPartStyle = hd_componentsCommon.fontStyleCache(hd_componentsCommon.robotoMonoRegular10, quantityColor[side].ceilPart.color);
          const zeroPartStyle = hd_componentsCommon.fontStyleCache(hd_componentsCommon.robotoMonoRegular10, quantityColor[side].zeroPart.color);
          const decimalPartStyle = hd_componentsCommon.fontStyleCache(hd_componentsCommon.robotoMonoRegular10, quantityColor[side].decimalPart.color);
          return jsxRuntime.jsxs(Container, Object.assign({
            ref: this.rootRef,
            pointerover: this.toggleHover,
            pointerout: this.toggleHover,
            interactive: true,
            // hitArea={this.orderLineHitArea}
            containsPoint: this.containsPoint
          }, {
            children: [!highlighted && next !== undefined && jsxRuntime.jsx(hd_componentsMultiApp.Rectangle, {
              width: width,
              height: height,
              color: hoveredColor.color,
              alpha: hoveredColor.alpha
            }, void 0), highlighted && jsxRuntime.jsx(hd_componentsMultiApp.Rectangle, {
              width: width,
              height: height,
              color: highlightedColor.color,
              alpha: highlightedColor.alpha
            }, void 0), this.renderPrice(xPriceOffset, priceWidth, height, priceStyle, 'right'), jsxRuntime.jsxs(Container, Object.assign({
              x: xQtyOffset,
              interactive: true,
              hitArea: this.marketQuantityHitArea,
              buttonMode: true,
              pointertap: this.onSelectedQuantity,
              pointerover: this.showHint,
              pointerout: this.hideHint
            }, {
              children: [jsxRuntime.jsx(reactPixi.Graphics, {
                ref: this.growRef
              }, void 0), jsxRuntime.jsx(hd_componentsMultiApp.MarketQuantity, {
                formatQuantity: formatQuantity,
                quantity: quantity,
                height: height,
                width: marketQuantityWidth,
                precision: quantityPrecision,
                // align={side === L2MessageSide.buy ? "right" : "left"}
                ceilPartStyle: ceilPartStyle,
                zeroPartStyle: zeroPartStyle,
                decimalPartStyle: decimalPartStyle,
                abbreviations: abbreviations
              }, void 0)]
            }), void 0), showCumulativeQuantity ? this.renderCumulativeQty(xCumulativeQtyOffset, cumulativeQuantityWidth, height, ceilPartStyle, zeroPartStyle, decimalPartStyle, 'right') : worstPriceWidth > 0 ? this.renderWorstPrice(xWorstPriceOffset, worstPriceWidth, height, priceStyle, 'right') : this.renderNumberOfOrders(xNumberOffset, orderCountWidth, height, priceStyle)]
          }), void 0);
        }
      }, void 0);
    }