0
# Visualization Component
1

2
The core visualization components that render the parallel coordinates chart using React and D3.js. This includes both the React wrapper component and the underlying D3-based visualization function.
3

4
## Capabilities
5

6
### ParallelCoordinates React Component
7

8
Styled React component that wraps the D3 visualization with Superset theming and responsive design.
9

10
```javascript { .api }
11
/**
12
 * React component for parallel coordinates visualization with styling
13
 * @param props - Component props including data and configuration
14
 * @returns JSX element with styled parallel coordinates chart
15
 */
16
function ParallelCoordinates(props: ParallelCoordinatesProps): JSX.Element;
17

18
interface ParallelCoordinatesProps {
19
  /** CSS class name for styling (required) */
20
  className: string;
21
  /** Array of data objects with metric values */
22
  data: Array<Record<string, any>>;
23
  /** Chart width in pixels */
24
  width: number;
25
  /** Chart height in pixels */
26
  height: number;
27
  /** Field name for color mapping (optional) */
28
  colorMetric?: string;
29
  /** Whether to include series as an axis */
30
  includeSeries: boolean;
31
  /** Color scheme name for gradient coloring */
32
  linearColorScheme: string;
33
  /** Array of metric field names to display as axes */
34
  metrics: string[];
35
  /** Series field name */
36
  series?: string;
37
  /** Whether to display interactive data table */
38
  showDatatable: boolean;
39
}
40
```
41

42
**Usage Examples:**
43

44
```javascript
45
import ParallelCoordinates from '@superset-ui/legacy-plugin-chart-parallel-coordinates';
46

47
// Basic usage
48
<ParallelCoordinates
49
  className="my-chart"
50
  data={[
51
    { metric1: 10, metric2: 20, metric3: 30, category: 'A' },
52
    { metric1: 15, metric2: 25, metric3: 35, category: 'B' }
53
  ]}
54
  width={800}
55
  height={400}
56
  metrics={['metric1', 'metric2', 'metric3']}
57
  includeSeries={false}
58
  linearColorScheme="viridis"
59
  showDatatable={false}
60
/>
61

62
// With color mapping and data table
63
<ParallelCoordinates
64
  className="my-chart"
65
  data={data}
66
  width={800}
67
  height={600}
68
  metrics={['sales', 'profit', 'customers']}
69
  colorMetric="profit"
70
  series="region"
71
  includeSeries={true}
72
  linearColorScheme="plasma"
73
  showDatatable={true}
74
/>
75
```
76

77
### Core Visualization Function
78

79
The underlying D3-based function that handles the actual rendering and interaction logic.
80

81
```javascript { .api }
82
/**
83
 * Core D3-based parallel coordinates visualization function
84
 * @param element - DOM element to render the chart into
85
 * @param props - Visualization configuration and data
86
 */
87
function ParallelCoordinates(element: HTMLElement, props: VisualizationProps): void;
88

89
interface VisualizationProps {
90
  /** Array of data objects with metric values */
91
  data: Array<Record<string, any>>;
92
  /** Chart width in pixels */
93
  width: number;
94
  /** Chart height in pixels */
95
  height: number;
96
  /** Field name for color mapping (optional) */
97
  colorMetric?: string;
98
  /** Whether to include series as an axis */
99
  includeSeries: boolean;
100
  /** Color scheme name for gradient coloring */
101
  linearColorScheme: string;
102
  /** Array of metric field names to display as axes */
103
  metrics: string[];
104
  /** Series field name */
105
  series?: string;
106
  /** Whether to display interactive data table */
107
  showDatatable: boolean;
108
}
109
```
110

111
### Visualization Features
112

113
#### Interactive Elements
114

115
The chart provides several interactive features:
116

117
**Axis Reordering:**
118
- Drag and drop axes to reorder columns
119
- Implemented through D3 drag behavior
120
- Maintains data relationships during reordering
121

122
**Brushing and Filtering:**
123
- Click and drag on axes to create selection brushes
124
- Multiple brushes supported across different axes
125
- Real-time filtering of displayed lines
126
- Brush mode: "1D-axes" for single-axis selection
127

128
**Data Table Integration:**
129
- Optional tabular view of the data
130
- Row highlighting on hover
131
- Synchronized with chart brushing
132
- Scrollable interface for large datasets
133

134
#### Visual Styling
135

136
**Line Rendering:**
137
- Canvas-based rendering for performance
138
- Alpha transparency for overlapping lines
139
- Color mapping based on specified metric
140
- Composite blend mode: "darken" for better visibility
141

142
**Axes and Labels:**
143
- SVG-based axis rendering with D3 scales
144
- Draggable axis labels for reordering
145
- Type-aware formatting (string vs numeric)
146
- Hover effects on axis backgrounds
147

148
### Data Processing
149

150
#### Data Transformation
151

152
```javascript { .api }
153
/**
154
 * Data processing and type inference
155
 */
156
interface DataProcessing {
157
  /** Column selection based on includeSeries option */
158
  columns: string[];
159
  /** Type mapping for each column */
160
  types: Record<string, 'string' | 'number'>;
161
  /** Color scale function */
162
  colorScale: (value: any) => string;
163
}
164
```
165

166
**Type Inference:**
167
- Series columns automatically typed as 'string'
168
- Metric columns automatically typed as 'number'
169
- Used for proper axis scaling and formatting
170

171
**Color Mapping:**
172
- Linear color scales from @superset-ui/core
173
- D3 extent calculation for color domain
174
- Fallback to grey when no color metric specified
175

176
#### Layout Calculations
177

178
**Chart Dimensions:**
179
- Effective height calculation for data table split
180
- When `showDatatable` is true: chart height = total height / 2
181
- Full height used when data table is disabled
182

183
**Canvas Layers:**
184
- Multiple canvas layers for different rendering stages
185
- Foreground, background, brushed, and highlight layers
186
- Optimized rendering pipeline for smooth interactions
187

188
### Error Handling
189

190
The component handles several edge cases:
191

192
- **Empty Data**: Graceful handling of empty or null datasets
193
- **Missing Metrics**: Validation of metric field availability in data
194
- **Invalid Dimensions**: Minimum width/height constraints
195
- **Color Scale Errors**: Fallback color schemes for invalid configurations
196

197
### Performance Considerations
198

199
- **Canvas Rendering**: Uses HTML5 Canvas for line rendering performance
200
- **SVG Overlays**: SVG for axes and interactive elements
201
- **Lazy Loading**: Chart component loaded only when needed
202
- **Debounced Interactions**: Optimized brush and hover event handling