0
# Props Transformation
1

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

4
## Capabilities
5

6
### transformProps Function
7

8
Main function that transforms chart properties from Superset into props for the PivotTableChart component.
9

10
```typescript { .api }
11
/**
12
 * Transforms chart properties into component props
13
 * @param chartProps - Chart properties from Superset containing form data and query results
14
 * @returns Props formatted for the PivotTableChart component
15
 */
16
export default function transformProps(chartProps: ChartProps<QueryFormData>): PivotTableProps;
17
```
18

19
**Usage Example:**
20

21
```typescript
22
import transformProps from "@superset-ui/plugin-chart-pivot-table/src/plugin/transformProps";
23

24
const chartProps = {
25
  width: 800,
26
  height: 600,
27
  formData: {
28
    groupbyRows: ['region'],
29
    groupbyColumns: ['category'],
30
    metrics: ['sales'],
31
    aggregateFunction: 'Sum',
32
    // ... other form data
33
  },
34
  queriesData: [{
35
    data: [
36
      { region: 'North', category: 'A', sales: 100 },
37
      { region: 'South', category: 'B', sales: 200 }
38
    ],
39
    colnames: ['region', 'category', 'sales'],
40
    coltypes: ['text', 'text', 'number']
41
  }],
42
  // ... other chart properties
43
};
44

45
const pivotTableProps = transformProps(chartProps);
46
// Returns props ready for PivotTableChart component
47
```
48

49
### ChartProps Input Interface
50

51
Input interface containing all data and configuration from Superset.
52

53
```typescript { .api }
54
interface ChartProps<T = QueryFormData> {
55
  /** Width of the chart container */
56
  width: number;
57
  /** Height of the chart container */
58
  height: number;
59
  /** Form data containing chart configuration */
60
  formData: T;
61
  /** Raw form data without processing */
62
  rawFormData: T;
63
  /** Query results data */
64
  queriesData: QueryData[];
65
  /** Callback hooks for interactivity */
66
  hooks: {
67
    setDataMask?: SetDataMaskHook;
68
    onContextMenu?: ContextMenuHandler;
69
  };
70
  /** Current filter state */
71
  filterState: FilterState;
72
  /** Datasource metadata */
73
  datasource: {
74
    verboseMap?: JsonObject;
75
    columnFormats?: JsonObject;
76
  };
77
  /** Whether to emit cross filters */
78
  emitCrossFilters?: boolean;
79
}
80
```
81

82
### QueryData Interface
83

84
Structure of query result data returned from the backend.
85

86
```typescript { .api }
87
interface QueryData {
88
  /** Array of data records */
89
  data: DataRecord[];
90
  /** Column names in the result set */
91
  colnames: string[];
92
  /** Column data types */
93
  coltypes: (GenericDataType | string)[];
94
  /** Number of rows returned */
95
  rowcount: number;
96
  /** SQL query that was executed */
97
  query: string;
98
}
99
```
100

101
### Transformation Process
102

103
The transformProps function performs these key transformations:
104

105
1. **Property Extraction**: Extracts width, height, form data, and query results
106
2. **Date Formatter Creation**: Creates date formatters based on temporal columns and format settings
107
3. **Color Formatter Setup**: Processes conditional formatting rules into color formatters
108
4. **Filter State Processing**: Converts filter state into selected filters format
109
5. **Metadata Preparation**: Prepares verbose mappings and column formats
110

111
### Date Formatter Processing
112

113
The function automatically creates date formatters for temporal columns.
114

115
```typescript { .api }
116
/** Date formatter creation based on column types and format settings */
117
interface DateFormatterCreation {
118
  /** Input: Column names and types from query results */
119
  colnames: string[];
120
  coltypes: (GenericDataType | string)[];
121
  /** Input: Date format from form data */
122
  dateFormat: string;
123
  /** Input: Time granularity for temporal columns */
124
  granularity?: TimeGranularity;
125
  /** Output: Date formatters by column name */
126
  dateFormatters: Record<string, DateFormatter | undefined>;
127
}
128
```
129

130
### Color Formatter Processing
131

132
Processes conditional formatting rules into metric color formatters.
133

134
```typescript { .api }
135
/**
136
 * Color formatter creation from conditional formatting rules
137
 * @param conditionalFormatting - Formatting rules from form data
138
 * @param data - Data records for color range calculations
139
 * @returns Color formatters by metric name
140
 */
141
function getColorFormatters(
142
  conditionalFormatting: JsonObject,
143
  data: DataRecord[]
144
): ColorFormatters;
145
```
146

147
### FilterState Interface
148

149
Interface for current filter state in the chart.
150

151
```typescript { .api }
152
interface FilterState {
153
  /** Currently selected filter values by column */
154
  selectedFilters?: SelectedFiltersType;
155
}
156

157
interface SelectedFiltersType {
158
  [columnName: string]: DataRecordValue[];
159
}
160
```
161

162
### Context Menu Handler
163

164
Type for handling right-click context menu interactions.
165

166
```typescript { .api }
167
type ContextMenuHandler = (
168
  clientX: number,
169
  clientY: number,
170
  filters?: BinaryQueryObjectFilterClause[]
171
) => void;
172
```
173

174
**Advanced Usage:**
175

176
```typescript
177
// Custom transformProps usage with additional processing
178
import transformProps from "@superset-ui/plugin-chart-pivot-table/src/plugin/transformProps";
179

180
const customChartProps = {
181
  ...baseChartProps,
182
  formData: {
183
    ...baseFormData,
184
    dateFormat: 'YYYY-MM-DD',
185
    conditionalFormatting: [
186
      {
187
        colorScheme: 'red_yellow_blue',
188
        column: 'sales',
189
        operator: '>',
190
        targetValue: 1000
191
      }
192
    ]
193
  }
194
};
195

196
const props = transformProps(customChartProps);
197
// Results in props with custom date formatting and color rules applied
198
```