Member Junction
    Preparing search index...

    Class MJWordCloudComponent

    A reusable, SVG-based word cloud component.

    Renders weighted text items in a spiral or rectangular layout with collision detection. Supports multiple color modes using MJ design tokens, optional entry animation, and click/hover interaction.

    <mj-word-cloud
      [Items]="words"
      [MaxFontSize]="56"
      ColorMode="categorical"
      (ItemClick)="onWordClick($event)">
    </mj-word-cloud>

    Implements

    • OnChanges
    Index

    Constructors

    constructor

    Properties

    Animate ColorMode Interactive ItemClick ItemHover ItemLeave Items Layout LayoutItems MaxFontSize MaxItems MinFontSize ViewBox

    Methods

    ngOnChanges OnItemClick OnItemHover OnItemLeave

    Constructors

    Properties

    Animate: boolean = true

    Whether to animate words in with a staggered fade.

    ColorMode: "brand" | "categorical" | "weight-gradient" = 'brand'

    How colors are assigned to words.

    • brand: all words use --mj-brand-primary with opacity based on weight.
    • categorical: distinct colors from a fixed palette, assigned by Category.
    • weight-gradient: interpolates from muted to brand-primary based on weight.
    Interactive: boolean = true

    Whether words are clickable / hoverable.

    ItemClick: EventEmitter<WordCloudItemEvent> = ...

    Emitted when a word is clicked.

    ItemHover: EventEmitter<WordCloudItemEvent> = ...

    Emitted when the pointer enters a word.

    ItemLeave: EventEmitter<WordCloudItemEvent> = ...

    Emitted when the pointer leaves a word.

    Items: WordCloudItem[] = []

    Data items to display in the cloud.

    Layout: "spiral" | "rectangular" = 'spiral'

    Layout algorithm used for word placement.

    LayoutItems: WordCloudLayoutItem[] = []

    Positioned items ready for rendering.

    MaxFontSize: number = 48

    Maximum font size in pixels for the highest-weighted item.

    MaxItems: number = 100

    Maximum number of items to display (heaviest are kept).

    MinFontSize: number = 12

    Minimum font size in pixels for the lowest-weighted item.

    ViewBox: string = '0 0 100 100'

    SVG viewBox attribute value.

    Methods

    • A callback method that is invoked immediately after the default change detector has checked data-bound properties if at least one has changed, and before the view and content children are checked.

      Parameters

      • _changes: { [propName: string]: SimpleChange<any> }

      Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Methods