Forum Discussion

Anonymous's avatar
Anonymous
Not applicable
1 year ago
Solved

Issue with Bar Graph Interaction in powerbi-client-vue-js SDK (Vue 3)

Hello There,

Trust you are doing well.

 

I'm currently facing an issue while integrating the powerbi-client-vue-js SDK into our Vue.js 3 application. Specifically, I'm rendering a dashboard report that includes various visuals such as bar graphs, line graphs, and pie charts.

The problem arises when interacting with the bar graph. Upon clicking anywhere within the bar graph window, the following error is thrown:

 

{

message: 'Invoked filter serialization function with no filter.'

}

 

Interestingly, this issue does not occur with the line graph, which functions as expected when clicked.

I have explored multiple approaches and combinations to resolve this issue, including downgrading the SDK version via npm, but unfortunately, none have been successful so far.

 

For your reference, I have attached relevant code snippets that demonstrate how I'm embedding and interacting with the Power BI visuals.

 

Please let me know if any additional details or diagnostics are required from my side to help investigate this issue further.

Looking forward to your guidance and support.

 

Thanks in advance.

Console Line Graph With No Error:


Console BarGraph With Error:

 

 

Code Snippet:




const eventHandlersMap = ref<Map<string, EventHandler>>(
  new Map([
    [
      'loaded',
      (event, embeddedEntity) => {
        pbiEmbed.value = embeddedEntity
        embeddedReport.value = event?.detail
      }
    ],
    [
      'rendered',
      async (event: any) => {
        // get report pages of the report
        let pbiEmbed = event.target.powerBiEmbed as Report
        embeddedReport.value = event?.detail
        isLoadedReport.value = true
        let pages = await pbiEmbed?.getPages()

        // get the current active page
        let currentPage = pages?.filter((page) => page.isActive)[0]

        // get the visuals on the page
        let visuals = await currentPage?.getVisuals()

        // find the slicer visuals in the page visuals
        let slicers = visuals?.filter((visual) => visual.type === 'slicer')

        // if there are no slicers, export the report without slicer filters
        if (!slicers) {
          return
        }

        // create an list of all the slicer states using the getSlicerState method
        let slicerStates: models.ISlicerState[] = await Promise.all<models.ISlicerState>(
          slicers.map((slicer) => slicer.getSlicerState())
        )
        const parameterObj = slicerStates
          .map((item) => {
            const filter = item.filters[0] // Assuming each `filters` array contains at most one filter

            if (filter) {
              if ('values' in filter && 'target' in filter) {
                if ('column' in filter.target) {
                  const name = `${filter.target.table.toUpperCase()}_${filter.target.column.toUpperCase()}_${filter.operator.toUpperCase()}`
                  // It's a BasicFilter
                  return filter.values.map((val) => ({
                    name: name,
                    value: val // Using the first value in the values array
                  }))
                }
              } else if (
                'conditions' in filter &&
                'table' in filter.target &&
                'column' in filter.target
              ) {
                // It's an AdvancedFilter
                const name = `${filter.target.table}_${filter.target.column}`
                const conditions = filter.conditions || []
                return conditions.map((condition) => {
                  return {
                    name: `${name.toUpperCase()}_${condition.operator.toUpperCase()}`,
                    value: new Date(condition.value as string | number | Date)
                      .toISOString()
                      .split('T')[0]
                  }
                })
              }
            }
            return null // In case there is no filter or it's not handled
          })
          .flat()
          .filter((param) => param !== null) // Filter out null values

        parameterObj.push({
          name: 'TENANT_ID',
          value: props.tenantId ?? ''
        })

        parameterValues = parameterObj
          .filter((item): item is { name: string; value: ParameterValue } => item !== undefined)
          .map((item) => ({
            name: item.name,
            value: String(item.value) // Convert value to string
          }))
      }
    ],
    [
      'error',
      (error) => {
        console.error(error?.detail.message)
        isError.value = true
        isEmbedded.value = false
        isLoading.value = false
      }
    ]
  ])
)

 

Need Help
Tips and Tricks
  • v-dineshya's avatar
    v-dineshya
    1 year ago

    Hi Anonymous ,

    Thank you for reaching out to the Microsoft Community Forum.

     

    This appears to be triggered only when clicking the bar graph, meaning the bar chart's click interaction is not sending a valid filter payload.

    Root cause:

    In Power BI visual interactions (like clicking a bar): Power BI tries to serialize the filter(s) applied due to that interaction. If the filter object is empty, malformed, or undefined, this message is logged.

    Your handler expects that getSlicerState() always returns slicers with valid filters, but clicking a visual like a bar chart is not a slicer action, and may trigger interaction events without any filter (especially if cross-filtering is disabled or no filter context is applied).

    Please Check below things.

    1. Check for empty filters before processing

    In your 'rendered' event, ensure you check for existence of filters before processing:

    2. Visual Interactions vs. Slicer State

    You're triggering slicer state serialization inside a rendered event. But this event doesn't correlate to bar chart clicks.

    To handle clicks on any visual, especially a bar chart, you'll need to attach a different event handler such as dataSelected or visualClicked.

    3. Safe Fallback for Missing Filters

    Ensure your getSlicerState() logic won’t break if the visual isn’t a slicer, or returns no filters.

     

    Please refer below Microsoft article.

    How to embed Power BI content in a Vue app | Microsoft Learn

     

    If my response has resolved your query, please mark it as the "Accepted Solution" to assist others. Additionally, a "Kudos" would be appreciated if you found my response helpful.

    Thank you

     

3 Replies

  • v-dineshya's avatar
    v-dineshya
    Community Support
    1 year ago

    Hi Anonymous ,

    Thank you for reaching out to the Microsoft Community Forum.

     

    This appears to be triggered only when clicking the bar graph, meaning the bar chart's click interaction is not sending a valid filter payload.

    Root cause:

    In Power BI visual interactions (like clicking a bar): Power BI tries to serialize the filter(s) applied due to that interaction. If the filter object is empty, malformed, or undefined, this message is logged.

    Your handler expects that getSlicerState() always returns slicers with valid filters, but clicking a visual like a bar chart is not a slicer action, and may trigger interaction events without any filter (especially if cross-filtering is disabled or no filter context is applied).

    Please Check below things.

    1. Check for empty filters before processing

    In your 'rendered' event, ensure you check for existence of filters before processing:

    2. Visual Interactions vs. Slicer State

    You're triggering slicer state serialization inside a rendered event. But this event doesn't correlate to bar chart clicks.

    To handle clicks on any visual, especially a bar chart, you'll need to attach a different event handler such as dataSelected or visualClicked.

    3. Safe Fallback for Missing Filters

    Ensure your getSlicerState() logic won’t break if the visual isn’t a slicer, or returns no filters.

     

    Please refer below Microsoft article.

    How to embed Power BI content in a Vue app | Microsoft Learn

     

    If my response has resolved your query, please mark it as the "Accepted Solution" to assist others. Additionally, a "Kudos" would be appreciated if you found my response helpful.

    Thank you

     

    • v-dineshya's avatar
      v-dineshya
      Community Support
      1 year ago

      Hi Anonymous ,

      If my response has resolved your query, please mark it as the "Accepted Solution" to assist others. Additionally, a "Kudos" would be appreciated if you found my response helpful.

      Thank you

    • Anonymous's avatar
      Anonymous
      Not applicable
      1 year ago

      Hi v-dineshya - Thanks for your support and prompt response. It did help me to identify the problem.