renderChart()

in src/app/components/area-chart/area-chart.component.ts [111:216]
98 lines of code
5 McCabe index (conditional complexity)

  renderChart(chartData: AreaDataItem[] = []) {
    if (!this.chartContainerId) {
      return;
    }

    const ctx = (document.getElementById(this.chartContainerId) as HTMLCanvasElement).getContext(
      '2d'
    );

    if (this.areaChart) {
      this.areaChart.destroy();
    }

    // Filter out negative values from chartData
    chartData = chartData.filter(item => item.y >= 0);

    this.areaChart = new Chart(ctx!, {
      type: 'line',
      data: {
        datasets: [
          {
            data: chartData,
            backgroundColor: (context) => {
              const { ctx, chartArea } = context.chart;
              if (!ctx || !chartArea) return;
              const gradient = ctx.createLinearGradient(0, chartArea.top, 0, chartArea.bottom * 1.2);

              gradient.addColorStop(0, Color(APP_STATUS_COLOR_MAP['Running']).alpha(0.4).string());
              gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');

              return gradient;
            },
            borderColor: APP_STATUS_COLOR_MAP['Running'],
            label: this.tooltipLabel,
            fill: 'start',
            pointBackgroundColor: APP_STATUS_COLOR_MAP['Running'],
            pointHoverRadius: 10,
          },
        ],
      },
      options: {
        responsive: true,
        spanGaps: false,
        maintainAspectRatio: false,
        elements: {
          line: {
            tension: 0.4,
          },
        },
        plugins: {
          filler: {
            propagate: false,
          },
          legend: {
            display: true,
            labels: {
              color: '#666',
              font: {
                weight: 500
              }
            }
          },
          title: {
            display: false,
          },
          tooltip: {
            enabled: true,
            position: 'nearest',
          },
        },
        scales: {
          x: {
            type: 'timeseries',
            time: {
              unit: 'minute',
            },
            grid: {
              display: false,
            },
            ticks: {
              color: '#666'
            },
            border: {
              display: false,
            }
          },
          y: {
            ticks: {
              stepSize: 1,
              color: '#666',
            },
            grid: {
              color: '#ccc',
              tickWidth: 0
            },
            border: {
              display: false,
              dash: [6, 6]
            }
          },
        },
      },
    });

    this.areaChart.update();
  }