Element: <oj-picto-chart-item>

Oracle® JavaScript Extension Toolkit (JET)
5.2.0
E97691-01

QuickNav

Attributes

PREVIEW: This is a preview API. Preview APIs are production quality, but can be changed on a major version without a deprecation path.

Version:
  • 5.2.0
Since:
  • 5.2.0
Module:
  • ojpictochart

JET PictoChart Item

The oj-picto-chart-item element is used to declare properties for picto chart items and is only valid as the child of a template element for the itemTemplate slot of oj-picto-chart.


<oj-picto-chart as='item' data='[[dataProvider]]'>
 <template slot='itemTemplate'>
   <oj-picto-chart-item count='[[item.data.count]]' name='[[item.data.name]]'>
   </oj-picto-chart-item>
 </template>
</oj-picto-chart>

Attributes

border-color :string

The border color of the item. Does not apply if custom image is specified.
Default Value:
  • ''
Example

Initialize the picto chart item with the border-color attribute specified:

<oj-picto-chart data='[[dataProvider]]' as='item'>
 <template slot='itemTemplate'>
   <oj-picto-chart-item border-color='[[item.data.borderColor]]'> </oj-picto-chart-item>
 </template>
</oj-picto-chart>

border-width :number

The border width of the item in pixels. Does not apply if custom image is specified.
Default Value:
  • 0
Example

Initialize the picto chart item with the border-width attribute specified:

<oj-picto-chart data='[[dataProvider]]' as='item'>
 <template slot='itemTemplate'>
   <oj-picto-chart-item border-width='[[item.data.borderWidth]]'> </oj-picto-chart-item>
 </template>
</oj-picto-chart>

categories :Array.<string>

An array of category strings corresponding to the picto chart items. This allows highlighting and filtering of items.
Default Value:
  • []
Example

Initialize the picto chart item with the categories attribute specified:

<oj-picto-chart data='[[dataProvider]]' as='item'>
 <template slot='itemTemplate'>
   <oj-picto-chart-item categories='[[item.data.categories]]'> </oj-picto-chart-item>
 </template>
</oj-picto-chart>

color :string

The color of the item. Does not apply if custom image is specified.
Default Value:
  • ''
Example

Initialize the picto chart item with the color attribute specified:

<oj-picto-chart data='[[dataProvider]]' as='item'>
 <template slot='itemTemplate'>
   <oj-picto-chart-item color='[[item.data.color]]'> </oj-picto-chart-item>
 </template>
</oj-picto-chart>

column-span :number

The number of columns each shape (or custom image) spans. Used for creating a picto chart with mixed item sizes.
Default Value:
  • 1
Example

Initialize the picto chart item with the column-span attribute specified:

<oj-picto-chart data='[[dataProvider]]' as='item'>
 <template slot='itemTemplate'>
   <oj-picto-chart-item column-span='[[item.data.columnSpan]]'> </oj-picto-chart-item>
 </template>
</oj-picto-chart>

count :number

Specifies the number of times that the shape (or custom image) is drawn. Fractional counts (such as 4.5) are supported; however, fractions other than the multiples of 0.5 should be avoided because the fractional rendering ignores the gaps between shapes and the irregularity of the shapes.
Default Value:
  • 1
Example

Initialize the picto chart item with the count attribute specified:

<oj-picto-chart data='[[dataProvider]]' as='item'>
 <template slot='itemTemplate'>
   <oj-picto-chart-item count='[[item.data.count]]'> </oj-picto-chart-item>
 </template>
</oj-picto-chart>

drilling :string

Whether drilling is enabled for 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.
Supported Values:
Name Type
"inherit" string
"off" string
"on" string
Default Value:
  • "inherit"
Example

Initialize the picto chart item with the drilling attribute specified:

<oj-picto-chart data='[[dataProvider]]' as='item'>
 <template slot='itemTemplate'>
   <oj-picto-chart-item drilling='[[item.data.drilling]]'> </oj-picto-chart-item>
 </template>
</oj-picto-chart>

name :string

The name of the item. Used for default tooltip and accessibility.
Default Value:
  • ''
Example

Initialize the picto chart item with the name attribute specified:

<oj-picto-chart data='[[dataProvider]]' as='item'>
 <template slot='itemTemplate'>
   <oj-picto-chart-item name='[[item.data.name]]'> </oj-picto-chart-item>
 </template>
</oj-picto-chart>

row-span :number

The number of rows each shape (or custom image) spans. Used for creating a picto chart with mixed item sizes.
Default Value:
  • 1
Example

Initialize the picto chart item with the row-span attribute specified:

<oj-picto-chart data='[[dataProvider]]' as='item'>
 <template slot='itemTemplate'>
   <oj-picto-chart-item row-span='[[item.data.rowSpan]]'> </oj-picto-chart-item>
 </template>
</oj-picto-chart>

shape :string

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.
Supported Values:
Name Type Argument
"circle" string <optional>
"diamond" string <optional>
"human" string <optional>
"none" string <optional>
"plus" string <optional>
"rectangle" string <optional>
"square" string <optional>
"star" string <optional>
"triangleDown" string <optional>
"triangleUp" string <optional>
Default Value:
  • "rectangle"
Example

Initialize the picto chart item with the shape attribute specified:

<oj-picto-chart data='[[dataProvider]]' as='item'>
 <template slot='itemTemplate'>
   <oj-picto-chart-item shape='[[item.data.shape]]'> </oj-picto-chart-item>
 </template>
</oj-picto-chart>

short-desc :string

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

Initialize the picto chart item with the short-desc attribute specified:

<oj-picto-chart data='[[dataProvider]]' as='item'>
 <template slot='itemTemplate'>
   <oj-picto-chart-item short-desc='[[item.data.shortDesc]]'> </oj-picto-chart-item>
 </template>
</oj-picto-chart>

source :string

The URI of the custom image. If specified, it takes precedence over shape.
Default Value:
  • ''
Example

Initialize the picto chart item with the source attribute specified:

<oj-picto-chart data='[[dataProvider]]' as='item'>
 <template slot='itemTemplate'>
   <oj-picto-chart-item source='[[item.data.source]]'> </oj-picto-chart-item>
 </template>
</oj-picto-chart>

source-hover :string

The optional URI for the hover state. If not specified, the source image will be used.
Default Value:
  • ''
Example

Initialize the picto chart item with the source-hover attribute specified:

<oj-picto-chart data='[[dataProvider]]' as='item'>
 <template slot='itemTemplate'>
   <oj-picto-chart-item source-hover='[[item.data.sourceHover]]'> </oj-picto-chart-item>
 </template>
</oj-picto-chart>

source-hover-selected :string

The optional URI for the hover selected state. If not specified, the source image will be used.
Default Value:
  • ''
Example

Initialize the picto chart item with the source-hover-selected attribute specified:

<oj-picto-chart data='[[dataProvider]]' as='item'>
 <template slot='itemTemplate'>
   <oj-picto-chart-item source-hover-selected='[[item.data.sourceHoverSelected]]'> </oj-picto-chart-item>
 </template>
</oj-picto-chart>

source-selected :string

The optional URI for the selected state. If not specified, the source image will be used.
Default Value:
  • ''
Example

Initialize the picto chart item with the source-selected attribute specified:

<oj-picto-chart data='[[dataProvider]]' as='item'>
 <template slot='itemTemplate'>
   <oj-picto-chart-item source-selected='[[item.data.sourceSelected]]'> </oj-picto-chart-item>
 </template>
</oj-picto-chart>

svg-class-name :string

The CSS style class to apply to the item. The style class and inline style will override any other styling specified with other properties. For tooltip interactivity, it's recommended to also pass a representative color to the item color attribute. Does not apply if custom image is specified.
Default Value:
  • ''
Example

Initialize the picto chart item with the svg-class-name attribute specified:

<oj-picto-chart data='[[dataProvider]]' as='item'>
 <template slot='itemTemplate'>
   <oj-picto-chart-item svg-class-name='[[item.data.svgClassName]]'> </oj-picto-chart-item>
 </template>
</oj-picto-chart>

svg-style :Object

The inline style to apply to the item. The style class and inline style will override any other styling specified with other properties. For tooltip interactivity, it's recommended to also pass a representative color to the item color attribute. Does not apply if custom image is specified.
Default Value:
  • {}
Example

Initialize the picto chart item with the svg-style attribute specified:

<oj-picto-chart data='[[dataProvider]]' as='item'>
 <template slot='itemTemplate'>
   <oj-picto-chart-item svg-style='[[item.data.svgStyle]]'> </oj-picto-chart-item>
 </template>
</oj-picto-chart>