Level Up Your Data with Filters: Inspired by #CodepenChallange

TutorialWeb development

Every month, CodePen organizes a challenge for individuals to showcase their creative abilities through mini-projects. If you haven’t checked out the previous challenge yet, don’t miss this fantastic opportunity! Take a look at our past pens, such as one focused on “How to Use Pivot Tables to Create Web Reports in Different Styles” and another where we delved into creating stunning “Bubble Text.”

With the new month on the horizon, a fresh CodePen challenge has been unveiled! This time, the challenge revolved around Filters.

What is Filtering and its Function in Front-End?

Let’s start with what filters are and why they’re important. 

Filtering allows users to narrow down a large dataset to find specific information quickly and efficiently. In front-end development, filtering techniques are implemented using JavaScript and CSS to manipulate data displayed on a web page without requiring additional requests to the server. This approach offers several advantages:

• Enhanced User Experience: Front-end filtering provides a smoother and more responsive user experience by instantly updating the displayed data based on user interaction. This is because filtering happens on the user’s device, eliminating the need to wait for server responses.
• Reduced Server Load: By handling filtering on the front end, you can significantly reduce the load on your server, especially when dealing with large datasets. Only the filtered data needs to be rendered and visualized in the browser, minimizing the amount of data transferred between the server and the client.

It’s important to consider a few factors when implementing front-end filtering:

• Data Size: Front-end filtering might not be suitable for very large datasets. Complex filtering operations on massive amounts of data can lead to performance issues in the browser.
• Security: When dealing with sensitive data, it’s crucial to perform the filtering on the back-end server. This ensures that sensitive information is not exposed or manipulated on the client-side (user’s browser).

If you’re looking to improve the way users interact with your data, consider incorporating front-end filtering techniques into your next project!  

Let’s now dive into our challenge. Throughout the month, each week presented a new opportunity for participants to experiment with front-end filtering, employing various methods, including CSS, JavaScript, and SVG.

Below, we proudly present our results! Consistently, WebDataRocks is our foundational tool, and CodePen tasks are our inspiration.

Week 1. CSS filter

In this CodePen example, a blur effect is applied to specific cells in the WebDataRocks Pivot Table through CSS, toggling this effect based on user interaction. Here’s a breakdown of how it operates:

Adding a Blur Effect with CSS

This is how to create a blurred element using CSS. We’ll achieve this with a class and a special filter property.

• The ‘hidden’ Class: We’ll define a CSS class named hidden that applies the blur effect.
• The ‘filter: blur()’ Property: The property is responsible for creating the blur effect. The value following blur() determines the intensity of the blur. In our case, it’s set to 2.5px, which creates a moderate blur effect.

#wdr-pivot-view #wdr-grid-view div.hidden {

  filter: blur(2.5px);

}

JavaScript implementation.

The JavaScript snippet establishes an event handler for the “cellclick” event on the pivot table. Upon clicking a cell, this handler records the row and column indexes of that cell into the visibleNumber object. The pivot.customizeCell() function is then employed to tailor the cell’s display within the pivot table. Specifically, within the customizeCell routine, it:

• Verifies if the cell is of type “value,” indicating it holds numeric data.
• Confirms that the cell isn’t designed for drill-through actions (cells that can be expanded to reveal more data).
• Determines whether the cell represents a grand total for a column (the aggregate of all rows in a column).
• Conceals cells in grand total columns that don’t correspond to the indexes of the selected cell.

const visibleNumber = {
  rowIndex: undefined,
  columnIndex: undefined
}

pivot.on("cellclick", (cell) => {
  visibleNumber.rowIndex = cell.rowIndex;
  visibleNumber.columnIndex = cell.columnIndex;
  pivot.refresh();
});

pivot.customizeCell((cellBuilder, cellData) => {
  if (cellData.type == "value" &&
    !cellData.isDrillThrough &&
    cellData.isGrandTotalColumn &&
    !(cellData.rowIndex == visibleNumber.rowIndex &&
      cellData.columnIndex == visibleNumber.columnIndex)) {
    cellBuilder.addClass("hidden");
  }
});

Here’s what happens:

• Upon a user’s click on a cell within the pivot table, the event listener seizes the row and column indexes of the selected cell and marks it as visible. 
• Subsequently, the customizeCell function sweeps through all cells present in the pivot table. 
• If a cell meets the condition of being a grand total column and does not align with the row and column indexes of the clicked cell, it is assigned the “hidden” class. This class triggers a blur effect on these specific cells.

In short, clicking a cell in a pivot table lets you explore your data in more detail by temporally removing the blur effect on specific cells within the WebDataRocks pivot table through their interactions.

Week 2. JavaScript filter

In this scenario, the JavaScript function is tailored to enhance the WebDataRocks Toolbar by specifically eliminating the “Connect” tab. Let’s delve into its functionality:

• customizeToolbar Function: This function is invoked to customize the Toolbar, requiring the Toolbar object as a parameter that signifies the pivot table’s Toolbar.
• Retrieve Existing Tabs: The getTabs() method of the Toolbar object obtains an array containing all current tabs within the Toolbar.
• Tab Filtering Process: The filter() method is applied to the array of tabs retrieved through getTabs(). Within the filter function, each tab undergoes a check to determine if its id does not match “wdr-tab-connect”. Tabs failing this check are included in the filtered array, thus eliminating the “Connect” tab from the Toolbar.
• Provide Filtered Tabs: Following the filtration process, the function yields the updated array of tabs excluding the “Connect” tab.
• Integration with WebDataRocks: This function can be assigned to the beforetoolbarcreated property within the WebDataRocks configuration object to achieve seamless integration with the WebDataRocks pivot table.

Example:

var pivot = new WebDataRocks({
    container: "#wdr-component",
    toolbar: true,
    width: "100%",
    height: 350,
    width: 850,
    beforetoolbarcreated: customizeToolbar,
    report: {...}});

Week 3: SVG Filters on Hold

We explored using SVG filters with WebDataRocks but didn’t quite decided on he purpose and the implementation code this week. If you have any ideas on how to make this work, we’d love to hear them!

Week 4. Filter Fest!

The last week was all about combining different filter effects! We created a special demo to showcase the variety of filtering options available in WebDataRocks.

We understand how powerful filters can be for data analysis which is why we ensured WebDataRocks supports three key filter types: 

• Filtering by member names: Want to focus on specific data points? This filter type allows you to display the values of specific members within your data.
• Filtering by values (Top/Bottom X): Identify trends or outliers with this filter. Use it to keep only records that fall within a specified range, such as those with values higher or lower than a certain number.
• A report filter: Take control of your entire report’s data with this filter. Apply it to control what data is displayed across your entire web report.

For more details on filtering in the pivot table, check out our comprehensive documentation and our article ‘Reporting tips & tricks: filtering explained’.

Wrapping Up

That’s a look back at our filter explorations this month! Feel free to check out the demos, experiment with the code, and build something creative!