Element: <oj-n-box-node>

Oracle® JavaScript Extension Toolkit (JET)
9.0.0

F24343-01

Signature:

class ojNBoxNode

QuickNav

Attributes

Version:
  • 9.0.0
Since:
  • 6.0.0
Module:
  • ojnbox

Module usage

See JET Module Loading for an overview of module usage within JET.

Typescript Import Format
//To typecheck the element APIs, import as below.
import {ojNBoxNode} from "ojs/ojnbox";

//For the transpiled javascript to load the element's module, import as below
import "ojs/ojnbox";

JET In Typescript

A detailed description of working with JET elements and classes in your typescript project can be found at: JET Typescript Usage.

JET Tag Cloud Item

The oj-n-box-node element is used to declare properties for NBox nodes and is only valid as the child of a template element for the nodeTemplate slot of oj-n-box.


<oj-n-box data='[[dataProvider]]'>
 <template slot='nodeTemplate' data-oj-as='node'>
   <oj-n-box-node row='[[$current.data.potential]]'
     column='[[$current.data.performance]]'
     short-desc='[[$current.data.shortDesc]]'
     label='[[$current.data.name]]'
     secondary-label='[[$current.data.position]]'
     icon.source='[[$current.data.image]]'></oj-n-box-node>
 </template>
</oj-n-box>

Attributes

border-color :string

The color of the node border.
Default Value:
  • ''

border-width :number

The width of the node border.
Default Value:
  • 0

categories :Array.<string>

An optional array of additional category strings corresponding to this data item. This enables highlighting and filtering of individual data items through interactions with other visualization elements. If not defined, the node id is used.
Default Value:
  • []

color :string

The background color of this node.
Default Value:
  • ''

column :string

The column id for this node.
Default Value:
  • ''

group-category :string

The group category this node belongs to. Nodes with the same groupCategory will be grouped together.
Default Value:
  • ''

icon :Object

Defines the primary icon for this node.
Default Value:
  • null

icon.background :neutral|red|orange|forest|green|teal|mauve|purple

The background pattern displayed with the initials of this icon.
Supported Values:
Value
forest
green
mauve
neutral
orange
purple
red
teal
Default Value:
  • 'neutral'

icon.border-color :string

The border color of this icon.

icon.border-radius :string

The border radius of this icon. CSS border-radius values accepted. Note that non-% values (including unitless) get interpreted as 'px'.

icon.border-width :number

The border width of this icon.

icon.color :string

The fill color of this icon.

icon.height :number|null

The height of this icon.

icon.initials :string

The initials displayed on this icon if no image source provided.
Default Value:
  • ''

icon.opacity :number

The opacity of this icon.

icon.pattern :largeChecker|largeCrosshatch|largeDiagonalLeft|largeDiagonalRight|largeDiamond|largeTriangle|none|mallChecker|smallCrosshatch|smallDiagonalLeft|smallDiagonalRight|smallDiamond|smallTriangle

The fill pattern of this icon.
Supported Values:
Value
largeChecker
largeCrosshatch
largeDiagonalLeft
largeDiagonalRight
largeDiamond
largeTriangle
mallChecker
none
smallCrosshatch
smallDiagonalLeft
smallDiagonalRight
smallDiamond
smallTriangle
Default Value:
  • "none"

icon.shape :"circle"|"diamond"|"ellipse"|"human"|"plus"|"rectangle"|"square"|"star"|"triangleDown"|"triangleUp"|string

The shape of this icon. Can take the name of a built-in shape or the SVG path commands for a custom shape.

icon.source :string

The URL of an image to display for this icon.

icon.svg-class-name :string

The CSS style class defining the style of this icon. Will not be applied if initials are specified.
Default Value:
  • ''

icon.svg-style :CSSStyleDeclaration

The CSS style object defining the style of this icon. Only SVG CSS style properties are supported. Will not be applied if initials are specified. The default value comes from the CSS and varies based on theme.

icon.width :number|null

The width of this icon.

indicator-color :string

The background color for the indicator section of this node.
Default Value:
  • ''

indicator-icon :Object

Defines the indicator icon for this node.
Default Value:
  • null

indicator-icon.border-color :string

The border color of this indicator icon.

indicator-icon.border-radius :string

The border radius of this indicator icon. CSS border-radius values accepted. Note that non-% values (including unitless) get interpreted as 'px'.

indicator-icon.border-width :number

The border width of this indicator icon.

indicator-icon.color :string

The fill color of this indicator icon.

indicator-icon.height :number|null

The height of this indicator icon.

indicator-icon.opacity :number

The opacity of this indicator icon.

indicator-icon.pattern :largeChecker|largeCrosshatch|largeDiagonalLeft|largeDiagonalRight|largeDiamond|largeTriangle|none|smallChecker|smallCrosshatch|smallDiagonalLeft|smallDiagonalRight|smallDiamond|smallTriangle

The fill pattern of this indicator icon.
Supported Values:
Value
largeChecker
largeCrosshatch
largeDiagonalLeft
largeDiagonalRight
largeDiamond
largeTriangle
none
smallChecker
smallCrosshatch
smallDiagonalLeft
smallDiagonalRight
smallDiamond
smallTriangle

indicator-icon.shape :"circle"|"diamond"|"ellipse"|"human"|"plus"|"rectangle"|"square"|"star"|"triangleDown"|"triangleUp"|string

The shape of this indicator icon. Can take the name of a built-in shape or the SVG path commands for a custom shape.

indicator-icon.source :string|null

The URL of an image to display for this indicator icon.

indicator-icon.svg-class-name :string

The CSS style class defining the style of this indicator icon.

indicator-icon.svg-style :(CSSStyleDeclaration|null)

The CSS style object defining the style of this indicator icon. Only SVG CSS style properties are supported. The default value comes from the CSS and varies based on theme.

indicator-icon.width :number|null

The width of this indicator icon.

label :string

The text for the node label.
Default Value:
  • ''

row :string

The row id for this node.
Default Value:
  • ''

secondary-label :string

The text for the secondary node label.
Default Value:
  • ''

short-desc :string

The description of the node. This is used for customizing the tooltip text.
Default Value:
  • ''

svg-class-name :string

The CSS style class defining the style of the node text.
Default Value:
  • ''

svg-style :(CSSStyleDeclaration|null)

The CSS style object defining the style of the node text. Only SVG CSS style properties are supported.
Default Value:
  • null

x-percentage :number|null

An optional horizontal position (as a percentage) to be used in the average position calculation when grouping across cells.
Default Value:
  • null

y-percentage :number|null

An optional vertical position (as a percentage) to be used in the average position calculation when grouping across cells.
Default Value:
  • null