async initChart()

in modules/frontend/app/components/ignite-chart/controller.js [133:288]
118 lines of code
10 McCabe index (conditional complexity)

    async initChart() {
        /** @type {import('chart.js').ChartConfiguration} */
        this.config = {
            type: 'LineWithVerticalCursor',
            data: {
                datasets: []
            },
            options: {
                elements: {
                    line: {
                        tension: 0
                    },
                    point: {
                        radius: 2,
                        pointStyle: 'rectRounded'
                    }
                },
                animation: {
                    duration: 0 // general animation time
                },
                hover: {
                    animationDuration: 0 // duration of animations when hovering an item
                },
                responsiveAnimationDuration: 0, // animation duration after a resize
                maintainAspectRatio: false,
                responsive: true,
                legend: {
                    display: false
                },
                scales: {
                    xAxes: [{
                        type: 'realtime',
                        display: true,
                        time: {
                            displayFormats: {
                                second: 'HH:mm:ss',
                                minute: 'HH:mm:ss',
                                hour: 'HH:mm:ss'
                            }
                        },
                        ticks: {
                            maxRotation: 0,
                            minRotation: 0
                        }
                    }],
                    yAxes: [{
                        type: 'linear',
                        display: true,
                        ticks: {
                            min: 0,
                            beginAtZero: true,
                            maxTicksLimit: 4,
                            callback: (value, index, labels) => {
                                if (value === 0)
                                    return 0;

                                if (_.max(labels) <= 4000 && value <= 4000)
                                    return value;

                                if (_.max(labels) <= 1000000 && value <= 1000000)
                                    return `${value / 1000}K`;

                                if ((_.max(labels) <= 4000000 && value >= 500000) || (_.max(labels) > 4000000))
                                    return `${value / 1000000}M`;

                                return value;
                            }
                        }
                    }]
                },
                tooltips: {
                    mode: 'index',
                    position: 'yCenter',
                    intersect: false,
                    yAlign: 'center',
                    xPadding: 20,
                    yPadding: 20,
                    bodyFontSize: 13,
                    callbacks: {
                        title: (tooltipItem) => {
                            return tooltipItem[0].xLabel = moment(tooltipItem[0].xLabel, inferLabelFormat(tooltipItem[0].xLabel)).format('HH:mm:ss');
                        },
                        label: (tooltipItem, data) => {
                            const label = data.datasets[tooltipItem.datasetIndex].label || '';

                            return `${_.startCase(label)}: ${tooltipItem.yLabel} per sec`;
                        },
                        labelColor: (tooltipItem) => {
                            return {
                                borderColor: 'rgba(255,255,255,0.5)',
                                borderWidth: 0,
                                boxShadow: 'none',
                                backgroundColor: this.chartColors[tooltipItem.datasetIndex]
                            };
                        }
                    }
                },
                plugins: {
                    streaming: {
                        duration: this.currentRange.value * 1000 * 60,
                        frameRate: 1000 / this.refreshRate || 1 / 3,
                        refresh: this.refreshRate || 3000,
                        // Temporary workaround before https://github.com/nagix/chartjs-plugin-streaming/issues/53 resolved.
                        // ttl: this.maxRangeInMilliseconds,
                        onRefresh: () => {
                            this.onRefresh();
                        }
                    }
                }
            }
        };

        this.config = _.merge(this.config, this.chartOptions);

        const chartModule = await import('chart.js');
        const Chart = chartModule.default;

        Chart.Tooltip.positioners.yCenter = (elements) => {
            const chartHeight = elements[0]._chart.height;
            const tooltipHeight = 60;

            return {x: elements[0].getCenterPoint().x, y: Math.floor(chartHeight / 2) - Math.floor(tooltipHeight / 2) };
        };


        // Drawing vertical cursor
        Chart.defaults.LineWithVerticalCursor = Chart.defaults.line;
        Chart.controllers.LineWithVerticalCursor = Chart.controllers.line.extend({
            draw(ease) {
                Chart.controllers.line.prototype.draw.call(this, ease);

                if (this.chart.tooltip._active && this.chart.tooltip._active.length) {
                    const activePoint = this.chart.tooltip._active[0];
                    const ctx = this.chart.ctx;
                    const x = activePoint.tooltipPosition().x;
                    const topY = this.chart.scales['y-axis-0'].top;
                    const bottomY = this.chart.scales['y-axis-0'].bottom;

                    // draw line
                    ctx.save();
                    ctx.beginPath();
                    ctx.moveTo(x, topY);
                    ctx.lineTo(x, bottomY);
                    ctx.lineWidth = 0.5;
                    ctx.strokeStyle = '#0080ff';
                    ctx.stroke();
                    ctx.restore();
                }
            }
        });

        await import('chartjs-plugin-streaming');

        this.chart = new Chart(this.ctx, this.config);
        this.changeXRange(this.currentRange);
    }