Date Granularity Affecting Title Widget

[Astroraf]

I am using this solution from @intapiuser: https://community.sisense.com/t5/knowledge-base/change-date-granularity-of-a-widget-using-blox/ta-p/... to try and get a widget that this BloX affects to update the title of the widget. Attached is the image of the example I am trying to achieve. So if the user picks Years or Months or Days then the title will change by Number of Orders by Years/Months/Days Respectively 

I have attempt to create code that would affect the widget title listening to dynamicGranSwap from the Action we created from the above post but to no avail. 

widget.on('ready', function(w) {
    function updateTitle(granularity) {
        let granularityLabel = {
            "years": "Year",
            "quarters": "Quarter",
            "months": "Month",
            "weeks": "Week",
            "days": "Day"
        };

        let newTitle = `Number of Orders by ${granularityLabel[granularity]}`;
        console.log("Updating Title to:", newTitle); // Debugging
        w.title = newTitle;
        w.refresh();
    }

    prism.$scope.$on("dynamicGranSwap", function(event, data) {
        console.log("Received Granularity Change:", data); // Debugging
        if (data && data.dategran) {
            updateTitle(data.dategran);
        }
    });

    updateTitle("weeks");
});

Any suggestions @DRay @Liliia_DevX @rapidbisupport @harikm007 

[DRay]

Hi @Astroraf,

Thank you for reaching out!

Full disclosure, this is an AI generated response from an internal tool. Can you let us know if it helps?

To update the title of a widget based on the selected date granularity using BloX, you can use the provided script with some adjustments. The script listens for the "dynamicGranSwap" event and updates the widget title accordingly. Here is a refined version of your script:

widget.on('ready', function(w) {
    function updateTitle(granularity) {
        let granularityLabel = {
            "years": "Year",
            "quarters": "Quarter",
            "months": "Month",
            "weeks": "Week",
            "days": "Day"
        };

        let newTitle = `Number of Orders by ${granularityLabel[granularity]}`;
        console.log("Updating Title to:", newTitle); // Debugging
        w.title = newTitle;
        w.refresh();
    }

    prism.$scope.$on("dynamicGranSwap", function(event, data) {
        console.log("Received Granularity Change:", data); // Debugging
        if (data && data.dategran) {
            updateTitle(data.dategran);
        }
    });

    updateTitle("weeks");
});

Ensure that the event "dynamicGranSwap" is correctly triggered with the appropriate data structure. The script assumes that the event data contains a property dategran which specifies the granularity selected by the user. If the event is not firing or the data structure is incorrect, you might need to verify the BloX configuration or the event setup in your dashboard.

[Astroraf]

@DRay did you just copy and paste my response? I am very confused by this response

[DRay]

Well, it does look like the AI copied your code and provided it as a response. Clearly, there is some more work to do there.

Sorry about that. I'll dig into this a bit more and get you a better response.

[Astroraf · Accepted solution]

I found a solution:

You can provide exact titles that you want to update on your side, then set a timeout so that the title updates with what you choose. 

// Holds the chosen granularity from the selected button, e.g., 'months'
const dategran = payload.dategran;
var widgetIds = payload.data.widgetToModify;

// Define title mapping
const titleMap = {
    "years": "Number of Orders by Years",
    "quarters": "Number of Orders by Quarters",
    "months": "Number of Orders by Months",
    "weeks": "Number of Orders by Weeks",
    "days": "Number of Orders by Days"
};

// Change the background color for unselected buttons
payload.widget.style.currentCard.actions.forEach(function (i) {
    i.style["background-color"] = '#D3D3D3';
});

// Change the background color for the selected button
payload.widget.style.currentCard.actions
    .filter(i => i.dategran == dategran)[0].style["background-color"] = "#f2B900";

// Redraw the BloX widget to reflect changes
payload.widget.redraw();

// For each widget in the affected list, update the granularity first
payload.widget.dashboard.widgets.$$widgets
    .filter(i => widgetIds.includes(i.oid))
    .forEach(function (widget) {
        // Change the X-axis granularity (original working code)
        widget.metadata.panels[0].items[0].jaql.level = dategran;

        // Apply changes to update granularity first
        widget.changesMade('someEvent', ['metadata', 'properties_changed']);

        // Refresh to ensure the granularity update is applied before changing the title
        widget.refresh();

        // **Ensure title updates AFTER granularity change is applied**
        setTimeout(() => {
            widget.title = titleMap[dategran] || "Number of Orders";
            widget.changesMade('title_changed');
            widget.refresh();
        }, 100); // Short delay ensures X-axis granularity update is completed first
    });

// Emit an event for further dynamic changes if needed
prism.$scope.$emit("dynamicGranSwap", { dategran: dategran });

[DRay]

Nice solution! Thank you for the update.