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

Encodable Configuration

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

Configuration system for integrating the encodable library with Superset's color schemes, formatters, and scales to enable seamless visual encoding in word cloud visualizations.

Capabilities

Configure Encodable

Main configuration function that sets up encodable library integration with Superset's theming and formatting systems.

/**
 * Configures the encodable library with Superset-specific resolvers
 * Sets up number formatting, time formatting, color schemes, and color scales
 * Must be called before using encodable features in the word cloud
 */
function configureEncodable(): void;

Usage:

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

// Configure encodable (typically done once during plugin initialization)
configureEncodable();

// Now encodable features work with Superset's theming system

This function is automatically called during plugin initialization, so manual invocation is typically not required.

Resolver Configuration

The configuration sets up four key resolvers that bridge encodable with Superset's systems:

Number Format Resolver

Integrates Superset's number formatting system with encodable.

/**
 * Number format resolver using Superset's formatting system
 * Enables consistent number formatting across charts
 */
type NumberFormatResolver = (format?: string) => (value: number) => string;

Features:

Uses getNumberFormatter from @superset-ui/core
Supports all Superset number format patterns
Consistent formatting with other Superset charts
Handles currency, percentage, and custom number formats

Time Format Resolver

Integrates Superset's time formatting with support for local/UTC time zones.

/**
 * Time format resolver with local time support
 * @param options - Formatting options
 * @param options.format - Time format string (optional)
 * @param options.formatInLocalTime - Whether to format in local time (default: false)
 * @returns Configured time formatter function
 */
type TimeFormatResolver = (options?: {
  format?: string;
  formatInLocalTime?: boolean;
}) => (value: Date | number) => string;

Features:

UTC and local time formatting support
Uses Superset's time formatter registry
Automatic prefix handling for local time (LOCAL_PREFIX)
Default format fallback from registry

Usage Example:

// UTC time formatting (default)
const utcFormatter = timeFormat({ format: '%Y-%m-%d' });

// Local time formatting
const localFormatter = timeFormat({ 
  format: '%Y-%m-%d %H:%M', 
  formatInLocalTime: true 
});

Color Scheme Resolver

Integrates Superset's color scheme registries for both categorical and sequential color schemes.

/**
 * Color scheme resolver supporting categorical and sequential schemes
 * @param options - Color scheme options
 * @param options.name - Scheme name (optional)
 * @param options.type - Scheme type: 'categorical' or 'sequential' (default: 'categorical')
 * @returns Color scheme configuration or undefined if not found
 */
type ColorSchemeResolver = (options?: {
  name?: string;
  type?: 'categorical' | 'sequential';
}) => ColorScheme | undefined;

interface ColorScheme {
  type: 'categorical' | 'sequential';
  // Additional scheme properties from Superset registries
}

Supported Schemes:

Categorical: Uses getCategoricalSchemeRegistry() from Superset
- Examples: 'category10', 'tableau10', 'superset_colors'
Sequential: Uses getSequentialSchemeRegistry() from Superset
- Examples: 'blues', 'greens', 'viridis'

Usage Example:

// Get categorical color scheme
const categorical = colorSchemeResolver({ 
  name: 'category10', 
  type: 'categorical' 
});

// Get sequential color scheme
const sequential = colorSchemeResolver({ 
  name: 'viridis', 
  type: 'sequential' 
});

Categorical Color Scale Resolver

Integrates Superset's categorical color namespace system for consistent color assignment.

/**
 * Categorical color scale resolver using Superset's color namespace
 * Ensures consistent colors across charts and dashboards
 * @param options - Color scale options
 * @param options.name - Color scheme name (optional)
 * @param options.namespace - Color namespace for consistency (optional)
 * @returns Categorical color scale function
 */
type CategoricalColorScaleResolver = (options?: {
  name?: string;
  namespace?: string;
}) => CategoricalColorScale;

type CategoricalColorScale = (value: string, sliceId?: number) => string;

Features:

Consistent color assignment across dashboard charts
Namespace support for color coordination
Integration with CategoricalColorNamespace.getScale()
Automatic color persistence and sharing

Usage Example:

// Get color scale with namespace
const colorScale = colorScaleResolver({ 
  name: 'superset_colors',
  namespace: 'dashboard_colors' 
});

// Use color scale
const color1 = colorScale('category_a', 123); // Returns consistent color
const color2 = colorScale('category_b', 123); // Returns different consistent color

Integration Points

Encodable Library Setup

The configuration is applied to the global Encodable instance:

Encodable
  .setNumberFormatResolver(getNumberFormatter)
  .setTimeFormatResolver(timeFormat)
  .setColorSchemeResolver(colorSchemeResolver)  
  .setCategoricalColorScaleResolver(colorScaleResolver);

Superset Core Dependencies

The configuration integrates with these Superset core systems:

// Number formatting
import { getNumberFormatter } from '@superset-ui/core';

// Time formatting  
import { 
  getTimeFormatter, 
  getTimeFormatterRegistry,
  LOCAL_PREFIX 
} from '@superset-ui/core';

// Color schemes
import { 
  getCategoricalSchemeRegistry,
  getSequentialSchemeRegistry 
} from '@superset-ui/core';

// Color namespace
import { CategoricalColorNamespace } from '@superset-ui/core';

Encodable Library Dependencies

import {
  Encodable,
  ColorSchemeResolver,
  TimeFormatResolver,
  CategoricalColorScaleResolver,
  defaultColorSchemeResolver,
  addPrefix
} from 'encodable';

Configuration Flow

Plugin Initialization: configureEncodable() is called during plugin construction
Resolver Setup: Each resolver is configured with Superset-specific implementations
Encodable Integration: Global Encodable instance receives the configured resolvers
Runtime Usage: Word cloud component uses encodable features seamlessly
Consistent Theming: All visual encodings respect Superset's theming and formatting

This configuration ensures that word cloud visualizations integrate seamlessly with Superset's visual design system and maintain consistency with other chart types in dashboards.

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

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