0
# Superset Legacy Heatmap Chart Plugin
1

2
This plugin provides a D3.js-based heatmap chart visualization for Apache Superset. It renders correlation matrices and data density patterns through color-coded cells in a grid format, with interactive tooltips, customizable styling, and legend support.
3

4
## Package Information
5

6
- **Package Name**: @superset-ui/legacy-plugin-chart-heatmap
7
- **Package Type**: npm
8
- **Language**: JavaScript/TypeScript
9
- **Version**: 0.18.25
10
- **Installation**: `npm install @superset-ui/legacy-plugin-chart-heatmap`
11
- **License**: Apache-2.0
12

13
### Dependencies
14

15
**Runtime Dependencies:**
16
- `d3@^3.5.17` - D3.js library for data visualization
17
- `d3-svg-legend@^1.x` - SVG legend components
18
- `d3-tip@^0.9.1` - Tooltip library for D3
19
- `prop-types@^15.6.2` - Runtime type checking
20

21
**Peer Dependencies:**
22
- `@emotion/react@^11.4.1` - CSS-in-JS styling
23
- `@superset-ui/chart-controls@*` - Chart control components
24
- `@superset-ui/core@*` - Core Superset UI functionality
25
- `react@^16.13.1` - React framework
26

27
## Core Imports
28

29
```javascript
30
import HeatmapChartPlugin from '@superset-ui/legacy-plugin-chart-heatmap';
31
```
32

33
The package provides CommonJS and ES Module builds:
34
- **Main**: `lib/index.js` (CommonJS)
35
- **Module**: `esm/index.js` (ES Module)
36

37
For direct component access:
38
```javascript
39
import { default as HeatmapChartPlugin } from '@superset-ui/legacy-plugin-chart-heatmap';
40
```
41

42
## Basic Usage
43

44
```javascript
45
import HeatmapChartPlugin from '@superset-ui/legacy-plugin-chart-heatmap';
46

47
// Register the plugin
48
new HeatmapChartPlugin().configure({ key: 'heatmap' }).register();
49
```
50

51
Use with SuperChart:
52
```javascript
53
import { SuperChart } from '@superset-ui/core';
54

55
<SuperChart
56
  chartType="heatmap"
57
  width={600}
58
  height={600}
59
  formData={{
60
    // Chart configuration options (control panel field names)
61
    all_columns_x: 'x_column',
62
    all_columns_y: 'y_column',
63
    metric: 'count',
64
    linearColorScheme: 'schemeBlues',
65
    showLegend: true,
66
    showValues: false,
67
    normalized: false
68
  }}
69
  queriesData={[{
70
    data: {
71
      records: [
72
        { x: 'A', y: '1', v: 10, perc: 0.1, rank: 0.5 },
73
        { x: 'B', y: '2', v: 20, perc: 0.2, rank: 0.7 }
74
      ],
75
      extents: [0, 100]
76
    }
77
  }]}
78
/>
79
```
80

81
## Architecture
82

83
The plugin is built around several key components:
84

85
- **Plugin Class**: `HeatmapChartPlugin` extends Superset's `ChartPlugin` for integration
86
- **Chart Metadata**: Configuration including category, description, and visual gallery
87
- **Control Panel**: Form controls for chart customization options
88
- **Transform Functions**: Data transformation between Superset and visualization formats
89
- **D3 Visualization**: Core heatmap rendering using D3.js with canvas optimization
90
- **React Wrapper**: Styled React component using `reactify` pattern with emotion CSS-in-JS theming
91

92
## Capabilities
93

94
### Plugin Registration
95

96
Main plugin class for registering the heatmap chart with Superset.
97

98
```javascript { .api }
99
class HeatmapChartPlugin extends ChartPlugin {
100
  constructor();
101
  configure(options: { key: string }): HeatmapChartPlugin;
102
  register(): void;
103
}
104
```
105

106
[Plugin Registration](./plugin-registration.md)
107

108
### Chart Configuration
109

110
Form data interface used internally for chart customization. These properties are configured through Superset's control panel and passed to the plugin automatically.
111

112
```javascript { .api }
113
interface FormData {
114
  all_columns_x: string;
115
  all_columns_y: string;
116
  metric: string | object;
117
  linearColorScheme: string;
118
  bottomMargin: string | number;
119
  canvasImageRendering: 'pixelated' | 'auto';
120
  leftMargin: string | number;
121
  normalized: boolean;
122
  showLegend: boolean;
123
  showPerc: boolean;
124
  showValues: boolean;
125
  sortXAxis: 'alpha_asc' | 'alpha_desc' | 'value_asc' | 'value_desc';
126
  sortYAxis: 'alpha_asc' | 'alpha_desc' | 'value_asc' | 'value_desc';
127
  xscaleInterval: number;
128
  yscaleInterval: number;
129
  yAxisBounds: [number | null, number | null];
130
  yAxisFormat: string;
131
  normalize_across: 'heatmap' | 'x' | 'y';
132
  sort_by_metric: boolean;
133
}
134
```
135

136
[Chart Configuration](./chart-configuration.md)
137

138
### Heatmap Visualization
139

140
Core D3.js-based heatmap visualization integrated with React. The plugin automatically handles chart rendering through Superset's framework.
141

142
```javascript { .api }
143
interface HeatmapProps {
144
  data: {
145
    records: Array<{
146
      x: string;
147
      y: string;
148
      v: number;
149
      perc: number;
150
      rank: number;
151
    }>;
152
    extents: [number, number];
153
  };
154
  width: number;
155
  height: number;
156
  colorScheme: string;
157
  showLegend: boolean;
158
  showValues: boolean;
159
  // Additional visualization options...
160
}
161
```
162

163
[Heatmap Visualization](./heatmap-visualization.md)
164

165
## API Reference
166

167
### Main Export
168

169
```javascript { .api }
170
export default class HeatmapChartPlugin extends ChartPlugin {
171
  constructor();
172
  configure(options: { key: string }): HeatmapChartPlugin;
173
  register(): void;
174
}
175
```
176

177
### Import Requirements
178

179
```javascript
180
// Required imports for using the plugin
181
import { ChartPlugin } from '@superset-ui/core';
182
import { SuperChart } from '@superset-ui/core';
183

184
// Peer dependencies that must be available
185
import React from 'react';
186
import { Global, css, styled } from '@emotion/react';
187
```
188

189
## Types
190

191
```javascript { .api }
192
interface ChartProps {
193
  width: number;
194
  height: number;
195
  formData: FormData;
196
  queriesData: Array<{
197
    data: {
198
      records: HeatmapRecord[];
199
      extents: [number, number];
200
    };
201
  }>;
202
}
203

204
interface HeatmapRecord {
205
  x: string;
206
  y: string;
207
  v: number;
208
  perc: number;
209
  rank: number;
210
}
211

212
interface ChartMetadata {
213
  category: string;
214
  name: string;
215
  description: string;
216
  tags: string[];
217
  thumbnail: string;
218
  useLegacyApi: boolean;
219
  credits: string[];
220
  exampleGallery: Array<{
221
    url: string;
222
    caption: string;
223
  }>;
224
}
225
```