Latest Threat Research:SANDWORM_MODE: Shai-Hulud-Style npm Worm Hijacks CI Workflows and Poisons AI Toolchains.Details →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

@syncfusion/ej2-lineargauge

Package Overview
Dependencies
Maintainers
3
Versions
124
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@syncfusion/ej2-lineargauge - npm Package Compare versions

Comparing version
31.1.17
 to
31.2.2
+2
-0
.eslintrc.json

@@ -42,2 +42,4 @@ {

"security/detect-bidi-characters":"error",
"no-prototype-builtins": "warn",
"no-extend-native": ["warn"],
"@typescript-eslint/no-inferrable-types": "off",

@@ -44,0 +46,0 @@ "@typescript-eslint/ban-types": ["warn", {

+2
-2
dist/ej2-lineargauge.min.js.LICENSE.txt
/*!
* filename: ej2-lineargauge.min.js.LICENSE.txt
* version : 31.1.17
* Copyright Syncfusion Inc. 2001 - 2024. All rights reserved.
* version : 31.2.2
* Copyright Syncfusion Inc. 2001 - 2025. All rights reserved.
* Use of this code is subject to the terms of our license.

@@ -6,0 +6,0 @@ * A copy of the current license can be obtained at any time by e-mailing

+2
-2
dist/global/index.d.ts
/*!
* filename: index.d.ts
* version : 31.1.17
* Copyright Syncfusion Inc. 2001 - 2024. All rights reserved.
* version : 31.2.2
* Copyright Syncfusion Inc. 2001 - 2025. All rights reserved.
* Use of this code is subject to the terms of our license.

@@ -6,0 +6,0 @@ * A copy of the current license can be obtained at any time by e-mailing

+14
-49
package.json
{
"_from": "@syncfusion/ej2-lineargauge@*",
"_id": "@syncfusion/ej2-lineargauge@16.42.0",
"_inBundle": false,
"_integrity": "sha512-SxME9420/NxaHYZasZCne749aQnFhwTE7InBDelRgUNxvAjautD6VIsYcMzutI3Pmi3OMZ6L/qN3DDRLqhSuAA==",
"_location": "/@syncfusion/ej2-lineargauge",
"_phantomChildren": {},
"_requested": {
"type": "range",
"registry": true,
"raw": "@syncfusion/ej2-lineargauge@*",
"name": "@syncfusion/ej2-lineargauge",
"escapedName": "@syncfusion%2fej2-lineargauge",
"scope": "@syncfusion",
"rawSpec": "*",
"saveSpec": null,
"fetchSpec": "*"
},
"_requiredBy": [
"/",
"/@syncfusion/ej2",
"/@syncfusion/ej2-angular-lineargauge",
"/@syncfusion/ej2-react-lineargauge",
"/@syncfusion/ej2-vue-lineargauge"
],
"_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-development/@syncfusion/ej2-lineargauge/-/ej2-lineargauge-16.42.0.tgz",
"_shasum": "e1a6602a5276d868ff6bcdc7cc97818b4ba0312f",
"_spec": "@syncfusion/ej2-lineargauge@*",
"_where": "D:\\SF3992\\WFH\\Nexus\\release",
"author": {
"name": "Syncfusion Inc."
},
"bugs": {
"url": "https://github.com/syncfusion/ej2-javascript-ui-controls/issues"
},
"bundleDependencies": false,
"name": "@syncfusion/ej2-lineargauge",
"version": "31.2.2",
"description": "Essential JS 2 LinearGauge Components",
"author": "Syncfusion Inc.",
"license": "SEE LICENSE IN license",
"dependencies": {
"@syncfusion/ej2-base": "~31.1.17",
"@syncfusion/ej2-pdf-export": "~31.1.17",
"@syncfusion/ej2-svg-base": "~31.1.17"
"@syncfusion/ej2-base": "~31.2.2",
"@syncfusion/ej2-pdf-export": "~31.2.2",
"@syncfusion/ej2-svg-base": "~31.2.2"
},
"deprecated": false,
"description": "Essential JS 2 LinearGauge Components",
"devDependencies": {},
"es2015": "./dist/es6/ej2-lineargauge.es5.js",
"homepage": "https://www.syncfusion.com/javascript-ui-controls",
"keywords": [

@@ -72,13 +38,12 @@ "ej2",

],
"license": "SEE LICENSE IN license",
"main": "./dist/ej2-lineargauge.umd.min.js",
"module": "./index.js",
"name": "@syncfusion/ej2-lineargauge",
"repository": {
"type": "git",
"url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
"url": "https://github.com/syncfusion/ej2-javascript-ui-controls.git"
},
"main": "./dist/ej2-lineargauge.umd.min.js",
"module": "./index.js",
"es2015": "./dist/es6/ej2-lineargauge.es5.js",
"typings": "index.d.ts",
"version": "31.1.17",
"sideEffects": false
"sideEffects": false,
"homepage": "https://www.syncfusion.com/javascript-ui-controls"
}
-4
dist/ts/index.d.ts
/**
* LinearGauge component exported.
*/
export * from './linear-gauge/index';
-4
dist/ts/index.ts
/**
* LinearGauge component exported.
*/
export * from './linear-gauge/index';
-45
dist/ts/linear-gauge/annotations/annotations.d.ts
import { LinearGauge } from '../../linear-gauge';
/**
* Represent the Annotation rendering for gauge
*
* @hidden
*/
export declare class Annotations {
constructor();
/**
* To render annotation elements.
*
* @param {LinearGauge} gauge - Specifies the instance of Linear Gauge.
*
* @private
*/
renderAnnotationElements(gauge: LinearGauge): void;
/**
* To create annotation elements
*
* @param {HTMLElement} element - Specifies the content of the annotation to be updated in it.
* @param {number} annotationIndex - Specifies the index number of the annotation in which the content is to be changed.
* @param {LinearGauge} gauge - Specifies the instance of Linear Gauge.
*
* @private
*/
createAnnotationTemplate(element: HTMLElement, annotationIndex: number, gauge: LinearGauge): void;
/**
* Method to annotation animation for circular gauge.
*
* @param {Element} element - Specifies the element.
* @param {LinearGauge} gauge - Specifies the instance of gauge.
* @returns {void}
*
* @private
*/
annotationAnimate(element: Element, gauge: LinearGauge): void;
protected getModuleName(): string;
/**
* To destroy the annotation.
*
* @return {void}
* @private
*/
destroy(): void;
}
-210
dist/ts/linear-gauge/annotations/annotations.ts
/* eslint-disable valid-jsdoc */
/* eslint-disable max-len */
import { createElement, isNullOrUndefined, Animation, AnimationOptions, animationMode } from '@syncfusion/ej2-base';
import { LinearGauge } from '../../linear-gauge';
import { Axis } from '../axes/axis';
import { Annotation } from '../model/base';
import { getTemplateFunction, getElement, getElementOffset, Size, Rect, getExtraWidth } from '../utils/helper';
import { getFontStyle, valueToCoefficient, VisibleRange } from '../utils/helper';
import { annotationRender } from '../model/constant';
import { IAnnotationRenderEventArgs } from '../model/interface';
import { FontModel } from '../model/base-model';
/**
* Represent the Annotation rendering for gauge
*
* @hidden
*/
export class Annotations {
// eslint-disable-next-line @typescript-eslint/no-empty-function
constructor() {
}
/**
* To render annotation elements.
*
* @param {LinearGauge} gauge - Specifies the instance of Linear Gauge.
*
* @private
*/
public renderAnnotationElements(gauge: LinearGauge): void {
const secondaryID: string = gauge.element.id + '_Secondary_Element';
const annotationGroup: HTMLElement = createElement('div', { id: gauge.element.id + '_AnnotationsGroup' });
annotationGroup.style.position = 'absolute';
annotationGroup.style.top = '0px';
annotationGroup.style.left = '0px';
annotationGroup.style.opacity = gauge.allowLoadingAnimation ? '0' : '1';
gauge.splitUpCount = gauge.allowLoadingAnimation && gauge.annotations.length > 0 ? gauge.splitUpCount + 1 : gauge.splitUpCount;
gauge.annotations.map((annotation: Annotation, index: number): void => {
if (annotation.content !== null) {
this.createAnnotationTemplate(annotationGroup, index, gauge);
}
});
if (annotationGroup.childElementCount > 0 && !(isNullOrUndefined(getElement(secondaryID)))) {
getElement(secondaryID).appendChild(annotationGroup);
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
(gauge as any).renderReactTemplates();
}
/**
* To create annotation elements
*
* @param {HTMLElement} element - Specifies the content of the annotation to be updated in it.
* @param {number} annotationIndex - Specifies the index number of the annotation in which the content is to be changed.
* @param {LinearGauge} gauge - Specifies the instance of Linear Gauge.
*
* @private
*/
public createAnnotationTemplate(element: HTMLElement, annotationIndex: number, gauge: LinearGauge): void {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
let left: number; let top: number; let templateFn: any;
let renderAnnotation: boolean = false;
let templateElement: HTMLCollection; let axis: Axis;
let axisIndex: number;
const annotation: Annotation = <Annotation>gauge.annotations[annotationIndex as number];
const childElement: HTMLElement = createElement('div', {
id: gauge.element.id + '_Annotation_' + annotationIndex
});
childElement.style.cssText = 'position: absolute; z-index:' + annotation.zIndex + ';';
const style: FontModel = {
size: annotation.font.size,
color: annotation.font.color,
fontFamily: annotation.font.fontFamily,
fontWeight: annotation.font.fontWeight,
fontStyle: annotation.font.fontStyle,
opacity: annotation.font.opacity
};
const argsData: IAnnotationRenderEventArgs = {
cancel: false, name: annotationRender, content: annotation.content,
annotation: annotation, textStyle: style
};
argsData.textStyle.color = style.color || gauge.themeStyle.labelColor;
gauge.trigger(annotationRender, argsData, () => {
if (!argsData.cancel) {
templateFn = getTemplateFunction(argsData.content, gauge);
if (templateFn && templateFn(gauge, gauge, argsData.content, gauge.element.id + '_ContentTemplate' + annotationIndex).length) {
templateElement = Array.prototype.slice.call(templateFn(gauge, gauge, argsData.content, gauge.element.id + '_ContentTemplate' + annotationIndex));
const length: number = templateElement.length;
for (let i: number = 0; i < length; i++) {
childElement.appendChild(templateElement[i as number]);
}
} else {
const annotationElement: HTMLElement = createElement('div', {
innerHTML: !isNullOrUndefined(argsData.content) ? argsData.content.toString() : null
});
annotationElement.style.cssText = getFontStyle(argsData.textStyle);
childElement.appendChild(annotationElement);
}
const offset: Size = getElementOffset(<HTMLElement>childElement.cloneNode(true), gauge.element);
if (!(isNullOrUndefined(annotation.axisValue))) {
axisIndex = isNullOrUndefined(annotation.axisIndex) ? 0 : annotation.axisIndex;
axis = <Axis>gauge.axes[axisIndex as number];
const range: VisibleRange = axis.visibleRange;
renderAnnotation = (annotation.axisValue >= range.min && annotation.axisValue <= range.max) ? true : false;
const line: Rect = axis.lineBounds;
const extraWidth: number = getExtraWidth(gauge.element);
const axisCollection: HTMLElement = getElement(gauge.element.id + '_Axis_Collections');
if (!isNullOrUndefined(axisCollection)) {
const transformValue: string = axisCollection.getAttribute('transform').split('(')[1].split(')')[0];
const leftTransformValue: number = parseInt(transformValue.split(',')[0], 10);
const topTransformValue: number = parseInt(transformValue.split(',')[1], 10);
if (gauge.orientation === 'Vertical') {
left = line.x + parseFloat(annotation.x.toString()) + leftTransformValue - extraWidth;
top = ((valueToCoefficient(parseFloat(annotation.axisValue.toString()), axis, gauge.orientation, range) * line.height) + line.y);
top += parseFloat(annotation.y.toString());
} else {
left = ((valueToCoefficient(parseFloat(annotation.axisValue.toString()), axis, gauge.orientation, range) * line.width) + line.x - extraWidth);
left += parseFloat(annotation.x.toString());
top = line.y + parseFloat(annotation.y.toString()) + topTransformValue;
}
left -= (offset.width / 2);
top -= (offset.height / 2);
}
} else {
const elementRect: ClientRect = gauge.element.getBoundingClientRect();
const bounds: ClientRect = gauge.svgObject.getBoundingClientRect();
renderAnnotation = true;
left = Math.abs(bounds.left - elementRect.left);
top = Math.abs(bounds.top - elementRect.top);
left = (annotation.horizontalAlignment === 'None') ? (left + annotation.x) : left;
top = (annotation.verticalAlignment === 'None') ? top + annotation.y : top;
switch (annotation.verticalAlignment) {
case 'Near':
top = top + annotation.y;
break;
case 'Center':
top = top + annotation.y + ((bounds.height / 2) - (offset.height / 2));
break;
case 'Far':
top = (top + bounds.height) + annotation.y - offset.height;
break;
}
switch (annotation.horizontalAlignment) {
case 'Near':
left = left + annotation.x;
break;
case 'Center':
left = left + annotation.x + ((bounds.width / 2) - (offset.width / 2));
break;
case 'Far':
left = (left + bounds.width) + annotation.x - offset.width;
break;
}
}
childElement.style.left = left + 'px';
childElement.style.top = top + 'px';
if (renderAnnotation) {
element.appendChild(childElement);
}
}
});
}
/**
* Method to annotation animation for circular gauge.
*
* @param {Element} element - Specifies the element.
* @param {LinearGauge} gauge - Specifies the instance of gauge.
* @returns {void}
*
* @private
*/
public annotationAnimate(element: Element, gauge: LinearGauge): void {
if ((element as HTMLElement).style.opacity === '0') {
let tempOpacity: number = 0;
const opacity: number = 1;
new Animation({}).animate(<HTMLElement>element, {
duration: (gauge.animationDuration === 0 && animationMode === 'Enable') ? 1000 :
(gauge.allowLoadingAnimation && gauge.animationDuration > 0 ? gauge.animationDuration / gauge.splitUpCount : 0),
progress: (args: AnimationOptions): void => {
if (args.timeStamp > args.delay) {
tempOpacity = ((args.timeStamp - args.delay) / args.duration);
element['style']['opacity'] = (opacity * tempOpacity);
}
},
end: (): void => {
element['style']['opacity'] = opacity;
gauge.allowLoadingAnimation = false;
gauge.isOverAllAnimationComplete = true;
}
});
}
}
/*
* Get module name.
*/
protected getModuleName(): string {
return 'Annotations';
}
/**
* To destroy the annotation.
*
* @return {void}
* @private
*/
// eslint-disable-next-line @typescript-eslint/no-empty-function
public destroy(): void { }
}
-27
dist/ts/linear-gauge/axes/animation.d.ts
import { LinearGauge } from '../../linear-gauge';
import { Axis, Pointer } from './axis';
/**
* To handle the animation for gauge
*
* @private
*/
export declare class Animations {
gauge: LinearGauge;
constructor(gauge: LinearGauge);
/**
* To do the marker pointer animation.
*
* @param element - Specifies the element of the marker pointer to which animation must be propagated.
* @param axis - Specifies the axis in which the marker pointer is available to which animation must be propagated.
* @param pointer - Specifies the pointer to which the animation must be propagated.
*/
performMarkerAnimation(element: Element, axis: Axis, pointer: Pointer): void;
/**
* Perform the bar pointer animation
*
* @param element
* @param axis
* @param pointer
*/
performBarAnimation(element: Element, axis: Axis, pointer: Pointer): void;
}
-271
dist/ts/linear-gauge/axes/animation.ts
import { Animation, AnimationOptions, isNullOrUndefined, animationMode } from '@syncfusion/ej2-base';
import { LinearGauge } from '../../linear-gauge';
import { Axis, Pointer } from './axis';
import { animationComplete } from '../model/constant';
import { Size, valueToCoefficient, PathOption, TextOption, Rect } from '../utils/helper';
import { calculateShapes, calculateTextPosition, getBox, VisibleRange } from '../utils/helper';
/**
* To handle the animation for gauge
*
* @private
*/
export class Animations {
public gauge: LinearGauge;
constructor(gauge: LinearGauge) {
this.gauge = gauge;
}
/**
* To do the marker pointer animation.
*
* @param element - Specifies the element of the marker pointer to which animation must be propagated.
* @param axis - Specifies the axis in which the marker pointer is available to which animation must be propagated.
* @param pointer - Specifies the pointer to which the animation must be propagated.
*/
public performMarkerAnimation(element: Element, axis: Axis, pointer: Pointer): void {
const markerElement: HTMLElement = <HTMLElement>element;
let options: PathOption; let textOptions: TextOption; let timeStamp: number;
const range: VisibleRange = axis.visibleRange;
const rectHeight: number = (this.gauge.orientation === 'Vertical') ? axis.lineBounds.height : axis.lineBounds.width;
const rectY: number = (this.gauge.orientation === 'Vertical') ? axis.lineBounds.y : axis.lineBounds.x;
if (this.gauge.orientation === 'Vertical') {
pointer.bounds.y = (valueToCoefficient(pointer.currentValue, axis, this.gauge.orientation, range) * rectHeight) + rectY;
} else {
pointer.bounds.x = (valueToCoefficient(pointer.currentValue, axis, this.gauge.orientation, range) * rectHeight) + rectY;
}
options = new PathOption(markerElement.id, null, null, null);
options = calculateShapes(
pointer.bounds, pointer.markerType, new Size(pointer.width, pointer.height),
pointer.imageUrl, options, this.gauge.orientation, axis, pointer);
if (pointer.markerType === 'Text') {
textOptions = new TextOption(markerElement.id, 0, 0, 'middle', pointer.text, null, 'auto');
textOptions = calculateTextPosition(pointer.bounds, pointer.markerType,
textOptions, this.gauge.orientation, axis, pointer);
}
let currentValue: number;
let start: number = typeof(pointer.startValue) === 'string' ? parseInt(pointer.startValue, 10) : pointer.startValue;
const end: number = pointer.currentValue;
start = (start === end) ? range.min : start;
const val: number = Math.abs(start - end);
const currentPath: string = options.d;
const cx: number = options['cx'];
const cy: number = options['cy'];
const x: number = pointer.markerType === 'Text' ? textOptions['x'] : options['x'];
const y: number = pointer.markerType === 'Text' ? textOptions['y'] : options['y'];
new Animation({}).animate(markerElement, {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
name: 'Linear' as any,
duration: (animationMode === 'Enable' && ((pointer.animationDuration === 0 && !this.gauge.allowLoadingAnimation) ||
this.gauge.animationDuration === 0)) ? 1000 : (this.gauge.allowLoadingAnimation && pointer.animationDuration === 0 ?
(this.gauge.animationDuration / this.gauge.splitUpCount) : pointer.animationDuration),
progress: (args: AnimationOptions): void => {
if (args.timeStamp >= args.delay) {
timeStamp = ((args.timeStamp - args.delay) / args.duration);
currentValue = (start < end) ? start + (timeStamp * val) : start - (timeStamp * val);
if (this.gauge.orientation === 'Vertical') {
pointer.bounds.y = (valueToCoefficient(currentValue, axis, this.gauge.orientation, range) *
rectHeight) + rectY;
options = calculateShapes(
pointer.bounds, pointer.markerType, new Size(pointer.width, pointer.height),
pointer.imageUrl, options, this.gauge.orientation, axis, pointer);
if (pointer.markerType === 'Text') {
textOptions = calculateTextPosition(pointer.bounds, pointer.markerType,
textOptions, this.gauge.orientation, axis, pointer);
}
if (!isNullOrUndefined(options['r'])) {
markerElement.setAttribute('cy', options['cy'].toString());
}
else if (!isNullOrUndefined(pointer.markerType === 'Text' ? textOptions['y'] : options['y'])) {
markerElement.setAttribute('y', pointer.markerType === 'Text' ? textOptions['y'] : options['y'].toString());
}
else {
markerElement.setAttribute('d', options.d);
}
markerElement.style.visibility = 'visible';
} else {
pointer.bounds.x = (valueToCoefficient(currentValue, axis, this.gauge.orientation, range) *
rectHeight) + rectY;
options = calculateShapes(
pointer.bounds, pointer.markerType, new Size(pointer.width, pointer.height),
pointer.imageUrl, options, this.gauge.orientation, axis, pointer);
if (pointer.markerType === 'Text') {
textOptions = calculateTextPosition(pointer.bounds, pointer.markerType,
textOptions, this.gauge.orientation, axis, pointer);
}
if (!isNullOrUndefined(options['r'])) {
markerElement.setAttribute('cx', options['cx'].toString());
}
else if (!isNullOrUndefined(pointer.markerType === 'Text' ? textOptions['x'] : options['x'])) {
markerElement.setAttribute('x', pointer.markerType === 'Text' ? textOptions['x'] : options['x'].toString());
}
else {
markerElement.setAttribute('d', options.d);
}
markerElement.style.visibility = 'visible';
}
}
},
end: () => {
if (!isNullOrUndefined(cy)) {
markerElement.setAttribute('cy', cy.toString());
markerElement.setAttribute('cx', cx.toString());
}
else if (!isNullOrUndefined(y)) {
markerElement.setAttribute('y', y.toString());
markerElement.setAttribute('x', x.toString());
}
else {
markerElement.setAttribute('d', currentPath);
}
markerElement.style.visibility = 'visible';
pointer.isPointerAnimation = false;
pointer.animationComplete = true;
pointer.startValue = pointer.value = pointer.currentValue;
this.gauge.trigger(animationComplete, { axis: axis, pointer: pointer });
if (this.gauge.allowLoadingAnimation) {
if (!isNullOrUndefined(this.gauge.annotationsModule) && (this.gauge.annotations.length > 0 && (this.gauge.annotations[0].content !== '' || this.gauge.annotations.length > 1))) {
const element: Element = document.getElementById(this.gauge.element.id + '_AnnotationsGroup');
this.gauge.annotationsModule.annotationAnimate(element, this.gauge);
} else {
this.gauge.allowLoadingAnimation = false;
this.gauge.isOverAllAnimationComplete = true;
}
}
}
});
}
/**
* Perform the bar pointer animation
*
* @param element
* @param axis
* @param pointer
*/
public performBarAnimation(element: Element, axis: Axis, pointer: Pointer): void {
const radix: number = 10; let timeStamp: number; let value2: number; let value1: number;
let currentValue: number;
let clipHeight: string; let clipY: string; let clipX: string; let clipVal: number;
let clipWidth: string; let currentHeight: number; let clipElement: HTMLElement;
const range: VisibleRange = axis.visibleRange;
const pointerElement: HTMLElement = <HTMLElement>element;
const lineHeight: number = (this.gauge.orientation === 'Vertical') ? axis.lineBounds.height : axis.lineBounds.width;
const lineY: number = (this.gauge.orientation === 'Vertical') ? axis.lineBounds.y : axis.lineBounds.x;
let start: number = typeof(pointer.startValue) === 'string' ? parseInt(pointer.startValue, 10) : pointer.startValue;
const end: number = pointer.currentValue;
start = (start === end) ? range.min : start;
let path: string = ''; let currentPath: string = '';
const tagName: string = pointerElement.tagName;
const val: number = Math.abs(start - end);
const pointerValue: number = (valueToCoefficient(end, axis, this.gauge.orientation, range) * lineHeight) + lineY;
const startPointerVal: number = (valueToCoefficient(range.min, axis, this.gauge.orientation, range) *
lineHeight) + lineY;
const rectY: number = (this.gauge.orientation === 'Vertical') ? !axis.isInversed ? pointerValue : startPointerVal :
axis.isInversed ? pointerValue : startPointerVal;
const rectHeight: number = Math.abs(startPointerVal - pointerValue);
if (this.gauge.container.type === 'Thermometer' && start === 0 && this.gauge.container.width > 0) {
if (end === axis.minimum) {
(element as HTMLElement).style.visibility = 'visible';
} else {
clipElement = <HTMLElement>pointerElement.parentElement.childNodes[1].childNodes[0].childNodes[0];
if (this.gauge.orientation === 'Vertical') {
clipY = clipElement.getAttribute('y');
clipHeight = clipElement.getAttribute('height');
clipVal = parseInt(clipY, radix) + parseInt(clipHeight, radix);
clipElement.setAttribute('y', clipVal.toString());
} else {
clipX = clipElement.getAttribute('x');
clipWidth = clipElement.getAttribute('width');
clipVal = parseInt(clipX, radix) + parseInt(clipWidth, radix);
clipElement.setAttribute('width', '0');
}
}
}
path = pointer.value === axis.minimum && this.gauge.container.type === 'RoundedRectangle' ? '' : getBox(
pointer.bounds, this.gauge.container.type, this.gauge.orientation,
new Size(pointer.bounds.width, pointer.bounds.height), 'bar', this.gauge.container.width, axis, pointer.roundedCornerRadius);
let animatedPointerWidth: number = pointer.bounds.width;
let animatedPointerHeight: number = pointer.bounds.height;
new Animation({}).animate(pointerElement, {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
name: 'Linear' as any,
duration: (animationMode === 'Enable' && ((pointer.animationDuration === 0 && !this.gauge.allowLoadingAnimation) ||
this.gauge.animationDuration === 0)) ? 1000 : (this.gauge.allowLoadingAnimation && pointer.animationDuration === 0 ?
(this.gauge.animationDuration / this.gauge.splitUpCount) : pointer.animationDuration),
progress: (animate: AnimationOptions): void => {
if (animate.timeStamp >= animate.delay) {
timeStamp = ((animate.timeStamp - animate.delay) / animate.duration);
currentValue = (start < end) ? start + (timeStamp * val) : start - (timeStamp * val);
value2 = (valueToCoefficient(currentValue, axis, this.gauge.orientation, range) * lineHeight) + lineY;
value1 = (valueToCoefficient(range.min, axis, this.gauge.orientation, range) * lineHeight) + lineY;
currentHeight = Math.abs(value2 - value1);
if (this.gauge.orientation === 'Vertical') {
pointer.bounds.y = (!axis.isInversed) ? value2 : value1;
animatedPointerHeight = currentHeight;
} else {
pointer.bounds.x = (axis.isInversed) ? value2 : value1;
animatedPointerWidth = currentHeight;
}
if (tagName === 'path') {
if (start === 0 && this.gauge.container.type === 'Thermometer') {
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
(this.gauge.orientation === 'Vertical') ?
clipElement.setAttribute('y', (clipVal - (timeStamp * parseInt(clipHeight, radix))).toString()) :
clipElement.setAttribute('width', (timeStamp * parseInt(clipWidth, radix)).toString());
}
currentPath = pointer.value === axis.minimum && this.gauge.container.type === 'RoundedRectangle' ? '' : getBox(
new Rect(pointer.bounds.x, pointer.bounds.y, animatedPointerWidth, animatedPointerHeight),
this.gauge.container.type,
this.gauge.orientation, new Size(animatedPointerWidth, animatedPointerHeight), 'bar',
this.gauge.container.width, axis, pointer.roundedCornerRadius);
pointerElement.setAttribute('d', currentPath);
pointerElement.style.visibility = 'visible';
} else {
if (this.gauge.orientation === 'Vertical') {
pointerElement.setAttribute('y', pointer.bounds.y.toString());
pointerElement.setAttribute('height', animatedPointerHeight.toString());
} else {
pointerElement.setAttribute('x', pointer.bounds.x.toString());
pointerElement.setAttribute('width', animatedPointerWidth.toString());
}
pointerElement.style.visibility = 'visible';
}
}
},
end: () => {
if (tagName === 'path') {
if (start === 0 && this.gauge.container.type === 'Thermometer') {
pointerElement.parentElement.children[1].remove();
} else {
pointerElement.setAttribute('d', path);
}
} else {
if (this.gauge.orientation === 'Vertical') {
pointerElement.setAttribute('y', rectY.toString());
pointerElement.setAttribute('height', rectHeight.toString());
} else {
pointerElement.setAttribute('x', rectY.toString());
pointerElement.setAttribute('width', rectHeight.toString());
}
}
pointerElement.style.visibility = 'visible';
pointer.isPointerAnimation = false;
pointer.startValue = pointer.value = pointer.currentValue;
this.gauge.trigger(animationComplete, { axis: axis, pointer: pointer });
if (this.gauge.allowLoadingAnimation) {
if (!isNullOrUndefined(this.gauge.annotationsModule) && (this.gauge.annotations.length > 0 && (this.gauge.annotations[0].content !== '' || this.gauge.annotations.length > 1))) {
const element: Element = document.getElementById(this.gauge.element.id + '_AnnotationsGroup');
this.gauge.annotationsModule.annotationAnimate(element, this.gauge);
} else {
this.gauge.allowLoadingAnimation = false;
this.gauge.isOverAllAnimationComplete = true;
}
}
}
});
}
}
-442
dist/ts/linear-gauge/axes/axis-model.d.ts
import { Property, Complex, ChildProperty, Collection } from '@syncfusion/ej2-base';import { VisibleLabels, Size, VisibleRange, Rect, Align } from '../utils/helper';import { Font, Border, TextStyle } from '../model/base';import { FontModel, BorderModel, TextStyleModel } from '../model/base-model';import { Point, Placement, MarkerType, Position} from '../utils/enum';import { LinearGradientModel, RadialGradientModel} from '../axes/gradient-model';
/**
* Interface for a class Line
*/
export interface LineModel {
/**
* Sets and gets the dash-array of the axis line.
*
* @default ''
*/
dashArray?: string;
/**
* Sets and gets the height of the axis line.
*
* @aspDefaultValueIgnore
* @default null
*/
height?: number;
/**
* Sets and gets the width of the axis line.
*
* @default 2
*/
width?: number;
/**
* Sets and gets the color for the axis line.
*
* @default null
*/
color?: string;
/**
* Sets and gets the offset value from where the axis line must be placed in linear gauge.
*
* @default 0
*/
offset?: number;
}
/**
* Interface for a class Label
*/
export interface LabelModel {
/**
* Sets and gets the options for customizing the style of the text in axis labels.
*/
font?: FontModel;
/**
* Enables or disables to use the color of the ranges in the labels of the linear gauge.
*
* @default false
*/
useRangeColor?: boolean;
/**
* Sets and gets the format for the axis label. This property accepts any global format string like 'C', 'n1', 'P' etc.
* Also accepts placeholder like '{value}°C' in which value represent the axis label e.g. 20°C.
*
* @default ''
*/
format?: string;
/**
* Sets and gets the offset value from where the labels must be placed from the axis in linear gauge.
*
* @default 0
*/
offset?: number;
/**
* Sets and gets the position of the axis label in linear gauge.
*
* @default Auto
*/
position?: Position;
}
/**
* Interface for a class Range
*/
export interface RangeModel {
/**
* Sets and gets the start value for the range in axis.
*
* @default 0
*/
start?: number;
/**
* Sets and gets the end value for the range in axis.
*
* @default 0
*/
end?: number;
/**
* Sets and gets the properties to render a linear gradient for the range.
* If both linear and radial gradient is set, then the linear gradient will be rendered in the range.
*
* @default null
*/
linearGradient?: LinearGradientModel;
/**
* Sets and gets the properties to render a radial gradient for the range.
*
* @default null
*/
radialGradient?: RadialGradientModel;
/**
* Sets and gets the position to place the ranges in the axis.
*
* @default Outside
*/
position?: Position;
/**
* Sets and gets the color of the axis range.
*
* @default ''
*/
color?: string;
/**
* Sets and gets the width for the start of the range in axis.
*
* @default 10
*/
startWidth?: number;
/**
* Sets and gets the width for the end of the range in axis.
*
* @default 10
*/
endWidth?: number;
/**
* Sets and gets the offset value from where the range must be placed from the axis in linear gauge.
*
* @default '0'
*/
offset?: number | string;
/**
* Sets and gets the options to customize the style properties of the border for the axis range.
*/
border?: BorderModel;
}
/**
* Interface for a class Tick
*/
export interface TickModel {
/**
* Sets and gets the height of the tick line in the axis. The default value is 20 for major ticks and 10 for minor ticks.
*/
height?: number;
/**
* Sets and gets the width of the tick line in the axis. The default value is 2 for major ticks and 1 for minor ticks.
*
* @default 2
*/
width?: number;
/**
* Sets and gets the gap between the ticks in the axis.
*
* @aspDefaultValueIgnore
* @default null
*/
interval?: number;
/**
* Sets and gets the color for the major or minor tick line. This property accepts value in hex code,
* rgba string as a valid CSS color string.
*
* @default null
*/
color?: string;
/**
* Sets and gets the offset value from where the ticks must be placed from the axis in linear gauge.
*
* @aspDefaultValueIgnore
* @default null
*/
offset?: number;
/**
* Sets and gets the value to place the ticks in the axis.
*
* @default Auto
*/
position?: Position;
}
/**
* Interface for a class Pointer
*/
export interface PointerModel {
/**
* Sets and gets the type of pointer in axis. There are two types of pointers: Marker and Bar.
*
* @default Marker
*/
type?: Point;
/**
* Sets and gets the properties to render a linear gradient for the pointer.
* If both linear and radial gradient is set, then the linear gradient will be rendered in the pointer.
*
* @default null
*/
linearGradient?: LinearGradientModel;
/**
* Sets and gets the properties to render a radial gradient for the pointer.
*
* @default null
*/
radialGradient?: RadialGradientModel;
/**
* Sets and gets the value of the pointer in axis.
*
* @default null
*/
value?: number;
/**
* Sets and gets the type of the marker for pointers in axis.
*
* @default InvertedTriangle
*/
markerType?: MarkerType;
/**
* Sets and gets the URL path for the image in marker when the marker type is set as image.
*
* @default null
*/
imageUrl?: string;
/**
* Sets and gets the options to customize the style properties of the border for pointers.
*/
border?: BorderModel;
/**
* Sets and gets the corner radius for pointer.
*
* @default 10
*/
roundedCornerRadius?: number;
/**
* Sets and gets the place of the pointer.
*
* @default Far
*/
placement?: Placement;
/**
* Sets and gets the height of the pointer.
*
* @default 20
*/
height?: number;
/**
* Sets and gets the width of the pointer.
*
* @default 20
*/
width?: number;
/**
* Sets and gets the color of the pointer.
*
* @default null
*/
color?: string;
/**
* Sets and gets the opacity of pointer in linear gauge.
*
* @default 1
*/
opacity?: number;
/**
* Sets and gets the duration of animation in pointer.
*
* @default 0
*/
animationDuration?: number;
/**
* Enables or disables the drag movement of pointer to update the pointer value.
*
* @default false
*/
enableDrag?: boolean;
/**
* Sets and gets the value to position the pointer from the axis.
*
* @default '0'
*/
offset?: number | string;
/**
* Sets and gets the position of the pointer.
*
* @default Auto
*/
position?: Position;
/**
* Sets and gets the description for the pointer.
*
* @default null
*/
description?: string;
/**
* Specifies the text that will be displayed as the pointer in Linear Gauge. To display the text pointer, the `markerType` property must be set to `Text`.
*
* @default ''
*/
text?: string;
/**
* Defines the font properties such as font-size, font family and others for the text pointer.
*/
textStyle?: TextStyleModel;
}
/**
* Interface for a class Axis
*/
export interface AxisModel {
/**
* Sets and gets the minimum value for the axis.
*
* @default 0
*/
minimum?: number;
/**
* Sets and gets the maximum value for the axis.
*
* @default 100
*/
maximum?: number;
/**
* Enables or disables the inversed axis.
*
* @default false
*/
isInversed?: boolean;
/**
* Shows or hides the last label in the axis of the linear gauge.
*
* @default false
*/
showLastLabel?: boolean;
/**
* Enables or disables the opposed position of the axis in the linear gauge.
*
* @default false
*/
opposedPosition?: boolean;
/**
* Sets and gets the options for customizing the appearance of the axis line.
*/
line?: LineModel;
/**
* Sets and gets the options for customizing the ranges of an axis.
*/
ranges?: RangeModel[];
/**
* Sets and gets the options for customizing the pointers of an axis.
*/
pointers?: PointerModel[];
/**
* Sets and gets the options for customizing the major tick lines.
*/
majorTicks?: TickModel;
/**
* Sets and gets the options for customizing the minor tick lines.
*/
minorTicks?: TickModel;
/**
* Sets and gets the options for customizing the appearance of the label in axis.
*/
labelStyle?: LabelModel;
}
-84
dist/ts/linear-gauge/axes/axis-panel.d.ts
import { LinearGauge } from '../../linear-gauge';
import { Axis, Pointer } from './axis';
/**
* To calculate the overall axis bounds for gauge.
*
* @private
*/
export declare class AxisLayoutPanel {
private gauge;
constructor(gauge: LinearGauge);
/**
* To calculate the axis bounds
*/
calculateAxesBounds(): void;
/**
* Calculate axis line bounds
*
* @param axis
* @param axisIndex
*/
calculateLineBounds(axis: Axis, axisIndex: number): void;
/**
* Calculate axis tick bounds
*
* @param axis
*/
calculateTickBounds(axis: Axis): void;
/**
* To Calculate axis label bounds
*
* @param axis
*/
calculateLabelBounds(axis: Axis): void;
/**
* Calculate pointer bounds
*
* @param {Axis} axis - Specifies the axis.
* @returns {void}
*/
calculatePointerBounds(axis: Axis): void;
/**
* Calculate marker pointer bounds
*
* @param axis
* @param pointer
*/
calculateMarkerBounds(axis: Axis, pointer: Pointer): void;
/**
* Calculate bar pointer bounds
*
* @param axisIndex
* @param axis
* @param pointerIndex
* @param pointer
*/
calculateBarBounds(axis: Axis, pointer: Pointer): void;
/**
* Calculate ranges bounds
*
* @param axis
* @param axisIndex
*/
calculateRangesBounds(axis: Axis): void;
private checkPreviousAxes;
/**
*
* @param {Axis} axis - Specifies the axis to which labels are to be rendered.
* @returns {void}
*/
calculateVisibleLabels(axis: Axis): void;
/**
* Calculate maximum label width for the axis.
*
* @param {Axis} axis - Specifies the axis to which the labels are to be rendered.
* @return {void}
* @private
*/
private getMaxLabelWidth;
private checkThermometer;
/**
* @private
*/
destroy(): void;
}
-592
dist/ts/linear-gauge/axes/axis-panel.ts
/* eslint-disable valid-jsdoc */
import { isNullOrUndefined } from '@syncfusion/ej2-base';
import { LinearGauge } from '../../linear-gauge';
import { Axis, Label, Tick, Pointer, Range } from './axis';
import { Orientation, Position } from '../utils/enum';
import { axisLabelRender } from '../model/constant';
import { IAxisLabelRenderEventArgs } from '../model/interface';
import { VisibleLabels, Size, Align, measureText, Rect, textFormatter, formatValue, stringToNumber} from '../utils/helper';
import { valueToCoefficient, getRangePalette, VisibleRange, withInRange, calculateNiceInterval } from '../utils/helper';
/**
* To calculate the overall axis bounds for gauge.
*
* @private
*/
export class AxisLayoutPanel {
private gauge: LinearGauge;
constructor(gauge: LinearGauge) {
this.gauge = gauge;
}
/**
* To calculate the axis bounds
*/
public calculateAxesBounds(): void {
let axis: Axis; let bounds: Rect;
this.gauge.nearSizes = [];
this.gauge.farSizes = [];
let x: number; let y: number; let width: number; let height: number;
const axisPadding: number = 8;
this.checkThermometer();
for (let i: number = 0; i < this.gauge.axes.length; i++) {
axis = <Axis>this.gauge.axes[i as number];
axis.checkAlign = new Align(i, ((!axis.opposedPosition) ? 'Near' : 'Far'));
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
(!axis.opposedPosition) ? this.gauge.nearSizes.push(1) : this.gauge.farSizes.push(1);
this.calculateLineBounds(axis, i);
this.calculateTickBounds(axis);
this.calculateLabelBounds(axis);
if (axis.pointers.length > 0) {
this.calculatePointerBounds(axis);
}
if (axis.ranges.length > 0) {
this.calculateRangesBounds(axis);
}
bounds = axis.labelBounds;
const offset: number = this.gauge.axes[i as number].labelStyle.offset;
if (this.gauge.orientation === 'Vertical') {
x = (!axis.opposedPosition) ? bounds.x - offset - axisPadding : axis.lineBounds.x;
y = axis.lineBounds.y;
height = axis.lineBounds.height;
width = Math.abs((!axis.opposedPosition) ? (axis.lineBounds.x - x) :
((bounds.x + bounds.width + axisPadding) - x - offset));
} else {
y = (!axis.opposedPosition) ? bounds.y - bounds.height - offset - axisPadding : axis.lineBounds.y;
x = axis.lineBounds.x;
width = axis.lineBounds.width;
height = Math.abs((!axis.opposedPosition) ? Math.abs(axis.lineBounds.y - y) : (bounds.y + axisPadding) - y - offset);
}
axis.bounds = new Rect(x, y, width, height);
}
}
/**
* Calculate axis line bounds
*
* @param axis
* @param axisIndex
*/
public calculateLineBounds(axis: Axis, axisIndex: number): void {
let x: number; let y: number; let width: number; let height: number;
let prevAxis: Axis;
let lineHeight: number = axis.line.height;
const orientation: Orientation = this.gauge.orientation;
const containerRect: Rect = this.gauge.containerBounds;
lineHeight = (axis.line.width > 0) ? lineHeight : null;
if (orientation === 'Vertical') {
y = (isNullOrUndefined(lineHeight)) ? containerRect.y :
containerRect.y + ((containerRect.height / 2) - (lineHeight / 2));
width = axis.line.width;
height = (isNullOrUndefined(lineHeight)) ? containerRect.height : lineHeight;
} else {
x = (isNullOrUndefined(lineHeight)) ? containerRect.x :
containerRect.x + ((containerRect.width / 2) - (lineHeight / 2));
height = axis.line.width;
width = (isNullOrUndefined(lineHeight)) ? containerRect.width : lineHeight;
}
let index: number = this.checkPreviousAxes(axis, axisIndex);
let count: number = 0;
if (!isNullOrUndefined(index)) {
for (let i: number = index; i >= 0; i--) {
if (this.gauge.axes[i as number].minimum !== this.gauge.axes[i as number].maximum) {
index = i;
count++;
break;
}
}
if (count === 0) {
index = null;
}
}
if (isNullOrUndefined(index)) {
if (orientation === 'Vertical') {
x = (!axis.opposedPosition ? containerRect.x : containerRect.x + containerRect.width) + axis.line.offset;
} else {
y = (!axis.opposedPosition ? containerRect.y : containerRect.y + containerRect.height) + axis.line.offset;
}
} else {
prevAxis = <Axis>this.gauge.axes[index as number];
if (orientation === 'Vertical') {
x = ((!axis.opposedPosition) ? prevAxis.bounds.x : (prevAxis.bounds.x + prevAxis.bounds.width)) + axis.line.offset;
} else {
y = ((!axis.opposedPosition) ? prevAxis.bounds.y : (prevAxis.bounds.y + prevAxis.bounds.height)) + axis.line.offset;
}
}
axis.lineBounds = new Rect(x, y, width, height);
if (axis.minimum === axis.maximum) {
axis.lineBounds = new Rect(0, 0, 0, 0);
}
}
/**
* Calculate axis tick bounds
*
* @param axis
*/
public calculateTickBounds(axis: Axis): void {
let x: number; let y: number;
let min: number = Math.min(axis.minimum, axis.maximum);
const max: number = Math.max(axis.minimum, axis.maximum);
min = (min === max) ? max - 1 : min;
const bounds: Rect = axis.lineBounds;
const major: Tick = <Tick>axis.majorTicks;
const minor: Tick = <Tick>axis.minorTicks;
axis.majorInterval = major.interval;
axis.minorInterval = minor.interval;
const size: number = (this.gauge.orientation === 'Vertical' ? bounds.height : bounds.width);
const lineSize: number = (this.gauge.orientation === 'Vertical' ? bounds.width : bounds.height) / 2;
axis.majorInterval = isNullOrUndefined(axis.majorInterval) ? calculateNiceInterval(min, max, size, this.gauge.orientation)
: major.interval;
axis.visibleRange = new VisibleRange(min, max, axis.majorInterval, (max - min));
axis.minorInterval = (isNullOrUndefined(axis.minorInterval)) ? axis.majorInterval / 2 : axis.minorInterval;
if (this.gauge.orientation === 'Vertical') {
x = axis.majorTicks.position === 'Auto' ? ((!axis.opposedPosition ? (bounds.x - lineSize - major.height) : bounds.x + lineSize)
+ major.offset) : x;
x = axis.majorTicks.position !== 'Auto' ? (axis.majorTicks.position === 'Cross' ? bounds.x - major.height / 2 - major.offset :
((axis.majorTicks.position === 'Inside' && !axis.opposedPosition) ||
(axis.majorTicks.position === 'Outside' && axis.opposedPosition)) ? (bounds.x - lineSize - major.height - major.offset)
: (bounds.x + lineSize + major.offset)) : x;
axis.majorTickBounds = new Rect(x, bounds.y, major.height, bounds.height);
if (axis.minimum === axis.maximum) {
axis.majorTickBounds = new Rect(0, 0, 0, 0);
}
x = axis.minorTicks.position === 'Auto' ? ((!axis.opposedPosition ? (bounds.x - lineSize - minor.height) : bounds.x + lineSize)
+ minor.offset) : x;
x = axis.minorTicks.position !== 'Auto' ? (axis.minorTicks.position === 'Cross' ? bounds.x - minor.height / 2 - minor.offset :
((axis.minorTicks.position === 'Inside' && !axis.opposedPosition) ||
(axis.minorTicks.position === 'Outside' && axis.opposedPosition)) ? (bounds.x - lineSize - minor.height - minor.offset)
: (bounds.x + lineSize + minor.offset)) : x;
axis.minorTickBounds = new Rect(x, bounds.y, minor.height, bounds.height);
if (axis.minimum === axis.maximum) {
axis.minorTickBounds = new Rect(0, 0, 0, 0);
}
} else {
y = axis.majorTicks.position === 'Auto' ? ((!axis.opposedPosition ? (bounds.y - lineSize - major.height) : bounds.y + lineSize)
+ major.offset) : y;
y = axis.majorTicks.position !== 'Auto' ? ((axis.majorTicks.position === 'Cross' ? bounds.y - major.height / 2 - major.offset :
((axis.majorTicks.position === 'Inside' && !axis.opposedPosition) ||
(axis.majorTicks.position === 'Outside' && axis.opposedPosition)) ?
(bounds.y - lineSize - major.height) - major.offset : bounds.y + lineSize + major.offset)) : y;
axis.majorTickBounds = new Rect(bounds.x, y, bounds.width, major.height);
if (axis.minimum === axis.maximum) {
axis.majorTickBounds = new Rect(0, 0, 0, 0);
}
y = axis.minorTicks.position === 'Auto' ? ((!axis.opposedPosition ? (bounds.y - lineSize - minor.height) : bounds.y + lineSize)
+ minor.offset) : y;
y = axis.minorTicks.position !== 'Auto' ? ((axis.minorTicks.position === 'Cross' ? bounds.y - minor.height / 2 - major.offset :
((axis.minorTicks.position === 'Inside' && !axis.opposedPosition) ||
(axis.minorTicks.position === 'Outside' && axis.opposedPosition)) ?
(bounds.y - lineSize - minor.height) - minor.offset : bounds.y + lineSize + minor.offset)) : y;
axis.minorTickBounds = new Rect(bounds.x, y, bounds.width, minor.height);
if (axis.minimum === axis.maximum) {
axis.minorTickBounds = new Rect(0, 0, 0, 0);
}
}
}
/**
* To Calculate axis label bounds
*
* @param axis
*/
public calculateLabelBounds(axis: Axis): void {
let x: number; let y: number;
const padding: number = 5;
const applyPositionBounds: boolean = (axis.labelStyle.position !== 'Auto' && axis.majorTicks.position !== 'Auto' &&
axis.minorTicks.position !== 'Auto');
const bounds: Rect = applyPositionBounds ? (axis.labelStyle.position === axis.minorTicks.position &&
axis.minorTicks.position !== axis.majorTicks.position ? axis.minorTickBounds : axis.majorTickBounds) :
axis.majorTickBounds;
const offset: number = axis.labelStyle.offset;
this.calculateVisibleLabels(axis);
if (axis.minimum === axis.maximum) {
axis.labelBounds = new Rect(0, 0, 0, 0);
} else {
const width: number = axis.maxLabelSize.width;
const height: number = axis.maxLabelSize.height / 2;
if (this.gauge.orientation === 'Vertical') {
x = axis.labelStyle.position === 'Auto' ? ((!axis.opposedPosition ? (bounds.x - width - padding) :
(bounds.x + bounds.width + padding)) + offset) : x;
let boundx: number = bounds.x;
const offsetForCross: number = axis.majorTicks.position === 'Cross' || axis.minorTicks.position === 'Cross' ?
(bounds.width > axis.lineBounds.width ? bounds.width / 2 : axis.lineBounds.width / 2) : axis.lineBounds.width / 2;
boundx = applyPositionBounds ? ((axis.labelStyle.position !== axis.minorTicks.position &&
axis.labelStyle.position !== axis.majorTicks.position) ?
(axis.minorTicks.position !== 'Cross' && axis.majorTicks.position !== 'Cross' ? (axis.labelStyle.position === 'Inside' ?
bounds.x - axis.lineBounds.width : axis.labelStyle.position === 'Outside' ?
bounds.x + axis.lineBounds.width : bounds.x) : (axis.labelStyle.position === 'Inside' ?
axis.lineBounds.x - offsetForCross : axis.labelStyle.position === 'Outside' ?
axis.lineBounds.x - bounds.width + offsetForCross : bounds.x)) : bounds.x) : bounds.x;
x = axis.labelStyle.position !== 'Auto' ? (axis.labelStyle.position === 'Cross' ? axis.lineBounds.x -
axis.maxLabelSize.width / 4 - offset : ((axis.labelStyle.position === 'Inside' && !axis.opposedPosition) ||
(axis.labelStyle.position === 'Outside' && axis.opposedPosition)) ?
((boundx - width - padding) - offset) : ((boundx + bounds.width + padding) + offset)) : x;
y = axis.lineBounds.y;
} else {
y = axis.labelStyle.position === 'Auto' ? ((!axis.opposedPosition ?
(bounds.y - padding) : ((bounds.y + bounds.height + padding) + height)) + offset) : y;
let boundy: number = bounds.y;
const offsetForCross: number = axis.majorTicks.position === 'Cross' || axis.minorTicks.position === 'Cross' ?
(bounds.height > axis.lineBounds.height ? bounds.height / 2 : axis.lineBounds.height / 2) : axis.lineBounds.height / 2;
boundy = applyPositionBounds ? ((axis.labelStyle.position !== axis.minorTicks.position &&
axis.labelStyle.position !== axis.majorTicks.position) ?
(axis.minorTicks.position !== 'Cross' && axis.majorTicks.position !== 'Cross' ?
(axis.labelStyle.position === 'Inside' ? bounds.y - axis.lineBounds.height : axis.labelStyle.position === 'Outside' ?
bounds.y + axis.lineBounds.height : bounds.y) : (axis.labelStyle.position === 'Inside' ?
axis.lineBounds.y - offsetForCross : axis.labelStyle.position === 'Outside' ?
axis.lineBounds.y - bounds.height + offsetForCross : bounds.y)) : bounds.y) : bounds.y;
y = axis.labelStyle.position !== 'Auto' ? (axis.labelStyle.position === 'Cross' ? axis.lineBounds.y +
axis.maxLabelSize.height / 4 - offset : ((axis.labelStyle.position === 'Inside' && !axis.opposedPosition) ||
(axis.labelStyle.position === 'Outside' && axis.opposedPosition)) ?
(boundy - padding) - offset : ((boundy + bounds.height + padding) + height) + offset) : y;
x = axis.lineBounds.x;
}
axis.labelBounds = new Rect(x, y, width, height);
}
}
/**
* Calculate pointer bounds
*
* @param {Axis} axis - Specifies the axis.
* @returns {void}
*/
public calculatePointerBounds(axis: Axis): void {
let pointer: Pointer;
const range: VisibleRange = axis.visibleRange;
const minimumValue: number = Math.min(range.min, range.max);
const maximumValue: number = Math.max(range.min, range.max);
for (let i: number = 0; i < axis.pointers.length; i++) {
pointer = <Pointer>axis.pointers[i as number];
if (!isNullOrUndefined((<string>pointer.offset)) && (<string>pointer.offset).length > 0) {
pointer.currentOffset = stringToNumber(<string>pointer.offset, (this.gauge.orientation === 'Horizontal' ?
this.gauge.availableSize.height / 2 : this.gauge.availableSize.width / 2));
} else {
pointer.currentOffset = <number>pointer.offset;
}
pointer.currentValue = pointer.value !== null ?
pointer.value < minimumValue ? minimumValue : pointer.value > maximumValue ? maximumValue : pointer.value
: minimumValue;
if (pointer.width > 0 && withInRange(pointer.currentValue, null, null, range.max, range.min, 'pointer')) {
this['calculate' + pointer.type + 'Bounds'](axis, pointer);
}
}
}
/**
* Calculate marker pointer bounds
*
* @param axis
* @param pointer
*/
public calculateMarkerBounds(axis: Axis, pointer: Pointer): void {
let x: number; let y: number;
const line: Rect = axis.lineBounds;
const offset: number = pointer.currentOffset;
const range: VisibleRange = axis.visibleRange;
const placement: string = pointer.placement;
const tick: Rect = axis.majorTickBounds;
const label: Rect = axis.labelBounds;
const border: number = pointer.border.width;
const textSize : Size = measureText(pointer.text, pointer.textStyle);
if (this.gauge.orientation === 'Vertical') {
if (pointer.position === 'Auto') {
x = (!axis.opposedPosition) ? (placement === 'Near') ? label.x : (placement === 'Center') ? tick.x : line.x :
placement === 'Far' ? label.x + label.width : (placement === 'Center' ? tick.x + tick.width : line.x);
x = !axis.opposedPosition ? ((pointer.placement === 'Far' ? ((pointer.markerType === 'Triangle' || pointer.markerType === 'Arrow') ? x - border : x + border) : ((pointer.markerType === 'InvertedTriangle' || pointer.markerType === 'InvertedArrow') ? x + border : x - border)) + (offset)) :
((pointer.placement === 'Near' ? ((pointer.markerType === 'InvertedTriangle' || pointer.markerType === 'InvertedArrow') ? x + border : x - border) : ((pointer.markerType === 'Triangle' || pointer.markerType === 'Arrow') ? x - border : x + border)) + (offset));
} else {
x = (pointer.position === 'Cross' ? line.x - (pointer.markerType === 'Text' ? textSize.width : pointer.width / 2) - offset :
((pointer.position === 'Inside' && !axis.opposedPosition) ||
(pointer.position === 'Outside' && axis.opposedPosition)) ?
(line.x - line.width / 2 - (pointer.markerType !== 'InvertedTriangle' && pointer.markerType !== 'Triangle' ?
(pointer.markerType === 'Text' ? textSize.width : pointer.width) : 0)) - offset : ((line.x + line.width / 2) + offset));
}
y = ((valueToCoefficient(pointer.currentValue, axis, this.gauge.orientation, range) * line.height) + line.y);
} else {
if (pointer.position === 'Auto') {
y = (!axis.opposedPosition) ? (placement === 'Near') ? label.y - label.height : (placement === 'Center') ? tick.y :
line.y : (placement === 'Far') ? label.y : (placement === 'Center') ? tick.y + tick.height : line.y;
y = !axis.opposedPosition ? ((pointer.placement === 'Far' ? ((pointer.markerType === 'Triangle' || pointer.markerType === 'Arrow') ? y - border : y + border) : ((pointer.markerType === 'InvertedTriangle' || pointer.markerType === 'InvertedArrow') ? y + border : y - border)) + (offset)) :
((pointer.placement === 'Near' ? ((pointer.markerType === 'InvertedTriangle' || pointer.markerType === 'InvertedArrow') ? y + border : y - border) : ((pointer.markerType === 'Triangle' || pointer.markerType === 'Arrow') ? y - border : y + border)) + (offset));
} else {
y = (pointer.position === 'Cross' ? line.y - ((pointer.markerType === 'Text' ? textSize.height : pointer.height) / 2) - offset :
((pointer.position === 'Inside' && !axis.opposedPosition) ||
(pointer.position === 'Outside' && axis.opposedPosition)) ?
(line.y - line.height / 2 - (pointer.markerType !== 'InvertedTriangle' && pointer.markerType !== 'Triangle' ?
(pointer.markerType === 'Text' ? textSize.height : pointer.height) : 0)) - offset : ((line.y + line.height / 2) + offset));
}
x = ((valueToCoefficient(pointer.currentValue, axis, this.gauge.orientation, range) * line.width) + line.x);
}
pointer.bounds = new Rect(x, y, pointer.width, pointer.height);
if (axis.minimum === axis.maximum) {
pointer.bounds = new Rect(0, 0, 0, 0);
pointer.width = 0;
pointer.height = 0;
}
}
/**
* Calculate bar pointer bounds
*
* @param axisIndex
* @param axis
* @param pointerIndex
* @param pointer
*/
public calculateBarBounds(axis: Axis, pointer: Pointer): void {
let x1: number; let x2: number; let y1: number;
let y2: number; let height: number; let width: number;
const line: Rect = axis.lineBounds;
const padding: number = 10;
const range: VisibleRange = axis.visibleRange;
const orientation: Orientation = this.gauge.orientation;
const offset: number = pointer.currentOffset;
const container: Rect = this.gauge.containerBounds;
if (orientation === 'Vertical') {
if (pointer.position === 'Auto') {
x1 = (container.width > 0) ? container.x + ((container.width / 2) - (pointer.width / 2)) :
(!axis.opposedPosition) ? (line.x + padding) : (line.x - pointer.width - padding);
x1 += (offset);
} else {
x1 = (pointer.position === 'Cross' ? line.x - pointer.width / 2 - offset :
((pointer.position === 'Inside' && !axis.opposedPosition) ||
(pointer.position === 'Outside' && axis.opposedPosition)) ?
(line.x - line.width / 2 - pointer.width) - offset : ((line.x + line.width / 2) + offset));
}
y1 = ((valueToCoefficient(pointer.currentValue, axis, orientation, range) * line.height) + line.y);
y2 = ((valueToCoefficient(range.min, axis, orientation, range) * line.height) + line.y);
height = Math.abs(y2 - y1);
y1 = (!axis.isInversed) ? y1 : y2;
width = pointer.width;
} else {
if (pointer.position === 'Auto') {
y1 = (container.height > 0) ? (container.y + (container.height / 2) - (pointer.height) / 2) :
(!axis.opposedPosition) ? (line.y + padding) : (line.y - pointer.height - padding);
y1 += (offset);
} else {
y1 = (pointer.position === 'Cross' ? line.y - pointer.height / 2 - offset :
((pointer.position === 'Inside' && !axis.opposedPosition) ||
(pointer.position === 'Outside' && axis.opposedPosition)) ?
(line.y - line.height / 2 - pointer.height) - offset : ((line.y + line.height / 2) + offset));
}
height = pointer.height;
x1 = ((valueToCoefficient(range.min, axis, orientation, range) * line.width) + line.x);
x2 = ((valueToCoefficient(pointer.currentValue, axis, orientation, range) * line.width) + line.x);
width = Math.abs(x2 - x1);
x1 = (!axis.isInversed) ? x1 : x2;
}
pointer.bounds = new Rect(x1, y1, width, height);
if (axis.minimum === axis.maximum) {
pointer.bounds = new Rect(0, 0, 0, 0);
pointer.width = 0;
pointer.height = 0;
}
}
/**
* Calculate ranges bounds
*
* @param axis
* @param axisIndex
*/
public calculateRangesBounds(axis: Axis): void {
let range: Range;
let start: number; let end: number;
const line: Rect = axis.lineBounds;
const visibleRange: VisibleRange = axis.visibleRange;
const orientation: Orientation = this.gauge.orientation;
let startVal: number; let endVal: number;
let pointX: number; let pointY: number;
let width: number; let height: number;
let position: Position;
let gradientRangeColor: string;
let startWidth: number; let endWidth: number;
let colors: string[];
for (let i: number = 0; i < axis.ranges.length; i++) {
range = <Range>axis.ranges[i as number];
if (this.gauge.gradientModule) {
gradientRangeColor = this.gauge.gradientModule.getGradientColorString(range);
}
if (!isNullOrUndefined((<string>range.offset)) && (<string>range.offset).length > 0) {
range.currentOffset = stringToNumber(<string>range.offset, (this.gauge.orientation === 'Horizontal' ?
this.gauge.availableSize.height / 2 : this.gauge.availableSize.width / 2));
} else {
range.currentOffset = <number>range.offset;
}
start = Math.max(range.start, visibleRange.min);
end = Math.min(range.end, visibleRange.max);
if (withInRange(null, start, end, visibleRange.max, visibleRange.min, 'range')) {
end = Math.max(start, end);
start = Math.min(start, range.end);
position = range.position;
startWidth = range.startWidth;
endWidth = range.endWidth;
colors = (!isNullOrUndefined(this.gauge.rangePalettes) && this.gauge.rangePalettes.length > 0) ? this.gauge.rangePalettes :
getRangePalette(this.gauge.theme);
range.interior = (gradientRangeColor) ? gradientRangeColor :
(range.color) ? range.color : colors[i % colors.length];
if (this.gauge.orientation === 'Vertical') {
pointX = line.x + (range.currentOffset) + (position === 'Cross' ? startWidth / 2 :
(position === 'Outside' || position === 'Auto') ?
- (line.width / 2) : position === 'Inside' ? line.width / 2 : 0);
pointY = (valueToCoefficient(end, axis, orientation, visibleRange) * line.height) + line.y;
height = (valueToCoefficient(start, axis, orientation, visibleRange) * line.height) + line.y;
height -= pointY;
startVal = !axis.opposedPosition ? (position === 'Inside' ? (pointX + startWidth) : position === 'Cross' ?
(pointX - startWidth) : (pointX - startWidth)) : (position === 'Inside' ? (pointX - startWidth) :
position === 'Cross' ? (pointX - startWidth) : (pointX + startWidth));
endVal = !axis.opposedPosition ? position === 'Inside' ? (pointX + endWidth) : position === 'Cross' ?
(pointX - endWidth) : (pointX - endWidth) : position === 'Inside' ? (pointX - endWidth) :
position === 'Cross' ? (pointX - endWidth) : (pointX + endWidth);
range.path = 'M' + pointX + ' ' + pointY + ' L ' + pointX + ' ' + (pointY + height) +
' L ' + startVal + ' ' + (pointY + height) + ' L ' + endVal + ' ' + pointY +
' L ' + pointX + ' ' + pointY + ' z ';
} else {
pointX = (valueToCoefficient(end, axis, orientation, visibleRange) * line.width) + line.x;
pointY = axis.lineBounds.y + (range.currentOffset) + (position === 'Cross' ? startWidth / 2 :
(position === 'Outside' || position === 'Auto') ? -(line.height / 2) : position === 'Inside' ? line.height / 2 : 0);
width = (valueToCoefficient(start, axis, orientation, visibleRange) * line.width) + line.x;
width = pointX - width;
startVal = !axis.opposedPosition ? position === 'Inside' ? (pointY + startWidth) : position === 'Cross' ?
(pointY - startWidth) : (pointY - startWidth) : (position === 'Inside') ? (pointY - startWidth) :
position === 'Cross' ? (pointY - startWidth) : (pointY + startWidth);
endVal = !axis.opposedPosition ? position === 'Inside' ? (pointY + endWidth) : position === 'Cross' ?
(pointY - endWidth) : (pointY - endWidth) : (position === 'Inside') ? (pointY - endWidth) :
position === 'Cross' ? (pointY - endWidth) : (pointY + endWidth);
range.path = 'M' + pointX + ' ' + pointY + ' L ' + (pointX - width) + ' ' + pointY +
' L ' + (pointX - width) + ' ' + startVal + ' L ' + pointX + ' ' + endVal +
' L ' + pointX + ' ' + pointY + ' z ';
}
}
}
}
private checkPreviousAxes(currentAxis: Axis, axisIndex: number): number {
let index: number = axisIndex - 1;
let prevAxis: Axis;
const isPositive: boolean = (index >= 0) ? true : false;
if (isPositive) {
prevAxis = <Axis>this.gauge.axes[index as number];
index = (prevAxis.checkAlign.align === currentAxis.checkAlign.align) ? index : this.checkPreviousAxes(currentAxis, index);
} else {
index = null;
}
return index;
}
/**
*
* @param {Axis} axis - Specifies the axis to which labels are to be rendered.
* @returns {void}
*/
public calculateVisibleLabels(axis: Axis): void {
axis.visibleLabels = [];
if (axis.minimum !== axis.maximum) {
const min: number = axis.visibleRange.min;
const max: number = axis.visibleRange.max;
const interval: number = axis.visibleRange.interval;
let argsData: IAxisLabelRenderEventArgs;
const style: Label = <Label>axis.labelStyle; let labelSize: Size;
const customLabelFormat: boolean = style.format && style.format.match('{value}') !== null;
for (let i: number = min; (i <= max && interval > 0); i += interval) {
let currentAxisValue: number = i;
if (currentAxisValue.toString().indexOf('e') !== -1 && isNullOrUndefined(this.gauge.format)) {
const exponent: number = parseInt(currentAxisValue.toString().split('-')[1], 10);
currentAxisValue = parseInt(currentAxisValue.toFixed(exponent as number), 10);
}
argsData = {
cancel: false, name: axisLabelRender, axis: axis,
text: customLabelFormat ? textFormatter(style.format, { value: currentAxisValue }, this.gauge) :
formatValue(currentAxisValue, this.gauge).toString(),
value: currentAxisValue
};
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const axisLabelRenderSuccess: any = (argsData: IAxisLabelRenderEventArgs) => {
if (!argsData.cancel) {
axis.visibleLabels.push(new VisibleLabels(
argsData.text, currentAxisValue, labelSize
));
}
};
axisLabelRenderSuccess.bind(this);
this.gauge.trigger(axisLabelRender, argsData, axisLabelRenderSuccess);
}
const lastLabel: number = axis.visibleLabels.length ? axis.visibleLabels[axis.visibleLabels.length - 1].value : null;
const maxVal: number = axis.visibleRange.max;
if (lastLabel !== maxVal && axis.showLastLabel === true) {
argsData = {
cancel: false, name: axisLabelRender, axis: axis,
text: customLabelFormat ? textFormatter(style.format, { value: maxVal }, this.gauge) :
formatValue(maxVal, this.gauge).toString(),
value: maxVal
};
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const axisLabelRenderSuccess: any = (argsData: IAxisLabelRenderEventArgs) => {
labelSize = measureText(argsData.text, axis.labelStyle.font);
if (!argsData.cancel) {
axis.visibleLabels.push(new VisibleLabels(
argsData.text, maxVal, labelSize
));
}
};
axisLabelRenderSuccess.bind(this);
this.gauge.trigger(axisLabelRender, argsData, axisLabelRenderSuccess);
}
this.getMaxLabelWidth(axis);
}
}
/**
* Calculate maximum label width for the axis.
*
* @param {Axis} axis - Specifies the axis to which the labels are to be rendered.
* @return {void}
* @private
*/
private getMaxLabelWidth(axis: Axis): void {
axis.maxLabelSize = new Size(0, 0);
let label: VisibleLabels;
for (let i: number = 0; i < axis.visibleLabels.length; i++) {
label = axis.visibleLabels[i as number];
label.size = measureText(label.text, axis.labelStyle.font);
if (label.size.width > axis.maxLabelSize.width) {
axis.maxLabelSize.width = label.size.width;
}
if (label.size.height > axis.maxLabelSize.height) {
axis.maxLabelSize.height = label.size.height;
}
}
}
private checkThermometer(): void {
if (this.gauge.container.type === 'Thermometer') {
this.gauge.axes.map((axis: Axis) => {
if (axis.isInversed) {
axis.pointers.map((pointer: Pointer) => {
if (pointer.type === 'Bar') {
axis.isInversed = false;
}
});
}
});
}
}
/**
* @private
*/
public destroy(): void {
this.gauge = null;
}
}
-37
dist/ts/linear-gauge/axes/axis-renderer.d.ts
import { LinearGauge } from '../../linear-gauge';
import { Axis, Tick, Pointer } from './axis';
import { AxisModel } from './axis-model';
import { Animations } from './animation';
import { Rect } from '../utils/helper';
/**
* To render the axis elements.
*
* @private
*/
export declare class AxisRenderer extends Animations {
private htmlObject;
private axisObject;
private axisElements;
constructor(gauge: LinearGauge);
renderAxes(): void;
axisAlign(axes: AxisModel[]): void;
drawAxisLine(axis: Axis, axisObject: Element, axisIndex: number): void;
drawTicks(axis: Axis, ticks: Tick, axisObject: Element, tickID: string, tickBounds: Rect, axisIndex: number): void;
drawAxisLabels(axis: Axis, axisObject: Element, axisIndex: number): void;
drawPointers(axis: Axis, axisObject: Element, axisIndex: number): void;
drawMarkerPointer(axis: Axis, axisIndex: number, pointer: Pointer, pointerIndex: number, parentElement: Element): void;
drawBarPointer(axis: Axis, axisIndex: number, pointer: Pointer, pointerIndex: number, parentElement: Element): void;
/**
* @param {Axis} axis - Specifies the axis
* @param {number} axisIndex - Specifies the axis index
* @returns {void}
* @private
*/
pointerAnimation(axis: Axis, axisIndex: number): void;
drawRanges(axis: Axis, axisObject: Element, axisIndex: number): void;
updateTextPointer(pointerId: string, pointer: Pointer, axis: Axis): void;
/**
* @private
*/
destroy(): void;
}
-506
dist/ts/linear-gauge/axes/axis-renderer.ts
import { isNullOrUndefined, remove, animationMode } from '@syncfusion/ej2-base';
import { LinearGauge } from '../../linear-gauge';
import { Axis, Tick, Pointer, Range } from './axis';
import { AxisModel } from './axis-model';
import { Animations } from './animation';
import { Size, Rect, valueToCoefficient, PathOption, textElement,
getElement, textTrim} from '../utils/helper';
import { TextOption, RectOption, calculateShapes, calculateTextPosition, getBox, getPathToRect, getRangeColor, VisibleRange } from '../utils/helper';
import { MarkerType } from '../utils/enum';
import { FontModel } from '../model/base-model';
/**
* To render the axis elements.
*
* @private
*/
export class AxisRenderer extends Animations {
private htmlObject: Element;
private axisObject: Element;
private axisElements: Element[];
constructor(gauge: LinearGauge) {
super(gauge);
}
public renderAxes(): void {
let axis: Axis;
let major: Tick; let minor: Tick;
this.axisElements = [];
const gaugeAxesG: HTMLElement = this.gauge.svgObject.querySelector('#' + this.gauge.element.id + '_Axis_Collections');
if (gaugeAxesG) {
remove(gaugeAxesG);
}
this.axisObject = this.gauge.renderer.createGroup({
id: this.gauge.element.id + '_Axis_Collections',
transform: 'translate( 0, 0 )'
});
this.gauge.splitUpCount = 0;
for (let i: number = 0; i < this.gauge.axes.length; i++) {
axis = <Axis>this.gauge.axes[i as number];
major = <Tick>axis.majorTicks;
minor = <Tick>axis.minorTicks;
this.htmlObject = this.gauge.renderer.createGroup({ id: this.gauge.element.id + '_Axis_Group_' + i });
if (this.gauge.allowLoadingAnimation) {
if (this.gauge.splitUpCount === 0 && (axis.line.width > 0 || (axis.majorTicks.height > 0 && axis.majorTicks.width > 0) ||
(axis.minorTicks.height > 0 && axis.minorTicks.width > 0) || this.gauge.container.width > 0 || (axis.ranges.length > 0
&& !(axis.ranges.length === 1 && axis.ranges[0].start === axis.ranges[0].end && axis.ranges[0].start === 0)))) {
this.gauge.splitUpCount++;
}
if (this.gauge.splitUpCount === 0 || this.gauge.splitUpCount === 1) {
this.gauge.splitUpCount = axis.pointers.length > 0 ? this.gauge.splitUpCount + 1 : this.gauge.splitUpCount;
}
}
this.drawAxisLine(axis, this.htmlObject, i);
this.drawRanges(axis, this.htmlObject, i);
this.drawTicks(axis, major, this.htmlObject, 'MajorTicks', axis.majorTickBounds, i);
this.drawTicks(axis, minor, this.htmlObject, 'MinorTicks', axis.minorTickBounds, i);
this.drawAxisLabels(axis, this.htmlObject, i);
this.drawPointers(axis, this.htmlObject, i);
this.axisElements.push(this.htmlObject);
}
this.axisElements.forEach((axisElement: Element) => {
this.axisObject.appendChild(axisElement);
});
this.gauge.svgObject.appendChild(this.axisObject);
if (this.gauge.nearSizes.length !== this.gauge.farSizes.length && this.gauge.axes.length > 1) {
this.axisAlign(this.gauge.axes);
}
}
public axisAlign(axes: AxisModel[]): void {
let nearAxisWidth: number = 0; let farAxisWidth: number = 0;
let tranX: number; let transY: number;
if (this.gauge.orientation === 'Vertical') {
axes.forEach((axis: Axis) => {
if (!axis.opposedPosition) {
nearAxisWidth += axis.bounds.width;
} else {
farAxisWidth += axis.bounds.width;
}
});
nearAxisWidth += this.gauge.containerBounds.width / 2;
farAxisWidth += this.gauge.containerBounds.width / 2;
tranX = (nearAxisWidth / 2) - (farAxisWidth / 2);
this.axisObject.setAttribute('transform', 'translate(' + tranX + ',0)');
if (!(isNullOrUndefined(this.gauge.containerObject))) {
this.gauge.containerObject.setAttribute('transform', 'translate(' + tranX + ',0)');
}
} else {
axes.forEach((axis: Axis) => {
if (!axis.opposedPosition) {
nearAxisWidth += axis.bounds.height;
} else {
farAxisWidth += axis.bounds.height;
}
});
nearAxisWidth += (this.gauge.containerBounds.height / 2);
farAxisWidth += (this.gauge.containerBounds.height / 2);
transY = (nearAxisWidth / 2) - (farAxisWidth / 2);
this.axisObject.setAttribute('transform', 'translate(0,' + transY + ')');
if (!(isNullOrUndefined(this.gauge.containerObject))) {
this.gauge.containerObject.setAttribute('transform', 'translate(0,' + transY + ')');
}
}
}
public drawAxisLine(axis: Axis, axisObject: Element, axisIndex: number): void {
let options: PathOption;
const rect: Rect = axis.lineBounds;
let path: string = '';
const color: string = axis.line.color || this.gauge.themeStyle.lineColor;
if (axis.line.width > 0) {
path = 'M' + rect.x + ' ' + rect.y + ' L ' + (this.gauge.orientation === 'Vertical' ? rect.x : rect.x + rect.width) +
' ' + (this.gauge.orientation === 'Vertical' ? rect.y + rect.height : rect.y) + 'z';
options = new PathOption(
this.gauge.element.id + '_AxisLine_' + axisIndex, color,
axis.line.width, color, 1, axis.line.dashArray, path);
const axisElement: Element = this.gauge.renderer.drawPath(options);
if (this.gauge.allowLoadingAnimation) {
(axisElement as HTMLElement).classList.add(this.gauge.element.id + 'animation');
}
axisObject.appendChild(axisElement);
}
}
public drawTicks(axis: Axis, ticks: Tick, axisObject: Element, tickID: string, tickBounds: Rect, axisIndex: number): void {
let tickPath: string = '';
let pointY: number; let pointX: number;
const range: VisibleRange = axis.visibleRange;
const line: Rect = axis.lineBounds;
const majorTickColor: string = axis.majorTicks.color || this.gauge.themeStyle.majorTickColor;
const minorTickColor: string = axis.minorTicks.color || this.gauge.themeStyle.minorTickColor;
const tickColor: string = (tickID === 'MajorTicks') ? majorTickColor : minorTickColor;
const interval: number = ((tickID === 'MajorTicks') ? axis.majorInterval : axis.minorInterval);
const tickHeight: number = (axis.minimum !== axis.maximum) ? ticks.height : 0;
// let position: string = (tickID === 'MajorTicks') ? axis.majorTicks.position : axis.minorTicks.position;
for (let i: number = range.min; (i <= range.max && interval > 0); i += interval) {
if ((tickID === 'MajorTicks') || (tickID === 'MinorTicks')) {
if (this.gauge.orientation === 'Vertical') {
// pointX = position === "Inside" ? tickBounds.x : tickBounds.x + ticks.height;
pointX = tickBounds.x;
pointY = (valueToCoefficient(i, axis, this.gauge.orientation, range) * line.height) + line.y;
tickPath = tickPath.concat('M' + pointX + ' ' + pointY + ' ' + 'L' + (pointX + tickHeight) + ' ' + pointY + ' ');
} else {
pointX = (valueToCoefficient(i, axis, this.gauge.orientation, range) * line.width) + line.x;
// pointY = position === "Inside" ? tickBounds.y : (tickBounds.y + ticks.height);
pointY = tickBounds.y;
tickPath = tickPath.concat('M' + pointX + ' ' + pointY + ' ' + 'L' + pointX + ' ' + (pointY + tickHeight) + ' ');
}
}
}
const options: PathOption = new PathOption(
this.gauge.element.id + '_' + tickID + 'Line_' + axisIndex, tickColor, ticks.width,
tickColor, 1, null, tickPath);
const tickElement: Element = this.gauge.renderer.drawPath(options);
if (this.gauge.allowLoadingAnimation) {
(tickElement as HTMLElement).classList.add(this.gauge.element.id + 'animation');
}
axisObject.appendChild(tickElement);
}
public drawAxisLabels(axis: Axis, axisObject: Element, axisIndex: number): void {
/* eslint-disable max-len */
let options: TextOption; let pointX: number; let pointY: number;
const rect: Rect = axis.lineBounds;
const bounds: Rect = axis.labelBounds;
const tick: Rect = axis.majorTickBounds;
let labelSize: Size; const range: VisibleRange = axis.visibleRange;
let anchor: string; let baseline: string; const padding: number = 5;
const fontColor: string = this.gauge.themeStyle.labelColor;
let labelColor: string; const offset: number = axis.labelStyle.offset;
const labelLength: number = axis.visibleLabels.length - 1;
const labelElement: Element = this.gauge.renderer.createGroup({ id: this.gauge.element.id + '_AxisLabelsGroup_' + axisIndex });
for (let i: number = 0; i < axis.visibleLabels.length; i++) {
labelSize = axis.visibleLabels[i as number].size;
labelColor = axis.labelStyle.useRangeColor ? getRangeColor(axis.visibleLabels[i as number].value, <Range[]>axis.ranges) : null;
labelColor = isNullOrUndefined(labelColor) ? (axis.labelStyle.font.color || fontColor) : labelColor;
if (this.gauge.orientation === 'Vertical') {
pointY = (valueToCoefficient(axis.visibleLabels[i as number].value, axis, this.gauge.orientation, range) * rect.height) + rect.y;
pointX = axis.labelStyle.position === 'Auto' ? (!axis.opposedPosition ? (tick.x - labelSize.width - padding) + offset : bounds.x) : bounds.x;
pointY += (labelSize.height / 4);
axis.visibleLabels[i as number].x = pointX;
axis.visibleLabels[i as number].y = pointY;
} else {
if ((i === 0 || i === labelLength) && this.gauge.edgeLabelPlacement !== 'None') {
if (this.gauge.edgeLabelPlacement === 'Shift') {
pointX = i === 0 ? (valueToCoefficient(axis.visibleLabels[i as number].value, axis, this.gauge.orientation, range) * rect.width) + rect.x + (!axis.isInversed ? (axis.visibleLabels[i as number].size.width / 2) : (-axis.visibleLabels[i as number].size.width / 2))
: (valueToCoefficient(axis.visibleLabels[i as number].value, axis, this.gauge.orientation, range) * rect.width) + rect.x - (!axis.isInversed ? (axis.visibleLabels[i as number].size.width / 2) : (-axis.visibleLabels[i as number].size.width / 2));
if (this.gauge.allowMargin) {
if (i === labelLength) {
if (!axis.isInversed && (pointX - (axis.visibleLabels[i as number].size.width / 2)) < (axis.visibleLabels[i - 1].x + (axis.visibleLabels[i - 1].size.width / 2))) {
pointX += (axis.visibleLabels[i as number].size.width / 2);
} else if (axis.isInversed && (pointX + (axis.visibleLabels[i as number].size.width / 2)) > (axis.visibleLabels[i - 1].x - (axis.visibleLabels[i - 1].size.width / 2))) {
pointX -= (axis.visibleLabels[i as number].size.width / 2);
}
}
}
} else if (this.gauge.edgeLabelPlacement === 'Trim') {
pointX = (valueToCoefficient(axis.visibleLabels[i as number].value, axis, this.gauge.orientation, range) * rect.width) + rect.x;
if (i === labelLength) {
if (!this.gauge.allowMargin) {
if (!axis.isInversed && this.gauge.margin.right <= 10) {
const maxWidth: number = axis.visibleLabels[i as number].size.width * 0.75;
axis.visibleLabels[i as number].text = textTrim(maxWidth, axis.visibleLabels[i as number].text, axis.labelStyle.font);
} else if (axis.isInversed && (pointX + (axis.visibleLabels[i as number].size.width / 2)) > (axis.visibleLabels[i - 1].x - (axis.visibleLabels[i - 1].size.width / 2))) {
const maxWidth: number = axis.visibleLabels[i as number].size.width - ((pointX + (axis.visibleLabels[i as number].size.width / 2)) - (axis.visibleLabels[i - 1].x - (axis.visibleLabels[i - 1].size.width / 2)) + 2);
axis.visibleLabels[i as number].text = textTrim(maxWidth, axis.visibleLabels[i as number].text, axis.labelStyle.font);
}
} else {
if (axis.isInversed && (pointX + (axis.visibleLabels[i as number].size.width / 2)) > (axis.visibleLabels[i - 1].x - (axis.visibleLabels[i - 1].size.width / 2))) {
const width: number = axis.visibleLabels[i as number].size.width - ((pointX + (axis.visibleLabels[i as number].size.width / 2)) - (axis.visibleLabels[i - 1].x - (axis.visibleLabels[i - 1].size.width / 2)) + 2);
axis.visibleLabels[i as number].text = textTrim(width, axis.visibleLabels[i as number].text, axis.labelStyle.font);
} else if (!axis.isInversed && (pointX - (axis.visibleLabels[i as number].size.width / 2)) < (axis.visibleLabels[i - 1].x + (axis.visibleLabels[i - 1].size.width / 2))) {
const width: number = axis.visibleLabels[i as number].size.width - ((axis.visibleLabels[i - 1].x + (axis.visibleLabels[i - 1].size.width / 2)) - (pointX - (axis.visibleLabels[i as number].size.width / 2)) + 2);
axis.visibleLabels[i as number].text = textTrim(width, axis.visibleLabels[i as number].text, axis.labelStyle.font);
}
}
}
} else if (this.gauge.edgeLabelPlacement === 'Auto') {
if (!this.gauge.allowMargin) {
pointX = i === labelLength ? (valueToCoefficient(axis.visibleLabels[i as number].value, axis, this.gauge.orientation, range) * rect.width) + rect.x - (!axis.isInversed ? (axis.visibleLabels[i as number].size.width / 2) : (-axis.visibleLabels[i as number].size.width / 2)) :
(valueToCoefficient(axis.visibleLabels[i as number].value, axis, this.gauge.orientation, range) * rect.width) + rect.x + (!axis.isInversed ? (axis.visibleLabels[i as number].size.width / 2) : (-axis.visibleLabels[i as number].size.width / 2));
if (i === labelLength) {
if (!axis.isInversed && (pointX - (axis.visibleLabels[i as number].size.width / 2)) < (axis.visibleLabels[i - 1].x + (axis.visibleLabels[i - 1].size.width / 2))) {
pointX += (axis.visibleLabels[i as number].size.width / 2);
const maxWidth: number = axis.visibleLabels[i as number].size.width * 0.75;
axis.visibleLabels[i as number].text = textTrim(maxWidth, axis.visibleLabels[i as number].text, axis.labelStyle.font);
} else if (axis.isInversed && (pointX + (axis.visibleLabels[i as number].size.width / 2)) > (axis.visibleLabels[i - 1].x - (axis.visibleLabels[i - 1].size.width / 2))) {
pointX -= (axis.visibleLabels[i as number].size.width / 2);
const widthValue: number = axis.visibleLabels[i as number].size.width - ((pointX + (axis.visibleLabels[i as number].size.width / 2)) - (axis.visibleLabels[i - 1].x - (axis.visibleLabels[i - 1].size.width / 2)) + 2);
axis.visibleLabels[i as number].text = textTrim(widthValue, axis.visibleLabels[i as number].text, axis.labelStyle.font);
}
}
} else {
pointX = (valueToCoefficient(axis.visibleLabels[i as number].value, axis, this.gauge.orientation, range) * rect.width) + rect.x;
if (i === labelLength && axis.isInversed && (pointX + (axis.visibleLabels[i as number].size.width / 2)) > (axis.visibleLabels[i - 1].x - (axis.visibleLabels[i - 1].size.width / 2))) {
const labelWidth: number = axis.visibleLabels[i as number].size.width - ((pointX + (axis.visibleLabels[i as number].size.width / 2)) - (axis.visibleLabels[i - 1].x - (axis.visibleLabels[i - 1].size.width / 2)) + 2);
axis.visibleLabels[i as number].text = textTrim(labelWidth, axis.visibleLabels[i as number].text, axis.labelStyle.font);
}
}
}
pointY = bounds.y;
axis.visibleLabels[i as number].x = pointX;
axis.visibleLabels[i as number].y = pointY;
anchor = 'middle';
baseline = '';
} else {
pointX = (valueToCoefficient(axis.visibleLabels[i as number].value, axis, this.gauge.orientation, range) * rect.width) + rect.x;
pointY = bounds.y;
anchor = 'middle';
baseline = '';
axis.visibleLabels[i as number].x = pointX;
axis.visibleLabels[i as number].y = pointY;
}
}
const style: FontModel = {
size: axis.labelStyle.font.size,
color: axis.labelStyle.font.color,
fontFamily: axis.labelStyle.font.fontFamily,
fontWeight: axis.labelStyle.font.fontWeight,
fontStyle: axis.labelStyle.font.fontStyle,
opacity: axis.labelStyle.font.opacity
};
style.fontFamily = style.fontFamily || this.gauge.themeStyle.labelFontFamily;
style.fontStyle = style.fontStyle || this.gauge.themeStyle.labelStyle;
style.fontWeight = style.fontWeight || this.gauge.themeStyle.labelWeight;
options = new TextOption(this.gauge.element.id + '_Axis_' + axisIndex + '_Label_' + i, pointX, pointY, anchor, axis.visibleLabels[i as number].text, null, baseline);
const axisLabelsElement : Element = textElement(options, style, labelColor, null, labelElement);
axisLabelsElement.setAttribute('aria-label', axis.visibleLabels[i as number].text);
axisLabelsElement.setAttribute('role', 'region');
}
if (this.gauge.allowLoadingAnimation) {
(labelElement as HTMLElement).classList.add(this.gauge.element.id + 'animation');
}
axisObject.appendChild(labelElement);
}
public drawPointers(axis: Axis, axisObject: Element, axisIndex: number): void {
let pointer: Pointer;
let clipId: string;
let pointerClipRectGroup: Element;
const pointesGroup: Element = this.gauge.renderer.createGroup({ id: this.gauge.element.id + '_PointersGroup_' + axisIndex });
for (let i: number = 0; i < axis.pointers.length; i++) {
pointer = <Pointer>axis.pointers[i as number];
clipId = 'url(#' + this.gauge.element.id + '_AxisIndex_' + axisIndex + '_' + '_' + pointer.type + 'ClipRect_' + i + ')';
if (!(isNullOrUndefined(pointer.bounds))) {
pointerClipRectGroup = this.gauge.renderer.createGroup({
'id': this.gauge.element.id + '_AxisIndex_' + axisIndex + '_' + pointer.type + 'PointerGroup_' + i
});
if (isNullOrUndefined(pointer.startValue)) {
pointer.startValue = axis.visibleRange.min;
}
if ((animationMode === 'Enable' || pointer.animationDuration > 0 || this.gauge.allowLoadingAnimation) && (!this.gauge.isPropertyChange || pointer['isPointerAnimation']) && !this.gauge.gaugeResized) {
pointer.startValue = !this.gauge.isPropertyChange ? axis.minimum : pointer.startValue;
if (this.gauge.container.type === 'Thermometer' && pointer.startValue === 0) {
pointerClipRectGroup.setAttribute('clip-path', clipId);
}
}
this['draw' + pointer.type + 'Pointer'](axis, axisIndex, pointer, i, pointerClipRectGroup);
pointesGroup.appendChild(pointerClipRectGroup);
}
}
this.gauge.gradientCount = 0;
axisObject.appendChild(pointesGroup);
}
public drawMarkerPointer(
axis: Axis, axisIndex: number, pointer: Pointer,
pointerIndex: number, parentElement: Element): void {
let options: PathOption;
let textOptions: TextOption;
let style: FontModel = {};
const pointerID: string = this.gauge.element.id + '_AxisIndex_' + axisIndex + '_' + pointer.type + 'Pointer' + '_' + pointerIndex;
const transform: string = 'translate( 0, 0 )';
let x: number; let y: number;
let pointerElement: Element;
let gradientMarkerColor: string;
if (this.gauge.gradientModule) {
gradientMarkerColor = this.gauge.gradientModule.getGradientColorString(pointer);
}
if (getElement(pointerID) && getElement(pointerID).childElementCount > 0) {
remove(getElement(pointerID));
}
const pointerColor: string = pointer.color || this.gauge.themeStyle.pointerColor;
let shapeBasedOnPosition: MarkerType = pointer.markerType;
if (!isNullOrUndefined(pointer.position) && (pointer.markerType === 'InvertedTriangle' ||
pointer.markerType === 'Triangle')) {
shapeBasedOnPosition = (((pointer.position === 'Outside' && !axis.opposedPosition) ||
(pointer.position === 'Inside' && axis.opposedPosition) || pointer.position === 'Cross')
&& pointer.markerType === 'Triangle' ? 'InvertedTriangle' as MarkerType :
(((pointer.position === 'Inside' && !axis.opposedPosition) || (pointer.position === 'Outside' && axis.opposedPosition)) &&
pointer.markerType === 'InvertedTriangle' ? 'Triangle' as MarkerType : pointer.markerType));
}
options = new PathOption(
pointerID, (gradientMarkerColor) ? gradientMarkerColor : pointerColor,
pointer.border.width, pointer.border.color, pointer.opacity, pointer.border.dashArray, null, transform);
options = calculateShapes(
pointer.bounds, shapeBasedOnPosition, new Size(pointer.width, pointer.height),
pointer.imageUrl, options, this.gauge.orientation, axis, pointer);
if (pointer.markerType === 'Text') {
textOptions = new TextOption(pointerID, x, y, 'start', pointer.text, null, 'auto');
textOptions = calculateTextPosition(pointer.bounds, shapeBasedOnPosition,
textOptions, this.gauge.orientation, axis, pointer);
style = {
size: pointer.textStyle.size,
fontFamily: pointer.textStyle.fontFamily || this.gauge.themeStyle.labelFontFamily,
fontWeight: pointer.textStyle.fontWeight,
fontStyle: pointer.textStyle.fontStyle
};
}
// eslint-disable-next-line prefer-const
pointerElement = ((pointer.markerType === 'Circle' ? this.gauge.renderer.drawCircle(options) as SVGAElement
: (pointer.markerType === 'Image') ? this.gauge.renderer.drawImage(options) : (pointer.markerType === 'Text') && !isNullOrUndefined(pointer.text) ? textElement(textOptions, style, (gradientMarkerColor) ? gradientMarkerColor : pointerColor, pointer.opacity, parentElement) :
this.gauge.renderer.drawPath(options) as SVGAElement));
if (this.gauge.allowLoadingAnimation) {
(pointerElement as HTMLElement).style.visibility = 'hidden';
}
parentElement.appendChild(pointerElement);
if ((((pointer.animationDuration > 0 || animationMode === 'Enable') && (!this.gauge.allowLoadingAnimation || this.gauge.isPropertyChange)) && (!this.gauge.isPropertyChange || pointer['isPointerAnimation']) && pointer['startValue'] !== pointer.currentValue) && !this.gauge.isPointerAnimationInProgress) {
pointer.startValue = !this.gauge.isPropertyChange ? axis.minimum : pointer.startValue;
pointer.animationComplete = false;
this.performMarkerAnimation(pointerElement, axis, pointer);
}
if (!this.gauge.allowLoadingAnimation && pointer.animationDuration === 0) {
pointer.startValue = pointer.currentValue;
}
pointerElement.setAttribute('aria-label', pointer.description || 'Pointer:' + Number(pointer.currentValue).toString());
pointerElement.setAttribute('role', 'region');
}
public drawBarPointer(axis: Axis, axisIndex: number, pointer: Pointer, pointerIndex: number, parentElement: Element): void {
let rectOptions: RectOption;
let clipRectElement: Element;
let pointerElement: Element;
let path: string = '';
let options: PathOption;
let box: Rect;
const size: Size = new Size(this.gauge.availableSize.width, this.gauge.availableSize.height);
const pointerID: string = this.gauge.element.id + '_AxisIndex_' + axisIndex + '_' + pointer.type + 'Pointer' + '_' + pointerIndex;
let gradientBarColor: string;
if (this.gauge.gradientModule) {
gradientBarColor = this.gauge.gradientModule.getGradientColorString(pointer);
}
if (getElement(pointerID) && getElement(pointerID).childElementCount > 0) {
remove(getElement(pointerID));
}
if (this.gauge.container.type === 'Normal' || this.gauge.container.width === 0) {
rectOptions = new RectOption(
pointerID, (gradientBarColor) ?
gradientBarColor : pointer.color || this.gauge.themeStyle.pointerColor,
pointer.border, pointer.opacity, pointer.bounds);
box = pointer.bounds;
pointerElement = this.gauge.renderer.drawRectangle(rectOptions) as SVGAElement;
} else {
path = pointer.value > axis.minimum || this.gauge.container.type === 'Thermometer' ? getBox(
pointer.bounds, this.gauge.container.type, this.gauge.orientation,
new Size(pointer.bounds.width, pointer.bounds.height), 'bar',
this.gauge.container.width, axis, pointer.roundedCornerRadius) : '';
options = new PathOption(
pointerID, (gradientBarColor) ? gradientBarColor : pointer.color || this.gauge.themeStyle.pointerColor,
pointer.border.width, pointer.border.color, pointer.opacity, pointer.border.dashArray, path);
pointerElement = this.gauge.renderer.drawPath(options) as SVGAElement;
box = getPathToRect(<SVGPathElement>pointerElement.cloneNode(true), size, this.gauge.element);
}
if (getElement(pointerID) && getElement(pointerID).childElementCount > 0) {
const element: Element = getElement(pointerID).firstElementChild;
if (this.gauge.container.type === 'Normal') {
element.setAttribute('x', rectOptions.x + '');
element.setAttribute('y', rectOptions.y + '');
element.setAttribute('width', rectOptions.width + '');
element.setAttribute('height', rectOptions.height + '');
} else {
element.setAttribute('d', options.d);
}
} else {
parentElement.appendChild(pointerElement);
}
pointerElement.setAttribute('aria-label', pointer.description || 'Pointer:' + Number(pointer.currentValue).toString());
pointerElement.setAttribute('role', 'region');
if (this.gauge.allowLoadingAnimation) {
(pointerElement as HTMLElement).style.visibility = 'hidden';
}
if (((pointer.animationDuration > 0 || this.gauge.allowLoadingAnimation || animationMode === 'Enable') && (!this.gauge.isPropertyChange || pointer['isPointerAnimation']) && pointer['startValue'] !== pointer.currentValue) && !this.gauge.isPointerAnimationInProgress) {
pointer.startValue = !this.gauge.isPropertyChange ? axis.minimum : pointer.startValue;
if (this.gauge.container.type === 'Thermometer' && pointer.startValue === 0 && this.gauge.container.width > 0) {
clipRectElement = this.gauge.renderer.drawClipPath(
new RectOption(
this.gauge.element.id + '_AxisIndex_' + axisIndex + '_' + '_' + pointer.type + 'ClipRect_' + pointerIndex,
'transparent', { width: 1, color: 'Gray' }, 1, box));
parentElement.appendChild(clipRectElement);
}
if (!this.gauge.allowLoadingAnimation || this.gauge.isPropertyChange) {
pointer.isPointerAnimation = false;
this.performBarAnimation(pointerElement, axis, pointer);
}
}
if (pointer.animationDuration === 0) {
pointer.startValue = pointer.currentValue;
}
}
/**
* @param {Axis} axis - Specifies the axis
* @param {number} axisIndex - Specifies the axis index
* @returns {void}
* @private
*/
public pointerAnimation(axis: Axis, axisIndex: number): void {
if ((!this.gauge.isPointerAnimationInProgress && this.gauge.allowLoadingAnimation)) {
this.gauge.isPointerAnimationInProgress = true;
for (let i: number = 0; i < axis.pointers.length; i++) {
const pointer: Pointer = <Pointer>axis.pointers[i as number];
if (pointer.type === 'Bar') {
const barPointerGroup: Element | null = getElement(this.gauge.element.id + '_AxisIndex_' + axisIndex + '_' + pointer.type + 'Pointer_' + i);
if (barPointerGroup) {
this.performBarAnimation(barPointerGroup, axis, pointer);
}
} else {
const markerPointerGroup: Element | null = getElement(this.gauge.element.id + '_AxisIndex_' + axisIndex + '_' + pointer.type + 'Pointer_' + i);
if (markerPointerGroup) {
this.performMarkerAnimation(markerPointerGroup, axis, pointer);
}
}
}
}
}
public drawRanges(axis: Axis, axisObject: Element, axisIndex: number): void {
let range: Range;
let options: PathOption;
const rangeElement: Element = this.gauge.renderer.createGroup({ id: this.gauge.element.id + '_RangesGroup_' + axisIndex });
if (this.gauge.allowLoadingAnimation) {
(rangeElement as HTMLElement).classList.add(this.gauge.element.id + 'animation');
}
for (let j: number = 0; j < axis.ranges.length; j++) {
range = <Range>axis.ranges[j as number];
if (!(isNullOrUndefined(range.path))) {
options = new PathOption(
this.gauge.element.id + '_AxisIndex_' + axisIndex + '_Range_' + j, range.interior, (range.start !== range.end) ? range.border.width : 0,
range.border.color, 1, range.border.dashArray, range.path);
rangeElement.appendChild(this.gauge.renderer.drawPath(options) as SVGAElement);
}
}
axisObject.appendChild(rangeElement);
}
public updateTextPointer(pointerId: string, pointer: Pointer, axis: Axis): void {
let x: number; let y: number;
let textOptions: TextOption = new TextOption(pointerId, x, y, 'start', pointer.text, null, 'auto');
textOptions = calculateTextPosition(pointer.bounds, 'Text',
textOptions, this.gauge.orientation, axis, pointer);
const textElement: HTMLElement = document.getElementById(pointerId);
textElement.setAttribute('x', textOptions.x.toString());
textElement.setAttribute('y', textOptions.y.toString());
textElement.textContent = pointer.text;
}
/**
* @private
*/
public destroy(): void {
this.htmlObject = null;
this.axisObject = null;
this.axisElements = [];
this.gauge = null;
}
}
-409
dist/ts/linear-gauge/axes/axis.d.ts
import { ChildProperty } from '@syncfusion/ej2-base';
import { VisibleLabels, Size, VisibleRange, Rect, Align } from '../utils/helper';
import { FontModel, BorderModel, TextStyleModel } from '../model/base-model';
import { RangeModel, PointerModel, LabelModel, TickModel, LineModel } from './axis-model';
import { Point, Placement, MarkerType, Position } from '../utils/enum';
import { LinearGradientModel, RadialGradientModel } from '../axes/gradient-model';
/** Sets and gets the options for customizing the appearance of axis line in linear gauge. */
export declare class Line extends ChildProperty<Line> {
/**
* Sets and gets the dash-array of the axis line.
*
* @default ''
*/
dashArray: string;
/**
* Sets and gets the height of the axis line.
*
* @aspDefaultValueIgnore
* @default null
*/
height: number;
/**
* Sets and gets the width of the axis line.
*
* @default 2
*/
width: number;
/**
* Sets and gets the color for the axis line.
*
* @default null
*/
color: string;
/**
* Sets and gets the offset value from where the axis line must be placed in linear gauge.
*
* @default 0
*/
offset: number;
}
/**
* Sets and gets the options for customizing the appearance of the axis labels.
*/
export declare class Label extends ChildProperty<Label> {
/**
* Sets and gets the options for customizing the style of the text in axis labels.
*/
font: FontModel;
/**
* Enables or disables to use the color of the ranges in the labels of the linear gauge.
*
* @default false
*/
useRangeColor: boolean;
/**
* Sets and gets the format for the axis label. This property accepts any global format string like 'C', 'n1', 'P' etc.
* Also accepts placeholder like '{value}°C' in which value represent the axis label e.g. 20°C.
*
* @default ''
*/
format: string;
/**
* Sets and gets the offset value from where the labels must be placed from the axis in linear gauge.
*
* @default 0
*/
offset: number;
/**
* Sets and gets the position of the axis label in linear gauge.
*
* @default Auto
*/
position: Position;
}
/**
* Sets and gets the options for customizing the ranges of an axis.
*/
export declare class Range extends ChildProperty<Range> {
/**
* Sets and gets the start value for the range in axis.
*
* @default 0
*/
start: number;
/**
* Sets and gets the end value for the range in axis.
*
* @default 0
*/
end: number;
/**
* Sets and gets the properties to render a linear gradient for the range.
* If both linear and radial gradient is set, then the linear gradient will be rendered in the range.
*
* @default null
*/
linearGradient: LinearGradientModel;
/**
* Sets and gets the properties to render a radial gradient for the range.
*
* @default null
*/
radialGradient: RadialGradientModel;
/**
* Sets and gets the position to place the ranges in the axis.
*
* @default Outside
*/
position: Position;
/**
* Sets and gets the color of the axis range.
*
* @default ''
*/
color: string;
/**
* Sets and gets the width for the start of the range in axis.
*
* @default 10
*/
startWidth: number;
/**
* Sets and gets the width for the end of the range in axis.
*
* @default 10
*/
endWidth: number;
/**
* Sets and gets the offset value from where the range must be placed from the axis in linear gauge.
*
* @default '0'
*/
offset: number | string;
/**
* Sets and gets the options to customize the style properties of the border for the axis range.
*/
border: BorderModel;
/** @private */
bounds: Rect;
/** @private */
path: string;
/** @private */
interior: string;
/** @private */
currentOffset: number;
}
/**
* Sets and gets the options for customizing the minor tick lines in axis.
*/
export declare class Tick extends ChildProperty<Tick> {
/**
* Sets and gets the height of the tick line in the axis. The default value is 20 for major ticks and 10 for minor ticks.
*/
height: number;
/**
* Sets and gets the width of the tick line in the axis. The default value is 2 for major ticks and 1 for minor ticks.
*
* @default 2
*/
width: number;
/**
* Sets and gets the gap between the ticks in the axis.
*
* @aspDefaultValueIgnore
* @default null
*/
interval: number;
/**
* Sets and gets the color for the major or minor tick line. This property accepts value in hex code,
* rgba string as a valid CSS color string.
*
* @default null
*/
color: string;
/**
* Sets and gets the offset value from where the ticks must be placed from the axis in linear gauge.
*
* @aspDefaultValueIgnore
* @default null
*/
offset: number;
/**
* Sets and gets the value to place the ticks in the axis.
*
* @default Auto
*/
position: Position;
}
/**
* Sets and gets the options for customizing the pointers of an axis in linear gauge.
*/
export declare class Pointer extends ChildProperty<Pointer> {
/**
* Sets and gets the type of pointer in axis. There are two types of pointers: Marker and Bar.
*
* @default Marker
*/
type: Point;
/**
* Sets and gets the properties to render a linear gradient for the pointer.
* If both linear and radial gradient is set, then the linear gradient will be rendered in the pointer.
*
* @default null
*/
linearGradient: LinearGradientModel;
/**
* Sets and gets the properties to render a radial gradient for the pointer.
*
* @default null
*/
radialGradient: RadialGradientModel;
/**
* Sets and gets the value of the pointer in axis.
*
* @default null
*/
value: number;
/**
* Sets and gets the type of the marker for pointers in axis.
*
* @default InvertedTriangle
*/
markerType: MarkerType;
/**
* Sets and gets the URL path for the image in marker when the marker type is set as image.
*
* @default null
*/
imageUrl: string;
/**
* Sets and gets the options to customize the style properties of the border for pointers.
*/
border: BorderModel;
/**
* Sets and gets the corner radius for pointer.
*
* @default 10
*/
roundedCornerRadius: number;
/**
* Sets and gets the place of the pointer.
*
* @default Far
*/
placement: Placement;
/**
* Sets and gets the height of the pointer.
*
* @default 20
*/
height: number;
/**
* Sets and gets the width of the pointer.
*
* @default 20
*/
width: number;
/**
* Sets and gets the color of the pointer.
*
* @default null
*/
color: string;
/**
* Sets and gets the opacity of pointer in linear gauge.
*
* @default 1
*/
opacity: number;
/**
* Sets and gets the duration of animation in pointer.
*
* @default 0
*/
animationDuration: number;
/**
* Enables or disables the drag movement of pointer to update the pointer value.
*
* @default false
*/
enableDrag: boolean;
/**
* Sets and gets the value to position the pointer from the axis.
*
* @default '0'
*/
offset: number | string;
/**
* Sets and gets the position of the pointer.
*
* @default Auto
*/
position: Position;
/**
* Sets and gets the description for the pointer.
*
* @default null
*/
description: string;
/**
* Specifies the text that will be displayed as the pointer in Linear Gauge. To display the text pointer, the `markerType` property must be set to `Text`.
*
* @default ''
*/
text: string;
/**
* Defines the font properties such as font-size, font family and others for the text pointer.
*/
textStyle: TextStyleModel;
/** @private */
bounds: Rect;
/** @private */
startValue: number;
/** @private */
animationComplete: boolean;
/** @private */
isPointerAnimation: boolean;
/** @private */
currentValue: number;
/** @private */
currentOffset: number;
/** @private */
pathElement: Element[];
}
/**
* Sets and gets the options for customizing the axis of a gauge.
*/
export declare class Axis extends ChildProperty<Axis> {
/**
* Sets and gets the minimum value for the axis.
*
* @default 0
*/
minimum: number;
/**
* Sets and gets the maximum value for the axis.
*
* @default 100
*/
maximum: number;
/**
* Enables or disables the inversed axis.
*
* @default false
*/
isInversed: boolean;
/**
* Shows or hides the last label in the axis of the linear gauge.
*
* @default false
*/
showLastLabel: boolean;
/**
* Enables or disables the opposed position of the axis in the linear gauge.
*
* @default false
*/
opposedPosition: boolean;
/**
* Sets and gets the options for customizing the appearance of the axis line.
*/
line: LineModel;
/**
* Sets and gets the options for customizing the ranges of an axis.
*/
ranges: RangeModel[];
/**
* Sets and gets the options for customizing the pointers of an axis.
*/
pointers: PointerModel[];
/**
* Sets and gets the options for customizing the major tick lines.
*/
majorTicks: TickModel;
/**
* Sets and gets the options for customizing the minor tick lines.
*/
minorTicks: TickModel;
/**
* Sets and gets the options for customizing the appearance of the label in axis.
*/
labelStyle: LabelModel;
/** @private */
visibleLabels: VisibleLabels[];
/** @private */
maxLabelSize: Size;
/** @private */
visibleRange: VisibleRange;
/** @private */
lineBounds: Rect;
/** @private */
majorTickBounds: Rect;
/** @private */
minorTickBounds: Rect;
/** @private */
labelBounds: Rect;
/** @private */
pointerBounds: Rect;
/** @private */
bounds: Rect;
/** @private */
maxTickLength: number;
/** @private */
checkAlign: Align;
/** @private */
majorInterval: number;
/** @private */
minorInterval: number;
}
-576
dist/ts/linear-gauge/axes/axis.ts
import { Property, Complex, ChildProperty, Collection } from '@syncfusion/ej2-base';
import { VisibleLabels, Size, VisibleRange, Rect, Align } from '../utils/helper';
import { Font, Border, TextStyle } from '../model/base';
import { FontModel, BorderModel, TextStyleModel } from '../model/base-model';
import { RangeModel, PointerModel, LabelModel, TickModel, LineModel } from './axis-model';
import { Point, Placement, MarkerType, Position} from '../utils/enum';
import { LinearGradientModel, RadialGradientModel} from '../axes/gradient-model';
/** Sets and gets the options for customizing the appearance of axis line in linear gauge. */
export class Line extends ChildProperty<Line> {
/**
* Sets and gets the dash-array of the axis line.
*
* @default ''
*/
@Property('')
public dashArray: string;
/**
* Sets and gets the height of the axis line.
*
* @aspDefaultValueIgnore
* @default null
*/
@Property(null)
public height: number;
/**
* Sets and gets the width of the axis line.
*
* @default 2
*/
@Property(2)
public width: number;
/**
* Sets and gets the color for the axis line.
*
* @default null
*/
@Property(null)
public color: string;
/**
* Sets and gets the offset value from where the axis line must be placed in linear gauge.
*
* @default 0
*/
@Property(0)
public offset: number;
}
/**
* Sets and gets the options for customizing the appearance of the axis labels.
*/
export class Label extends ChildProperty<Label> {
/**
* Sets and gets the options for customizing the style of the text in axis labels.
*/
@Complex<FontModel>({ size: '12px', color: null, fontStyle: null, fontWeight: null, fontFamily: null }, Font)
public font: FontModel;
/**
* Enables or disables to use the color of the ranges in the labels of the linear gauge.
*
* @default false
*/
@Property(false)
public useRangeColor: boolean;
/**
* Sets and gets the format for the axis label. This property accepts any global format string like 'C', 'n1', 'P' etc.
* Also accepts placeholder like '{value}°C' in which value represent the axis label e.g. 20°C.
*
* @default ''
*/
@Property('')
public format: string;
/**
* Sets and gets the offset value from where the labels must be placed from the axis in linear gauge.
*
* @default 0
*/
@Property(0)
public offset: number;
/**
* Sets and gets the position of the axis label in linear gauge.
*
* @default Auto
*/
@Property('Auto')
public position: Position;
}
/**
* Sets and gets the options for customizing the ranges of an axis.
*/
export class Range extends ChildProperty<Range> {
/**
* Sets and gets the start value for the range in axis.
*
* @default 0
*/
@Property(0)
public start: number;
/**
* Sets and gets the end value for the range in axis.
*
* @default 0
*/
@Property(0)
public end: number;
/**
* Sets and gets the properties to render a linear gradient for the range.
* If both linear and radial gradient is set, then the linear gradient will be rendered in the range.
*
* @default null
*/
@Property(null)
public linearGradient: LinearGradientModel;
/**
* Sets and gets the properties to render a radial gradient for the range.
*
* @default null
*/
@Property(null)
public radialGradient: RadialGradientModel;
/**
* Sets and gets the position to place the ranges in the axis.
*
* @default Outside
*/
@Property('Outside')
public position: Position;
/**
* Sets and gets the color of the axis range.
*
* @default ''
*/
@Property('')
public color: string;
/**
* Sets and gets the width for the start of the range in axis.
*
* @default 10
*/
@Property(10)
public startWidth: number;
/**
* Sets and gets the width for the end of the range in axis.
*
* @default 10
*/
@Property(10)
public endWidth: number;
/**
* Sets and gets the offset value from where the range must be placed from the axis in linear gauge.
*
* @default '0'
*/
@Property(0)
public offset: number | string;
/**
* Sets and gets the options to customize the style properties of the border for the axis range.
*/
@Complex<BorderModel>({ color: '#000000', width: 0 }, Border)
public border: BorderModel;
/** @private */
public bounds: Rect;
/** @private */
public path: string;
/** @private */
public interior: string;
/** @private */
public currentOffset: number;
}
/**
* Sets and gets the options for customizing the minor tick lines in axis.
*/
export class Tick extends ChildProperty<Tick> {
/**
* Sets and gets the height of the tick line in the axis. The default value is 20 for major ticks and 10 for minor ticks.
*/
@Property(20)
public height: number;
/**
* Sets and gets the width of the tick line in the axis. The default value is 2 for major ticks and 1 for minor ticks.
*
* @default 2
*/
@Property(2)
public width: number;
/**
* Sets and gets the gap between the ticks in the axis.
*
* @aspDefaultValueIgnore
* @default null
*/
@Property(null)
public interval: number;
/**
* Sets and gets the color for the major or minor tick line. This property accepts value in hex code,
* rgba string as a valid CSS color string.
*
* @default null
*/
@Property(null)
public color: string;
/**
* Sets and gets the offset value from where the ticks must be placed from the axis in linear gauge.
*
* @aspDefaultValueIgnore
* @default null
*/
@Property(null)
public offset: number;
/**
* Sets and gets the value to place the ticks in the axis.
*
* @default Auto
*/
@Property('Auto')
public position: Position;
}
/**
* Sets and gets the options for customizing the pointers of an axis in linear gauge.
*/
export class Pointer extends ChildProperty<Pointer> {
/**
* Sets and gets the type of pointer in axis. There are two types of pointers: Marker and Bar.
*
* @default Marker
*/
@Property('Marker')
public type: Point;
/**
* Sets and gets the properties to render a linear gradient for the pointer.
* If both linear and radial gradient is set, then the linear gradient will be rendered in the pointer.
*
* @default null
*/
@Property(null)
public linearGradient: LinearGradientModel;
/**
* Sets and gets the properties to render a radial gradient for the pointer.
*
* @default null
*/
@Property(null)
public radialGradient: RadialGradientModel;
/**
* Sets and gets the value of the pointer in axis.
*
* @default null
*/
@Property(null)
public value: number;
/**
* Sets and gets the type of the marker for pointers in axis.
*
* @default InvertedTriangle
*/
@Property('InvertedTriangle')
public markerType: MarkerType;
/**
* Sets and gets the URL path for the image in marker when the marker type is set as image.
*
* @default null
*/
@Property(null)
public imageUrl: string;
/**
* Sets and gets the options to customize the style properties of the border for pointers.
*/
@Complex<BorderModel>({ color: '#808080' }, Border)
public border: BorderModel;
/**
* Sets and gets the corner radius for pointer.
*
* @default 10
*/
@Property(10)
public roundedCornerRadius: number;
/**
* Sets and gets the place of the pointer.
*
* @default Far
*/
@Property('Far')
public placement: Placement;
/**
* Sets and gets the height of the pointer.
*
* @default 20
*/
@Property(20)
public height: number;
/**
* Sets and gets the width of the pointer.
*
* @default 20
*/
@Property(20)
public width: number;
/**
* Sets and gets the color of the pointer.
*
* @default null
*/
@Property(null)
public color: string;
/**
* Sets and gets the opacity of pointer in linear gauge.
*
* @default 1
*/
@Property(1)
public opacity: number;
/**
* Sets and gets the duration of animation in pointer.
*
* @default 0
*/
@Property(0)
public animationDuration: number;
/**
* Enables or disables the drag movement of pointer to update the pointer value.
*
* @default false
*/
@Property(false)
public enableDrag: boolean;
/**
* Sets and gets the value to position the pointer from the axis.
*
* @default '0'
*/
@Property(0)
public offset: number | string;
/**
* Sets and gets the position of the pointer.
*
* @default Auto
*/
@Property('Auto')
public position: Position;
/**
* Sets and gets the description for the pointer.
*
* @default null
*/
@Property(null)
public description: string;
/**
* Specifies the text that will be displayed as the pointer in Linear Gauge. To display the text pointer, the `markerType` property must be set to `Text`.
*
* @default ''
*/
@Property('')
public text: string;
/**
* Defines the font properties such as font-size, font family and others for the text pointer.
*/
@Complex<TextStyleModel>({ size: '16px', fontStyle: 'normal', fontWeight: 'normal', fontFamily: null }, TextStyle)
public textStyle: TextStyleModel;
/** @private */
public bounds: Rect;
/** @private */
public startValue: number;
/** @private */
public animationComplete: boolean = true;
/** @private */
public isPointerAnimation: boolean = true;
/** @private */
public currentValue: number = null;
/** @private */
public currentOffset: number;
/** @private */
public pathElement: Element[];
}
/**
* Sets and gets the options for customizing the axis of a gauge.
*/
export class Axis extends ChildProperty<Axis> {
/**
* Sets and gets the minimum value for the axis.
*
* @default 0
*/
@Property(0)
public minimum: number;
/**
* Sets and gets the maximum value for the axis.
*
* @default 100
*/
@Property(100)
public maximum: number;
/**
* Enables or disables the inversed axis.
*
* @default false
*/
@Property(false)
public isInversed: boolean;
/**
* Shows or hides the last label in the axis of the linear gauge.
*
* @default false
*/
@Property(false)
public showLastLabel: boolean;
/**
* Enables or disables the opposed position of the axis in the linear gauge.
*
* @default false
*/
@Property(false)
public opposedPosition: boolean;
/**
* Sets and gets the options for customizing the appearance of the axis line.
*/
@Complex(<LineModel>{}, Line)
public line: LineModel;
/**
* Sets and gets the options for customizing the ranges of an axis.
*/
@Collection<RangeModel>([{}], Range)
public ranges: RangeModel[];
/**
* Sets and gets the options for customizing the pointers of an axis.
*/
@Collection<PointerModel>([{}], Pointer)
public pointers: PointerModel[];
/**
* Sets and gets the options for customizing the major tick lines.
*/
@Complex<TickModel>({ width: 2, height: 20 }, Tick)
public majorTicks: TickModel;
/**
* Sets and gets the options for customizing the minor tick lines.
*/
@Complex<TickModel>({ width: 1, height: 10 }, Tick)
public minorTicks: TickModel;
/**
* Sets and gets the options for customizing the appearance of the label in axis.
*/
@Complex<LabelModel>({}, Label)
public labelStyle: LabelModel;
/** @private */
public visibleLabels: VisibleLabels[] = [];
/** @private */
public maxLabelSize: Size;
/** @private */
public visibleRange: VisibleRange;
/** @private */
public lineBounds: Rect;
/** @private */
public majorTickBounds: Rect;
/** @private */
public minorTickBounds: Rect;
/** @private */
public labelBounds: Rect;
/** @private */
public pointerBounds: Rect;
/** @private */
public bounds: Rect;
/** @private */
public maxTickLength: number;
/** @private */
public checkAlign: Align;
/** @private */
public majorInterval: number;
/** @private */
public minorInterval: number;
}
-119
dist/ts/linear-gauge/axes/gradient-model.d.ts
import { SvgRenderer, LinearGradient as Linear, RadialGradient as Radial, GradientColor } from '@syncfusion/ej2-svg-base';import { Pointer, Range } from '../axes/axis';import { LinearGauge } from '../../linear-gauge';import { Property, ChildProperty, Complex, Collection, isNullOrUndefined } from '@syncfusion/ej2-base';
/**
* Interface for a class ColorStop
*/
export interface ColorStopModel {
/**
* Specifies the color of the gradient.
*
* @default '#000000'
*/
color?: string;
/**
* Specifies the opacity of the gradient.
*
* @default 1
*/
opacity?: number;
/**
* Specifies the offset of the gradient.
*
* @default '0%'
*/
offset?: string;
/**
* Specifies the style of the gradient.
*
* @default ''
*/
style?: string;
}
/**
* Interface for a class GradientPosition
*/
export interface GradientPositionModel {
/**
* Specifies the horizontal position of the gradient.
*
* @default '0%'
*/
x?: string;
/**
* Specifies the vertical position of the gradient.
*
* @default '0%'
*/
y?: string;
}
/**
* Interface for a class LinearGradient
*/
export interface LinearGradientModel {
/**
* Specifies the start value of the linear gradient.
*
* @default '0%'
*/
startValue?: string;
/**
* Specifies the end value of the linear gradient.
*
* @default '100%'
*/
endValue?: string;
/**
* Specifies the color, opacity, offset and style of the linear gradient.
*/
colorStop?: ColorStopModel[];
}
/**
* Interface for a class RadialGradient
*/
export interface RadialGradientModel {
/**
* Specifies the radius of the radial gradient.
*
* @default '0%'
*/
radius?: string;
/**
* Specifies the outer position of the radial gradient.
*/
outerPosition?: GradientPositionModel;
/**
* Specifies the inner position of the radial gradient.
*/
innerPosition?: GradientPositionModel;
/**
* Specifies the color, opacity, offset and style of the radial gradient.
*/
colorStop?: ColorStopModel[];
}
/**
* Interface for a class Gradient
*/
export interface GradientModel {
}
-138
dist/ts/linear-gauge/axes/gradient.d.ts
import { Pointer, Range } from '../axes/axis';
import { LinearGauge } from '../../linear-gauge';
import { ChildProperty } from '@syncfusion/ej2-base';
import { ColorStopModel, GradientPositionModel } from '../axes/gradient-model';
/**
* Specifies the color information for the gradient in the linear gauge.
*/
export declare class ColorStop extends ChildProperty<ColorStop> {
/**
* Specifies the color of the gradient.
*
* @default '#000000'
*/
color: string;
/**
* Specifies the opacity of the gradient.
*
* @default 1
*/
opacity?: number;
/**
* Specifies the offset of the gradient.
*
* @default '0%'
*/
offset: string;
/**
* Specifies the style of the gradient.
*
* @default ''
*/
style?: string;
}
/**
* Specifies the position in percentage from which the radial gradient must be applied.
*/
export declare class GradientPosition extends ChildProperty<GradientPosition> {
/**
* Specifies the horizontal position of the gradient.
*
* @default '0%'
*/
x: string;
/**
* Specifies the vertical position of the gradient.
*
* @default '0%'
*/
y: string;
}
/**
* This specifies the properties of the linear gradient colors for the linear gauge.
*/
export declare class LinearGradient extends ChildProperty<LinearGradient> {
/**
* Specifies the start value of the linear gradient.
*
* @default '0%'
*/
startValue: string;
/**
* Specifies the end value of the linear gradient.
*
* @default '100%'
*/
endValue: string;
/**
* Specifies the color, opacity, offset and style of the linear gradient.
*/
colorStop: ColorStopModel[];
}
/**
* This specifies the properties of the radial gradient colors for the linear gauge.
*/
export declare class RadialGradient extends ChildProperty<RadialGradient> {
/**
* Specifies the radius of the radial gradient.
*
* @default '0%'
*/
radius: string;
/**
* Specifies the outer position of the radial gradient.
*/
outerPosition: GradientPositionModel;
/**
* Specifies the inner position of the radial gradient.
*/
innerPosition: GradientPositionModel;
/**
* Specifies the color, opacity, offset and style of the radial gradient.
*/
colorStop: ColorStopModel[];
}
/**
* To get the gradient support for pointers and ranges in the linear gauge.
*
* @hidden
*/
export declare class Gradient {
private gauge;
constructor(control: LinearGauge);
/**
* To get the linear gradient string.
*
* @private
*/
private getLinearGradientColor;
/**
* To get the radial gradient string.
*
* @private
*/
private getRadialGradientColor;
/**
* To get the color, offset, opacity and style.
*
* @private
*/
private getGradientColor;
/**
* To get the gradient color string.
*
* @private
*/
getGradientColorString(element: Pointer | Range): string;
/**
* Get module name.
*/
protected getModuleName(): string;
/**
* To destroy the gradient.
*
* @return {void}
* @private
*/
destroy(): void;
}
-249
dist/ts/linear-gauge/axes/gradient.ts
/* eslint-disable valid-jsdoc */
import { SvgRenderer, LinearGradient as Linear, RadialGradient as Radial, GradientColor } from '@syncfusion/ej2-svg-base';
import { Pointer, Range } from '../axes/axis';
import { LinearGauge } from '../../linear-gauge';
import { Property, ChildProperty, Complex, Collection, isNullOrUndefined } from '@syncfusion/ej2-base';
import { ColorStopModel, GradientPositionModel} from '../axes/gradient-model';
/**
* Specifies the color information for the gradient in the linear gauge.
*/
export class ColorStop extends ChildProperty<ColorStop> {
/**
* Specifies the color of the gradient.
*
* @default '#000000'
*/
@Property('#000000')
public color : string;
/**
* Specifies the opacity of the gradient.
*
* @default 1
*/
@Property(1)
public opacity ?: number;
/**
* Specifies the offset of the gradient.
*
* @default '0%'
*/
@Property('0%')
public offset : string;
/**
* Specifies the style of the gradient.
*
* @default ''
*/
@Property('')
public style ?: string;
}
/**
* Specifies the position in percentage from which the radial gradient must be applied.
*/
export class GradientPosition extends ChildProperty<GradientPosition> {
/**
* Specifies the horizontal position of the gradient.
*
* @default '0%'
*/
@Property('0%')
public x : string;
/**
* Specifies the vertical position of the gradient.
*
* @default '0%'
*/
@Property('0%')
public y : string;
}
/**
* This specifies the properties of the linear gradient colors for the linear gauge.
*/
export class LinearGradient extends ChildProperty<LinearGradient> {
/**
* Specifies the start value of the linear gradient.
*
* @default '0%'
*/
@Property('0%')
public startValue: string;
/**
* Specifies the end value of the linear gradient.
*
* @default '100%'
*/
@Property('100%')
public endValue: string;
/**
* Specifies the color, opacity, offset and style of the linear gradient.
*/
@Collection<ColorStopModel>([{color: '#000000', opacity: 1, offset: '0%', style: ''}], ColorStop)
public colorStop: ColorStopModel[];
}
/**
* This specifies the properties of the radial gradient colors for the linear gauge.
*/
export class RadialGradient extends ChildProperty<RadialGradient> {
/**
* Specifies the radius of the radial gradient.
*
* @default '0%'
*/
@Property('0%')
public radius: string;
/**
* Specifies the outer position of the radial gradient.
*/
@Complex<GradientPositionModel>({x: '0%', y: '0%'}, GradientPosition)
public outerPosition: GradientPositionModel;
/**
* Specifies the inner position of the radial gradient.
*/
@Complex<GradientPositionModel>({x: '0%', y: '0%'}, GradientPosition)
public innerPosition: GradientPositionModel;
/**
* Specifies the color, opacity, offset and style of the radial gradient.
*/
@Collection<ColorStopModel>([{color: '#000000', opacity: 1, offset: '0%', style: ''}], ColorStop)
public colorStop: ColorStopModel[];
}
/**
* To get the gradient support for pointers and ranges in the linear gauge.
*
* @hidden
*/
export class Gradient {
private gauge: LinearGauge;
constructor(control: LinearGauge) {
this.gauge = control;
}
/**
* To get the linear gradient string.
*
* @private
*/
private getLinearGradientColor(element: Range | Pointer): string {
const render: SvgRenderer = new SvgRenderer('');
const colorStop: ColorStopModel[] = element.linearGradient.colorStop;
const colors: GradientColor[] = this.getGradientColor(colorStop);
const name: string = '_' + this.gauge.svgObject.id + '_' + this.gauge.gradientCount + '_' + 'linearGradient';
const gradientPosition: Linear = {
id: name,
x1: (element.linearGradient.startValue.indexOf('%') === -1 ?
element.linearGradient.startValue :
parseFloat(element.linearGradient.startValue).toString()) + '%',
x2: (element.linearGradient.endValue.indexOf('%') === -1 ?
element.linearGradient.endValue :
parseFloat(element.linearGradient.endValue).toString()) + '%',
y1: '0' + '%',
y2: '0' + '%'
};
const def: Element = render.drawGradient('linearGradient', gradientPosition, colors);
this.gauge.svgObject.appendChild(def);
return 'url(#' + name + ')';
}
/**
* To get the radial gradient string.
*
* @private
*/
private getRadialGradientColor(element: Range | Pointer): string {
const render: SvgRenderer = new SvgRenderer('');
const colorStop: ColorStopModel[] = element.radialGradient.colorStop;
const colors: GradientColor[] = this.getGradientColor(colorStop);
const name: string = '_' + this.gauge.svgObject.id + '_' + this.gauge.gradientCount + '_' + 'radialGradient';
const gradientPosition: Radial = {
id: name,
r: !isNullOrUndefined(element.radialGradient.radius) ?
(element.radialGradient.radius.indexOf('%') === -1 ?
element.radialGradient.radius :
parseFloat(element.radialGradient.radius).toString()) + '%' : '0%',
cx: element.radialGradient.outerPosition == null ? '0%' : (element.radialGradient.outerPosition.x.indexOf('%') === -1 ?
element.radialGradient.outerPosition.x :
parseFloat(element.radialGradient.outerPosition.x).toString()) + '%',
cy: element.radialGradient.outerPosition == null ? '0%' : (element.radialGradient.outerPosition.y.indexOf('%') === -1 ?
element.radialGradient.outerPosition.y :
parseFloat(element.radialGradient.outerPosition.y).toString()) + '%',
fx: element.radialGradient.innerPosition == null ? '0%' : (element.radialGradient.innerPosition.x.indexOf('%') === -1 ?
element.radialGradient.innerPosition.y :
parseFloat(element.radialGradient.innerPosition.x).toString()) + '%',
fy: element.radialGradient.innerPosition == null ? '0%' : (element.radialGradient.innerPosition.y.indexOf('%') === -1 ?
element.radialGradient.innerPosition.y :
parseFloat(element.radialGradient.innerPosition.y).toString()) + '%'
};
const def: Element = render.drawGradient('radialGradient', gradientPosition, colors);
this.gauge.svgObject.appendChild(def);
return 'url(#' + name + ')';
}
/**
* To get the color, offset, opacity and style.
*
* @private
*/
private getGradientColor(colorStop: ColorStopModel[]): GradientColor[] {
const colors: GradientColor[] = [];
const length: number = !isNullOrUndefined(colorStop) ? colorStop.length : 0;
for (let j: number = 0; j < length; j++) {
const gradientColorStop: ColorStopModel = colorStop[j as number];
const color: GradientColor = {
color: gradientColorStop.color,
colorStop: gradientColorStop.offset,
opacity: gradientColorStop.opacity ? (gradientColorStop.opacity).toString() : '1',
style: gradientColorStop.style
};
colors.push(color);
}
return colors;
}
/**
* To get the gradient color string.
*
* @private
*/
public getGradientColorString(element: Pointer | Range): string {
let gradientColor: string;
if ((element.linearGradient || element.radialGradient)) {
if (element.linearGradient) {
gradientColor = this.getLinearGradientColor(element);
} else {
gradientColor = this.getRadialGradientColor(element);
}
this.gauge.gradientCount += 1;
} else {
return null;
}
return gradientColor;
}
/**
* Get module name.
*/
protected getModuleName(): string {
return 'Gradient';
}
/**
* To destroy the gradient.
*
* @return {void}
* @private
*/
public destroy(): void {
this.gauge = null;
}
}
-18
dist/ts/linear-gauge/index.d.ts
/**
* Linear gauge component exported items
*/
export * from './linear-gauge';
export * from './model/base';
export * from './model/interface';
export * from './axes/axis';
export * from './utils/enum';
export * from './utils/helper';
export * from './annotations/annotations';
export * from './user-interaction/tooltip';
export * from './linear-gauge-model';
export * from './axes/axis-model';
export * from './model/base-model';
export * from './model/print';
export * from './model/image-export';
export * from './model/pdf-export';
export * from './axes/gradient';
-18
dist/ts/linear-gauge/index.ts
/**
* Linear gauge component exported items
*/
export * from './linear-gauge';
export * from './model/base';
export * from './model/interface';
export * from './axes/axis';
export * from './utils/enum';
export * from './utils/helper';
export * from './annotations/annotations';
export * from './user-interaction/tooltip';
export * from './linear-gauge-model';
export * from './axes/axis-model';
export * from './model/base-model';
export * from './model/print';
export * from './model/image-export';
export * from './model/pdf-export';
export * from './axes/gradient';
-297
dist/ts/linear-gauge/linear-gauge-model.d.ts
import { Component, Property, NotifyPropertyChanges, Internationalization, ModuleDeclaration, animationMode } from '@syncfusion/ej2-base';import { EmitType, INotifyPropertyChanged, Browser } from '@syncfusion/ej2-base';import { Event, EventHandler, Complex, Collection, isNullOrUndefined, remove, createElement, Animation, AnimationOptions } from '@syncfusion/ej2-base';import { Border, Font, Container, Margin, Annotation, TooltipSettings } from './model/base';import { FontModel, BorderModel, ContainerModel, MarginModel, AnnotationModel, TooltipSettingsModel } from './model/base-model';import { AxisModel, PointerModel} from './axes/axis-model';import { Axis, Pointer } from './axes/axis';import { load, loaded, gaugeMouseMove, gaugeMouseLeave, gaugeMouseDown, gaugeMouseUp, resized, valueChange } from './model/constant';import { ILoadedEventArgs, ILoadEventArgs, IAnimationCompleteEventArgs, IAnnotationRenderEventArgs } from './model/interface';import { ITooltipRenderEventArgs, IVisiblePointer, IMouseEventArgs, IAxisLabelRenderEventArgs, IMoveCursor } from './model/interface';import { IResizeEventArgs, IValueChangeEventArgs, IThemeStyle, IPrintEventArgs, IPointerDragEventArgs } from './model/interface';import { Size, valueToCoefficient, calculateShapes, calculateTextPosition, removeElement, getElement, VisibleRange, getExtraWidth, stringToNumberSize } from './utils/helper';import { measureText, Rect, TextOption, textElement, GaugeLocation, RectOption, PathOption } from './utils/helper';import { getBox, withInRange, getPointer, convertPixelToValue, textTrim, showTooltip, removeTooltip } from './utils/helper';import { Orientation, LinearGaugeTheme, LabelPlacement } from './utils/enum';import { dragEnd, dragMove, dragStart } from './model/constant';import { AxisLayoutPanel } from './axes/axis-panel';import { SvgRenderer } from '@syncfusion/ej2-svg-base';import { AxisRenderer } from './axes/axis-renderer';import { Annotations } from './annotations/annotations';import { GaugeTooltip } from './user-interaction/tooltip';import { getThemeStyle } from './model/theme';import { PdfPageOrientation } from '@syncfusion/ej2-pdf-export';import { ExportType } from '../linear-gauge/utils/enum';import { Print } from './model/print';import { PdfExport } from './model/pdf-export';import { ImageExport } from './model/image-export';import { Gradient } from './axes/gradient';
import {ComponentModel} from '@syncfusion/ej2-base';
/**
* Interface for a class LinearGauge
*/
export interface LinearGaugeModel extends ComponentModel{
/**
* Specifies the width of the linear gauge as a string in order to provide input as both like '100px' or '100%'.
* If specified as '100%, gauge will render to the full width of its parent element.
*
* @default null
*/
width?: string;
/**
* Enables or disables the ability of the gauge to be rendered to the complete width. The left, right, top and bottom spacing will not be considered in the gauge when this property is disabled.
*
* @default true
*/
allowMargin?: boolean;
/**
* Specifies the height of the linear gauge as a string in order to provide input as both like '100px' or '100%'.
* If specified as '100%, gauge will render to the full height of its parent element.
*
* @default null
*/
height?: string;
/**
* Defines the duration of the loading animation in linear gauge, which animates the
* axis line, ticks, axis labels, ranges, pointers, and annotations. The value of this property will be in milliseconds.
*
* @default 0
*/
animationDuration?: number;
/**
* Specifies the orientation of the rendering of the linear gauge.
*
* @default Vertical
*/
orientation?: Orientation;
/**
* Specifies the placement of the label in linear gauge.
*
* @default None
*/
edgeLabelPlacement?: LabelPlacement;
/**
* Enables or disables the print functionality in linear gauge.
*
* @default false
*/
allowPrint?: boolean;
/**
* Enables or disables the export to image functionality in linear gauge.
*
* @default false
*/
allowImageExport?: boolean;
/**
* Enables or disables the export to PDF functionality in linear gauge.
*
* @default false
*/
allowPdfExport?: boolean;
/**
* Specifies the options to customize the margins of the linear gauge.
*/
margin?: MarginModel;
/**
* Specifies the options for customizing the style properties of the border for linear gauge.
*/
border?: BorderModel;
/**
* Specifies the background color of the gauge. This property accepts value in hex code, rgba string as a valid CSS color string.
*
* @default 'transparent'
*/
background?: string;
/**
* Specifies the title for linear gauge.
*/
title?: string;
/**
* Specifies the options for customizing the appearance of title for linear gauge.
*/
titleStyle?: FontModel;
/**
* Specifies the options for customizing the container in linear gauge.
*/
container?: ContainerModel;
/**
* Specifies the options for customizing the axis in linear gauge.
*/
axes?: AxisModel[];
/**
* Specifies the options for customizing the tooltip in linear gauge.
*/
tooltip?: TooltipSettingsModel;
/**
* Specifies the options for customizing the annotation of linear gauge.
*/
annotations?: AnnotationModel[];
/**
* Specifies the color palette for axis ranges in linear gauge.
*
* @default []
*/
rangePalettes?: string[];
/**
* Enables or disables a grouping separator should be used for a number.
*
* @default false
*/
useGroupingSeparator?: boolean;
/**
* Sets and gets the information about gauge for assistive technology.
*
* @default null
*/
description?: string;
/**
* Specifies the tab index value for the linear gauge.
*
* @default 0
*/
tabIndex?: number;
/**
* Specifies the format to apply for internationalization in linear gauge.
*
* @default null
*/
format?: string;
/**
* Sets and gets the theme styles supported for linear gauge. When the theme is set, the styles associated with the theme will be set in the gauge.
*
* @default Material
*/
theme?: LinearGaugeTheme;
/**
* Triggers after the gauge gets rendered.
*
* @event loaded
*/
loaded?: EmitType<ILoadedEventArgs>;
/**
* Triggers before the gauge gets rendered.
*
* @event load
*/
load?: EmitType<ILoadEventArgs>;
/**
* Triggers after completing the animation for pointer.
*
* @event animationComplete
*/
animationComplete?: EmitType<IAnimationCompleteEventArgs>;
/**
* Triggers before each axis label gets rendered.
*
* @event axisLabelRender
*/
axisLabelRender?: EmitType<IAxisLabelRenderEventArgs>;
/**
* Triggers before the pointer is dragged.
*
* @event dragStart
*/
dragStart?: EmitType<IPointerDragEventArgs>;
/**
* Triggers while dragging the pointers.
*
* @event dragMove
*/
dragMove?: EmitType<IPointerDragEventArgs>;
/**
* Triggers after the pointer is dragged.
*
* @event dragEnd
*/
dragEnd?: EmitType<IPointerDragEventArgs>;
/**
* Triggers before each annotation gets rendered.
*
* @event annotationRender
*/
annotationRender?: EmitType<IAnnotationRenderEventArgs>;
/**
* Triggers before the tooltip get rendered.
*
* @event tooltipRender
* @deprecated
*/
tooltipRender?: EmitType<ITooltipRenderEventArgs>;
/**
* Triggers when performing the mouse move operation on gauge area.
*
* @event gaugeMouseMove
*/
gaugeMouseMove?: EmitType<IMouseEventArgs>;
/**
* Triggers when performing the mouse leave operation from the gauge area.
*
* @event gaugeMouseLeave
*/
gaugeMouseLeave?: EmitType<IMouseEventArgs>;
/**
* Triggers when performing the mouse down operation on gauge area.
*
* @event gaugeMouseDown
*/
gaugeMouseDown?: EmitType<IMouseEventArgs>;
/**
* Triggers when performing mouse up operation on gauge area.
*
* @event gaugeMouseUp
*/
gaugeMouseUp?: EmitType<IMouseEventArgs>;
/**
* Triggers while changing the value of the pointer by UI interaction.
*
* @event valueChange
*/
valueChange?: EmitType<IValueChangeEventArgs>;
/**
* Triggers to notify the resize of the linear gauge when the window is resized.
*
* @event resized
*/
resized?: EmitType<IResizeEventArgs>;
/**
* Triggers before the print functionality gets started.
*
* @event beforePrint
*/
beforePrint?: EmitType<IPrintEventArgs>;
}
-601
dist/ts/linear-gauge/linear-gauge.d.ts
import { Component, Internationalization, ModuleDeclaration } from '@syncfusion/ej2-base';
import { EmitType, INotifyPropertyChanged } from '@syncfusion/ej2-base';
import { FontModel, BorderModel, ContainerModel, MarginModel, AnnotationModel, TooltipSettingsModel } from './model/base-model';
import { AxisModel } from './axes/axis-model';
import { Axis, Pointer } from './axes/axis';
import { LinearGaugeModel } from './linear-gauge-model';
import { ILoadedEventArgs, ILoadEventArgs, IAnimationCompleteEventArgs, IAnnotationRenderEventArgs } from './model/interface';
import { ITooltipRenderEventArgs, IMouseEventArgs, IAxisLabelRenderEventArgs } from './model/interface';
import { IResizeEventArgs, IValueChangeEventArgs, IThemeStyle, IPrintEventArgs, IPointerDragEventArgs } from './model/interface';
import { Size } from './utils/helper';
import { Rect } from './utils/helper';
import { Orientation, LinearGaugeTheme, LabelPlacement } from './utils/enum';
import { AxisLayoutPanel } from './axes/axis-panel';
import { SvgRenderer } from '@syncfusion/ej2-svg-base';
import { AxisRenderer } from './axes/axis-renderer';
import { Annotations } from './annotations/annotations';
import { GaugeTooltip } from './user-interaction/tooltip';
import { PdfPageOrientation } from '@syncfusion/ej2-pdf-export';
import { ExportType } from '../linear-gauge/utils/enum';
import { Print } from './model/print';
import { PdfExport } from './model/pdf-export';
import { ImageExport } from './model/image-export';
import { Gradient } from './axes/gradient';
/**
* Represents the linear gauge control. This is used to customize the properties of the linear gauge to visualize the data in linear scale.
* ```html
* <div id="container"/>
* <script>
* var gaugeObj = new LinearGauge({ });
* gaugeObj.appendTo("#container");
* </script>
* ```
*/
export declare class LinearGauge extends Component<HTMLElement> implements INotifyPropertyChanged {
/**
* Specifies the module that is used to place any text or images as annotation into the linear gauge.
*
* @private
*/
annotationsModule: Annotations;
/**
* Specifies the module that is used to display the pointer value in tooltip.
*
* @private
*/
tooltipModule: GaugeTooltip;
/**
* This module enables the print functionality in linear gauge.
*
* @private
*/
printModule: Print;
/**
* This module enables the export to PDF functionality in linear gauge.
*
* @private
*/
pdfExportModule: PdfExport;
/**
* This module enables the export to image functionality in linear gauge.
*
* @private
*/
imageExportModule: ImageExport;
/**
* This module enables the gradient option for pointer and ranges.
*
* @private
*/
gradientModule: Gradient;
/**
* Specifies the gradient count of the linear gauge.
*
* @private
*/
gradientCount: number;
/**
* Specifies the width of the linear gauge as a string in order to provide input as both like '100px' or '100%'.
* If specified as '100%, gauge will render to the full width of its parent element.
*
* @default null
*/
width: string;
/**
* Enables or disables the ability of the gauge to be rendered to the complete width. The left, right, top and bottom spacing will not be considered in the gauge when this property is disabled.
*
* @default true
*/
allowMargin: boolean;
/**
* Specifies the height of the linear gauge as a string in order to provide input as both like '100px' or '100%'.
* If specified as '100%, gauge will render to the full height of its parent element.
*
* @default null
*/
height: string;
/**
* Defines the duration of the loading animation in linear gauge, which animates the
* axis line, ticks, axis labels, ranges, pointers, and annotations. The value of this property will be in milliseconds.
*
* @default 0
*/
animationDuration: number;
/**
* Specifies the orientation of the rendering of the linear gauge.
*
* @default Vertical
*/
orientation: Orientation;
/**
* Specifies the placement of the label in linear gauge.
*
* @default None
*/
edgeLabelPlacement: LabelPlacement;
/**
* Enables or disables the print functionality in linear gauge.
*
* @default false
*/
allowPrint: boolean;
/**
* Enables or disables the export to image functionality in linear gauge.
*
* @default false
*/
allowImageExport: boolean;
/**
* Enables or disables the export to PDF functionality in linear gauge.
*
* @default false
*/
allowPdfExport: boolean;
/**
* Specifies the options to customize the margins of the linear gauge.
*/
margin: MarginModel;
/**
* Specifies the options for customizing the style properties of the border for linear gauge.
*/
border: BorderModel;
/**
* Specifies the background color of the gauge. This property accepts value in hex code, rgba string as a valid CSS color string.
*
* @default 'transparent'
*/
background: string;
/**
* Specifies the title for linear gauge.
*/
title: string;
/**
* Specifies the options for customizing the appearance of title for linear gauge.
*/
titleStyle: FontModel;
/**
* Specifies the options for customizing the container in linear gauge.
*/
container: ContainerModel;
/**
* Specifies the options for customizing the axis in linear gauge.
*/
axes: AxisModel[];
/**
* Specifies the options for customizing the tooltip in linear gauge.
*/
tooltip: TooltipSettingsModel;
/**
* Specifies the options for customizing the annotation of linear gauge.
*/
annotations: AnnotationModel[];
/**
* Specifies the color palette for axis ranges in linear gauge.
*
* @default []
*/
rangePalettes: string[];
/**
* Enables or disables a grouping separator should be used for a number.
*
* @default false
*/
useGroupingSeparator: boolean;
/**
* Sets and gets the information about gauge for assistive technology.
*
* @default null
*/
description: string;
/**
* Specifies the tab index value for the linear gauge.
*
* @default 0
*/
tabIndex: number;
/**
* Specifies the format to apply for internationalization in linear gauge.
*
* @default null
*/
format: string;
/**
* Sets and gets the theme styles supported for linear gauge. When the theme is set, the styles associated with the theme will be set in the gauge.
*
* @default Material
*/
theme: LinearGaugeTheme;
/**
* Triggers after the gauge gets rendered.
*
* @event loaded
*/
loaded: EmitType<ILoadedEventArgs>;
/**
* Triggers before the gauge gets rendered.
*
* @event load
*/
load: EmitType<ILoadEventArgs>;
/**
* Triggers after completing the animation for pointer.
*
* @event animationComplete
*/
animationComplete: EmitType<IAnimationCompleteEventArgs>;
/**
* Triggers before each axis label gets rendered.
*
* @event axisLabelRender
*/
axisLabelRender: EmitType<IAxisLabelRenderEventArgs>;
/**
* Triggers before the pointer is dragged.
*
* @event dragStart
*/
dragStart: EmitType<IPointerDragEventArgs>;
/**
* Triggers while dragging the pointers.
*
* @event dragMove
*/
dragMove: EmitType<IPointerDragEventArgs>;
/**
* Triggers after the pointer is dragged.
*
* @event dragEnd
*/
dragEnd: EmitType<IPointerDragEventArgs>;
/**
* Triggers before each annotation gets rendered.
*
* @event annotationRender
*/
annotationRender: EmitType<IAnnotationRenderEventArgs>;
/**
* Triggers before the tooltip get rendered.
*
* @event tooltipRender
* @deprecated
*/
tooltipRender: EmitType<ITooltipRenderEventArgs>;
/**
* Triggers when performing the mouse move operation on gauge area.
*
* @event gaugeMouseMove
*/
gaugeMouseMove: EmitType<IMouseEventArgs>;
/**
* Triggers when performing the mouse leave operation from the gauge area.
*
* @event gaugeMouseLeave
*/
gaugeMouseLeave: EmitType<IMouseEventArgs>;
/**
* Triggers when performing the mouse down operation on gauge area.
*
* @event gaugeMouseDown
*/
gaugeMouseDown: EmitType<IMouseEventArgs>;
/**
* Triggers when performing mouse up operation on gauge area.
*
* @event gaugeMouseUp
*/
gaugeMouseUp: EmitType<IMouseEventArgs>;
/**
* Triggers while changing the value of the pointer by UI interaction.
*
* @event valueChange
*/
valueChange: EmitType<IValueChangeEventArgs>;
/**
* Triggers to notify the resize of the linear gauge when the window is resized.
*
* @event resized
*/
resized: EmitType<IResizeEventArgs>;
/**
* Triggers before the print functionality gets started.
*
* @event beforePrint
*/
beforePrint: EmitType<IPrintEventArgs>;
/** @private */
activePointer: Pointer;
/** @private */
activeAxis: Axis;
/** @private */
renderer: SvgRenderer;
/** @private */
svgObject: Element;
/** @private */
availableSize: Size;
/** @private */
actualRect: Rect;
/** @private */
intl: Internationalization;
/** @private* */
containerBounds: Rect;
/** @private */
isTouch: boolean;
/** @private */
isDrag: boolean;
/** @private */
tooltipTimeout: number;
/** @private */
splitUpCount: number;
/** @private */
isPropertyChange: boolean;
private resizeEvent;
/**
* remove the animation style.
*/
private styleRemove;
/**
* Calculate the axes bounds for gauge.
*
* @private
* @hidden
*/
gaugeAxisLayoutPanel: AxisLayoutPanel;
/**
* Render the axis elements for gauge.
*
* @private
* @hidden
*/
axisRenderer: AxisRenderer;
/** @private */
private resizeTo;
/** @private */
allowLoadingAnimation: boolean;
/** @private */
isPointerAnimationInProgress: boolean;
/** @private */
isOverAllAnimationComplete: boolean;
/** @private */
containerObject: Element;
/** @private */
pointerDrag: boolean;
private isTouchPointer;
/** @private */
isCheckPointerDrag: boolean;
/** @private */
mouseX: number;
/** @private */
mouseY: number;
/** @private */
mouseElement: Element;
/** @private */
gaugeResized: boolean;
/** @private */
nearSizes: number[];
/** @private */
farSizes: number[];
/**
* @private
*/
themeStyle: IThemeStyle;
/**
* Constructor for creating the widget
*
* @private
* @hidden
*/
constructor(options?: LinearGaugeModel, element?: string | HTMLElement);
/**
* Initialize the preRender method.
*/
protected preRender(): void;
private setTheme;
private initPrivateVariable;
/**
* Method to set culture for chart
*/
private setCulture;
/**
* Methods to create svg element
*/
private createSvg;
/**
* To Remove the SVG.
*
* @return {boolean}
* @private
*/
removeSvg(): void;
private renderAnimation;
private axisElementAnimate;
/**
* Method to calculate the size of the gauge
*/
private calculateSize;
private renderElements;
/**
* To Initialize the control rendering
*/
protected render(): void;
/**
* To render the gauge elements
*
* @private
*/
renderGaugeElements(): void;
private appendSecondaryElement;
/**
* To calculate axes bounds
*
* @private
*/
calculateBounds(): void;
/**
* To render axis elements
*
* @private
*/
renderAxisElements(): void;
private renderBorder;
private renderTitle;
private unWireEvents;
private wireEvents;
private setStyle;
/**
* Handles the gauge resize.
*
* @return {boolean} check whether the Linear Gauge is resized or not.
* @private
*/
gaugeResize(): boolean;
/**
* This method destroys the linear gauge. This method removes the events associated with the linear gauge and disposes the objects created for rendering and updating the linear gauge.
*/
destroy(): void;
/**
* To render the gauge container
*
* @private
*/
renderContainer(): void;
/**
* Method to set mouse x, y from events
*/
private setMouseXY;
/**
* Handles the mouse down on gauge.
*
* @param {PointerEvent} e - Specifies the event argument.
* @return {boolean}
* @private
*/
gaugeOnMouseDown(e: PointerEvent): boolean;
/**
* Handles the mouse move.
*
* @return {boolean}
* @private
*/
mouseMove(e: PointerEvent): boolean;
private titleTooltip;
/**
* To find the mouse move on pointer.
*
* @param element
*/
private moveOnPointer;
/**
* Handle the right click
*
* @param {PointerEvent | TouchEvent} event - Specifies the pointer event argument.
* @returns {boolean} - Specifies whether right click is performed on the Linear Gauge.
* @private
*
*/
gaugeRightClick(event: MouseEvent | PointerEvent): boolean;
/**
* Handles the mouse leave.
*
* @return {boolean}
* @private
*/
mouseLeave(e: PointerEvent): boolean;
/**
* Handles the mouse move on gauge.
*
* @param {PointerEvent | TouchEvent} e - Specifies the pointer event argument.
* @return {boolean}
* @private
*/
gaugeOnMouseMove(): boolean;
/**
* Handles the mouse up.
*
* @return {boolean}
* @private
*/
mouseEnd(e: PointerEvent): boolean;
/**
* This method handles the print functionality for linear gauge.
*
* @param id - Specifies the element to print the linear gauge.
*/
print(id?: string[] | string | Element): void;
/**
* This method handles the export functionality for linear gauge.
*
* @param {ExportType} type - Specifies the extension type of the exported document.
* @param {string} fileName - Specifies file name for exporting the rendered Linear Gauge.
* @param {PdfPageOrientation} orientation - Specifies the orientation of the PDF document.
* @param {boolean} allowDownload - Specifies whether the exported file should be downloaded or not.
* @returns {string} - Specifies the base64 string of the exported image which is returned when the allowDownload is set to false.
*/
export(type: ExportType, fileName: string, orientation?: PdfPageOrientation, allowDownload?: boolean): Promise<string>;
/**
* Handles the mouse event arguments.
*
* @return {IMouseEventArgs}
* @private
*/
private getMouseArgs;
/**
* @private
* @param axis
* @param pointer
*/
markerDrag(axis: Axis, pointer: Pointer): void;
/**
* @private
* @param axis
* @param pointer
*/
barDrag(axis: Axis, pointer: Pointer): void;
/**
* Triggers when drag the pointer
*
* @param activeElement
*/
private triggerDragEvent;
/**
* This method is used to set the pointer value in the linear gauge.
*
* @param {number} axisIndex - Specifies the index of the axis.
* @param {number} pointerIndex - Specifies the index of the pointer.
* @param {number} value - Specifies the pointer value.
*/
setPointerValue(axisIndex: number, pointerIndex: number, value: number): void;
/**
* This method is used to set the annotation value in the linear gauge.
*
* @param {number} annotationIndex - Specifies the index value for the annotation in linear gauge.
* @param {string | Function} content - Specifies the content for the annotation in linear gauge.
* @param {number} axisValue - Specifies the axis value to which the annotation must be positioned.
*/
setAnnotationValue(annotationIndex: number, content: string | Function, axisValue?: number): void;
private isGradientVisible;
/**
* To provide the array of modules needed for control rendering
*
* @return {ModuleDeclaration[]}
* @private
*/
requiredModules(): ModuleDeclaration[];
/**
* Get the properties to be maintained in the persisted state.
*
* @private
*/
getPersistData(): string;
/**
* Get component name
*
* @private
*/
getModuleName(): string;
/**
* Called internally if any of the property value changed.
*
* @private
*/
onPropertyChanged(newProp: LinearGaugeModel, oldProp: LinearGaugeModel): void;
}
dist/ts/linear-gauge/linear-gauge.ts

Sorry, the diff of this file is too big to display

-410
dist/ts/linear-gauge/model/base-model.d.ts
import { Property, ChildProperty, Complex} from '@syncfusion/ej2-base';import { Placement, ContainerType, TooltipPosition } from '../utils/enum';
/**
* Interface for a class Font
*/
export interface FontModel {
/**
* Sets and gets the size of the font in text.
*/
size?: string;
/**
* Sets and gets the font color for text.
*
* @default ''
*/
color?: string;
/**
* Sets and gets the font-family for text.
*/
fontFamily?: string;
/**
* Sets and gets the font weight of the text.
*
* @default 'Regular'
*/
fontWeight?: string;
/**
* Sets and gets the font style for the text.
*
* @default 'Normal'
*/
fontStyle?: string;
/**
* Sets and gets the opacity of the text.
*
* @default 1
*/
opacity?: number;
}
/**
* Interface for a class TextStyle
*/
export interface TextStyleModel {
/**
* Defines the font-size of the text pointer.
*/
size?: string;
/**
* Defines the font-family of the text pointer. The default value of this property varies based on the `theme` set in the Linear Gauge.
*/
fontFamily?: string;
/**
* Defines the font-weight of the text pointer.
*
* @default 'normal'
*/
fontWeight?: string;
/**
* Defines the font-style of the text pointer.
*
* @default 'normal'
*/
fontStyle?: string;
}
/**
* Interface for a class Margin
*/
export interface MarginModel {
/**
* Sets and gets the left margin for linear gauge.
*
* @default 10
*/
left?: number;
/**
* Sets and gets the right margin for linear gauge.
*
* @default 10
*/
right?: number;
/**
* Sets and gets the top margin for linear gauge.
*
* @default 10
*/
top?: number;
/**
* Sets and gets the bottom margin for linear gauge.
*
* @default 10
*/
bottom?: number;
}
/**
* Interface for a class Border
*/
export interface BorderModel {
/**
* Sets and gets the color of the border. This property accepts value in hex code, rgba string as a valid CSS color string.
*/
color?: string;
/**
* Sets and gets the width of the border.
*
* @default 0
*/
width?: number;
/**
* Sets and gets the dash-array of the border.
*/
dashArray?: string;
}
/**
* Interface for a class Annotation
*/
export interface AnnotationModel {
/**
* Sets and gets the content for the annotation.
*
* @default ''
* @aspType string
*/
content?: string | Function;
/**
* Sets and gets the x position for the annotation in linear gauge.
*
* @default 0
*/
x?: number;
/**
* Sets and gets the y position for the annotation in linear gauge.
*
* @default 0
*/
y?: number;
/**
* Sets and gets the vertical alignment of annotation.
*
* @default None
*/
verticalAlignment?: Placement;
/**
* Sets and gets the horizontal alignment of annotation.
*
* @default None
*/
horizontalAlignment?: Placement;
/**
* Sets and gets the z-index of the annotation.
*
* @default '-1'
*/
zIndex?: string;
/**
* Sets and gets the options to customize the font of the annotation in linear gauge.
*/
font?: FontModel;
/**
* Sets and gets the axis index which places the annotation in the specified axis in the linear gauge.
*
* @aspDefaultValueIgnore
* @default null
*/
axisIndex?: number;
/**
* Sets and gets the value of axis which places the annotation near the specified axis value.
*
* @aspDefaultValueIgnore
* @default null
*/
axisValue?: number;
}
/**
* Interface for a class Container
*/
export interface ContainerModel {
/**
* Sets and gets the type of container in linear gauge.
*
* @default Normal
*/
type?: ContainerType;
/**
* Sets and gets the height of the container in linear gauge.
*
* @default 0
*/
height?: number;
/**
* Sets and gets the width of the container in linear gauge.
*
* @default 0
*/
width?: number;
/**
* Sets and gets the corner radius for the rounded rectangle container in linear gauge.
*
* @default 10
*/
roundedCornerRadius?: number;
/**
* Sets and gets the background color of the container in linear gauge.
*
* @default 'transparent'
*/
backgroundColor?: string;
/**
* Sets and gets the options to customize the border of container.
*/
border?: BorderModel;
/**
* Sets and gets the offset value from where the container must be placed in the linear gauge.
*
* @default 0
*/
offset?: number;
}
/**
* Interface for a class RangeTooltip
*/
export interface RangeTooltipModel {
/**
* Sets and gets the fill color of the range tooltip, which accepts the value in hex code, rgba string as a valid CSS color string.
*
* @default null
*/
fill?: string;
/**
* Sets and gets the options to customize the tooltip text of range in axis.
*/
textStyle?: FontModel;
/**
* Sets and gets the format for the tooltip content of the range. Use "{start}" and "{end}" as a placeholder
* text to display the corresponding start and end value of the range in the tooltip.
*
* @default null
*/
format?: string;
/**
* Sets and gets the custom template to format the tooltip content.
*
* @default null
* @aspType string
*/
template?: string | Function;
/**
* Enables or disables the animation for the range tooltip when moved from one place to another.
*
* @default true
*/
enableAnimation?: boolean;
/**
* Sets and gets the options to customize the border for range tooltip.
*/
border?: BorderModel;
/**
* Sets and gets the position type to place the tooltip in the axis .
*
* @default End
*/
position?: TooltipPosition;
/**
* Enables and disables to show the tooltip of the range at mouse position. When set as false which is the default value, the tooltip will be displayed over the axis line.
*
* @default false
*/
showAtMousePosition?: boolean;
}
/**
* Interface for a class TooltipSettings
*/
export interface TooltipSettingsModel {
/**
* Enables or disables the visibility of tooltip.
*
* @default false
*/
enable?: boolean;
/**
* Sets and gets the color of the tooltip. This property accepts value in hex code, rgba string as a valid CSS color string.
*/
fill?: string;
/**
* Sets and gets the options to customize the text in tooltip.
*/
textStyle?: FontModel;
/**
* Sets and gets the format of the tooltip content in linear gauge. Use "{value}" as a placeholder
* text to display the corresponding pointer value of in the tooltip.
*
* @default null
*/
format?: string;
/**
* Enables and disables to show the tooltip of the pointer at mouse position. When set as false which is the default value, the tooltip will be displayed over the axis line.
*
* @default false
*/
showAtMousePosition?: boolean;
/**
* Sets and gets the options to customize the range tooltip.
*/
rangeSettings?: RangeTooltipModel;
/**
* Sets and gets the position type to place the tooltip in the axis.
*
* @default End
*/
position?: TooltipPosition;
/**
* Sets and gets the custom template to format the tooltip content.
*
* @default null
* @aspType string
*/
template?: string | Function;
/**
* Enables or disables the animation for the tooltip while moving from one place to another.
*
* @default true
*/
enableAnimation?: boolean;
/**
* Sets and gets the options to customize the border for tooltip.
*/
border?: BorderModel;
/**
* Sets and gets the option to display the tooltip for range and pointer.
*
* @default Pointer
*/
type?: string[];
}
-334
dist/ts/linear-gauge/model/base.d.ts
import { ChildProperty } from '@syncfusion/ej2-base';
import { BorderModel, FontModel, RangeTooltipModel } from '../model/base-model';
import { Placement, ContainerType, TooltipPosition } from '../utils/enum';
/**
* Sets and gets the options for customizing the fonts.
*/
export declare class Font extends ChildProperty<Font> {
/**
* Sets and gets the size of the font in text.
*/
size: string;
/**
* Sets and gets the font color for text.
*
* @default ''
*/
color: string;
/**
* Sets and gets the font-family for text.
*/
fontFamily: string;
/**
* Sets and gets the font weight of the text.
*
* @default 'Regular'
*/
fontWeight: string;
/**
* Sets and gets the font style for the text.
*
* @default 'Normal'
*/
fontStyle: string;
/**
* Sets and gets the opacity of the text.
*
* @default 1
*/
opacity: number;
}
/**
* Defines the font properties such as font-size, font family and others for the text pointer.
*/
export declare class TextStyle extends ChildProperty<TextStyle> {
/**
* Defines the font-size of the text pointer.
*/
size: string;
/**
* Defines the font-family of the text pointer. The default value of this property varies based on the `theme` set in the Linear Gauge.
*/
fontFamily: string;
/**
* Defines the font-weight of the text pointer.
*
* @default 'normal'
*/
fontWeight: string;
/**
* Defines the font-style of the text pointer.
*
* @default 'normal'
*/
fontStyle: string;
}
/**
* Sets and gets the margin for the linear gauge.
*/
export declare class Margin extends ChildProperty<Margin> {
/**
* Sets and gets the left margin for linear gauge.
*
* @default 10
*/
left: number;
/**
* Sets and gets the right margin for linear gauge.
*
* @default 10
*/
right: number;
/**
* Sets and gets the top margin for linear gauge.
*
* @default 10
*/
top: number;
/**
* Sets and gets the bottom margin for linear gauge.
*
* @default 10
*/
bottom: number;
}
/**
* Sets and gets the options to customize the style properties of the border for the linear gauge.
*/
export declare class Border extends ChildProperty<Border> {
/**
* Sets and gets the color of the border. This property accepts value in hex code, rgba string as a valid CSS color string.
*/
color: string;
/**
* Sets and gets the width of the border.
*
* @default 0
*/
width: number;
/**
* Sets and gets the dash-array of the border.
*/
dashArray: string;
}
/**
* Sets and gets the options for customizing the annotation in linear gauge.
*/
export declare class Annotation extends ChildProperty<Annotation> {
/**
* Sets and gets the content for the annotation.
*
* @default ''
* @aspType string
*/
content: string | Function;
/**
* Sets and gets the x position for the annotation in linear gauge.
*
* @default 0
*/
x: number;
/**
* Sets and gets the y position for the annotation in linear gauge.
*
* @default 0
*/
y: number;
/**
* Sets and gets the vertical alignment of annotation.
*
* @default None
*/
verticalAlignment: Placement;
/**
* Sets and gets the horizontal alignment of annotation.
*
* @default None
*/
horizontalAlignment: Placement;
/**
* Sets and gets the z-index of the annotation.
*
* @default '-1'
*/
zIndex: string;
/**
* Sets and gets the options to customize the font of the annotation in linear gauge.
*/
font: FontModel;
/**
* Sets and gets the axis index which places the annotation in the specified axis in the linear gauge.
*
* @aspDefaultValueIgnore
* @default null
*/
axisIndex: number;
/**
* Sets and gets the value of axis which places the annotation near the specified axis value.
*
* @aspDefaultValueIgnore
* @default null
*/
axisValue: number;
}
/**
* Sets and gets the options for customizing the container of linear gauge.
*/
export declare class Container extends ChildProperty<Container> {
/**
* Sets and gets the type of container in linear gauge.
*
* @default Normal
*/
type: ContainerType;
/**
* Sets and gets the height of the container in linear gauge.
*
* @default 0
*/
height: number;
/**
* Sets and gets the width of the container in linear gauge.
*
* @default 0
*/
width: number;
/**
* Sets and gets the corner radius for the rounded rectangle container in linear gauge.
*
* @default 10
*/
roundedCornerRadius: number;
/**
* Sets and gets the background color of the container in linear gauge.
*
* @default 'transparent'
*/
backgroundColor: string;
/**
* Sets and gets the options to customize the border of container.
*/
border: BorderModel;
/**
* Sets and gets the offset value from where the container must be placed in the linear gauge.
*
* @default 0
*/
offset: number;
}
/**
* Sets and gets the options to customize the tooltip for range in axis.
*/
export declare class RangeTooltip extends ChildProperty<RangeTooltip> {
/**
* Sets and gets the fill color of the range tooltip, which accepts the value in hex code, rgba string as a valid CSS color string.
*
* @default null
*/
fill: string;
/**
* Sets and gets the options to customize the tooltip text of range in axis.
*/
textStyle: FontModel;
/**
* Sets and gets the format for the tooltip content of the range. Use "{start}" and "{end}" as a placeholder
* text to display the corresponding start and end value of the range in the tooltip.
*
* @default null
*/
format: string;
/**
* Sets and gets the custom template to format the tooltip content.
*
* @default null
* @aspType string
*/
template: string | Function;
/**
* Enables or disables the animation for the range tooltip when moved from one place to another.
*
* @default true
*/
enableAnimation: boolean;
/**
* Sets and gets the options to customize the border for range tooltip.
*/
border: BorderModel;
/**
* Sets and gets the position type to place the tooltip in the axis .
*
* @default End
*/
position: TooltipPosition;
/**
* Enables and disables to show the tooltip of the range at mouse position. When set as false which is the default value, the tooltip will be displayed over the axis line.
*
* @default false
*/
showAtMousePosition: boolean;
}
/**
* Sets and gets the options for customizing the tooltip in linear gauge.
*/
export declare class TooltipSettings extends ChildProperty<TooltipSettings> {
/**
* Enables or disables the visibility of tooltip.
*
* @default false
*/
enable: boolean;
/**
* Sets and gets the color of the tooltip. This property accepts value in hex code, rgba string as a valid CSS color string.
*/
fill: string;
/**
* Sets and gets the options to customize the text in tooltip.
*/
textStyle: FontModel;
/**
* Sets and gets the format of the tooltip content in linear gauge. Use "{value}" as a placeholder
* text to display the corresponding pointer value of in the tooltip.
*
* @default null
*/
format: string;
/**
* Enables and disables to show the tooltip of the pointer at mouse position. When set as false which is the default value, the tooltip will be displayed over the axis line.
*
* @default false
*/
showAtMousePosition: boolean;
/**
* Sets and gets the options to customize the range tooltip.
*/
rangeSettings: RangeTooltipModel;
/**
* Sets and gets the position type to place the tooltip in the axis.
*
* @default End
*/
position: TooltipPosition;
/**
* Sets and gets the custom template to format the tooltip content.
*
* @default null
* @aspType string
*/
template: string | Function;
/**
* Enables or disables the animation for the tooltip while moving from one place to another.
*
* @default true
*/
enableAnimation: boolean;
/**
* Sets and gets the options to customize the border for tooltip.
*/
border: BorderModel;
/**
* Sets and gets the option to display the tooltip for range and pointer.
*
* @default Pointer
*/
type: string[];
}
-455
dist/ts/linear-gauge/model/base.ts
import { Property, ChildProperty, Complex} from '@syncfusion/ej2-base';
import { BorderModel, FontModel, RangeTooltipModel } from '../model/base-model';
import { Placement, ContainerType, TooltipPosition } from '../utils/enum';
/**
* Sets and gets the options for customizing the fonts.
*/
export class Font extends ChildProperty<Font> {
/**
* Sets and gets the size of the font in text.
*/
@Property('16px')
public size: string;
/**
* Sets and gets the font color for text.
*
* @default ''
*/
@Property('')
public color: string;
/**
* Sets and gets the font-family for text.
*/
@Property('Segoe UI')
public fontFamily: string;
/**
* Sets and gets the font weight of the text.
*
* @default 'Regular'
*/
@Property('Regular')
public fontWeight: string;
/**
* Sets and gets the font style for the text.
*
* @default 'Normal'
*/
@Property('Normal')
public fontStyle: string;
/**
* Sets and gets the opacity of the text.
*
* @default 1
*/
@Property(1)
public opacity: number;
}
/**
* Defines the font properties such as font-size, font family and others for the text pointer.
*/
export class TextStyle extends ChildProperty<TextStyle> {
/**
* Defines the font-size of the text pointer.
*/
@Property('16px')
public size: string;
/**
* Defines the font-family of the text pointer. The default value of this property varies based on the `theme` set in the Linear Gauge.
*/
@Property('')
public fontFamily: string;
/**
* Defines the font-weight of the text pointer.
*
* @default 'normal'
*/
@Property('normal')
public fontWeight: string;
/**
* Defines the font-style of the text pointer.
*
* @default 'normal'
*/
@Property('normal')
public fontStyle: string;
}
/**
* Sets and gets the margin for the linear gauge.
*/
export class Margin extends ChildProperty<Margin> {
/**
* Sets and gets the left margin for linear gauge.
*
* @default 10
*/
@Property(10)
public left: number;
/**
* Sets and gets the right margin for linear gauge.
*
* @default 10
*/
@Property(10)
public right: number;
/**
* Sets and gets the top margin for linear gauge.
*
* @default 10
*/
@Property(10)
public top: number;
/**
* Sets and gets the bottom margin for linear gauge.
*
* @default 10
*/
@Property(10)
public bottom: number;
}
/**
* Sets and gets the options to customize the style properties of the border for the linear gauge.
*/
export class Border extends ChildProperty<Border> {
/**
* Sets and gets the color of the border. This property accepts value in hex code, rgba string as a valid CSS color string.
*/
@Property(null)
public color: string;
/**
* Sets and gets the width of the border.
*
* @default 0
*/
@Property(0)
public width: number;
/**
* Sets and gets the dash-array of the border.
*/
@Property('')
public dashArray: string;
}
/**
* Sets and gets the options for customizing the annotation in linear gauge.
*/
export class Annotation extends ChildProperty<Annotation> {
/**
* Sets and gets the content for the annotation.
*
* @default ''
* @aspType string
*/
@Property('')
public content: string | Function;
/**
* Sets and gets the x position for the annotation in linear gauge.
*
* @default 0
*/
@Property(0)
public x: number;
/**
* Sets and gets the y position for the annotation in linear gauge.
*
* @default 0
*/
@Property(0)
public y: number;
/**
* Sets and gets the vertical alignment of annotation.
*
* @default None
*/
@Property('None')
public verticalAlignment: Placement;
/**
* Sets and gets the horizontal alignment of annotation.
*
* @default None
*/
@Property('None')
public horizontalAlignment: Placement;
/**
* Sets and gets the z-index of the annotation.
*
* @default '-1'
*/
@Property('-1')
public zIndex: string;
/**
* Sets and gets the options to customize the font of the annotation in linear gauge.
*/
@Complex<FontModel>({ size: '12px', color: null }, Font)
public font: FontModel;
/**
* Sets and gets the axis index which places the annotation in the specified axis in the linear gauge.
*
* @aspDefaultValueIgnore
* @default null
*/
@Property(null)
public axisIndex: number;
/**
* Sets and gets the value of axis which places the annotation near the specified axis value.
*
* @aspDefaultValueIgnore
* @default null
*/
@Property(null)
public axisValue: number;
}
/**
* Sets and gets the options for customizing the container of linear gauge.
*/
export class Container extends ChildProperty<Container> {
/**
* Sets and gets the type of container in linear gauge.
*
* @default Normal
*/
@Property('Normal')
public type: ContainerType;
/**
* Sets and gets the height of the container in linear gauge.
*
* @default 0
*/
@Property(0)
public height: number;
/**
* Sets and gets the width of the container in linear gauge.
*
* @default 0
*/
@Property(0)
public width: number;
/**
* Sets and gets the corner radius for the rounded rectangle container in linear gauge.
*
* @default 10
*/
@Property(10)
public roundedCornerRadius: number;
/**
* Sets and gets the background color of the container in linear gauge.
*
* @default 'transparent'
*/
@Property('transparent')
public backgroundColor: string;
/**
* Sets and gets the options to customize the border of container.
*/
@Complex<BorderModel>({ width: 1, color: null }, Border)
public border: BorderModel;
/**
* Sets and gets the offset value from where the container must be placed in the linear gauge.
*
* @default 0
*/
@Property(0)
public offset: number;
}
/**
* Sets and gets the options to customize the tooltip for range in axis.
*/
export class RangeTooltip extends ChildProperty<RangeTooltip> {
/**
* Sets and gets the fill color of the range tooltip, which accepts the value in hex code, rgba string as a valid CSS color string.
*
* @default null
*/
@Property(null)
public fill: string;
/**
* Sets and gets the options to customize the tooltip text of range in axis.
*/
@Complex<FontModel>({ size: null, opacity: null, fontFamily: null, fontWeight: null }, Font)
public textStyle: FontModel;
/**
* Sets and gets the format for the tooltip content of the range. Use "{start}" and "{end}" as a placeholder
* text to display the corresponding start and end value of the range in the tooltip.
*
* @default null
*/
@Property(null)
public format: string;
/**
* Sets and gets the custom template to format the tooltip content.
*
* @default null
* @aspType string
*/
@Property(null)
public template: string | Function;
/**
* Enables or disables the animation for the range tooltip when moved from one place to another.
*
* @default true
*/
@Property(true)
public enableAnimation: boolean;
/**
* Sets and gets the options to customize the border for range tooltip.
*/
@Complex<BorderModel>({ color: null, width: null }, Border)
public border: BorderModel;
/**
* Sets and gets the position type to place the tooltip in the axis .
*
* @default End
*/
@Property('End')
public position: TooltipPosition;
/**
* Enables and disables to show the tooltip of the range at mouse position. When set as false which is the default value, the tooltip will be displayed over the axis line.
*
* @default false
*/
@Property(false)
public showAtMousePosition: boolean;
}
/**
* Sets and gets the options for customizing the tooltip in linear gauge.
*/
export class TooltipSettings extends ChildProperty<TooltipSettings> {
/**
* Enables or disables the visibility of tooltip.
*
* @default false
*/
@Property(false)
public enable: boolean;
/**
* Sets and gets the color of the tooltip. This property accepts value in hex code, rgba string as a valid CSS color string.
*/
@Property('')
public fill: string;
/**
* Sets and gets the options to customize the text in tooltip.
*/
@Complex<FontModel>({ color: '', size: null, opacity: null, fontFamily: null, fontWeight: null }, Font)
public textStyle: FontModel;
/**
* Sets and gets the format of the tooltip content in linear gauge. Use "{value}" as a placeholder
* text to display the corresponding pointer value of in the tooltip.
*
* @default null
*/
@Property(null)
public format: string;
/**
* Enables and disables to show the tooltip of the pointer at mouse position. When set as false which is the default value, the tooltip will be displayed over the axis line.
*
* @default false
*/
@Property(false)
public showAtMousePosition: boolean;
/**
* Sets and gets the options to customize the range tooltip.
*/
@Complex<RangeTooltipModel>({}, RangeTooltip)
public rangeSettings: RangeTooltipModel;
/**
* Sets and gets the position type to place the tooltip in the axis.
*
* @default End
*/
@Property('End')
public position: TooltipPosition;
/**
* Sets and gets the custom template to format the tooltip content.
*
* @default null
* @aspType string
*/
@Property(null)
public template: string | Function;
/**
* Enables or disables the animation for the tooltip while moving from one place to another.
*
* @default true
*/
@Property(true)
public enableAnimation: boolean;
/**
* Sets and gets the options to customize the border for tooltip.
*/
@Complex<BorderModel>({ color: null, width: null }, Border)
public border: BorderModel;
/**
* Sets and gets the option to display the tooltip for range and pointer.
*
* @default Pointer
*/
@Property('Pointer')
public type: string[];
}
-35
dist/ts/linear-gauge/model/constant.d.ts
/**
* Specifies the linear gauge constant value
*/
/** @private */
export declare const loaded: string;
/** @private */
export declare const load: string;
/** @private */
export declare const animationComplete: string;
/** @private */
export declare const axisLabelRender: string;
/** @private */
export declare const tooltipRender: string;
/** @private */
export declare const annotationRender: string;
/** @private */
export declare const gaugeMouseMove: string;
/** @private */
export declare const gaugeMouseLeave: string;
/** @private */
export declare const gaugeMouseDown: string;
/** @private */
export declare const gaugeMouseUp: string;
/** @private */
export declare const dragStart: string;
/** @private */
export declare const dragMove: string;
/** @private */
export declare const dragEnd: string;
/** @private */
export declare const valueChange: string;
/** @private */
export declare const resized: string;
/** @private */
export declare const beforePrint: string;
-52
dist/ts/linear-gauge/model/constant.ts
/**
* Specifies the linear gauge constant value
*/
/** @private */
export const loaded: string = 'loaded';
/** @private */
export const load: string = 'load';
/** @private */
export const animationComplete: string = 'animationComplete';
/** @private */
export const axisLabelRender: string = 'axisLabelRender';
/** @private */
export const tooltipRender: string = 'tooltipRender';
/** @private */
export const annotationRender: string = 'annotationRender';
/** @private */
export const gaugeMouseMove: string = 'gaugeMouseMove';
/** @private */
export const gaugeMouseLeave: string = 'gaugeMouseLeave';
/** @private */
export const gaugeMouseDown: string = 'gaugeMouseDown';
/** @private */
export const gaugeMouseUp: string = 'gaugeMouseUp';
/** @private */
export const dragStart : string = 'dragStart';
/** @private */
export const dragMove : string = 'dragMove';
/** @private */
export const dragEnd : string = 'dragEnd';
/** @private */
export const valueChange: string = 'valueChange';
/** @private */
export const resized: string = 'resized';
/** @private */
export const beforePrint: string = 'beforePrint';
-34
dist/ts/linear-gauge/model/image-export.d.ts
import { LinearGauge } from '../../index';
import { ExportType } from '../utils/enum';
/**
* Represent the print and export for gauge.
*
* @hidden
*/
export declare class ImageExport {
/**
* Constructor for gauge
*
* @param {LinearGauge} control - Specifies the Linear Gauge instance.
*/
constructor(control: LinearGauge);
/**
* To export the file as image/svg format
*
* @param type
* @param fileName
* @private
*/
export(gauge: LinearGauge, type: ExportType, fileName: string, allowDownload?: boolean): Promise<string>;
/**
* Get module name.
*/
protected getModuleName(): string;
/**
* To destroy the ImageExport.
*
* @return {void}
* @private
*/
destroy(): void;
}
-115
dist/ts/linear-gauge/model/image-export.ts
import { createElement, Browser } from '@syncfusion/ej2-base';
import { LinearGauge} from '../../index';
import { triggerDownload } from '../utils/helper';
import { ExportType } from '../utils/enum';
/**
* Represent the print and export for gauge.
*
* @hidden
*/
export class ImageExport {
/**
* Constructor for gauge
*
* @param {LinearGauge} control - Specifies the Linear Gauge instance.
*/
// eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
constructor(control: LinearGauge) {
}
/**
* To export the file as image/svg format
*
* @param type
* @param fileName
* @private
*/
public export(gauge: LinearGauge, type: ExportType, fileName: string, allowDownload?: boolean): Promise<string> {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const promise: Promise<string> = new Promise((resolve: any) => {
const element: HTMLCanvasElement = <HTMLCanvasElement>createElement('canvas', {
id: 'ej2-canvas',
attrs: {
'width': gauge.availableSize.width.toString(),
'height': gauge.availableSize.height.toString()
}
});
const exportElement: HTMLElement = gauge.svgObject.cloneNode(true) as HTMLElement;
const backgroundElement: HTMLElement = exportElement.childNodes[0] as HTMLElement;
const backgroundColor: string = backgroundElement.getAttribute('fill');
if ((gauge.theme === 'Tailwind' || gauge.theme === 'Tailwind3' || gauge.theme === 'Bootstrap5' || gauge.theme === 'Fluent' || gauge.theme === 'Material3' ||
gauge.theme === 'Fluent2')
&& (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
(exportElement.childNodes[0] as HTMLElement).setAttribute('fill', 'rgba(255,255,255, 1)');
} else if ((gauge.theme === 'TailwindDark' || gauge.theme === 'Tailwind3Dark' || gauge.theme === 'Bootstrap5Dark' || gauge.theme === 'FluentDark' || gauge.theme === 'Material3Dark' ||
gauge.theme === 'Fluent2Dark' || gauge.theme === 'Fluent2HighContrast')
&& (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
(exportElement.childNodes[0] as HTMLElement).setAttribute('fill', 'rgba(0, 0, 0, 1)');
}
const isDownload: boolean = !(Browser.userAgent.toString().indexOf('HeadlessChrome') > -1);
const svgData: string = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' +
exportElement.outerHTML +
'</svg>';
const url: string = window.URL.createObjectURL(
new Blob(
type === 'SVG' ? [svgData] :
[(new XMLSerializer()).serializeToString(exportElement)],
{ type: 'image/svg+xml' }
)
);
if (type === 'SVG') {
if (allowDownload) {
triggerDownload(
fileName, type,
url, isDownload
);
} else {
resolve(null);
}
} else {
const image: HTMLImageElement = new Image();
const context: CanvasRenderingContext2D = element.getContext('2d');
image.onload = (() => {
context.drawImage(image, 0, 0);
window.URL.revokeObjectURL(url);
if (allowDownload) {
triggerDownload(
fileName, type,
element.toDataURL('image/png').replace('image/png', 'image/octet-stream'),
isDownload
);
} else {
if (type === 'JPEG') {
resolve(element.toDataURL('image/jpeg'));
} else if (type === 'PNG') {
resolve(element.toDataURL('image/png'));
}
}
});
image.src = url;
}
});
return promise;
}
/**
* Get module name.
*/
protected getModuleName(): string {
return 'ImageExport';
}
/**
* To destroy the ImageExport.
*
* @return {void}
* @private
*/
// eslint-disable-next-line @typescript-eslint/no-empty-function
public destroy(): void {
}
}
-356
dist/ts/linear-gauge/model/interface.d.ts
import { LinearGauge } from '../linear-gauge';
import { Axis, Pointer } from '../axes/axis';
import { Annotation, TooltipSettings } from '../model/base';
import { FontModel } from '../model/base-model';
import { Size, GaugeLocation } from '../utils/helper';
/**
* Specifies the event arguments of linear gauge.
*
* @private
*/
export interface ILinearGaugeEventArgs {
/**
* Specifies the name of the event.
*/
name: string;
/**
* Specifies the cancel state for the event. The default value is false. If set as true, the event progress will be stopped.
*/
cancel: boolean;
}
/**
* Specifies the event arguments for print event in linear gauge.
*/
export interface IPrintEventArgs extends ILinearGaugeEventArgs {
/**
* Specifies the html content that is printed. The html content returned is usually the id string of the linear gauge.
*/
htmlContent: Element;
}
/**
* Specifies the event arguments for loaded event in linear gauge.
*/
export interface ILoadedEventArgs extends ILinearGaugeEventArgs {
/**
* Specifies the instance of linear gauge.
*/
gauge: LinearGauge;
}
/**
* Specifies the event arguments for load event in linear gauge.
*/
export interface ILoadEventArgs extends ILinearGaugeEventArgs {
/**
* Specifies the instance of linear gauge.
*/
gauge: LinearGauge;
}
/**
* Specifies the event arguments for animation completed event in linear gauge.
*/
export interface IAnimationCompleteEventArgs extends ILinearGaugeEventArgs {
/**
* Specifies the instance of axis in linear gauge.
*/
axis: Axis;
/**
* Specifies the instance of pointer in linear gauge.
*/
pointer: Pointer;
}
/**
* Specifies the event arguments for axis label rendering event in linear gauge.
*/
export interface IAxisLabelRenderEventArgs extends ILinearGaugeEventArgs {
/**
* Specifies the instance of axis in linear gauge.
*/
axis: Axis;
/**
* Specifies the text of the axis label.
*/
text: string;
/**
* Specifies the axis value of the axis label.
*/
value: number;
}
/**
* Specifies the event arguments for tooltip event in linear gauge.
*/
export interface ITooltipRenderEventArgs extends ILinearGaugeEventArgs {
/**
* Specifies the instance of linear gauge.
*/
gauge: LinearGauge;
/**
* Specifies the mouse pointer event.
*/
event: PointerEvent;
/**
* Specifies the content for the tooltip.
*/
content?: string;
/**
* Specifies the options to customize the tooltip.
*/
tooltip?: TooltipSettings;
/**
* Specifies the location of the tooltip in linear gauge.
*/
location?: GaugeLocation;
/**
* Specifies the instance of axis.
*/
axis: Axis;
/**
* Specifies the instance of pointer.
*/
pointer: Pointer;
}
/**
* Specifies the event arguments for annotation render event in linear gauge.
*/
export interface IAnnotationRenderEventArgs extends ILinearGaugeEventArgs {
/**
* Specifies the content for the annotation.
*/
content?: string | Function;
/**
* Specifies the options to customize the text in annotation.
*/
textStyle?: FontModel;
/**
* Specifies the instance of annotation.
*/
annotation: Annotation;
}
/**
* Specifies the event arguments for mouse events in linear gauge.
*/
export interface IMouseEventArgs extends ILinearGaugeEventArgs {
/**
* Specifies the instance of linear gauge.
*/
model?: LinearGauge;
/**
* Specifies the target element on which the mouse operation is performed.
*/
target: Element;
/**
* Specifies the x position of the mouse event.
*/
x: number;
/**
* Specifies the y position of the mouse event.
*/
y: number;
}
/**
* Specifies the event arguments for pointer drag event in linear gauge.
*/
export interface IPointerDragEventArgs {
/**
* Specifies the name of the event.
*/
name: string;
/**
* Specifies the axis instance in linear gauge.
*/
axis?: Axis;
/**
* Specifies the pointer instance in linear gauge.
*/
pointer?: Pointer;
/**
* Specifies the value of the pointer after dragging the pointer.
*/
currentValue: number;
/**
* Specifies the value of the pointer before dragging the pointer.
*/
previousValue?: number;
/**
* Specifies the index value of the pointer that is dragged in linear gauge.
*/
pointerIndex: number;
/**
* Specifies the index value of the axis on which the pointer is dragged.
*/
axisIndex: number;
}
/**
* Specifies the event arguments for resize event in linear gauge.
*/
export interface IResizeEventArgs {
/**
* Specifies the name of the event.
*/
name: string;
/**
* Specifies the size of the linear gauge before resizing.
*/
previousSize: Size;
/**
* Specifies the size of the linear gauge after resizing.
*/
currentSize: Size;
/**
* Specifies the instance of linear gauge.
*/
gauge: LinearGauge;
/**
* Specifies whether to cancel the resize event or not. The default value is false. If set to true, the event will be halted.
*/
cancel: boolean;
}
/**
* Specifies the event arguments for value change event in linear gauge.
*/
export interface IValueChangeEventArgs {
/**
* Specifies the name of the event.
*/
name: string;
/**
* Specifies the instance of the linear gauge.
*/
gauge?: LinearGauge;
/**
* Specifies the element of the linear gauge.
*/
element: Element;
/**
* specifies the index value of the current axis in which the pointer value is changed.
*/
axisIndex: number;
/**
* Specifies the axis instance of linear gauge.
*/
axis?: Axis;
/**
* Specifies the current index of the pointer in which the pointer value is changed.
*/
pointerIndex: number;
/**
* Specifies the pointer instance of linear gauge in which the pointer value is changed.
*/
pointer?: Pointer;
/**
* Specifies the current value.
*/
value: number;
}
/** @private */
export interface IVisiblePointer {
axis?: Axis;
axisIndex?: number;
pointer?: Pointer;
pointerIndex?: number;
}
/** @private */
export interface IMoveCursor {
pointer?: boolean;
style?: string;
}
/**
* Specifies the theme style for linear gauge.
*/
export interface IThemeStyle {
/**
* Specifies the background color of linear gauge.
*/
backgroundColor: string;
/**
* Specifies the text color for the title in the linear gauge.
*/
titleFontColor: string;
/**
* Specifies the font style for the title in the linear gauge.
*/
titleFontStyle: string;
/**
* Specifies the font weight for the title in the linear gauge.
*/
titleFontWeight: string;
/**
* Specifies the font size for the title in the linear gauge.
*/
titleFontSize: string;
/**
* Specifies the fill color for the tooltip in the linear gauge.
*/
tooltipFillColor: string;
/**
* Specifies the font color for the tooltip in the linear gauge.
*/
tooltipFontColor: string;
/**
* Specifies the font size for the tooltip in the linear gauge.
*/
tooltipFontSize: string;
/**
* Specifies the color of the axis line in the linear gauge.
*/
lineColor: string;
/**
* Specifies the color of the label in the linear gage.
*/
labelColor: string;
/**
* Specifies the font weight of the label in the linear gage.
*/
labelWeight: string;
/**
* Specifies the font style of the label in the linear gage.
*/
labelStyle: string;
/**
* Specifies the color for major ticks in the linear gauge.
*/
majorTickColor: string;
/**
* Specifies the color for minor ticks in the linear gauge.
*/
minorTickColor: string;
/**
* Specifies the color for the linear gauge pointer.
*/
pointerColor: string;
/**
* Specifies the font family of the text contents in linear gauge.
*/
fontFamily?: string;
/**
* Specifies the font size of the text contents in linear gauge.
*/
fontSize?: string;
/**
* Specifies the font family of the labels.
*/
labelFontFamily?: string;
/**
* Specifies the opacity of the tooltip.
*/
tooltipFillOpacity?: number;
/**
* Specifies the opacity of text content of the tooltip.
*/
tooltipTextOpacity?: number;
/**
* Specifies the background color of the container.
*/
containerBackground?: string;
/**
* Specifies the border color of the container.
*/
containerBorderColor?: string;
/**
* Specifies the border color of the tooltip.
*/
tooltipBorderColor?: string;
/**
* Specifies the border width of the tooltip.
*/
tooltipBorderWidth?: number;
}
-372
dist/ts/linear-gauge/model/interface.ts
import { LinearGauge } from '../linear-gauge';
import { Axis, Pointer } from '../axes/axis';
import { Annotation, TooltipSettings } from '../model/base';
import { FontModel } from '../model/base-model';
import { Size, GaugeLocation } from '../utils/helper';
/**
* Specifies the event arguments of linear gauge.
*
* @private
*/
export interface ILinearGaugeEventArgs {
/**
* Specifies the name of the event.
*/
name: string;
/**
* Specifies the cancel state for the event. The default value is false. If set as true, the event progress will be stopped.
*/
cancel: boolean;
}
/**
* Specifies the event arguments for print event in linear gauge.
*/
export interface IPrintEventArgs extends ILinearGaugeEventArgs {
/**
* Specifies the html content that is printed. The html content returned is usually the id string of the linear gauge.
*/
htmlContent: Element;
}
/**
* Specifies the event arguments for loaded event in linear gauge.
*/
export interface ILoadedEventArgs extends ILinearGaugeEventArgs {
/**
* Specifies the instance of linear gauge.
*/
gauge: LinearGauge;
}
/**
* Specifies the event arguments for load event in linear gauge.
*/
export interface ILoadEventArgs extends ILinearGaugeEventArgs {
/**
* Specifies the instance of linear gauge.
*/
gauge: LinearGauge;
}
/**
* Specifies the event arguments for animation completed event in linear gauge.
*/
export interface IAnimationCompleteEventArgs extends ILinearGaugeEventArgs {
/**
* Specifies the instance of axis in linear gauge.
*/
axis: Axis;
/**
* Specifies the instance of pointer in linear gauge.
*/
pointer: Pointer;
}
/**
* Specifies the event arguments for axis label rendering event in linear gauge.
*/
export interface IAxisLabelRenderEventArgs extends ILinearGaugeEventArgs {
/**
* Specifies the instance of axis in linear gauge.
*/
axis: Axis;
/**
* Specifies the text of the axis label.
*/
text: string;
/**
* Specifies the axis value of the axis label.
*/
value: number;
}
/**
* Specifies the event arguments for tooltip event in linear gauge.
*/
export interface ITooltipRenderEventArgs extends ILinearGaugeEventArgs {
/**
* Specifies the instance of linear gauge.
*/
gauge: LinearGauge;
/**
* Specifies the mouse pointer event.
*/
event: PointerEvent;
/**
* Specifies the content for the tooltip.
*/
content?: string;
/**
* Specifies the options to customize the tooltip.
*/
tooltip?: TooltipSettings;
/**
* Specifies the location of the tooltip in linear gauge.
*/
location?: GaugeLocation;
/**
* Specifies the instance of axis.
*/
axis: Axis;
/**
* Specifies the instance of pointer.
*/
pointer: Pointer;
}
/**
* Specifies the event arguments for annotation render event in linear gauge.
*/
export interface IAnnotationRenderEventArgs extends ILinearGaugeEventArgs {
/**
* Specifies the content for the annotation.
*/
content?: string | Function;
/**
* Specifies the options to customize the text in annotation.
*/
textStyle?: FontModel;
/**
* Specifies the instance of annotation.
*/
annotation: Annotation;
}
/**
* Specifies the event arguments for mouse events in linear gauge.
*/
export interface IMouseEventArgs extends ILinearGaugeEventArgs {
/**
* Specifies the instance of linear gauge.
*/
model?: LinearGauge;
/**
* Specifies the target element on which the mouse operation is performed.
*/
target: Element;
/**
* Specifies the x position of the mouse event.
*/
x: number;
/**
* Specifies the y position of the mouse event.
*/
y: number;
}
/**
* Specifies the event arguments for pointer drag event in linear gauge.
*/
export interface IPointerDragEventArgs {
/**
* Specifies the name of the event.
*/
name: string;
/**
* Specifies the axis instance in linear gauge.
*/
axis?: Axis;
/**
* Specifies the pointer instance in linear gauge.
*/
pointer?: Pointer;
/**
* Specifies the value of the pointer after dragging the pointer.
*/
currentValue: number;
/**
* Specifies the value of the pointer before dragging the pointer.
*/
previousValue?: number;
/**
* Specifies the index value of the pointer that is dragged in linear gauge.
*/
pointerIndex: number;
/**
* Specifies the index value of the axis on which the pointer is dragged.
*/
axisIndex: number;
}
/**
* Specifies the event arguments for resize event in linear gauge.
*/
export interface IResizeEventArgs {
/**
* Specifies the name of the event.
*/
name: string;
/**
* Specifies the size of the linear gauge before resizing.
*/
previousSize: Size;
/**
* Specifies the size of the linear gauge after resizing.
*/
currentSize: Size;
/**
* Specifies the instance of linear gauge.
*/
gauge: LinearGauge;
/**
* Specifies whether to cancel the resize event or not. The default value is false. If set to true, the event will be halted.
*/
cancel: boolean;
}
/**
* Specifies the event arguments for value change event in linear gauge.
*/
export interface IValueChangeEventArgs {
/**
* Specifies the name of the event.
*/
name: string;
/**
* Specifies the instance of the linear gauge.
*/
gauge?: LinearGauge;
/**
* Specifies the element of the linear gauge.
*/
element: Element;
/**
* specifies the index value of the current axis in which the pointer value is changed.
*/
axisIndex: number;
/**
* Specifies the axis instance of linear gauge.
*/
axis?: Axis;
/**
* Specifies the current index of the pointer in which the pointer value is changed.
*/
pointerIndex: number;
/**
* Specifies the pointer instance of linear gauge in which the pointer value is changed.
*/
pointer?: Pointer;
/**
* Specifies the current value.
*/
value: number;
}
/** @private */
export interface IVisiblePointer {
axis?: Axis;
axisIndex?: number;
pointer?: Pointer;
pointerIndex?: number;
}
/** @private */
export interface IMoveCursor {
pointer?: boolean;
style?: string;
}
/**
* Specifies the theme style for linear gauge.
*/
export interface IThemeStyle {
/**
* Specifies the background color of linear gauge.
*/
backgroundColor: string;
/**
* Specifies the text color for the title in the linear gauge.
*/
titleFontColor: string;
/**
* Specifies the font style for the title in the linear gauge.
*/
titleFontStyle: string;
/**
* Specifies the font weight for the title in the linear gauge.
*/
titleFontWeight: string;
/**
* Specifies the font size for the title in the linear gauge.
*/
titleFontSize: string;
/**
* Specifies the fill color for the tooltip in the linear gauge.
*/
tooltipFillColor: string;
/**
* Specifies the font color for the tooltip in the linear gauge.
*/
tooltipFontColor: string;
/**
* Specifies the font size for the tooltip in the linear gauge.
*/
tooltipFontSize: string;
/**
* Specifies the color of the axis line in the linear gauge.
*/
lineColor: string;
/**
* Specifies the color of the label in the linear gage.
*/
labelColor: string;
/**
* Specifies the font weight of the label in the linear gage.
*/
labelWeight: string;
/**
* Specifies the font style of the label in the linear gage.
*/
labelStyle: string;
/**
* Specifies the color for major ticks in the linear gauge.
*/
majorTickColor: string;
/**
* Specifies the color for minor ticks in the linear gauge.
*/
minorTickColor: string;
/**
* Specifies the color for the linear gauge pointer.
*/
pointerColor: string;
/**
* Specifies the font family of the text contents in linear gauge.
*/
fontFamily?: string;
/**
* Specifies the font size of the text contents in linear gauge.
*/
fontSize?: string;
/**
* Specifies the font family of the labels.
*/
labelFontFamily?: string;
/**
* Specifies the opacity of the tooltip.
*/
tooltipFillOpacity?: number;
/**
* Specifies the opacity of text content of the tooltip.
*/
tooltipTextOpacity?: number;
/**
* Specifies the background color of the container.
*/
containerBackground?: string;
/**
* Specifies the border color of the container.
*/
containerBorderColor?: string;
/**
* Specifies the border color of the tooltip.
*/
tooltipBorderColor?: string;
/**
* Specifies the border width of the tooltip.
*/
tooltipBorderWidth?: number;
}
-39
dist/ts/linear-gauge/model/pdf-export.d.ts
import { LinearGauge } from '../../index';
import { ExportType } from '../utils/enum';
import { PdfPageOrientation } from '@syncfusion/ej2-pdf-export';
/**
* Represent the print and export for gauge.
*
* @hidden
*/
export declare class PdfExport {
/**
* Constructor for gauge
*
* @param {LinearGauge} control - Specifies the Linear Gauge instance.
*/
constructor(control: LinearGauge);
/**
* To export the file as pdf format
*
* @param {LinearGauge} gauge - Specifies the Linear Gauge instance.
* @param {ExportType} type - Specifies the extension type of the file to which the Linear Gauge to be exported.
* @param {string} fileName - Specifies the name of the file.
* @param {PdfPageOrientation} orientation - Specifies the orientation of the PDF document to export the gauge.
* @param {boolean} allowDownload - Specifies whether the exported file should be downloaded or not.
* @returns {Promise<string>} Returns the promise string
* @private
*/
export(gauge: LinearGauge, type: ExportType, fileName: string, orientation?: PdfPageOrientation, allowDownload?: boolean): Promise<string>;
/**
* Get module name.
*/
protected getModuleName(): string;
/**
* To destroy the PdfExport.
*
* @return {void}
* @private
*/
destroy(): void;
}
-109
dist/ts/linear-gauge/model/pdf-export.ts
import { createElement, isNullOrUndefined } from '@syncfusion/ej2-base';
import { LinearGauge} from '../../index';
import { ExportType } from '../utils/enum';
import { PdfPageOrientation, PdfDocument, PdfBitmap } from '@syncfusion/ej2-pdf-export';
/**
* Represent the print and export for gauge.
*
* @hidden
*/
export class PdfExport {
/**
* Constructor for gauge
*
* @param {LinearGauge} control - Specifies the Linear Gauge instance.
*/
// eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
constructor(control: LinearGauge) {
}
/**
* To export the file as pdf format
*
* @param {LinearGauge} gauge - Specifies the Linear Gauge instance.
* @param {ExportType} type - Specifies the extension type of the file to which the Linear Gauge to be exported.
* @param {string} fileName - Specifies the name of the file.
* @param {PdfPageOrientation} orientation - Specifies the orientation of the PDF document to export the gauge.
* @param {boolean} allowDownload - Specifies whether the exported file should be downloaded or not.
* @returns {Promise<string>} Returns the promise string
* @private
*/
public export(gauge: LinearGauge, type: ExportType, fileName: string, orientation?: PdfPageOrientation,
allowDownload?: boolean): Promise<string> {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const promise: Promise<string> = new Promise((resolve: any) => {
const canvasElement: HTMLCanvasElement = <HTMLCanvasElement>createElement('canvas', {
id: 'ej2-canvas',
attrs: {
'width': gauge.availableSize.width.toString(),
'height': gauge.availableSize.height.toString()
}
});
orientation = isNullOrUndefined(orientation) ? PdfPageOrientation.Landscape : orientation;
const svgData: string = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' +
gauge.svgObject.outerHTML +
'</svg>';
const exportElement: HTMLElement = gauge.svgObject.cloneNode(true) as HTMLElement;
const backgroundElement: HTMLElement = exportElement.childNodes[0] as HTMLElement;
const backgroundColor: string = backgroundElement.getAttribute('fill');
if ((gauge.theme === 'Tailwind' || gauge.theme === 'Tailwind3' || gauge.theme === 'Bootstrap5' || gauge.theme === 'Fluent' || gauge.theme === 'Material3' ||
gauge.theme === 'Fluent2')
&& (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
(exportElement.childNodes[0] as HTMLElement).setAttribute('fill', 'rgba(255,255,255, 1)');
} else if ((gauge.theme === 'TailwindDark' || gauge.theme === 'Tailwind3Dark' || gauge.theme === 'Bootstrap5Dark' || gauge.theme === 'FluentDark' || gauge.theme === 'Material3Dark' ||
gauge.theme === 'Fluent2Dark' || gauge.theme === 'Fluent2HighContrast')
&& (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
(exportElement.childNodes[0] as HTMLElement).setAttribute('fill', 'rgba(0, 0, 0, 1)');
}
const url: string = window.URL.createObjectURL(
new Blob(
type === 'SVG' ? [svgData] :
[(new XMLSerializer()).serializeToString(exportElement)],
{ type: 'image/svg+xml' }
)
);
const image: HTMLImageElement = new Image();
const context: CanvasRenderingContext2D = canvasElement.getContext('2d');
image.onload = (() => {
context.drawImage(image, 0, 0);
window.URL.revokeObjectURL(url);
const document: PdfDocument = new PdfDocument();
let imageString: string = canvasElement.toDataURL('image/jpeg').replace('image/jpeg', 'image/octet-stream');
document.pageSettings.orientation = orientation;
imageString = imageString.slice(imageString.indexOf(',') + 1);
document.pages.add().graphics.drawImage(
new PdfBitmap(imageString), 0, 0, (gauge.availableSize.width - 60), gauge.availableSize.height
);
if (allowDownload) {
document.save(fileName + '.pdf');
document.destroy();
} else {
resolve (null);
}
});
image.src = url;
});
return promise;
}
/**
* Get module name.
*/
protected getModuleName(): string {
return 'PdfExport';
}
/**
* To destroy the PdfExport.
*
* @return {void}
* @private
*/
// eslint-disable-next-line @typescript-eslint/no-empty-function
public destroy(): void {
}
}
-39
dist/ts/linear-gauge/model/print.d.ts
import { LinearGauge } from '../../index';
/**
* Represent the print and export for gauge.
*
* @hidden
*/
export declare class Print {
/**
* Constructor for gauge
*
* @param {LinearGauge} control - Specifies the linear gauge instance.
*/
constructor(control: LinearGauge);
/**
* To print the gauge
*
* @param elements
* @private
*/
print(gauge: LinearGauge, elements?: string[] | string | Element): void;
/**
* To get the html string of the gauge
*
* @param elements
* @private
*/
private getHTMLContent;
/**
* Get module name.
*/
protected getModuleName(): string;
/**
* To destroy the print.
*
* @return {void}
* @private
*/
destroy(): void;
}
-107
dist/ts/linear-gauge/model/print.ts
import { print as printFunction, createElement, isNullOrUndefined } from '@syncfusion/ej2-base';
import { LinearGauge } from '../../index';
import { getElement } from '../utils/helper';
import { IPrintEventArgs } from '../model/interface';
import { beforePrint } from '../model/constant';
/**
* Represent the print and export for gauge.
*
* @hidden
*/
export class Print {
/**
* Constructor for gauge
*
* @param {LinearGauge} control - Specifies the linear gauge instance.
*/
// eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
constructor(control: LinearGauge) {
}
/**
* To print the gauge
*
* @param elements
* @private
*/
public print(gauge: LinearGauge, elements?: string[] | string | Element): void {
const printWindow: Window = window.open('', 'print', 'height=' + window.outerHeight + ',width=' + window.outerWidth + ',tabbar=no');
printWindow.moveTo(0, 0);
printWindow.resizeTo(screen.availWidth, screen.availHeight);
const argsData: IPrintEventArgs = {
cancel: false, htmlContent: this.getHTMLContent(gauge, elements), name: beforePrint
};
gauge.trigger('beforePrint', argsData, () => {
if (!argsData.cancel) {
printFunction(argsData.htmlContent, printWindow);
}
});
}
/**
* To get the html string of the gauge
*
* @param elements
* @private
*/
private getHTMLContent(gauge: LinearGauge, elements?: string[] | string | Element): Element {
const div: Element = createElement('div');
if (elements) {
if (elements instanceof Array) {
elements.forEach((value: string) => {
div.appendChild(getElement(value).cloneNode(true) as Element);
});
} else if (elements instanceof Element) {
div.appendChild(elements.cloneNode(true) as Element);
} else {
div.appendChild(getElement(elements).cloneNode(true) as Element);
}
} else {
const exportElement: HTMLElement = gauge.element.cloneNode(true) as HTMLElement;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
let backgroundElement: HTMLElement = (exportElement.getElementsByTagName('svg')[0] as any) as HTMLElement;
if (!isNullOrUndefined(backgroundElement)) {
backgroundElement = backgroundElement.childNodes[0] as HTMLElement;
if (!isNullOrUndefined(backgroundElement)) {
const backgroundColor: string = backgroundElement.getAttribute('fill');
if ((gauge.theme === 'Tailwind' || gauge.theme === 'Tailwind3' || gauge.theme === 'Bootstrap5' || gauge.theme === 'Fluent' || gauge.theme === 'Material3' ||
gauge.theme === 'Fluent2')
&& (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
backgroundElement.setAttribute('fill', 'rgba(255,255,255, 1)');
} else if ((gauge.theme === 'TailwindDark' || gauge.theme === 'Tailwind3Dark' || gauge.theme === 'Bootstrap5Dark' || gauge.theme === 'FluentDark' || gauge.theme === 'Material3Dark' ||
gauge.theme === 'Fluent2Dark' || gauge.theme === 'Fluent2HighContrast')
&& (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
backgroundElement.setAttribute('fill', 'rgba(0, 0, 0, 1)');
}
if (backgroundElement.getAttribute('stroke') === '') {
backgroundElement.setAttribute('stroke', 'transparent');
}
}
}
div.appendChild(exportElement as Element);
}
return div;
}
/**
* Get module name.
*/
protected getModuleName(): string {
return 'Print';
}
/**
* To destroy the print.
*
* @return {void}
* @private
*/
// eslint-disable-next-line @typescript-eslint/no-empty-function
public destroy(): void {
}
}
-12
dist/ts/linear-gauge/model/theme.d.ts
/**
* Gauge Themes doc
*/
import { IThemeStyle } from './interface';
import { LinearGaugeTheme } from '../utils/enum';
/**
*
* @param {LinearGaugeTheme} theme - Specifies the gauge instance.
* @returns {IThemeStyle} - Return the theme style argument.
* @private
*/
export declare function getThemeStyle(theme: LinearGaugeTheme): IThemeStyle;
-452
dist/ts/linear-gauge/model/theme.ts
/**
* Gauge Themes doc
*/
import { IThemeStyle } from './interface';
import { LinearGaugeTheme } from '../utils/enum';
/**
*
* @param {LinearGaugeTheme} theme - Specifies the gauge instance.
* @returns {IThemeStyle} - Return the theme style argument.
* @private
*/
export function getThemeStyle(theme: LinearGaugeTheme): IThemeStyle {
let style: IThemeStyle;
switch (theme.toLowerCase()) {
case 'materialdark':
case 'fabricdark':
case 'bootstrapdark':
style = {
backgroundColor: '#333232',
titleFontColor: '#ffffff',
titleFontSize: '15px',
tooltipFillColor: '#FFFFFF',
tooltipFontColor: '#000000',
tooltipFontSize: '13px',
labelColor: '#DADADA',
lineColor: '#C8C8C8',
majorTickColor: '#C8C8C8',
minorTickColor: '#9A9A9A',
pointerColor: '#9A9A9A',
titleFontStyle: 'Normal',
titleFontWeight: 'Normal',
labelStyle: 'Normal',
labelWeight: 'Normal',
containerBorderColor: '#bfbfbf',
fontFamily: 'Segoe UI',
labelFontFamily: 'Segoe UI'
};
break;
case 'highcontrast':
style = {
backgroundColor: '#000000',
titleFontColor: '#FFFFFF',
titleFontSize: '15px',
tooltipFillColor: '#ffffff',
tooltipFontColor: '#000000',
tooltipFontSize: '13px',
labelColor: '#FFFFFF',
lineColor: '#FFFFFF',
majorTickColor: '#FFFFFF',
minorTickColor: '#FFFFFF',
pointerColor: '#FFFFFF',
titleFontStyle: 'Normal',
titleFontWeight: 'Normal',
labelStyle: 'Normal',
labelWeight: 'Normal',
containerBorderColor: '#bfbfbf',
fontFamily: 'Segoe UI',
labelFontFamily: 'Segoe UI'
};
break;
case 'bootstrap4':
style = {
backgroundColor: '#FFFFFF',
titleFontColor: '#212529',
titleFontSize: '15px',
tooltipFillColor: '#000000',
tooltipFontColor: '#FFFFFF',
tooltipFontSize: '13px',
labelColor: '#212529',
lineColor: '#ADB5BD',
majorTickColor: '#ADB5BD',
minorTickColor: '#CED4DA',
pointerColor: '#6C757D',
fontFamily: 'HelveticaNeue-Medium',
fontSize: '16px',
labelFontFamily: 'HelveticaNeue',
tooltipFillOpacity: 1,
tooltipTextOpacity: 0.9,
containerBackground: '#F8F9FA',
titleFontStyle: 'Normal',
titleFontWeight: 'Normal',
labelStyle: 'Normal',
labelWeight: 'Normal',
containerBorderColor: '#bfbfbf'
};
break;
case 'tailwind':
style = {
backgroundColor: 'rgba(255,255,255, 0.0)',
titleFontColor: '#374151',
titleFontSize: '15px',
tooltipFillColor: '#111827',
tooltipFontColor: '#F9FAFB',
tooltipFontSize: '13px',
labelColor: '#6B7280',
lineColor: '#E5E7EB',
majorTickColor: '#9CA3AF',
minorTickColor: '#9CA3AF',
pointerColor: '#1F2937',
fontFamily: 'Inter',
fontSize: '14px',
labelFontFamily: 'Inter',
tooltipFillOpacity: 1,
tooltipTextOpacity: 0.9,
containerBackground: 'rgba(255,255,255, 0.0)',
titleFontStyle: 'Normal',
titleFontWeight: '500',
labelStyle: 'Normal',
labelWeight: 'Normal',
containerBorderColor: '#E5E7EB'
};
break;
case 'tailwinddark':
style = {
backgroundColor: 'rgba(255,255,255, 0.0)',
titleFontColor: '#D1D5DB',
titleFontSize: '15px',
tooltipFillColor: '#F9FAFB',
tooltipFontColor: '#1F2937',
tooltipFontSize: '13px',
labelColor: '#9CA3AF',
lineColor: '#374151',
majorTickColor: '#6B7280',
minorTickColor: '#6B7280',
pointerColor: '#9CA3AF',
fontFamily: 'Inter',
fontSize: '14px',
labelFontFamily: 'Inter',
tooltipFillOpacity: 1,
tooltipTextOpacity: 0.9,
containerBackground: 'rgba(255,255,255, 0.0)',
titleFontStyle: 'Normal',
titleFontWeight: '500',
labelStyle: 'Normal',
labelWeight: 'Normal',
containerBorderColor: '#4b5563'
};
break;
case 'tailwind3':
style = {
backgroundColor: 'rgba(255,255,255, 0.0)',
titleFontColor: '#111827',
titleFontSize: '14px',
tooltipFillColor: '#111827',
tooltipFontColor: '#F9FAFB',
tooltipFontSize: '12px',
labelColor: '#4B5563',
lineColor: '#E5E7EB',
majorTickColor: '#D1D5DB',
minorTickColor: '#D1D5DB',
pointerColor: '#1F2937',
fontFamily: 'Inter',
fontSize: '14px',
labelFontFamily: 'Inter',
tooltipFillOpacity: 1,
tooltipTextOpacity: 1,
containerBackground: '#E5E7EB',
titleFontStyle: 'Normal',
titleFontWeight: '600',
labelStyle: 'Normal',
labelWeight: '400',
containerBorderColor: '#E5E7EB'
};
break;
case 'tailwind3dark':
style = {
backgroundColor: 'rgba(255,255,255, 0.0)',
titleFontColor: '#FFFFFF',
titleFontSize: '14px',
tooltipFillColor: '#F9FAFB',
tooltipFontColor: '#1F2937',
tooltipFontSize: '12px',
labelColor: '#D1D5DB',
lineColor: '#282F3C',
majorTickColor: '#374151',
minorTickColor: '#374151',
pointerColor: '#6B7280',
fontFamily: 'Inter',
fontSize: '12px',
labelFontFamily: 'Inter',
tooltipFillOpacity: 1,
tooltipTextOpacity: 1,
containerBackground: '#282F3C',
titleFontStyle: 'Normal',
titleFontWeight: '600',
labelStyle: 'Normal',
labelWeight: '400',
containerBorderColor: '#282F3C'
};
break;
case 'bootstrap5':
style = {
backgroundColor: 'transparent',
titleFontColor: '#212529',
titleFontSize: '14px',
tooltipFillColor: '#000000',
tooltipFontColor: '#FFFFFF',
tooltipFontSize: '12px',
labelColor: '#212529',
lineColor: '#E9ECEF',
majorTickColor: '#CED4DA',
minorTickColor: '#CED4DA',
pointerColor: '#343A40',
fontSize: '14px',
titleFontStyle: 'normal',
titleFontWeight: '400',
labelStyle: 'normal',
labelWeight: '400',
fontFamily: 'Segoe UI',
labelFontFamily: 'Segoe UI',
tooltipFillOpacity: 0.9,
containerBackground: '#E9ECEF',
containerBorderColor: '#E9ECEF'
};
break;
case 'bootstrap5dark':
style = {
backgroundColor: 'transparent',
titleFontColor: '#DEE2E6',
titleFontSize: '14px',
titleFontStyle: 'normal',
titleFontWeight: '400',
tooltipFillColor: '#FFFFFF',
tooltipFontColor: '#212529',
tooltipFontSize: '12px',
labelColor: '#DEE2E6',
labelStyle: 'normal',
labelWeight: '400',
labelFontFamily: 'Segoe UI',
lineColor: '#343A40',
majorTickColor: '#6C757D',
minorTickColor: '#6C757D',
pointerColor: '#ADB5BD',
fontSize: '14px',
fontFamily: 'Segoe UI',
tooltipFillOpacity: 0.9,
containerBackground: '#343A40',
containerBorderColor: '#343A40'
};
break;
case 'fluent':
style = {
backgroundColor: 'rgba(255,255,255, 0.0)',
titleFontColor: '#201F1E',
titleFontSize: '15px',
tooltipFillColor: '#FFFFFF',
tooltipFontColor: '#323130',
tooltipFontSize: '13px',
labelColor: '#3B3A39',
lineColor: '#EDEBE9',
majorTickColor: '#C8C6C4',
minorTickColor: '#C8C6C4',
pointerColor: '#A19F9D',
fontFamily: 'Segoe UI',
fontSize: '14px',
labelFontFamily: 'Segoe UI',
tooltipFillOpacity: 1,
tooltipTextOpacity: 1,
containerBackground: 'rgba(255,255,255, 0.0)',
titleFontStyle: 'normal',
titleFontWeight: '600',
labelStyle: 'normal',
labelWeight: '400',
containerBorderColor: '#EDEBE9'
};
break;
case 'fluentdark':
style = {
backgroundColor: 'rgba(255,255,255, 0.0)',
titleFontColor: '#F3F2F1',
titleFontSize: '15px',
tooltipFillColor: '#252423',
tooltipFontColor: '#F3F2F1',
tooltipFontSize: '13px',
labelColor: '#C8C6C4',
lineColor: '#292827',
majorTickColor: '#484644',
minorTickColor: '#484644',
pointerColor: '#797775',
fontFamily: 'Segoe UI',
fontSize: '14px',
labelFontFamily: 'Segoe UI',
tooltipFillOpacity: 1,
tooltipTextOpacity: 1,
containerBackground: 'rgba(255,255,255, 0.0)',
titleFontStyle: 'normal',
titleFontWeight: '600',
labelStyle: 'normal',
labelWeight: '400',
containerBorderColor: '#292827'
};
break;
case 'material3':
style = {
backgroundColor: 'transparent',
titleFontColor: '#1C1B1F',
titleFontSize: '16px',
tooltipFillColor: '#313033',
tooltipFontColor: '#F4EFF4',
tooltipFontSize: '14px',
labelColor: ' #1E192B',
lineColor: '#C4C7C5',
majorTickColor: '#C4C7C5',
minorTickColor: '#C4C7C5',
pointerColor: '#49454E',
fontFamily: 'Roboto',
fontSize: '12px',
labelFontFamily: 'Roboto',
tooltipFillOpacity: 1,
tooltipTextOpacity: 1,
containerBackground: '#E7E0EC',
titleFontStyle: 'normal',
titleFontWeight: '500',
labelStyle: 'normal',
labelWeight: '400',
containerBorderColor: '#E7E0EC'
};
break;
case 'material3dark':
style = {
backgroundColor: 'transparent',
titleFontColor: '#E6E1E5',
titleFontSize: '16px',
tooltipFillColor: '#E6E1E5',
tooltipFontColor: '#313033',
tooltipFontSize: '14px',
labelColor: '#E6E1E5',
lineColor: '#938F99',
majorTickColor: '#938F99',
minorTickColor: '#938F99',
pointerColor: '#CAC4D0',
fontFamily: 'Roboto',
fontSize: '12px',
labelFontFamily: 'Roboto',
tooltipFillOpacity: 1,
tooltipTextOpacity: 1,
containerBackground: '#49454F',
titleFontStyle: 'normal',
titleFontWeight: '500',
labelStyle: 'normal',
labelWeight: '400',
containerBorderColor: '#49454F'
};
break;
case 'fluent2':
style = {
backgroundColor: 'transparent',
titleFontColor: '#242424',
titleFontSize: '14px',
tooltipFillColor: '#FFFFFF',
tooltipFontColor: '#242424',
tooltipFontSize: '12px',
labelColor: '#616161',
lineColor: '#EDEBE9',
majorTickColor: '#C8C6C4',
minorTickColor: '#C8C6C4',
pointerColor: '#A19F9D',
fontSize: '12px',
tooltipFillOpacity: 1,
tooltipTextOpacity: 1,
titleFontStyle: 'normal',
titleFontWeight: '600',
labelStyle: 'normal',
labelWeight: '400',
containerBorderColor: '#EDEBE9',
containerBackground: '#EDEBE9',
fontFamily: 'Segoe UI',
labelFontFamily: 'Segoe UI'
};
break;
case 'fluent2dark':
style = {
backgroundColor: 'transparent',
titleFontColor: '#FFFFFF',
titleFontSize: '14px',
tooltipFillColor: '#292929',
tooltipFontColor: '#FFFFFF',
tooltipFontSize: '12px',
labelColor: '#ADADAD',
lineColor: '#292827',
majorTickColor: '#484644',
minorTickColor: '#484644',
pointerColor: '#8A8886',
fontSize: '12px',
tooltipFillOpacity: 1,
tooltipTextOpacity: 1,
titleFontStyle: 'normal',
titleFontWeight: '600',
labelStyle: 'normal',
labelWeight: '400',
containerBorderColor: '#292827',
containerBackground: '#292827',
fontFamily: 'Segoe UI',
labelFontFamily: 'Segoe UI'
};
break;
case 'fluent2highcontrast':
style = {
backgroundColor: 'transparent',
titleFontColor: '#FFFFFF',
titleFontSize: '14px',
tooltipFillColor: '#000000',
tooltipFontColor: '#FFFFFF',
tooltipFontSize: '12px',
labelColor: '#FFFFFF',
lineColor: '#292827',
majorTickColor: '#484644',
minorTickColor: '#484644',
pointerColor: '#8A8886',
fontSize: '12px',
tooltipFillOpacity: 1,
tooltipTextOpacity: 1,
titleFontStyle: 'normal',
titleFontWeight: '600',
labelStyle: 'normal',
labelWeight: '400',
containerBorderColor: '#292827',
containerBackground: '#292827',
fontFamily: 'Segoe UI',
labelFontFamily: 'Segoe UI',
tooltipBorderColor: '#FFF',
tooltipBorderWidth: 1
};
break;
default:
style = {
backgroundColor: '#FFFFFF',
titleFontColor: '#424242',
titleFontSize: '15px',
tooltipFillColor: '#FFFFF',
tooltipFontColor: '#FFFFFF',
tooltipFontSize: '13px',
labelColor: '#686868',
lineColor: '#a6a6a6',
majorTickColor: '#a6a6a6',
minorTickColor: '#a6a6a6',
pointerColor: '#a6a6a6',
containerBackground: '#e0e0e0',
titleFontStyle: 'Normal',
titleFontWeight: 'Normal',
labelStyle: 'Normal',
labelWeight: 'Normal',
containerBorderColor: '#bfbfbf',
fontFamily: 'Segoe UI',
labelFontFamily: 'Segoe UI'
};
break;
}
return style;
}
-53
dist/ts/linear-gauge/user-interaction/tooltip.d.ts
import { LinearGauge } from '../../linear-gauge';
/**
* Represent the tooltip rendering for gauge
*
* @hidden
*/
export declare class GaugeTooltip {
private gauge;
private element;
private currentAxis;
private axisIndex;
private currentPointer;
private currentRange;
private isTouch;
private svgTooltip;
private pointerElement;
private tooltip;
private clearTimeout;
private tooltipId;
constructor(gauge: LinearGauge);
/**
* Internal use for tooltip rendering
*
* @param {PointerEvent} e - Specifies the pointer event argument
* @private
*/
renderTooltip(e: PointerEvent): void;
private tooltipRender;
private tooltipCreate;
private svgCreate;
private getTooltipPosition;
private getTooltipLocation;
mouseUpHandler(e: PointerEvent): void;
/**
* To bind events for tooltip module
*
* @private
*/
addEventListener(): void;
/**
* To unbind events for tooltip module
*
* @private
*/
removeEventListener(): void;
protected getModuleName(): string;
/**
*
* @return {void}
* @private
*/
destroy(): void;
}
-347
dist/ts/linear-gauge/user-interaction/tooltip.ts
/* eslint-disable valid-jsdoc */
import { createElement, Browser, isNullOrUndefined, SanitizeHtmlHelper } from '@syncfusion/ej2-base';
import { LinearGauge } from '../../linear-gauge';
import { Axis, Pointer } from '../axes/axis';
import { TooltipSettings } from '../model/base';
import { IVisiblePointer, ITooltipRenderEventArgs } from '../model/interface';
import { tooltipRender } from '../model/constant';
import { TooltipPosition} from '../utils/enum';
import { FontModel, BorderModel } from '../model/base-model';
import { Tooltip } from '@syncfusion/ej2-svg-base';
import { RangeModel} from '../axes/axis-model';
import { getElement, GaugeLocation, textFormatter, formatValue, Rect, getMousePosition, showTooltip, removeTooltip, removeElement } from '../utils/helper';
import { getPointer } from '../utils/helper';
import { TooltipTheme } from '@syncfusion/ej2-svg-base/src/tooltip/enum';
/**
* Represent the tooltip rendering for gauge
*
* @hidden
*/
export class GaugeTooltip {
private gauge: LinearGauge;
private element: HTMLElement;
private currentAxis: Axis;
private axisIndex: number;
private currentPointer: Pointer;
private currentRange: RangeModel;
private isTouch: boolean;
private svgTooltip: Tooltip;
private pointerElement: Element;
private tooltip: TooltipSettings;
private clearTimeout: number;
private tooltipId: string;
constructor(gauge: LinearGauge) {
this.gauge = gauge;
this.element = gauge.element;
this.tooltip = <TooltipSettings>gauge.tooltip;
this.tooltipId = this.gauge.element.id + '_LinearGauge_Tooltip';
this.addEventListener();
}
/**
* Internal use for tooltip rendering
*
* @param {PointerEvent} e - Specifies the pointer event argument
* @private
*/
public renderTooltip(e: PointerEvent): void {
let pageX: number; let pageY: number;
let target: Element; let touchArg: TouchEvent;
if (e.type.indexOf('touch') !== - 1) {
this.isTouch = true;
touchArg = <TouchEvent & PointerEvent>e;
pageX = touchArg.changedTouches[0].pageX;
pageY = touchArg.changedTouches[0].pageY;
target = <Element>touchArg.target;
} else {
this.isTouch = e.pointerType === 'touch';
pageX = e.pageX;
pageY = e.pageY;
target = <Element>e.target;
}
let tooltipEle: HTMLElement; let tooltipContent: string;
if (target.id.indexOf('Pointer') > -1 && this.gauge.tooltip.type.indexOf('Pointer') > -1) {
this.pointerElement = target;
const areaRect: ClientRect = this.gauge.element.getBoundingClientRect();
const current: IVisiblePointer = getPointer(<HTMLElement>this.pointerElement, this.gauge);
this.currentAxis = current.axis;
this.axisIndex = current.axisIndex;
this.currentPointer = current.pointer;
const customTooltipFormat: boolean = this.tooltip.format && this.tooltip.format.match('{value}') !== null;
const tooltipStyle: FontModel = {
size: this.tooltip.textStyle.size,
color: this.tooltip.textStyle.color,
fontFamily: this.tooltip.textStyle.fontFamily,
fontWeight: this.tooltip.textStyle.fontWeight,
fontStyle: this.tooltip.textStyle.fontStyle,
opacity: this.tooltip.textStyle.opacity
};
tooltipStyle.color = tooltipStyle.color || this.gauge.themeStyle.tooltipFontColor;
tooltipStyle.size = tooltipStyle.size || this.gauge.themeStyle.tooltipFontSize;
tooltipStyle.fontFamily = tooltipStyle.fontFamily || this.gauge.themeStyle.fontFamily;
tooltipStyle.fontWeight = tooltipStyle.fontWeight || this.gauge.themeStyle.labelWeight;
tooltipStyle.opacity = tooltipStyle.opacity || this.gauge.themeStyle.tooltipTextOpacity;
tooltipContent = customTooltipFormat ? textFormatter(
this.tooltip.format, { value: this.currentPointer.currentValue }, this.gauge) :
formatValue(this.currentPointer.currentValue, this.gauge).toString();
tooltipEle = this.tooltipCreate(tooltipEle);
this.tooltipRender(tooltipContent, target, tooltipEle, e, areaRect, pageX, pageY, tooltipStyle);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
(this.gauge as any).renderReactTemplates();
} else if (target.id.indexOf('Range') > -1 && this.gauge.tooltip.type.indexOf('Range') > -1) {
this.pointerElement = target;
const areaRect: ClientRect = this.gauge.element.getBoundingClientRect();
const current: IVisiblePointer = getPointer(<HTMLElement>this.pointerElement, this.gauge);
this.currentAxis = current.axis;
this.axisIndex = current.axisIndex;
const rangePosition: number = Number(target.id.charAt(target.id.length - 1));
this.currentRange = this.currentAxis.ranges[rangePosition as number];
const startData: string = (this.currentRange.start).toString();
const endData: string = (this.currentRange.end).toString();
const rangeTooltipFormat: string = this.gauge.tooltip.rangeSettings.format || this.currentAxis.labelStyle.format;
const customTooltipFormat: boolean = rangeTooltipFormat && ( rangeTooltipFormat.match('{end}') !== null ||
rangeTooltipFormat.match('{start}') !== null );
const rangeTooltipStyle: FontModel = {
size: this.tooltip.rangeSettings.textStyle.size,
color: this.tooltip.rangeSettings.textStyle.color,
fontFamily: this.tooltip.rangeSettings.textStyle.fontFamily,
fontWeight: this.tooltip.rangeSettings.textStyle.fontWeight,
fontStyle: this.tooltip.rangeSettings.textStyle.fontStyle,
opacity: this.tooltip.rangeSettings.textStyle.opacity
};
rangeTooltipStyle.color = rangeTooltipStyle.color || this.gauge.themeStyle.tooltipFontColor;
rangeTooltipStyle.size = rangeTooltipStyle.size || this.gauge.themeStyle.tooltipFontSize;
rangeTooltipStyle.fontFamily = rangeTooltipStyle.fontFamily || this.gauge.themeStyle.fontFamily;
rangeTooltipStyle.fontWeight = rangeTooltipStyle.fontWeight || this.gauge.themeStyle.labelWeight;
rangeTooltipStyle.opacity = rangeTooltipStyle.opacity || this.gauge.themeStyle.tooltipTextOpacity;
tooltipContent = customTooltipFormat ? rangeTooltipFormat.replace(/{start}/g, startData).replace(/{end}/g, endData) :
'Start : ' + startData + '<br>' + 'End : ' + endData;
tooltipEle = this.tooltipCreate(tooltipEle);
this.tooltipRender(tooltipContent, target, tooltipEle, e, areaRect, pageX, pageY, rangeTooltipStyle);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
(this.gauge as any).renderReactTemplates();
} else if ((target.id === (this.element.id + '_LinearGaugeTitle')) && ((<HTMLElement>target).textContent.indexOf('...') > -1)) {
showTooltip(this.gauge.title, this.gauge);
} else {
removeTooltip();
// eslint-disable-next-line @typescript-eslint/no-explicit-any
(this.gauge as any).clearTemplate();
}
}
private tooltipRender(tooltipContent: string, target: Element, tooltipEle: HTMLElement, e: PointerEvent, areaRect: ClientRect,
pageX: number, pageY : number, tooltipStyle: FontModel): void {
let location: GaugeLocation = this.getTooltipLocation();
if ((this.tooltip.rangeSettings.showAtMousePosition && target.id.indexOf('Range') > -1) ||
(this.tooltip.showAtMousePosition && target.id.indexOf('Pointer') > -1)) {
location = getMousePosition(pageX, pageY, this.gauge.svgObject);
}
const args: ITooltipRenderEventArgs = {
name: tooltipRender,
cancel: false,
gauge: this.gauge,
event: e,
location: location,
content: tooltipContent,
tooltip: this.tooltip,
axis: this.currentAxis,
pointer: this.currentPointer
};
const tooltipPos: string = this.getTooltipPosition();
location.y += ((this.tooltip.rangeSettings.template && tooltipPos === 'Top') ||
(this.tooltip.template && tooltipPos === 'Top')) ? 20 : 0;
location.x += ((this.tooltip.rangeSettings.template && tooltipPos === 'Right') ||
(this.tooltip.template && tooltipPos === 'Right')) ? 20 : 0;
this.gauge.trigger(tooltipRender, args, () => {
let template: string | Function = (target.id.indexOf('Range') > -1) ? args.tooltip.rangeSettings.template : args.tooltip.template;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
if (template !== null && Object.keys(template as any).length === 1 && typeof template !== 'function') {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
template = template[Object.keys(template as any)[0]];
}
if (!args.cancel) {
const fillColor: string = (target.id.indexOf('Range') > -1) ? this.tooltip.rangeSettings.fill : this.tooltip.fill;
this.svgTooltip = this.svgCreate(this.svgTooltip, args, this.gauge, areaRect, fillColor, template, tooltipPos,
location, target, tooltipStyle);
this.svgTooltip.opacity = this.gauge.themeStyle.tooltipFillOpacity || this.svgTooltip.opacity;
this.svgTooltip.appendTo(tooltipEle);
}
});
}
private tooltipCreate(tooltipEle: HTMLElement): HTMLElement {
if (document.getElementById(this.tooltipId)) {
tooltipEle = document.getElementById(this.tooltipId);
} else {
tooltipEle = createElement('div', {
id: this.tooltipId,
className: 'EJ2-LinearGauge-Tooltip'
});
tooltipEle.style.cssText = 'position: absolute;pointer-events:none;z-index: 3;';
document.getElementById(this.gauge.element.id + '_Secondary_Element').appendChild(tooltipEle);
}
return tooltipEle;
}
// eslint-disable-next-line max-len
private svgCreate(svgTooltip: Tooltip, args: ITooltipRenderEventArgs, gauge: LinearGauge, areaRect: ClientRect, fill: string, template: string | Function, tooltipPos: string, location: GaugeLocation, target: Element, textStyle: FontModel): Tooltip {
const tooltipBorder : BorderModel = (target.id.indexOf('Range') > -1) ? args.tooltip.rangeSettings.border : args.tooltip.border;
textStyle = {
color: args.tooltip.textStyle.color || textStyle.color,
fontFamily: args.tooltip.textStyle.fontFamily || textStyle.fontFamily,
fontStyle: args.tooltip.textStyle.fontStyle || textStyle.fontStyle,
fontWeight: args.tooltip.textStyle.fontWeight || textStyle.fontWeight,
opacity: args.tooltip.textStyle.opacity || textStyle.opacity,
size: args.tooltip.textStyle.size || textStyle.size
};
const borderStyle: BorderModel = {
color: tooltipBorder.color || this.gauge.themeStyle.tooltipBorderColor || 'transparent',
width: tooltipBorder.width || this.gauge.themeStyle.tooltipBorderWidth || 0,
dashArray: tooltipBorder.dashArray
};
svgTooltip = new Tooltip({
enable: true,
header: '',
data: { value: args.content },
// eslint-disable-next-line @typescript-eslint/no-explicit-any
template: template as any,
content: [SanitizeHtmlHelper.sanitize(args.content)],
shapes: [],
location: args.location,
palette: [],
inverted: !(args.gauge.orientation === 'Horizontal'),
enableAnimation: args.tooltip.enableAnimation,
fill: fill || gauge.themeStyle.tooltipFillColor,
availableSize: gauge.availableSize,
areaBounds: new Rect(
(this.gauge.orientation === 'Vertical') ? location.x : areaRect.left - this.element.getBoundingClientRect().left,
(this.gauge.orientation === 'Vertical') ? areaRect.top : (tooltipPos === 'Bottom') ? areaRect.top : location.y,
tooltipPos === 'Right' ? Math.abs(areaRect.left - location.x) : areaRect.width,
areaRect.height
),
textStyle: textStyle,
border: borderStyle,
theme: args.gauge.theme as TooltipTheme,
enableShadow: true
});
// eslint-disable-next-line @typescript-eslint/no-explicit-any
if ((gauge as any).isVue || (gauge as any).isVue3) {
svgTooltip.controlInstance = gauge;
}
return svgTooltip;
}
private getTooltipPosition(): string {
let position: string;
if (this.gauge.orientation === 'Vertical') {
position = (!this.currentAxis.opposedPosition) ? 'Left' : 'Right';
} else {
position = (this.currentAxis.opposedPosition) ? 'Top' : 'Bottom';
}
return position;
}
private getTooltipLocation(): GaugeLocation {
let lineX: number; let lineY: number;
let x: number; let y: number;
const lineId: string = this.gauge.element.id + '_AxisLine_' + this.axisIndex;
const tickID: string = this.gauge.element.id + '_MajorTicksLine_' + this.axisIndex;
let lineBounds: ClientRect;
if (getElement(lineId)) {
lineBounds = getElement(lineId).getBoundingClientRect();
lineX = lineBounds.left;
lineY = lineBounds.top;
} else {
lineBounds = getElement(tickID).getBoundingClientRect();
lineX = (!this.currentAxis.opposedPosition) ? (lineBounds.left + lineBounds.width) : lineBounds.left;
lineY = (!this.currentAxis.opposedPosition) ? (lineBounds.top + lineBounds.height) : lineBounds.top;
}
const bounds: ClientRect = this.pointerElement.getBoundingClientRect();
const elementRect: ClientRect = this.gauge.element.getBoundingClientRect();
x = bounds.left - elementRect.left;
y = bounds.top - elementRect.top;
const height: number = bounds.height;
const width: number = bounds.width;
const tooltipPosition: TooltipPosition = (this.pointerElement.id.indexOf('Range') > -1) ? this.tooltip.rangeSettings.position :
this.tooltip.position;
if (this.gauge.orientation === 'Vertical') {
x = (lineX - elementRect.left);
if (this.pointerElement.id.indexOf('Range') > -1 || this.pointerElement.id.indexOf('BarPointer') > -1) {
y = (!this.currentAxis.isInversed) ? ((tooltipPosition === 'End') ? y : ((tooltipPosition === 'Start') ?
y + height : y + (height / 2))) : ((tooltipPosition === 'End') ? y + height : ((tooltipPosition === 'Start') ?
y + height : y + (height / 2)));
} else {
y = (this.currentPointer.type === 'Marker') ? y + (height / 2) : (!this.currentAxis.isInversed) ? y : y + height;
}
} else {
y = (lineY - elementRect.top);
if (this.pointerElement.id.indexOf('Range') > -1 || this.pointerElement.id.indexOf('BarPointer') > -1) {
x = (!this.currentAxis.isInversed) ? ((tooltipPosition === 'End') ? x + width : ((tooltipPosition === 'Start') ?
x : x + (width / 2))) : ((tooltipPosition === 'End') ? x : ((tooltipPosition === 'Start') ? x + width : x + (width / 2)));
} else {
x = (this.currentPointer.type === 'Marker') ? (x + width / 2) : (!this.currentAxis.isInversed) ? x + width : x;
}
}
const location: GaugeLocation = new GaugeLocation(x, y);
return location;
}
public mouseUpHandler(e: PointerEvent): void {
removeTooltip();
this.renderTooltip(e);
clearTimeout(this.clearTimeout);
this.clearTimeout = setTimeout(removeTooltip.bind(this), 2000);
}
/**
* To bind events for tooltip module
*
* @private
*/
public addEventListener(): void {
if (this.gauge.isDestroyed) {
return;
}
this.gauge.on(Browser.touchMoveEvent, this.renderTooltip, this);
this.gauge.on(Browser.touchEndEvent, this.mouseUpHandler, this);
}
/**
* To unbind events for tooltip module
*
* @private
*/
public removeEventListener(): void {
if (this.gauge.isDestroyed) {
return;
}
this.gauge.off(Browser.touchMoveEvent, this.renderTooltip);
this.gauge.off(Browser.touchEndEvent, this.mouseUpHandler);
}
/*
* Get module name.
*/
protected getModuleName(): string {
return 'Tooltip';
}
/**
*
* @return {void}
* @private
*/
public destroy(): void {
this.element = null;
this.currentAxis = null;
this.currentPointer = null;
this.currentRange = null;
if (!isNullOrUndefined(this.svgTooltip)) {
this.svgTooltip.destroy();
this.svgTooltip.controlInstance = null;
removeElement(this.tooltipId);
}
this.svgTooltip = null;
this.pointerElement = null;
this.tooltip = null;
this.removeEventListener();
this.gauge = null;
}
}
-214
dist/ts/linear-gauge/utils/enum.d.ts
/**
* Defines the position of ticks, labels, pointers, and ranges.
*
* @private
*/
export declare type Position =
/** Specifies the position of ticks, labels, pointers, and ranges to be placed inside the axis. */
'Inside' |
/** Specifies the position of ticks, labels, pointers, and ranges to be placed outside the axis. */
'Outside' |
/** Specifies the position of ticks, labels, pointers, and ranges to be placed on the axis. */
'Cross' |
/** Specifies the position of ticks, labels, pointers, and ranges to be placed based on the available size in linear gauge. */
'Auto';
/**
* Defines type of pointer in linear gauge.
*
* @private
*/
export declare type Point =
/** Specifies the pointer as marker type. */
'Marker' |
/** Specifies the pointer as bar. */
'Bar';
/**
* Defines theme supported for the linear gauge.
*
* @private
*/
export declare type LinearGaugeTheme =
/** Renders the linear gauge with material theme. */
'Material' |
/** Renders the linear gauge with bootstrap theme. */
'Bootstrap' |
/** Renders the linear gauge with highcontrast light theme. */
'HighContrastLight' |
/** Renders the linear gauge with fabric theme. */
'Fabric' |
/** Renders the linear gauge with material dark theme. */
'MaterialDark' |
/** Renders the linear gauge with fabric dark theme. */
'FabricDark' |
/** Renders the linear gauge with highcontrast dark theme. */
'HighContrast' |
/** Renders the linear gauge with bootstrap dark theme. */
'BootstrapDark' |
/** Renders the linear gauge with bootstrap4 theme. */
'Bootstrap4' |
/** Renders the linear gauge with Tailwind theme. */
'Tailwind' |
/** Renders the linear gauge with TailwindDark theme. */
'TailwindDark' |
/** Renders the linear gauge with Tailwind 3 theme. */
'Tailwind3' |
/** Renders the linear gauge with Tailwind 3 Dark theme. */
'Tailwind3Dark' |
/** Renders the linear gauge with Bootstrap5 theme. */
'Bootstrap5' |
/** Render the linear gauge with Bootstrap5 dark theme. */
'Bootstrap5Dark' |
/** Renders the linear gauge with Fluent theme. */
'Fluent' |
/** Render the linear gauge with Fluent dark theme. */
'FluentDark' |
/** Renders the linear gauge with Fluent2 theme. */
'Fluent2' |
/** Render the linear gauge with Fluent2 dark theme. */
'Fluent2Dark' |
/** Render the linear gauge with Fluent2 high contrast theme. */
'Fluent2HighContrast' |
/** Renders the linear gauge with Material3 theme. */
'Material3' |
/** Renders the linear gauge with Material3Dark theme. */
'Material3Dark';
/**
* Defines the type of marker.
*
* @private
*/
export declare type MarkerType =
/**
* Specifies the marker as triangle.
*/
'Triangle' |
/**
* Specifies the marker as inverted triangle.
*/
'InvertedTriangle' |
/**
* Specifies the marker as diamond.
*/
'Diamond' |
/**
* Specifies the marker as rectangle.
*/
'Rectangle' |
/**
* Specifies the marker as circle.
*/
'Circle' |
/**
* Specifies the marker as arrow.
*/
'Arrow' |
/**
* Specifies the marker as inverted arrow.
*/
'InvertedArrow' |
/**
* Specifies the marker as image.
*/
'Image' |
/**
* Specifies the marker as text.
*/
'Text';
/**
* Defines the place of the pointer.
*
* @private
*/
export declare type Placement =
/**
* Specifies the pointer to be placed near the linear gauge.
*/
'Near' |
/**
* Specifies the pointer to be placed at the center of the linear gauge.
*/
'Center' |
/**
* Specifies the pointer to be placed far from the linear gauge.
*/
'Far' |
/**
* Specifies the pointer to be placed at default position.
*/
'None';
/**
* Defines the type of gauge orientation.
*
* @private
*/
export declare type Orientation =
/**
* Specifies the linear gauge to be placed horizontally.
*/
'Horizontal' |
/**
* Specifies the linear gauge to be placed vertically.
*/
'Vertical';
/**
* Defines the placement of the label in linear gauge.
*
* @private
*/
export declare type LabelPlacement =
/**
* Specifies that the first and last labels to be placed at the default position.
*/
'None' |
/**
* Specifies that the first and last labels to be shifted within the axis.
*/
'Shift' |
/**
* Specifies that the first and last labels to be trimmed.
*/
'Trim' |
/**
* Specifies that the first and last labels must trim or shift automatically.
*/
'Auto';
/**
* Defines the container type.
*/
export declare type ContainerType =
/** Specifies the container to be drawn as normal rectangle box. */
'Normal' |
/**
* Specifies the container to be drawn as the thermometer box.
*/
'Thermometer' |
/**
* Specifies the container to be drawn as the rounded rectangle box.
*/
'RoundedRectangle';
/**
* Defines the export type.
*/
export declare type ExportType =
/** Specifies the rendered linear gauge to be exported as png format */
'PNG' |
/** Specifies the rendered linear gauge to be exported as jpeg format */
'JPEG' |
/** Specifies the rendered linear gauge to be exported as svg format */
'SVG' |
/** Specifies the rendered linear gauge to be exported as pdf format */
'PDF';
/**
* Specifies the tooltip position for the range in linear gauge.
*/
export declare type TooltipPosition =
/** Specifies the tooltip for the range to be placed at the start of the range. */
'Start' |
/**
* Specifies the tooltip for the range to be placed at the center of the range.
*/
'Center' |
/**
* Specifies the tooltip for the range to be placed at the end of the range.
*/
'End';
-227
dist/ts/linear-gauge/utils/enum.ts
/**
* Defines the position of ticks, labels, pointers, and ranges.
*
* @private
*/
export type Position =
/** Specifies the position of ticks, labels, pointers, and ranges to be placed inside the axis. */
'Inside' |
/** Specifies the position of ticks, labels, pointers, and ranges to be placed outside the axis. */
'Outside'|
/** Specifies the position of ticks, labels, pointers, and ranges to be placed on the axis. */
'Cross' |
/** Specifies the position of ticks, labels, pointers, and ranges to be placed based on the available size in linear gauge. */
'Auto';
/**
* Defines type of pointer in linear gauge.
*
* @private
*/
export type Point =
/** Specifies the pointer as marker type. */
'Marker' |
/** Specifies the pointer as bar. */
'Bar';
/**
* Defines theme supported for the linear gauge.
*
* @private
*/
export type LinearGaugeTheme =
/** Renders the linear gauge with material theme. */
'Material' |
/** Renders the linear gauge with bootstrap theme. */
'Bootstrap' |
/** Renders the linear gauge with highcontrast light theme. */
'HighContrastLight'|
/** Renders the linear gauge with fabric theme. */
'Fabric'|
/** Renders the linear gauge with material dark theme. */
'MaterialDark' |
/** Renders the linear gauge with fabric dark theme. */
'FabricDark' |
/** Renders the linear gauge with highcontrast dark theme. */
'HighContrast'|
/** Renders the linear gauge with bootstrap dark theme. */
'BootstrapDark'|
/** Renders the linear gauge with bootstrap4 theme. */
'Bootstrap4' |
/** Renders the linear gauge with Tailwind theme. */
'Tailwind' |
/** Renders the linear gauge with TailwindDark theme. */
'TailwindDark' |
/** Renders the linear gauge with Tailwind 3 theme. */
'Tailwind3' |
/** Renders the linear gauge with Tailwind 3 Dark theme. */
'Tailwind3Dark' |
/** Renders the linear gauge with Bootstrap5 theme. */
'Bootstrap5' |
/** Render the linear gauge with Bootstrap5 dark theme. */
'Bootstrap5Dark' |
/** Renders the linear gauge with Fluent theme. */
'Fluent' |
/** Render the linear gauge with Fluent dark theme. */
'FluentDark'|
/** Renders the linear gauge with Fluent2 theme. */
'Fluent2' |
/** Render the linear gauge with Fluent2 dark theme. */
'Fluent2Dark'|
/** Render the linear gauge with Fluent2 high contrast theme. */
'Fluent2HighContrast'|
/** Renders the linear gauge with Material3 theme. */
'Material3' |
/** Renders the linear gauge with Material3Dark theme. */
'Material3Dark';
/**
* Defines the type of marker.
*
* @private
*/
export type MarkerType =
/**
* Specifies the marker as triangle.
*/
'Triangle' |
/**
* Specifies the marker as inverted triangle.
*/
'InvertedTriangle' |
/**
* Specifies the marker as diamond.
*/
'Diamond' |
/**
* Specifies the marker as rectangle.
*/
'Rectangle' |
/**
* Specifies the marker as circle.
*/
'Circle' |
/**
* Specifies the marker as arrow.
*/
'Arrow' |
/**
* Specifies the marker as inverted arrow.
*/
'InvertedArrow' |
/**
* Specifies the marker as image.
*/
'Image' |
/**
* Specifies the marker as text.
*/
'Text';
/**
* Defines the place of the pointer.
*
* @private
*/
export type Placement =
/**
* Specifies the pointer to be placed near the linear gauge.
*/
'Near' |
/**
* Specifies the pointer to be placed at the center of the linear gauge.
*/
'Center' |
/**
* Specifies the pointer to be placed far from the linear gauge.
*/
'Far' |
/**
* Specifies the pointer to be placed at default position.
*/
'None';
/**
* Defines the type of gauge orientation.
*
* @private
*/
export type Orientation =
/**
* Specifies the linear gauge to be placed horizontally.
*/
'Horizontal' |
/**
* Specifies the linear gauge to be placed vertically.
*/
'Vertical';
/**
* Defines the placement of the label in linear gauge.
*
* @private
*/
export type LabelPlacement =
/**
* Specifies that the first and last labels to be placed at the default position.
*/
'None' |
/**
* Specifies that the first and last labels to be shifted within the axis.
*/
'Shift' |
/**
* Specifies that the first and last labels to be trimmed.
*/
'Trim' |
/**
* Specifies that the first and last labels must trim or shift automatically.
*/
'Auto';
/**
* Defines the container type.
*/
export type ContainerType =
/** Specifies the container to be drawn as normal rectangle box. */
'Normal' |
/**
* Specifies the container to be drawn as the thermometer box.
*/
'Thermometer' |
/**
* Specifies the container to be drawn as the rounded rectangle box.
*/
'RoundedRectangle';
/**
* Defines the export type.
*/
export type ExportType =
/** Specifies the rendered linear gauge to be exported as png format */
'PNG' |
/** Specifies the rendered linear gauge to be exported as jpeg format */
'JPEG' |
/** Specifies the rendered linear gauge to be exported as svg format */
'SVG' |
/** Specifies the rendered linear gauge to be exported as pdf format */
'PDF';
/**
* Specifies the tooltip position for the range in linear gauge.
*/
export type TooltipPosition =
/** Specifies the tooltip for the range to be placed at the start of the range. */
'Start' |
/**
* Specifies the tooltip for the range to be placed at the center of the range.
*/
'Center' |
/**
* Specifies the tooltip for the range to be placed at the end of the range.
*/
'End';
-196
dist/ts/linear-gauge/utils/helper.d.ts
import { FontModel, BorderModel } from '../model/base-model';
import { IVisiblePointer } from '../model/interface';
import { Axis, Pointer, Range } from '../axes/axis';
import { Orientation, MarkerType, LinearGaugeTheme } from './enum';
import { LinearGauge } from '../../linear-gauge';
import { ExportType } from '../utils/enum';
/**
* Specifies Linear-Gauge Helper methods
*/
/** @private */
export declare function stringToNumber(value: string, containerSize: number): number;
/** @private */
export declare function stringToNumberSize(value: string, containerSize: number): number;
/**
* Function to measure the height and width of the text.
*
* @param {string} text - Specifies the text to be measured.
* @param {FontModel} font - Specifies the font of the text.
* @returns {Size} Returns the size of the text.
* @private
*/
export declare function measureText(text: string, font: FontModel): Size;
/**
* Trim the title text
*
* @private
*
*/
export declare function textTrim(maxWidth: number, text: string, font: FontModel): string;
/** @private */
export declare function withInRange(value: number, start: number, end: number, max: number, min: number, type: string): boolean;
export declare function convertPixelToValue(parentElement: HTMLElement, pointerElement: Element, orientation: Orientation, axis: Axis, type: string, location: GaugeLocation): number;
export declare function getPathToRect(path: SVGPathElement, size: Size, parentElement: HTMLElement): Rect;
/** @private */
export declare function getElement(id: string): HTMLElement;
/** @private */
export declare function removeElement(id: string): void;
/** @private */
export declare function valueToCoefficient(value: number, axis: Axis, orientation: Orientation, range: VisibleRange): number;
export declare function getFontStyle(font: FontModel): string;
export declare function textFormatter(format: string, data: any, gauge: LinearGauge): string;
export declare function formatValue(value: number, gauge: LinearGauge): string | number;
/** @private */
export declare function getTemplateFunction(template: string | Function, gauge: LinearGauge): any;
/** @private */
export declare function getElementOffset(childElement: HTMLElement, parentElement: HTMLElement): Size;
/**
* To trigger the download element
*
* @param {string} fileName - Specifies the name of the exported file.
* @param {ExportType} type - Specifies the extension type of the file to which the Linear Gauge must be exported.
* @param {string} url - Specifies the blob URL of the exported file of Linear Gauge.
* @param {boolean} isDownload - Specifies whether the exported file must be downloaded or not.
* @private
*/
export declare function triggerDownload(fileName: string, type: ExportType, url: string, isDownload: boolean): void;
/** @private */
export declare class VisibleRange {
min?: number;
max?: number;
interval?: number;
delta?: number;
constructor(min: number, max: number, interval: number, delta: number);
}
/**
* Specifies the location of the element in the linear gauge.
*/
export declare class GaugeLocation {
/**
* Specifies the x position of the location in pixels.
*/
x: number;
/**
* Specifies the y position of the location in pixels.
*/
y: number;
constructor(x: number, y: number);
}
/**
* Specifies the size information of an element.
*/
export declare class Size {
/**
* Specifies the height of an element.
*/
height: number;
/**
* Specifies the width of an element.
*/
width: number;
constructor(width: number, height: number);
}
/** @private */
export declare class Rect {
x: number;
y: number;
height: number;
width: number;
constructor(x: number, y: number, width: number, height: number);
}
/** @private */
export declare class CustomizeOption {
id: string;
constructor(id?: string);
}
/** @private */
export declare class PathOption extends CustomizeOption {
opacity: number;
fill: string;
stroke: string;
['stroke-width']: number;
['stroke-dasharray']: string;
d: string;
transform: string;
cx: number;
cy: number;
r: number;
constructor(id: string, fill: string, width: number, color: string, opacity?: number, dashArray?: string, d?: string, transform?: string);
}
/** @private */
export declare class RectOption {
x: number;
y: number;
id: string;
height: number;
width: number;
rx: number;
ry: number;
opacity: number;
transform: string;
stroke: string;
fill: string;
['stroke-width']: number;
['stroke-dasharray']: string;
constructor(id: string, fill: string, border: BorderModel, opacity: number, rect: Rect);
}
/** @private */
export declare class TextOption extends CustomizeOption {
anchor: string;
text: string;
transform: string;
x: number;
y: number;
baseLine: string;
constructor(id?: string, x?: number, y?: number, anchor?: string, text?: string, transform?: string, baseLine?: string);
}
/** @private */
export declare class VisibleLabels {
text: string;
value: number;
size: Size;
x?: number;
y?: number;
angle: number;
constructor(text: string, value: number, size: Size, x?: number, y?: number);
}
/** @private */
export declare class Align {
axisIndex: number;
align: string;
constructor(axisIndex: number, align: string);
}
/** @private */
export declare function textElement(options: TextOption, font: FontModel, color: string, opacity: number, parent: HTMLElement | Element): Element;
export declare function calculateNiceInterval(min: number, max: number, size: number, orientation: Orientation): number;
export declare function getActualDesiredIntervalsCount(size: number, orientation: Orientation): number;
/** @private */
export declare function getPointer(target: HTMLElement, gauge: LinearGauge): IVisiblePointer;
/** @private */
export declare function getRangeColor(value: number, ranges: Range[]): string;
/**
* Function to get the mouse position
*
* @param {number} pageX - Specifies the horizontal position of the click event.
* @param {number} pageY - Specifies the vertical position of the click event.
* @param {number} element - Specifies the target element of the client event.
* @private
*/
export declare function getMousePosition(pageX: number, pageY: number, element: Element): GaugeLocation;
/** @private */
export declare function getRangePalette(theme: LinearGaugeTheme): string[];
/** @private */
export declare function calculateShapes(location: Rect, shape: MarkerType, size: Size, url: string, options: PathOption, orientation: Orientation, axis: Axis, pointer: Pointer): PathOption;
/** @private */
export declare function calculateTextPosition(location: Rect, shape: MarkerType, options: TextOption, orientation: Orientation, axis: Axis, pointer: Pointer): TextOption;
/** @private */
export declare function getBox(location: Rect, boxName: string, orientation: Orientation, size: Size, type: string, containerWidth: number, axis: Axis, cornerRadius: number): string;
/** @private */
export declare function getExtraWidth(gaugeElement: HTMLElement): number;
/**
* @param {string} text - Specifies the text.
* @returns {void}
* @private */
export declare function showTooltip(text: string, gauge: LinearGauge): void;
/** @private */
export declare function removeTooltip(): void;
-819
dist/ts/linear-gauge/utils/helper.ts
/* eslint-disable jsdoc/require-jsdoc */
/* eslint-disable valid-jsdoc */
/* eslint-disable jsdoc/require-param */
/* eslint-disable jsdoc/require-returns */
import { compile as templateComplier, remove, merge, createElement, isNullOrUndefined } from '@syncfusion/ej2-base';
import { SvgRenderer } from '@syncfusion/ej2-svg-base';
import { FontModel, BorderModel } from '../model/base-model';
import { IVisiblePointer } from '../model/interface';
import { Axis, Pointer, Range } from '../axes/axis';
import { Orientation, MarkerType, LinearGaugeTheme } from './enum';
import { LinearGauge } from '../../linear-gauge';
import { ExportType } from '../utils/enum';
/**
* Specifies Linear-Gauge Helper methods
*/
/** @private */
export function stringToNumber(value: string, containerSize: number): number {
return value.indexOf('%') !== -1 ? (containerSize / 100) * parseInt(value, 10) : parseInt(value, 10);
}
/** @private */
export function stringToNumberSize(value: string, containerSize: number): number {
if (!isNullOrUndefined(value)) {
return value.indexOf('%') !== -1 ? containerSize : parseInt(value, 10);
}
return null;
}
/**
* Function to measure the height and width of the text.
*
* @param {string} text - Specifies the text to be measured.
* @param {FontModel} font - Specifies the font of the text.
* @returns {Size} Returns the size of the text.
* @private
*/
export function measureText(text: string, font: FontModel): Size {
let htmlObject: HTMLElement = document.getElementById('gauge-measuretext');
if (htmlObject === null) {
htmlObject = createElement('text', { id: 'gauge-measuretext' });
document.body.appendChild(htmlObject);
}
htmlObject.innerText = text;
htmlObject.style.position = 'absolute';
htmlObject.style.fontSize = font.size;
htmlObject.style.fontWeight = font.fontWeight;
htmlObject.style.fontStyle = font.fontStyle;
htmlObject.style.fontFamily = font.fontFamily;
htmlObject.style.visibility = 'hidden';
htmlObject.style.top = '-100';
htmlObject.style.left = '0';
htmlObject.style.whiteSpace = 'nowrap';
const size: Size = new Size(htmlObject.clientWidth, htmlObject.clientHeight);
//remove(htmlObject);
return size;
}
/**
* Trim the title text
*
* @private
*
*/
export function textTrim(maxWidth: number, text: string, font: FontModel): string {
let label: string = text;
let size: number = measureText(text, font).width;
if (size > maxWidth) {
const textLength: number = text.length;
for (let i: number = textLength - 1; i >= 0; --i) {
label = text.substring(0, i) + '...';
size = measureText(label, font).width;
if (size <= maxWidth || label.length < 4) {
if (label.length < 4) {
label = ' ';
}
return label;
}
}
}
return label;
}
/** @private */
export function withInRange(value: number, start: number, end: number, max: number, min: number, type: string): boolean {
let withIn: boolean;
if (type === 'pointer') {
withIn = (((value <= max) && (value >= min)));
} else {
withIn = (start != null && (start <= max) && (start >= min)) && (end != null && (end <= max) && (end >= min));
}
return withIn;
}
export function convertPixelToValue(
parentElement: HTMLElement, pointerElement: Element, orientation: Orientation, axis: Axis, type: string, location: GaugeLocation
): number {
const elementRect: ClientRect = parentElement.getBoundingClientRect();
const pointerRect: ClientRect = pointerElement.getBoundingClientRect();
const height: number = (pointerElement.id.indexOf('MarkerPointer') > -1) ? (pointerRect.height / 2) :
(!axis.isInversed) ? 0 : pointerRect.height;
const width: number = (pointerElement.id.indexOf('MarkerPointer') > -1) ? (pointerRect.width / 2) :
(!axis.isInversed) ? pointerRect.width : 0;
const size: Size = new Size(axis.lineBounds.width, axis.lineBounds.height);
const y: number = (type === 'drag') ? (location.y - axis.lineBounds.y) :
((pointerRect.top + height) - elementRect.top - axis.lineBounds.y);
const extraWidth: number = getExtraWidth(parentElement);
const x: number = (type === 'drag') ? (location.x - axis.lineBounds.x + extraWidth) :
((pointerRect.left + width) - elementRect.left - axis.lineBounds.x + extraWidth);
const newSize: number = (orientation === 'Vertical') ? size.height : size.width;
const divideVal: number = (orientation === 'Vertical') ? y : x;
let value: number = (orientation === 'Vertical') ? (axis.isInversed) ? (divideVal / newSize) :
(1 - (divideVal / newSize)) : (axis.isInversed) ? (1 - (divideVal / newSize)) : (divideVal / newSize);
value = value * (axis.visibleRange.delta) + axis.visibleRange.min;
return value;
}
export function getPathToRect(path: SVGPathElement, size: Size, parentElement: HTMLElement): Rect {
let tempDiv: HTMLElement = <HTMLElement>document.getElementById('gauge_path');
if (tempDiv === null) {
tempDiv = createElement('text', { id: 'gauge_path' });
tempDiv.style.position = 'absolute';
tempDiv.style.top = '0px';
tempDiv.style.left = '0px';
parentElement.appendChild(tempDiv);
}
const render: SvgRenderer = new SvgRenderer('id');
const svg: SVGAElement = render.createSvg({ id: 'box_path', width: size.width, height: size.height }) as SVGAElement;
svg.appendChild(path);
tempDiv.appendChild(svg);
const svgRect: Rect = path.getBBox();
remove(tempDiv);
return svgRect;
}
/** @private */
export function getElement(id: string): HTMLElement {
return document.getElementById(id);
}
/** @private */
export function removeElement(id: string): void {
const element: Element = getElement(id);
if (element) {
remove(element);
}
}
/** @private */
export function valueToCoefficient(value: number, axis: Axis, orientation: Orientation, range: VisibleRange): number {
let result: number = (value - <number>range.min) / range.delta;
result = (orientation === 'Vertical') ? (!axis.isInversed) ? (1 - result) : result : (!axis.isInversed) ? result : (1 - result);
return result;
}
export function getFontStyle(font: FontModel): string {
let style: string = '';
style = 'font-size:' + font.size +
'; font-style:' + font.fontStyle + '; font-weight:' + font.fontWeight +
'; font-family:' + font.fontFamily + ';opacity:' + font.opacity +
'; color:' + font.color + ';';
return style;
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export function textFormatter(format: string, data: any, gauge: LinearGauge): string {
const keys: string[] = Object.keys(data);
for (const key of keys) {
format = format.split('{' + key + '}').join(formatValue(data[key as string], gauge).toString());
}
return format;
}
export function formatValue(value: number, gauge: LinearGauge): string | number {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
let formatValue: string | number; let formatFunction: any;
if (gauge.format && !isNaN(Number(value))) {
formatFunction = gauge.intl.getNumberFormat(
{ format: gauge.format, useGrouping: gauge.useGroupingSeparator });
formatValue = formatFunction(Number(value));
} else {
formatValue = value;
}
return formatValue !== null ? formatValue : '';
}
// /** @private */
// export function getLabelFormat(format: string): string {
// const customLabelFormat: boolean = format && format.match('{value}') !== null;
// const skeleton: string = customLabelFormat ? '' : format;
// return skeleton;
// }
/** @private */
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export function getTemplateFunction(template: string | Function, gauge: LinearGauge): any {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
let templateFn: any = null;
try {
if (typeof template === 'function') {
templateFn = templateComplier(template);
} else if (document.querySelectorAll(template).length) {
templateFn = templateComplier(document.querySelector(template).innerHTML.trim());
// eslint-disable-next-line @typescript-eslint/no-explicit-any
} else if ((gauge as any).isVue || (gauge as any).isVue3) {
templateFn = templateComplier(template);
}
} catch (e) {
templateFn = templateComplier(template);
}
return templateFn;
}
/** @private */
export function getElementOffset(childElement: HTMLElement, parentElement: HTMLElement): Size {
parentElement.appendChild(childElement);
const width: number = childElement.offsetWidth;
const height: number = childElement.offsetHeight;
parentElement.removeChild(childElement);
return new Size(width, height);
}
/**
* To trigger the download element
*
* @param {string} fileName - Specifies the name of the exported file.
* @param {ExportType} type - Specifies the extension type of the file to which the Linear Gauge must be exported.
* @param {string} url - Specifies the blob URL of the exported file of Linear Gauge.
* @param {boolean} isDownload - Specifies whether the exported file must be downloaded or not.
* @private
*/
export function triggerDownload(fileName: string, type: ExportType, url: string, isDownload: boolean): void {
createElement('a', {
attrs: {
'download': fileName + '.' + (type as string).toLocaleLowerCase(),
'href': url
}
}).dispatchEvent(new MouseEvent(isDownload ? 'click' : 'move', {
view: window,
bubbles: false,
cancelable: true
}));
}
/** @private */
export class VisibleRange {
public min?: number;
public max?: number;
public interval?: number;
public delta?: number;
constructor(min: number, max: number, interval: number, delta: number) {
this.min = min;
this.max = max;
this.interval = interval;
this.delta = delta;
}
}
/**
* Specifies the location of the element in the linear gauge.
*/
export class GaugeLocation {
/**
* Specifies the x position of the location in pixels.
*/
public x: number;
/**
* Specifies the y position of the location in pixels.
*/
public y: number;
constructor(x: number, y: number) {
this.x = x;
this.y = y;
}
}
/**
* Specifies the size information of an element.
*/
export class Size {
/**
* Specifies the height of an element.
*/
public height: number;
/**
* Specifies the width of an element.
*/
public width: number;
constructor(width: number, height: number) {
this.width = width;
this.height = height;
}
}
/** @private */
export class Rect {
public x: number;
public y: number;
public height: number;
public width: number;
constructor(x: number, y: number, width: number, height: number) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
}
}
/** @private */
export class CustomizeOption {
public id: string;
constructor(id?: string) {
this.id = id;
}
}
/** @private */
export class PathOption extends CustomizeOption {
public opacity: number;
public fill: string;
public stroke: string;
public ['stroke-width']: number;
public ['stroke-dasharray']: string;
public d: string;
public transform: string;
public cx: number;
public cy: number;
public r: number;
constructor(
id: string, fill: string, width: number, color: string,
opacity?: number, dashArray?: string, d?: string, transform: string = '') {
super(id);
this.opacity = opacity;
this.fill = fill;
this.stroke = color;
this['stroke-width'] = width;
this['stroke-dasharray'] = dashArray;
this.d = d;
this.transform = transform;
}
}
/** @private */
export class RectOption {
public x: number;
public y: number;
public id: string;
public height: number;
public width: number;
public rx: number;
public ry: number;
public opacity: number;
public transform: string;
public stroke: string;
public fill: string;
public ['stroke-width']: number;
public ['stroke-dasharray']: string;
constructor(
id: string, fill: string, border: BorderModel, opacity: number, rect: Rect) {
this.opacity = opacity;
this.id = id;
this.y = rect.y;
this.x = rect.x;
this.fill = fill;
this.stroke = border.color;
this['stroke-width'] = border.width;
this['stroke-dasharray'] = border.dashArray;
this.height = rect.height;
this.width = rect.width;
}
}
/** @private */
export class TextOption extends CustomizeOption {
public anchor: string;
public text: string;
public transform: string = '';
public x: number;
public y: number;
public baseLine: string = 'auto';
constructor(id?: string, x?: number, y?: number, anchor?: string, text?: string, transform: string = '', baseLine?: string) {
super(id);
this.x = x;
this.y = y;
this.anchor = anchor;
this.text = text;
this.transform = transform;
this.baseLine = baseLine;
}
}
/** @private */
export class VisibleLabels {
public text: string;
public value: number;
public size: Size;
public x?: number;
public y?: number;
public angle: number;
constructor(text: string, value: number, size: Size, x?: number, y?: number) {
this.text = text;
this.value = value;
this.size = size;
this.x = x;
this.y = y;
}
}
/** @private */
export class Align {
public axisIndex: number;
public align: string;
constructor(axisIndex: number, align: string) {
this.align = align;
this.axisIndex = axisIndex;
}
}
/** @private */
export function textElement(options: TextOption, font: FontModel, color: string, opacity: number, parent: HTMLElement | Element): Element {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
let renderOptions: any = {};
const renderer: SvgRenderer = new SvgRenderer('');
if (!isNullOrUndefined(options.id)) {
removeElement(options.id);
}
const style: string = 'fill:' + color + '; font-size:' + font.size +
'; font-style:' + font.fontStyle + ' ; font-weight:' + font.fontWeight + '; font-family:' +
font.fontFamily + '; text-anchor:' + options.anchor + '; transform:' + options.transform +
'; opacity:' + (!isNullOrUndefined(opacity) ? opacity : font.opacity) + '; dominant-baseline:' + options.baseLine + ';';
renderOptions = {
'id': options.id,
'x': options.x,
'y': options.y,
'style': style
};
const htmlObject: Element = renderer.createText(renderOptions, options.text);
parent.appendChild(htmlObject);
return htmlObject;
}
export function calculateNiceInterval(min: number, max: number, size: number, orientation: Orientation): number {
const delta: number = max - min;
let currentInterval: number;
const intervalDivs: number[] = [10, 5, 2, 1];
const desiredIntervalsCount: number = getActualDesiredIntervalsCount(size, orientation);
let niceInterval: number = delta / desiredIntervalsCount;
const minInterval: number = Math.pow(10, Math.floor(Math.log(niceInterval) / Math.log(10)));
for (const interval of intervalDivs) {
currentInterval = minInterval * interval;
if (desiredIntervalsCount < (delta / currentInterval)) {
break;
}
niceInterval = currentInterval;
}
return niceInterval;
}
export function getActualDesiredIntervalsCount(size: number, orientation: Orientation): number {
const maximumLabels: number = 5;
let desiredIntervalsCount: number = (orientation === 'Horizontal' ? 0.533 : 1) * maximumLabels;
desiredIntervalsCount = Math.max((size * (desiredIntervalsCount / 100)), 1);
return desiredIntervalsCount;
}
/** @private */
export function getPointer(target: HTMLElement, gauge: LinearGauge): IVisiblePointer {
let split: string[] = [];
const radix: number = 10;
split = target.id.replace(gauge.element.id, '').split('_');
const axisIndex: number = parseInt(split[2], radix);
const pointIndex: number = parseInt(split[4], radix);
const axis: Axis = <Axis>gauge.axes[axisIndex as number];
const pointer: Pointer = <Pointer>gauge.axes[axisIndex as number].pointers[pointIndex as number];
return { axis: axis, axisIndex: axisIndex, pointer: pointer, pointerIndex: pointIndex };
}
/** @private */
export function getRangeColor(value: number, ranges: Range[]): string {
let rangeColor: string = null;
ranges.forEach((range: Range) => {
if ((value >= range.start && range.end >= value) && range.start !== range.end) {
rangeColor = range.interior;
}
});
return rangeColor;
}
/**
* Function to get the mouse position
*
* @param {number} pageX - Specifies the horizontal position of the click event.
* @param {number} pageY - Specifies the vertical position of the click event.
* @param {number} element - Specifies the target element of the client event.
* @private
*/
export function getMousePosition(pageX: number, pageY: number, element: Element): GaugeLocation {
const elementRect: ClientRect = element.getBoundingClientRect();
const pageXOffset: number = element.ownerDocument.defaultView.pageXOffset;
const pageYOffset: number = element.ownerDocument.defaultView.pageYOffset;
const clientTop: number = element.ownerDocument.documentElement.clientTop;
const clientLeft: number = element.ownerDocument.documentElement.clientLeft;
const positionX: number = elementRect.left + pageXOffset - clientLeft;
const positionY: number = elementRect.top + pageYOffset - clientTop;
return new GaugeLocation((pageX - positionX), (pageY - positionY));
}
/** @private */
export function getRangePalette(theme: LinearGaugeTheme): string[] {
let palette: string[];
switch (theme.toLowerCase()) {
case 'tailwind':
palette = ['#0369A1', '#14B8A6', '#15803D', '#334155', '#5A61F6', '#65A30D', '#8B5CF6', '#9333EA', '#F59E0B', '#F97316'];
break;
case 'tailwinddark':
palette = ['#10B981', '#22D3EE', '#2DD4BF', '#4ADE80', '#8B5CF6', '#E879F9', '#F472B6', '#F87171', '#F97316', '#FCD34D'];
break;
case 'tailwind3':
palette = ['#2F4074', '#03B4B4', '#0D72DE', '#FF5733', '#D63384', '#F39C12', '#EF291F', '#91C822'];
break;
case 'tailwind3dark':
palette = ['#8029F1', '#1ABC9C', '#0D72DE', '#FF5733', '#D63384', '#F39C12', '#EF291F', '#91C822'];
break;
case 'fluent':
palette = ['#614570', '#4C6FB1', '#CC6952', '#3F579A', '#4EA09B',
'#6E7A89', '#D4515C', '#E6AF5D', '#639751', '#9D4D69'];
break;
case 'fluentdark':
palette = ['#8AB113', '#2A72D5', '#43B786', '#584EC6', '#E85F9C',
'#6E7A89', '#EA6266', '#EBA844', '#26BC7A', '#BC4870'];
break;
case 'material3':
palette = ['#6200EE', '#E77A16', '#82C100', '#7107DC', '#05BB3D',
'#D21020', '#FAD200', '#0085FF', '#9204EA', '#08EE9B'];
break;
case 'material3dark':
palette = ['#4EAAFF', '#FA4EAB', '#FFF500', '#17EA58', '#38FFE7',
'#FF9E45', '#B3F32F', '#B93CE4', '#FC5664', '#9B55FF'];
break;
case 'fluent2':
palette = ['#6200EE', '#09AF74', '#0076E5', '#CB3587', '#E7910F', '#0364DE',
'#66CD15', '#F3A93C', '#107C10', '#C19C00'];
break;
case 'fluent2dark':
case 'fluent2highcontrast':
palette = ['#9BB449', '#2A72D5', '#43B786', '#3F579A', '#584EC6', '#E85F9C',
'#6E7A89', '#EA6266', '#0B6A0B', '#C19C00'];
break;
case 'bootstrap5':
case 'bootstrap5dark':
palette = ['#6610F2', '#6f42C1', '#D63384', '#DC3545',
'#FD7E14', '#FFC107', '#198754', '#0DCAF0'];
break;
default:
palette = ['#ff5985', '#ffb133', '#fcde0b', '#27d5ff', '#50c917'];
break;
}
return palette;
}
/** @private */
export function calculateShapes(
location: Rect, shape: MarkerType, size: Size,
url: string, options: PathOption, orientation: Orientation, axis: Axis, pointer: Pointer): PathOption {
let path: string;
const width: number = size.width;
const height: number = size.height;
let locX: number = location.x;
let locY: number = location.y;
let radius: number;
switch (shape) {
case 'Circle':
radius = ((width + height) / 4);
locX = (orientation === 'Vertical') ? (!axis.opposedPosition) ? (pointer.placement !== 'Far') ? locX - radius : locX + radius :
pointer.placement === 'Near' ? locX - radius : locX + radius : locX;
locY = (orientation === 'Vertical') ? locY : (!axis.opposedPosition) ? (pointer.placement === 'Far') ?
locY + radius : locY - radius : (pointer.placement === 'Near') ? locY - radius : locY + radius;
merge(options, { 'r': radius, 'cx': locX, 'cy': locY });
break;
case 'Diamond':
case 'Rectangle':
locX = (orientation === 'Horizontal') ? ((locX - (width / 2))) : ((!axis.opposedPosition && pointer.placement !== 'Far') ||
(axis.opposedPosition && pointer.placement === 'Near')) ? locX - width : locX;
locY = (orientation === 'Vertical') ? locY : (!axis.opposedPosition) ?
(pointer.placement === 'Far') ? locY + (height / 2) : locY - (height / 2) :
(pointer.placement === 'Near') ? locY - (height / 2) : locY + (height / 2);
if (shape === 'Diamond') {
path = 'M' + ' ' + locX + ' ' + locY + ' ' +
'L' + ' ' + (locX + (width / 2)) + ' ' + (locY - (height / 2)) + ' ' +
'L' + ' ' + (locX + width) + ' ' + locY + ' ' +
'L' + ' ' + (locX + (width / 2)) + ' ' + (locY + (height / 2)) + ' ' +
'L' + ' ' + locX + ' ' + locY + ' z';
} else {
path = 'M' + ' ' + locX + ' ' + (locY - (height / 2)) + ' ' +
'L' + ' ' + (locX + width) + ' ' + (locY - (height / 2)) + ' ' +
'L' + ' ' + (locX + width) + ' ' + (locY + (height / 2)) + ' ' +
'L' + ' ' + locX + ' ' + (locY + (height / 2)) + ' ' +
'L' + ' ' + locX + ' ' + (locY - (height / 2)) + ' z';
}
merge(options, { 'd': path });
break;
case 'Triangle':
if (orientation === 'Vertical') {
path = 'M' + ' ' + locX + ' ' + locY + ' ' +
'L' + (locX - width) + ' ' + (locY - (height / 2)) +
'L' + (locX - width) + ' ' + (locY + (height / 2)) + ' Z';
} else {
path = 'M' + ' ' + locX + ' ' + locY + ' ' +
'L' + (locX + (width / 2)) + ' ' + (locY - height) +
'L' + (locX - (width / 2)) + ' ' + (locY - height) + ' Z';
}
merge(options, { 'd': path });
break;
case 'InvertedTriangle':
if (orientation === 'Vertical') {
path = 'M' + ' ' + locX + ' ' + locY + ' ' +
'L' + (locX + width) + ' ' + (locY - (height / 2)) +
'L' + (locX + width) + ' ' + (locY + (height / 2)) + ' Z';
} else {
path = 'M' + ' ' + locX + ' ' + locY + ' ' +
'L' + (locX + (width / 2)) + ' ' + (locY + height) +
'L' + (locX - (width / 2)) + ' ' + (locY + height) + ' Z';
}
merge(options, { 'd': path });
break;
case 'Arrow':
if (orientation === 'Vertical') {
path = 'M' + ' ' + locX + ' ' + locY + ' ' + 'L' + (locX - (width / 2)) + ' ' + (locY - (height / 2)) + ' ' +
'L' + (locX - (width / 2)) + ' ' + ((locY - (height / 2)) + (height / 4)) + ' ' + 'L' + (locX - width) + ' '
+ ((locY - (height / 2)) + (height / 4)) + ' ' + 'L' + (locX - width) + ' ' + ((locY + (height / 2)) -
(height / 4)) + ' ' + 'L' + (locX - (width / 2)) + ' ' + ((locY + (height / 2)) - (height / 4)) + ' ' +
'L' + (locX - (width / 2)) + ' ' + (locY + height / 2) + 'z';
} else {
path = 'M' + ' ' + locX + ' ' + locY + ' ' + 'L' + (locX + (width / 2)) + ' ' + (locY - (height / 2)) + ' ' +
'L' + ((locX + (width / 2)) - (width / 4)) + ' ' + (locY - (height / 2)) + ' ' + 'L' + ((locX + (width / 2)) -
(width / 4)) + ' ' + (locY - height) + ' ' + 'L' + ((locX - (width / 2)) + (width / 4)) + ' ' + (locY - height) +
' ' + 'L' + ((locX - (width / 2)) + (width / 4)) + ' ' + (locY - (height / 2)) + ' ' + 'L' + (locX - (width / 2))
+ ' ' + (locY - (height / 2)) + 'z';
}
merge(options, { 'd': path });
break;
case 'InvertedArrow':
if (orientation === 'Vertical') {
path = 'M' + ' ' + locX + ' ' + locY + 'L' + (locX + (width / 2)) + ' ' + (locY - (height / 2)) + ' ' +
'L' + (locX + (width / 2)) + ' ' + ((locY - (height / 2)) + (height / 4)) + ' ' + 'L' + (locX + width) + ' '
+ ((locY - (height / 2)) + (height / 4)) + ' ' + 'L' + (locX + width) + ' ' + ((locY + (height / 2)) - (height / 4))
+ ' ' + 'L' + (locX + (width / 2)) + ' ' + ((locY + (height / 2)) - (height / 4)) + ' ' +
'L' + (locX + (width / 2)) + ' ' + (locY + height / 2) + 'z';
} else {
path = 'M' + ' ' + locX + ' ' + locY + ' ' + 'L' + (locX + (width / 2)) + ' ' + (locY + (height / 2)) + ' ' +
'L' + ((locX + (width / 2)) - (width / 4)) + ' ' + (locY + (height / 2)) + ' ' + 'L' + ((locX + (width / 2)) -
(width / 4)) + ' ' + (locY + height) + ' ' + 'L' + ((locX - (width / 2)) + (width / 4)) + ' ' + (locY + height)
+ ' ' + 'L' + ((locX - (width / 2)) + (width / 4)) + ' ' + (locY + (height / 2)) + ' ' +
'L' + (locX - (width / 2)) + ' ' + (locY + (height / 2)) + 'z';
}
merge(options, { 'd': path });
break;
case 'Image':
merge(options, { 'href': url, 'height': height, 'width': width, x: locX - (width / 2), y: locY - (height / 2) });
break;
}
return options;
}
/** @private */
export function calculateTextPosition(
location: Rect, shape: MarkerType,
options: TextOption, orientation: Orientation, axis: Axis, pointer: Pointer): TextOption {
let width: number;
let height: number;
let textSize : Size;
let locX: number = location.x;
let locY: number = location.y;
switch (shape) {
case 'Text':
textSize = measureText(pointer.text, pointer.textStyle);
height = textSize.height;
width = textSize.width;
locX = (orientation === 'Horizontal') ? ((locX - (width / 2))) : ((!axis.opposedPosition && pointer.placement !== 'Far') ||
(axis.opposedPosition && pointer.placement === 'Near')) ? (pointer.position === 'Inside' && !axis.opposedPosition) ||
(pointer.position === 'Cross') || (axis.opposedPosition && pointer.placement === 'Near' && pointer.position === 'Outside') ? locX - (width / 2) : locX - width : (pointer.position === 'Cross' && pointer.placement === 'Far') ||
(axis.opposedPosition && pointer.position === 'Cross' && (pointer.placement === 'None' || pointer.placement === 'Center')) ? locX + (width / 2) : locX;
locY = (orientation === 'Vertical') ? locY + (height / 4) : (!axis.opposedPosition) ?
(pointer.placement === 'Far') ? pointer.position === 'Cross' ? locY + (height / 2) + (height / 4) : pointer.position === 'Inside' ? locY + height : locY + (height / 2) : locY :
(pointer.placement === 'Near') ? locY : pointer.position === 'Cross' ? locY + (height / 2) + (height / 4) : pointer.position === 'Outside' ? locY + height : locY + (height / 2);
merge(options, { x: locX, y: locY });
break;
}
return options;
}
/** @private */
export function getBox(
location: Rect, boxName: string, orientation: Orientation,
size: Size, type: string, containerWidth: number, axis: Axis, cornerRadius: number): string {
let path: string = ' ';
let radius: number = cornerRadius; let horizontalRadius: number;
let x1: number; let y1: number; let rectWidth: number; let rectHeight: number; let verticalRadius: number;
let bottomRadius: number; let topRadius: number; let horizontalCurve: number; let verticalCurve: number;
switch (boxName) {
case 'RoundedRectangle':
x1 = location.x;
y1 = location.y;
rectWidth = location.width;
rectHeight = location.height;
if (((orientation === 'Vertical' && location.height === 0) || (orientation === 'Horizontal' && location.width === 0)) && radius > 10){
radius = 10;
}
horizontalCurve = x1 + rectWidth - radius;
verticalCurve = y1 + rectHeight - radius;
verticalRadius = radius + y1;
horizontalRadius = radius + x1;
if (type === 'container' || type === 'bar' && ((orientation === 'Vertical' && location.height !== 0) || (orientation === 'Horizontal' && location.width !== 0))) {
if (horizontalRadius > (x1 + (rectWidth / 2))){
horizontalRadius = x1 + (rectWidth / 2);
horizontalCurve = horizontalRadius;
}
if (verticalRadius > (y1 + (rectHeight / 2))) {
verticalRadius = y1 + (rectHeight / 2);
verticalCurve = verticalRadius;
}
}
if (type === 'bar' && ((orientation === 'Vertical' && location.height === 0) || (orientation === 'Horizontal' && location.width === 0))) {
if (location.width < radius / 2 && !axis.isInversed) {
horizontalCurve = horizontalCurve + radius + radius / 2;
} else if (location.width < radius / 2 && axis.isInversed) {
horizontalRadius = x1 - Math.ceil(radius / 4);
}
if (location.height < radius / 2 && !axis.isInversed) {
verticalRadius = y1 - Math.ceil(radius / 4);
} else if (location.height < radius / 2 && axis.isInversed) {
verticalCurve = verticalCurve + radius + radius / 2;
}
}
path = 'M' + ' ' + x1 + ' ' + verticalRadius + ' Q ' + x1 + ' ' + y1 + ' ' + horizontalRadius + ' ' + y1 + ' ';
path += 'L' + ' ' + horizontalCurve + ' ' + y1 + ' Q ' + (x1 + rectWidth) + ' ' + y1 + ' '
+ (x1 + rectWidth) + ' ' + verticalRadius + ' ';
path += 'L ' + (x1 + rectWidth) + ' ' + verticalCurve + ' Q ' + (x1 + rectWidth) + ' ' + (y1 + rectHeight)
+ ' ' + horizontalCurve + ' ' + (y1 + rectHeight) + ' ';
path += ' L ' + horizontalRadius + ' ' + (y1 + rectHeight) + ' Q ' + x1 + ' ' + (y1 + rectHeight)
+ ' ' + x1 + ' ' + verticalCurve + ' ';
path += 'L' + ' ' + x1 + ' ' + verticalRadius + ' ' + 'z';
break;
case 'Thermometer':
// eslint-disable-next-line no-case-declarations
const width: number = (orientation === 'Vertical') ? location.width : location.height;
bottomRadius = width + ((width / 2) / Math.PI);
topRadius = width / 2;
if (orientation === 'Vertical') {
const addValue: number = ((containerWidth + ((containerWidth / 2) / Math.PI)) - bottomRadius);
const y1: number = (type === 'bar') ? location.y + addValue : location.y;
const locY: number = (type === 'bar') ? location.y + (topRadius - (topRadius / Math.PI)) : location.y;
const locHeight: number = location.height;
path = 'M' + location.x + ' ' + (y1 + locHeight) +
' A ' + bottomRadius + ' ' + bottomRadius + ', 0, 1, 0, ' + (location.x + location.width) + ' ' + (y1 + locHeight) +
' L ' + (location.x + location.width) + ' ' + locY +
' A ' + topRadius + ' ' + topRadius + ', 0, 1, 0, ' + location.x + ' ' + locY + ' z ';
} else {
const x1: number = (type === 'bar' && !axis.isInversed) ?
location.x - ((containerWidth + ((containerWidth / 2) / Math.PI)) - bottomRadius) : location.x;
const locWidth: number = (type === 'bar') ? (location.width - (topRadius - ((topRadius / Math.PI)))) : location.width;
path = 'M' + x1 + ' ' + (location.y) +
' A ' + bottomRadius + ' ' + bottomRadius + ', 0, 1, 0, ' + x1 + ' ' + (location.y + location.height) +
' L ' + ((type === 'bar' ? location.x : x1) + locWidth) + ' ' + (location.y + location.height) +
' A ' + topRadius + ' ' + topRadius + ', 0, 1, 0, ' +
((type === 'bar' ? location.x : x1) + locWidth) + ' ' + (location.y) + ' z ';
}
break;
}
return path;
}
/** @private */
export function getExtraWidth(gaugeElement: HTMLElement): number {
const svgElement: HTMLElement = getElement(gaugeElement.id + '_svg');
let extraWidth: number = 0;
if (!isNullOrUndefined(svgElement) && !isNullOrUndefined(gaugeElement)) {
extraWidth = gaugeElement.getBoundingClientRect().left - svgElement.getBoundingClientRect().left;
}
return extraWidth;
}
/**
* @param {string} text - Specifies the text.
* @returns {void}
* @private */
export function showTooltip(text: string, gauge: LinearGauge): void {
let tooltip: HTMLElement = getElement(gauge.element.id + '_EJ2_Title_Tooltip');
if (!tooltip) {
let titleWidth: number = measureText(text, { size: '12px', fontFamily: 'Segoe UI' }).width + 10;
titleWidth = titleWidth < gauge.actualRect.width ? titleWidth : gauge.actualRect.width - 10;
tooltip = createElement('div', { id: gauge.element.id + '_EJ2_Title_Tooltip', className: 'EJ2-LinearGauge-Tooltip' });
tooltip.innerText = text;
tooltip.style.cssText = 'top:' + (gauge.actualRect.y + 10).toString() + 'px; left:' + (gauge.actualRect.x).toString() +
'px; background-color:rgb(255, 255, 255) !important; color:black !important; ' +
'position:absolute; border:1px solid rgb(112, 112, 112); padding-left:3px; padding-right:2px;' +
'padding-bottom:2px; padding-top:2px; font-size:12px; font-family:"Segoe UI";' + 'width:' + (titleWidth) + 'px;';
document.body.style.overflow = 'hidden';
getElement(gauge.element.id + '_Secondary_Element').appendChild(tooltip);
} else {
tooltip.innerText = text;
tooltip.style.top = (gauge.actualRect.y + 10).toString() + 'px';
tooltip.style.left = (gauge.actualRect.x).toString() + 'px';
}
}
/** @private */
export function removeTooltip(): void {
if (document.getElementsByClassName('EJ2-LinearGauge-Tooltip').length > 0) {
document.getElementsByClassName('EJ2-LinearGauge-Tooltip')[0].remove();
}
}
dist/ej2-lineargauge.min.js

Sorry, the diff of this file is too big to display

dist/ej2-lineargauge.umd.min.js

Sorry, the diff of this file is too big to display

dist/global/ej2-lineargauge.min.js

Sorry, the diff of this file is too big to display