Front-end filtering with #CodePenChallenge and WebDataRocks

Hi folks!

As the new month approaches, the new CodePen challenge is announced! This time, the tasks will focus on scrolling.

But in this post, I want to share with you the results of May's CodePen challenge - Filter themed!

So for each week, participants were challenged to try front-end filtering, using techniques from CSS, JavaScript, and SVG.

And here are our results! As always, we use WebDataRocks as the base and CodePen tasks as an inspiration.

Week 1 CSS filter

The CSS filter in this CodePen applies a blur effect to certain cells in the WebDataRocks Pivot Table and turns it off based on user interaction. Let's break down how it works:

1. CSS Code:
   • The CSS code defines a class called "hidden" which applies a filter: blur(2.5px) property. This property applies a blur effect to elements with this class.
   • The filter property in CSS is used to apply visual effects like blur, grayscale, etc., to elements.

#wdr-pivot-view #wdr-grid-view div.hidden {
  filter: blur(2.5px);
}

1. JavaScript Code:
   • The JavaScript code defines an event listener for the "cellclick" event on the pivot table.
   • When a cell is clicked, the event listener updates the visibleNumber object with the index of the clicked cell's row and column.
   • The pivot.customizeCell() method is used to customize the appearance of cells in the pivot table.
   • Within the customizeCell function:
     • It checks if the cell type is "value", meaning it contains numerical data.
     • It ensures the cell is not a drill-through cell (a cell that can be clicked to view more detailed data).
     • It checks if the cell is a grand total column (a total calculated across all rows for a specific column).
     • It applies the "hidden" class to cells that are grand total columns and do not match the clicked cell's row and column indexes.

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

1. How it Works:
   • When a user clicks on a cell in the pivot table, the event listener captures the row and column indexes of the clicked cell and defines that cell as visible.
   • After that, the customizeCell function iterates through all cells in the pivot table.
   • If a cell meets the criteria (being a grand total column and not matching the clicked cell's row and column indexes), it applies the "hidden" class, which in turn applies a blur effect to those cells.

In summary, this implementation allows users to selectively apply and remove a blur effect to certain cells in the WebDataRocks pivot table based on their interactions.

Week 2 JavaScript filter

Here, the JavaScript function customizes the the Toolbar of WebDataRocks by removing a specific tab, the "Connect" tab, from the the Toolbar. Let's break down how it works:

1. customizeToolbar Function:

   • This function is called to customize the the Toolbar.
   • It takes the toolbar object as a parameter, which represents the the Toolbar of the pivot table.

2. Get Existing Tabs:

   • The getTabs() method of the toolbar object retrieves an array of tabs currently present in the the Toolbar.

3. Filtering Tabs:

   • The filter() method is called on the array of tabs retrieved from getTabs().
   • Within the filter function, each tab is checked to see if its id is not equal to "wdr-tab-connect".
   • If the tab's id is not "wdr-tab-connect", it is included in the filtered array, effectively removing the "Connect" tab from the toolbar.

4. Return Filtered Tabs:

   • After filtering, the function returns the modified array of tabs, which no longer includes the "Connect" tab.

5. Integration with WebDataRocks:

   • This function needs to be integrated with the WebDataRocks pivot table by assigning it to the beforetoolbarcreated property of the WebDataRocks configuration object.

Example:

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

Week 3 SVG filter

Actually... We didn't come out with a good idea of how to apply this to WebDataRocks, so we just skipped the week(

But maybe you can help! If you have any ideas on how we could implement an SVG filter with the component - share them in the comments below.

Week 4 Filter Fest!

The challenge is finding a way to combine as many filter types as possible in a single Pen.

We used this opportunity to create a cute demo explaining all our filters available in WebDataRocks out-of-the-box.

To sum up...

And that's all the creations of the previous month! You can check and play with all the pens, fork them, and try to build something on them. And I will go drink some filter and take a break) Till next month!