Chart Component

/**
 * Main React component that renders the pivot table visualization
 * @param props - Complete configuration and data for the pivot table
 * @returns JSX element containing the rendered pivot table
 */
export default function PivotTableChart(props: PivotTableProps): JSX.Element;

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 through SuperChart
<SuperChart
  chartType="pivot-table-v2"
  width={600}
  height={400}
  formData={{
    groupbyRows: ['region'],
    groupbyColumns: ['category'],
    metrics: ['sales'],
    aggregateFunction: 'Sum',
    colTotals: true,
    rowTotals: true
  }}
  queriesData={[{
    data: [
      { region: 'North', category: 'A', sales: 100 },
      { region: 'South', category: 'B', sales: 200 }
    ]
  }]}
/>

export interface PivotTableProps extends PivotTableStylesProps, PivotTableCustomizeProps {
  /** Array of data records to be pivoted and displayed */
  data: DataRecord[];
}

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

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 */
  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;
  /** Data mask callback for cross-filtering */
  setDataMask: SetDataMaskHook;
  /** Whether to emit cross filters */
  emitCrossFilters?: boolean;
  /** Currently selected filter values */
  selectedFilters?: SelectedFiltersType;
  /** Verbose name mapping */
  verboseMap: JsonObject;
  /** Column-specific formatting */
  columnFormats: JsonObject;
  /** Metrics layout preference */
  metricsLayout?: MetricsLayoutEnum;
  /** Color formatting for metrics */
  metricColorFormatters: ColorFormatters;
  /** Date formatting functions */
  dateFormatters: Record<string, DateFormatter | undefined>;
  /** Legacy ordering configuration */
  legacy_order_by: QueryFormMetric[] | QueryFormMetric | null;
  /** Descending order flag */
  order_desc: boolean;
  /** Context menu handler */
  onContextMenu?: (
    clientX: number,
    clientY: number,
    filters?: BinaryQueryObjectFilterClause[],
  ) => void;
  /** Time grain for temporal data */
  timeGrainSqla?: TimeGranularity;
}

export type DataRecord = Record<string, DataRecordValue>;
export type DataRecordValue = string | number | boolean | null | undefined;

export type FilterType = Record<string, DataRecordValue>;
export type SelectedFiltersType = Record<string, DataRecordValue[]>;

export type DateFormatter =
  | TimeFormatter
  | NumberFormatter
  | ((value: DataRecordValue) => string);