0
# Plugin Registration
1

2
The main plugin class that integrates the heatmap chart with Apache Superset's chart framework.
3

4
## Capabilities
5

6
### HeatmapChartPlugin Class
7

8
Extends Superset's ChartPlugin to provide heatmap visualization functionality.
9

10
```javascript { .api }
11
/**
12
 * Main plugin class for registering heatmap chart with Superset
13
 * Extends ChartPlugin from @superset-ui/core
14
 */
15
class HeatmapChartPlugin extends ChartPlugin {
16
  /**
17
   * Creates a new heatmap chart plugin instance
18
   * Sets up metadata, transform function, control panel, and chart loader
19
   */
20
  constructor();
21

22
  /**
23
   * Configures the plugin with options
24
   * @param options - Configuration object containing the chart key
25
   * @param options.key - Unique identifier for the chart type
26
   * @returns The plugin instance for method chaining
27
   */
28
  configure(options: { key: string }): HeatmapChartPlugin;
29

30
  /**
31
   * Registers the plugin with Superset's chart registry
32
   * Makes the chart available for use in dashboards and explore view
33
   */
34
  register(): void;
35
}
36
```
37

38
**Usage Example:**
39

40
```javascript
41
import HeatmapChartPlugin from '@superset-ui/legacy-plugin-chart-heatmap';
42

43
// Create and register the plugin
44
const heatmapPlugin = new HeatmapChartPlugin();
45
heatmapPlugin.configure({ key: 'heatmap' }).register();
46

47
// Alternative one-liner
48
new HeatmapChartPlugin().configure({ key: 'heatmap' }).register();
49
```
50

51
### Chart Metadata
52

53
Metadata configuration that defines the chart's properties and gallery examples.
54

55
```javascript { .api }
56
interface ChartMetadata {
57
  /** Category for chart organization in UI */
58
  category: string;
59
  /** Credits/attribution for chart inspiration */
60
  credits: string[];
61
  /** Description text shown in chart selection */
62
  description: string;
63
  /** Example gallery images with captions */
64
  exampleGallery: Array<{
65
    url: string;
66
    caption: string;
67
  }>;
68
  /** Display name for the chart */
69
  name: string;
70
  /** Tags for chart categorization and search */
71
  tags: string[];
72
  /** Thumbnail image for chart selection */
73
  thumbnail: string;
74
  /** Whether to use legacy API format */
75
  useLegacyApi: boolean;
76
}
77
```
78

79
The metadata includes:
80
- **Category**: `t('Correlation')` - Localized 'Correlation' category
81
- **Name**: `t('Heatmap')` - Localized 'Heatmap' display name
82
- **Tags**: `[t('Business'), t('Intensity'), t('Legacy'), t('Density'), t('Predictive'), t('Single Metric')]`
83
- **Credits**: `['http://bl.ocks.org/mbostock/3074470']` - Attribution to original D3 example
84
- **Description**: Localized text explaining correlation visualization use cases
85
- **Example Gallery**: Three examples with captions:
86
  - Transportation (sizes of vehicles)
87
  - Channels (relationships between community channels) 
88
  - Employment (employment and education)
89
- **Thumbnail**: Static PNG thumbnail image
90
- **Legacy API**: `useLegacyApi: true` for backward compatibility
91

92
### Plugin Constructor Configuration
93

94
The constructor automatically sets up the plugin with required components:
95

96
- **Chart Loader**: `() => import('./ReactHeatmap')` - Dynamic import for code splitting
97
- **Metadata**: `ChartMetadata` instance with category, gallery, and localization
98
- **Transform Props**: `transformProps` function mapping FormData to component props
99
- **Control Panel**: Complete configuration with query and heatmap option sections
100

101
```javascript
102
// Internal constructor setup (not directly callable)
103
super({
104
  loadChart: () => import('./ReactHeatmap'),
105
  metadata: new ChartMetadata({
106
    category: t('Correlation'),
107
    credits: ['http://bl.ocks.org/mbostock/3074470'],
108
    description: t('Visualize a related metric across pairs of groups...'),
109
    exampleGallery: [
110
      { url: transportation, caption: t('Sizes of vehicles') },
111
      { url: channels, caption: t('Relationships between community channels') },
112
      { url: employment, caption: t('Employment and education') }
113
    ],
114
    name: t('Heatmap'),
115
    tags: [t('Business'), t('Intensity'), t('Legacy'), t('Density'), t('Predictive'), t('Single Metric')],
116
    thumbnail,
117
    useLegacyApi: true
118
  }),
119
  transformProps,
120
  controlPanel
121
});
122
```