ResourceUtilization

A Function which returns the tooltip text to display when hovering a bar. The following parameters are passed:

A Function which returns a CSS class name to add to a rectangle element. The following parameters are passed:

A Function which if provided returns DOM configuration object for a bar (a RECT element representing a single "bar"-type value). The function accepts default prepared DOM configuration in an argument which then can be processed and returned.

new ResourceUtilization({
    // Let's add left & right margins to bars
    getBarDOMConfig(series, domConfig) {
        // margin size is 10% of the bar width
        const xMargin = 0.1 * domConfig.width;

        // adjust the bar x-coordinate
        domConfig.x += xMargin;
        // reduce the bar width respectively
        domConfig.width -= 2 * xMargin;

        // return the edited domConfig
        return domConfig;
    },
    ...
})

new ResourceUtilization({
    getBarText(datum) {
        // "this" in the method refers core Histogram instance
        // get the view instance
        const resourceUtilization = this.owner;

        .....
    },
    ...
})

The following parameters are passed:

A Function which returns the text to render inside a bar.

Here for example the provided function displays resources time left instead of allocated time

new ResourceUtilization({
    getBarText(datum) {
        const resourceUtilization = this.owner;

        // get default bar text
        let result = view.getBarTextDefault();

        // For resource records we will display the time left for allocation
        if (result && datum.resource) {

            const unit = resourceUtilization.getBarTextEffortUnit();

            // display the resource available time
            result = resourceUtilization.getEffortText(datum.maxEffort - datum.effort, unit);
        }

        return result;
    },
})

Please note that the function will be injected into the underlying Histogram component that is used under the hood to render actual charts. So this in the function will refer to the Histogram instance. To access the ResourceUtilization instance please use this.owner in the function body:

new ResourceUtilization({
    getBarText(datum) {
        // "this" in the method refers core Histogram instance
        // get the view instance
        const view = this.owner;

        .....
    },
})

The following parameters are passed:

A Function which returns a DOM configuration object for text elements.

new ResourceUtilization({
    getBarTextDOMConfig(domConfig, datum, index) {
        // change text vertical location
        domConfig.y = '10%';

        return domConfig;
    },
    ...
})

new ResourceUtilization({
    getBarTextDOMConfig(domConfig) {
        // "this" in the method refers core Histogram instance
        // get the view instance
        const resourceUtilization = this.owner;

        .....

        return domConfig;
    },
    ...
})

The following parameters are passed:

A ProjectModel instance (or a config object) to display resource allocation of.

Note: This config is mandatory.

Set to true if you want to display resources effort values in bars (for example: 24h, 7d, 60min etc.). The text contents can be changed by providing getBarText function.

The view store records wrap "real" resources and assignments. This method resolves a record to its original record resource or assignment. If the record does not wrap any record (happens for example for parent records when using TreeGroup feature) then the method returns the record itself.