The PivotPanel control provides a drag-drop UI for editing a PivotEngine's fields and field lists.
You can drag fields among field lists to build views, and use each fields context menu to customize the field properties, including format, aggregate, etc.
Set the PivotPanel.itemsSource property to an instance of a PivotEngine in order to connect the two components.
First, create a host element for the panel
Then instantiate the PivotPanel control and bind the PivotEngine to it.
let panel = new wjOlap.PivotPanel('#panel'); panel.itemsSource = engine; ```
The PivotEngine has several field collections exposed as properties:
The PivotPanel allows you to drag multiple copies of fields into the valueFields collection. When you do that, the panel creates clones that have their own properties.
This allows you to summarize fields using different aggregates and calculations. For example, you can show a column with sums and another with averages, running totals or percentages.
The PivotEngine ensures each dimension field appears only once in the view. If you drag the "Buyer" field into the columnFields area, it will automatically be removed from the rowFields area.
The PivotEngine uses the dimension fields to break up the data into groups. It does this using formatted values, so if you format a date field as year (yyyy) or quarter (q) the data will be summarized by year or quarter.
If you want to be able to summarize the data by year and by quarter, create two copies of the date fields, each with a different format and header.
The filterFields list allows you to apply filters based on fields that are not being used as measures or dimensions.
For example, you may want to show expenses by Buyer and Type for a certain year only.
To do that, follow these steps:
You can edit fields from the PivotPanel's context menu. To do so, right-click a field on the panel and select the "Field Settings…" option. This will bring up a dialog where you can edit the field's properties, including the filter (you can also do this from the PivotGrid on the right):
Now that the PivotPanel is bound to a PivotEngine object containing the data, you can manipulate the views without code. Most of your users will interact with the tool in this manner.
Start by selecting a field and adding it to a field list.