render()

in packages/synchro-charts/src/components/charts/sc-legend/sc-legend-row/sc-legend-row.tsx [52:97]

• 45 lines of code
• 8 McCabe index (conditional complexity)

  render() {
    const isTrendPoint = this.pointType && this.pointType === POINT_TYPE.TREND;
    return (
      <Host>
        <div class="legend-row-container awsui">
          {this.showDataStreamColor && (
            <div class="color-container">
              {this.isLoading ? (
                <div class="spinner-container">
                  <sc-loading-spinner dark size={12} />
                </div>
              ) : (
                <svg class="bar" data-testid={`legend-icon-${this.pointType}`}>
                  <path
                    stroke={this.color}
                    stroke-dasharray={isTrendPoint ? TREND_ICON_DASH_ARRAY : ''}
                    stroke-linecap={STREAM_ICON_STROKE_LINECAP}
                    stroke-width={STREAM_ICON_STROKE_WIDTH}
                    d={STREAM_ICON_PATH_COMMAND}
                  />
                </svg>
              )}
            </div>
          )}

          <div class="info">
            <sc-data-stream-name
              onNameChange={this.updateName}
              isEditing={this.isEditing}
              label={this.label}
              detailedLabel={this.detailedLabel}
              pointType={this.pointType}
              date={this.point && new Date(this.point.x)}
            />
            <div class="legend-value" style={this.isEditing ? EDIT_MODE_STYLE : VIEW_MODE_STYLE}>
              {this.icon && <sc-chart-icon name={this.icon} />}
              <h4 class="awsui-util-d-i" data-testid="current-value" style={{ color: this.valueColor }}>
                <Value value={this.point ? this.point.y : undefined} />
              </h4>
              {this.unit && <small>&nbsp;{this.unit}</small>}
            </div>
          </div>
        </div>
      </Host>
    );
  }