render()

in packages/synchro-charts/src/components/sc-kpi/sc-kpi-base/sc-kpi-base.tsx [98:169]

• 66 lines of code
• 20 McCabe index (conditional complexity)

  render() {
    const { latestPoint, previousPoint } = this.getValues();

    const shouldShowTrends =
      this.isEnabled &&
      previousPoint &&
      latestPoint &&
      this.trendStream &&
      this.trendStream.dataType !== DataType.STRING;

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

    if (stream == null) {
      return undefined;
    }

    const error = this.propertyStream && this.propertyStream.error;

    return (
      <div class={{ wrapper: true, large: !this.miniVersion }}>
        <div />
        <sc-data-stream-name
          displayTooltip={false}
          label={stream.name}
          detailedLabel={stream.detailedName}
          pointType={POINT_TYPE.DATA}
          date={point && new Date(point.x)}
          onNameChange={this.updateName}
          isEditing={this.isEditing}
        />
        <div class="icon-container">
          {this.isEnabled && icon && <sc-chart-icon name={icon} size={this.iconSize()} color={this.valueColor} />}
        </div>
        <div class={{ main: true, large: !this.miniVersion }}>
          {error != null && <sc-error-badge data-testid="warning">{error}</sc-error-badge>}

          {this.isLoading ? (
            <sc-loading-spinner
              data-testid="loading"
              style={{ height: `${this.fontSize()}px`, width: `${this.fontSize()}px` }}
            />
          ) : (
            <div
              data-testid="current-value"
              class={{ 'value-wrapper': true, large: !this.miniVersion }}
              style={{ color: this.fontColor(point) }}
            >
              <Value isEnabled={this.isEnabled} value={point ? point.y : undefined} unit={stream.unit} />
            </div>
          )}
          {shouldShowTrends && this.isEnabled && (
            <Trend
              previousPoint={previousPoint as DataPoint<number>}
              latestPoint={latestPoint as DataPoint<number>}
              miniVersion={this.miniVersion}
            />
          )}
          {!shouldShowTrends && this.isEnabled && point && (
            <div>
              at{' '}
              {new Date(point.x).toLocaleString('en-US', {
                hour: 'numeric',
                minute: 'numeric',
              })}
            </div>
          )}
        </div>
      </div>
    );
  }