Dashboard Chart Registry

Build a chart registry system for a dashboard application that manages and renders visualizations from the @superset-ui/plugin-chart-echarts library.

Requirements

Create a TypeScript/React module that implements a dashboard chart registry with the following functionality:

1. Plugin Registration: Register visualization plugins by unique keys (e.g., "chart_type_1", "chart_type_2") to enable dynamic chart selection and rendering.

2. Multi-Plugin Support: Support registering at least three different visualization plugins from the ECharts plugin suite.

3. Plugin Retrieval: Provide a method to retrieve registered plugins by their keys.

4. React Integration: Create a React component that accepts a plugin key and renders the corresponding visualization, demonstrating proper integration with the visualization plugins.

The implementation should handle the complete plugin lifecycle and demonstrate proficiency in using the @superset-ui/plugin-chart-echarts package within a dashboard composition context.

Dependencies { .dependencies }

@superset-ui/plugin-chart-echarts { .dependency }

Provides ECharts-based chart visualizations for Apache Superset including timeseries, pie, and statistical chart types.

Test Cases

Your implementation should satisfy the following test cases:

• Registering a plugin with key "chart_a" successfully stores it in the registry @test
• Registering a second plugin with key "chart_b" successfully stores it in the registry @test
• Registering a third plugin with key "chart_c" successfully stores it in the registry @test
• Retrieving a registered plugin by key returns the correct instance @test
• The rendering component accepts a plugin key and renders without errors when the key exists @test

@generates

API

/**
 * Chart registry for managing dashboard chart plugins
 */
export class ChartRegistry {
  /**
   * Register a chart plugin with a specific key
   * @param key - Unique identifier for the chart type
   * @param plugin - Chart plugin instance
   */
  register(key: string, plugin: any): void;

  /**
   * Retrieve a registered chart plugin by key
   * @param key - Chart type identifier
   * @returns The registered plugin or undefined if not found
   */
  get(key: string): any | undefined;

  /**
   * Check if a chart type is registered
   * @param key - Chart type identifier
   * @returns True if the chart is registered
   */
  has(key: string): boolean;
}

/**
 * Props for the VisualizationRenderer component
 */
export interface VisualizationRendererProps {
  /** Plugin key from the registry */
  pluginKey: string;
  /** Configuration data for the visualization */
  config?: any;
  /** Visualization height in pixels */
  height?: number;
  /** Visualization width in pixels */
  width?: number;
}

/**
 * Component for rendering visualizations in a dashboard
 * @param props - Renderer component properties
 * @returns Rendered visualization component
 */
export function VisualizationRenderer(props: VisualizationRendererProps): JSX.Element;