or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

chart-plugin.mdindex.mdvisualization-component.md
tile.json

tessl/npm-superset-ui--legacy-plugin-chart-parallel-coordinates

Superset Legacy Chart plugin providing parallel coordinates visualization for multi-dimensional data analysis

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@superset-ui/legacy-plugin-chart-parallel-coordinates@0.18.x

To install, run

npx @tessl/cli install tessl/npm-superset-ui--legacy-plugin-chart-parallel-coordinates@0.18.0

index.mddocs/

Superset Legacy Plugin Chart Parallel Coordinates

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.

Package Information

  • Package Name: @superset-ui/legacy-plugin-chart-parallel-coordinates
  • Package Type: npm
  • Language: JavaScript/TypeScript
  • Installation: npm install @superset-ui/legacy-plugin-chart-parallel-coordinates

Core Imports

import ParallelCoordinatesChartPlugin from '@superset-ui/legacy-plugin-chart-parallel-coordinates';

For CommonJS:

const ParallelCoordinatesChartPlugin = require('@superset-ui/legacy-plugin-chart-parallel-coordinates');

Basic Usage

import ParallelCoordinatesChartPlugin from '@superset-ui/legacy-plugin-chart-parallel-coordinates';

// Register the plugin with Superset
new ParallelCoordinatesChartPlugin()
  .configure({ key: 'parallel-coordinates' })
  .register();

Then use it via SuperChart:

<SuperChart
  chartType="parallel-coordinates"
  width={600}
  height={600}
  formData={{
    metrics: ['metric1', 'metric2', 'metric3'],
    series: 'category',
    showDatatable: true,
    includeSeries: false,
    linearColorScheme: 'viridis'
  }}
  queriesData={[{
    data: [
      { metric1: 10, metric2: 20, metric3: 30, category: 'A' },
      { metric1: 15, metric2: 25, metric3: 35, category: 'B' }
    ]
  }]}
/>

Architecture

The plugin is built around several key components:

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

Capabilities

Chart Plugin

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

/**
 * Parallel Coordinates Chart Plugin class for Superset integration
 */
class ParallelCoordinatesChartPlugin extends ChartPlugin {
  constructor();
}

Chart Plugin

Visualization Component

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

/**
 * React component for parallel coordinates visualization
 * @param props - Component props including data and styling
 * @returns JSX element with parallel coordinates chart
 */
function ParallelCoordinates(props: ParallelCoordinatesProps): JSX.Element;

interface ParallelCoordinatesProps {
  className: string;
  data: Array<Record<string, any>>;
  width: number;
  height: number;
  colorMetric?: string;
  includeSeries: boolean;
  linearColorScheme: string;
  metrics: string[];
  series?: string;
  showDatatable: boolean;
}

Visualization Component

Control Panel Configuration

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

/**
 * Control panel configuration for chart options
 */
const config: ControlPanelConfig;

interface ControlPanelConfig {
  controlPanelSections: ControlPanelSection[];
}

Props Transformation

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

/**
 * Transform Superset chart props for parallel coordinates visualization
 * @param chartProps - Standard Superset chart properties
 * @returns Transformed props for ParallelCoordinates component
 */
function transformProps(chartProps: ChartProps): ParallelCoordinatesProps;

interface ChartProps {
  width: number;
  height: number;
  formData: FormData;
  queriesData: QueryData[];
}

interface FormData {
  includeSeries: boolean;
  linearColorScheme: string;
  metrics: Metric[];
  secondaryMetric?: Metric;
  series?: string;
  showDatatable: boolean;
}

interface QueryData {
  data: Array<Record<string, any>>;
}

interface Metric {
  label?: string;
  [key: string]: any;
}

Types

/**
 * Props for the parallel coordinates React component
 */
interface ParallelCoordinatesProps {
  /** CSS class name for styling */
  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;
}

/**
 * Superset chart properties structure
 */
interface ChartProps {
  width: number;
  height: number;
  formData: FormData;
  queriesData: QueryData[];
}

/**
 * Form data configuration from Superset
 */
interface FormData {
  includeSeries: boolean;
  linearColorScheme: string;
  metrics: Metric[];
  secondaryMetric?: Metric;
  series?: string;
  showDatatable: boolean;
}

/**
 * Query result data structure
 */
interface QueryData {
  data: Array<Record<string, any>>;
}

/**
 * Metric configuration object
 */
interface Metric {
  label?: string;
  [key: string]: any;
}