withCustomDecorator()

Home > @gooddata/sdk-ui-dashboard > IDashboardKpiCustomizer > withCustomDecorator

IDashboardKpiCustomizer.withCustomDecorator() method

Register a factory for insight decorator providers.

Signature:

withCustomDecorator(providerFactory: (next: KpiComponentProvider) => OptionalKpiComponentProvider): IDashboardKpiCustomizer;

Parameters

Parameter	Type	Description
providerFactory	(next: KpiComponentProvider) => OptionalKpiComponentProvider	factory

Returns:

IDashboardKpiCustomizer

Remarks

Decorators are a way to add customizations or embellishments on top of an existing component. Decorators are more complex to write because they need to work with the component they should decorate and add 'something' on top of that component.

This is best illustrated on an example:

Example

withCustomDecorator((next) => {
    return (kpi, widget) => {
        if (some_condition_to_prevent_decoration) {
            return undefined;
        }

        function MyCustomDecorator(props) {
             const Decorated = next(kpi, widget);

             return (
                 <div>
                     <p>My Custom Decoration</p>
                     <Decorated {...props}/>
                 </div>
             )
        }

        return MyCustomDecorator;
    }
})

The above shows how to register a decorator that will use some condition to determine whether particular insight is eligible for decoration. If yes, it will add some extra text in front of the insight. Decorator defers rendering of the actual insight to the underlying provider.

Note: the factory function that you specify will be called immediately at the registration time. The provider that it returns will be called at render time.