TimelineHistogramBase

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

Record field from which the histogram data will be collected.

histogram = new TimelineHistogram({
    ...
    series : {
        s1 : {
            type : 'bar'
        }
    },
    dataModelField : 'foo',
    store : new Store({
        data : [
            {
                id   : 'r1',
                name : 'Record 1',
                foo  : [
                    { s1 : 200 },
                    { s1 : 150 },
                    { s1 : 175 },
                    { s1 : 175 }
                ]
            },
            {
                id   : 'r2',
                name : 'Record 2',
                foo  : [
                    { s1 : 100 },
                    { s1 : 150 },
                    { s1 : 175 },
                    { s1 : 175 }
                ]
            }
        ]
    })
});

Alternatively getRecordData function can be used to build a record's histogram data dynamically.

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

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

new TimelineHistogram({
    series : {
        foo : {
            type  : 'bar',
            field : 'foo'
        }
    },
    // 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 TimelineHistogram({
    getBarText(datum) {
        // "this" in the method refers core Histogram instance
        // get the view instance
        const timelineHistogram = this.owner;

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

The following parameters are passed:

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

new TimelineHistogram({
    series : {
        foo : {
            type  : 'bar',
            field : 'foo'
        }
    },
    getBarText(datum) {
        // display the value in the bar
        return datum.foo;
    },
    ...
})

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 will refer to the Histogram instance, not this class instance. To access the view please use this.owner in the function:

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

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

The following parameters are passed:

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

new TimelineHistogram({
    series : {
        foo : {
            type  : 'bar',
            field : 'foo'
        }
    },
    // display "foo" bar value as text
    getBarText(datum) {
        return datum.foo;
    },

    // Place text at the top of the "foo" bar
    getBarTextDOMConfig(domConfig, datum, index) {
        // to do that we calculate y-position in percents
        domConfig.y = `${100 * (1 - datum.foo / this.topValue)}%`;

        return domConfig;
    },
    ...
})

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

        .....

        return domConfig;
    },
    ...
})

The following parameters are passed:

A Function which returns a CSS class name to add to a path element built for an outline type series. The following parameters are passed:

A Function which if provided should return a DOM configuration object for a path element built for an outline type series. The function accepts a default prepared DOM configuration in an argument which then can be processed and returned.

The following parameters are passed to the function:

A function, or name of a function which builds histogram data for the provided record.

See also dataModelField allowing to load histogram data from a record field.

When set to true (default) the component reacts on time axis changes (zooming or changing the displayed time span), clears the histogram data cache of the records and then refreshes the view.

An instance or a configuration object of the underlying Histogram component that is used under the hood to render actual charts. In case a configuration object is provided the built class is defined with histogramWidgetClass config.

The class used for building the histogram widget

Object enumerating data series for the histogram. The object keys are treated as the series identifiers and values are objects that must contain two properties:

• type A String, either 'bar' or 'outline'
• field A String, the name of the property to use from the data objects in the data option.

histogram = new TimelineHistogram({
    ...
    series : {
        s1 : {
            type  : 'bar',
            field : 's1'
        },
        s2 : {
            type  : 'outline',
            field : 's2'
        }
    },
    store : new Store({
        data : [
            {
                id            : 'r1',
                name          : 'Record 1',
                histogramData : [
                    { s1 : 200, s2 : 100 },
                    { s1 : 150, s2 : 50 },
                    { s1 : 175, s2 : 50 },
                    { s1 : 175, s2 : 75 }
                ]
            },
            {
                id            : 'r2',
                name          : 'Record 2',
                histogramData : [
                    { s1 : 100, s2 : 100 },
                    { s1 : 150, s2 : 125 },
                    { s1 : 175, s2 : 150 },
                    { s1 : 175, s2 : 75 }
                ]
            }
        ]
    })
});

Set to true if you want to display a tooltip when hovering an allocation bar. You can also pass a Tooltip#configs config object. Please use barTooltipTemplate function to customize the tooltip contents.

Set to true to display the bar tooltip when navigating the timeaxis cells using ScheduleContext feature. The tooltip is disabled by default when navigating to make the navigation easier.

The underlying Histogram component that is used under the hood to render actual charts.

Set to true if you want to display a tooltip when hovering an allocation bar. You can also pass a Tooltip#configs config object. Please use barTooltipTemplate function to customize the tooltip contents.

Clears the histogram data cache for the provided record (if provided). If the record is not provided clears the cache for all records.

Returns entire histogram data cache if no record provided, or cached data for the provided record.

Retrieves the histogram data for the provided record.

The method first checks if there is cached data for the record and returns it if found. Otherwise it starts collecting data by calling getRecordData (if provided) or by reading it from dataModelField record field.

The method can be asynchronous depending on the provided getRecordData function. If the function returns a Promise then the method will return a wrapping Promise in turn that will resolve with the collected histogram data.

The method triggers histogramDataCacheSet event when a record data is ready.

Returns true if there is cached histogram data for the provided record.

Schedules the component rows refresh on the next animation frame. However many time it is called in one event run, it will only be scheduled to run once.

Caches the provided histogram data for the given record.