Element: <oj-n-box-node>

Oracle® JavaScript Extension Toolkit (JET)
8.0.0
F18189-01

Signature:

class ojNBoxNode

QuickNav

Attributes


Version:
  • 8.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.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.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.
Default Value:
  • ''

icon.svg-style :CSSStyleDeclaration

The CSS style object defining the style of this icon.

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.

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.
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