Add tooltip page in ChicletSlicer?

[Marcos1995]

Hi!

I'm new in the community and I would like to know if it's possible add the tooltip page functionality.

I know it's possible in bar and column charts but I don't know if it is in slicers.

I'm new in Typescript and the complexity is a bit too high for me at the moment (the custom visual)

I got to add the funcionality as it's displayed in Power BI and I can choose the tooltip page too, but it's not working because the code that displays the "canvas" uses what is called "barContainer" in all examples and, in this specific case, it does not exist and I don't know how to emaulate it.

this.tooltipServiceWrapper.addTooltip(this.barContainer.selectAll('.bar'),
(tooltipEvent: TooltipEventArgs<number>) => BarChart.getTooltipData(tooltipEvent.data),
(tooltipEvent: TooltipEventArgs<number>) => null);

The class "bar" is not set I believe,

I've been searching a lot of documentation but I don't know how to make it work.

https://microsoft.github.io/PowerBI-visuals/docs/how-to-guide/adding-report-page-tooltips/

https://microsoft.github.io/PowerBI-visuals/docs/how-to-guide/adding-tooltips/

I believe it has to be possible but I don't know how.

Could you help me?

Thanks in advance!

[v-viig]

You just need to add "tooltips" into capabilities.json as shown here.

An additional step is to pass a SelectionId to tooltipService or tooltipServiceWrapper.

What are you using? tooltipService or tooltipServiceWrapper?

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[Marcos1995]

Thanks for your answer @v-viig.

I added the "tooltips" into capabilities.json and in the PBI chicletSlicer "Format" options is beign shown but it's not working yet.

I want to use the tooltip page functionality but I'm not sure which one of these two (tooltipService or tooltipServiceWrapper) I do have to use.

Could you tell me with which one can I achieve my purpose? Also how can I pass the SelectionId correctly? The examples are for bar graphs but I don't have the same properties and neither their values. I tried to emulate it by copying/pasting but nothing was achieved.

I highlighted the missing properties in the existing code:

this.tooltipServiceWrapper.addTooltip(this.barContainer.selectAll('.bar'),

    (tooltipEvent: TooltipEventArgs<BarChartDataPoint>) => this.getTooltipData(tooltipEvent.data),

    (tooltipEvent: TooltipEventArgs<BarChartDataPoint>) => tooltipEvent.data.selectionId

);

I created a barContainer property like as this custom visual example, but it's a graph and I face many problems to replicate it.

I added the BarChartDataPoint interface also.

Which should be my next step?

Thank you

[v-viig]

I think you can use slicerBody.selectAll(ChicletSlicer.ItemContainerSelector.selector) instead of this.barContainer.selectAll('.bar').

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[Marcos1995]

Thanks @v-viig 

I applied it but nothing appears, I guess that I have to change something in these 3 lines of code.

I'm sorry but even though I try to understand it and fix it I can't.

this.tooltipServiceWrapper.addTooltip(this.slicerBody.selectAll(ChicletSlicer.ItemContainerSelector.selector),
                (tooltipEvent: TooltipEventArgs) => this.getTooltipData(tooltipEvent.data),
                (tooltipEvent: TooltipEventArgs) => tooltipEvent.data.selectionId
            );

interface BarChartDataPoint {
        value: PrimitiveValue;
        category: string;
        color: string;
        strokeColor: string;
        strokeWidth: number;
        selectionId: ISelectionId;
    };

private getTooltipData(value: any): VisualTooltipDataItem[] {
            let language = getLocalizedString(this.locale, "LanguageKey");
            return [{
                displayName: value.category,
                value: value.value.toString(),
                color: value.color,
                header: language && "displayed language " + language
            }];
        }

What do I have to fix?

Thanks in advance.

[chatin]

I am facing the same challenge. Did you manage to do it?