tessl/npm-superset-ui--legacy-plugin-chart-heatmap
Apache Superset legacy heatmap chart plugin providing D3.js-based visualization for correlation matrices and data density patterns.
—
Pending
chart-configuration.mddocs/
Chart Configuration
Control panel definitions and data transformation for configuring heatmap chart options and converting between Superset and visualization data formats.
Capabilities
Control Panel Configuration
Defines the form controls available in Superset's chart configuration panel.
interface ControlPanelConfig {
controlPanelSections: ControlPanelSection[];
controlOverrides: Record<string, any>;
}
interface ControlPanelSection {
label: string;
expanded: boolean;
tabOverride?: string;
controlSetRows: ControlSetRow[];
}
type ControlSetRow = Array<string | ControlConfig>;
interface ControlConfig {
name: string;
config: {
type: string;
label: string;
description?: string;
default?: any;
choices?: Array<[string, string]>;
renderTrigger?: boolean;
clearable?: boolean;
validators?: Function[];
};
}Form Data Interface
Data structure containing all chart configuration options from the control panel.
interface FormData {
/** X-axis column selection */
all_columns_x: string;
/** Y-axis column selection */
all_columns_y: string;
/** Metric for cell values */
metric: string | { label: string; [key: string]: any };
/** Color scheme for heatmap cells */
linearColorScheme: string;
/** Bottom margin (auto or number) */
bottomMargin: string | number;
/** Canvas image rendering mode */
canvasImageRendering: 'pixelated' | 'auto';
/** Left margin (auto or number) */
leftMargin: string | number;
/** Whether to normalize values */
normalized: boolean;
/** Whether to show legend */
showLegend: boolean;
/** Whether to show percentage in tooltip */
showPerc: boolean;
/** Whether to show values in cells */
showValues: boolean;
/** X-axis sorting method */
sortXAxis: 'alpha_asc' | 'alpha_desc' | 'value_asc' | 'value_desc';
/** Y-axis sorting method */
sortYAxis: 'alpha_asc' | 'alpha_desc' | 'value_asc' | 'value_desc';
/** X-scale interval for ticks */
xscaleInterval: number;
/** Y-scale interval for ticks */
yscaleInterval: number;
/** Value bounds for color coding */
yAxisBounds: [number | null, number | null];
/** Y-axis value format */
yAxisFormat: string;
/** Normalization method */
normalize_across: 'heatmap' | 'x' | 'y';
/** Whether to sort by metric */
sort_by_metric: boolean;
/** Ad-hoc filters */
adhoc_filters: any[];
/** Maximum number of rows */
row_limit: number;
}Transform Props Function (Internal)
Internal function that converts Superset chart properties to heatmap component properties. This function is used automatically by the plugin framework and is not directly accessible to users.
/**
* Internal function that transforms chart properties from Superset format to component format
* Used automatically by the plugin framework during chart rendering
* @param chartProps - Chart properties from Superset
* @returns Transformed properties for heatmap component
*/
function transformProps(chartProps: ChartProps): HeatmapProps;
interface ChartProps {
width: number;
height: number;
formData: FormData;
queriesData: Array<{
data: {
records: HeatmapRecord[];
extents: [number, number];
};
}>;
}
interface HeatmapProps {
width: number;
height: number;
data: {
records: HeatmapRecord[];
extents: [number, number];
};
bottomMargin: string | number;
canvasImageRendering: string;
colorScheme: string;
columnX: string;
columnY: string;
leftMargin: string | number;
metric: string | object;
normalized: boolean;
numberFormat: string;
showLegend: boolean;
showPercentage: boolean;
showValues: boolean;
sortXAxis: string;
sortYAxis: string;
xScaleInterval: number;
yScaleInterval: number;
yAxisBounds: [number | null, number | null];
}Control Panel Sections
Query Section
Controls for data selection and basic query parameters:
- X Axis (
all_columns_x): Column selection for X-axis values - Y Axis (
all_columns_y): Column selection for Y-axis values - Metric (
metric): Numeric metric for cell values - Filters (
adhoc_filters): Ad-hoc filtering controls - Row Limit (
row_limit): Maximum number of data rows - Sort by Metric (
sort_by_metric): Whether to sort by metric values
Heatmap Options Section
Visual customization controls:
- Color Scheme (
linear_color_scheme): Color palette selection - Scale Intervals: X and Y axis tick intervals (1-50)
- Rendering (
canvas_image_rendering): 'pixelated' or 'auto' smoothing - Normalization (
normalize_across): 'heatmap', 'x', or 'y' normalization - Margins: Left and bottom margin configuration
- Value Bounds (
y_axis_bounds): Min/max bounds for color coding - Axis Sorting: Sorting methods for both axes
- Display Options: Legend, percentage, and cell value toggles
- Normalization Toggle: Whether to apply normal distribution
Usage Example:
// Transform Superset data to component props
const heatmapProps = transformProps({
width: 600,
height: 400,
formData: {
all_columns_x: 'category',
all_columns_y: 'region',
metric: 'sales',
linearColorScheme: 'schemeBlues',
showLegend: true,
showValues: false,
normalized: false,
xscaleInterval: 1,
yscaleInterval: 1,
sortXAxis: 'alpha_asc',
sortYAxis: 'value_desc'
},
queriesData: [{
data: {
records: [
{ x: 'Electronics', y: 'North', v: 1000, perc: 0.25, rank: 0.8 },
{ x: 'Clothing', y: 'South', v: 750, perc: 0.18, rank: 0.6 }
],
extents: [0, 1000]
}
}]
});Install with Tessl CLI
npx tessl i tessl/npm-superset-ui--legacy-plugin-chart-heatmap