Superset Chart - Pivot Table provides comprehensive pivot table chart plugin for Apache Superset with interactive data visualization and summarization capabilities.
—
Complete type definitions for pivot table configuration, styling, and data structure requirements with support for cross-filtering and interactive behaviors.
Primary interfaces that define pivot table configuration and behavior.
/**
* Complete form data type for pivot table configuration
* Combines base query form data with pivot table specific styles and customization
*/
export type PivotTableQueryFormData = QueryFormData & PivotTableStylesProps & PivotTableCustomizeProps;
/**
* Props interface for the PivotTableChart component
* Extends configuration with actual data to be displayed
*/
export type PivotTableProps = PivotTableStylesProps & PivotTableCustomizeProps & {
/** Array of data records to be pivoted and displayed */
data: DataRecord[];
};Interface defining visual styling and layout properties for the pivot table.
export interface PivotTableStylesProps {
/** Height of the pivot table container in pixels */
height: number;
/** Width of the pivot table container (pixels or CSS string) */
width: number | string;
/** Margin around the pivot table in pixels */
margin: number;
}Comprehensive interface for pivot table behavior and display customization.
interface PivotTableCustomizeProps {
/** Columns to group by in rows */
groupbyRows: QueryFormColumn[];
/** Columns to group by in columns */
groupbyColumns: QueryFormColumn[];
/** Metrics to aggregate and display */
metrics: QueryFormMetric[];
/** Table rendering method identifier */
tableRenderer: string;
/** Column ordering preference */
colOrder: string;
/** Row ordering preference */
rowOrder: string;
/** Aggregation function name */
aggregateFunction: string;
/** Whether to transpose the pivot table */
transposePivot: boolean;
/** Whether to combine multiple metrics */
combineMetric: boolean;
/** Row subtotal positioning */
rowSubtotalPosition: boolean;
/** Column subtotal positioning */
colSubtotalPosition: boolean;
/** Whether to show column totals */
colTotals: boolean;
/** Whether to show row totals */
rowTotals: boolean;
/** Value formatting string */
valueFormat: string;
/** Date formatting string for temporal columns */
dateFormat: string;
/** Conditional formatting rules for metrics */
conditionalFormatting: JsonObject;
/** Data mask callback for cross-filtering */
setDataMask: SetDataMaskHook;
/** Whether to emit cross filters */
emitCrossFilters?: boolean;
/** Currently selected filter values */
selectedFilters?: SelectedFiltersType;
/** Verbose name mapping for display labels */
verboseMap: JsonObject;
/** Column-specific formatting configuration */
columnFormats: JsonObject;
/** Metrics layout preference (rows vs columns) */
metricsLayout?: MetricsLayoutEnum;
/** Color formatting rules for metrics */
metricColorFormatters: ColorFormatters;
/** Date formatting functions by column */
dateFormatters: Record<string, DateFormatter | undefined>;
/** Legacy ordering configuration */
legacy_order_by: QueryFormMetric[] | QueryFormMetric | null;
/** Descending order flag */
order_desc: boolean;
/** Context menu handler for right-click interactions */
onContextMenu?: (
clientX: number,
clientY: number,
filters?: BinaryQueryObjectFilterClause[],
) => void;
/** Time grain for temporal data aggregation */
timeGrainSqla?: TimeGranularity;
}Defines how metrics are positioned within the pivot table structure.
export enum MetricsLayoutEnum {
/** Display metrics as separate rows */
ROWS = 'ROWS',
/** Display metrics as separate columns */
COLUMNS = 'COLUMNS'
}Type definitions for handling data and filtering functionality.
/** Type for individual data record values */
export type DataRecordValue = string | number | boolean | null | undefined;
/** Type for complete data records */
export type DataRecord = Record<string, DataRecordValue>;
/** Type for filter values by column */
export type FilterType = Record<string, DataRecordValue>;
/** Type for selected filter values (multiple values per column) */
export type SelectedFiltersType = Record<string, DataRecordValue[]>;Types for handling date, number, and custom formatting in the pivot table.
/**
* Date formatter type supporting multiple formatting approaches
* Can be a time formatter, number formatter, or custom function
*/
export type DateFormatter =
| TimeFormatter
| NumberFormatter
| ((value: DataRecordValue) => string);Types imported from Superset core for query configuration.
/** Column specification for queries */
export type QueryFormColumn = string | AdhocColumn;
/** Metric specification for queries */
export type QueryFormMetric = string | AdhocMetric;
/** Time granularity options */
export type TimeGranularity = string;
/** JSON object type for flexible configuration */
export type JsonObject = Record<string, any>;
/** Data mask hook for cross-filtering */
export type SetDataMaskHook = (dataMask: DataMask) => void;
/** Color formatters for metric values */
export type ColorFormatters = Record<string, ColorFormatter>;
/** Binary filter clause for query filtering */
interface BinaryQueryObjectFilterClause {
col: string;
op: string;
val: DataRecordValue | DataRecordValue[];
}Usage Example:
import { PivotTableQueryFormData, MetricsLayoutEnum } from "@superset-ui/plugin-chart-pivot-table";
const formData: PivotTableQueryFormData = {
// Base query configuration
datasource: '1__table',
viz_type: 'pivot_table_v2',
// Style configuration
height: 400,
width: 600,
margin: 20,
// Pivot configuration
groupbyRows: ['region', 'category'],
groupbyColumns: ['year'],
metrics: ['sales', 'profit'],
aggregateFunction: 'Sum',
metricsLayout: MetricsLayoutEnum.COLUMNS,
colTotals: true,
rowTotals: true,
transposePivot: false,
// Formatting and display
valueFormat: '.2f',
verboseMap: {
'region': 'Sales Region',
'category': 'Product Category'
},
columnFormats: {},
metricColorFormatters: {},
dateFormatters: {},
// Interactive features
emitCrossFilters: true,
setDataMask: (mask) => console.log('Filter applied:', mask)
};Install with Tessl CLI
npx tessl i tessl/npm-superset-ui--plugin-chart-pivot-table