0
# Chart Configuration
1
2
Control panel definitions and data transformation for configuring heatmap chart options and converting between Superset and visualization data formats.
3
4
## Capabilities
5
6
### Control Panel Configuration
7
8
Defines the form controls available in Superset's chart configuration panel.
9
10
```javascript { .api }
11
interface ControlPanelConfig {
12
controlPanelSections: ControlPanelSection[];
13
controlOverrides: Record<string, any>;
14
}
15
16
interface ControlPanelSection {
17
label: string;
18
expanded: boolean;
19
tabOverride?: string;
20
controlSetRows: ControlSetRow[];
21
}
22
23
type ControlSetRow = Array<string | ControlConfig>;
24
25
interface ControlConfig {
26
name: string;
27
config: {
28
type: string;
29
label: string;
30
description?: string;
31
default?: any;
32
choices?: Array<[string, string]>;
33
renderTrigger?: boolean;
34
clearable?: boolean;
35
validators?: Function[];
36
};
37
}
38
```
39
40
### Form Data Interface
41
42
Data structure containing all chart configuration options from the control panel.
43
44
```javascript { .api }
45
interface FormData {
46
/** X-axis column selection */
47
all_columns_x: string;
48
/** Y-axis column selection */
49
all_columns_y: string;
50
/** Metric for cell values */
51
metric: string | { label: string; [key: string]: any };
52
/** Color scheme for heatmap cells */
53
linearColorScheme: string;
54
/** Bottom margin (auto or number) */
55
bottomMargin: string | number;
56
/** Canvas image rendering mode */
57
canvasImageRendering: 'pixelated' | 'auto';
58
/** Left margin (auto or number) */
59
leftMargin: string | number;
60
/** Whether to normalize values */
61
normalized: boolean;
62
/** Whether to show legend */
63
showLegend: boolean;
64
/** Whether to show percentage in tooltip */
65
showPerc: boolean;
66
/** Whether to show values in cells */
67
showValues: boolean;
68
/** X-axis sorting method */
69
sortXAxis: 'alpha_asc' | 'alpha_desc' | 'value_asc' | 'value_desc';
70
/** Y-axis sorting method */
71
sortYAxis: 'alpha_asc' | 'alpha_desc' | 'value_asc' | 'value_desc';
72
/** X-scale interval for ticks */
73
xscaleInterval: number;
74
/** Y-scale interval for ticks */
75
yscaleInterval: number;
76
/** Value bounds for color coding */
77
yAxisBounds: [number | null, number | null];
78
/** Y-axis value format */
79
yAxisFormat: string;
80
/** Normalization method */
81
normalize_across: 'heatmap' | 'x' | 'y';
82
/** Whether to sort by metric */
83
sort_by_metric: boolean;
84
/** Ad-hoc filters */
85
adhoc_filters: any[];
86
/** Maximum number of rows */
87
row_limit: number;
88
}
89
```
90
91
### Transform Props Function (Internal)
92
93
Internal function that converts Superset chart properties to heatmap component properties. This function is used automatically by the plugin framework and is not directly accessible to users.
94
95
```javascript { .api }
96
/**
97
* Internal function that transforms chart properties from Superset format to component format
98
* Used automatically by the plugin framework during chart rendering
99
* @param chartProps - Chart properties from Superset
100
* @returns Transformed properties for heatmap component
101
*/
102
function transformProps(chartProps: ChartProps): HeatmapProps;
103
104
interface ChartProps {
105
width: number;
106
height: number;
107
formData: FormData;
108
queriesData: Array<{
109
data: {
110
records: HeatmapRecord[];
111
extents: [number, number];
112
};
113
}>;
114
}
115
116
interface HeatmapProps {
117
width: number;
118
height: number;
119
data: {
120
records: HeatmapRecord[];
121
extents: [number, number];
122
};
123
bottomMargin: string | number;
124
canvasImageRendering: string;
125
colorScheme: string;
126
columnX: string;
127
columnY: string;
128
leftMargin: string | number;
129
metric: string | object;
130
normalized: boolean;
131
numberFormat: string;
132
showLegend: boolean;
133
showPercentage: boolean;
134
showValues: boolean;
135
sortXAxis: string;
136
sortYAxis: string;
137
xScaleInterval: number;
138
yScaleInterval: number;
139
yAxisBounds: [number | null, number | null];
140
}
141
```
142
143
## Control Panel Sections
144
145
### Query Section
146
147
Controls for data selection and basic query parameters:
148
149
- **X Axis** (`all_columns_x`): Column selection for X-axis values
150
- **Y Axis** (`all_columns_y`): Column selection for Y-axis values
151
- **Metric** (`metric`): Numeric metric for cell values
152
- **Filters** (`adhoc_filters`): Ad-hoc filtering controls
153
- **Row Limit** (`row_limit`): Maximum number of data rows
154
- **Sort by Metric** (`sort_by_metric`): Whether to sort by metric values
155
156
### Heatmap Options Section
157
158
Visual customization controls:
159
160
- **Color Scheme** (`linear_color_scheme`): Color palette selection
161
- **Scale Intervals**: X and Y axis tick intervals (1-50)
162
- **Rendering** (`canvas_image_rendering`): 'pixelated' or 'auto' smoothing
163
- **Normalization** (`normalize_across`): 'heatmap', 'x', or 'y' normalization
164
- **Margins**: Left and bottom margin configuration
165
- **Value Bounds** (`y_axis_bounds`): Min/max bounds for color coding
166
- **Axis Sorting**: Sorting methods for both axes
167
- **Display Options**: Legend, percentage, and cell value toggles
168
- **Normalization Toggle**: Whether to apply normal distribution
169
170
**Usage Example:**
171
172
```javascript
173
// Transform Superset data to component props
174
const heatmapProps = transformProps({
175
width: 600,
176
height: 400,
177
formData: {
178
all_columns_x: 'category',
179
all_columns_y: 'region',
180
metric: 'sales',
181
linearColorScheme: 'schemeBlues',
182
showLegend: true,
183
showValues: false,
184
normalized: false,
185
xscaleInterval: 1,
186
yscaleInterval: 1,
187
sortXAxis: 'alpha_asc',
188
sortYAxis: 'value_desc'
189
},
190
queriesData: [{
191
data: {
192
records: [
193
{ x: 'Electronics', y: 'North', v: 1000, perc: 0.25, rank: 0.8 },
194
{ x: 'Clothing', y: 'South', v: 750, perc: 0.18, rank: 0.6 }
195
],
196
extents: [0, 1000]
197
}
198
}]
199
});
200
```