renderChart()

in src/app/components/vertical-bar-chart/vertical-bar-chart.component.ts [74:216]

• 125 lines of code
• 15 McCabe index (conditional complexity)

  renderChart(bucketList: string[], barChartDataSets: BarChartDataSet[]) {
    if (!this.chartContainerId) {
      return;
    }
    const ctx = (document.getElementById(this.chartContainerId) as HTMLCanvasElement).getContext(
      '2d'
    );

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

    this.barChart = new Chart(ctx!, {
      type: 'bar',
      data: {
        labels: this.bucketList,
        datasets: barChartDataSets.map((item, index) => {
          return {
            label: item.label,
            data: item.data,
            backgroundColor: item.backgroundColor,
            borderWidth: item.borderWidth,
          }
        })
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: {
            display: true,
            position: 'right',
            align: 'start',
            onClick: (e) => { }, // disable legend click event
            onHover: (event, legendItem, legend) => {
              let datasetIndex = legendItem.datasetIndex
              // Update the other datasets background color
              if (this.barChart != undefined) {
                this.barChart.data.datasets.forEach((dataset, i) => {
                  if (i != datasetIndex && this.barChart != undefined) {
                    this.barChart.data.datasets[i].backgroundColor = this.adjustOpacity(this.barChartDataSets[i].backgroundColor, 0.2);
                  }
                })
              }
              this.barChart?.update("active");
            },
            onLeave: (event, legendItem, legend) => {
              // Reset datasets background color
              if (this.barChart != undefined) {
                this.barChart.data.datasets.forEach((dataset, i) => {
                  if (this.barChart != undefined) {
                    this.barChart.data.datasets[i].backgroundColor = this.barChartDataSets[i].backgroundColor;
                  }
                })
              }
              this.barChart?.update("active");
            },
          },
          title: {
            display: false,
          },
          tooltip: {
            enabled: true,
            position: 'nearest',
            callbacks: {
              label: function (context) {
                return barChartDataSets[context.datasetIndex].label;
              },
              footer: function (context) {
                // show bar description on tooltip footer
                let datasetIndex = context[0].datasetIndex;
                let dataIndex = context[0].dataIndex;
                let nodeCount = context[0].parsed.y
                let unit = nodeCount > 1 ? 'nodes' : 'node';
                return "Total: " + nodeCount + " " + unit + "\n\n" + barChartDataSets[datasetIndex].description[dataIndex];
              }
            }
          },
        },
        scales: {
          x: {
            grid: {
              display: false,
            },
            ticks: {
              color: '#666'
            },
            border: {
              display: false,
            }
          },
          y: {
            ticks: {
              stepSize: 1,
              precision: 0
            },
            grid: {
              color: '#ccc',
              tickWidth: 0
            },
            border: {
              display: false,
              dash: [6, 6]
            }
          }
        },
        onHover: (event, chartElement) => {
          if (this.barChartDataSets.length > 0) {
            if (this.barChart != undefined) {
              if (chartElement.length > 0) {
                // Reset datasets background color
                this.barChart?.data.datasets?.forEach((dataset, i) => {
                  this.barChartDataSets.forEach((item, index) => {
                    if (this.barChart != undefined) {
                      this.barChart.data.datasets[index].backgroundColor = this.barChartDataSets[index].backgroundColor;
                    }
                  });
                });
                // Update the other datasets background color
                const datasetIndex = chartElement[0].datasetIndex;
                this.barChart?.data.datasets?.forEach((dataset, i) => {
                  if (i != datasetIndex && this.barChart != undefined) {
                    this.barChart.data.datasets[i].backgroundColor = this.adjustOpacity(this.barChartDataSets[i].backgroundColor, 0.2);
                  }
                })
              } else {
                // Reset datasets background color
                this.barChart?.data.datasets?.forEach((dataset, i) => {
                  this.barChartDataSets.forEach((item, datasetIndex) => {
                    if (this.barChart != undefined) {
                      this.barChart.data.datasets[datasetIndex].backgroundColor = this.barChartDataSets[datasetIndex].backgroundColor;
                    }
                  });
                });
              }
              this.barChart?.update("active");
            }
          }
        },
      },
    });
    this.barChart.update();
  }