Line chart rendering based on dynamic duration changes with suffixes

prTimeToMergeChartOptions : any = comboChartOptions;

prTimeToMergeChartsOptions(){
this.prTimeToMergeChartOptions.scales.x.title.text = "duration"
this.prTimeToMergeChartOptions.scales.y.title.text = "Average time taken to merge pull request"
this.prTimeToMergeChartOptions.plugins = {
tooltip: {
callbacks: {
title: (data) => {
const date = `${this.translation.translate("developmentMetrics.date")}: ${data[0].label}`;
return date;
},
label: (context: any) => {
let tooltipLines = [];
if (context.dataset.label.toLowerCase() !== 'average') {
const appName = `${this.translation.translate("developmentMetrics.application")}: ${context.dataset.label}`;
tooltipLines.push(appName);
}
const valueInDays = context.raw;
let displayValue;
if (valueInDays >= 1) {
displayValue = `${valueInDays.toFixed(1)} days`;
} else {
const valueInHours = valueInDays * 24;
if (valueInHours >= 1) {
displayValue = `${valueInHours.toFixed(1)} hours`;
} else {
const valueInMinutes = valueInHours * 60;
displayValue = `${valueInMinutes.toFixed(0)} minutes`;
}
}
const yAxisLabelWithSuffix = context.dataset.label.toLowerCase() === 'average'
? "Average Time to merge"
: "Time to merge";
const changed = `${yAxisLabelWithSuffix}: ${displayValue}`;
tooltipLines.push(changed);
return tooltipLines;
}
}
}
};
}


Want to render the chart duration of y axis along with dynamic data with suffixes like Hours, days, and Months based on maxm value present inside of it

Note : Here context.raw have values coming as days, months and Hours as well Example : it may come as 2.4 which might be in Days and 7 might be in Hours and also 3 which might be in months as well

for more details please follow below link : (https://drive.google.com/file/d/1pMKkneTANw6palN8XnlgfoNVqnzi7H_B/view?usp=drivesdk)

Continue reading...