Dynamic filtering and embedding tooltips in Sisense dashboards

[Vadim_Pidgornyi]

Dynamic filtering and embedding tooltips in Sisense dashboards

---

Overview

This solution enhances Sisense dashboards by introducing dynamic filtering and embedding visual insights directly within tooltips. It allows users to quickly explore related data without navigating to a different screen, making data analysis faster and more intuitive. Supported by various types of charts: Line chart, Column chart, Bar chart, Pie chart.

---

ALT text: A bar chart displaying data for "Total Cost of Admission" in a healthcare context. The chart compares costs for "Cardiology" and "Emergency Room" services across the years 2011, 2012, and 2013. The year 2011 has a bar for Cardiology at approximately 2 million and a higher bar for Emergency Room around 3.5 million. 2012 is not depicted, and 2013 shows substantial increases for both categories, with Cardiology around 3 million and Emergency Room approximately 4 million. A tooltip highlights specific values when hovering over the chart.

How to Set It Up

1. Prepare the Target Dashboard

   • Create a new dashboard with a single widget. This widget will display the filtered data relevant to the user’s interaction.
   • Ensure this dashboard focuses on specific details you want to highlight (e.g., sales by region or category, date).

2. Add the Script to the Source Dashboard

   • On the dashboard where you want to enable this functionality:
     1. Go into Edit Mode for the widget where tooltips will show embedded insights.
     2. Click the three dots on the widget, then select Edit Script.
     3. Replace the script logic with the provided code and update the following:
        • Widget ID: The ID of the widget you’re editing.
        • Dashboard ID: The ID of the target dashboard (created in Step 1).
        • Number of Filters: Define how many filters you want to pass to the target dashboard.

3. Adjust the Filters List

   • Filters are passed to the target dashboard in the order they appear in the source dashboard’s filter list.
   • If specific filters are critical (e.g., date or region), move them to the beginning of the filters list in the source dashboard.

4. Test the Configuration

   • Interact with the widget in the source dashboard to ensure the tooltip displays the filtered target dashboard correctly and includes the desired filters.

Spoiler

Script

const widgetId = '677fe9fa41f20c00334a7fe7';
const dashboardId = '677fe9fa41f20c00334a7fe6';

const IFRAME_WIDTH = "320px";
const IFRAME_HEIGHT = "290px";
const MARGIN = "5px";

let category = null;
const internalHttp = prism.$injector.get('base.factories.internalHttp');

widget.on('beforedatapointtooltip', function (se, ev) {
const dashboardUrl = `http://10.176.10.210:30845/app/main/dashboards/${dashboardId}/widgets/${widgetId}`;
const redrawYN = category !== ev.context.category;

// Determine category (date or non-date)
const isDate = typeof ev.context.pointScope?.options?.selectionData?.[0] === 'object';
category = isDate ? new Date(`${ev.context.category}`).toISOString() : ev.context.category;

if (!redrawYN) return;

let filtersArray = [];

// Add the category filter
let categoryFilterPanel = {
...ev.widget.metadata.panels[0].items[0].jaql,
filter: {
explicit: true,
members: [category],
multiSelection: true
}
};
filtersArray.push({ jaql: categoryFilterPanel });

let filterIndex = 0;
while (dashboard.filters && dashboard.filters.item(filterIndex)) {
const filter = dashboard.filters.item(filterIndex);
const filterPanel = {
...filter.jaql,
filter: {
...filter.jaql.filter,
multiSelection: true,
explicit: true
}
};
filtersArray.push({ jaql: filterPanel });
filterIndex++;
}

internalHttp({
url: `/api/dashboards/${dashboardId}`,
method: 'PUT',
contentType: 'application/json',
data: JSON.stringify({ filters: filtersArray })
})
.then(() => console.log('Filters updated successfully.'))
.catch(error => console.error('Error updating filters for dashboard:', dashboardId, error));

ev.template = `<div style="margin: ${MARGIN};">
<iframe
width="${IFRAME_WIDTH}"
height="${IFRAME_HEIGHT}"
frameborder="0"
src="${dashboardUrl}?embed=true&r=false">
</iframe>
</div>`;
});

---

How It Works

1. User Interaction: When a user hovers over a data point, the script identifies the category or value of interest (e.g., region, date).
2. Dynamic Filters: The selected category is passed as a filter to the target dashboard and other relevant filters from the source dashboard.
3. Embedded View: The tooltip contains a mini, interactive version of the target widget, which provides detailed insights without requiring navigation.

---

Where to Use It

• Sales Analysis: Hover over a region in a chart to view detailed sales figures for that region.
• Inventory Management: Quickly drill down into stock levels for a selected category.
• Customer Insights: See detailed demographic or behavior data tied to a selected group.
• Operational Monitoring: Provide instant access to system or process metrics based on high-level dashboard interactions.

---

Benefits

• Streamlined Navigation: No need to switch between dashboards manually.
• Enhanced User Experience: Users access detailed data quickly and visually.
• Context Preservation: Filters maintain the relevance of displayed data.
• Improved Decision-Making: Faster access to insights enables quicker actions.

---

Important Notes

• Ensure the target dashboard is optimized to display relevant data for the selected category.
• Filters passed to the target dashboard are processed in order, so prioritize essential filters by moving them to the top of the list.
• Users should test thoroughly to confirm all filters are passed correctly and that the embedded tooltip displays as expected.
• The tooltip may take a few seconds to load as it is a separate dashboard.
• Only one category is passed to the target dashboard

---

This approach transforms Sisense dashboards, making them interactive and insightful while maintaining simplicity for users. 

Please note the solution provided is without official support from the Sisense side.