TimelineHistogramBase

Abstract

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.

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 }
                ]
            }
        ]
    })
});