Как избежать множественных операторов 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,
}
}
}