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

Control Panel Configuration

Name: tessl/npm-superset-ui--plugin-chart-word-cloud
Author: tessl

Configuration system for the word cloud chart control panel that defines user interface controls for chart customization within Superset's explore view.

Capabilities

Control Panel Config

Main configuration object that defines all user interface controls and sections for the word cloud chart.

/**
 * Control panel configuration for word cloud chart
 * Defines sections, controls, and validation rules for the UI
 */
interface ControlPanelConfig {
  controlPanelSections: ControlPanelSection[];
  controlOverrides?: Record<string, Partial<ControlConfig>>;
}

interface ControlPanelSection {
  label: string;
  expanded: boolean;
  controlSetRows: (string | ControlSetRow)[][];
}

interface ControlSetRow {
  name: string;
  config: ControlConfig;
}

Control Panel Sections

Legacy Regular Time Section

Inherited time-based controls for temporal data filtering:

// Uses sections.legacyRegularTime from @superset-ui/chart-controls
const timeSection = sections.legacyRegularTime;

Query Section

Core data selection and querying controls:

interface QuerySection {
  label: 'Query';
  expanded: true;
  controlSetRows: [
    ['series'],        // Text field selection (required, non-empty)
    ['metric'],        // Metric selection for sizing
    ['adhoc_filters'], // Dynamic filtering
    ['row_limit'],     // Result count limit (default: 100)
    ['sort_by_metric'] // Checkbox for metric-based sorting
  ];
}

Query Controls:

series: Required text field for word content (validated with validateNonEmpty)
metric: Numeric field for determining word sizes
adhoc_filters: Dynamic filter configuration
row_limit: Maximum number of results (default: 100)
sort_by_metric: Boolean checkbox to sort results by metric value in descending order

Options Section

Visual appearance and formatting controls:

interface OptionsSection {
  label: 'Options';
  expanded: true;
  controlSetRows: [
    ['size_from', 'size_to'], // Font size range controls
    ['rotation'],             // Word rotation pattern
    ['color_scheme']          // Color scheme selection
  ];
}

Font Size Controls:

interface FontSizeControls {
  size_from: {
    type: 'TextControl';
    isInt: true;
    label: 'Minimum Font Size';
    default: 10;
    description: 'Font size for the smallest value in the list';
  };
  size_to: {
    type: 'TextControl';
    isInt: true;
    label: 'Maximum Font Size';
    default: 70;
    description: 'Font size for the biggest value in the list';
  };
}

Rotation Control:

interface RotationControl {
  type: 'SelectControl';
  label: 'Word Rotation';
  choices: [
    ['random', 'random'],
    ['flat', 'flat'],
    ['square', 'square']
  ];
  default: 'square';
  clearable: false;
  description: 'Rotation to apply to words in the cloud';
}

Color Scheme Control:

// Uses standard color_scheme control from @superset-ui/chart-controls
const colorSchemeControl = 'color_scheme';

Control Overrides

Custom validation and default value overrides for specific controls:

interface ControlOverrides {
  series: {
    validators: [typeof validateNonEmpty];
    clearable: false;
  };
  row_limit: {
    default: 100;
  };
}

Override Details:

series override: Ensures the text field is required and cannot be cleared
row_limit override: Sets default result limit to 100 records

Control Types

TextControl

Integer input controls for numeric values:

interface TextControl {
  type: 'TextControl';
  isInt: true;
  label: string;
  renderTrigger: boolean;
  default: number;
  description: string;
}

SelectControl

Dropdown selection controls with predefined choices:

interface SelectControl {
  type: 'SelectControl';
  label: string;
  choices: [string, string][];
  renderTrigger: boolean;
  default: string;
  clearable: boolean;
  description: string;
}

CheckboxControl

Boolean toggle controls:

interface CheckboxControl {
  type: 'CheckboxControl';
  label: string;
  description: string;
}

Validation System

Built-in Validators

/**
 * Validates that a field has a non-empty value
 * Prevents form submission with empty required fields
 */
function validateNonEmpty(value: any): string | false;

Usage Example:

controlOverrides: {
  series: {
    validators: [validateNonEmpty],
    clearable: false,
  }
}

Integration with Superset

Dependencies

import { t, validateNonEmpty } from '@superset-ui/core';
import { ControlPanelConfig, sections } from '@superset-ui/chart-controls';

Localization

All user-facing strings use the t() function for internationalization:

label: t('Query'),
description: t('Font size for the smallest value in the list'),

Standard Controls

Leverages Superset's standard control library:

sections.legacyRegularTime: Time-based filtering controls
'series': Standard field selection control
'metric': Standard metric selection control
'adhoc_filters': Dynamic filter builder
'row_limit': Result count limiter
'color_scheme': Color scheme selector

Configuration Export

const config: ControlPanelConfig = {
  controlPanelSections: [
    sections.legacyRegularTime,
    querySection,
    optionsSection
  ],
  controlOverrides: {
    series: { validators: [validateNonEmpty], clearable: false },
    row_limit: { default: 100 }
  }
};

export default config;

This configuration creates a comprehensive control panel that allows users to:

Select time ranges and apply filters
Choose text and metric fields for the word cloud
Configure visual appearance (font sizes, rotation, colors)
Control data processing (sorting, result limits)
Validate required inputs before chart generation

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