DDX Brick: Page Filter
Hi Everyone,
I have created a DDX brick which is correctly making a gauge chart however it only shows the total aggregated number and doesn't update when a page filter is applied.
Does anyone know what further code needs to be applied? I want it to update when the column DATE is applied on the page.
Thank you for your help!
Best Answer
-
Hi @pwhite8 ,
You might want to look into domo.onFiltersUpdate() to do something in your brick when the filters update.
**Was this post helpful? Click Agree or Like below**
**Did this solve your problem? Accept it as a solution!**0
Answers
-
Hi @pwhite8 ,
You might want to look into domo.onFiltersUpdate() to do something in your brick when the filters update.
**Was this post helpful? Click Agree or Like below**
**Did this solve your problem? Accept it as a solution!**0 -
Thanks so much @GrantSmith. how does this need to be applied? the documentation doesnt give any examples so not sure how to get it to work. I tried this but when using the filter it says NaN on the chart.
var domo = window.domo;
var datasets = window.datasets;// pass in dataset0
domo.get(data/v1/${datasets[0]}
)
.then(function (data) {
// Function to calculate the sum of an array of objects' property
function calculateSumOfProperty(arrayOfObjects, property) {
return arrayOfObjects.reduce((acc, curr) => acc + curr[property], 0);
}// Calculate the sum of "On Time"
const sumOnTime = calculateSumOfProperty(data, "On Time");
// Calculate the sum of "Planned"
const sumPlanned = calculateSumOfProperty(data, "Planned");
// Calculate the ratio of "On Time" to "Planned"
const punctuality = sumOnTime / sumPlanned;
// Set the punctuality value to the gauge chart
const gaugeValueElement = document.getElementById("gaugeValue");
const gaugeFillElement = document.getElementById("gaugeFill");
const percentage = Math.min(Math.max(punctuality * 100, 0), 100);
gaugeValueElement.textContent = `${percentage.toFixed(1)}%`;
gaugeFillElement.style.transform = `rotate(${1.8 * percentage}deg)`;
// Set the color of gaugeFillElement based on the percentage value
if (percentage >= 92) {
gaugeFillElement.style.backgroundColor = "#008B00";
} else if (percentage >= 87) {
gaugeFillElement.style.backgroundColor = "#FFA500";
} else {
gaugeFillElement.style.backgroundColor = "#FF0000";
}
// Set the "On Time / Planned" text below the gauge chart
const onTimePlannedTextElement = document.getElementById("onTimePlannedText");
onTimePlannedTextElement.textContent = `${sumOnTime} / ${sumPlanned}`;
// Function to update the filter
function updateDataWithFilter(data) {
const filteredData = data.filter((item) => {
const filterValue = data.filters.find((filter) => filter.column === "SERVICE_DATE");
return item.SERVICE_DATE === filterValue.value;
});
// Recalculate the sum of "On Time" and "Planned" for the filtered data
const sumOnTimeFiltered = calculateSumOfProperty(filteredData, "On Time");
const sumPlannedFiltered = calculateSumOfProperty(filteredData, "Planned");
// Calculate the ratio of "On Time" to "Planned" for the filtered data
const punctualityFiltered = sumOnTimeFiltered / sumPlannedFiltered;
// Update the gauge chart with the filtered data
const percentageFiltered = Math.min(Math.max(punctualityFiltered * 100, 0), 100);
gaugeValueElement.textContent = `${percentageFiltered.toFixed(1)}%`;
gaugeFillElement.style.transform = `rotate(${1.8 * percentageFiltered}deg)`;
// Set the color of gaugeFillElement based on the percentage value of the filtered data
if (percentageFiltered >= 92) {
gaugeFillElement.style.backgroundColor = "#008B00";
} else if (percentageFiltered >= 87) {
gaugeFillElement.style.backgroundColor = "#FFA500";
} else {
gaugeFillElement.style.backgroundColor = "#FF0000";
}
// Set the "On Time / Planned" text below the gauge chart for the filtered data
onTimePlannedTextElement.textContent = `${sumOnTimeFiltered} / ${sumPlannedFiltered}`;
}
// Attach the filter update event handler
domo.onFiltersUpdate(function (data) {
// Call the function to update data with the filter
updateDataWithFilter(data);
});});
0 -
Are you referring to the quick filter drop down in the top right? That does not support custom apps you will want to use the standard page filters.
0 -
No I am not. I am refering standard page filters. Do you know if there are any examples of this being used?
0 -
Are the datasets you are querying wired to the app?
0 -
yes they are. if i apply a page filter with the column there is no impact on the card. Grant mentioned you need to do something with domo.onFiltersUpdate() within the script. Do you know if there are any examples of this being used (the documentation doesnt give any examples)?
0 -
Sorry for such a late response but onFiltersUpdate is used to suppress the filter change from refreshing the app and then you will have to code what those filters will do in your app. If you just want the app to reflect the standard page filters and if the dataset being filtered is wired to the app it should reflect any changes to the page filters.
0 -
you will have to code what those filters will do in your app
And how do we get the chart to refresh after we have coded what those filters will do in our app?
0 -
So I have finally figured this out, I'm going to add it here because I couldn't find a clear answer anywhere on the web. The secret seemed to be resetting the innerHTML of the chart to empty so it will actually re-render. This really should be in the documentation somewhere.
domo.onFiltersUpdate((filters) => { //custom logic to react to filters fetchData().then(function(data){ chartIt(data); } } function fetchData(){ return return domo.get(); } function chartIt(){ //This here is the important bit document.getElementById('chart').innerHTML = ''; //all the normal logic for rendering the chart }
0
Categories
- All Categories
- 1.8K Product Ideas
- 1.8K Ideas Exchange
- 1.6K Connect
- 1.2K Connectors
- 300 Workbench
- 6 Cloud Amplifier
- 9 Federated
- 2.9K Transform
- 101 SQL DataFlows
- 622 Datasets
- 2.2K Magic ETL
- 3.9K Visualize
- 2.5K Charting
- 748 Beast Mode
- 60 App Studio
- 41 Variables
- 688 Automate
- 177 Apps
- 453 APIs & Domo Developer
- 48 Workflows
- 10 DomoAI
- 36 Predict
- 15 Jupyter Workspaces
- 21 R & Python Tiles
- 397 Distribute
- 114 Domo Everywhere
- 276 Scheduled Reports
- 7 Software Integrations
- 126 Manage
- 123 Governance & Security
- 8 Domo Community Gallery
- 38 Product Releases
- 10 Domo University
- 5.4K Community Forums
- 40 Getting Started
- 30 Community Member Introductions
- 109 Community Announcements
- 4.8K Archive