DDX Brick: Page Filter

pwhite8

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!

GrantSmith

Hi @pwhite8 ,

You might want to look into domo.onFiltersUpdate() to do something in your brick when the filters update.

GrantSmith

Hi @pwhite8 ,

You might want to look into domo.onFiltersUpdate() to do something in your brick when the filters update.

pwhite8

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);

});

});

DDX Brick.PNG

JosephMeyers

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.

pwhite8

No I am not. I am refering standard page filters. Do you know if there are any examples of this being used?

JosephMeyers

Are the datasets you are querying wired to the app?

pwhite8

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)?

JosephMeyers

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.

BraAad

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?

BraAad

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
}