Py.Cafe

maartenbreddels/

interactive-gantt-chart

Interactive Gantt Chart load example

DocsPricing
  • app.py
  • requirements.txt
app.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
import solara
import solara.server.settings
from pathlib import Path

HERE = Path(__file__).parent
solara.server.settings.assets.extra_locations.append(HERE)

# root_path should be /_app on pycafe
root_path = solara.server.settings.main.root_path
print("root_path", root_path)


@solara.component
def Page():

    # Main HTML structure without the inline script

    html = """
    <div>
        <link rel="stylesheet" href="/_app/static/assets/dhtmlxgantt.css">
        <style>
            html, body {
                height: 100%;
                padding: 0px;
                margin: 0px;
                overflow: hidden;
            }
        </style>
        <div id="gantt_here" style='width:100%; height:100%;'></div>
    </div>
    """

    # Inline script to define the loadScript function and initialize the Gantt chart

    inline_script = """
    function loadScript(mod) {
        return new Promise((resolve, reject) => {
            requirejs([mod], (...modules) => resolve(modules[0]));
          })
    }
 
    function loadCSS(url) {
      return new Promise((resolve, reject) => {
        const link = document.createElement("link");
        link.rel = "stylesheet";
        link.href = url;
        link.onload = () => resolve();
        link.onerror = () => reject(new Error(`Failed to load CSS: ${url}`));
        document.head.insertBefore(link, document.head.firstChild);
      });
    }
 
    async function initializeGantt() {
        try {
                requirejs.config({
                    paths: {
                        "dhtmlxgantt": "/_app/static/assets/dhtmlxgantt"
                    }
                })
                await Promise.all([
                    await loadCSS("/_app/static/assets/dhtmlxgantt.css"),
                    await loadScript("dhtmlxgantt")
                ]);
                console.log("Script loaded, checking gantt object:", window.gantt);
                console.log("CSS and JS files loaded. Initializing Gantt chart...");
                gantt.init("gantt_here");
                gantt.parse({
                    data: [
                        { id: 1, text: "Project #2", start_date: "01-04-2018", duration: 18, progress: 0.4, open: true },
                        { id: 2, text: "Task #1", start_date: "02-04-2018", duration: 8, progress: 0.6, parent: 1 },
                        { id: 3, text: "Task #2", start_date: "11-04-2018", duration: 8, progress: 0.6, parent: 1 }
                    ],
                    links: [
                        {id: 1, source: 1, target: 2, type: "1"},
                        {id: 2, source: 2, target: 3, type: "0"}
                    ]
                });
        } catch (error) {
            console.error(error);
        }
    }

    // Initialize the Gantt chart
    initializeGantt();
    """
    with solara.Row() as main:
        # Include the inline script to define the loadScript function and initialize the Gantt chart
        solara.HTML(tag="script", unsafe_innerHTML=inline_script)
        # Render the main HTML structure
        solara.HTML(tag="div", unsafe_innerHTML=html)
    return main