Element: <oj-n-box-node>

Oracle® JavaScript Extension Toolkit (JET)
17.1.0
G12196-01

Since:
  • 6.0.0
Module:
  • ojnbox

QuickNav

Attributes

Other Topics


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>


Usage

Signature:

interface NBoxNodeElement<K=any>

Generic Parameters
ParameterDescription
KType of key of the dataprovider
Typescript Import Format
//To typecheck the element APIs, import as below.
import { NBoxNodeElement } from "ojs/ojnbox";

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

For additional information visit:


Styling

CSS Variables

See JET CSS Variables for additional details.
Name Type Description
--oj-n-box-node-bg-color <color> Nbox node background color

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"|"blue"|"slate"|"mauve"|"pink"|"purple"|"lilac"|"gray"|string icon.background :"neutral"|"orange"|"green"|"teal"|"blue"|"slate"|"pink"|"purple"|"lilac"|"gray"|string

The background pattern displayed with the initials of this icon.
Supported Values:
Value Argument Description
blue <optional>
forest <optional>
Deprecated:
Since Description
10.0.0 This value will be removed in the future. Please use other colors.
gray <optional>
green <optional>
lilac <optional>
mauve <optional>
Deprecated:
Since Description
10.0.0 This value will be removed in the future. Please use other colors.
neutral <optional>
orange <optional>
pink <optional>
purple <optional>
red <optional>
Deprecated:
Since Description
10.0.0 This value will be removed in the future. Please use other colors.
slate <optional>
teal <optional>
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 :Partial<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 :Partial<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:
  • ''

(nullable) short-desc :(string | ((context: ojNBox.NodeShortDescContext<K>) => string))

The description of the node. Will be lazily created if a function is used. This is used for customizing the tooltip text.
Default Value:
  • ''

svg-class-name :string

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

svg-style :Partial<CSSStyleDeclaration>|null

The CSS style object defining the style of the node. 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