Class: CircularGauge

• new CircularGauge(options)

• new CircularGauge(options?)

AxisGauge.constructor

▸ addAxis(params): CircularAxis

Adds a new circular axis to the gauge. An axis can have only one needle. In order to add more needles to a gauge user needs to add a new axis with its own ranges and data.

CircularAxis

AxisGauge.addAxis

▸ addCssClass(cssclass): CircularGauge

Adds new css class to node

CircularGauge

this

AxisGauge.addCssClass

▸ addCustomComponent(component, region, layer): CircularGauge

Adds a custom component to provided specified region. A custom component is a group with any geometry inside. The group bounds will be changed to fit the region it is added to. To maintain the size of your custom group it is better to add a custom region to the gauge.

CircularGauge

AxisGauge.addCustomComponent

▸ addInvalidateHandler(handler): CircularGauge

Add invalidate handler

Deprecated

since 4.0, use Node.on instead

CircularGauge

this

AxisGauge.addInvalidateHandler

▸ addRegion(name, region?): CircularGauge

Adds a new region to the gauge. Region is a rectangular area on the gauge defined by x, y, width and height all set in CSS format.

Throws

When name is not provided to the custom region

CircularGauge

AxisGauge.addRegion

▸ Protected applyOpacity(context): CircularGauge

This method is called to apply opacity if it is specified on the rendering context. The default implementation sets global alpha on the rendering context

CircularGauge

this

AxisGauge.applyOpacity

▸ Protected applyResponsiveStyle(): void

Apply a responsive style rules it is exists

void

AxisGauge.applyResponsiveStyle

▸ checkCollision(context): boolean

Check if gauge falls within visible area on the screen

boolean

true if object is inside of rendarable area

AxisGauge.checkCollision

▸ clearAxes(): void

Clears gauge axes

void

AxisGauge.clearAxes

▸ clone(): Node

All subclasses should override copyConstructor or provide custom implementation for this method

Node

clone

AxisGauge.clone

▸ connectStyle(style, type, callback): CircularGauge

Connects style.

This convenience method subscribes a listener to given style for the specified type.
And automatically un-subscribes listener if node is disposed to prevent memory leaks

CircularGauge

this

AxisGauge.connectStyle

▸ Protected copyConstructor(gauge): CircularGauge

Copy constructor function Used to clone gauge

CircularGauge

AxisGauge.copyConstructor

▸ disconnectStyle(style, type, callback): CircularGauge

Disconnect style
This convenience method un-subscribes a listener to given style for the specified type.

CircularGauge

this

AxisGauge.disconnectStyle

▸ displayRegions(name?): CircularGauge

Debug method to display regions of the gauge in different colors

CircularGauge

AxisGauge.displayRegions

▸ dispose(): void

Disposes this node, once disposes a node should not be used anymore.
Clear all listeners, and disconnect styles to avoid memory leaks.
Also aggressively 'cleanup' this node by setting some of its members to null.

void

AxisGauge.dispose

▸ enableClipping(clipping): CircularGauge

Sets innergroup clipping

CircularGauge

AxisGauge.enableClipping

▸ enableEventPropagation(enable): CircularGauge

Enable event propagation from the node hierarchy from bottom to top

This option is similar to DOM Event bubbling, which allows to get any event from child node. By default it is disabled for better performance.

Example

import {Group} from '@int/geotoolkit/scene/Group';
import {Events as SceneEvents} from '@int/geotoolkit/scene/Node';
const parentGroup = new Group()
.setName('ParentGroup')
.enableEventPropagation(true);
const childGroup = new Group()
.setName('ChildGroup');

parentGroup.addChild(childGroup);
parentGroup.on(SceneEvents.Invalidate, (eventName, sender, args) => {
// Got notifications from all children of parent group
});
childGroup.invalidate();

CircularGauge

this

AxisGauge.enableEventPropagation

▸ enumerateNodes(callback, target?): void

Enumerate children nodes

void

AxisGauge.enumerateNodes

▸ execute(delegate): CircularGauge

Executes delegate and return the result. It allows us to keep all initialization calls in one place,
and we do not need to scroll up or down in IDE to find how and where it was initialized.

Example

// All setters (.setName() for example) returns reference to the this.
// In order to modify inner object like LineStyle or Pattern, to get this object (property) we should call getter to get object reference.
// Then modify it as shown below in Option 1 or you can use execute methods shown in Option 2.
import {Group} from '@int/geotoolkit/scene/Group';
import {Rect} from '@int/geotoolkit/util/Rect';
// Option 1
const group = new Group()
.setName('MyGroup')
.setBounds(new Rect(0, 0, 42, 16))
.enableClipping(true)
.setTag({'type': 'sometype'});

group.getLineStyle().setPattern('pattern');
return group;

// Options 2 ( using execute method )
return group
.execute(function () {
this.getLineStyle()
.setPattern("pattern");
});

CircularGauge

The result if any or this

AxisGauge.execute

▸ execute<T>(delegate): T

T

AxisGauge.execute

▸ Protected filter(context): boolean

Filter node

boolean

flag filter flag ("true" to render node; "false" otherwise)

AxisGauge.filter

▸ getAnimationStyle(): AnimationStyle

Return animation style

AnimationStyle

animationStyle current animation style

AxisGauge.getAnimationStyle

▸ getAxes(filter?): Iterator<Axis>

Returns an iterator over existing axes in this gauge

Iterator<Axis>

AxisGauge.getAxes

▸ getAxis(name): CircularAxis

Gets an axis by its name or index from axes iterator

CircularAxis

AxisGauge.getAxis

▸ getBounds(): Rect

Returns current bounds of the gauge

Rect

AxisGauge.getBounds

▸ getClassName(): string

string

AxisGauge.getClassName

▸ getClipStyle(): ClipStyle

Gets the current clipping style

ClipStyle

clipping style

AxisGauge.getClipStyle

▸ getCss(): CssStyle

Return CSS style

CssStyle

AxisGauge.getCss

▸ getCssClass(): string

Returns css class name to be used to apply CSS style

string

the css class name

AxisGauge.getCssClass

▸ getCssClasses(): string[]

Gets list of css class names which applied to this node

string[]

AxisGauge.getCssClasses

▸ getCssTransform(): string

Returns CSS transformation

string

AxisGauge.getCssTransform

▸ getCustomComponent(index): Group<Node>

Returns a registered custom component by its index

Group<Node>

Null if no such index exists

AxisGauge.getCustomComponent

▸ getCustomComponents(filter?): Iterator<Group<Node>>

Return iterator on registered custom components

Iterator<Group<Node>>

AxisGauge.getCustomComponents

▸ getFunctionRegistry(): FunctionRegistry

Returns function registry which provides handlers for gauges animation and alarms

FunctionRegistry

registry New registry to set

AxisGauge.getFunctionRegistry

▸ getId(): string | number

Returns the associated identifier of the node

string | number

The node's id

AxisGauge.getId

▸ Protected getInvalidateMethod(): AttributeCallback<EventDispatcher>

Gets invalidate method

AttributeCallback<EventDispatcher>

method to invalidate this object

AxisGauge.getInvalidateMethod

▸ getLayoutStyle(): LayoutStyle<string | number>

Returns the current layout of the gauge

LayoutStyle<string | number>

AxisGauge.getLayoutStyle

▸ getLocalTransform(): Transformation

Retrieves the transformation of bounds to parent

Transformation

transform the local transform.

AxisGauge.getLocalTransform

▸ getMarginsStyle(): SpaceStyle<string | number>

Return margins style

SpaceStyle<string | number>

AxisGauge.getMarginsStyle

▸ getName(): string

Returns the node name

string

The node name

AxisGauge.getName

▸ getOpacity(): number

Returns current node opacity

number

opacity

AxisGauge.getOpacity

▸ getOpacityBlendMode(): BlendMode

Returns current node opacity

BlendMode

opacity blend mode

AxisGauge.getOpacityBlendMode

▸ getPaddingStyle(): SpaceStyle<string | number>

Gets padding style

SpaceStyle<string | number>

▸ getParent(): Node

Return parent node

Node

parent node

AxisGauge.getParent

▸ getProperties(): OptionsOut

Returns properties pertaining to this gauge.

OptionsOut

properties

AxisGauge.getProperties

▸ getProperty(name): any

Gets dynamic property by name. These properties can be used as a property bags

any

AxisGauge.getProperty

▸ getPropertyKeys(): string[]

Returns known properties keys

string[]

AxisGauge.getPropertyKeys

▸ getRegion(name): Region

Returns the region registered with provided name.

Region

AxisGauge.getRegion

▸ getRenderingFilter(): IFilter

Return filter to be used for rendering and picking

IFilter

current filter

AxisGauge.getRenderingFilter

▸ getResponsiveStyle(): ResponsiveStyle

Return responsive style

ResponsiveStyle

AxisGauge.getResponsiveStyle

▸ getRoot(): Node

Returns root node.
If node doesn't have parent then it returns itself.

Node

the root node

AxisGauge.getRoot

▸ getScaleScrollStrategy(): Delegate

Gets scale scroll strategy

Delegate

scale scroll strategy

AxisGauge.getScaleScrollStrategy

▸ getSceneTransform(): Transformation

Returns transformation from node to root scene

Transformation

a transformation from node to root scene

AxisGauge.getSceneTransform

▸ getTag(): any

Returns the object associated with the node by user.

any

The node's user-object

AxisGauge.getTag

▸ getVisible(): boolean

Return visibility of the node

boolean

true if node is visible

AxisGauge.getVisible

▸ getWorldTransform(): Transformation

Retrieves the local transformation of the node which represents multiplication of parent to bounds and contents transformations.

Transformation

transform the world transform.

AxisGauge.getWorldTransform

▸ getZIndex(): number

Returns node z-index (null if not set)

number

AxisGauge.getZIndex

▸ hasAxis(axis): boolean

Checks if the gauge contains specified axis

boolean

AxisGauge.hasAxis

▸ hasCssClass(cssClass): boolean

Check if node has specified css class

boolean

AxisGauge.hasCssClass

▸ hasEventListener(type, callback?): boolean

Check if a list of event listeners for this type contains this listener

boolean

AxisGauge.hasEventListener

▸ hideRegions(): CircularGauge

Hides the regions displayed for debug reasons

CircularGauge

AxisGauge.hideRegions

▸ invalidate(bounds?, force?): CircularGauge

Invalidate area of the shape. This method invalidates parent by default. invalidated from parent to root node.

CircularGauge

this

AxisGauge.invalidate

▸ Protected invalidateParent(bounds?, force?): CircularGauge

Invalidate parent and notify all listeners. NOTE: Don't keep arguments of the event, because instance can be changed

Fires

Events.Invalidate

CircularGauge

this

AxisGauge.invalidateParent

▸ isDisposed(): boolean

Returns whether this object has been disposed

boolean

AxisGauge.isDisposed

▸ isEventPropagationEnabled(): boolean

Return true if event propagation is enabled from child to parent

boolean

AxisGauge.isEventPropagationEnabled

▸ isNotificationEnabled(): boolean

return state of notification

boolean

current notification state

AxisGauge.isNotificationEnabled

▸ isSelectable(): boolean

Returns true if node can be picked/selected.

boolean

The selectable flag

AxisGauge.isSelectable

▸ isSilent(): boolean

Return true if the event dispatcher doesn't notify any events

boolean

AxisGauge.isSilent

▸ notify<E>(event, source, args?): CircularGauge

Notify listeners of the Node

CircularGauge

this

AxisGauge.notify

▸ off<E>(type?, callback?): CircularGauge

Detach listener on event. Calling .off() with no arguments removes all attached listeners. Calling .off(type) with no callback removes all attached listeners for specific type.

CircularGauge

this

AxisGauge.off

▸ on<E>(type, callback): CircularGauge

Attach listener on event that will be called whenever the specified event is delivered to the target

If the callback function is already in the list of event listeners for this target, the function is not added a second time.

If a particular anonymous function is in the list of event listeners registered for a certain target, and then later in the code, an identical anonymous function is given in an "on" call, the second function will also be added to the list of event listeners for that target.

CircularGauge

this

AxisGauge.on

▸ Protected onParentChanged(node): CircularGauge

This method is called when parent changes. Do not call it directly.

CircularGauge

this

AxisGauge.onParentChanged

▸ Protected onVisibilityChanged(): void

This method is called if visibility is changed. Send event Events.VisibilityChanged

void

AxisGauge.onVisibilityChanged

▸ Protected postRendering(context): void

To be called after rendering. Call this method if you override method render

void

AxisGauge.postRendering

▸ Protected preRendering(context): void

Occurs before rendering this method sets clipping by default. Call this method if you override method render

void

AxisGauge.preRendering

▸ reassignAxisName(oldName, newName): CircularGauge

Changes the name of axis in the map without needing to remove and readd the axis

CircularGauge

AxisGauge.reassignAxisName

▸ registerAnimationStyle(root): void

Register animation style.

void

AxisGauge.registerAnimationStyle

▸ removeAxis(name): CircularGauge

Removes an axis from the gauge. If no such axis exists, nothing will be done.

CircularGauge

AxisGauge.removeAxis

▸ removeCssClass(cssclass): CircularGauge

Removes css class from node

CircularGauge

this

AxisGauge.removeCssClass

▸ removeCustomComponent(component): CircularGauge

Removes a registered custom component from the gauge. If such component was not registered, does nothing.

CircularGauge

AxisGauge.removeCustomComponent

▸ removeInvalidateHandler(handler): CircularGauge

Remove invalidate handler

Deprecated

since 4.0, use Node.off instead

CircularGauge

this

AxisGauge.removeInvalidateHandler

▸ removeRegion(name): CircularGauge

Deletes a region from the layout. Only custom added regions can be removed. Will do nothing if no such region was registered

CircularGauge

AxisGauge.removeRegion

▸ render(context): CircularGauge

Renders node

CircularGauge

AxisGauge.render

▸ renderAsync(context, callback): void

Render node in asynchronous mode. Default implementation creates call method "render" inside

void

AxisGauge.renderAsync

▸ rotate(theta, x, y): CircularGauge

Rotate bounds around a given coordinate

CircularGauge

this

AxisGauge.rotate

▸ scale(xx, yy): CircularGauge

Scale node

CircularGauge

this

AxisGauge.scale

▸ setAnimationStyle(animationStyle): CircularGauge

Sets animation style

CircularGauge

AxisGauge.setAnimationStyle

▸ setBounds(bounds): CircularGauge

Sets bounds to the gauge

CircularGauge

AxisGauge.setBounds

▸ setClipStyle(style): CircularGauge

Sets a new clipping style

CircularGauge

this

AxisGauge.setClipStyle

▸ setCss(style, merge?): CircularGauge

Sets CSS style. This style will be applied for all inserted elements

CircularGauge

this

AxisGauge.setCss

▸ setCssClass(name): CircularGauge

Sets css class name of the node to be used to apply CSS style

CircularGauge

this

AxisGauge.setCssClass

▸ setCssTransform(transform): CircularGauge

Set CSS transformation

CircularGauge

this

AxisGauge.setCssTransform

▸ setFunctionRegistry(registry): CircularGauge

Sets function registry which will provide handlers for gauges animation and alarms

CircularGauge

AxisGauge.setFunctionRegistry

▸ setId(id): CircularGauge

Allows the user to associate any identifier

CircularGauge

this

AxisGauge.setId

▸ setLayoutStyle(layoutStyle, merge?): CircularGauge

Specify desired layout style

CircularGauge

AxisGauge.setLayoutStyle

▸ setLocalTransform(localTransform): CircularGauge

Sets local transformation to be used to transform from local to parent coordinate

CircularGauge

AxisGauge.setLocalTransform

▸ setMarginsStyle(margins, merge?): CircularGauge

Sets margins style

CircularGauge

this

AxisGauge.setMarginsStyle

▸ setName(name): CircularGauge

Sets name of the node

CircularGauge

this

AxisGauge.setName

▸ setNotification(notify, force?): CircularGauge

set notification state

CircularGauge

this

AxisGauge.setNotification

▸ setOpacity(opacity, blendMode?): CircularGauge

Sets node opacity

CircularGauge

this

AxisGauge.setOpacity

▸ setPaddingStyle(style, merge?): CircularGauge

Sets padding style

CircularGauge

▸ setProperties(props?): CircularGauge

Sets properties pertaining to circulr gauge.

CircularGauge

AxisGauge.setProperties

▸ setProperty(name, value): CircularGauge

Sets dynamic property by name

CircularGauge

this

AxisGauge.setProperty

▸ setRange(range): CircularGauge

If this method is called on the gauge instead of an axis, the value and skipAnimation will be propagated to each axis registered for the gauge. Equivalent to looping through each axis and setting this value. Sets a new data range displayed by this axis

CircularGauge

AxisGauge.setRange

▸ setRegionSize(regionType, size): CircularGauge

For North, South sides sets height, for East and West sets width, for custom regions sets x, y, width and height

CircularGauge

AxisGauge.setRegionSize

▸ setRenderingFilter(filter): CircularGauge

Sets filter to be applied before rendering and picking

CircularGauge

this

AxisGauge.setRenderingFilter

▸ setResponsiveStyle(style): CircularGauge

Sets responsive style.

CircularGauge

this

AxisGauge.setResponsiveStyle

▸ setScaleScrollStrategy(strategy?): CircularGauge

Sets scale scroll strategy

CircularGauge

this

AxisGauge.setScaleScrollStrategy

▸ setSelectable(selectable): CircularGauge

Allows to select node. If node is not selectable then child node is not selectable.

CircularGauge

this

AxisGauge.setSelectable

▸ setSilent(bool): CircularGauge

Set silent mode

CircularGauge

this

AxisGauge.setSilent

▸ setStartAngle(angle): CircularGauge

Sets a new start angle

CircularGauge

▸ setSweepAngle(angle): CircularGauge

Sets a new sweep angle

CircularGauge

▸ setTag(tag): CircularGauge

Allows the user to associate any arbitrary object with the node.

CircularGauge

this

AxisGauge.setTag

▸ setValue(val, skipAnimation?): CircularGauge

If this method is called on the gauge instead of an axis, the value and skipAnimation will be propagated to each axis registered for the gauge. Equivalent to looping through each axis and setting this value.

CircularGauge

AxisGauge.setValue

▸ setVisible(value): CircularGauge

Sets visibility of the node. Send event Events.VisibilityChanged

CircularGauge

this

AxisGauge.setVisible

▸ setZIndex(value): CircularGauge

Sets z-index for node (set null for default)

CircularGauge

this

AxisGauge.setZIndex

▸ shear(shx, shy): CircularGauge

Shear this node's bounds

CircularGauge

this

AxisGauge.shear

▸ toString(): string

Returns a string representation of this object (generally the classname)

string

A string representation

AxisGauge.toString

▸ translate(tx, ty): CircularGauge

Translate bounds

CircularGauge

this

AxisGauge.translate

▸ unregisterAnimationStyle(root): void

Unregister animation style.

void

AxisGauge.unregisterAnimationStyle