0
# Chart Component
1

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

4
## Capabilities
5

6
### PivotTableChart Component
7

8
Main React functional component that renders the pivot table visualization.
9

10
```typescript { .api }
11
/**
12
 * Main React component that renders the pivot table visualization
13
 * @param props - Complete configuration and data for the pivot table
14
 * @returns JSX element containing the rendered pivot table
15
 */
16
export default function PivotTableChart(props: PivotTableProps): JSX.Element;
17
```
18

19
**Note:** The `PivotTableChart` component is an internal implementation detail of the plugin and is not intended for direct use. It is automatically rendered by the Superset framework when using the `PivotTableChartPlugin`.
20

21
For proper usage, register the plugin and use it through Superset's SuperChart component:
22

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

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

30
// Use through SuperChart
31
<SuperChart
32
  chartType="pivot-table-v2"
33
  width={600}
34
  height={400}
35
  formData={{
36
    groupbyRows: ['region'],
37
    groupbyColumns: ['category'],
38
    metrics: ['sales'],
39
    aggregateFunction: 'Sum',
40
    colTotals: true,
41
    rowTotals: true
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
### PivotTableProps Interface
53

54
Complete props interface for the PivotTableChart component.
55

56
```typescript { .api }
57
export interface PivotTableProps extends PivotTableStylesProps, PivotTableCustomizeProps {
58
  /** Array of data records to be pivoted and displayed */
59
  data: DataRecord[];
60
}
61

62
interface PivotTableStylesProps {
63
  /** Height of the pivot table container in pixels */
64
  height: number;
65
  /** Width of the pivot table container (pixels or CSS string) */
66
  width: number | string;
67
  /** Margin around the pivot table in pixels */
68
  margin: number;
69
}
70

71
interface PivotTableCustomizeProps {
72
  /** Columns to group by in rows */
73
  groupbyRows: QueryFormColumn[];
74
  /** Columns to group by in columns */
75
  groupbyColumns: QueryFormColumn[];
76
  /** Metrics to aggregate and display */
77
  metrics: QueryFormMetric[];
78
  /** Table rendering method */
79
  tableRenderer: string;
80
  /** Column ordering preference */
81
  colOrder: string;
82
  /** Row ordering preference */
83
  rowOrder: string;
84
  /** Aggregation function name */
85
  aggregateFunction: string;
86
  /** Whether to transpose the pivot table */
87
  transposePivot: boolean;
88
  /** Whether to combine multiple metrics */
89
  combineMetric: boolean;
90
  /** Row subtotal positioning */
91
  rowSubtotalPosition: boolean;
92
  /** Column subtotal positioning */
93
  colSubtotalPosition: boolean;
94
  /** Whether to show column totals */
95
  colTotals: boolean;
96
  /** Whether to show row totals */
97
  rowTotals: boolean;
98
  /** Value formatting string */
99
  valueFormat: string;
100
  /** Data mask callback for cross-filtering */
101
  setDataMask: SetDataMaskHook;
102
  /** Whether to emit cross filters */
103
  emitCrossFilters?: boolean;
104
  /** Currently selected filter values */
105
  selectedFilters?: SelectedFiltersType;
106
  /** Verbose name mapping */
107
  verboseMap: JsonObject;
108
  /** Column-specific formatting */
109
  columnFormats: JsonObject;
110
  /** Metrics layout preference */
111
  metricsLayout?: MetricsLayoutEnum;
112
  /** Color formatting for metrics */
113
  metricColorFormatters: ColorFormatters;
114
  /** Date formatting functions */
115
  dateFormatters: Record<string, DateFormatter | undefined>;
116
  /** Legacy ordering configuration */
117
  legacy_order_by: QueryFormMetric[] | QueryFormMetric | null;
118
  /** Descending order flag */
119
  order_desc: boolean;
120
  /** Context menu handler */
121
  onContextMenu?: (
122
    clientX: number,
123
    clientY: number,
124
    filters?: BinaryQueryObjectFilterClause[],
125
  ) => void;
126
  /** Time grain for temporal data */
127
  timeGrainSqla?: TimeGranularity;
128
}
129
```
130

131
### Data Records
132

133
Structure for input data that will be pivoted and displayed.
134

135
```typescript { .api } 
136
export type DataRecord = Record<string, DataRecordValue>;
137
export type DataRecordValue = string | number | boolean | null | undefined;
138
```
139

140
### Filter Types
141

142
Types for handling filtering and cross-filtering functionality.
143

144
```typescript { .api }
145
export type FilterType = Record<string, DataRecordValue>;
146
export type SelectedFiltersType = Record<string, DataRecordValue[]>;
147
```
148

149
### Date Formatter Types
150

151
Types for handling date and time formatting in the pivot table.
152

153
```typescript { .api }
154
export type DateFormatter =
155
  | TimeFormatter
156
  | NumberFormatter
157
  | ((value: DataRecordValue) => string);
158
```