Refactor GanttChart component to set timeline width dynamically

This commit is contained in:
Simon Larsen 2024-02-23 17:36:11 +00:00
parent 61be62740a
commit 29092b23ba
No known key found for this signature in database
GPG Key ID: AB45983AA9C81CDE
2 changed files with 4 additions and 2 deletions

View File

@ -88,7 +88,6 @@ const Bar: FunctionComponent<ComponentProps> = (
<div
className="chart-bar h-8 pt-1 pb-1 mt-2.5 mb-2.5 rounded absolute cursor-pointer ml-1 mr-1"
style={{
marginLeft: `${barLeftPosition}px`,
width: `${barWidth}px`,
backgroundColor: `${props.bar.barColor.toString()}`,
opacity: barOpacity,

View File

@ -45,7 +45,10 @@ const GanttChart: FunctionComponent<ComponentProps> = (
setEachIntervalWidth(chartWidth / numberOfInterval);
}
setTimelineWidth(chartWidth * 0.75); // 75 % of chart width, 25% for category spacer
const timelineWidth: number = chartWidth * 0.75; // 75 % of chart width, 25% for category spacer
setTimelineWidth(timelineWidth); // 75 % of chart width, 25% for category spacer
}, [chartWidth]);
return (