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
Categories
- All Categories
- 1.1K Product Ideas
- 1.1K Ideas Exchange
- 1.2K Connect
- 970 Connectors
- 259 Workbench
- Cloud Amplifier
- 1 Federated
- 2.4K Transform
- 76 SQL DataFlows
- 502 Datasets
- 1.8K Magic ETL
- 2.7K Visualize
- 2.2K Charting
- 379 Beast Mode
- 21 Variables
- 487 Automate
- 104 Apps
- 379 APIs & Domo Developer
- 6 Workflows
- 22 Predict
- 6 Jupyter Workspaces
- 16 R & Python Tiles
- 319 Distribute
- 67 Domo Everywhere
- 252 Scheduled Reports
- 59 Manage
- 59 Governance & Security
- 1 Product Release Questions
- 5K Community Forums
- 37 Getting Started
- 23 Community Member Introductions
- 64 Community Announcements
- 4.8K Archive