frappe
color_progress property for bar doesn't work
I don't know what this is related to, but I have two errors in working with the color_progress property.
- In case of bar A, the progress is not colored!
- In case of B, everything is OK, but I don't like that the background color on the left is a bit visible on the corners, apparently it's because the radius of the progress and the bar are different?
- In case of bar C, the progress is painted with the color I specify for the background, the progress color is ignored/overwrited!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://cdn.jsdelivr.net/npm/frappe-gantt/dist/frappe-gantt.umd.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/frappe-gantt/dist/frappe-gantt.css">
<style>.gantt-container{padding-bottom: 60px;}</style>
</head>
<body>
<div id="gantt"></div>
<script>
let tasks = [
{
id: '1',
name: 'A',
start: '2025-04-16',
end: '2025-04-17',
progress: 50,
color_progress: 'tomato',
},{
id:'2',
name: 'B',
start: '2025-04-16',
end: '2025-04-18',
progress: 50,
color: 'tomato'
},{
id:'3',
name: 'C',
start: '2025-04-16',
end: '2025-04-19',
progress: 50,
color: 'tomato',
color_progress: 'green'
}
]
let gantt = new Gantt("#gantt", tasks, {scroll_to:'start'});
</script>
</body>
</html>
Live example: https://jsbin.com/netecumimo/1/edit?html,output
For case B: To fix the radius mismatch, in frappe-gantt.umd.js search for
t=this.corner_radius+2
and replace it by
t=this.corner_radius
Actually, this does not really fix it in Edge if you zoom in. Here the boarder has a different radius then the color field:
To fix this, in frappe-gantt.css search for
.gantt .bar-wrapper .bar{outline:1px solid var(--g-row-border-color);border-radius:3px}
and replace it by
.gantt .bar-wrapper .bar{stroke:var(--g-row-border-color);stroke-width:1px;rx:3;ry:3;}
It's because border-radius and outline do not apply to SVG elements, but stroke does.
It then should look like this:
To fix case C, in frappe-gantt.umd.js replace
this.$bar_progress.style.fill=this.task.color
by
this.$bar_progress.style.fill=this.task.color_progress
->
This was fixed but not pushed to npm, I guess. Will push as part of this clean up. Re: the radius mismatch, it's a cross-browser issue.