@syncfusion/ej2-charts
Version:
Feature-rich chart control with built-in support for over 25 chart types, technical indictors, trendline, zooming, tooltip, selection, crosshair and trackball.
364 lines (363 loc) • 11.8 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
import { createElement, compile as templateComplier, remove } from '@syncfusion/ej2-base';
import { SvgRenderer } from '@syncfusion/ej2-svg-base';
import { Animation } from '@syncfusion/ej2-base';
import { SmithchartSize } from '../../smithchart/utils/utils';
/**
* To create the svg element.
*
* @param {Smithchart} smithchart smithchart instance
* @returns {void}
*/
export function createSvg(smithchart) {
smithchart.renderer = new SvgRenderer(smithchart.element.id);
calculateSize(smithchart);
smithchart.svgObject = smithchart.renderer.createSvg({
id: smithchart.element.id + '_svg',
width: smithchart.availableSize.width,
height: smithchart.availableSize.height
});
}
/**
* To get the html element from DOM.
*
* @param {string} id id of the html element
* @returns {Element} html element.
*/
export function getElement(id) {
return document.getElementById(id);
}
/**
* To trim the text by given width.
*
* @param {number} maximumWidth - max width of the text
* @param {string} text - text
* @param {SmithchartFontModel} font - text style
* @param {SmithchartFontModel} themeFontStyle - theme font style
* @returns {string} - It returns trimmed text
*/
export function textTrim(maximumWidth, text, font, themeFontStyle) {
var label = text;
var size = measureText(text, font, themeFontStyle).width;
if (size > maximumWidth) {
var textLength = text.length;
for (var i = textLength - 1; i >= 0; --i) {
label = text.substring(0, i) + '...';
size = measureText(label, font, themeFontStyle).width;
if (size <= maximumWidth || label.length < 4) {
if (label.length < 4) {
label = ' ';
}
return label;
}
}
}
return label;
}
/**
* Function to compile the template function for maps.
*
* @param {string | Function} templateString - template with string format.
* @returns {Function} - return template function.
* @private
*/
export function getTemplateFunction(templateString) {
var templateFn = null;
try {
if (typeof templateString !== 'function' && document.querySelectorAll(templateString).length) {
templateFn = templateComplier(document.querySelector(templateString).innerHTML.trim());
}
else {
templateFn = templateComplier(templateString);
}
}
catch (e) {
templateFn = templateComplier(templateString);
}
return templateFn;
}
/**
* Get element from label.
*
* @param {Element} element - element
* @param {string} labelId - label id
* @param {object} data - chart data
* @returns {HTMLElement} - html element
*/
export function convertElementFromLabel(element, labelId, data) {
var labelEle = element[0];
var templateHtml = labelEle.outerHTML;
var properties = Object.keys(data);
var regExp = RegExp;
for (var i = 0; i < properties.length; i++) {
templateHtml = templateHtml.replace(new regExp('{{:' + properties[i] + '}}', 'g'), data[properties[i].toString()]);
}
var templateElement = createElement('div', {
id: labelId,
styles: 'position: absolute'
});
templateElement.innerText = templateHtml;
return templateElement;
}
/**
* Get epsilon value.
*
* @returns {number} - return epsilon value.
* @private
*/
export function _getEpsilonValue() {
var e = 1.0;
while ((1.0 + 0.5 * e) !== 1.0) {
e *= 0.5;
}
return e;
}
/**
* Method to calculate the width and height of the smithchart.
*
* @param {Smithchart} smithchart - smithchart instance.
* @returns {void}
*/
export function calculateSize(smithchart) {
var containerWidth = smithchart.element.clientWidth;
var containerHeight = smithchart.element.clientHeight;
smithchart.availableSize = new SmithchartSize(stringToNumber(smithchart.width, containerWidth) || containerWidth || 600, stringToNumber(smithchart.height, containerHeight) || containerHeight || 450);
}
/**
* Method for template animation.
*
* @param {Smithchart} smithchart - smithchart
* @param {Element} element - html element
* @param {number} delay - animation delay
* @param {number} duration - animation duration
* @param {Effect} name - animation name
* @returns {void}
*/
export function templateAnimate(smithchart, element, delay, duration, name) {
var opacity = 0;
var delta;
var value;
new Animation({}).animate(element, {
duration: duration,
delay: delay,
name: name,
progress: function (args) {
delta = ((args.timeStamp - args.delay) / args.duration);
value = opacity + (delta * 1);
args.element.style.opacity = value.toString();
},
end: function (args) {
var opacity = 1;
args.element.style.opacity = opacity.toString();
smithchart.trigger('animationComplete', event);
}
});
}
/**
* Convert string to number.
*
* @param {string} value - string type value.
* @param {number} containerSize - size of the container.
* @returns {number} - returns converted number.
* @private
*/
export function stringToNumber(value, containerSize) {
if (value !== null && value !== undefined) {
return value.indexOf('%') !== -1 ? (containerSize / 100) * parseInt(value, 10) : parseInt(value, 10);
}
return null;
}
/**
* Internal use of path options.
*
* @private
*/
var PathOption = /** @class */ (function () {
function PathOption(id, fill, width, color, opacity, dashArray, d) {
this.id = id;
this.opacity = opacity;
this.fill = fill;
this.stroke = color;
this['stroke-width'] = width;
this['stroke-dasharray'] = dashArray;
this.d = d;
}
return PathOption;
}());
export { PathOption };
/**
* Internal use of rectangle options.
*
* @private
*/
var RectOption = /** @class */ (function (_super) {
__extends(RectOption, _super);
function RectOption(id, fill, border, opacity, rect) {
var _this = _super.call(this, id, fill, border.width, border.color, opacity) || this;
_this.y = rect.y;
_this.x = rect.x;
_this.height = rect.height;
_this.width = rect.width;
return _this;
}
return RectOption;
}(PathOption));
export { RectOption };
/**
* Internal use of circle options.
*
* @private
*/
var CircleOption = /** @class */ (function (_super) {
__extends(CircleOption, _super);
function CircleOption(id, fill, border, opacity, cx, cy, r, dashArray) {
var _this = _super.call(this, id, fill, border.width, border.color, opacity) || this;
_this.cy = cy;
_this.cx = cx;
_this.r = r;
_this['stroke-dasharray'] = dashArray;
return _this;
}
return CircleOption;
}(PathOption));
export { CircleOption };
/**
* Method for calculate width and height of given string.
*
* @param {string} text - text value
* @param {SmithchartFontModel} font - text font style
* @param {SmithchartFontModel} themeFontStyle - theme font style
* @returns {SmithchartSize} - size of the text
*/
export function measureText(text, font, themeFontStyle) {
var htmlObject = document.getElementById('smithchartmeasuretext');
if (htmlObject === null) {
htmlObject = createElement('text', { id: 'smithchartmeasuretext' });
document.body.appendChild(htmlObject);
}
htmlObject.innerText = text;
htmlObject.style.position = 'absolute';
htmlObject.style.visibility = 'hidden';
htmlObject.style.left = '0';
htmlObject.style.top = '-100';
htmlObject.style.whiteSpace = 'nowrap';
htmlObject.style.fontSize = font.size || themeFontStyle.size;
htmlObject.style.fontWeight = font.fontWeight || themeFontStyle.fontWeight;
htmlObject.style.fontStyle = font.fontStyle || themeFontStyle.fontStyle;
htmlObject.style.fontFamily = font.fontFamily || themeFontStyle.fontFamily;
// For bootstrap line height issue
htmlObject.style.lineHeight = 'normal';
return new SmithchartSize(htmlObject.clientWidth, htmlObject.clientHeight);
}
/**
* Internal use of text options
*
* @private
*/
var TextOption = /** @class */ (function () {
function TextOption(id, x, y, anchor, text) {
this.id = id;
this.x = x;
this.y = y;
this.anchor = anchor;
this.text = text;
}
return TextOption;
}());
export { TextOption };
/**
* Remove html element from DOM.
*
* @param {string} id - element id
* @returns {void}
*/
export function removeElement(id) {
var element = document.getElementById(id);
return element ? remove(element) : null;
}
/**
* Animation Effect Calculation Started Here.
*
* @param {number} currentTime - current time
* @param {number} startValue - start value of the animation
* @param {number} endValue - end value of the animation
* @param {number} duration - animation duration
* @returns {number} - number
* @private
*/
export function linear(currentTime, startValue, endValue, duration) {
return -endValue * Math.cos(currentTime / duration * (Math.PI / 2)) + endValue + startValue;
}
/**
* Reverse linear calculation.
*
* @param {number} currentTime - current time
* @param {number} startValue - start value of the animation
* @param {number} endValue - end value of the animation
* @param {number} duration - animation duration
* @returns {number} - number
*/
export function reverselinear(currentTime, startValue, endValue, duration) {
return -startValue * Math.sin(currentTime / duration * (Math.PI / 2)) + endValue + startValue;
}
/**
* Get animation function name.
*
* @param {string} effect - animation effect name
* @returns {Function} - animation function
* @private
*/
export function getAnimationFunction(effect) {
var functionName;
switch (effect) {
case 'Linear':
functionName = linear;
break;
case 'Reverse':
functionName = reverselinear;
break;
}
return functionName;
}
/**
* Internal rendering of text.
*
* @param {TextOption} options - text element options.
* @param {SmithchartFontModel} font - text font style.
* @param {string} color - color of the text.
* @param {HTMLElement | Element} parent - parent element of the text.
* @param {SmithchartFontModel} themeFontStyle - theme font style.
* @returns {Element} - text element.
* @private
*/
export function renderTextElement(options, font, color, parent, themeFontStyle) {
var renderOptions = {
'id': options.id,
'x': options.x,
'y': options.y,
'fill': color,
'font-size': font.size || themeFontStyle.size,
'font-style': font.fontStyle || themeFontStyle.fontStyle,
'font-family': font.fontFamily || themeFontStyle.fontFamily,
'font-weight': font.fontWeight || themeFontStyle.fontWeight,
'text-anchor': options.anchor,
'opacity': font.opacity
};
var text = options.text;
var renderer = new SvgRenderer('');
var htmlObject = renderer.createText(renderOptions, text);
parent.appendChild(htmlObject);
return htmlObject;
}