{"version":3,"file":"ej2-svg-base.min.js","sources":["../../src/tooltip/interface.js","../../src/tooltip/helper.js","../../src/svg-render/svg-renderer.js","../../src/svg-render/canvas-renderer.js","../../src/tooltip/tooltip.js"],"sourcesContent":["/** @private */\nexport function getTooltipThemeColor(theme) {\n var style;\n switch (theme) {\n case 'Highcontrast':\n case 'HighContrast':\n style = {\n tooltipFill: '#ffffff',\n tooltipBoldLabel: '#000000',\n tooltipLightLabel: '#000000',\n tooltipHeaderLine: '#969696'\n };\n break;\n case 'MaterialDark':\n case 'FabricDark':\n case 'BootstrapDark':\n style = {\n tooltipFill: '#F4F4F4',\n tooltipBoldLabel: '#282727',\n tooltipLightLabel: '#333232',\n tooltipHeaderLine: '#9A9A9A'\n };\n break;\n case 'Bootstrap4':\n style = {\n tooltipFill: '#020202',\n tooltipBoldLabel: 'rgba(255, 255, 255)',\n tooltipLightLabel: 'rgba(255, 255, 255, 0.9)',\n tooltipHeaderLine: 'rgba(255, 255, 255, 0.2)'\n };\n break;\n case 'Tailwind':\n style = {\n tooltipFill: '#111827',\n tooltipBoldLabel: '#D1D5DB',\n tooltipLightLabel: '#F9FAFB',\n tooltipHeaderLine: '#6B7280',\n };\n break;\n case 'TailwindDark':\n style = {\n tooltipFill: '#F9FAFB',\n tooltipBoldLabel: '#6B7280',\n tooltipLightLabel: '#1F2937',\n tooltipHeaderLine: '#9CA3AF',\n };\n break;\n case 'Bootstrap5':\n style = {\n tooltipFill: '#212529',\n tooltipBoldLabel: '#F9FAFB',\n tooltipLightLabel: '#F9FAFB',\n tooltipHeaderLine: '#9CA3AF',\n };\n break;\n case 'Bootstrap5Dark':\n style = {\n tooltipFill: '#E9ECEF',\n tooltipBoldLabel: '#212529',\n tooltipLightLabel: '#212529',\n tooltipHeaderLine: '#ADB5BD',\n };\n break;\n case 'Fluent':\n style = {\n tooltipFill: '#FFFFFF',\n tooltipBoldLabel: '#323130',\n tooltipLightLabel: '#323130',\n tooltipHeaderLine: '#D2D0CE',\n };\n break;\n case 'FluentDark':\n style = {\n tooltipFill: '#252423',\n tooltipBoldLabel: '#F3F2F1',\n tooltipLightLabel: '#F3F2F1',\n tooltipHeaderLine: '#3B3A39',\n };\n break;\n default:\n style = {\n tooltipFill: '#000816',\n tooltipBoldLabel: '#ffffff',\n tooltipLightLabel: '#dbdbdb',\n tooltipHeaderLine: '#ffffff'\n };\n break;\n }\n return style;\n}\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { SvgRenderer } from '../svg-render/index';\nimport { createElement, remove, merge } from '@syncfusion/ej2-base';\n/**\n * Function to measure the height and width of the text.\n *\n * @private\n * @param {string} text To get a text\n * @param {FontModel} font To get a font of the text\n * @returns {Size} measureText\n */\nexport function measureText(text, font) {\n var breakText = text || ''; // For avoid NuLL value\n var htmlObject = document.getElementById('chartmeasuretext');\n if (htmlObject === null) {\n htmlObject = createElement('text', { id: 'chartmeasuretext' });\n document.body.appendChild(htmlObject);\n }\n if (typeof (text) === 'string' && (text.indexOf('<') > -1 || text.indexOf('>') > -1)) {\n var textArray = text.split(' ');\n for (var i = 0; i < textArray.length; i++) {\n if (textArray[i].indexOf('
') === -1) {\n textArray[i] = textArray[i].replace(/[<>]/g, '&');\n }\n }\n text = textArray.join(' ');\n }\n htmlObject.innerHTML = (breakText.indexOf('
') > -1 || breakText.indexOf('
') > -1) ? breakText : text;\n htmlObject.style.position = 'fixed';\n htmlObject.style.fontSize = font.size;\n htmlObject.style.fontWeight = font.fontWeight;\n htmlObject.style.fontStyle = font.fontStyle;\n htmlObject.style.fontFamily = font.fontFamily;\n htmlObject.style.visibility = 'hidden';\n htmlObject.style.top = '-100';\n htmlObject.style.left = '0';\n htmlObject.style.whiteSpace = 'nowrap';\n // For bootstrap line height issue\n htmlObject.style.lineHeight = 'normal';\n return new Size(htmlObject.clientWidth, htmlObject.clientHeight);\n}\n/** @private */\nexport function withInAreaBounds(x, y, areaBounds, width, height) {\n if (width === void 0) { width = 0; }\n if (height === void 0) { height = 0; }\n return (x >= areaBounds.x - width && x <= areaBounds.x + areaBounds.width + width && y >= areaBounds.y - height\n && y <= areaBounds.y + areaBounds.height + height);\n}\n/** @private */\nexport function findDirection(rX, rY, rect, arrowLocation, arrowPadding, top, bottom, left, tipX, tipY, controlName) {\n if (controlName === void 0) { controlName = ''; }\n var direction = '';\n var startX = rect.x;\n var startY = rect.y;\n var width = rect.x + rect.width;\n var height = rect.y + rect.height;\n if (top) {\n direction = direction.concat('M' + ' ' + (startX) + ' ' + (startY + rY) + ' Q ' + startX + ' '\n + startY + ' ' + (startX + rX) + ' ' + startY + ' ' +\n ' L' + ' ' + (width - rX) + ' ' + (startY) + ' Q ' + width + ' '\n + startY + ' ' + (width) + ' ' + (startY + rY));\n direction = direction.concat(' L' + ' ' + (width) + ' ' + (height - rY) + ' Q ' + width + ' '\n + (height) + ' ' + (width - rX) + ' ' + (height));\n if (arrowPadding !== 0) {\n if (controlName === 'RangeNavigator') {\n if ((arrowLocation.x - arrowPadding) > width / 2) {\n direction = direction.concat(' L' + ' ' + (arrowLocation.x + arrowPadding) + ' ' + (height));\n direction = direction.concat(' L' + ' ' + (tipX + arrowPadding) + ' ' + (height + arrowPadding)\n + ' L' + ' ' + (arrowLocation.x) + ' ' + height);\n }\n else {\n direction = direction.concat(' L' + ' ' + (arrowLocation.x) + ' ' + (height));\n direction = direction.concat(' L' + ' ' + (tipX - arrowPadding) + ' ' + (height + arrowPadding)\n + ' L' + ' ' + (arrowLocation.x - arrowPadding) + ' ' + height);\n }\n }\n else {\n direction = direction.concat(' L' + ' ' + (arrowLocation.x + arrowPadding) + ' ' + (height));\n direction = direction.concat(' L' + ' ' + (tipX) + ' ' + (height + arrowPadding)\n + ' L' + ' ' + (arrowLocation.x - arrowPadding) + ' ' + height);\n }\n }\n if ((arrowLocation.x - arrowPadding) > startX) {\n direction = direction.concat(' L' + ' ' + (startX + rX) + ' ' + height + ' Q ' + startX + ' '\n + height + ' ' + (startX) + ' ' + (height - rY) + ' z');\n }\n else {\n if (arrowPadding === 0) {\n direction = direction.concat(' L' + ' ' + (startX + rX) + ' ' + height + ' Q ' + startX + ' '\n + height + ' ' + (startX) + ' ' + (height - rY) + ' z');\n }\n else {\n direction = direction.concat(' L' + ' ' + (startX) + ' ' + (height + rY) + ' z');\n }\n }\n }\n else if (bottom) {\n direction = direction.concat('M' + ' ' + (startX) + ' ' + (startY + rY) + ' Q ' + startX + ' '\n + (startY) + ' ' + (startX + rX) + ' ' + (startY) + ' L' + ' ' + (arrowLocation.x - arrowPadding) + ' ' + (startY));\n direction = direction.concat(' L' + ' ' + (tipX) + ' ' + (arrowLocation.y));\n direction = direction.concat(' L' + ' ' + (arrowLocation.x + arrowPadding) + ' ' + (startY));\n direction = direction.concat(' L' + ' ' + (width - rX) + ' ' + (startY)\n + ' Q ' + (width) + ' ' + (startY) + ' ' + (width) + ' ' + (startY + rY));\n direction = direction.concat(' L' + ' ' + (width) + ' ' + (height - rY) + ' Q ' + (width) + ' '\n + (height) + ' ' + (width - rX) + ' ' + (height) +\n ' L' + ' ' + (startX + rX) + ' ' + (height) + ' Q ' + (startX) + ' '\n + (height) + ' ' + (startX) + ' ' + (height - rY) + ' z');\n }\n else if (left) {\n direction = direction.concat('M' + ' ' + (startX) + ' ' + (startY + rY) + ' Q ' + startX + ' '\n + (startY) + ' ' + (startX + rX) + ' ' + (startY));\n direction = direction.concat(' L' + ' ' + (width - rX) + ' ' + (startY) + ' Q ' + (width) + ' '\n + (startY) + ' ' + (width) + ' ' + (startY + rY) + ' L' + ' ' + (width) + ' ' + (arrowLocation.y - arrowPadding));\n direction = (controlName === 'RangeNavigator') ? direction.concat(' L' + ' ' + (width + arrowPadding) + ' ' + (tipY - arrowPadding)) :\n direction.concat(' L' + ' ' + (width + arrowPadding) + ' ' + (tipY));\n direction = (controlName === 'RangeNavigator') ? direction.concat(' L' + ' ' + (width) + ' ' + (arrowLocation.y)) :\n direction.concat(' L' + ' ' + (width) + ' ' + (arrowLocation.y + arrowPadding));\n direction = direction.concat(' L' + ' ' + (width) + ' ' + (height - rY) + ' Q ' + width + ' ' + (height) + ' ' + (width - rX) + ' ' + (height));\n direction = direction.concat(' L' + ' ' + (startX + rX) + ' ' + (height) + ' Q ' + startX + ' '\n + (height) + ' ' + (startX) + ' ' + (height - rY) + ' z');\n }\n else {\n direction = direction.concat('M' + ' ' + (startX + rX) + ' ' + (startY) + ' Q ' + (startX) + ' '\n + (startY) + ' ' + (startX) + ' ' + (startY + rY) + ' L' + ' ' + (startX) + ' ' + (arrowLocation.y - arrowPadding));\n direction = (controlName === 'RangeNavigator') ? direction.concat(' L' + ' ' + (startX - arrowPadding) + ' ' + (tipY - arrowPadding)) :\n direction.concat(' L' + ' ' + (startX - arrowPadding) + ' ' + (tipY));\n direction = (controlName === 'RangeNavigator') ? direction.concat(' L' + ' ' + (startX) + ' ' + (arrowLocation.y)) :\n direction.concat(' L' + ' ' + (startX) + ' ' + (arrowLocation.y + arrowPadding));\n direction = direction.concat(' L' + ' ' + (startX) + ' ' + (height - rY) + ' Q ' + startX + ' '\n + (height) + ' ' + (startX + rX) + ' ' + (height));\n direction = direction.concat(' L' + ' ' + (width - rX) + ' ' + (height) + ' Q ' + width + ' '\n + (height) + ' ' + (width) + ' ' + (height - rY) +\n ' L' + ' ' + (width) + ' ' + (startY + rY) + ' Q ' + width + ' '\n + (startY) + ' ' + (width - rX) + ' ' + (startY) + ' z');\n }\n return direction;\n}\n/** @private */\nvar Size = /** @class */ (function () {\n function Size(width, height) {\n this.width = width;\n this.height = height;\n }\n return Size;\n}());\nexport { Size };\n/** @private */\nvar Rect = /** @class */ (function () {\n function Rect(x, y, width, height) {\n this.x = x;\n this.y = y;\n this.width = width;\n this.height = height;\n }\n return Rect;\n}());\nexport { Rect };\nvar Side = /** @class */ (function () {\n function Side(bottom, right) {\n this.isRight = right;\n this.isBottom = bottom;\n }\n return Side;\n}());\nexport { Side };\n/** @private */\nvar CustomizeOption = /** @class */ (function () {\n function CustomizeOption(id) {\n this.id = id;\n }\n return CustomizeOption;\n}());\nexport { CustomizeOption };\n/** @private */\nvar TextOption = /** @class */ (function (_super) {\n __extends(TextOption, _super);\n function TextOption(id, x, y, anchor, text, transform, baseLine, labelRotation) {\n if (transform === void 0) { transform = ''; }\n var _this = _super.call(this, id) || this;\n _this.transform = '';\n _this.baseLine = 'auto';\n _this.labelRotation = 0;\n _this.x = x;\n _this.y = y;\n _this.anchor = anchor;\n _this.text = text;\n _this.transform = transform;\n _this.baseLine = baseLine;\n _this.labelRotation = labelRotation;\n return _this;\n }\n return TextOption;\n}(CustomizeOption));\nexport { TextOption };\n/** @private */\nexport function getElement(id) {\n return document.getElementById(id);\n}\n/** @private */\nexport function removeElement(id) {\n var element = getElement(id);\n if (element) {\n remove(element);\n }\n}\n/** @private */\nexport function drawSymbol(location, shape, size, url, options, label) {\n var renderer = new SvgRenderer('');\n var temp = calculateShapes(location, size, shape, options, url);\n var htmlObject = renderer['draw' + temp.functionName](temp.renderOption);\n htmlObject.setAttribute('aria-label', label);\n return htmlObject;\n}\n/** @private */\nexport function calculateShapes(location, size, shape, options, url) {\n var path;\n var functionName = 'Path';\n var width = size.width;\n var height = size.height;\n var locX = location.x;\n var locY = location.y;\n var x = location.x + (-width / 2);\n var y = location.y + (-height / 2);\n switch (shape) {\n case 'Circle':\n case 'Bubble':\n functionName = 'Ellipse';\n merge(options, { 'rx': width / 2, 'ry': height / 2, 'cx': locX, 'cy': locY });\n break;\n case 'Cross':\n path = 'M' + ' ' + x + ' ' + locY + ' ' + 'L' + ' ' + (locX + (width / 2)) + ' ' + locY + ' ' +\n 'M' + ' ' + locX + ' ' + (locY + (height / 2)) + ' ' + 'L' + ' ' + locX + ' ' +\n (locY + (-height / 2));\n merge(options, { 'd': path });\n break;\n case 'HorizontalLine':\n path = 'M' + ' ' + x + ' ' + locY + ' ' + 'L' + ' ' + (locX + (width / 2)) + ' ' + locY;\n merge(options, { 'd': path });\n break;\n case 'VerticalLine':\n path = 'M' + ' ' + locX + ' ' + (locY + (height / 2)) + ' ' + 'L' + ' ' + locX + ' ' + (locY + (-height / 2));\n merge(options, { 'd': path });\n break;\n case 'Diamond':\n path = 'M' + ' ' + x + ' ' + locY + ' ' +\n 'L' + ' ' + locX + ' ' + (locY + (-height / 2)) + ' ' +\n 'L' + ' ' + (locX + (width / 2)) + ' ' + locY + ' ' +\n 'L' + ' ' + locX + ' ' + (locY + (height / 2)) + ' ' +\n 'L' + ' ' + x + ' ' + locY + ' z';\n merge(options, { 'd': path });\n break;\n case 'Rectangle':\n path = 'M' + ' ' + x + ' ' + (locY + (-height / 2)) + ' ' +\n 'L' + ' ' + (locX + (width / 2)) + ' ' + (locY + (-height / 2)) + ' ' +\n 'L' + ' ' + (locX + (width / 2)) + ' ' + (locY + (height / 2)) + ' ' +\n 'L' + ' ' + x + ' ' + (locY + (height / 2)) + ' ' +\n 'L' + ' ' + x + ' ' + (locY + (-height / 2)) + ' z';\n merge(options, { 'd': path });\n break;\n case 'Triangle':\n path = 'M' + ' ' + x + ' ' + (locY + (height / 2)) + ' ' +\n 'L' + ' ' + locX + ' ' + (locY + (-height / 2)) + ' ' +\n 'L' + ' ' + (locX + (width / 2)) + ' ' + (locY + (height / 2)) + ' ' +\n 'L' + ' ' + x + ' ' + (locY + (height / 2)) + ' z';\n merge(options, { 'd': path });\n break;\n case 'InvertedTriangle':\n path = 'M' + ' ' + (locX + (width / 2)) + ' ' + (locY - (height / 2)) + ' ' +\n 'L' + ' ' + locX + ' ' + (locY + (height / 2)) + ' ' +\n 'L' + ' ' + (locX - (width / 2)) + ' ' + (locY - (height / 2)) + ' ' +\n 'L' + ' ' + (locX + (width / 2)) + ' ' + (locY - (height / 2)) + ' z';\n merge(options, { 'd': path });\n break;\n case 'Pentagon':\n var eq = 72;\n var xValue = void 0;\n var yValue = void 0;\n for (var i = 0; i <= 5; i++) {\n xValue = (width / 2) * Math.cos((Math.PI / 180) * (i * eq));\n yValue = (height / 2) * Math.sin((Math.PI / 180) * (i * eq));\n if (i === 0) {\n path = 'M' + ' ' + (locX + xValue) + ' ' + (locY + yValue) + ' ';\n }\n else {\n path = path.concat('L' + ' ' + (locX + xValue) + ' ' + (locY + yValue) + ' ');\n }\n }\n path = path.concat('Z');\n merge(options, { 'd': path });\n break;\n case 'Image':\n functionName = 'Image';\n merge(options, { 'href': url, 'height': height, 'width': width, x: x, y: y });\n break;\n }\n return { renderOption: options, functionName: functionName };\n}\n/** @private */\nvar PathOption = /** @class */ (function (_super) {\n __extends(PathOption, _super);\n function PathOption(id, fill, width, color, opacity, dashArray, d) {\n var _this = _super.call(this, id) || this;\n _this.opacity = opacity;\n _this.fill = fill;\n _this.stroke = color;\n _this['stroke-width'] = width;\n _this['stroke-dasharray'] = dashArray;\n _this.d = d;\n return _this;\n }\n return PathOption;\n}(CustomizeOption));\nexport { PathOption };\n/** @private */\nexport function textElement(options, font, color, parent) {\n var renderOptions = {};\n var renderer = new SvgRenderer('');\n renderOptions = {\n 'id': options.id,\n 'x': options.x,\n 'y': options.y,\n 'fill': color,\n 'font-size': font.size,\n 'font-style': font.fontStyle,\n 'font-family': font.fontFamily,\n 'font-weight': font.fontWeight,\n 'text-anchor': options.anchor,\n 'transform': options.transform,\n 'opacity': font.opacity,\n 'dominant-baseline': options.baseLine\n };\n var text = typeof options.text === 'string' ? options.text : options.text[0];\n var htmlObject = renderer.createText(renderOptions, text);\n htmlObject.style.fontFamily = font.fontFamily;\n htmlObject.style.fontStyle = font.fontStyle;\n htmlObject.style.fontSize = font.size;\n htmlObject.style.fontWeight = font.fontWeight;\n htmlObject.style.color = font.color;\n parent.appendChild(htmlObject);\n return htmlObject;\n}\nvar TooltipLocation = /** @class */ (function () {\n function TooltipLocation(x, y) {\n this.x = x;\n this.y = y;\n }\n return TooltipLocation;\n}());\nexport { TooltipLocation };\n","/* eslint-disable jsdoc/require-returns */\n/* eslint-disable valid-jsdoc */\n/* eslint-disable @typescript-eslint/no-explicit-any */\n/**\n * To import utils\n */\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nvar SvgRenderer = /** @class */ (function () {\n /* End-Properties */\n function SvgRenderer(rootID) {\n //Internal Variables\n this.svgLink = 'http://www.w3.org/2000/svg';\n this.rootId = rootID;\n }\n // method to get the attributes value\n // tslint:disable-next-line:no-any\n SvgRenderer.prototype.getOptionValue = function (options, key) {\n return options[key];\n }; /* tslint:enable */\n /**\n * To create a Html5 SVG element\n *\n * @param {SVGAttributes} options - Options to create SVG\n * @returns {Element} It returns a appropriate element\n */\n SvgRenderer.prototype.createSvg = function (options) {\n if (isNullOrUndefined(options.id)) {\n options.id = this.rootId + '_svg';\n }\n this.svgObj = document.getElementById(options.id);\n if (isNullOrUndefined(document.getElementById(options.id))) {\n this.svgObj = document.createElementNS(this.svgLink, 'svg');\n }\n this.svgObj = this.setElementAttributes(options, this.svgObj);\n this.setSVGSize(options.width, options.height);\n return this.svgObj;\n };\n // method to set the height and width for the SVG element\n SvgRenderer.prototype.setSVGSize = function (width, height) {\n var element = document.getElementById(this.rootId);\n var size = !isNullOrUndefined(element) ? element.getBoundingClientRect() : null;\n if (isNullOrUndefined(this.width) || this.width <= 0) {\n this.svgObj.setAttribute('width', width ? width.toString() : size.width.toString());\n }\n else {\n this.svgObj.setAttribute('width', this.width.toString());\n }\n if (isNullOrUndefined(this.height) || this.height <= 0) {\n this.svgObj.setAttribute('height', height ? height.toString() : '450');\n }\n else {\n this.svgObj.setAttribute('height', this.height.toString());\n }\n };\n /**\n * To draw a path\n *\n * @param {PathAttributes} options - Options to draw a path in SVG\n * @returns {Element} It returns a appropriate path\n */\n SvgRenderer.prototype.drawPath = function (options) {\n var path = document.getElementById(options.id);\n if (path === null) {\n path = document.createElementNS(this.svgLink, 'path');\n }\n path = this.setElementAttributes(options, path);\n return path;\n };\n /**\n * To draw a line\n *\n * @param {LineAttributes} options - Options to draw a line in SVG\n * @returns {Element} It returns a appropriate element\n */\n SvgRenderer.prototype.drawLine = function (options) {\n var line = document.getElementById(options.id);\n if (line === null) {\n line = document.createElementNS(this.svgLink, 'line');\n }\n line = this.setElementAttributes(options, line);\n return line;\n };\n /**\n * To draw a rectangle\n *\n * @param {BaseAttibutes} options - Required options to draw a rectangle in SVG\n * @returns {Element} It returns a appropriate element\n */\n SvgRenderer.prototype.drawRectangle = function (options) {\n var rectangle = document.getElementById(options.id);\n if (rectangle === null) {\n rectangle = document.createElementNS(this.svgLink, 'rect');\n }\n rectangle = this.setElementAttributes(options, rectangle);\n return rectangle;\n };\n /**\n * To draw a circle\n *\n * @param {CircleAttributes} options - Required options to draw a circle in SVG\n * @returns {Element} It returns a appropriate element\n */\n SvgRenderer.prototype.drawCircle = function (options) {\n var circle = document.getElementById(options.id);\n if (circle === null) {\n circle = document.createElementNS(this.svgLink, 'circle');\n }\n circle = this.setElementAttributes(options, circle);\n return circle;\n };\n /**\n * To draw a polyline\n *\n * @param {PolylineAttributes} options - Options required to draw a polyline\n * @returns {Element} It returns a appropriate element\n */\n SvgRenderer.prototype.drawPolyline = function (options) {\n var polyline = document.getElementById(options.id);\n if (polyline === null) {\n polyline = document.createElementNS(this.svgLink, 'polyline');\n }\n polyline = this.setElementAttributes(options, polyline);\n return polyline;\n };\n /**\n * To draw an ellipse\n *\n * @param {EllipseAttributes} options - Options required to draw an ellipse\n * @returns {Element} It returns a appropriate element\n */\n SvgRenderer.prototype.drawEllipse = function (options) {\n var ellipse = document.getElementById(options.id);\n if (ellipse === null) {\n ellipse = document.createElementNS(this.svgLink, 'ellipse');\n }\n ellipse = this.setElementAttributes(options, ellipse);\n return ellipse;\n };\n /**\n * To draw a polygon\n *\n * @param {PolylineAttributes} options - Options needed to draw a polygon in SVG\n * @returns {Element} It returns a appropriate element\n */\n SvgRenderer.prototype.drawPolygon = function (options) {\n var polygon = document.getElementById(options.id);\n if (polygon === null) {\n polygon = document.createElementNS(this.svgLink, 'polygon');\n }\n polygon = this.setElementAttributes(options, polygon);\n return polygon;\n };\n /**\n * To draw an image\n *\n * @param {ImageAttributes} options - Required options to draw an image in SVG\n * @returns {Element} It returns a appropriate element\n */\n SvgRenderer.prototype.drawImage = function (options) {\n var img = document.createElementNS(this.svgLink, 'image');\n img.setAttributeNS(null, 'height', options.height.toString());\n img.setAttributeNS(null, 'width', options.width.toString());\n img.setAttributeNS('http://www.w3.org/1999/xlink', 'href', options.href);\n img.setAttributeNS(null, 'x', options.x.toString());\n img.setAttributeNS(null, 'y', options.y.toString());\n img.setAttributeNS(null, 'id', options.id);\n img.setAttributeNS(null, 'visibility', options.visibility);\n if (!isNullOrUndefined(this.getOptionValue(options, 'clip-path'))) {\n img.setAttributeNS(null, 'clip-path', this.getOptionValue(options, 'clip-path'));\n }\n if (!isNullOrUndefined(options.preserveAspectRatio)) {\n img.setAttributeNS(null, 'preserveAspectRatio', options.preserveAspectRatio);\n }\n return img;\n };\n /**\n * To draw a text\n *\n * @param {TextAttributes} options - Options needed to draw a text in SVG\n * @param {string} label - Label of the text\n * @returns {Element} It returns a appropriate element\n */\n SvgRenderer.prototype.createText = function (options, label) {\n var text = document.createElementNS(this.svgLink, 'text');\n text = this.setElementAttributes(options, text);\n if (!isNullOrUndefined(label)) {\n text.textContent = label;\n }\n return text;\n };\n /**\n * To create a tSpan\n *\n * @param {TextAttributes} options - Options to create tSpan\n * @param {string} label - The text content which is to be rendered in the tSpan\n * @returns {Element} It returns a appropriate element\n */\n SvgRenderer.prototype.createTSpan = function (options, label) {\n var tSpan = document.createElementNS(this.svgLink, 'tspan');\n tSpan = this.setElementAttributes(options, tSpan);\n if (!isNullOrUndefined(label)) {\n tSpan.textContent = label;\n }\n return tSpan;\n };\n /**\n * To create a title\n *\n * @param {string} text - The text content which is to be rendered in the title\n * @returns {Element} It returns a appropriate element\n */\n SvgRenderer.prototype.createTitle = function (text) {\n var title = document.createElementNS(this.svgLink, 'title');\n title.textContent = text;\n return title;\n };\n /**\n * To create defs element in SVG\n *\n * @returns {Element} It returns a appropriate element\n */\n SvgRenderer.prototype.createDefs = function () {\n var defs = document.createElementNS(this.svgLink, 'defs');\n return defs;\n };\n /**\n * To create clip path in SVG\n *\n * @param {BaseAttibutes} options - Options needed to create clip path\n * @returns {Element} It returns a appropriate element\n */\n SvgRenderer.prototype.createClipPath = function (options) {\n var clipPath = document.createElementNS(this.svgLink, 'clipPath');\n clipPath = this.setElementAttributes(options, clipPath);\n return clipPath;\n };\n /**\n * To create foreign object in SVG\n *\n * @param {BaseAttibutes} options - Options needed to create foreign object\n * @returns {Element} It returns a appropriate element\n */\n SvgRenderer.prototype.createForeignObject = function (options) {\n var foreignObject = document.createElementNS(this.svgLink, 'foreignObject');\n foreignObject = this.setElementAttributes(options, foreignObject);\n return foreignObject;\n };\n /**\n * To create group element in SVG\n *\n * @param {BaseAttibutes} options - Options needed to create group\n * @returns {Element} It returns a appropriate element\n */\n SvgRenderer.prototype.createGroup = function (options) {\n var group = document.createElementNS(this.svgLink, 'g');\n group = this.setElementAttributes(options, group);\n return group;\n };\n /**\n * To create pattern in SVG\n *\n * @param {PatternAttributes} options - Required options to create pattern in SVG\n * @param {string} element - Specifies the name of the pattern\n * @returns {Element} It returns a appropriate element\n */\n SvgRenderer.prototype.createPattern = function (options, element) {\n var pattern = document.createElementNS(this.svgLink, element);\n pattern = this.setElementAttributes(options, pattern);\n return pattern;\n };\n /**\n * To create radial gradient in SVG\n *\n * @param {string[]} colors - Specifies the colors required to create radial gradient\n * @param {string} name - Specifies the name of the gradient\n * @param {RadialGradient} options - value for radial gradient\n * @returns {string} It returns color name\n */\n SvgRenderer.prototype.createRadialGradient = function (colors, name, options) {\n var colorName;\n if (!isNullOrUndefined(colors[0].colorStop)) {\n var newOptions = {\n 'id': this.rootId + '_' + name + 'radialGradient',\n 'cx': options.cx + '%',\n 'cy': options.cy + '%',\n 'r': options.r + '%',\n 'fx': options.fx + '%',\n 'fy': options.fy + '%'\n };\n this.drawGradient('radialGradient', newOptions, colors);\n colorName = 'url(#' + this.rootId + '_' + name + 'radialGradient)';\n }\n else {\n colorName = colors[0].color.toString();\n }\n return colorName;\n };\n /**\n * To create linear gradient in SVG\n *\n * @param {GradientColor[]} colors - Array of string specifies the values for color\n * @param {string} name - Specifies the name of the gradient\n * @param {LinearGradient} options - Specifies the options for gradient\n * @returns {string} It returns color name\n */\n SvgRenderer.prototype.createLinearGradient = function (colors, name, options) {\n var colorName;\n if (!isNullOrUndefined(colors[0].colorStop)) {\n var newOptions = {\n 'id': this.rootId + '_' + name + 'linearGradient',\n 'x1': options.x1 + '%',\n 'y1': options.y1 + '%',\n 'x2': options.x2 + '%',\n 'y2': options.y2 + '%'\n };\n this.drawGradient('linearGradient', newOptions, colors);\n colorName = 'url(#' + this.rootId + '_' + name + 'linearGradient)';\n }\n else {\n colorName = colors[0].color.toString();\n }\n return colorName;\n };\n /**\n * To render the gradient element in SVG\n *\n * @param {string} gradientType - Specifies the type of the gradient\n * @param {RadialGradient | LinearGradient} options - Options required to render a gradient\n * @param {string[]} colors - Array of string specifies the values for color\n * @returns {Element} It returns a appropriate element\n */\n SvgRenderer.prototype.drawGradient = function (gradientType, options, colors) {\n var defs = this.createDefs();\n var gradient = document.createElementNS(this.svgLink, gradientType);\n gradient = this.setElementAttributes(options, gradient);\n for (var i = 0; i < colors.length; i++) {\n var stop_1 = document.createElementNS(this.svgLink, 'stop');\n stop_1.setAttribute('offset', colors[i].colorStop);\n stop_1.setAttribute('stop-color', colors[i].color);\n stop_1.setAttribute('stop-opacity', colors[i].opacity ? (colors[i].opacity) : '1');\n if (!isNullOrUndefined(colors[i].style)) {\n stop_1.style.cssText = colors[i].style;\n }\n gradient.appendChild(stop_1);\n }\n defs.appendChild(gradient);\n return defs;\n };\n /**\n * To render a clip path\n *\n * @param {BaseAttibutes} options - Options required to render a clip path\n * @returns {Element} It returns a appropriate element\n */\n SvgRenderer.prototype.drawClipPath = function (options) {\n var defs = this.createDefs();\n var clipPath = this.createClipPath({ 'id': options.id });\n options.id = options.id + '_Rect';\n var rect = this.drawRectangle(options);\n clipPath.appendChild(rect);\n defs.appendChild(clipPath);\n return defs;\n };\n /**\n * To create circular clip path in SVG\n *\n * @param {CircleAttributes} options - Options required to create circular clip path\n * @returns {Element} It returns a appropriate element\n */\n SvgRenderer.prototype.drawCircularClipPath = function (options) {\n var defs = this.createDefs();\n var clipPath = this.createClipPath({ 'id': options.id });\n options.id = options.id + '_Circle';\n var circle = this.drawCircle(options);\n clipPath.appendChild(circle);\n defs.appendChild(clipPath);\n return defs;\n };\n /**\n * To set the attributes to the element\n *\n * @param {SVGCanvasAttributes} options - Attributes to set for the element\n * @param {Element} element - The element to which the attributes need to be set\n * @returns {Element} It returns a appropriate element\n */\n SvgRenderer.prototype.setElementAttributes = function (options, element) {\n var keys = Object.keys(options);\n for (var i = 0; i < keys.length; i++) {\n if (keys[i] === 'style') {\n element.style.cssText = options[keys[i]];\n }\n else {\n element.setAttribute(keys[i], options[keys[i]]);\n }\n }\n return element;\n };\n /**\n * To create a Html5 canvas element\n * Dummy method for using canvas/svg render in the same variable name in chart control\n */\n SvgRenderer.prototype.createCanvas = function () {\n return null;\n };\n return SvgRenderer;\n}());\nexport { SvgRenderer };\n","/* eslint-disable no-case-declarations */\n/* eslint-disable jsdoc/require-returns */\n/* eslint-disable valid-jsdoc */\n/* eslint-disable @typescript-eslint/no-explicit-any */\n/**\n * To import utils.\n */\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\n/**\n * @private\n */\nvar CanvasRenderer = /** @class */ (function () {\n /* End-Properties */\n function CanvasRenderer(rootID) {\n this.rootId = rootID;\n }\n // method to get the attributes value\n // tslint:disable-next-line:no-any\n CanvasRenderer.prototype.getOptionValue = function (options, key) {\n return options[key];\n };\n /* tslint:enable */\n /**\n * To create a Html5 canvas element\n *\n * @param {BaseAttibutes} options - Options to create canvas\n * @returns {HTMLCanvasElement} Creating a canvas\n */\n CanvasRenderer.prototype.createCanvas = function (options) {\n var canvasObj = document.createElement('canvas');\n canvasObj.setAttribute('id', this.rootId + '_canvas');\n this.ctx = canvasObj.getContext('2d');\n this.canvasObj = canvasObj;\n this.setCanvasSize(options.width, options.height);\n return this.canvasObj;\n };\n /**\n * To set the width and height for the Html5 canvas element\n *\n * @param {number} width - width of the canvas\n * @param {number} height - height of the canvas\n * @returns {void} Setting canvas size\n */\n CanvasRenderer.prototype.setCanvasSize = function (width, height) {\n var element = document.getElementById(this.rootId);\n var size = !isNullOrUndefined(element) ? element.getBoundingClientRect() : null;\n if (isNullOrUndefined(this.width)) {\n this.canvasObj.setAttribute('width', width ? width.toString() : size.width.toString());\n }\n else {\n this.canvasObj.setAttribute('width', this.width.toString());\n }\n if (isNullOrUndefined(this.height)) {\n this.canvasObj.setAttribute('height', height ? height.toString() : '450');\n }\n else {\n this.canvasObj.setAttribute('height', this.height.toString());\n }\n };\n // To set the values to the attributes\n CanvasRenderer.prototype.setAttributes = function (options) {\n this.ctx.lineWidth = this.getOptionValue(options, 'stroke-width');\n var dashArray = this.getOptionValue(options, 'stroke-dasharray');\n if (!isNullOrUndefined(dashArray)) {\n var dashArrayString = dashArray.split(',');\n this.ctx.setLineDash([parseInt(dashArrayString[0], 10), parseInt(dashArrayString[1], 10)]);\n }\n this.ctx.strokeStyle = this.getOptionValue(options, 'stroke');\n };\n /**\n * To draw a line\n *\n * @param {LineAttributes} options - required options to draw a line on the canvas\n * @returns {void} To draw a line\n */\n CanvasRenderer.prototype.drawLine = function (options) {\n this.ctx.save();\n this.ctx.beginPath();\n this.ctx.lineWidth = this.getOptionValue(options, 'stroke-width');\n this.ctx.strokeStyle = options.stroke;\n this.ctx.moveTo(options.x1, options.y1);\n this.ctx.lineTo(options.x2, options.y2);\n this.ctx.stroke();\n this.ctx.restore();\n };\n /**\n * To draw a rectangle\n *\n * @param {RectAttributes} options - required options to draw a rectangle on the canvas.\n * @param {Int32Array} canvasTranslate TO get a translate value of canvas.\n * @returns {void} To draw rectangle.\n */\n CanvasRenderer.prototype.drawRectangle = function (options, canvasTranslate) {\n var canvasCtx = this.ctx;\n var cornerRadius = options.rx;\n this.ctx.save();\n this.ctx.beginPath();\n if (canvasTranslate) {\n this.ctx.translate(canvasTranslate[0], canvasTranslate[1]);\n }\n this.ctx.globalAlpha = this.getOptionValue(options, 'opacity');\n this.setAttributes(options);\n this.ctx.rect(options.x, options.y, options.width, options.height);\n if (cornerRadius !== null && cornerRadius >= 0) {\n this.drawCornerRadius(options);\n }\n else {\n if (options.fill === 'none') {\n options.fill = 'transparent';\n }\n this.ctx.fillStyle = options.fill;\n this.ctx.fillRect(options.x, options.y, options.width, options.height);\n this.ctx.stroke();\n }\n this.ctx.restore();\n this.ctx = canvasCtx;\n return (this.canvasObj);\n };\n // To draw the corner of a rectangle\n CanvasRenderer.prototype.drawCornerRadius = function (options) {\n var cornerRadius = options.rx;\n var x = options.x;\n var y = options.y;\n var width = options.width;\n var height = options.height;\n if (options.fill === 'none') {\n options.fill = 'transparent';\n }\n this.ctx.fillStyle = options.fill;\n if (width < 2 * cornerRadius) {\n cornerRadius = width / 2;\n }\n if (height < 2 * cornerRadius) {\n cornerRadius = height / 2;\n }\n this.ctx.beginPath();\n this.ctx.moveTo(x + width - cornerRadius, y);\n this.ctx.arcTo(x + width, y, x + width, y + height, cornerRadius);\n this.ctx.arcTo(x + width, y + height, x, y + height, cornerRadius);\n this.ctx.arcTo(x, y + height, x, y, cornerRadius);\n this.ctx.arcTo(x, y, x + width, y, cornerRadius);\n this.ctx.closePath();\n this.ctx.fill();\n this.ctx.stroke();\n };\n /**\n * To draw a path on the canvas\n *\n * @param {PathAttributes} options - options needed to draw path.\n * @param {Int32Array} canvasTranslate - Array of numbers to translate the canvas.\n * @returns {Element} To draw a path.\n */\n CanvasRenderer.prototype.drawPath = function (options, canvasTranslate) {\n var path = options.d;\n var dataSplit = path.split(' ');\n var borderWidth = this.getOptionValue(options, 'stroke-width');\n var canvasCtx = this.ctx;\n var flag = true;\n this.ctx.save();\n this.ctx.beginPath();\n if (canvasTranslate) {\n this.ctx.translate(canvasTranslate[0], canvasTranslate[1]);\n }\n this.ctx.globalAlpha = options.opacity ? options.opacity : this.getOptionValue(options, 'fill-opacity');\n this.setAttributes(options);\n for (var i = 0; i < dataSplit.length; i = i + 3) {\n var x1 = parseFloat(dataSplit[i + 1]);\n var y1 = parseFloat(dataSplit[i + 2]);\n switch (dataSplit[i]) {\n case 'M':\n if (!options.innerR && !options.cx) {\n this.ctx.moveTo(x1, y1);\n }\n break;\n case 'L':\n if (!options.innerR) {\n this.ctx.lineTo(x1, y1);\n }\n break;\n case 'Q':\n var q1 = parseFloat(dataSplit[i + 3]);\n var q2 = parseFloat(dataSplit[i + 4]);\n this.ctx.quadraticCurveTo(x1, y1, q1, q2);\n i = i + 2;\n break;\n case 'C':\n var c1 = parseFloat(dataSplit[i + 3]);\n var c2 = parseFloat(dataSplit[i + 4]);\n var c3 = parseFloat(dataSplit[i + 5]);\n var c4 = parseFloat(dataSplit[i + 6]);\n this.ctx.bezierCurveTo(x1, y1, c1, c2, c3, c4);\n i = i + 4;\n break;\n case 'A':\n if (!options.innerR) {\n if (options.cx) {\n this.ctx.arc(options.cx, options.cy, options.radius, 0, 2 * Math.PI, options.counterClockWise);\n }\n else {\n this.ctx.moveTo(options.x, options.y);\n this.ctx.arc(options.x, options.y, options.radius, options.start, options.end, options.counterClockWise);\n this.ctx.lineTo(options.x, options.y);\n }\n }\n else if (flag) {\n this.ctx.arc(options.x, options.y, options.radius, options.start, options.end, options.counterClockWise);\n this.ctx.arc(options.x, options.y, options.innerR, options.end, options.start, !options.counterClockWise);\n flag = false;\n }\n i = i + 5;\n break;\n case 'z':\n case 'Z':\n this.ctx.closePath();\n //since for loop is incremented by 3, to get next value after 'z' i is decremented for 2.\n i = i - 2;\n break;\n }\n }\n if (options.fill !== 'none' && options.fill !== undefined) {\n this.ctx.fillStyle = options.fill;\n this.ctx.fill();\n }\n if (borderWidth > 0) {\n this.ctx.stroke();\n }\n this.ctx.restore();\n this.ctx = canvasCtx;\n return this.canvasObj;\n };\n /**\n * To draw a text\n *\n * @param {TextAttributes} options - options required to draw text\n * @param {string} label - Specifies the text which has to be drawn on the canvas\n * @param {number} transX - Specifies the text of translate X\n * @param {number} transY - Specifies the text of translate Y\n * @param {number} dy - Specifies the text of translate dy\n * @param {boolean} isTSpan - Specifies the boolean value of span value\n * @returns {void}\n */\n CanvasRenderer.prototype.createText = function (options, label, transX, transY, dy, isTSpan) {\n var fontWeight = this.getOptionValue(options, 'font-weight');\n if (!isNullOrUndefined(fontWeight) && fontWeight.toLowerCase() === 'regular') {\n fontWeight = 'normal';\n }\n var fontSize = this.getOptionValue(options, 'font-size');\n var fontFamily = this.getOptionValue(options, 'font-family');\n var fontStyle = this.getOptionValue(options, 'font-style').toLowerCase();\n var font = (fontStyle + ' ' + fontWeight + ' ' + fontSize + ' ' + fontFamily);\n var anchor = this.getOptionValue(options, 'text-anchor');\n var opacity = options.opacity !== undefined ? options.opacity : 1;\n if (anchor === 'middle') {\n anchor = 'center';\n }\n this.ctx.save();\n this.ctx.fillStyle = options.fill;\n this.ctx.font = font;\n this.ctx.textAlign = anchor;\n this.ctx.globalAlpha = opacity;\n if (options.baseline) {\n this.ctx.textBaseline = options.baseline;\n }\n if (!isTSpan) {\n var txtlngth = 0;\n this.ctx.translate(options.x + (txtlngth / 2) + (transX ? transX : 0), options.y + (transY ? transY : 0));\n this.ctx.rotate(options.labelRotation * Math.PI / 180);\n }\n this.ctx.fillText(label, isTSpan ? options.x : 0, isTSpan ? dy : 0);\n this.ctx.restore();\n return this.canvasObj;\n };\n /**\n * To draw circle on the canvas\n *\n * @param {CircleAttributes} options - required options to draw the circle\n * @param {Int32Array} canvasTranslate Translate value of canvas\n * @returns {void}\n */\n CanvasRenderer.prototype.drawCircle = function (options, canvasTranslate) {\n var canvasCtx = this.ctx;\n this.ctx.save();\n this.ctx.beginPath();\n this.ctx.arc(options.cx, options.cy, options.r, 0, 2 * Math.PI);\n this.ctx.fillStyle = options.fill;\n this.ctx.globalAlpha = options.opacity;\n this.ctx.fill();\n if (canvasTranslate) {\n this.ctx.translate(canvasTranslate[0], canvasTranslate[1]);\n }\n this.setAttributes(options);\n this.ctx.stroke();\n this.ctx.restore();\n this.ctx = canvasCtx;\n return this.canvasObj;\n };\n /**\n * To draw polyline\n *\n * @param {PolylineAttributes} options - options needed to draw polyline\n * @returns {void}\n */\n CanvasRenderer.prototype.drawPolyline = function (options) {\n this.ctx.save();\n this.ctx.beginPath();\n var points = options.points.split(' ');\n for (var i = 0; i < points.length - 1; i++) {\n var point = points[i].split(',');\n var x = parseFloat(point[0]);\n var y = parseFloat(point[1]);\n if (i === 0) {\n this.ctx.moveTo(x, y);\n }\n else {\n this.ctx.lineTo(x, y);\n }\n }\n this.ctx.lineWidth = this.getOptionValue(options, 'stroke-width');\n this.ctx.strokeStyle = options.stroke;\n this.ctx.stroke();\n this.ctx.restore();\n };\n /**\n * To draw an ellipse on the canvas\n *\n * @param {EllipseAttributes} options - options needed to draw ellipse\n * @param {Int32Array} canvasTranslate Translate value of canvas\n * @returns {void}\n */\n CanvasRenderer.prototype.drawEllipse = function (options, canvasTranslate) {\n var canvasCtx = this.ctx;\n var circumference = Math.max(options.rx, options.ry);\n var scaleX = options.rx / circumference;\n var scaleY = options.ry / circumference;\n this.ctx.save();\n this.ctx.beginPath();\n this.ctx.translate(options.cx, options.cy);\n if (canvasTranslate) {\n this.ctx.translate(canvasTranslate[0], canvasTranslate[1]);\n }\n this.ctx.save();\n this.ctx.scale(scaleX, scaleY);\n this.ctx.arc(0, 0, circumference, 0, 2 * Math.PI, false);\n this.ctx.fillStyle = options.fill;\n this.ctx.fill();\n this.ctx.restore();\n this.ctx.lineWidth = this.getOptionValue(options, 'stroke-width');\n this.ctx.strokeStyle = options.stroke;\n this.ctx.stroke();\n this.ctx.restore();\n this.ctx = canvasCtx;\n };\n /**\n * To draw an image\n *\n * @param {ImageAttributes} options - options required to draw an image on the canvas\n * @returns {void}\n */\n CanvasRenderer.prototype.drawImage = function (options) {\n this.ctx.save();\n var imageObj = new Image();\n if (!isNullOrUndefined(options.href)) {\n imageObj.src = options.href;\n this.ctx.drawImage(imageObj, options.x, options.y, options.width, options.height);\n }\n this.ctx.restore();\n };\n /**\n * To create a linear gradient\n *\n * @param {string[]} colors - Specifies the colors required to create linear gradient\n * @returns {string} It returns color\n */\n CanvasRenderer.prototype.createLinearGradient = function (colors) {\n var myGradient;\n if (!isNullOrUndefined(colors[0].colorStop)) {\n myGradient = this.ctx.createLinearGradient(0, 0, 0, this.canvasObj.height);\n }\n var color = this.setGradientValues(colors, myGradient);\n return color;\n };\n /**\n * To create a radial gradient\n *\n * @param {string[]} colors - Specifies the colors required to create linear gradient\n * @returns {string} It returns gradient color\n */\n CanvasRenderer.prototype.createRadialGradient = function (colors) {\n var myGradient;\n if (!isNullOrUndefined(colors[0].colorStop)) {\n myGradient = this.ctx.createRadialGradient(0, 0, 0, 0, 0, this.canvasObj.height);\n }\n var colorName = this.setGradientValues(colors, myGradient);\n return colorName;\n };\n // To set the gradient values\n CanvasRenderer.prototype.setGradientValues = function (colors, myGradient) {\n var colorName;\n if (!isNullOrUndefined(colors[0].colorStop)) {\n for (var i = 0; i <= colors.length - 1; i++) {\n var color = colors[i].color;\n var newColorStop = (colors[i].colorStop).slice(0, -1);\n var stopColor = parseInt(newColorStop, 10) / 100;\n myGradient.addColorStop(stopColor, color);\n }\n colorName = myGradient.toString();\n }\n else {\n colorName = colors[0].color.toString();\n }\n return colorName;\n };\n /**\n * To set the attributes to the element\n *\n * @param {SVGCanvasAttributes} options - Attributes to set for the element\n * @param {HTMLElement} element - The element to which the attributes need to be set\n * @returns {HTMLElement} It returns null value\n */\n CanvasRenderer.prototype.setElementAttributes = function (options, element) {\n var keys = Object.keys(options);\n var values = Object.keys(options).map(function (key) { return options[key]; });\n for (var i = 0; i < keys.length; i++) {\n element.setAttribute(keys[i], values[i]);\n }\n return null;\n };\n /**\n * To update the values of the canvas element attributes\n *\n * @param {SVGCanvasAttributes} options - Specifies the colors required to create gradient\n * @returns {void}\n */\n CanvasRenderer.prototype.updateCanvasAttributes = function (options) {\n this.setElementAttributes(options, this.canvasObj);\n var ctx = this.ctx;\n if (!isNullOrUndefined(this.dataUrl)) {\n var img_1 = new Image;\n img_1.onload = function () {\n ctx.drawImage(img_1, 0, 0);\n };\n img_1.src = this.dataUrl;\n }\n };\n /**\n * This method clears the given rectangle region\n *\n * @param {Rect} rect The rect parameter as passed\n */\n CanvasRenderer.prototype.clearRect = function (rect) {\n this.ctx.restore();\n this.ctx.clearRect(rect.x, rect.y, rect.width, rect.height);\n };\n /**\n * For canvas rendering in chart\n * Dummy method for using canvas/svg render in the same variable name in chart control\n */\n CanvasRenderer.prototype.createGroup = function () {\n return null;\n };\n /**\n * To render a clip path\n *\n * Dummy method for using canvas/svg render in the same variable name in chart control\n */\n CanvasRenderer.prototype.drawClipPath = function () {\n return null;\n };\n /**\n * To render a Circular clip path\n *\n * Dummy method for using canvas/svg render in the same variable name in chart control\n */\n CanvasRenderer.prototype.drawCircularClipPath = function () {\n return null;\n };\n /**\n * Clip method to perform clip in canvas mode\n *\n * @param {BaseAttibutes} options The canvas clip of options\n */\n CanvasRenderer.prototype.canvasClip = function (options) {\n this.ctx.save();\n this.ctx.fillStyle = 'transparent';\n this.ctx.rect(options.x, options.y, options.width, options.height);\n this.ctx.fill();\n this.ctx.clip();\n };\n /**\n * Tp restore the canvas\n */\n CanvasRenderer.prototype.canvasRestore = function () {\n this.ctx.restore();\n };\n /**\n * To draw a polygon\n * Dummy method for using canvas/svg render in the same variable name in chart control\n */\n CanvasRenderer.prototype.drawPolygon = function () {\n return null;\n };\n /**\n * To create defs element in SVG\n * Dummy method for using canvas/svg render in the same variable name in chart control\n *\n * @returns {Element} It returns null\n */\n CanvasRenderer.prototype.createDefs = function () {\n return null;\n };\n /**\n * To create clip path in SVG\n * Dummy method for using canvas/svg render in the same variable name in chart control\n */\n CanvasRenderer.prototype.createClipPath = function () {\n return null;\n };\n /**\n * To create a Html5 SVG element\n * Dummy method for using canvas/svg render in the same variable name in chart control\n *\n * @returns {Element} It returns null\n */\n CanvasRenderer.prototype.createSvg = function () {\n return null;\n };\n return CanvasRenderer;\n}());\nexport { CanvasRenderer };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\n/* eslint-disable @typescript-eslint/ban-types */\n/* eslint-disable jsdoc/require-param */\n/* eslint-disable jsdoc/require-returns */\n/* eslint-disable valid-jsdoc */\nimport { NotifyPropertyChanges, Property, Event, Complex, updateBlazorTemplate } from '@syncfusion/ej2-base';\nimport { extend, compile as templateComplier, Component, resetBlazorTemplate, isBlazor, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { SvgRenderer } from '../svg-render/index';\nimport { ChildProperty, createElement, remove, Browser, Animation } from '@syncfusion/ej2-base';\nimport { getTooltipThemeColor } from './interface';\nimport { Size, Rect, Side, measureText, getElement, findDirection, drawSymbol, textElement } from './helper';\nimport { removeElement, TextOption, TooltipLocation, PathOption, withInAreaBounds } from './helper';\n/**\n * Configures the fonts in charts.\n *\n * @private\n */\nvar TextStyle = /** @class */ (function (_super) {\n __extends(TextStyle, _super);\n function TextStyle() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(null)\n ], TextStyle.prototype, \"size\", void 0);\n __decorate([\n Property('')\n ], TextStyle.prototype, \"color\", void 0);\n __decorate([\n Property('Segoe UI')\n ], TextStyle.prototype, \"fontFamily\", void 0);\n __decorate([\n Property('Normal')\n ], TextStyle.prototype, \"fontWeight\", void 0);\n __decorate([\n Property('Normal')\n ], TextStyle.prototype, \"fontStyle\", void 0);\n __decorate([\n Property(1)\n ], TextStyle.prototype, \"opacity\", void 0);\n return TextStyle;\n}(ChildProperty));\nexport { TextStyle };\n/**\n * Configures the borders in the chart.\n *\n * @private\n */\nvar TooltipBorder = /** @class */ (function (_super) {\n __extends(TooltipBorder, _super);\n function TooltipBorder() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('')\n ], TooltipBorder.prototype, \"color\", void 0);\n __decorate([\n Property(1)\n ], TooltipBorder.prototype, \"width\", void 0);\n __decorate([\n Property('')\n ], TooltipBorder.prototype, \"dashArray\", void 0);\n return TooltipBorder;\n}(ChildProperty));\nexport { TooltipBorder };\n/**\n * Configures the borders in the chart.\n *\n * @private\n */\nvar AreaBounds = /** @class */ (function (_super) {\n __extends(AreaBounds, _super);\n function AreaBounds() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(0)\n ], AreaBounds.prototype, \"x\", void 0);\n __decorate([\n Property(0)\n ], AreaBounds.prototype, \"y\", void 0);\n __decorate([\n Property(0)\n ], AreaBounds.prototype, \"width\", void 0);\n __decorate([\n Property(0)\n ], AreaBounds.prototype, \"height\", void 0);\n return AreaBounds;\n}(ChildProperty));\nexport { AreaBounds };\n/**\n * Configures the borders in the chart.\n *\n * @private\n */\nvar ToolLocation = /** @class */ (function (_super) {\n __extends(ToolLocation, _super);\n function ToolLocation() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(0)\n ], ToolLocation.prototype, \"x\", void 0);\n __decorate([\n Property(0)\n ], ToolLocation.prototype, \"y\", void 0);\n return ToolLocation;\n}(ChildProperty));\nexport { ToolLocation };\n/**\n * Represents the Tooltip control.\n * ```html\n *