Element: <oj-sunburst-node>

Oracle® JavaScript Extension Toolkit (JET)
17.0.0
F92240-01

Since:
  • 6.0.0
Module:
  • ojsunburst

QuickNav

Attributes


JET Sunburst Node

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


<oj-sunburst data='[[dataProvider]]'>
 <template slot='nodeTemplate'>
   <oj-sunburst-node  value='[[$current.data.value]]' color='[[$current.data.color]]'>
   </oj-sunburst-node>
 </template>
</oj-sunburst>


Usage

Signature:

interface SunburstNodeElement<K=any, D=any>

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

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

For additional information visit:


Attributes

border-color :string

The border color of the node.

border-width :number

The border width of the node.

categories :Array.<string>

An optional array of category strings corresponding to this data item. This enables highlighting and filtering of individual data items through interactions with the legend and other visualization elements. The categories array of each node is required to be a superset of the categories array of its parent node. If not specified, the ids of the node and its ancestors will be used.
Default Value:
  • []

color :string

The fill color of the node.
Default Value:
  • "#000000"

drilling :"on"|"off"|"inherit"

Specifies whether drilling is enabled for the node. Drillable nodes 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 nodes at once, use the drilling attribute in the top level.
Supported Values:
Value
inherit
off
on
Default Value:
  • "inherit"

label :string

The label for this node.
Default Value:
  • ""

label-display :"horizontal"|"rotated"|"off"|"auto"

The label display behavior for the nodes. More labels are generally displayed when using rotation, with the trade off of readability. When auto is used, rotated or horizontal labels will be used based on the client browser and platform.
Supported Values:
Value
auto
horizontal
off
rotated

label-halign :"inner"|"outer"|"center"

The horizontal alignment for labels displayed within the node. Only applies to rotated text.
Supported Values:
Value
center
inner
outer

label-style :Partial<CSSStyleDeclaration>

The CSS style object defining the style of the label. The following style properties are supported: color, cursor, fontFamily, fontSize, fontStyle, fontWeight, textDecoration. The default value comes from the CSS and varies based on theme.

pattern :"smallChecker"|"smallCrosshatch"|"smallDiagonalLeft"|"smallDiagonalRight"|"smallDiamond"|"smallTriangle"|"largeChecker"|"largeCrosshatch"|"largeDiagonalLeft"|"largeDiagonalRight"|"largeDiamond"|"largeTriangle"|"none"

The pattern used to fill the node.
Supported Values:
Value
largeChecker
largeCrosshatch
largeDiagonalLeft
largeDiagonalRight
largeDiamond
largeTriangle
none
smallChecker
smallCrosshatch
smallDiagonalLeft
smallDiagonalRight
smallDiamond
smallTriangle
Default Value:
  • "none"

radius :number

The radius of the node relative to the other nodes.

selectable :"off"|"auto"

Specifies whether or not the node will be selectable.
Supported Values:
Value
auto
off
Default Value:
  • "auto"

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

The description of this element. Will be lazily created if a function is used.  This is used for accessibility and also for customizing the tooltip text.
Default Value:
  • ""

show-disclosure :"on"|"off"|"inherit"

Specifies whether to display the expand/collapse button on hover for a specific node. If the button is clicked, the expanded attribute is updated with the new array of node ids.
Supported Values:
Value
inherit
off
on
Default Value:
  • "inherit"

svg-class-name :string

The CSS style class to apply to the node. The style class and inline style will override any other styling specified through the properties. For tooltip interactivity, it's recommended to also pass a representative color to the node color attribute.
Default Value:
  • ""

svg-style :Partial<CSSStyleDeclaration>

The inline style to apply to the node. The style class and inline style will override any other styling specified through the properties. For tooltip interactivity, it's recommended to also pass a representative color to the node color attribute. Only SVG CSS style properties are supported. The default value comes from the CSS and varies based on theme.
Default Value:
  • {}

value :number

The value of the node, which determines the relative size of the node.