Plugin Registration

/**
 * Main plugin class for registering heatmap chart with Superset
 * Extends ChartPlugin from @superset-ui/core
 */
class HeatmapChartPlugin extends ChartPlugin {
  /**
   * Creates a new heatmap chart plugin instance
   * Sets up metadata, transform function, control panel, and chart loader
   */
  constructor();

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

  /**
   * Registers the plugin with Superset's chart registry
   * Makes the chart available for use in dashboards and explore view
   */
  register(): void;
}

import HeatmapChartPlugin from '@superset-ui/legacy-plugin-chart-heatmap';

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

// Alternative one-liner
new HeatmapChartPlugin().configure({ key: 'heatmap' }).register();

interface ChartMetadata {
  /** Category for chart organization in UI */
  category: string;
  /** Credits/attribution for chart inspiration */
  credits: string[];
  /** Description text shown in chart selection */
  description: string;
  /** Example gallery images with captions */
  exampleGallery: Array<{
    url: string;
    caption: string;
  }>;
  /** Display name for the chart */
  name: string;
  /** Tags for chart categorization and search */
  tags: string[];
  /** Thumbnail image for chart selection */
  thumbnail: string;
  /** Whether to use legacy API format */
  useLegacyApi: boolean;
}

// Internal constructor setup (not directly callable)
super({
  loadChart: () => import('./ReactHeatmap'),
  metadata: new ChartMetadata({
    category: t('Correlation'),
    credits: ['http://bl.ocks.org/mbostock/3074470'],
    description: t('Visualize a related metric across pairs of groups...'),
    exampleGallery: [
      { url: transportation, caption: t('Sizes of vehicles') },
      { url: channels, caption: t('Relationships between community channels') },
      { url: employment, caption: t('Employment and education') }
    ],
    name: t('Heatmap'),
    tags: [t('Business'), t('Intensity'), t('Legacy'), t('Density'), t('Predictive'), t('Single Metric')],
    thumbnail,
    useLegacyApi: true
  }),
  transformProps,
  controlPanel
});