or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

control-panel.mddata-transformation.mdencodable-configuration.mdindex.mdplugin-classes.mdword-cloud-component.md
tile.json

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

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@superset-ui/plugin-chart-word-cloud@0.18.x

To install, run

npx @tessl/cli install tessl/npm-superset-ui--plugin-chart-word-cloud@0.18.0

index.mddocs/

Superset UI Word Cloud Plugin

A comprehensive word cloud chart plugin for Apache Superset that creates interactive visualizations from text frequency data. Built with TypeScript and React, it leverages D3.js to create visually appealing word clouds with configurable scaling, color schemes, and layout options through the Superset chart control panel.

Package Information

  • Package Name: @superset-ui/plugin-chart-word-cloud
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @superset-ui/plugin-chart-word-cloud

Core Imports

import { 
  WordCloudChartPlugin, 
  LegacyWordCloudChartPlugin,
  WordCloudTransformProps,
  configureEncodable,
  type WordCloudFormData,
  type WordCloudProps
} from '@superset-ui/plugin-chart-word-cloud';

For CommonJS:

const { 
  WordCloudChartPlugin, 
  LegacyWordCloudChartPlugin,
  WordCloudTransformProps,
  configureEncodable
} = require('@superset-ui/plugin-chart-word-cloud');

Basic Usage

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

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

// Use with SuperChart
import { SuperChart } from '@superset-ui/core';

<SuperChart
  chartType="word-cloud"
  width={600}
  height={400}
  formData={{
    series: 'word_column',
    metric: 'count',
    rotation: 'random',
    encoding: {
      fontSize: { field: 'count', type: 'quantitative' },
      color: { field: 'category', type: 'nominal' },
      text: { field: 'word_column' }
    }
  }}
  queriesData={[{
    data: [
      { word_column: 'data', count: 100, category: 'tech' },
      { word_column: 'visualization', count: 85, category: 'tech' },
      { word_column: 'analytics', count: 70, category: 'business' }
    ]
  }]}
/>

Architecture

The plugin is built around several key components:

  • Plugin Classes: Modern (WordCloudChartPlugin) and legacy (LegacyWordCloudChartPlugin) implementations for different Superset versions
  • Chart Component: React-based WordCloud component using D3.js for rendering
  • Transform Functions: Data transformation utilities for converting Superset chart props to component props
  • Encoding System: Configurable visual encoding channels (color, fontSize, text, fontFamily, fontWeight) using the encodable library
  • Control Panel: Superset chart control configuration for user customization

Capabilities

Chart Plugin Registration

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

class WordCloudChartPlugin extends ChartPlugin<WordCloudFormData> {
  constructor();
}

class LegacyWordCloudChartPlugin extends ChartPlugin<LegacyWordCloudFormData> {
  constructor();
}

Plugin Classes

Word Cloud Visualization

React component for rendering interactive word cloud visualizations with configurable encoding channels and rotation options.

interface WordCloudProps {
  data: PlainObject[];
  height: number;
  width: number;
  sliceId: number;
  encoding?: Partial<WordCloudEncoding>;
  rotation?: RotationType;
}

type RotationType = 'flat' | 'random' | 'square';

Word Cloud Component

Data Transformation

Transform functions that convert Superset chart properties into word cloud component properties, handling both modern and legacy form data formats.

function WordCloudTransformProps(chartProps: ChartProps): WordCloudProps;

function getMetricLabel(
  metric: LegacyWordCloudFormData['metric']
): string | undefined;

Data Transformation

Encodable Configuration

Configuration system for integrating the encodable library with Superset's color schemes, formatters, and scales.

function configureEncodable(): void;

Encodable Configuration

Control Panel Configuration

User interface controls for chart customization within Superset's explore view, including data selection, formatting options, and validation rules.

interface ControlPanelConfig {
  controlPanelSections: ControlPanelSection[];
  controlOverrides?: Record<string, Partial<ControlConfig>>;
}

Control Panel

Constants

const ROTATION: Record<RotationType, () => number> = {
  flat: () => 0,
  random: () => Math.floor(seedRandom() * 6 - 3) * 30,
  square: () => Math.floor(seedRandom() * 2) * 90,
};

const SCALE_FACTOR_STEP = 0.5;
const MAX_SCALE_FACTOR = 3;
const TOP_RESULTS_PERCENTAGE = 0.1;

Types

interface WordCloudFormData extends QueryFormData, WordCloudVisualProps {
  series: string;
}

interface LegacyWordCloudFormData extends QueryFormData {
  colorScheme: string;
  rotation?: RotationType;
  series: string;
  sizeFrom?: number;
  sizeTo: number;
}

interface WordCloudVisualProps {
  encoding?: Partial<WordCloudEncoding>;
  rotation?: RotationType;
}

type WordCloudEncoding = DeriveEncoding<WordCloudEncodingConfig>;

type WordCloudEncodingConfig = {
  color: ['Color', string];
  fontFamily: ['Category', string];
  fontSize: ['Numeric', number];
  fontWeight: ['Category', string | number];
  text: ['Text', string];
};

type DeriveEncoding<T> = {
  [K in keyof T]: EncodingSpec<T[K][1]>;
};

interface EncodingSpec<T = any> {
  field?: string;
  value?: T;
  type?: 'nominal' | 'ordinal' | 'quantitative' | 'temporal';
  scale?: {
    scheme?: string;
    range?: [number, number];
    zero?: boolean;
  };
}

interface WordCloudState {
  words: Word[];
  scaleFactor: number;
}

interface Word {
  text: string;
  size: number;
  x: number;
  y: number;
  rotate: number;
  font: string;
  weight: string | number;
}

type PlainObject = Record<string, any>;