CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-superset-ui--legacy-plugin-chart-paired-t-test

Paired T Test chart plugin for Apache Superset that visualizes statistical differences between groups.

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

index.mddocs/

Superset Legacy Plugin Chart Paired T Test

A specialized chart plugin for Apache Superset that provides paired t-test statistical analysis and visualization in a tabular format. This plugin enables users to compare statistical differences between groups using paired t-test methodology, displaying results with configurable precision and significance testing.

Dependencies: This plugin requires distributions for statistical calculations and reactable for table rendering.

Package Information

  • Package Name: @superset-ui/legacy-plugin-chart-paired-t-test
  • Package Type: npm
  • Language: JavaScript/TypeScript (mixed)
  • Installation: npm install @superset-ui/legacy-plugin-chart-paired-t-test

Core Imports

import PairedTTestChartPlugin from '@superset-ui/legacy-plugin-chart-paired-t-test';

For CommonJS:

const PairedTTestChartPlugin = require('@superset-ui/legacy-plugin-chart-paired-t-test');

Import specific components:

import PairedTTestChartPlugin, { dataPropType } from '@superset-ui/legacy-plugin-chart-paired-t-test';

Basic Usage

import PairedTTestChartPlugin from '@superset-ui/legacy-plugin-chart-paired-t-test';

// Register the plugin with Superset
new PairedTTestChartPlugin().configure({ key: 'paired-t-test' }).register();

// Use with SuperChart
<SuperChart
  chartType="paired-t-test"
  width={600}
  height={600}
  formData={{
    groupby: ['experiment_group'],
    metrics: ['conversion_rate', 'click_through_rate'],
    significance_level: 0.05,
    pvalue_precision: 6,
    liftvalue_precision: 4
  }}
  queriesData={[{
    data: {
      conversion_rate: [
        {
          group: ['control'],
          values: [{ x: 1, y: 0.15 }, { x: 2, y: 0.16 }, { x: 3, y: 0.14 }]
        },
        {
          group: ['treatment'],
          values: [{ x: 1, y: 0.18 }, { x: 2, y: 0.19 }, { x: 3, y: 0.17 }]
        }
      ]
    }
  }]}
/>

Architecture

The plugin follows Superset's chart plugin architecture with these key components:

  • Chart Plugin: Main plugin class that integrates with Superset's charting system
  • Chart Metadata: Describes the chart's category, name, and visual properties
  • Transform Props: Converts Superset form data to component-specific props
  • Control Panel: Defines the configuration UI for the chart
  • React Components: Renders the statistical analysis table

Capabilities

Chart Plugin Registration

Main plugin class that extends Superset's ChartPlugin to provide paired t-test functionality.

class PairedTTestChartPlugin extends ChartPlugin {
  constructor();
}

The plugin exports a default class that can be instantiated, configured and registered with Superset.

Chart Metadata

The plugin includes metadata that describes its characteristics to Superset.

/**
 * Chart metadata configuration
 * Contains display information and behavioral settings for the chart
 */
const metadata = {
  category: 'Correlation',
  description: 'Table that visualizes paired t-tests, which are used to understand statistical differences between groups.',
  name: 'Paired t-test Table',
  tags: ['Legacy', 'Statistical', 'Tabular'],
  thumbnail: string, // Path to thumbnail image
  useLegacyApi: true
};

Usage:

import PairedTTestChartPlugin from '@superset-ui/legacy-plugin-chart-paired-t-test';

// Configure and register the plugin
new PairedTTestChartPlugin().configure({ key: 'paired-t-test' }).register();

Chart Component

Main React component for rendering the paired t-test visualization.

/**
 * React component that renders paired t-test analysis tables
 * @param alpha - Significance level threshold (default: 0.05)
 * @param className - CSS class name for styling
 * @param data - Object containing metric data for analysis
 * @param groups - Array of group names for comparison
 * @param liftValPrec - Decimal precision for lift values (default: 4)
 * @param metrics - Array of metric names to analyze
 * @param pValPrec - Decimal precision for p-values (default: 6)
 */
class PairedTTest extends React.PureComponent {
  static propTypes: {
    alpha: PropTypes.number,
    className: PropTypes.string,
    data: PropTypes.objectOf(dataPropType).isRequired,
    groups: PropTypes.arrayOf(PropTypes.string).isRequired,
    liftValPrec: PropTypes.number,
    metrics: PropTypes.arrayOf(PropTypes.string).isRequired,
    pValPrec: PropTypes.number
  };
  
  static defaultProps: {
    alpha: 0.05,
    className: '',
    liftValPrec: 4,
    pValPrec: 6
  };
}

Statistical Table Component

React component that renders individual metric t-test analysis tables with interactive features.

/**
 * React component that renders a statistical analysis table for a single metric
 * @param alpha - Significance level threshold for determining statistical significance
 * @param data - Array of data groups with statistical values
 * @param groups - Array of group names for table columns
 * @param liftValPrec - Number of decimal places for lift value display
 * @param metric - Name of the metric being analyzed
 * @param pValPrec - Number of decimal places for p-value display
 */
class TTestTable extends React.Component {
  static propTypes: {
    alpha: PropTypes.number,
    data: dataPropType.isRequired,
    groups: PropTypes.arrayOf(PropTypes.string).isRequired,
    liftValPrec: PropTypes.number,
    metric: PropTypes.string.isRequired,
    pValPrec: PropTypes.number
  };
  
  static defaultProps: {
    alpha: 0.05,
    liftValPrec: 4,
    pValPrec: 6
  };
  
  /**
   * Calculate lift percentage between two data series
   * @param values - Target group values
   * @param control - Control group values
   * @returns Formatted lift percentage string
   */
  computeLift(values: DataPoint[], control: DataPoint[]): string;
  
  /**
   * Calculate p-value using Student's t-test
   * @param values - Target group values  
   * @param control - Control group values
   * @returns Formatted p-value string or NaN for invalid calculations
   */
  computePValue(values: DataPoint[], control: DataPoint[]): string | number;
  
  /**
   * Compute statistical analysis for all groups against selected control
   * @param control - Index of the control group
   */
  computeTTest(control: number): void;
  
  /**
   * Get CSS class name for styling lift values based on their status
   * @param row - Row index to check
   * @returns CSS class name ('control', 'invalid', 'true', or 'false')
   */
  getLiftStatus(row: number): string;
  
  /**
   * Get CSS class name for styling p-values based on their status
   * @param row - Row index to check
   * @returns CSS class name ('control', 'invalid', or '')
   */
  getPValueStatus(row: number): string;
  
  /**
   * Determine if a result is statistically significant
   * @param row - Row index to check
   * @returns 'control' for control group, boolean for significance status
   */
  getSignificance(row: number): string | boolean;
}

Data Transformation

Function that transforms Superset chart properties into component-specific props.

/**
 * Transform Superset chart props to component props
 * @param chartProps - Chart properties from Superset containing formData and queriesData
 * @returns Transformed props object for PairedTTest component
 */
function transformProps(chartProps: {
  formData: {
    groupby: string[],
    liftvaluePrecision: string | number,
    metrics: string[] | MetricObject[],
    pvaluePrecision: string | number,
    significanceLevel: number
  },
  queriesData: Array<{ data: any }>  
}): {
  alpha: number,
  data: any,
  groups: string[],
  liftValPrec: number,
  metrics: string[],
  pValPrec: number
};

Data Type Definitions

PropTypes definition for data validation, exported for external use.

/**
 * PropTypes definition for validating data structure passed to TTestTable
 * Can be imported and reused in other components
 */
export const dataPropType: PropTypes.Validator<Array<{
  group: string[],
  values: Array<{ x: number, y: number }>
}>>;

Control Panel Configuration

Configuration object that defines the chart's control panel interface in Superset.

/**
 * Control panel configuration for Superset UI
 * Defines the form controls available when configuring the chart
 */
const config: ControlPanelConfig = {
  controlPanelSections: [
    // Legacy time controls section
    {
      label: string,
      expanded: boolean,
      controlSetRows: Array<string[] | ControlConfig[]>
    },
    // Query configuration section  
    {
      label: 'Query',
      expanded: true,
      controlSetRows: [
        ['metrics'],
        ['adhoc_filters'], 
        [{
          name: 'groupby',
          override: {
            validators: [validateNonEmpty]
          }
        }], // Required field with validation
        ['limit', 'timeseries_limit_metric'],
        ['order_desc'],
        [{
          name: 'contribution',
          config: {
            type: 'CheckboxControl',
            label: 'Contribution',
            default: false,
            description: 'Compute the contribution to the total'
          }
        }], // Checkbox for contribution calculation
        ['row_limit', null]
      ]
    },
    // Parameters section
    {
      label: 'Parameters', 
      expanded: false,
      controlSetRows: [
        [{
          name: 'significance_level',
          config: {
            type: 'TextControl',
            label: 'Significance Level',
            default: 0.05,
            description: 'Threshold alpha level for determining significance'
          }
        }], // Alpha threshold (default: 0.05)
        [{
          name: 'pvalue_precision',
          config: {
            type: 'TextControl',
            label: 'p-value precision',
            default: 6,
            description: 'Number of decimal places with which to display p-values'
          }
        }],   // P-value decimal places (default: 6)
        [{
          name: 'liftvalue_precision',
          config: {
            type: 'TextControl',
            label: 'Lift percent precision',
            default: 4,
            description: 'Number of decimal places with which to display lift values'
          }
        }] // Lift value decimal places (default: 4)
      ]
    }
  ]
};

Types

/**
 * Data structure for individual data points in time series
 */
interface DataPoint {
  x: number; // Time or sequence value
  y: number; // Metric value
}

/**
 * PropTypes definition for data validation
 * Represents the structure of data passed to TTestTable
 */
const dataPropType = PropTypes.arrayOf(
  PropTypes.shape({
    group: PropTypes.arrayOf(PropTypes.string), // Group identifier values
    values: PropTypes.arrayOf(
      PropTypes.shape({
        x: PropTypes.number, // Time or sequence value
        y: PropTypes.number  // Metric value
      })
    )
  })
);

/**
 * Metric object structure when metrics are objects rather than strings
 */
interface MetricObject {
  label: string; // Display name for the metric
}

/**
 * Control configuration for form controls
 */
interface ControlConfig {
  name: string;
  config?: {
    type: string;
    label: string;
    default: any;
    description: string;
  };
  override?: {
    validators: Function[];
  };
}

/**
 * Control panel configuration structure from @superset-ui/chart-controls
 */
interface ControlPanelConfig {
  controlPanelSections: Array<{
    label: string;
    expanded: boolean;
    controlSetRows: Array<string[] | ControlConfig[]>;
  }>;
}

Chart Configuration

The plugin supports several configuration options through Superset's control panel:

Query Controls

  • Metrics: Required. One or more metrics to analyze statistically
  • Group By: Required. Categorical field to create comparison groups
  • Filters: Optional filters to apply to the dataset
  • Row Limit: Maximum number of rows to process

Statistical Parameters

  • Significance Level: Alpha threshold for statistical significance (default: 0.05)
  • P-value Precision: Number of decimal places for p-value display (default: 6)
  • Lift Value Precision: Number of decimal places for lift percentage display (default: 4)

Features

  • Interactive Control Selection: Click any row to set it as the control group for comparisons
  • Sortable Columns: Click column headers to sort by group names, p-values, lift values, or significance
  • Visual Significance Indicators: Color coding for statistically significant results
  • Multiple Metrics: Analyze multiple metrics simultaneously with separate tables

Error Handling

The plugin handles several error conditions:

  • Missing Required Props: Throws error if groups array is empty or undefined
  • Invalid Statistical Data: Returns NaN for infinite or invalid calculation results
  • Statistical Calculation Errors: Catches exceptions from distribution calculations and returns NaN
  • Type Validation: Uses PropTypes for runtime prop validation with detailed error messages

docs

index.md

tile.json