private _drawHistgram()

in web/src/app/timeline/background-canvas.ts [377:491]
113 lines of code
5 McCabe index (conditional complexity)

  private _drawHistgram() {
    if (this.viewModel.allLogsAfterFilteringStep.length === 0) {
      return;
    }
    const range = this.viewModel.logQueryRange;
    const histogramMaxSizeInPx = 50;
    const secondStride = this._calcStrideSizeAt(0) / 50;
    const boxWidth =
      this.timelineCoordinateCalculator.durationToWidth(secondStride);
    const histgramLeftTime = Math.max(
      Math.ceil(
        this.timelineCoordinateCalculator.leftMostTime() / secondStride,
      ) *
        secondStride -
        secondStride,
      range.begin,
    );
    this.ctx.lineWidth = 1;

    // Count logs by severity with spliting timerange by secondStride
    const logCountsForAll = this.countLogsBySeverity(
      this.viewModel.allLogsAfterFilteringStep,
      histgramLeftTime,
      Math.min(
        this.canvas.width,
        this.timelineCoordinateCalculator.timeToLeftOffset(range.end),
      ),
      secondStride,
    );
    const logCountsForHighlights = this.countLogsBySeverity(
      this.viewModel.logsOnHighlightedTimelines,
      histgramLeftTime,
      Math.min(
        this.canvas.width,
        this.timelineCoordinateCalculator.timeToLeftOffset(range.end),
      ),
      secondStride,
    );
    let currentBucketLeftTime = histgramLeftTime;
    let bucketIndex = 0;
    while (
      this.timelineCoordinateCalculator.timeToLeftOffset(
        currentBucketLeftTime,
      ) <
      Math.min(
        this.canvas.width,
        this.timelineCoordinateCalculator.timeToLeftOffset(range.end),
      )
    ) {
      let bottomHeight = 0;
      for (const severity of generated.severities) {
        // 33 is alpha part of RGB color code example: #0000FF33
        this.ctx.strokeStyle = generated.severityBorderColors[severity] + '33';
        this.ctx.fillStyle = generated.severityColors[severity] + '33';
        const histRatio =
          logCountsForAll.logsBySeverity[bucketIndex][severity] /
          logCountsForAll.maxLogCountInSingleBucket;
        const histHeight = histogramMaxSizeInPx * histRatio;
        this.ctx.fillRect(
          this.timelineCoordinateCalculator.timeToLeftOffset(
            currentBucketLeftTime,
          ),
          this.timelineCoordinateCalculator.adjustPixelScale(
            60 - histHeight - bottomHeight,
          ),
          boxWidth,
          this.timelineCoordinateCalculator.adjustPixelScale(histHeight),
        );
        this.ctx.strokeRect(
          this.timelineCoordinateCalculator.timeToLeftOffset(
            currentBucketLeftTime,
          ),
          this.timelineCoordinateCalculator.adjustPixelScale(
            60 - histHeight - bottomHeight,
          ),
          boxWidth,
          this.timelineCoordinateCalculator.adjustPixelScale(histHeight),
        );
        bottomHeight += histHeight;
      }
      bottomHeight = 0;
      for (const severity of generated.severities) {
        // CC is alpha part of RGB color code example: #0000FFCC
        this.ctx.strokeStyle = generated.severityBorderColors[severity] + 'CC';
        this.ctx.fillStyle = generated.severityColors[severity] + 'CC';
        const histRatio =
          logCountsForHighlights.logsBySeverity[bucketIndex][severity] /
          logCountsForAll.maxLogCountInSingleBucket;
        const histHeight = histogramMaxSizeInPx * histRatio;
        this.ctx.fillRect(
          this.timelineCoordinateCalculator.timeToLeftOffset(
            currentBucketLeftTime,
          ),
          this.timelineCoordinateCalculator.adjustPixelScale(
            60 - histHeight - bottomHeight,
          ),
          boxWidth,
          this.timelineCoordinateCalculator.adjustPixelScale(histHeight),
        );
        this.ctx.strokeRect(
          this.timelineCoordinateCalculator.timeToLeftOffset(
            currentBucketLeftTime,
          ),
          this.timelineCoordinateCalculator.adjustPixelScale(
            60 - histHeight - bottomHeight,
          ),
          boxWidth,
          this.timelineCoordinateCalculator.adjustPixelScale(histHeight),
        );
        bottomHeight += histHeight;
      }
      currentBucketLeftTime += secondStride;
      bucketIndex += 1;
    }
  }