Power BI is turning 10, and we’re marking the occasion with a special community challenge. Use your creativity to tell a story, uncover trends, or highlight something unexpected.
Get startedJoin us for an expert-led overview of the tools and concepts you'll need to become a Certified Power BI Data Analyst and pass exam PL-300. Register now.
Hi,
I am creating a custom date range selector using a React component. I have confirmed that my component correctly passes a start and end date, which I then use to create an array of dates that I want to filter my data with in Power BI.
When I run my visual in PBI Service and select my data range I see no change the data I am trying to filter. It leads me to believe I am apply the fillter incorrectly. I searched and tried a lot of different approaches but still haven't gotten it to work.
Does any one know what I am doing wrong? Any suggestions are greatly appreciated.
private handleSliderChange = (range: [number, number]) => {
//Error handling
if (!range || range.length !== 2 || typeof range[0] === 'undefined' || typeof range[1] === 'undefined') {
return;
}
//Gets start and end date from React component and creates and contiguous array of dates from start to end date
const startDate = new Date(range[0]);
const endDate = new Date(range[1]);
const contiguousDates: Date[] = [];
for (let d = new Date(startDate); d <= endDate; d.setDate(d.getDate() + 1)) {
contiguousDates.push(new Date(d));
}
//Gets Power BI table and column names for filter
const table = categories.source.queryName.substring(0, categories.source.queryName.indexOf('.'))
const colum = categories.source.displayName
//formats array of dates
const values = contiguousDates.map(date => date.toISOString());
//Defines basic filter
const basicFilter: models.IBasicFilter = {
$schema: "https://powerbi.com/product/schema#basic",
filterType: models.FilterType.Basic,
target: {
table: table,
column: colum
},
operator: "In",
values: values
};
//applies filter
this.visualHost.applyJsonFilter(basicFilter, "general", "Filter", powerbi.FilterAction.merge);
};