0
# Superset Legacy Plugin Chart Parallel Coordinates
1

2
A chart plugin for Apache Superset that provides parallel coordinates visualization for multi-dimensional data analysis. It renders individual metrics for each data row vertically and connects them with lines, making it useful for comparing multiple metrics across all samples in a dataset.
3

4
## Package Information
5

6
- **Package Name**: @superset-ui/legacy-plugin-chart-parallel-coordinates
7
- **Package Type**: npm
8
- **Language**: JavaScript/TypeScript
9
- **Installation**: `npm install @superset-ui/legacy-plugin-chart-parallel-coordinates`
10

11
## Core Imports
12

13
```javascript
14
import ParallelCoordinatesChartPlugin from '@superset-ui/legacy-plugin-chart-parallel-coordinates';
15
```
16

17
For CommonJS:
18

19
```javascript
20
const ParallelCoordinatesChartPlugin = require('@superset-ui/legacy-plugin-chart-parallel-coordinates');
21
```
22

23
## Basic Usage
24

25
```javascript
26
import ParallelCoordinatesChartPlugin from '@superset-ui/legacy-plugin-chart-parallel-coordinates';
27

28
// Register the plugin with Superset
29
new ParallelCoordinatesChartPlugin()
30
  .configure({ key: 'parallel-coordinates' })
31
  .register();
32
```
33

34
Then use it via SuperChart:
35

36
```javascript
37
<SuperChart
38
  chartType="parallel-coordinates"
39
  width={600}
40
  height={600}
41
  formData={{
42
    metrics: ['metric1', 'metric2', 'metric3'],
43
    series: 'category',
44
    showDatatable: true,
45
    includeSeries: false,
46
    linearColorScheme: 'viridis'
47
  }}
48
  queriesData={[{
49
    data: [
50
      { metric1: 10, metric2: 20, metric3: 30, category: 'A' },
51
      { metric1: 15, metric2: 25, metric3: 35, category: 'B' }
52
    ]
53
  }]}
54
/>
55
```
56

57
## Architecture
58

59
The plugin is built around several key components:
60

61
- **Plugin Registration**: `ParallelCoordinatesChartPlugin` class extends ChartPlugin for Superset integration
62
- **Chart Component**: React wrapper that provides styled container for the D3 visualization
63
- **D3 Visualization**: Core parallel coordinates implementation using D3.js and custom parcoords library
64
- **Control Panel**: Configuration UI for chart options and data selection
65
- **Props Transformation**: Transforms Superset props into format expected by visualization component
66

67
## Capabilities
68

69
### Chart Plugin
70

71
Main plugin class for registering the parallel coordinates chart with Apache Superset. Handles metadata, configuration, and lazy loading of chart components.
72

73
```javascript { .api }
74
/**
75
 * Parallel Coordinates Chart Plugin class for Superset integration
76
 */
77
class ParallelCoordinatesChartPlugin extends ChartPlugin {
78
  constructor();
79
}
80
```
81

82
[Chart Plugin](./chart-plugin.md)
83

84
### Visualization Component
85

86
Core React component that renders the parallel coordinates visualization with D3.js. Provides interactive features like brushing, filtering, and optional data table display.
87

88
```javascript { .api }
89
/**
90
 * React component for parallel coordinates visualization
91
 * @param props - Component props including data and styling
92
 * @returns JSX element with parallel coordinates chart
93
 */
94
function ParallelCoordinates(props: ParallelCoordinatesProps): JSX.Element;
95

96
interface ParallelCoordinatesProps {
97
  className: string;
98
  data: Array<Record<string, any>>;
99
  width: number;
100
  height: number;
101
  colorMetric?: string;
102
  includeSeries: boolean;
103
  linearColorScheme: string;
104
  metrics: string[];
105
  series?: string;
106
  showDatatable: boolean;
107
}
108
```
109

110
[Visualization Component](./visualization-component.md)
111

112
### Control Panel Configuration
113

114
Superset control panel configuration that defines the available options and controls for configuring the parallel coordinates chart.
115

116
```typescript { .api }
117
/**
118
 * Control panel configuration for chart options
119
 */
120
const config: ControlPanelConfig;
121

122
interface ControlPanelConfig {
123
  controlPanelSections: ControlPanelSection[];
124
}
125
```
126

127
### Props Transformation
128

129
Utility function that transforms standard Superset chart props into the format expected by the parallel coordinates visualization component.
130

131
```javascript { .api }
132
/**
133
 * Transform Superset chart props for parallel coordinates visualization
134
 * @param chartProps - Standard Superset chart properties
135
 * @returns Transformed props for ParallelCoordinates component
136
 */
137
function transformProps(chartProps: ChartProps): ParallelCoordinatesProps;
138

139
interface ChartProps {
140
  width: number;
141
  height: number;
142
  formData: FormData;
143
  queriesData: QueryData[];
144
}
145

146
interface FormData {
147
  includeSeries: boolean;
148
  linearColorScheme: string;
149
  metrics: Metric[];
150
  secondaryMetric?: Metric;
151
  series?: string;
152
  showDatatable: boolean;
153
}
154

155
interface QueryData {
156
  data: Array<Record<string, any>>;
157
}
158

159
interface Metric {
160
  label?: string;
161
  [key: string]: any;
162
}
163
```
164

165
## Types
166

167
```typescript { .api }
168
/**
169
 * Props for the parallel coordinates React component
170
 */
171
interface ParallelCoordinatesProps {
172
  /** CSS class name for styling */
173
  className: string;
174
  /** Array of data objects with metric values */
175
  data: Array<Record<string, any>>;
176
  /** Chart width in pixels */
177
  width: number;
178
  /** Chart height in pixels */
179
  height: number;
180
  /** Field name for color mapping (optional) */
181
  colorMetric?: string;
182
  /** Whether to include series as an axis */
183
  includeSeries: boolean;
184
  /** Color scheme name for gradient coloring */
185
  linearColorScheme: string;
186
  /** Array of metric field names to display as axes */
187
  metrics: string[];
188
  /** Series field name */
189
  series?: string;
190
  /** Whether to display interactive data table */
191
  showDatatable: boolean;
192
}
193

194
/**
195
 * Superset chart properties structure
196
 */
197
interface ChartProps {
198
  width: number;
199
  height: number;
200
  formData: FormData;
201
  queriesData: QueryData[];
202
}
203

204
/**
205
 * Form data configuration from Superset
206
 */
207
interface FormData {
208
  includeSeries: boolean;
209
  linearColorScheme: string;
210
  metrics: Metric[];
211
  secondaryMetric?: Metric;
212
  series?: string;
213
  showDatatable: boolean;
214
}
215

216
/**
217
 * Query result data structure
218
 */
219
interface QueryData {
220
  data: Array<Record<string, any>>;
221
}
222

223
/**
224
 * Metric configuration object
225
 */
226
interface Metric {
227
  label?: string;
228
  [key: string]: any;
229
}
230
```