Back to homepage

Number formatting

You can change the default number formatting of the report. WebDataRocks offers many options for formatting your numerical data such as: 

1. Align of the text
2. Thousand and decimal separators
3. Quantity of decimal places
4. Currency symbols
5. Currency align
6. Null (default) value
7. Percent formatting

To format numbers

• Go to the Format tab () on the Toolbar.
• Select Format cells.
• Select the value which formatting should be changed.
• Set the properties of formatting.
• Apply the changes.

Use the drill-through feature to see from which non-aggregated records the value in the cell is composed.

To drill through the cell

• Double-click the cell.
• Look through all the information about the cell in the drill-through pop-up window.

To specify what information to show in the drill-through view, open the Field List ().

Note that if you change the values in the drill-through pop-up window, the changes are not applied to the values from the initial grid. They are “view-only”.

Aggregation functions group together values from multiple fields to form a single compound value. To choose an aggregation function for a value, use the Field List.

WebDataRocks Pivot Table offers 17 aggregation functions which you can apply to the measures in your report:

To see the most relevant information first, apply sorting to the values on the grid.

To sort the data right on the grid

• Hover over the name of the column/row.
• To sort the records in the rows/columns descending, click the sorting control near the hierarchy caption.
• Click again to sort ascending.

To remove sorting from the data on the grid

• Right-click the member name and cancel sorting via the context menu.

Use the filtering feature to focus on the important subsets of your data and display only those rows and columns that satisfy certain conditions.

WebDataRocks supports three types of filters:

• Filtering by member names. Use it to show the values of the specific members.
• Filtering by values. Also known as the Top/Bottom X filter. Use it to keep records within a specified range (with values higher or lower than a specified number).
• A report filter. Use it to apply filtering to the entire report.

To apply a filter by member names

• Open the filtering view by clicking the filtering control (a gear icon) near the hierarchy caption.
• Select the members to be displayed or deselect them to be hidden from the grid.
• If you want to sort the members, choose the alphabetical or reverse alphabetical order. The members of month, weekday, date, time, date and time hierarchies are sorted from the oldest to the newest and vice versa.
• Apply the filter.

To display the members unsorted (i.e., in the same order as they come inside the data source), deactivate both alphabetical and reverse alphabetical controls.

If you have a large list of hierarchy members, use the search option:

• Start typing the member’s caption in the search box.
• Select a check box of the member you are searching for.
• Apply the changes.

To apply a filter by value

• Open the filtering view by clicking the filtering control (a gear icon) near the hierarchy caption.
• Select the Top 10 button.
• Select the Bottom button or the Top button to show the results with the lowest or the highest values correspondingly.
• Enter the number of top or bottom results to show.
• Select the measure on which the filtering is based.
• Apply the changes.

To apply a report filter

• Go to the Fields () tab.
• Drag the hierarchies to the Report Filters area.
• Apply the changes.

The separate tabs of the report filters appear above the grid. Click them and choose the members to display on the grid.

WebDataRocks offers customization of the pivot table.

It’s useful if you want to enhance the Look & Feel of your web reporting tool and make the visitors’ interaction with your website a more pleasant experience.

WebDataRocks goes with a set of eight predefined themes:

• Dark
• Default
• Light blue
• Orange
• Teal
• Green
• Striped-Blue
• Striped-Teal

How to change the theme

Step 1. Include the CSS file

All files with themes are located in  webdatarocks/theme/ folder. If you don’t specify a theme, a component will use the default one.

Open the CSS file with WebDataRocks styles (e.g., src/styles.css). Include a CSS file of the theme you like.

In our sample, we’ve chosen the Light blue theme:

@import "@webdatarocks/webdatarocks/theme/lightblue/webdatarocks.css";

In case you want to create a custom theme, turn to the detailed tutorial on custom report themes.

Step 2. Update the webpage

Save the applied results and reload the page to see how your pivot table looks now.

Example

Applying the Light blue theme to the pivot table:

See also

• Custom component themes

Export all the contents, layout, and a structure of a pivot table to a file in which format is the most convenient for you – PDF, Excel or HTML. Besides, you can print it as well.

To export a pivot table

• Go to the Export tab () on the Toolbar.
• Choose the format and export the report to the local file system of your device.

To print a pivot table

• Go to the Export tab () on the Toolbar.
• Select Print.

You can change the default size of the cells with a few clicks. 

To resize the rows and columns

• Drag the header border of the row/column to resize its height/width.
• Drag the header border of the row to resize its height.
  

Example

Resize the columns widths:

To return the cells to the initial size, click twice on the header of the row or column:

Use the conditional formatting feature to highlight important values and make your report look more personalized.

To apply conditional formatting

To implement your own logic of highlighting the data, follow the steps below:

1. On the Toolbar, choose the Format tab () > Conditional formatting.
2. Select the plus-sign icon.
3. Choose a value that you want to format (e.g., Sum of Price). If necessary, you can format all values at once.
4. Add a rule; for example, “Less than 100” will apply the changes to all the cells with a value less than 100.
5. Select colors for the text and background, and change the font if necessary.
6. Press the Apply button to see the changes on the grid.

You can add multiple conditions of formatting to the same measure. All of them are saved within a Conditional Format Object.

Our pivot table can easily be translated into different languages. This article describes the process of language localization for WebDataRocks reporting component.

Available localizations

• English (default)
• German
• Spanish
• Italian
• Brazilian Portuguese
• Chinese
• Turkish

Localization files for new languages can be added by creating a new pull request on GitHub. Our team highly appreciates any help.

Create a custom localization file

Follow the steps below to create your own localization file based on our template:

Step 1. Download template JSON file. It contains all labels that are used in WebDataRocks and English values for them.

Step 2. Translate values into the language you want.

For example, you want a Spanish localization. You start from replacing the first label-value pair from the template ("flatHierarchyBox": "Select and arrange columns") with its Spanish equivalent ("flatHierarchyBox": "Seleccionar y organizar columnas") and keep on the same way with the whole file (e.g., check Spanish translated sample).

Localize a specific report

To set a specific language for a report, add a report.localization property with the necessary localization:

report = {
  dataSource: {
    filename: "https://cdn.webdatarocks.com/data/data.csv"
  },
  // Replace this file with your own localization file
  localization: "https://cdn.webdatarocks.com/loc/es.json"
};

report = {
  dataSource: {
    filename: "https://cdn.webdatarocks.com/data/data.csv"
  },
  // Replace the translation below with your own labels
  localization: {
    toolbar: {
      connect: "Conectar",
      open: "Abierto",
      save: "Salvar",
      export: "Exportar",
      // Other labels
    }
  }
};

Set localization for all reports

If you want to set one language for all reports, add a global object with localization when initializing WebDataRocks:

import { Component } from "@angular/core";
import { WebdatarocksPivotModule } from "@webdatarocks/ngx-webdatarocks";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [WebdatarocksPivotModule],
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  report = {
    // Your report
  };
  globalReport = {
    // Replace this file with your own localization file
    localization: "https://cdn.webdatarocks.com/loc/es.json"
  };
}

<app-wbr-pivot
 [toolbar]="true"
 [report]="report"
 [global]="globalReport">
</app-wbr-pivot>

import { Component } from "@angular/core";
import { WebdatarocksPivotModule } from "@webdatarocks/ngx-webdatarocks";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [WebdatarocksPivotModule],
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  report = {
    // Your report
  };
  globalReport = {
    // Replace the translation below with your own labels
    localization: {
      toolbar: {
        connect: "Conectar",
        open: "Abierto",
        save: "Salvar",
        export: "Exportar",
        // Other labels
      }
    }
  };
}

<app-wbr-pivot
 [toolbar]="true"
 [report]="report"
 [global]="globalReport">
</app-wbr-pivot>

Learn more about the Global Object.