DEV Community: Juliia Nikitina

Front-end filtering with #CodePenChallenge and WebDataRocks

Juliia Nikitina — Mon, 10 Jun 2024 08:30:37 +0000

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:

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

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

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:

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.
Get Existing Tabs:
- The getTabs() method of the toolbar object retrieves an array of tabs currently present in the the Toolbar.
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.
Return Filtered Tabs:
- After filtering, the function returns the modified array of tabs, which no longer includes the "Connect" tab.
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!

Unraveling the Code: Creating Bubble Text for April #CodePenChallenge

Juliia Nikitina — Tue, 23 Apr 2024 19:13:37 +0000

Welcome to a behind-the-scenes look at our #CodePenChallenge demo creation! In this tutorial, I'll dissect the code and walk through the process of crafting our bubble text to style our report on the Chocolate Bar Ratings dataset from Kaggle.

What is this challenge all about?

CodePen Challenge is a monthly coding event that brings together developers, designers, and creators to showcase their skills and creativity. Each month, a new theme sparks inspiration for creating innovative mini-projects on CodePen.
This April, the theme is "Bubbles", and the week’s assignment is to create bubble text. So, I invite you to explore playful and bubbly designs.

What data to use?

Our journey begins with data from Kaggle — a Chocolate Bar Ratings dataset. This dataset contains information about chocolate makers, bean origins, review dates, ratings, and more. It's a deliciously diverse dataset that inspired this chocolate report demo.

Tools of the Trade

To bring our chocolate data to life, we'll leverage the power of WebDataRocks — a versatile web pivot table component. WebDataRocks allows us to visualize and interact with data dynamically, making it the perfect tool for exploring our chocolate ratings dataset.

Code Structure

Before we dive into the chocolatey goodness, let's understand how our CodePen demo is structured:

HTML Structure: We start with a simple HTML structure that sets the stage for our crafty adventure. Inside <div> containers, we have placeholders for our pivot grid and the bubbly text.
CSS Styling: The magic begins with CSS styling that transforms our text into bubbly aerated chocolate delights. We don't stop at default settings — we customize fonts, colors, and grid layouts to create a visually appealing and cohesive design.
JavaScript Interaction: To bring our data into play, we use JavaScript to fetch and display the Chocolate Bar Ratings dataset. We leverage WebDataRocks to visualize and interact with the data dynamically.

Process Breakdown: Creating Bubbles from Chocolate Data

HTML Structure

We start with importing the necessary CSS theme and JavaScript libraries for WebDataRocks. The wdr-component div serves as the container for our pivot table component.

<!-- WebDataRocks Striped-Blue Theme -->
<link href="https://cdn.webdatarocks.com/latest/theme/dark/webdatarocks.min.css" rel="stylesheet" />

<!-- WebDataRocks Scripts -->
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>

<div id="wdr-component"></div>

CSS Styling

Our CSS styles are the heart of this demo: they define the look and feel of the whole work. We customize the pivot view, pivot the chocolate title, and create the chocolate bar cells to match the concept.

For our title, we used Rubik Bubbles font and customized it a little to create that aerated chocolate effect.

To make sense of that, not only after diving into the meaning of data we decided to add another twist to the demo. Using .choco and .choco::before selectors, we created a new look for each grid cell that we will further apply with the help of the JS function.

The overall layout uses grid and radial gradients for a visually appealing backdrop.

#wdr-pivot-view {
    background: transparent;
    border: none;
}

.wdr-pivot-title {
    font-size: 60px !important;
    font-family: "Rubik Bubbles", sans-serif !important;
    text-transform: uppercase;
    background-color: transparent;
    color: #6B3A00 !important;
    -webkit-text-stroke: 1px #000 !important;
    text-stroke: 1px #000 !important;
    text-shadow: 1px 1px 5px #000 !important;
}

.choco {
    background-color: rgba(67, 29, 2, 1) !important;
}

.choco::before {
    position: absolute;
    content: '';
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 92%;
    height: 83%;
    background: transparent;
    border: outset .25em #6B3A00;
    border-radius: .1em;
}

body {
    height: 100vh;
    margin: 0;
    display: grid;
    place-items: center;
    background: rgb(249, 235, 222);
    background: radial-gradient(
        circle,
        rgba(249, 235, 222, 1) 6%,
        rgba(129, 88, 84, 1) 40%,
        rgba(67, 29, 2, 1) 88%
    );
}

JavaScript Logic

The JavaScript section brings our demo and data to life. We initialize WebDataRocks, configure the pivot table with data via the getJSONData() function, customize cell rendering with customizeCellFunction using the previously created choco styles, and set various formatting options for our chocolate bar ratings data to look more understandable and appealing.

var pivot = new WebDataRocks({
    container: "wdr-component",
    width: 1000,
    customizeCell: customizeCellFunction,
    height: "100%",
    report: {
        dataSource: {
            dataSourceType: "json",
            data: getJSONData()
        },
        formats: [
            {
                name: "rating",
                decimalPlaces: 2
            }
        ],
        slice: {
            rows: [
                {
                    uniqueName: "Company Location"
                }
            ],
            columns: [
                {
                    uniqueName: "Review Date",
                    sort: "desc"
                },
                {
                    uniqueName: "Measures"
                }
            ],
            measures: [
                {
                    uniqueName: "Rating",
                    aggregation: "average",
                    format: "rating"
                }
            ],
            sorting: {
                column: {
                    type: "desc",
                    tuple: [],
                    measure: "Rating"
                }
            }
        ],
        options: {
            configuratorButton: false,
            grid: {
                title: "Chocolate Bar Ratings"
            }
        }
    }
});

function customizeCellFunction(cellBuilder, cellData) {
  if (cellData.type == "value") {
      cellBuilder.addClass("choco");
  }
}

function getJSONData() {
    return [
        {
            "Company Maker": "A. Morin",
            "Specific Bean Origin": "Agua Grande",
            REF: 1876,
            "Review Date": 2016,
            "Cocoa Percent": "63%",
            "Company Location": "France",
            Rating: 3.75,
            "Bean Type": "",
            "Broad Bean Origin": "Sao Tome"
        },
        // Other data entries...
    ];
}

Wrapping Up

Feeling inspired? Dive into our CodePen demo to explore the magic of bubble text and discover the best chocolate flavor ever! Don't be afraid to experiment, tweak the code, and add your unique touch to the project. After all, #CodePenChallenge is all about embracing your creativity and pushing the boundaries of what's possible!

CodePen November challenge: WebDataRocks experience

Juliia Nikitina — Mon, 11 Dec 2023 11:47:43 +0000

Greetings, fellow coders! Today, I'm excited to share with you the results of my coworker's adventures in the November CodePen challenge. But before we dive into the dashboards, let's explore the essence of this monthly coding riddle.

Overview of the CodePen Challenge

So, picture this: a monthly shindig where you get handed a theme and a task, and you gotta flex your coding muscles to whip up a coding masterpiece. Each week - new task. Each month - new theme. All year round - rendezvous with your own creativity and coding skills. It's like a coding rollercoaster – fast, a little scary, but hella exciting.

The November theme was Style Trends, and this coding odyssey unfolded through Bento Style, Neo-Brutalism, Y2K Style, and the mystical Gradient Glow😍. Besides the task, you get a list of ideas and resources to read more about the theme and look for inspiration.

My fearless friend and coworker Nadia dove headfirst into the November chaos and tamed each of these styles into a dashboard using the template provided in the task and our free web component - WebDataRocks - a JavaScript library for creating pivot tables.

And I'm here to present you the results of her dedicated work and explore these trends with you. So let's start with the week #1!

Bento Style

Our journey commences with Bento Style – an ode to digital minimalism. The dashboard echoes the Japanese art of bento box arrangement, emphasizing simplicity, order, and elegance. It's a good thing to consider when working with reports and data analytics as it structures the information, doesn't look overwhelming, and is also stylish - the perfect combo!

And my coworker conjured up a dashboard that's cleaner than Marie Kondo's closet! Everything is in its place, no clutter allowed. Each element is meticulously placed, creating a harmonious user experience. It's a testament to the principle that less is often more.

Immerse yourself in the tranquility of the Bento Style demo.

Neo-Brutalism

Next in line is Neo-Brutalism – a stylistic rebellion against conventional norms. Characterized by raw, unpolished aesthetics, the dashboard resembles a digital Rubik's Cube. The clash of colors and intersecting lines creates an unconventional yet oddly captivating beauty.

Emerging in the mid-20th century, Neo-Brutalism challenges the status quo with its raw and authentic expression. Softening all the brutality with a pastel palette, you get a pretty motivating sports dashboard.

Y2K Style

Hold onto your flip phones because we're diving into Y2K Style! Picture my coworker, adorned in butterfly clips and a fluffy hoodie, channeling the spirit of the turn of the millennium. Actually, you don't have to imagine - here it is!

Nadia was so excited about this theme that she also dressed in Y2K style! What a dedicated person🤯...

The dashboard pays homage to this era with cute, bright colors, bold fonts and patterns, and a modern twist. Y2K Style emerged as a bridge between the analog and digital worlds, embracing both the nostalgia of the past and the excitement of the future. Dive into this nostalgia dashboard yourself on CodePen.

Gradient Glow Style

The grand finale brings us to Gradient Glow Style, a digital dreamscape illuminated by neon lights and vibrant gradients. The use of gradients and glowing elements has its roots in early web design, evolving into a modern trend that adds depth and vibrancy to digital spaces.

Nadia's dashboard captures attention with a deep, calm green gradient, and the matcha-colored accents soften the seriousness of the report.

Immerse yourself in the glow of creativity

Conclusion

And there you have it – a month of coding exploration spanning four distinct styles, each revealing the depth of creative possibilities and a nod to the history that shaped them. It's not just about the code; it's about translating ideas into a visual tapestry that echoes the spirit of each stylistic era.

Kudos to my coworker for turning code into art! I hope you also got inspired by her creations, and until the next coding adventure, happy crafting, fellow devs! 🚀💻

A 3-minute tutorial on how to make a Halloween prank on your colleagues 👻

Juliia Nikitina — Tue, 31 Oct 2023 16:23:44 +0000

Want to surprise your friends at work? Make their working process a little bit more exciting with this small prank! Though, be careful not to scare them too much...

We will create a Halloween-themed pivot table with horror movie information, styled toolbar icons, alternating background colors, and a tiny, cute spider moving across the pivot table. Just like this:

Here's a breakdown of the code of the demo.

Step 1: Setup HTML Structure

Firstly, you'll need to set up the HTML structure:

<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>
<link href="https://cdn.webdatarocks.com/latest/theme/dark/webdatarocks.min.css" rel="stylesheet"/>

<div id="wdr-container"></div>
<img class="spider" src="https://media1.giphy.com/media/JIoVDbuFoZGKjIkYga/giphy.gif"/>

The code snippet consists of references to the WebDataRocks library and its dark theme styles. It also sets up a container <div> for the pivot table and includes an <img> tag to display a spider GIF within the document. This code serves as the foundational structure for integrating a WebDataRocks pivot table and displaying the spider GIF in the HTML document.

Step 2: JavaScript Initialization and Customization

WebDataRocks Initialization

var pivot = new WebDataRocks({
  container: "#wdr-container",
  customizeCell: customizeCellFunction,
  beforetoolbarcreated: customizeToolbar,
  report: {
    // Data source configuration
    dataSource: {
      filename: "https://cdn.webdatarocks.com/data/movie_profit.csv",
    },
    "slice": {
      // Configuring the structure of rows and columns
      "rows": [{
        "uniqueName": "movie",
        "sort": "unsorted"
      }],
      "columns": [{
          "uniqueName": "genre",
          "filter": {
            // Filtering the 'genre' column for 'Horror' genre
            "type": "top",
            "quantity": 10,
            "measure": "worldwide_gross",
            "members": [
              "genre.Horror"
            ]
          },
          "sort": "unsorted"
        },
        {
          "uniqueName": "Measures"
        }
      ],
      // Measures/aggregations to display in the pivot table
      "measures": [{
          "uniqueName": "worldwide_gross",
          "aggregation": "sum"
        },
        {
          "uniqueName": "production_budget",
          "aggregation": "sum"
        }
      ],
      // Sorting configuration for rows and columns
      "sorting": {
        "row": {
          "type": "desc",
          "tuple": [],
          "measure": "worldwide_gross"
        },
        "column": {
          "type": "desc",
          "tuple": [],
          "measure": "worldwide_gross"
        }
      }
    },
    // Additional options for the pivot table
    "options": {
      "grid": {
        "showTotals": "off",
        "showGrandTotals": "columns"
      }
    },
    // Formatting settings for numbers and currencies
    "formats": [{
      "name": "",
      "thousandsSeparator": " ",
      "decimalSeparator": ".",
      "currencySymbol": "$",
      "currencySymbolAlign": "left",
      "nullValue": "",
      "textAlign": "right",
      "isPercent": false
    }]
  },
  // Set the width and height of the pivot table
  width: "100%",
  height: 430,
  // Enable the toolbar
  toolbar: true
});

Explanation:

Data Configuration: Sets the data source as a CSV file containing movie profit data. It defines the structure of rows, columns, measures, and their aggregations for the pivot table.
Slice Configuration: Specifies the rows, columns, measures, filtering for the 'Horror' genre, and sorting options.
Options: Customizes the pivot table by setting options such as hiding totals and displaying grand totals.
Formats: Defines number formatting such as thousands separator, decimal separator, currency symbol, alignment, and other display configurations.
Pivot Table Settings: Defines the dimensions (width and height) of the pivot table and enables the toolbar.

Cell Customization Function

function customizeCellFunction(cellBuilder, cellData) {
  if (cellData.type == "value") {
    // Alternates cell colors based on rowIndex
    if (cellData.rowIndex % 2 == 0) {
      cellBuilder.addClass("alter1");
    } else {
      cellBuilder.addClass("alter2");
    }
  }
}

customizeCellFunction: Customizes cell appearance based on cell data.
Cell Color Alternation: Alternates the cell colors for better visualization by adding classes "alter1" and "alter2" based on the row index.

Toolbar Customization Function

function customizeToolbar(toolbar) {
  var tabs = toolbar.getTabs();
  toolbar.getTabs = function() {
    for (let i = 0; i < tabs.length; i++) {
      // Modifies toolbar icons based on their positions
      switch (i % 4) {
        case 0:
          tabs[i].icon = `<img width=30 height=30 src="https://cdn-icons-png.flaticon.com/512/6433/6433146.png"/>`;
          break;
        case 1:
          tabs[i].icon = `<img width=30 height=30 src="https://cdn-icons-png.flaticon.com/512/3330/3330533.png "/>`;
          break;
        case 2:
          tabs[i].icon = `<img width=30 height=30 src="https://cdn-icons-png.flaticon.com/512/8490/8490308.png "/>`;
          break;
        case 3:
          tabs[i].icon = `<img width=30 height=30 src="https://cdn-icons-png.flaticon.com/512/3277/3277415.png"/>`;
          break;
      }
    }
    return tabs;
  }
}

customizeToolbar: Customizes the toolbar icons.
Toolbar Icon Modification: Changes the icons of different tabs based on their positions (0 to 3) by replacing them with images from provided URLs.

Step 3: Create CSS Styles

Styling for alternating cell colors

#wdr-pivot-view #wdr-grid-view div.alter1 {
  background-color: #4f983c;
}

#wdr-pivot-view #wdr-grid-view div.alter2 {
  background-color: #7e42d6;
}

These CSS rules target specific elements within the WebDataRocks pivot table grid to style the alternating cells.

The classes alter1 and alter2 are applied to cells in the pivot table view to give them different background colors. When rendered, every other cell will have the specified background colors, creating a visually distinctive pattern.

Styling the Spider Gif

html {
  position: relative;
}

img.spider {
  position: absolute;
  bottom: 0;
  right: 0;
  animation: spiderMovement 12s linear infinite;
  transform: scaleX(-1);
  width: 200px;
}

html { position: relative; }: This sets the positioning context for other elements inside the HTML document. It's crucial for correctly positioning the spider gif, as it will be absolutely positioned within this context.
img.spider { ... }: This targets the image with the class name "spider".
position: absolute;: Positions the spider gif absolutely within the HTML document.
bottom: 0; right: 0;: Places the spider at the bottom right corner of the parent element, in this case, the HTML document.
animation: spiderMovement 12s linear infinite;: Applies the spiderMovement animation to the spider gif. It moves the gif from the right edge of the screen (0% progress) to the left edge (100%) over a duration of 12 seconds, using a linear animation timing function, and it loops infinitely.
transform: scaleX(-1);: Mirrors the spider gif horizontally (flips it), making it face left.
width: 200px;: Sets the width of the spider gif to 200 pixels.

Animation Keyframes

@keyframes spiderMovement {
  0% {
    right: 0;
  }
  100% {
    right: 100%;
  }
}

This CSS rule defines the animation sequence named spiderMovement using keyframes.

0%: At the beginning (0% progress), the spider gif is positioned at the extreme right edge (right: 0).
100%: At the end (100% progress), the spider gif is moved to the extreme left edge (right: 100%).

This animation creates the illusion of the spider crawling across the pivot table from right to left by continuously looping the movement over the defined 12-second duration.

Tips:

You'll need to include this code within an HTML file, making sure to reference the necessary WebDataRocks library and dependencies, and replace any placeholder data sources or file paths with your actual data or URLs. Ensure your data source is accessible and correctly configured in the WebDataRocks initialization.
Ensure the spider gif URL is accessible and properly positioned to give the effect of it crawling across the pivot table. Adjust the position by modifying the CSS properties like top, bottom, left, or right within the .spider class. You can choose another spider gif that is more realistic.
Remember, to use this code, you'll need access to the WebDataRocks library and the provided resources (icons and spider gif).
Also, test this in an environment that allows loading external resources and supports the WebDataRocks library.
You can replace the Halloween-themed icons with your preferred images. Just update the URLs in the customizeToolbar function.

Congratulations!

You've created a fun and spooky Halloween-themed pivot table with horror movie data. Explore further by customizing the styles, adding more spooky elements, or incorporating additional functionalities to suit your Halloween theme.

Check out the interactive demo on CodePen!

Meet a new technology to display your big data volumes instantly without any waiting time!

Juliia Nikitina — Thu, 17 Nov 2022 11:18:21 +0000

Hi, guys!

Happy to see you here and even happier to announce something new we’ve been working on lately!

I am a part of the Flexmonster team - a company that works on several data visualization pivot grid products such as Flexmonster Pivot Table & Charts and WebDataRocks. We continue to develop and improve these products, but we cannot stop moving forward with our other ideas and inventions that come to us in the process.

As you can see, all our work is focused on data and its representation in tabular format. Having broad experience and a large customer base, we started noticing one specific request from our users.

What are the main pain points?

Many companies need to visualise such a large number of records at a time that the browser sometimes simply cannot cope with or it takes hours to process and draw it on the grid.

And even if eventually everything ends up on the page, any subsequent action, be it filtering or searching for a concrete value, will take a lot of time again. Such software performance does not contribute to work efficiency at all, and even more so – to good results.

Thus, even the mention of analyzing a large amount of data leads to an instant association with a boring, long, and irritating process.

Looking back on all our development experience, we decided to enter the game.

We researched 61 components on the market, and only 28% of them wrote something about working with big amounts of data. At the same time, the meaning of the term "large dataset" is different for everyone - for some, it's 10,000 records, and for others, a million. Similarly, the meaning of the term "fast performance" is different for everyone. But none of their "understandings" meet our requirements.

Therefore, it was decided to develop such a solution ourselves - a super fast and powerful data grid that can work with millions of records instantly so you can access all your data without waiting.

A little additional market research, study of different approaches, development of principles and goals of our product, and some practical experiments - and here we have what to present to you - meet DataTable.dev!

It's a grid library, but with that dreamy ideal performance. The component reacts so quickly to any actions that the user seems to be directly interacting with the data without a computer as an intermediary. At the same time, it does not matter how much data you upload there - the demo shows 11 million rows from a 1.6 GB file, but the grid can actually handle a lot more than that!

We focused on creating a solution that can rightly be called **the destroyer of the stereotype of slow data analysis **and providing you with an ideal fast and convenient software.

How did we achieve it?

We developed our own approach to our data table operation and functioning.

We reviewed the principle of loading and drawing data in the browser window of our previous products and found several optimizations that could significantly improve and speed up these processes.

We managed to specify the structure of frames and different behaviours of processes in different situations, defined their execution time and sequence, and managed to optimise free time in frames.

What’s next?

We are continuing the development of our idea and want to implement such a scheme in our other products.

But right now, you can check our current progress, give us feedback, and sign up for our newsletter, where we'll be showing you the progress of the component in live. On the website, you can now read more about our product, try playing with a demo and evaluate the scale of data that the table can handle, as well as delve into our approach to understand it better from the inside.

We have also launched our idea on a Product Hunt and hope to get enough feedback to continue developing and improving our approach and product.

I'm really excited to finally be able to show you our results and hear your comments and feedback because that's what motivates us to move forward!

So write in the comments all your thoughts and suggestions - we will be very happy to expand our horizons and get more points of view!

Check out my List Of JavaScript Data Visualisation Libraries!

Juliia Nikitina — Mon, 07 Mar 2022 16:23:31 +0000

I have recently tried many JavaScript libraries for data analysis and visualization and used them in different combinations and on different stacks. Of course, not all of the existing ones, but enough to write a whole list.

So I decided to do it - to write the Complete List Of JavaScript Data Visualization Components and share it on GitHub.

So that my colleagues would not spend hours looking for the right and suitable component for them. I can't call it "complete" yet, but if you have experience with a component I didn't mention, but you could recommend it, I'd be happy to get a pool request from you with new items on the list.

I hope this list will be useful to many of you and make life easier. What do you think? Write your suggestions and ideas in the comments - I will be happy to read them and improve my list.

Let me know what you think!

New WebDataRocks 1.4 release is out!

Juliia Nikitina — Thu, 23 Sep 2021 15:53:38 +0000

Just a short notice about the free javascript data visualization library my team & I are working on.

We made a few new improvements in WebDataRocks Pivot Table release 1.4 that I want to share with the community.

This time, we added:

☑️ An easy way to integrate pivot grid with Angular, Vue & React, just using npm.

Before starting, make sure that Node.js and npm are installed on your machine as well as the CLI of the corresponding framework

Then just one command and you have the needed module installed:

⚫ for Vue



npm install vue-webdatarocks

⚫ for React



npm install react-webdatarocks

⚫ for Angular



npm install ng-webdatarocks

Now you have ready-to-use wrappers for the most popular frameworks to save time and effort on embedding them with our product. But still, our pivot tool can be integrated with any other framework, the available tutorials you can find in our documentation.

☑️ New predefined pivot grid skins: beautify your report with stylish themes by choosing any of the 8 themes or create your own one with our new custom theme builder.

There were also a few minor changes we made that you can find in our release notes.

I hope that you have already tried or used our free pivot grid component in your project. We made it for developers to save their time, so we hopefully achieve our goal and will value any feedback from the dev community!

Simple report app with Blazor in 10 minutes

Juliia Nikitina — Thu, 26 Aug 2021 13:59:39 +0000

Recently, I had a task to start working with a new framework - Blazor. This is the first time I have dealt with it, so for a start I decided to search for some additional information on it on some blogs.

One of the critical features of Blazor, which most developers have mentioned, is the ability to use both C# and various JavaScript libraries when creating an application. In turn, I was very bribed that the whole integration process is simple and even speeds up the work on the project because it adds more mobility.

In this short tutorial, I'll show you my experience, how using Blazor and Flexmonster Pivot Table & Charts library create the simplest reporting app with a pivot grid in 10 minutes.

Before we start, check that you have installed the .NET Core 2.1.300 (or later) SDK and it works properly.

№1. Create the simplest Blazor app

So to create the base, you just need to run one command in the terminal (could it be even easier?):



dotnet new blazorserver -o BlazorApp --no-https

You will see a new folder BlazorApp with all the files needed in your current location, and on http://localhost:5000, you will find the basic Blazor app template.

№2. Add the Flexmonster Pivot to your app

Instead of “ Welcome to your new app“ our task is to add a pivot grid to the main page.

To do this install the Flexmonster.Blazor package:



dotnet add package Flexmonster.Blazor

Add it to the project by writing the following line in the import file (_Imports.razor):



@using Flexmonster.Blazor

Add the script to the main HTML file (_Host.cshtml) so it looks like this:



<head>
   <!-- Other metadata tags -->
   <link href="css/app.css" rel="stylesheet" />
   <link href="PivotBlazor.styles.css" rel="stylesheet" />
   <script src="_content/Flexmonster.Blazor/blazor-flexmonster.js"></script>
   <!-- Other metadata tags -->
</head>

And finally, let's add the table itself to the main page. In Index.razor file, replace the header and caption with the Flexmonster Pivot Grid caption and the component itself with the parameters you need (enable the Toolbar and define width and height of the pivot):



@page "/"
<h1>Flexmonster Pivot Grid</h1>
<FlexmonsterComponent Report="@report"
                     Toolbar="true"
                     Width="100%"
                     Height="600">
</FlexmonsterComponent>
@code {
    string report = "https://cdn.flexmonster.com/reports/report.json";
}

In the @code block, we specify the path to the report displayed on the page and pass it to the component as a variable.

№3. Run your Blazor report app

That’s all! Simply run your app in the terminal with dotnet run and open the http://localhost:5000.

All these steps will take you about 10 minutes, and you will see the result immediately. All that remains is to take a closer look at the Flexmonster Pivot Grid and Blazor documentation to unleash this framework’s capabilities fully!

If this tutorial were helpful for you, I would be thrilled to hear your feedback and ideas about this integration.

Spectacular dashboard with Flexmonster Pivot and amCharts

Juliia Nikitina — Fri, 09 Jul 2021 14:41:27 +0000

I have always liked something bright and unusual, no matter whether it is clothing, a painting, or an interesting visualization. And when I come across something like that, I immediately want to try to do it myself.

It happened this time too. When I saw all the examples amCharts have, I immediately knew how I would spend in the near future. That's how this mini-tutorial appeared on how to combine charts and Flexmonster Pivot and create a cool interactive and at the same time meaningful dashboard.

So let's get to work!

Step 1. Data

Let's start with the data. This time I decided to take information about cheese production from France, Greece and Italy. They are in my JSON array, which I will insert directly into the code and through the function getData() I will get the data for the pivot.

function getData() {
  return [
    {
      Date: "2020-01-05",
      id: "GR",
      CountryCode: "gr",
      Country: "Greece",
      Feta: 62,
      Mozzarella: 8,
      "Parmigiano-Reggiano": 8
    },
    {
      Date: "2020-01-12",
      id: "GR",
      CountryCode: "gr",
      Country: "Greece",
      Feta: 62,
      Mozzarella: 11,
      "Parmigiano-Reggiano": 8
    },
…
] }

Step 2. Pivot

Now let's create the pivot itself and add a reportcompleteevent handler to create charts for the dashboard at the end.

let pivot = new Flexmonster({
  container: "pivot-container",
  licenseFilePath: "https://cdn.flexmonster.com/codepen.key",
  componentFolder: "https://cdn.flexmonster.com/",
  height: 440,
  customizeCell: customizeCell,
  report: {
    dataSource: {
      data: getData(),
      mapping: {
        Date: {
          type: "date"
        },
        Country: {
          type: "string"
        },
        id: {
          type: "string"
        },
        CountryCode: {
          type: "property",
          hierarchy: "Country"
        },
        Feta: {
          type: "number"
        },
        Mozzarella: {
          type: "number"
        },
        "Parmigiano-Reggiano": {
          type: "number"
        }
      }
    },
    slice: {
      rows: [
        {
          uniqueName: "Country"
        },
        {
          uniqueName: "[Measures]"
        }
      ],
      columns: [
        {
          uniqueName: "Date.Month",
          filter: {
            members: [
              "date.month.[january]",
              "date.month.[february]",
              "date.month.[march]",
              "date.month.[april]",
              "date.month.[may]",
              "date.month.[june]"
            ]
          }
        }
      ],
      measures: [
        {
          uniqueName: "Feta",
          aggregation: "sum",
          grandTotalCaption: "Feta"
        },
        {
          uniqueName: "Mozzarella",
          aggregation: "sum",
          grandTotalCaption: "Mozzarella"
        },
        {
          uniqueName: "Parmigiano-Reggiano",
          aggregation: "sum",
          grandTotalCaption: "Parmigiano-Reggiano"
        }
      ]
    },
    options: {
      grid: {
        showHeaders: false,
        showGrandTotals: "rows"
      },
      showAggregationLabels: false
    }
  },
  reportcomplete: function () {
    pivot.off("reportcomplete");
    createPieChart();
    createStackedChart();
    createMapChart();
    createPictorialChart();
  }
});

Step 3. Customization

In order to make the pivot itself more interesting, I suggest adding the flags to the countries. We will do this through the customizeCell function, and we will set the styles through CSS. Note that we are styling both expanded and collapsed variants.

function customizeCell(cell, data) {
  if (data.hierarchy && data.type == "header") {
    console.log(data);
    if (
      data.hierarchy.caption == "Country" &&
      data.member &&
      data.member.properties
    ) {
      let name = data.member.properties.CountryCode;
      let flag = `<i class="fm-icon ${
        data.expanded ? "fm-expanded-icon" : "fm-collapsed-icon"
      }" 
        title="${data.expanded ? "Click to collapse" : "Click to expand"}"></i>
        <img class="flag-icon" src="https://cdn.flexmonster.com/i/flags/${name.toLowerCase()}.svg">`;
      cell.text = `${flag}<span style="margin-left: 2px; line-height: 16px">${data.member.caption}</span>`;
      cell.addClass("fm-custom-cell");
    }
  }
}

CSS

.fm-custom-cell {
  display: flex !important;
  align-items: center !important;
  font-size: 12px !important;
}

.fm-custom-cell .flag-icon {
  width: 21px !important;
  height: 16px !important;
  margin-left: 0 !important;
  margin-right: 2px !important;
}

#fm-pivot-view
  .fm-grid-layout
  .fm-custom-cell.fm-expanded
  .fm-expanded-icon::before,
#fm-pivot-view
  .fm-grid-layout
  .fm-custom-cell.fm-collapsed
  .fm-collapsed-icon::before {
  top: -2px;
  height: 16px;
}

Step 4. Charts

Now we can get to the charts.

First, we will declare our charts and choose the colors that we will use in them.

let mapChart, pieChart, stackedChart, pictorialChart;
// Apply amCharts theme
am4core.useTheme(am4themes_animated);

const chartColors = [
  am4core.color("#4CBF8B"),
  am4core.color("#FFCD4C"),
  am4core.color("#E8734C"),
  am4core.color("#9875E3"),
  am4core.color("#4C9EFF"),
  am4core.color("#8ACFC3"),
  am4core.color("#CD97E6"),
  am4core.color("#F1D34C"),
  am4core.color("#65D2E7")
];

const cheeseColors = [
  am4core.color("#FFE268"),
  am4core.color("#FFCD4C"),
  am4core.color("#FFB037")
];

The data in charts will be transmitted from the pivot through a special getData API call. Like here:

function createPieChart() {
  pivot.amcharts.getData(
    {
      slice: {
        rows: [
          {
            uniqueName: "Date.Month",
            filter: {
              members: [
                "date.month.[january]",
                "date.month.[february]",
                "date.month.[march]",
                "date.month.[april]",
                "date.month.[may]",
                "date.month.[june]"
              ]
            }
          }
        ],
        measures: [
          {
            uniqueName: "Feta",
            aggregation: "sum"
          }
        ]
      }
    },
    drawPieChart,
    updatePieChart
  );
}

On the amCharts demo page you can find a wide variety of charts and graphics and apply them into your project. For this dashboard, I chose a StackedChart, PieChart, MapChart and PictorialChart.

In this article, I will show using the PictorialChart how to transfer data from the pivot, in the rest of the charts everything works the same way. You can study them in more detail in the source code of the demo.

So first we initialize the chart and then add data to it:

 pictorialChart = am4core.create(
    "amcharts-pictorial-container",
    am4charts.SlicedChart
  );
 pictorialChart.data = chartData.data;

This is how it should look at the end:

function drawPictorialChart(chartData, rawData) {
  var iconPath =
    "M10.512,156.385l231.164,35.647c-1.779-3.578-2.869-7.554-2.869-11.817c0-14.766,11.962-26.728,26.733-26.728 c14.768,0,26.733,11.962,26.733,26.728c0,7.173-2.861,13.657-7.466,18.466l75.392,11.622c8.752,1.351,12.632-3.979,8.66-11.906 l-35.401-70.833c-4.172,2.687-9.125,4.29-14.459,4.29c-14.768,0-26.726-11.968-26.726-26.733c0-11.491,7.29-21.213,17.473-24.98l-17.429-34.825c-3.955-7.92-13.781-11.547-21.94-8.093L232.122,53.41c5.122,7.019,8.175,15.631,8.175,24.98c0,23.463-19.015,42.477-42.49,42.477c-20.977,0-38.365-15.222-41.804-35.223L9.43,147.683C1.28,151.141,1.759,155.032,10.512,156.385z M125.661,123.215c4.883,0,8.838,3.95,8.838,8.833c0,4.883-3.955,8.833-8.838,8.833c-4.873,0-8.833-3.949-8.833-8.833C116.829,127.165,120.788,123.215,125.661,123.215zM30.294,218.466c17.012,0,30.799,13.793,30.799,30.805c0,16.996-13.788,30.797-30.799,30.797c-6.444,0-12.419-1.987-17.364-5.374l3.048,26.361c1.02,8.812,9.011,16.362,17.859,16.875l189.024,11.157c-0.068-0.754-0.229-1.476-0.229-2.24c0-14.644,11.857-26.497,26.493-26.497c14.643,0,26.497,11.854,26.497,26.497c0,1.815-0.192,3.595-0.529,5.313l59.086,3.486c8.844,0.514,17.34-6.115,18.979-14.827l18.431-98.29L0,162.851l7.598,65.657C13.229,222.353,21.297,218.466,30.294,218.466z M135.451,219.127c10.283,0,18.612,8.331,18.612,18.622c0,10.287-8.337,18.619-18.612,18.619c-10.293,0-18.623-8.332-18.623-18.619C116.829,227.458,125.158,219.127,135.451,219.127zM98.206,271.243c4.885,0,8.844,3.947,8.844,8.829c0,4.885-3.959,8.832-8.844,8.832c-4.871,0-8.831-3.947-8.831-8.832C89.375,275.19,93.335,271.243,98.206,271.243z";

  pictorialChart = am4core.create(
    "amcharts-pictorial-container",
    am4charts.SlicedChart
  );
  pictorialChart.hiddenState.properties.opacity = 0; // this makes initial fade in effect

  pictorialChart.data = chartData.data;

  var series = pictorialChart.series.push(
    new am4charts.PictorialStackedSeries()
  );
  series.colors.list = cheeseColors;

  series.dataFields.value = pivot.amcharts.getMeasureNameByIndex(rawData, 0);
  series.dataFields.category = pivot.amcharts.getCategoryName(rawData);
  series.alignLabels = true;
  series.labels = "disabled";
  series.ticks = "disabled";

  series.maskSprite.path = iconPath;

  pictorialChart.legend = new am4charts.Legend();
  pictorialChart.legend.position = "right";
  let marker = pictorialChart.legend.markers.template.children.getIndex(0);
  pictorialChart.legend.markers.template.width = 20;
  pictorialChart.legend.markers.template.height = 20;
  marker.cornerRadius(20, 20, 20, 20);

  pictorialChart.responsive.enabled = true;
  pictorialChart.responsive.rules.push({
    relevant: function (target) {
      if (target.pixelWidth <= 600) {
        return true;
      }
      return false;
    },
    state: function (target, stateId) {
      if (target instanceof am4charts.PictorialStackedSeries) {
        var state = target.states.create(stateId);

        var labelState = target.labels.template.states.create(stateId);
        labelState.properties.disabled = true;

        var tickState = target.ticks.template.states.create(stateId);
        tickState.properties.disabled = true;
        return state;
      }

      return null;
    }
  });
}

Also, we do not forget about updating the chart so that it remains interactive for us and transforms depending on changes in the pivot data.

function updatePictorialChart(chartData, rawData) {
  pictorialChart.dispose();
  drawPictorialChart(chartData, rawData);
}

Step 5. Dashboard

Now we can finally start adding all this to the page. First add the libraries themselves.

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<script src="https://cdn.flexmonster.com/lib/flexmonster.amcharts.js"></script>
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/maps.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<script src="https://cdn.amcharts.com/lib/4/geodata/worldHigh.js"></script>

In the CSS code, we will pre-specify styles for labels and container for charts.

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.chart-container {
  height: 450px;
}

.demo-box {
  background-color: #fafafa;
  position: relative;
  padding: 40px 30px 30px 30px;
  border: 1px solid #e9e9e9;
  margin-bottom: 20px;
  margin-top: 40px;
}

.demo-title {
  font-size: 18px;
  margin-bottom: 30px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  line-height: 24px;
}

Next, we will simply add all the components in a row to the page, signing titles for our charts.

<div id="pivot-container"></div>

<div class="demo-box">
  <div class="demo-title"><strong>Overall Cheese Interest by Month</strong></div>
  <div id="amcharts-stacked-container" class="chart-container"></div>
</div>

<div class="demo-box">
  <div class="demo-title"><strong>Total Cheese Interest by Country</strong></div>
  <div id="amcharts-pictorial-container" class="chart-container"></div>
  <div>Icons made by <a href="https://www.freepik.com" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div>
</div>

<div class="demo-box">
  <div class="demo-title"><strong>Feta Interest by Month</strong></div>
  <div id="amcharts-pie-container" class="chart-container"></div>
</div>

<div class="demo-box no-text-before no-text-after">
  <div class="demo-title"><strong>Feta Interest by Country</strong></div>
  <div id="amcharts-map-container" class="chart-container"></div>
</div>

And voila! - our super interactive and modern cheese making dashboard is ready!

Free desktop tool for insightful reporting. Let me know what you think😺

Juliia Nikitina — Mon, 19 Apr 2021 11:51:31 +0000

Hey Dev.to community😸,
I want to share the project my team and I are working on.

We are developers of JS data visualization library that is used by integrators as a powerful pivot table component for any web project.

Our team has decided to give free access to the app to all people using pivots in their everyday tasks.

We have embedded our pivot table into a simple desktop application on the base of our integration with Electron.js.
And now everyone can easily start working with it right after the download. This product is a convenient and simple solution for your fast reporting. And it doesn’t require any extra skills, knowledge or technical specialization.

Flexmonster Pivot Table & Charts for desktop is a lightweight reporting tool that provides a rich set of data analysis features: grouping, aggregating, filtering, sorting, pivot charts.
Once you build a pivot grid, emphasize important insights with formatting, customize your report or save results to any format, be it PDF, Excel, HTML, CSV, or PNG.

What makes Flexmonster Desktop an effective reporting tool for anyone is:

a super quick start by loading data from desired sources,
a lot of options to export your result to different formats,
a simple way to change the view on your data: charts, compact or flat view,
a convenient drag-and-drop and super friendly UI, that allow you to easily configure your report

& more.

You can just download the app, run it on your computer and quickly make a customized report to present it to your boss or colleagues in just a few minutes.

If you find it useful but need more custom scenarios for your own soft or website we have a developer's version of our component that can be embedded in your own project. It is powered by extended API calls and different customization options for any use case. You can also customize the app basing it on our Electron integration

😼 Today is a very important day for us - we are launching on ProductHunt: https://www.producthunt.com/posts/flexmonster-desktop
So we would greatly appreciate your feedback on the app and support on the platform😻.

If reporting is something you are familiar with - do give it a try!