Final Class: ColorAttributeGroupHandler

Oracle® JavaScript Extension Toolkit (JET)
16.1.0
F92237-01

Since:
  • 1.2
Module:
  • ojattributegrouphandler

QuickNav

Methods

Description

ColorAttributeGroupHandler is a class that can be used to associate color values with data categories. Color mappings are often set by default from the theme, but can also be configured by the application. ColorAttributeGroupHandlers are often used in data visualizations to associate colors with particular data characteristics, making it easier to visually discern trends and other relationships in the data. See also ShapeAttributeGroupHandler.

The HTML markup showing assignment of colors in an oj-chart: 

  <oj-chart data="[[dataProvider]]">
     <template slot='itemTemplate' data-oj-as='item'>
         <oj-chart-item value='[[item.data.population]]'
             group-id='[[ [item.data.country] ]]'
             series-id='[[ item.data.year ]]'
             color='[[ colorHandler.getValue(item.data.continent) ]]'>
         </oj-chart-item>
     </template>
  </oj-chart>
JavaScript configuration of a ColorAttributeGroupHandler using default color mappings: 

this.colorHandler = new attributeGroupHandler.ColorAttributeGroupHandler();
JavaScript configuration of a ColorAttributeGroupHandler using custom color mappings: 

this.colorHandler = new attributeGroupHandler.ColorAttributeGroupHandler({
   'Africa':'red',
   'Antarctica': 'orange',
   'Asia': 'yellow',
   'Australia/Oceania': 'green',
   'Europe': 'blue',
   'North America': 'indigo',
   'South America': 'violet' });


Usage

Typescript Import Format
//To import this class, use the format below.
import {ColorAttributeGroupHandler} from "ojs/ojattributegrouphandler";

For additional information visit:


Final classes in JET

Classes in JET are generally final and do not support subclassing. At the moment, final is not enforced. However, this will likely change in an upcoming JET release.


Constructor

new ColorAttributeGroupHandler(matchRules)

Creates a color attribute group handler that will generate color attribute values.
Parameters:
Name Type Argument Description
matchRules {[propName: string]: any} <optional>
 A map of key value pairs for categories and the matching attribute value e.g. {"soda" : "#336699", "water" : "#CC3300", "iced tea" : "#F7C808"}. Attribute values listed in the matchRules object will be reserved only for the matching categories when getAttributeValue is called. Note that not all colors in the default color ramp will meet minimum contrast requirements for text.

Methods

addMatchRule(category, attributeValue) : {void}

Reserves an attribute value for the given category. All match rules should be added before any category assignments are done with the getValue API. In most cases, use of this method should not be needed as match rules can be configured directly in the constructor.
Parameters:
Name Type Description
category string Used for checking inputs to getAttributeValue against when assigning an attribute value
attributeValue any The attribute value to assign for inputs matching the given category e.g. "square" or "circle"
Inherited From:
Returns:
Type
void

getCategoryAssignments : {Array<{[propName: string]: any}>}

Returns the current list of assigned categories as an array of objects with "category" and "value" keys. Note that match rules are not reflected in category assignments.
Inherited From:
Returns:

The current list of category and value pairings

Type
Array<{[propName: string]: any}>

getValue(category) : {any}

Assigns the given category an attribute value. Will consistently return the same attribute value for equal categories.
Parameters:
Name Type Description
category string The category to assign
Inherited From:
Returns:

The attribute value for the category

Type
any

getValueRamp : {Array.<string>}

Returns the array of possible color values for this attribute group handler.
Returns:

The array of color values

Type
Array.<string>