CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-superset-ui--plugin-chart-word-cloud

A comprehensive word cloud chart plugin for Apache Superset that creates interactive visualizations from text frequency data

—

Pending
Overview
Eval results
Files

plugin-classes.mddocs/

Plugin Classes

Core plugin classes for registering word cloud charts with Apache Superset, supporting both modern and legacy API versions.

Capabilities

WordCloudChartPlugin

Modern chart plugin implementation for current Superset versions with full feature support.

/**
 * Modern word cloud chart plugin extending ChartPlugin
 * Supports the latest Superset chart API with full control panel integration
 */
class WordCloudChartPlugin extends ChartPlugin<WordCloudFormData> {
  constructor();
}

Usage Example:

import { WordCloudChartPlugin } from '@superset-ui/plugin-chart-word-cloud';

// Register the modern plugin
const plugin = new WordCloudChartPlugin();
plugin.configure({ key: 'word-cloud' }).register();

Features:

  • Full control panel with chart customization options
  • Modern form data handling with WordCloudFormData type
  • Support for encodable visual encoding system
  • Category metadata with tags and description
  • Built-in chart examples and thumbnail

LegacyWordCloudChartPlugin

Legacy chart plugin implementation for backward compatibility with older Superset versions.

/**
 * Legacy word cloud chart plugin for backward compatibility
 * Uses legacy API with simplified form data structure
 */
class LegacyWordCloudChartPlugin extends ChartPlugin<LegacyWordCloudFormData> {
  constructor();
}

Usage Example:

import { LegacyWordCloudChartPlugin } from '@superset-ui/plugin-chart-word-cloud';

// Register the legacy plugin
const legacyPlugin = new LegacyWordCloudChartPlugin();
legacyPlugin.configure({ key: 'legacy-word-cloud' }).register();

Features:

  • Backward compatibility with older Superset versions
  • Simplified form data with LegacyWordCloudFormData type
  • Legacy API flag (useLegacyApi: true)
  • Essential functionality without advanced control panel features

Plugin Configuration

Both plugins are configured with the following components:

interface PluginConfiguration {
  buildQuery: (formData: FormData) => QueryContext;
  loadChart: () => Promise<React.ComponentType>;
  metadata: ChartMetadata;
  transformProps: (chartProps: ChartProps) => WordCloudProps;
  controlPanel?: ControlPanelConfig;
}

Build Query Function

Generates query configuration for data fetching from Superset backend with optional sorting by metric:

/**
 * Builds query context for data fetching from Superset backend
 * Configures sorting by metric when sort_by_metric is enabled
 * @param formData - Chart form data configuration containing metric and sort preferences
 * @returns Query context with ordering and filtering options
 */
function buildQuery(formData: WordCloudFormData): QueryContext;

Implementation Details:

  • Extracts metric and sort_by_metric from form data
  • When sort_by_metric is true, adds descending order by the specified metric
  • Uses buildQueryContext from @superset-ui/core for consistent query structure
  • Returns array with single QueryObject containing base query plus optional ordering

Chart Metadata

Metadata configuration for plugin registration:

interface ChartMetadata {
  category: string;
  credits: string[];
  description: string;
  exampleGallery: Array<{ url: string }>;
  name: string;
  tags: string[];
  thumbnail: string;
  useLegacyApi?: boolean;
}

Modern Plugin Metadata:

  • Category: "Ranking"
  • Tags: "Aesthetic", "Categorical", "Comparison", "Description", "Density", "Single Metric"
  • Credits: Links to d3-cloud library
  • Example gallery with sample visualizations

Legacy Plugin Metadata:

  • Simplified metadata structure
  • useLegacyApi: true flag
  • Essential information only

Registration Process

// Step 1: Import the desired plugin
import { WordCloudChartPlugin } from '@superset-ui/plugin-chart-word-cloud';

// Step 2: Create plugin instance
const plugin = new WordCloudChartPlugin();

// Step 3: Configure with unique key
plugin.configure({ key: 'word-cloud' });

// Step 4: Register with Superset
plugin.register();

The registration key ('word-cloud') is used throughout Superset to identify and reference this chart type in dashboards, explore view, and chart configuration.

Install with Tessl CLI

npx tessl i tessl/npm-superset-ui--plugin-chart-word-cloud

docs

control-panel.md

data-transformation.md

encodable-configuration.md

index.md

plugin-classes.md

word-cloud-component.md

tile.json