Plan view and domain objects

Plans provide a view for a list of activities grouped by categories.

Plan category and activity JSON format

The JSON format for a plan consists of categories/groups and a list of activities for each category. Activity properties include:

name: Name of the activity
start: Timestamps in milliseconds
end: Timestamps in milliseconds
type: Matches the name of the category it is in
color: Background color for the activity
textColor: Color of the name text for the activity
The format of the json file is as follows:

json

{
    "TEST_GROUP": [{
    "name": "Event 1 with a really long name",
    "start": 1665323197000,
    "end": 1665344921000,
    "type": "TEST_GROUP",
    "color": "orange",
    "textColor": "white"
    }],
    "GROUP_2": [{
    "name": "Event 2",
    "start": 1665409597000,
    "end": 1665456252000,
    "type": "GROUP_2",
    "color": "red",
    "textColor": "white"
    }]
}

Plans using JSON file uploads

Plan domain objects can be created by uploading a JSON file with the format above to render categories and activities.

Using Domain Objects directly

If uploading a JSON is not desired, it is possible to visualize domain objects of type 'plan'. The standard model is as follows:

javascript

{
    identifier: {
        namespace: ""
        key: "test-plan"
    }
    name:"A plan object",
    type:"plan",
    location:"ROOT",
    selectFile: {
        body: {
            SOME_CATEGORY: [{
                    name: "An activity",
                    start: 1665323197000,
                    end: 1665323197100,
                    type: "SOME_CATEGORY"
                }
            ],
            ANOTHER_CATEGORY: [{
                    name: "An activity",
                    start: 1665323197000,
                    end: 1665323197100,
                    type: "ANOTHER_CATEGORY"
                }
            ]
        }
    }
}

If your data has non-standard keys for start, end, type and activities properties, use the sourceMap property mapping.

javascript

{
    identifier: {
        namespace: ""
        key: "another-test-plan"
    }
    name:"Another plan object",
    type:"plan",
    location:"ROOT",
    sourceMap: {
        start: 'start_time',
        end: 'end_time',
        activities: 'items',
        groupId: 'category'
    },
    selectFile: {
        body: {
            items: [
                {
                    name: "An activity",
                    start_time: 1665323197000,
                    end_time: 1665323197100,
                    category: "SOME_CATEGORY"
                },
                {
                    name: "Another activity",
                    start_time: 1665323198000,
                    end_time: 1665323198100,
                    category: "ANOTHER_CATEGORY"
                }
            ]
        }
    }
}

Rendering categories and activities:

The algorithm to render categories and activities on a canvas is as follows:

Each category gets a swimlane.
Activities within a category are rendered within it's swimlane.
Render each activity on a given row if it's duration+label do not overlap (start/end times) with an existing activity on that row.
Move to the next available row within a swimlane if there is overlap
Labels for a given activity will be rendered within it's duration slot if it fits in that rectangular space.
Labels that do not fit within an activity's duration slot are rendered outside, to the right of the duration slot.