Element: <oj-picto-chart-item>

Oracle® JavaScript Extension Toolkit (JET)
7.1.0

F18183-01

Signature:

class ojPictoChartItem

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:
  • 7.1.0
Since:
  • 5.2.0
Module:
  • ojpictochart

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 {ojPictoChartItem} from "ojs/ojpictochart";

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

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 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 data='[[dataProvider]]'>
 <template slot='itemTemplate' data-oj-as='item'>
   <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:
  • ''

border-width :number

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

categories :Array.<string>

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

color :string

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

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

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

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

Whether drilling is enabled on 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:
Value
"inherit"
"off"
"on"
Default Value:
  • "inherit"

name :string

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

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

shape :"circle"|"diamond"|"human"|"plus"|"rectangle"|"square"|"star"|"triangleDown"|"triangleUp"|"none"|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.
Default Value:
  • "rectangle"

short-desc :string

The description of the item. This is used for customizing the tooltip text.

source :string

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

source-hover :string

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

source-hover-selected :string

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

source-selected :string

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

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:
  • ''

svg-style :CSSStyleDeclaration

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:
  • {}