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!

Tagged:

Best Answer

  • GrantSmith
    GrantSmith Coach
    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!**

Answers

  • GrantSmith
    GrantSmith Coach
    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!**
  • pwhite8
    pwhite8 Member
    edited August 2023

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

    });

  • JosephMeyers
    JosephMeyers Contributor
    edited August 2023

    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.

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

  • Are the datasets you are querying wired to the app?

  • 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
    JosephMeyers Contributor

    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.