Usage
Signature:
interface CTagCloudElement<K extends string | number,D extends any>
Typescript Import Format
//To typecheck the element APIs, import as below.
import { CTagCloudElement } from "oj-c/tag-cloud";
//For the transpiled javascript to load the element's module, import as below
import "oj-c/tag-cloud";
For additional information visit:
Note: Application logic should not interact with the component's properties or invoke its methods until the BusyContext indicates that the component is ready for interaction.
Slots
JET components that allow child content support slots. Please see the slots section of the JET component overview doc for more information on allowed slot content and slot types.
-
itemTemplate
-
The
itemTemplate
slot is used to specify the template for creating items. The slot content must be a single <template> element.When the template is executed for each area, it will have access to the tag cloud's binding context and the following properties:
- $current - an object that contains information for the current item. (See the table below for a list of properties available on $current)
- alias - if data-oj-as attribute was specified, the value will be used to provide an application-named alias for $current.
The content of the template should only be one <oj-c-tag-cloud-item> element. See the oj-tag-cloud-item doc for more details.
Properties of $current:
Name Type Description data
D The data object of the current item. index
number The zero-based index of the current item. key
K The key of the current item.
Attributes
-
data* :(DataProvider.<K, D>|null)
-
Specifies the DataProvider for the sections and items of the tag-cloud.
- Default Value:
null
Names
Item Name Property data
Property change event dataChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-data*-changed
-
datatip :(context: oj-c.TagCloud.DatatipContext<K>) => string
-
The tagcloud datatip string.
Names
Item Name Property datatip
Property change event datatipChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-datatip-changed
-
hidden-categories :Array.<string>
-
An array of category strings used for highlighting. Data items matching categories in this array will be highlighted.
- Default Value:
[]
- Supports writeback:
true
Names
Item Name Property hiddenCategories
Property change event hiddenCategoriesChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-hidden-categories-changed
-
highlight-match :"all"|"any"
-
The matching condition for the highlightedCategories option. By default, highlightMatch is 'all' and only items whose categories match all of the values specified in the highlightedCategories array will be highlighted. If highlightMatch is 'any', then items that match at least one of the highlightedCategories values will be highlighted.
- Default Value:
"all"
Names
Item Name Property highlightMatch
Property change event highlightMatchChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-highlight-match-changed
-
highlighted-categories :Array.<string>
-
An array of categories that will be highlighted.
- Default Value:
[]
- Supports writeback:
true
Names
Item Name Property highlightedCategories
Property change event highlightedCategoriesChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-highlighted-categories-changed
-
hover-behavior :"dim"|"none"
-
Defines the behavior applied when hovering over a tagcloud item.
- Default Value:
"none"
Supported Values:
Value Description dim
Dimming hover behavior is applied. none
No hover behavior will be applied. Names
Item Name Property hoverBehavior
Property change event hoverBehaviorChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-hover-behavior-changed
-
layout :"cloud"|"rectangular"
-
The layout to use for tag display.
- Default Value:
"rectangular"
Supported Values:
Value Description cloud
Items will be horizontally placed in available space. rectangular
Items will be vertically stacked. Names
Item Name Property layout
Property change event layoutChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-layout-changed
-
selection :Array<K>
-
An array containing the ids of the initially selected data items.
- Default Value:
[]
- Supports writeback:
true
Names
Item Name Property selection
Property change event selectionChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-selection-changed
-
selection-mode :"none"|"multiple"|"single"
-
The type of selection behavior that is enabled on the tag cloud. This attribute controls the number of selections that can be made via selection gestures at any given time.
- Default Value:
"none"
Names
Item Name Property selectionMode
Property change event selectionModeChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-selection-mode-changed
-
touch-response :"auto"|"touchStart"
-
Data visualizations require a press and hold delay before triggering tooltips and rollover effects on mobile devices to avoid interfering with page panning, but these hold delays can make applications seem slower and less responsive. For a better user experience, the application can remove the touch and hold \delay when data visualizations are used within a non scrolling container or if there is sufficient space outside of the visualization for panning. If touchResponse is touchStart the element will instantly trigger the touch gesture and consume the page pan events. If touchResponse is auto, the element will behave like touchStart if it determines that it is not rendered within scrolling content and if element panning is not available for those elements that support the feature.
Names
Item Name Property touchResponse
Property change event touchResponseChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-touch-response-changed
Methods
-
getProperty(property) : {any}
-
Retrieves the value of a property or a subproperty.
Parameters:
Name Type Description property
The property name to get. Supports dot notation for subproperty access. Returns:
- Type
- any
-
setProperties(properties) : {void}
-
Performs a batch set of properties.
Parameters:
Name Type Description properties
An object containing the property and value pairs to set. Returns:
- Type
- void
-
setProperty(property, value) : {void}
-
Sets a property or a single subproperty for complex properties and notifies the component of the change, triggering a corresponding event.
Parameters:
Name Type Description property
The property name to set. Supports dot notation for subproperty access. value
The new value to set the property to. Returns:
- Type
- void