render()

in packages/synchro-charts/src/components/charts/sc-status-timeline/sc-status-timeline-overlay/sc-status-timeline-overlay.tsx [75:119]

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

  render() {
    const { width, height, marginLeft, marginRight, marginTop, marginBottom } = this.size;
    return (
      <div
        class="overlay-container"
        style={{
          width: `${width - marginRight - marginLeft - SMUDGE_WIDTH_PX}px`,
          height: `${height - marginTop - marginBottom}px`,
          left: `${marginLeft}px`,
          top: `${marginTop}px`,
        }}
      >
        {this.dataStreams.map(dataStream => {
          const point = closestPoint(getDataPoints(dataStream, dataStream.resolution), this.date, DATA_ALIGNMENT.LEFT);
          const value = point ? point.y : undefined;

          const threshold = breachedThreshold({
            value,
            date: this.date,
            dataStreams: this.dataStreams,
            dataStream,
            thresholds: this.thresholds,
          });

          const { error } = dataStream;
          const displayedValue = error == null ? value : error;
          const displayedUnit = error == null ? dataStream.unit : undefined;
          const valueColor = error == null && threshold != null ? threshold.color : undefined;
          return (
            <sc-status-timeline-overlay-row
              key={dataStream.id}
              label={dataStream.name}
              detailedLabel={dataStream.detailedName}
              value={displayedValue}
              unit={displayedUnit}
              isEditing={this.isEditing}
              valueColor={valueColor}
              icon={error == null ? threshold && threshold.icon : StatusIcon.ERROR}
              onNameChange={(name: string) => this.onChangeLabel({ streamId: dataStream.id, name })}
            />
          );
        })}
      </div>
    );
  }