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