Superset UI Plugin Chart Pivot Table

The @superset-ui/plugin-chart-pivot-table package provides a comprehensive pivot table chart plugin for Apache Superset that enables interactive data visualization and summarization. It allows users to create pivot tables by grouping data along two axes, supporting multiple statistics aggregation, drill-to-detail functionality, and interactive chart behaviors.

Package Information

• Package Name: @superset-ui/plugin-chart-pivot-table
• Package Type: npm
• Language: TypeScript
• Installation: npm install @superset-ui/plugin-chart-pivot-table

Core Imports

import { PivotTableChartPlugin } from "@superset-ui/plugin-chart-pivot-table";

For CommonJS:

const { PivotTableChartPlugin } = require("@superset-ui/plugin-chart-pivot-table");

Basic Usage

import { PivotTableChartPlugin } from "@superset-ui/plugin-chart-pivot-table";
import { SuperChart } from "@superset-ui/core";

// Register the plugin
new PivotTableChartPlugin().configure({ key: 'pivot-table-v2' }).register();

// Use in SuperChart component
<SuperChart
  chartType="pivot-table-v2"
  width={600}
  height={600}
  formData={{
    groupbyRows: ['region'],
    groupbyColumns: ['category'], 
    metrics: ['sales'],
    aggregateFunction: 'Sum'
  }}
  queriesData={[{
    data: [
      { region: 'North', category: 'A', sales: 100 },
      { region: 'South', category: 'B', sales: 200 }
    ],
  }]}
/>

Architecture

The plugin is built around the Superset chart plugin architecture with these key components:

• Plugin Class: PivotTableChartPlugin extends the base ChartPlugin with specific metadata and configuration
• Chart Component: PivotTableChart React component renders the actual pivot table visualization
• Query Builder: buildQuery function constructs database queries for pivot table data requirements
• Transform Props: transformProps function processes chart data and configuration into component props
• Control Panel: Configuration UI for setting pivot table options and behaviors
• React PivotTable: Internal pivot table rendering engine with aggregation functions and styling

Capabilities

Plugin Registration

Main plugin class for registering the pivot table chart type with Superset, including chart metadata, behaviors, and configuration options.

export default class PivotTableChartPlugin extends ChartPlugin<
  PivotTableQueryFormData,
  ChartProps<QueryFormData>
> {
  constructor();
}

Plugin Registration

Chart Component

Core React component that renders the pivot table visualization with interactive features, aggregation options, and cross-filtering capabilities.

function PivotTableChart(props: PivotTableProps): JSX.Element;

interface PivotTableProps extends PivotTableStylesProps, PivotTableCustomizeProps {
  data: DataRecord[];
}

Chart Component

Query Building

Data query construction for pivot table requirements, handling groupby columns/rows, metrics, and filtering with support for temporal data and custom ordering.

function buildQuery(formData: PivotTableQueryFormData): QueryContext;

Query Building

Props Transformation

Data and configuration transformation for converting chart properties into component props, including date formatting and color formatter setup.

function transformProps(chartProps: ChartProps<QueryFormData>): PivotTableProps;

Props Transformation

Configuration Types

Complete type definitions for pivot table configuration, styling, and data structure requirements with support for cross-filtering and interactive behaviors.

export interface PivotTableQueryFormData extends QueryFormData, PivotTableStylesProps, PivotTableCustomizeProps {}

export interface PivotTableStylesProps {
  height: number;
  width: number | string;
  margin: number;
}

export enum MetricsLayoutEnum {
  ROWS = 'ROWS',
  COLUMNS = 'COLUMNS'
}

Configuration Types

Internal Architecture

The plugin utilizes an internal pivot table rendering engine with built-in aggregation functions, sorting capabilities, and table rendering options. These components are internal implementation details and not part of the public API.

Note: The pivot table engine components (PivotTable, sortAs, aggregatorTemplates) are internal to the plugin implementation and should not be imported directly. All functionality is accessible through the PivotTableChartPlugin public API.

Internal Architecture Details