tessl/npm-superset-ui--legacy-plugin-chart-parallel-coordinates
Superset Legacy Chart plugin providing parallel coordinates visualization for multi-dimensional data analysis
—
Pending
visualization-component.mddocs/
Visualization Component
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.
Capabilities
ParallelCoordinates React Component
Styled React component that wraps the D3 visualization with Superset theming and responsive design.
/**
* React component for parallel coordinates visualization with styling
* @param props - Component props including data and configuration
* @returns JSX element with styled parallel coordinates chart
*/
function ParallelCoordinates(props: ParallelCoordinatesProps): JSX.Element;
interface ParallelCoordinatesProps {
/** CSS class name for styling (required) */
className: string;
/** Array of data objects with metric values */
data: Array<Record<string, any>>;
/** Chart width in pixels */
width: number;
/** Chart height in pixels */
height: number;
/** Field name for color mapping (optional) */
colorMetric?: string;
/** Whether to include series as an axis */
includeSeries: boolean;
/** Color scheme name for gradient coloring */
linearColorScheme: string;
/** Array of metric field names to display as axes */
metrics: string[];
/** Series field name */
series?: string;
/** Whether to display interactive data table */
showDatatable: boolean;
}Usage Examples:
import ParallelCoordinates from '@superset-ui/legacy-plugin-chart-parallel-coordinates';
// Basic usage
<ParallelCoordinates
className="my-chart"
data={[
{ metric1: 10, metric2: 20, metric3: 30, category: 'A' },
{ metric1: 15, metric2: 25, metric3: 35, category: 'B' }
]}
width={800}
height={400}
metrics={['metric1', 'metric2', 'metric3']}
includeSeries={false}
linearColorScheme="viridis"
showDatatable={false}
/>
// With color mapping and data table
<ParallelCoordinates
className="my-chart"
data={data}
width={800}
height={600}
metrics={['sales', 'profit', 'customers']}
colorMetric="profit"
series="region"
includeSeries={true}
linearColorScheme="plasma"
showDatatable={true}
/>Core Visualization Function
The underlying D3-based function that handles the actual rendering and interaction logic.
/**
* Core D3-based parallel coordinates visualization function
* @param element - DOM element to render the chart into
* @param props - Visualization configuration and data
*/
function ParallelCoordinates(element: HTMLElement, props: VisualizationProps): void;
interface VisualizationProps {
/** Array of data objects with metric values */
data: Array<Record<string, any>>;
/** Chart width in pixels */
width: number;
/** Chart height in pixels */
height: number;
/** Field name for color mapping (optional) */
colorMetric?: string;
/** Whether to include series as an axis */
includeSeries: boolean;
/** Color scheme name for gradient coloring */
linearColorScheme: string;
/** Array of metric field names to display as axes */
metrics: string[];
/** Series field name */
series?: string;
/** Whether to display interactive data table */
showDatatable: boolean;
}Visualization Features
Interactive Elements
The chart provides several interactive features:
Axis Reordering:
- Drag and drop axes to reorder columns
- Implemented through D3 drag behavior
- Maintains data relationships during reordering
Brushing and Filtering:
- Click and drag on axes to create selection brushes
- Multiple brushes supported across different axes
- Real-time filtering of displayed lines
- Brush mode: "1D-axes" for single-axis selection
Data Table Integration:
- Optional tabular view of the data
- Row highlighting on hover
- Synchronized with chart brushing
- Scrollable interface for large datasets
Visual Styling
Line Rendering:
- Canvas-based rendering for performance
- Alpha transparency for overlapping lines
- Color mapping based on specified metric
- Composite blend mode: "darken" for better visibility
Axes and Labels:
- SVG-based axis rendering with D3 scales
- Draggable axis labels for reordering
- Type-aware formatting (string vs numeric)
- Hover effects on axis backgrounds
Data Processing
Data Transformation
/**
* Data processing and type inference
*/
interface DataProcessing {
/** Column selection based on includeSeries option */
columns: string[];
/** Type mapping for each column */
types: Record<string, 'string' | 'number'>;
/** Color scale function */
colorScale: (value: any) => string;
}Type Inference:
- Series columns automatically typed as 'string'
- Metric columns automatically typed as 'number'
- Used for proper axis scaling and formatting
Color Mapping:
- Linear color scales from @superset-ui/core
- D3 extent calculation for color domain
- Fallback to grey when no color metric specified
Layout Calculations
Chart Dimensions:
- Effective height calculation for data table split
- When
showDatatableis true: chart height = total height / 2 - Full height used when data table is disabled
Canvas Layers:
- Multiple canvas layers for different rendering stages
- Foreground, background, brushed, and highlight layers
- Optimized rendering pipeline for smooth interactions
Error Handling
The component handles several edge cases:
- Empty Data: Graceful handling of empty or null datasets
- Missing Metrics: Validation of metric field availability in data
- Invalid Dimensions: Minimum width/height constraints
- Color Scale Errors: Fallback color schemes for invalid configurations
Performance Considerations
- Canvas Rendering: Uses HTML5 Canvas for line rendering performance
- SVG Overlays: SVG for axes and interactive elements
- Lazy Loading: Chart component loaded only when needed
- Debounced Interactions: Optimized brush and hover event handling
Install with Tessl CLI
npx tessl i tessl/npm-superset-ui--legacy-plugin-chart-parallel-coordinates