Element: <oj-c-picto-chart>

CORE PACK

Oracle® JavaScript Extension Toolkit (JET)
21.0.0
G39657-01

Since:
  • 20.0.0
Module:
  • picto-chart

QuickNav

Slots

Attributes

Events

Methods

Type Definitions

Documentation-only Types

Other Topics


A picto chart is an interactive data visualization of textual data. PictoChart uses icons to visualize an absolute number, or the relative sizes of different parts of a population. 


<oj-c-picto-chart
data="[[dataProvider]]">
</oj-c-picto-chart>

When using colors as a data dimension for PictoChart, the application needs to ensure that they meet minimum contrast requirements. Not all colors in the default value ramp provided by oj.ColorAttributeGroupHandler will meet minimum contrast requirements.

Keyboard End User Information

Key Action
Tab Move focus to next element.
Shift + Tab Move focus to previous element.
UpArrow Move focus and selection to previous item.
DownArrow Move focus and selection to next item.
LeftArrow Move focus and selection to previous item.
RightArrow Move focus and selection to next item.
Shift + UpArrow Move focus and multi-select previous item.
Shift + DownArrow Move focus and multi-select next item.
Shift + LeftArrow Move focus and multi-select previous item.
Shift + RightArrow Move focus and multi-select next item.
Ctrl + UpArrow (Windows) or Command + UpArrow (Mac) Move focus to previous item, without changing the current selection.
Ctrl + DownArrow (Windows) or Command + DownArrow (Mac) Move focus to next item, without changing the current selection.
Ctrl + LeftArrow (Windows) or Command + LeftArrow (Mac) Move focus to previous item, without changing the current selection.
Ctrl + RightArrow (Windows) or Command + RightArrow (Mac) Move focus to next item, without changing the current selection.
Ctrl + Spacebar Multi-select item with focus.
Enter Drill on item when drilling is enabled..

Accessibility

To make your component accessible, the application is required to include contextual information for screen readers using either:
  • aria-labelledby
  • aria-label
It is also recommended to include appropriate short-desc property values for your items to enhance accessibility.

If your application has custom keyboard and touch shortcuts implemented for the component, these shortcuts can conflict with those of the component. It is the application's responsibility to disclose these custom shortcuts, possibly via a datatip or help popup.

Touch End User Information

Target Gesture Action
Data Item Tap Select when selectionMode is enabled.
Open a link when the url for a data item is set.
Press & Hold Display context menu on release.
Background Press & Hold Display context menu on release.


Usage

Signature:

interface CPictoChartElement<K extends string | number,D extends any>

Typescript Import Format
//To typecheck the element APIs, import as below.
import { CPictoChartElement } from "oj-c/picto-chart";

//For the transpiled javascript to load the element's module, import as below
import "oj-c/picto-chart";

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.

datatipTemplate

Note: When the template is executed for each item, it will have access to the binding context containing the following properties: oj-c.PictoChart.PictoChartDatatipTemplateContext

The datatipTemplate slot is used to specify custom datatip content.
Properties of $current:
Name Type Description
color string The color of the hovered item.
count number The count of the hovered item.
id K The id of the hovered item.
name string The name of the hovered item.

itemTemplate

Note: When the template is executed for each item, it will have access to the binding context containing the following properties: oj-c.PictoChart.PictoChartItemTemplateContext

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 picto chart'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 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-picto-chart-item> element. See the oj-picto-chart-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

column-count :number

The number of columns that the picto chart has. The number of columns will be automatically computed if not specified.
Names
Item Name
Property columnCount
Property change event columnCountChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-column-count-changed

column-width :(number|string)

The width of a column in pixels. The width of columns will be automatically computed if not specified. Setting this property in a fixed layout (when the element width and height are defined) may cause items to be truncated.
Names
Item Name
Property columnWidth
Property change event columnWidthChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-column-width-changed

context-menu-config :oj-c.PictoChart.PictoChartContextMenuConfig.<K, D>

Specifies a context menu configuration. It takes the keys `accessibleLabel` and `items`, where `accessibleLabel` is optional and items required . `items` function returns an array of menu item object representations that indicates what menu items are going to be part of menu based on some specific context menu context.
Context Menu Item TypeDef
ContextMenuSeparator{ type: 'separator'}
MenuItem{ type?: 'item'; label: string; key: string; disabled?: boolean; onAction?: () => void; startIcon?: MenuIcon; endIcon?: MenuIcon; variant?: 'standard' | 'destructive'; };
ContextMenuSubMenu{ type: 'submenu'; label?: string; disabled?: boolean; startIcon?: string; items?: Array<ContextMenuItems>; };
ContextMenuSelectSingle{ type: 'selectsingle'; key?: string; items?: Array<MenuSelectItem>; selection?: string; onSelection?: (detail: { value: string }) => void; };
ContextMenuSelectMultiple{ type: 'selectmultiple'; key?: string; items?: Array<MenuSelectItem>; selection?: Array<string>; onSelection?: (detail: { value: Array<string> }) => void; };
MenuIcon{ type?: 'class'; class: string; } | { type: 'img'; src: string; };
MenuSelectItem{ label: string; disabled?: boolean; endIcon?: MenuIcon; value: string; }
Names
Item Name
Property contextMenuConfig
Property change event contextMenuConfigChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-context-menu-config-changed

data* :(DataProvider.<K, D>|null)

Specifies the DataProvider for the sections and items of the picto-chart.
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-config :(context: oj-c.PictoChart.PictoChartDatatipTemplateContext<K>) => oj-c.PictoChart.PictoChartDatatipConfig

The DatatipConfig object is used to allow applications to control the appearance and behavior of the datatip.
Names
Item Name
Property datatipConfig
Property change event datatipConfigChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-datatip-config-changed

drilling :"off"|"on"

Whether drilling is enabled. Drillable items will show a pointer cursor on hover and fire an ojDrill event on click (double click if selection is enabled). To enable or disable drilling on individual items, use the drilling attribute in each item.
Default Value:
  • 'off'
Names
Item Name
Property drilling
Property change event drillingChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-drilling-changed

hidden-categories :Array<string>

An array of categories that will be hidden.
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 property. 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"

The behavior applied when hovering over data items.
Supported Values:
Value Description
dim Dimming hover behavior is applied.
none No hover behavior will be applied.
Default Value:
  • 'none'
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 :"vertical"|"horizontal"

The direction in which the items are laid out.
Supported Values:
Value Description
vertical Items will be vertically placed in available space.
horizontal Items will be horizontally stacked.
Default Value:
  • 'horizontal'
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

layout-origin :"topStart"|"topEnd"|"bottomStart"|"bottomEnd"

Defines where the first item is rendered. The subsequent items follow the first item according to the layout.
Default Value:
  • 'topStart'
Names
Item Name
Property layoutOrigin
Property change event layoutOriginChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-layout-origin-changed

row-count :number

The number of rows that the picto chart has. The number of rows will be automatically computed if not specified.
Names
Item Name
Property rowCount
Property change event rowCountChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-row-count-changed

row-height :(number|string)

The height of a row in pixels. The height of rows will be automatically computed if not specified. Setting this property in a fixed layout (when the element width and height are defined) may cause items to be truncated.
Names
Item Name
Property rowHeight
Property change event rowHeightChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-row-height-changed

selection :Array<K>

An array of id strings, used to define the selected objects.
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"

Specifies the selection mode.
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

Events

ojContextMenuAction

Triggered when a menu item is clicked, whether by keyboard, mouse, or touch events.
Properties:

All of the event payloads listed below can be found under event.detail. See Events and Listeners for additional information.

Name Type
contextMenuContext { type: 'background'; } | { data?: oj-c.PictoChart.Item<K>; itemData?: D; type: 'item'; }
menuItemKey string

ojContextMenuSelection

Triggered when a select menu item is clicked, whether by keyboard, mouse, or touch events.
Properties:

All of the event payloads listed below can be found under event.detail. See Events and Listeners for additional information.

Name Type
contextMenuContext { type: 'background'; } | { data?: oj-c.PictoChart.Item<K>; itemData?: D; type: 'item'; }
menuSelectionGroupKey string
value string|Array<string>

ojDrill

Note: The event detail contains the following properties: oj-c.PictoChart.DrillDetail<K>

Triggered during a drill gesture (single click on the pictochart item).

See Events and Listeners for additional information.

Methods

getProperty(property) : {any}

Retrieves the value of a property or a subproperty.
Parameters:
Name Type Description
property string 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 object 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 string The property name to set. Supports dot notation for subproperty access.
value any The new value to set the property to.
Returns:
Type
void

Type Definitions

Documentation-only Types

Note: Type definitions in this section have been provided for documentation purposes and cannot be imported into application code.

ContextMenuActionDetail<C>

Properties:
Name Type
contextMenuContext C
menuItemKey string

ContextMenuItems :(oj-c.PictoChart.MenuItem|oj-c.PictoChart.ContextMenuSeparator|oj-c.PictoChart.ContextMenuSubMenu|oj-c.PictoChart.ContextMenuSelectSingle|oj-c.PictoChart.ContextMenuSelectMultiple)

ContextMenuSelectionDetail<C>

Properties:
Name Type
contextMenuContext C
menuSelectionGroupKey string
value string|Array<string>

ContextMenuSelectMultiple

Properties:
Name Type Argument Description
items Array.<oj-c.PictoChart.MenuSelectItem> <optional>
 Specifies the array of select items that make up the select multiple.
key string A unique key associated with the select multiple.
onSelection (detail: oj-c.PictoChart.SelectMenuItemDetail<string[]>) => void <optional>
selection Array<string> <optional>
type "selectmultiple" Specifies a select multiple menu item.

ContextMenuSelectSingle

Properties:
Name Type Argument Description
items Array.<oj-c.PictoChart.MenuSelectItem> <optional>
 Specifies the array of select items that make up the select single.
key string A unique key associated with the select single.
onSelection (detail: oj-c.PictoChart.SelectMenuItemDetail<string>) => void <optional>
selection string <optional>
type "selectsingle" Specifies a select single menu item.

ContextMenuSeparator

Properties:
Name Type
type "separator"

ContextMenuSubMenu

Properties:
Name Type Argument Description
disabled boolean <optional>
 Specifies if the submenu is disabled (enabled by default).
items Array<string | oj-c.PictoChart.MenuItem | oj-c.PictoChart.ContextMenuSeparator | oj-c.PictoChart.ContextMenuSubMenu | oj-c.PictoChart.ContextMenuSelectSingle | oj-c.PictoChart.ContextMenuSelectMultiple> <optional>
key string <optional>
 A unique key associated with the submenu menu item.
label string <optional>
 The submenu label.
startIcon { type?: 'class'; class: string; } | { type: 'img'; src: string; } <optional>
 Optional icon to render at the start of the submenu.
type "submenu" Specifies a submenu menu item.

DatatipStyle

Properties:
Name Type Description
borderColor "transparent" | "inherit" | "initial" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | string The border color of the datatip container.

DrillDetail<K>

Properties:
Name Type Description
id K The id of the drilled item.

Item<K>

Properties:
Name Type Argument Description
borderColor string <optional>
 The border color of the item. Does not apply if custom image is specified.
borderStyle "dashed" | "solid" <optional>
 The border style of the item. Does not apply if custom image is specified.
borderWidth number <optional>
 The border width of the item. Does not apply if custom image is specified.
categories Array<string> <optional>
 An array of category strings corresponding to the picto chart items. This allows highlighting and filtering of items.
color string <optional>
 The color of the item. Does not apply if custom image is specified.
columnSpan string <optional>
 The number of columns each shape (or custom image) spans. Used for creating a picto chart with mixed item sizes.
count string <optional>
 Specifies the number of times that the shape (or custom image) is drawn.
drilling "off" | "inherit" | "on" <optional>
 Whether drilling is enabled on the item. Drillable items will show a pointer cursor on hover and fire an ojDrill event on click (double click if selection is enabled). To enable drilling for all items at once, use the drilling attribute in the top level.
id K The item id should be set by the application if the DataProvider is not being used. The row key will be used as id in the DataProvider case.
name string <optional>
 The name of the item. Used for default tooltip and accessibility.
rowSpan string <optional>
 The number of rows each shape (or custom image) spans. Used for creating a picto chart with mixed item sizes.
shape "none" | "square" | "circle" | "diamond" | "human" | "plus" | "star" | "triangleDown" | "triangleUp" | "rectangle" <optional>
 The shape of the item. Can take the name of a built-in shape or the SVG path commands for a custom shape. "None" will make the item transparent and can be used to create gaps. Does not apply if custom image is specified.
shortDesc string <optional>
 The description of the item. This is used for customizing the tooltip text.
source string <optional>
 The URI of the custom image. If specified, it takes precedence over shape.
sourceHover string <optional>
 The optional URI for the hover state. If not specified, the source image will be used.
sourceHoverSelected string <optional>
 The optional URI for the hover selected state. If not specified, the source image will be used.
sourceSelected string <optional>
 The optional URI for the selected state. If not specified, the source image will be used.
Specifies a standard menu item.
Properties:
Name Type Argument Description
disabled boolean <optional>
 Specifies if the menu item is disabled (enabled by default).
endIcon { type?: 'class'; class: string; } | { type: 'img'; src: string; } <optional>
 Optional icon to render at the end of the menu item.
key string A unique key associated with the menu item.
label string The menu item label.
onAction function <optional>
 Optional callback function associated with the menu item.
startIcon { type?: 'class'; class: string; } | { type: 'img'; src: string; } <optional>
 Optional icon to render at the start of the menu item.
type "item" <optional>
 Specifies a standard menu item.
variant "standard" | "destructive" <optional>
 Specifies the menu item behavior.
Properties:
Name Type
at (index: number) => string | undefined
Specifies a selectable item in a menu item.
Properties:
Name Type Argument Description
disabled boolean <optional>
 Specifies if the selectable item is disabled (enabled by default).
endIcon { type?: 'class'; class: string; } | { type: 'img'; src: string; } <optional>
 Optional icon to render at the end of the selectable item.
label string The selectable item label.
startIcon { type?: 'class'; class: string; } | { type: 'img'; src: string; } <optional>
 Optional icon to render at the start of the selectable item.
value string The value associated with the selectable item.

PictoChartContextMenuConfig<K,D>

Properties:
Name Type Argument
accessibleLabel string <optional>
items (context: PictochartContextMenuContext<K, D>) => Array<oj-c.PictoChart.ContextMenuItems>

PictoChartDatatipConfig

Properties:
Name Type Argument Description
defaultContainer "disabled" | "enabled" Defines if the datatip container is visually shown.
rendered "off" | "on" <optional>
 Defines if the datatip is rendered.
style oj-c.PictoChart.DatatipStyle <optional>
 Defines the style of the datatip container.

PictoChartDatatipTemplateContext<K>

The PictoChartDatatipTemplateContext type is used to specify the context of the datatip template, which includes information about the item that the datatip is associated with.
Properties:
Name Type Description
color string The color of the hovered item.
count number The count of the hovered item.
id K The id of the hovered item.
name string The name of the hovered item.

PictoChartItemTemplateContext<K,D>

The PictoChartItemTemplateContext type is used to specify the context of the item template, which includes information about the current item such as its data, key, and index.
Properties:
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.

SelectMenuItemDetail<T extends oj-c.PictoChart.MenuSelection>

Properties:
Name Type
menuSelectionGroupKey string
value T