#aras #javascript #form

visjsGanttChartInForm.html

<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css" rel="stylesheet" type="text/css" />

<div id="visualization" style="width:100%;height:100%;"></div>
<script>

    require(["https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.js"], function (vis) {
        var container = document.getElementById('visualization');
        var groupBy = function (xs, key) {
            return xs.reduce(function (rv, x) {
                (rv[x[key]] = rv[x[key]] || []).push(x);
                return rv;
            }, {});
        };

        const projectId = document.thisItem.getID();

        let activities = aras.IomInnovator.newItem("ALS_Activity", "get");
        console.log(activities)
        activities.setAttribute("select", "abs,real_start,expected_duration,plan_start,sbs,plan_finish,name,real_finish,progress,id,projet");
        activities.setProperty("projet", projectId);
        activities = activities.apply();
        console.log(activities)
debugger;
        const activitiesArr = [];
        for (var i = 0; i < activities.getItemCount(); i++) {
            let actItem = activities.getItemByIndex(i);
            activitiesArr.push({
                id: actItem.getID(),
                ABS: actItem.getProperty("abs", ""),
                real_start: actItem.getProperty("real_start", ""),
                expected_duration: actItem.getProperty("expected_duration", ""),
                plan_start: actItem.getProperty("plan_start", ""),
                SBS: actItem.getProperty("sbs", ""),
                plan_finish: actItem.getProperty("plan_finish", ""),
                name: actItem.getProperty("name", ""),
                real_finish: actItem.getProperty("real_finish", ""),
                progress: actItem.getProperty("progress", ""),
                projet: actItem.getProperty("projet", ""),
            })
        }

        console.log(activitiesArr);

        const actSBS = groupBy(activitiesArr, "SBS");


        let groupKeys = Object.keys(actSBS);


        let n = 20;
        let graphGroups = groupKeys.map((group) => {
            return {
                id: group,
                content: group,
            }
        });


        let graphItems = activitiesArr.map((act) => {
            var date = new Date();
            date.setHours(date.getHours() + 10 * (Math.random() < 20));
            var start = new Date(date);

            date.setHours(date.getHours() + 2 + Math.floor(Math.random() * 4));
            var end = new Date(date);

            return {
                id: act.id,
                group: act.SBS,
                start: start,
                end: end,
                content: act.expected_duration,
            };
        })


        // create groups
        var groups = new vis.DataSet(graphGroups);
        var items = new vis.DataSet(graphItems);
        // Configuration for the Timeline
        var options = {};

        // Create a Timeline
        var timeline = new vis.Timeline(container, null, options);

        timeline.setGroups(groups);
        timeline.setItems(items);
    });
</script>