I display information on the graph using AddTaskLayer, but I get this information from the api, the fact is that sometimes I don’t have time to get the data, and the layer is already drawn and the data is not displayed, how can I force the layer to draw with a delay or overlay the data a little later ?
I’m getting planCostByGraph data and I want to make sure that it appears on the layer
I draw a layer through toggle switching
export const useShowIndicatorsGantt = ({ isActive }: { isActive: boolean }) => {
const indicatorsGanttLayerIdRef = useRef<string>()
const { data: planCostByGraph } = useGetWorksPlanCostByGraphId()
useEffect(() => {
const toggleIndicatorsGanttLayer = (isIndicatorsGanttActive: boolean) => {
if (gantt.config.show_chart && planCostByGraph) {
indicatorsGanttLayerIdRef.current = gantt.addTaskLayer({
renderer: {
getRectangle(task: GanttTask) {
return gantt.getTaskPosition(task, task?.start_date, task.end_date)
},
render(task: GanttTask) {
const mainDiv = document.createElement('div')
const sizes = gantt.getTaskPosition(task, task.start_date, task.end_date)
const { duration } = getDurationAsValue({
endDate: task.end_date,
startDate: task.start_date,
})
const currentTask = planCostByGraph.find(plan => plan.workId === task.id)
const indicators: Indicators = {}
if (currentTask?.completedVolumesOnDate.length) {
currentTask?.completedVolumesOnDate.forEach(volume => {
indicators[parseAndFormatDate(volume.dateStep)] = {
cost: volume.cost,
volume: volume.volume,
}
})
}
for (let i = 0; i < duration; i++) {
const el = document.createElement('div')
el.className = 'deadline'
el.style.width = '195px'
el.style.color = 'black'
el.style.fontSize = '12px'
const hasDate = parseAndFormatDate(
getDateByIndex(task.start_date, task.end_date, i)
)
const indicatorFactVolume = indicators?.[hasDate]?.volume
const indicatorFactCost = indicators?.[hasDate]?.cost
el.innerHTML = `<div>
<div class="indicatorsGanttCharts">
<div class="indicatorsGanttChartsItem" >${currentTask?.planVolume ? `${formatNumber(currentTask?.planVolume)}` : '- '}</div>
<div class="indicatorsGanttChartsItem">${currentTask?.planCost ? `${formatNumber(currentTask?.planCost)} ₽` : '- '}</div>
</div>
${
task.type !== 'WORK'
? `<div class="indicatorsGanttCharts">
<div class="indicatorsGanttChartsItem">- </div>
<div class="indicatorsGanttChartsItem">- </div>
</div>`
: `<div class="indicatorsGanttCharts">
<div class="indicatorsGanttChartsItem">${indicatorFactVolume ? `${formatNumber(indicatorFactVolume)}` : '- '}</div>
<div class="indicatorsGanttChartsItem">${indicatorFactCost ? `${formatNumber(indicatorFactCost)} ₽` : '- '}</div>
</div>`
}
</div>`
el.style.position = 'absolute'
el.style.left = `${sizes.left + i * 200 - i * 5}px`
el.style.top = `${sizes.top + 25}px`
mainDiv.appendChild(el)
}
return mainDiv
},
update(task: GanttTask, node: HTMLElement) {
setTimeout(() => {
const sizes = gantt.getTaskPosition(task, task.start_date, task.end_date)
node.style.left = `${gantt.getScrollState().x}px`
node.style.top = `${sizes.top + gantt.getScrollState().y}px`
})
},
},
})
} else if (indicatorsGanttLayerIdRef.current) {
gantt.removeTaskLayer(indicatorsGanttLayerIdRef.current)
}
}
toggleIndicatorsGanttLayer(isActive)
gantt.render()
const ganttReadyEventId = gantt.attachEvent('onGanttReady', () => {
toggleIndicatorsGanttLayer(isActive)
})
return () => {
gantt.detachEvent(ganttReadyEventId)
}
}, [isActive, planCostByGraph])
}