0
# Superset UI Plugin Chart Pivot Table
1

2
The @superset-ui/plugin-chart-pivot-table package provides a comprehensive pivot table chart plugin for Apache Superset that enables interactive data visualization and summarization. It allows users to create pivot tables by grouping data along two axes, supporting multiple statistics aggregation, drill-to-detail functionality, and interactive chart behaviors.
3

4
## Package Information
5

6
- **Package Name**: @superset-ui/plugin-chart-pivot-table
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install @superset-ui/plugin-chart-pivot-table`
10

11
## Core Imports
12

13
```typescript
14
import { PivotTableChartPlugin } from "@superset-ui/plugin-chart-pivot-table";
15
```
16

17
For CommonJS:
18

19
```javascript
20
const { PivotTableChartPlugin } = require("@superset-ui/plugin-chart-pivot-table");
21
```
22

23
## Basic Usage
24

25
```typescript
26
import { PivotTableChartPlugin } from "@superset-ui/plugin-chart-pivot-table";
27
import { SuperChart } from "@superset-ui/core";
28

29
// Register the plugin
30
new PivotTableChartPlugin().configure({ key: 'pivot-table-v2' }).register();
31

32
// Use in SuperChart component
33
<SuperChart
34
  chartType="pivot-table-v2"
35
  width={600}
36
  height={600}
37
  formData={{
38
    groupbyRows: ['region'],
39
    groupbyColumns: ['category'], 
40
    metrics: ['sales'],
41
    aggregateFunction: 'Sum'
42
  }}
43
  queriesData={[{
44
    data: [
45
      { region: 'North', category: 'A', sales: 100 },
46
      { region: 'South', category: 'B', sales: 200 }
47
    ],
48
  }]}
49
/>
50
```
51

52
## Architecture
53

54
The plugin is built around the Superset chart plugin architecture with these key components:
55

56
- **Plugin Class**: `PivotTableChartPlugin` extends the base ChartPlugin with specific metadata and configuration
57
- **Chart Component**: `PivotTableChart` React component renders the actual pivot table visualization
58
- **Query Builder**: `buildQuery` function constructs database queries for pivot table data requirements
59
- **Transform Props**: `transformProps` function processes chart data and configuration into component props
60
- **Control Panel**: Configuration UI for setting pivot table options and behaviors
61
- **React PivotTable**: Internal pivot table rendering engine with aggregation functions and styling
62

63
## Capabilities
64

65
### Plugin Registration
66

67
Main plugin class for registering the pivot table chart type with Superset, including chart metadata, behaviors, and configuration options.
68

69
```typescript { .api }
70
export default class PivotTableChartPlugin extends ChartPlugin<
71
  PivotTableQueryFormData,
72
  ChartProps<QueryFormData>
73
> {
74
  constructor();
75
}
76
```
77

78
[Plugin Registration](./plugin-registration.md)
79

80
### Chart Component
81

82
Core React component that renders the pivot table visualization with interactive features, aggregation options, and cross-filtering capabilities.
83

84
```typescript { .api }
85
function PivotTableChart(props: PivotTableProps): JSX.Element;
86

87
interface PivotTableProps extends PivotTableStylesProps, PivotTableCustomizeProps {
88
  data: DataRecord[];
89
}
90
```
91

92
[Chart Component](./chart-component.md)
93

94
### Query Building
95

96
Data query construction for pivot table requirements, handling groupby columns/rows, metrics, and filtering with support for temporal data and custom ordering.
97

98
```typescript { .api }
99
function buildQuery(formData: PivotTableQueryFormData): QueryContext;
100
```
101

102
[Query Building](./query-building.md)
103

104
### Props Transformation
105

106
Data and configuration transformation for converting chart properties into component props, including date formatting and color formatter setup.
107

108
```typescript { .api }
109
function transformProps(chartProps: ChartProps<QueryFormData>): PivotTableProps;
110
```
111

112
[Props Transformation](./props-transformation.md)
113

114
### Configuration Types
115

116
Complete type definitions for pivot table configuration, styling, and data structure requirements with support for cross-filtering and interactive behaviors.
117

118
```typescript { .api }
119
export interface PivotTableQueryFormData extends QueryFormData, PivotTableStylesProps, PivotTableCustomizeProps {}
120

121
export interface PivotTableStylesProps {
122
  height: number;
123
  width: number | string;
124
  margin: number;
125
}
126

127
export enum MetricsLayoutEnum {
128
  ROWS = 'ROWS',
129
  COLUMNS = 'COLUMNS'
130
}
131
```
132

133
[Configuration Types](./configuration-types.md)
134

135
### Internal Architecture
136

137
The plugin utilizes an internal pivot table rendering engine with built-in aggregation functions, sorting capabilities, and table rendering options. These components are internal implementation details and not part of the public API.
138

139
**Note:** The pivot table engine components (`PivotTable`, `sortAs`, `aggregatorTemplates`) are internal to the plugin implementation and should not be imported directly. All functionality is accessible through the `PivotTableChartPlugin` public API.
140

141
[Internal Architecture Details](./pivot-table-engine.md)