render()

in packages/synchro-charts/src/components/sc-status-grid/sc-status-cell/sc-status-cell.tsx [56:126]

• 65 lines of code
• 25 McCabe index (conditional complexity)

  render() {
    const { icon, valueColor } = this;
    const { showName, showValue, showUnit } = this.labelsConfig;
    const backgroundColor = this.isEnabled && valueColor ? valueColor : DEFAULT_COLOR;

    /** Display Settings. We want to dynamically construct the layout dependent on what information is shown */
    const emphasizeValue = !showValue;
    const emphasizeNameAndUnit = showValue && !showName && !showUnit;

    /** If anything is emphasized, then something is emphasized */
    const somethingIsEmphasized = emphasizeValue || emphasizeNameAndUnit;

    const stream = this.alarmStream || this.propertyStream;
    const point = this.alarmStream ? this.alarmPoint : this.propertyPoint;

    const foregroundColor = highContrastColor(backgroundColor);
    return (
      <div
        class="status-cell tooltip-container"
        style={{
          backgroundColor,
          color: foregroundColor,
          justifyContent: somethingIsEmphasized ? 'center' : 'unset',
        }}
      >
        {showName && (
          <sc-data-stream-name
            displayTooltip={false}
            class={{ name: true, large: emphasizeValue, center: emphasizeValue }}
            style={{ color: foregroundColor }}
            label={stream ? stream.name : ''}
            detailedLabel={(stream && stream.detailedName) || ''}
            onNameChange={this.updateName}
            isEditing={this.isEditing}
          />
        )}
        {this.breachedThreshold && this.breachedThreshold.description != null && (
          <div
            style={{ color: foregroundColor }}
            class={{ description: true, large: emphasizeValue, center: emphasizeValue }}
          >
            {this.breachedThreshold.description}
          </div>
        )}
        {!somethingIsEmphasized && <div class="divider" />}
        {showValue && stream && (
          <div class={{ center: emphasizeNameAndUnit }}>
            {this.isEnabled && this.propertyStream && this.alarmStream && (
              <div class="secondary">
                <span style={{ color: foregroundColor }}>
                  {this.messageOverrides.liveTimeFrameValueLabel || DEFAULT_MESSAGE_OVERRIDES.liveTimeFrameValueLabel}:{' '}
                  <Value
                    value={this.propertyPoint ? this.propertyPoint.y : undefined}
                    unit={this.propertyStream.unit}
                  />
                </span>
              </div>
            )}
            <div class={{ value: true, large: emphasizeNameAndUnit }} style={{ color: foregroundColor }}>
              {this.isEnabled &&
                icon && [
                  <sc-chart-icon name={icon} size={ICON_SIZE_PX} color={highContrastColor(backgroundColor)} />,
                  <div class="spacer" />,
                ]}
              <Value unit={stream.unit} value={point ? point.y : undefined} isEnabled={this.isEnabled} />
            </div>
          </div>
        )}
      </div>
    );
  }