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

Props Transformation

Name: tessl/npm-superset-ui--plugin-chart-pivot-table
Author: tessl

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

Capabilities

transformProps Function

Main function that transforms chart properties from Superset into props for the PivotTableChart component.

/**
 * Transforms chart properties into component props
 * @param chartProps - Chart properties from Superset containing form data and query results
 * @returns Props formatted for the PivotTableChart component
 */
export default function transformProps(chartProps: ChartProps<QueryFormData>): PivotTableProps;

Usage Example:

import transformProps from "@superset-ui/plugin-chart-pivot-table/src/plugin/transformProps";

const chartProps = {
  width: 800,
  height: 600,
  formData: {
    groupbyRows: ['region'],
    groupbyColumns: ['category'],
    metrics: ['sales'],
    aggregateFunction: 'Sum',
    // ... other form data
  },
  queriesData: [{
    data: [
      { region: 'North', category: 'A', sales: 100 },
      { region: 'South', category: 'B', sales: 200 }
    ],
    colnames: ['region', 'category', 'sales'],
    coltypes: ['text', 'text', 'number']
  }],
  // ... other chart properties
};

const pivotTableProps = transformProps(chartProps);
// Returns props ready for PivotTableChart component

ChartProps Input Interface

Input interface containing all data and configuration from Superset.

interface ChartProps<T = QueryFormData> {
  /** Width of the chart container */
  width: number;
  /** Height of the chart container */
  height: number;
  /** Form data containing chart configuration */
  formData: T;
  /** Raw form data without processing */
  rawFormData: T;
  /** Query results data */
  queriesData: QueryData[];
  /** Callback hooks for interactivity */
  hooks: {
    setDataMask?: SetDataMaskHook;
    onContextMenu?: ContextMenuHandler;
  };
  /** Current filter state */
  filterState: FilterState;
  /** Datasource metadata */
  datasource: {
    verboseMap?: JsonObject;
    columnFormats?: JsonObject;
  };
  /** Whether to emit cross filters */
  emitCrossFilters?: boolean;
}

QueryData Interface

Structure of query result data returned from the backend.

interface QueryData {
  /** Array of data records */
  data: DataRecord[];
  /** Column names in the result set */
  colnames: string[];
  /** Column data types */
  coltypes: (GenericDataType | string)[];
  /** Number of rows returned */
  rowcount: number;
  /** SQL query that was executed */
  query: string;
}

Transformation Process

The transformProps function performs these key transformations:

Property Extraction: Extracts width, height, form data, and query results
Date Formatter Creation: Creates date formatters based on temporal columns and format settings
Color Formatter Setup: Processes conditional formatting rules into color formatters
Filter State Processing: Converts filter state into selected filters format
Metadata Preparation: Prepares verbose mappings and column formats

Date Formatter Processing

The function automatically creates date formatters for temporal columns.

/** Date formatter creation based on column types and format settings */
interface DateFormatterCreation {
  /** Input: Column names and types from query results */
  colnames: string[];
  coltypes: (GenericDataType | string)[];
  /** Input: Date format from form data */
  dateFormat: string;
  /** Input: Time granularity for temporal columns */
  granularity?: TimeGranularity;
  /** Output: Date formatters by column name */
  dateFormatters: Record<string, DateFormatter | undefined>;
}

Color Formatter Processing

Processes conditional formatting rules into metric color formatters.

/**
 * Color formatter creation from conditional formatting rules
 * @param conditionalFormatting - Formatting rules from form data
 * @param data - Data records for color range calculations
 * @returns Color formatters by metric name
 */
function getColorFormatters(
  conditionalFormatting: JsonObject,
  data: DataRecord[]
): ColorFormatters;

FilterState Interface

Interface for current filter state in the chart.

interface FilterState {
  /** Currently selected filter values by column */
  selectedFilters?: SelectedFiltersType;
}

interface SelectedFiltersType {
  [columnName: string]: DataRecordValue[];
}

Context Menu Handler

Type for handling right-click context menu interactions.

type ContextMenuHandler = (
  clientX: number,
  clientY: number,
  filters?: BinaryQueryObjectFilterClause[]
) => void;

Advanced Usage:

// Custom transformProps usage with additional processing
import transformProps from "@superset-ui/plugin-chart-pivot-table/src/plugin/transformProps";

const customChartProps = {
  ...baseChartProps,
  formData: {
    ...baseFormData,
    dateFormat: 'YYYY-MM-DD',
    conditionalFormatting: [
      {
        colorScheme: 'red_yellow_blue',
        column: 'sales',
        operator: '>',
        targetValue: 1000
      }
    ]
  }
};

const props = transformProps(customChartProps);
// Results in props with custom date formatting and color rules applied

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

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