Frappe gantt chart not working

[Paulami31]

I am using the frappe gantt chart library in my html file, it was all working fine till 13th sep 2024, after that it suddenly throwing me error as -
Gantt not defined, though I’ve used online cdn links of the library, those are fine, it was working fine with that same link before, can anyone guide me what to be done to fix this?

links I am using -

<script src="https://cdn.jsdelivr.net/npm/frappe-gantt/dist/frappe-gantt.js"></script>

[KebabRonin]

Your link seems to be the minified version of the code, where all variables are renamed to single letters. This might be why you can't find 'Gantt', because in your source it's been renamed to 'B' it seems like.

Before this v0.8.0 there was a frappe-gantt.js and a frappe-gantt.min.js, but with this release it seems like only the minified version is available/compiled.

You could try downloading the source locally and compiling it with yarn.

[Paulami31]

so you are suggesting me to use min one? can you please provide me the cdn link and asking me to use it locally?

[safwansamsudeen]

@Paulami31 - use https://cdn.jsdelivr.net/npm/frappe-gantt/dist/frappe-gantt.umd.js please.

(or https://cdn.jsdelivr.net/npm/frappe-gantt/dist/frappe-gantt.umd.cjs if you're still using 0.8.0. We'll figure this out and have a minified and other versions)

[Paulami31]

hey @safwansamsudeen I have used -
https://cdn.jsdelivr.net/npm/frappe-gantt/dist/frappe-gantt.umd.js

but still lookwise it is not same as it was before the updates, infact the view_mode functions are also not working, can you please check on this?

[safwansamsudeen]

That's weird - could you share your code?

Yes, the view has changed a lot, but it isn't supposed to be broken like this. Did you import the CSS - frappe-gantt.css?

[Paulami31]

yes I am attaching the file below, width of the container is cropping automatically, I cannot share my exact organizational code, but sharing the demo code, that is working with display, but mode change options are not working, in my original code I have sent you the ss before, the chart is cropping from right

`

<title>Frappe Gantt Chart Example</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style> .gantt .bar-label { fill: #0335fc; font-size: 15px; font-weight: bold; }

.zoom-buttons {
  position: absolute;
  top: 150px;
  right: 10px;
  display: flex;
  gap: 5px;
}

.zoom-buttons button {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 18px;
}

#zoom-in::before {
  content: "+";
}

#zoom-out::before {
  content: "-";
}

</style>

<script src="https://cdn.jsdelivr.net/npm/frappe-gantt/dist/frappe-gantt.umd.js"></script> <script> document.addEventListener('DOMContentLoaded', function () { const tasks = [ { id: "Task 1", name: "Task 1", start: "2023-09-01", end: "2023-09-05", progress: 100, }, { id: "Task 2", name: "Task 2", start: "2023-09-03", end: "2023-09-10", progress: 50, }, { id: "Task 3", name: "Task 3", start: "2023-09-06", end: "2023-09-12", progress: 25, }, ]; try { var minDate = new Date(Math.min(...tasks.map(t => new Date(t.start)))); var maxDate = new Date(Math.max(...tasks.map(t => new Date(t.end)))); var gantt = new Gantt('#gantt-chart', tasks, { on_click: function (task) { var currentUrl = window.location.href; var baseUrl = currentUrl.substring(0, currentUrl.lastIndexOf('/')); var pageUrl = baseUrl + '/' + task.id.toLowerCase().replace(/\s/g, '-') + '/'; window.location.href = pageUrl; console.log("Page Url:", pageUrl); }, on_date_change: function (task, start, end) { console.log(task, start, end); }, on_progress_change: function (task, progress) { console.log(task, progress); }, on_view_change: function (mode) { console.log('View mode changed:', mode); }, header_height: 50, column_width: 30, step: 24, view_modes: ["Quarter Day", "Half Day", "Day", "Week", "Month"], bar_height: 30, bar_corner_radius: 3, arrow_curve: 5, padding: 18, view_mode: "Week", date_format: "YYYY-MM-DD", language: "en", custom_popup_html: null, start_date: minDate, end_date: maxDate }); $('#zoom-in').click(function () { if (gantt.options.view_mode === 'Day') { return; } else if (gantt.options.view_mode === 'Week') { gantt.change_view_mode('Day'); } else if (gantt.options.view_mode === 'Month') { gantt.change_view_mode('Week'); } else if (gantt.options.view_mode === 'Year') { gantt.change_view_mode('Month'); } }); $('#zoom-out').click(function () { if (gantt.options.view_mode === 'Day') { gantt.change_view_mode('Week'); } else if (gantt.options.view_mode === 'Week') { gantt.change_view_mode('Month'); } else if (gantt.options.view_mode === 'Month') { gantt.change_view_mode('Year'); } }); } catch (error) { console.error('Error initializing Gantt chart:', error); } }); </script> `

this is a html file, the view modes are not working on clicking on the + and - button, which was working before.

an error is also coming in console -
Error initializing Gantt chart: TypeError: Cannot destructure property 'x' of 'this.computeGridHighlightDimensions(...)' as it is undefined.

[Paulami31]

@safwansamsudeen hey can you please check the issue?

[Paulami31]

That's weird - could you share your code?

Yes, the view has changed a lot, but it isn't supposed to be broken like this. Did you import the CSS - frappe-gantt.css?

please check the code