How WebDataRocks Can Help Santa Keep Track of Christmas Presents

Tutorial

Have you already received gifts from your dearest ones? So, guess what? WebDataRocks prepared a present for you, too. We’ve mentioned already that our pivot table can be used by anyone, but have you ever thought that even Santa can use WebDataRocks? 

We think that our pivot table can be a really convenient way to store and process all the children’s letters. 

Didn’t expect that? However, today we want to show you how to do it yourself. 

Step 1: Adding WebDataRocks to the Page

First, let’s include WebDataRocks styles and scripts in our HTML:

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

Step 2: Initializing the Pivot Table

Now, let’s bring the pivot table to life, where each letter will be shown as a single row. Probably, it will be quite convenient for Santa to ensure that no present for a child is forgotten.

var pivot = new WebDataRocks({
  container: "wdr-component",
  customizeCell: customizeCellFunction,
  width: "100%",
  height: "100%",
  report: {
    dataSource: {
      type: "json",
      data: getData()
    },
    slice: {
      rows: [
        { uniqueName: "name" },
        { uniqueName: "city" },
        { uniqueName: "date" },
        { uniqueName: "gifts" },
        { uniqueName: "letter" }
      ]
    },
    options: {
      grid: {
        type: "flat",
        showTotals: "off",
        showGrandTotals: "off"
      },
      datePattern: "MMMM d, yyyy",
      showAggregationLabels: false
    }
  }
});

Step 3: Replacing Long Letters with a Button

But here’s a tiny problem: in our dataset, the text of letters is too long to display, so let’s replace it with a button, clicking on which we will see the whole text in a convenient format. To achieve it, just add a customizeCellFunction:

function customizeCellFunction(cell, data) {
  if (
    data &&
    data.type === "value" &&
    data.hierarchy &&
    data.hierarchy.uniqueName === "letter"
  ) {
    const escapedLabel = data.label
      .replace(/\n/g, "\\n")
      .replace(/'/g, "\\'")
      .replace(/"/g, '\\"');

    cell.addClass("letter-cell");
    cell.text = `
      <button class="letter-btn" onclick="openLetter('${escapedLabel}')">
        View Letter
      </button>
    `;
  }
}

And add this function to customizeCell in our pivot table component:

var pivot = new WebDataRocks({
  container: "wdr-component",
  customizeCell: customizeCellFunction,
…
)}

And another functions for opening our letter in a new window and closing it: 

function openLetter(letterContent) {
  const unescapedContent = letterContent
    .replace(/\\n/g, "\n")
    .replace(/\\'/g, "'")
    .replace(/\\"/g, '"');

  document.getElementById("letterContent").textContent = unescapedContent;
  document.getElementById("letterModal").style.display = "block";
}

function closeLetter() {
  document.getElementById("letterModal").style.display = "none";
}

Step 4: Styling

Now, let’s create an actual Christmas atmosphere magic using customization.

Step 4.1: Choosing a Theme for the Pivot Table

Before creating custom styling, we’ll apply the built-in Striped-Teal theme:

<link href="https://cdn.webdatarocks.com/latest/theme/stripedteal/webdatarocks.min.css" rel="stylesheet" />

Moreover, you can choose from our eight built-in themes to quickly change the appearance of the pivot table.

Step 4.2: Styling the Letter Pop-up

Next, let’s focus on how the letter itself is displayed in a pop-up window: 

#letterModal {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

#letterModalContent {
  background: #ffffff;
  max-width: 600px;
  margin: 10% auto;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

#letterContent {
  white-space: pre-wrap;
  line-height: 1.5;
}

Step 4.3: Styling the Background of The Dashboard

As a final touch, let’s add even more holiday vibes in our background by adding a soft gradient with some present emojis:

body {
  background: linear-gradient(135deg, #0f4c75, #3282b8, #0f4c75);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ctext x='20' y='25' font-size='20' text-anchor='middle' opacity='0.1'%3E🎁%3C/text%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 40px 40px;
  background-attachment: fixed;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 20px;
  min-height: 100vh;
}

And that was it, our winter festive demo is ready for Santa’s use to ensure that all presents will be delivered this year. Hopefully, this example gives you a few ideas on how you can experiment with WebDataRocks in your own projects, no matter how festive they are.