0
# Superset Legacy Plugin Chart Paired T Test
1

2
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.
3

4
**Dependencies**: This plugin requires `distributions` for statistical calculations and `reactable` for table rendering.
5

6
## Package Information
7

8
- **Package Name**: @superset-ui/legacy-plugin-chart-paired-t-test
9
- **Package Type**: npm
10
- **Language**: JavaScript/TypeScript (mixed)
11
- **Installation**: `npm install @superset-ui/legacy-plugin-chart-paired-t-test`
12

13
## Core Imports
14

15
```javascript
16
import PairedTTestChartPlugin from '@superset-ui/legacy-plugin-chart-paired-t-test';
17
```
18

19
For CommonJS:
20

21
```javascript
22
const PairedTTestChartPlugin = require('@superset-ui/legacy-plugin-chart-paired-t-test');
23
```
24

25
Import specific components:
26

27
```javascript
28
import PairedTTestChartPlugin, { dataPropType } from '@superset-ui/legacy-plugin-chart-paired-t-test';
29
```
30

31
## Basic Usage
32

33
```javascript
34
import PairedTTestChartPlugin from '@superset-ui/legacy-plugin-chart-paired-t-test';
35

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

39
// Use with SuperChart
40
<SuperChart
41
  chartType="paired-t-test"
42
  width={600}
43
  height={600}
44
  formData={{
45
    groupby: ['experiment_group'],
46
    metrics: ['conversion_rate', 'click_through_rate'],
47
    significance_level: 0.05,
48
    pvalue_precision: 6,
49
    liftvalue_precision: 4
50
  }}
51
  queriesData={[{
52
    data: {
53
      conversion_rate: [
54
        {
55
          group: ['control'],
56
          values: [{ x: 1, y: 0.15 }, { x: 2, y: 0.16 }, { x: 3, y: 0.14 }]
57
        },
58
        {
59
          group: ['treatment'],
60
          values: [{ x: 1, y: 0.18 }, { x: 2, y: 0.19 }, { x: 3, y: 0.17 }]
61
        }
62
      ]
63
    }
64
  }]}
65
/>
66
```
67

68
## Architecture
69

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

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

78
## Capabilities
79

80
### Chart Plugin Registration
81

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

84
```javascript { .api }
85
class PairedTTestChartPlugin extends ChartPlugin {
86
  constructor();
87
}
88
```
89

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

92
### Chart Metadata
93

94
The plugin includes metadata that describes its characteristics to Superset.
95

96
```javascript { .api }
97
/**
98
 * Chart metadata configuration
99
 * Contains display information and behavioral settings for the chart
100
 */
101
const metadata = {
102
  category: 'Correlation',
103
  description: 'Table that visualizes paired t-tests, which are used to understand statistical differences between groups.',
104
  name: 'Paired t-test Table',
105
  tags: ['Legacy', 'Statistical', 'Tabular'],
106
  thumbnail: string, // Path to thumbnail image
107
  useLegacyApi: true
108
};
109
```
110

111
**Usage:**
112

113
```javascript
114
import PairedTTestChartPlugin from '@superset-ui/legacy-plugin-chart-paired-t-test';
115

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

120
### Chart Component
121

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

124
```javascript { .api }
125
/**
126
 * React component that renders paired t-test analysis tables
127
 * @param alpha - Significance level threshold (default: 0.05)
128
 * @param className - CSS class name for styling
129
 * @param data - Object containing metric data for analysis
130
 * @param groups - Array of group names for comparison
131
 * @param liftValPrec - Decimal precision for lift values (default: 4)
132
 * @param metrics - Array of metric names to analyze
133
 * @param pValPrec - Decimal precision for p-values (default: 6)
134
 */
135
class PairedTTest extends React.PureComponent {
136
  static propTypes: {
137
    alpha: PropTypes.number,
138
    className: PropTypes.string,
139
    data: PropTypes.objectOf(dataPropType).isRequired,
140
    groups: PropTypes.arrayOf(PropTypes.string).isRequired,
141
    liftValPrec: PropTypes.number,
142
    metrics: PropTypes.arrayOf(PropTypes.string).isRequired,
143
    pValPrec: PropTypes.number
144
  };
145
  
146
  static defaultProps: {
147
    alpha: 0.05,
148
    className: '',
149
    liftValPrec: 4,
150
    pValPrec: 6
151
  };
152
}
153
```
154

155
### Statistical Table Component
156

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

159
```javascript { .api }
160
/**
161
 * React component that renders a statistical analysis table for a single metric
162
 * @param alpha - Significance level threshold for determining statistical significance
163
 * @param data - Array of data groups with statistical values
164
 * @param groups - Array of group names for table columns
165
 * @param liftValPrec - Number of decimal places for lift value display
166
 * @param metric - Name of the metric being analyzed
167
 * @param pValPrec - Number of decimal places for p-value display
168
 */
169
class TTestTable extends React.Component {
170
  static propTypes: {
171
    alpha: PropTypes.number,
172
    data: dataPropType.isRequired,
173
    groups: PropTypes.arrayOf(PropTypes.string).isRequired,
174
    liftValPrec: PropTypes.number,
175
    metric: PropTypes.string.isRequired,
176
    pValPrec: PropTypes.number
177
  };
178
  
179
  static defaultProps: {
180
    alpha: 0.05,
181
    liftValPrec: 4,
182
    pValPrec: 6
183
  };
184
  
185
  /**
186
   * Calculate lift percentage between two data series
187
   * @param values - Target group values
188
   * @param control - Control group values
189
   * @returns Formatted lift percentage string
190
   */
191
  computeLift(values: DataPoint[], control: DataPoint[]): string;
192
  
193
  /**
194
   * Calculate p-value using Student's t-test
195
   * @param values - Target group values  
196
   * @param control - Control group values
197
   * @returns Formatted p-value string or NaN for invalid calculations
198
   */
199
  computePValue(values: DataPoint[], control: DataPoint[]): string | number;
200
  
201
  /**
202
   * Compute statistical analysis for all groups against selected control
203
   * @param control - Index of the control group
204
   */
205
  computeTTest(control: number): void;
206
  
207
  /**
208
   * Get CSS class name for styling lift values based on their status
209
   * @param row - Row index to check
210
   * @returns CSS class name ('control', 'invalid', 'true', or 'false')
211
   */
212
  getLiftStatus(row: number): string;
213
  
214
  /**
215
   * Get CSS class name for styling p-values based on their status
216
   * @param row - Row index to check
217
   * @returns CSS class name ('control', 'invalid', or '')
218
   */
219
  getPValueStatus(row: number): string;
220
  
221
  /**
222
   * Determine if a result is statistically significant
223
   * @param row - Row index to check
224
   * @returns 'control' for control group, boolean for significance status
225
   */
226
  getSignificance(row: number): string | boolean;
227
}
228
```
229

230
### Data Transformation
231

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

234
```javascript { .api }
235
/**
236
 * Transform Superset chart props to component props
237
 * @param chartProps - Chart properties from Superset containing formData and queriesData
238
 * @returns Transformed props object for PairedTTest component
239
 */
240
function transformProps(chartProps: {
241
  formData: {
242
    groupby: string[],
243
    liftvaluePrecision: string | number,
244
    metrics: string[] | MetricObject[],
245
    pvaluePrecision: string | number,
246
    significanceLevel: number
247
  },
248
  queriesData: Array<{ data: any }>  
249
}): {
250
  alpha: number,
251
  data: any,
252
  groups: string[],
253
  liftValPrec: number,
254
  metrics: string[],
255
  pValPrec: number
256
};
257
```
258

259
### Data Type Definitions
260

261
PropTypes definition for data validation, exported for external use.
262

263
```javascript { .api }
264
/**
265
 * PropTypes definition for validating data structure passed to TTestTable
266
 * Can be imported and reused in other components
267
 */
268
export const dataPropType: PropTypes.Validator<Array<{
269
  group: string[],
270
  values: Array<{ x: number, y: number }>
271
}>>;
272
```
273

274
### Control Panel Configuration
275

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

278
```typescript { .api }
279
/**
280
 * Control panel configuration for Superset UI
281
 * Defines the form controls available when configuring the chart
282
 */
283
const config: ControlPanelConfig = {
284
  controlPanelSections: [
285
    // Legacy time controls section
286
    {
287
      label: string,
288
      expanded: boolean,
289
      controlSetRows: Array<string[] | ControlConfig[]>
290
    },
291
    // Query configuration section  
292
    {
293
      label: 'Query',
294
      expanded: true,
295
      controlSetRows: [
296
        ['metrics'],
297
        ['adhoc_filters'], 
298
        [{
299
          name: 'groupby',
300
          override: {
301
            validators: [validateNonEmpty]
302
          }
303
        }], // Required field with validation
304
        ['limit', 'timeseries_limit_metric'],
305
        ['order_desc'],
306
        [{
307
          name: 'contribution',
308
          config: {
309
            type: 'CheckboxControl',
310
            label: 'Contribution',
311
            default: false,
312
            description: 'Compute the contribution to the total'
313
          }
314
        }], // Checkbox for contribution calculation
315
        ['row_limit', null]
316
      ]
317
    },
318
    // Parameters section
319
    {
320
      label: 'Parameters', 
321
      expanded: false,
322
      controlSetRows: [
323
        [{
324
          name: 'significance_level',
325
          config: {
326
            type: 'TextControl',
327
            label: 'Significance Level',
328
            default: 0.05,
329
            description: 'Threshold alpha level for determining significance'
330
          }
331
        }], // Alpha threshold (default: 0.05)
332
        [{
333
          name: 'pvalue_precision',
334
          config: {
335
            type: 'TextControl',
336
            label: 'p-value precision',
337
            default: 6,
338
            description: 'Number of decimal places with which to display p-values'
339
          }
340
        }],   // P-value decimal places (default: 6)
341
        [{
342
          name: 'liftvalue_precision',
343
          config: {
344
            type: 'TextControl',
345
            label: 'Lift percent precision',
346
            default: 4,
347
            description: 'Number of decimal places with which to display lift values'
348
          }
349
        }] // Lift value decimal places (default: 4)
350
      ]
351
    }
352
  ]
353
};
354
```
355

356
## Types
357

358
```javascript { .api }
359
/**
360
 * Data structure for individual data points in time series
361
 */
362
interface DataPoint {
363
  x: number; // Time or sequence value
364
  y: number; // Metric value
365
}
366

367
/**
368
 * PropTypes definition for data validation
369
 * Represents the structure of data passed to TTestTable
370
 */
371
const dataPropType = PropTypes.arrayOf(
372
  PropTypes.shape({
373
    group: PropTypes.arrayOf(PropTypes.string), // Group identifier values
374
    values: PropTypes.arrayOf(
375
      PropTypes.shape({
376
        x: PropTypes.number, // Time or sequence value
377
        y: PropTypes.number  // Metric value
378
      })
379
    )
380
  })
381
);
382

383
/**
384
 * Metric object structure when metrics are objects rather than strings
385
 */
386
interface MetricObject {
387
  label: string; // Display name for the metric
388
}
389

390
/**
391
 * Control configuration for form controls
392
 */
393
interface ControlConfig {
394
  name: string;
395
  config?: {
396
    type: string;
397
    label: string;
398
    default: any;
399
    description: string;
400
  };
401
  override?: {
402
    validators: Function[];
403
  };
404
}
405

406
/**
407
 * Control panel configuration structure from @superset-ui/chart-controls
408
 */
409
interface ControlPanelConfig {
410
  controlPanelSections: Array<{
411
    label: string;
412
    expanded: boolean;
413
    controlSetRows: Array<string[] | ControlConfig[]>;
414
  }>;
415
}
416
```
417

418
## Chart Configuration
419

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

422
### Query Controls
423
- **Metrics**: Required. One or more metrics to analyze statistically
424
- **Group By**: Required. Categorical field to create comparison groups
425
- **Filters**: Optional filters to apply to the dataset
426
- **Row Limit**: Maximum number of rows to process
427

428
### Statistical Parameters
429
- **Significance Level**: Alpha threshold for statistical significance (default: 0.05)
430
- **P-value Precision**: Number of decimal places for p-value display (default: 6)  
431
- **Lift Value Precision**: Number of decimal places for lift percentage display (default: 4)
432

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

439
## Error Handling
440

441
The plugin handles several error conditions:
442

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