@syncfusion/ej2-circulargauge
Version:
Essential JS 2 CircularGauge Components
340 lines (314 loc) • 13.5 kB
text/typescript
import { CircularGauge } from '../circular-gauge';
import { ColorStopModel, GradientPositionModel } from './gradient-model';
import { Property, ChildProperty, Complex, Collection, isNullOrUndefined } from '@syncfusion/ej2-base';
import { GradientColor, LinearGradient as Linear, RadialGradient as Radial } from '@syncfusion/ej2-svg-base';
import { PointerModel, CapModel, NeedleTailModel, RangeModel } from '../axes/axis-model';
import { SvgRenderer } from '@syncfusion/ej2-svg-base';
/**
* Specifies the color information for the gradient in the circular gauge.
*/
export class ColorStop extends ChildProperty<ColorStop> {
/**
* Defines the color to be used in the gradient.
*
* @default '#000000'
*/
public color: string;
/**
* Defines the opacity to be used in the gradient.
*
* @default 1
*/
public opacity: number;
/**
* Defines the gradient color begin and end in percentage.
*
* @default '0%'
*/
public offset: string;
/**
* Defines the style of the color stop in the gradient element.
*
* @default ''
*/
public style: string;
}
/**
* Specifies the position in percentage from which the radial gradient must be applied.
*/
export class GradientPosition extends ChildProperty<GradientPosition> {
/**
* Defines the horizontal position in percentage.
*
* @default '0%'
*/
public x: string;
/**
* Defines the vertical position in percentage.
*
* @default '0%'
*/
public y: string;
}
/**
* This specifies the properties of the linear gradient colors for the circular gauge.
*/
export class LinearGradient extends ChildProperty<LinearGradient> {
/**
* Defines the start value of the linear gradient.
*
* @default ''
*/
public startValue: string;
/**
* Defines the end value of the linear gradient.
*
* @default ''
*/
public endValue: string;
/**
* Defines the color range properties for the gradient.
*
*/
<ColorStopModel>([{ color: '#000000', opacity: 1, offset: '0%', style: '' }], ColorStop)
public colorStop: ColorStopModel[];
}
/**
* This specifies the properties of the radial gradient colors for the circular gauge.
*/
export class RadialGradient extends ChildProperty<RadialGradient> {
/**
* Defines the radius of the radial gradient in percentage.
*
* @default '0%'
*/
public radius: string;
/**
* Defines the outer circle of the radial gradient.
*/
<GradientPositionModel>({ x: '0%', y: '0%' }, GradientPosition)
public outerPosition: GradientPositionModel;
/**
* Defines the inner circle of the radial gradient.
*/
<GradientPositionModel>({ x: '0%', y: '0%' }, GradientPosition)
public innerPosition: GradientPositionModel;
/**
* Defines the color range properties for the gradient.
*/
<ColorStopModel>([{ color: '#000000', opacity: 1, offset: '0%', style: '' }], ColorStop)
public colorStop: ColorStopModel[];
}
/**
* Sets and gets the module that enables the gradient option for pointers and ranges.
*
* @hidden
*/
export class Gradient {
private gauge: CircularGauge;
/**
* Constructor for gauge
*
* @param {CircularGauge} gauge - Specifies the instance of the gauge
*/
constructor(gauge: CircularGauge) {
this.gauge = gauge;
}
/**
* To get linear gradient string for pointers and ranges
*
* @param { PointerModel | CapModel | NeedleTailModel | RangeModel} element - Specifies the element.
* @param {name} name - Specifies the name of the gradient.
* @param {name} direction - Specifies the gradient position.
* @returns {string} - Returns the string value.
* @private
*/
private calculateLinearGradientPosition(
element: PointerModel | CapModel | NeedleTailModel | RangeModel,
name: string, direction: string
): Linear {
const linearPosition: Linear = {
id: name,
x1: (isNullOrUndefined(element.linearGradient.startValue) && name.indexOf('range') !== -1
? (direction === 'right' ? '100%' : '0%')
: (!isNullOrUndefined(element.linearGradient.startValue) ? ((element.linearGradient.startValue.indexOf('%') === -1 ?
element.linearGradient.startValue :
parseFloat(element.linearGradient.startValue).toString()) + '%') : '0%')),
x2: (isNullOrUndefined(element.linearGradient.endValue) && name.indexOf('range') !== -1 ?
(direction === 'left' ? '100%' : '0%') :
(!isNullOrUndefined(element.linearGradient.endValue) ? ((element.linearGradient.endValue.indexOf('%') === -1 ?
element.linearGradient.endValue : parseFloat(element.linearGradient.endValue).toString()) + '%') : '100%')),
y1: (isNullOrUndefined(element.linearGradient.startValue) && name.indexOf('range') !== -1
? (direction === 'bottom' ? '100%' : '0%') : '0%'),
y2: (isNullOrUndefined(element.linearGradient.endValue) && name.indexOf('range') !== -1
? (direction === 'top' ? '100%' : '0%') : '0%')
};
return linearPosition;
}
/**
* To get linear gradient string for pointers and ranges
*
* @param { PointerModel | CapModel | NeedleTailModel | RangeModel} element - Specifies the element.
* @param {number} index - Specifies the index of the axis.
* @param { string } direction - Specifies the gradient position.
* @param { number } rangeIndex - Specifies the index of the range.
* @returns {string} - Returns the string value.
* @private
*/
private getLinearGradientColor(
element: PointerModel | CapModel | NeedleTailModel | RangeModel,
index : number, direction : string, rangeIndex : number
): string {
const render: SvgRenderer = new SvgRenderer('');
const colors: GradientColor[] = (isNullOrUndefined(element.linearGradient.startValue) &&
isNullOrUndefined(element.linearGradient.endValue) && !isNullOrUndefined(rangeIndex)) ?
this.getCircularGradientColor(element.linearGradient.colorStop, index) :
this.getGradientColor(element.linearGradient.colorStop);
const name: string = (isNullOrUndefined(element.linearGradient.startValue) &&
isNullOrUndefined(element.linearGradient.endValue) && !isNullOrUndefined(rangeIndex)) ?
'_' + this.gauge.svgObject.id + '_range_' +
rangeIndex + '_color_' + index + '_' + 'linearGradient'
: '_' + this.gauge.svgObject.id + '_' + this.gauge.gradientCount + '_' + 'linearGradient';
let gradientPosition: Linear = this.calculateLinearGradientPosition(element, name, direction);
gradientPosition = {
id: gradientPosition.id,
x1: gradientPosition.x1,
x2: gradientPosition.x2,
y1: gradientPosition.y1,
y2: gradientPosition.y2
};
const def: Element = render.drawGradient('linearGradient', gradientPosition, colors);
this.gauge.svgObject.appendChild(def);
return 'url(#' + name + ')';
}
/**
* To get color, opacity, offset and style for circular gradient path.
*
* @param {ColorStopModel[]} colorStop - Specifies the colorStop.
* @param {number} index - Specifies the index.
* @returns {GradientColor[]} - return the gradient color value.
* @private
*/
private getCircularGradientColor(colorStop: ColorStopModel[], index : number): GradientColor[] {
const colors: GradientColor[] = []; let colorIndex : number = index;
for (let j: number = colorIndex; j < (index === (colorStop.length - 1) ? index + 1 : index + 2); j++) {
const color: GradientColor = {
color: colorStop[j as number].color,
colorStop: colorStop[j as number].offset,
opacity: colorStop[j as number].opacity ? colorStop[j as number].opacity.toString() : '1',
style: colorStop[j as number].style
};
colors.push(color);
colorIndex++;
}
return colors;
}
/**
* To get the radial gradient string.
*
* @param {PointerModel | CapModel | NeedleTailModel | RangeModel} element - Specifies the element.
* @returns {string} - Returns the string.
* @private
*/
private getRadialGradientColor(element: PointerModel | CapModel | NeedleTailModel | RangeModel): string {
const render: SvgRenderer = new SvgRenderer('');
const colors: GradientColor[] = this.getGradientColor(element.radialGradient.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: (!isNullOrUndefined(element.radialGradient.outerPosition) && !isNullOrUndefined(element.radialGradient.outerPosition.x)) ?
(element.radialGradient.outerPosition.x.indexOf('%') === -1 ?
element.radialGradient.outerPosition.x :
parseFloat(element.radialGradient.outerPosition.x).toString()) + '%' : '0%',
cy: (!isNullOrUndefined(element.radialGradient.outerPosition) && !isNullOrUndefined(element.radialGradient.outerPosition.y)) ?
(element.radialGradient.outerPosition.y.indexOf('%') === -1 ?
element.radialGradient.outerPosition.y :
parseFloat(element.radialGradient.outerPosition.y).toString()) + '%' : '0%',
fx: (!isNullOrUndefined(element.radialGradient.innerPosition) && !isNullOrUndefined(element.radialGradient.innerPosition.x)) ?
(element.radialGradient.innerPosition.x.indexOf('%') === -1 ?
element.radialGradient.innerPosition.x :
parseFloat(element.radialGradient.innerPosition.x).toString()) + '%' : '0%',
fy: (!isNullOrUndefined(element.radialGradient.innerPosition) && !isNullOrUndefined(element.radialGradient.innerPosition.y)) ?
(element.radialGradient.innerPosition.y.indexOf('%') === -1 ?
element.radialGradient.innerPosition.y :
parseFloat(element.radialGradient.innerPosition.y).toString()) + '%' : '0%'
};
const def: Element = render.drawGradient('radialGradient', gradientPosition, colors);
this.gauge.svgObject.appendChild(def);
return 'url(#' + name + ')';
}
/**
* To get color, opacity, offset and style.
*
* @param { ColorStopModel[]} colorStop - Specifies the color stop.
* @returns {GradientColor[]} - Returns the gradientColor.
* @private
*/
private getGradientColor(colorStop: ColorStopModel[]): GradientColor[] {
const colors: GradientColor[] = [];
for (let j: number = 0; j < colorStop.length; j++) {
const color: GradientColor = {
color: colorStop[j as number].color,
colorStop: colorStop[j as number].offset,
opacity: colorStop[j as number].opacity ? colorStop[j as number].opacity.toString() : '1',
style: colorStop[j as number].style
};
colors.push(color);
}
return colors;
}
/**
* To get a gradient color string
*
* @param {PointerModel | CapModel | NeedleTailModel | RangeModel} element - Specifies the element.
* @param {number} index - specifies the index.
* @param {string} direction - specifies the direction.
* @param {number} rangeIndex - specifies the index of range.
* @returns {string} - Returns the string
* @private
*/
public getGradientColorString(
element: PointerModel | CapModel | NeedleTailModel | RangeModel,
index?: number, direction?: string, rangeIndex?: number
): string {
let gradientColor: string;
if ((element.linearGradient && !isNullOrUndefined(element.linearGradient.colorStop)) ||
(element.radialGradient && !isNullOrUndefined(element.radialGradient.colorStop))) {
if (element.linearGradient) {
gradientColor = this.getLinearGradientColor(element, index, direction, rangeIndex);
} else {
gradientColor = this.getRadialGradientColor(element);
}
this.gauge.gradientCount = this.gauge.gradientCount + 1;
} else {
return null;
}
return gradientColor;
}
protected getModuleName(): string {
// Returns te module name
return 'Gradient';
}
/**
* To destroy the Gradient.
*
* @returns {void}
* @private
*/
public destroy(): void {
this.gauge = null;
}
}