Как избежать множественных операторов if/else или просто уменьшить когнитивную сложность?

Как мне реорганизовать ngOnChanges, чтобы уменьшить его когнитивную сложность с текущих 41 до рекомендуемых 15? В настоящее время я понимаю, что снижение когнитивной сложности делает ее более читаемой для нового пользователя. Я пробовал некоторые вещи, но не смог достичь порогового значения. Я не очень хорошо знаком с когнитивной сложностью. Пожалуйста, помогите мне в этом. Подробное объяснение будет оценено.

      ngOnChanges{
    this.dataset.data = this.chartData.data;
    this.labels = this.chartData.labels;
    this.legend = this.chartData.legend;
    this.chartStyle = this.chartData.chartStyle || {};

    if (this.chartData.hasOwnProperty("dataPresent")) {
        if (!this.chartData.dataPresent) {
            this.dataAbsent = true;
            this.chartStyle = {
                display: "none",
            }
        }
    }

    if (!this.chartData.hasOwnProperty("color")) {
        this.colors = [
            {
                backgroundColor: [
                    LEDSColorPalette.purple[500],
                    LEDSColorPalette.purple[50],
                ]
            }
        ]
    }
    else {
        this.colors = [this.chartData.color]
    }

    if (!this.chartData.hasOwnProperty("rotation")) {
        this.chartData.rotation = -90;
    }

    if (!this.chartData.hasOwnProperty("circumference")) {
        this.chartData.circumference = 360;
    }

    this.options = {
        rotation: this.chartData.rotation * (Math.PI / 180),
        responsiveAnimationDuration: 3000,
        maintainAspectRatio: false,
        circumference: this.chartData.circumference * (Math.PI / 180),
        responsive: true,
        tooltips: {
            enabled: this.chartData.tooltips || false,
        },
        animation:{
            duration: 3000,
        },
        legend: {
            position: this.chartData.legendPosition || "bottom",
            labels: {
                usePointStyle: true,
            }
        },
        title: {
            display: this.chartData.chartTitle,
            text: this.chartData.chartTitle,
            fontSize: this.chartData.chartTitleFontSize || 20,
            fontColor: this.chartData.chartTitleFontColor,
        },
        plugins: {
            dataLabels: this.chartData.dataLabels || false,
            doughnutlabel: false,
        },
        layout: this.chartData.layout || {},
        aspectRatio: this.chartData.aspectRatio || 3,
    }
    if (this.chartData.hasOwnProperty("cutoutPercentage")) {
        this.options.cutoutPercentage = this.chartData.cutoutPercentage;
    } else {
        this.options.cutoutPercentage = 90;
    }
    if (this.chartData.hasOwnProperty("tooltipsCallbacks")){
        this.options.tooltips.callbacks = {};
        Object.keys(this.chartData.tooltipsCallbacks).forEach((callback) => {
            this.options.tooltips.callbacks[callback] = new Function(
                this.chartData.tooltipsCallbacks[callback].arguments,
                this.chartData.tooltipsCallbacks[callback].body,
            )
        })
    }
    if (this.chartData.hasOwnProperty("centerText")){
        let centerText: any = [];

        if (isString(this.chartData.centerText)) {
            centerText = [{ text: this.chartdata.centerText }];
        } else if (isArray(this.chartData.centerText)){
            this.chartData.centerText.forEach((elem) => {
                if (isObject(elem)) {
                    centerText.push(elem);
                } else {
                    centerText.push({text: elem})
                }
            })
        } else if (isObject(this.chartData.centerText)){
            centerText = [this.chartData.centerText]
        }
        centerText.forEach((label, i) => {
            label.text = label.text + "";
            if(!label.hasOwnProperty("font")){
                label.font = {};
            }
            if(!label.font.hasOwnProperty("family")){
                label.font.family = '"Myriad Set Pro",Arial';
            }
            if(i === 0 && !label.font.hasOwnProperty("size")){
                label.font.size = "40";
            }
            if(i === 0 && !label.hasOwnProperty("color")){
                label.color = "#000";
            }
        }) 
        this.options.plugins.doughnutlabel = {
            labels: centerText,
        }
    }
}

0 ответов

Другие вопросы по тегам