CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-superset-ui--plugin-chart-pivot-table

Superset Chart - Pivot Table provides comprehensive pivot table chart plugin for Apache Superset with interactive data visualization and summarization capabilities.

Pending
Overview
Eval results
Files

configuration-types.mddocs/

Configuration Types

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

Capabilities

Core Configuration Types

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[];
};

Style Configuration

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;
}

Customization Configuration

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;
}

Metrics Layout Enumeration

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'
}

Data and Filter Types

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[]>;

Formatting Types

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);

Query Form Types

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

docs

chart-component.md

configuration-types.md

index.md

pivot-table-engine.md

plugin-registration.md

props-transformation.md

query-building.md

tile.json