From 1785265440e4be26687bacec2f63cbd7debd1939 Mon Sep 17 00:00:00 2001 From: Grzegorz Tomicki Date: Tue, 20 Feb 2024 20:17:38 +0100 Subject: [PATCH] fix: if the percentage is set to 0 it rotates forever --- dist/circularProgressBar.esm.js | 4 ++-- dist/circularProgressBar.esm.js.map | 2 +- dist/circularProgressBar.esm.min.js | 2 +- dist/circularProgressBar.ie.min.js | 2 +- dist/circularProgressBar.js | 4 ++-- dist/circularProgressBar.js.map | 2 +- dist/circularProgressBar.min.js | 2 +- dist/circularProgressBar.umd.js | 4 ++-- dist/circularProgressBar.umd.js.map | 2 +- dist/circularProgressBar.umd.min.js | 2 +- docs/circularProgressBar.min.js | 2 +- docs/circularProgressBar.min.js.map | 2 +- sources/index.js | 6 +++--- 13 files changed, 18 insertions(+), 18 deletions(-) diff --git a/dist/circularProgressBar.esm.js b/dist/circularProgressBar.esm.js index 8074597..89a4b7d 100644 --- a/dist/circularProgressBar.esm.js +++ b/dist/circularProgressBar.esm.js @@ -190,7 +190,7 @@ class CircularProgressBar { if (commonConfiguration.number) centerNumber.textContent = "0"; circleElement.setAttribute("stroke-dashoffset", "264"); } - if (percent > 100 || percent <= 0 || angle === percent) return; + if (percent > 100 || percent < 0 || angle === percent) return; let request; let i = initial ? 0 : angle; const fps = commonConfiguration.speed || 1000; @@ -202,7 +202,7 @@ class CircularProgressBar { const delta = now - then; if (delta >= interval - tolerance) { then = now - delta % interval; - angle >= commonConfiguration.percent ? i-- : i++; + i = i < commonConfiguration.percent ? i + 1 : i - 1; } circleElement.setAttribute("stroke-dashoffset", dashOffset(i, commonConfiguration.inverse, commonConfiguration.cut)); if (centerNumber && commonConfiguration.number) { diff --git a/dist/circularProgressBar.esm.js.map b/dist/circularProgressBar.esm.js.map index 9437057..7d77840 100644 --- a/dist/circularProgressBar.esm.js.map +++ b/dist/circularProgressBar.esm.js.map @@ -1 +1 @@ -{"version":3,"file":"circularProgressBar.esm.js","sources":["../sources/helpers/defaults.js","../sources/helpers/function.js","../sources/index.js"],"sourcesContent":["/**\r\n * @typedef {Object} - Default object\r\n * @prop {String} [colorSlice] - Progress color circle\r\n * @prop {String} [fontColor] - Font color\r\n * @prop {String} [fontSize] - Font size\r\n * @prop {Number} [fontWeight] - Font weight\r\n * @prop {Array} [linearGradient] - Linear gradien for circle\r\n * @prop {Boolean} [number] - Show/hide number\r\n * @prop {Boolean} [round] - Path rounding\r\n * @prop {String} [fill] - Inner circle color\r\n * @prop {String} [unit] - Different unit instead of percentage (%) inside the circle\r\n * @prop {Number} [rotation] - Chart rotation\r\n * @prop {Number} [size] - Size progress bar width and height in px\r\n * @prop {Number} [stroke] - Stroke width, chart thickness\r\n */\r\n/**\r\n * Returns the default options of the component\r\n * @return {CPBOptions}\r\n */\r\nconst defaultOptions = {\r\n colorSlice: \"#00a1ff\",\r\n fontColor: \"#000\",\r\n fontSize: \"1.6rem\",\r\n fontWeight: 400,\r\n lineargradient: false,\r\n number: true,\r\n round: false,\r\n fill: \"none\",\r\n unit: \"%\",\r\n rotation: -90,\r\n size: 200,\r\n stroke: 10,\r\n};\r\n\r\nexport default defaultOptions;\r\n","/**\r\n *\r\n * @param {Object} object\r\n * @returns {String}\r\n */\r\nconst styleTransform = ({ rotation, animationSmooth }) => {\r\n const smoothAnimation = animationSmooth\r\n ? `transition: stroke-dashoffset ${animationSmooth}`\r\n : \"\";\r\n\r\n return `transform:rotate(${rotation}deg);transform-origin: 50% 50%;${smoothAnimation}`;\r\n};\r\n\r\n/**\r\n * Set \"stroke-dasharray\": \"1, 2\"\r\n * @param {String} type\r\n * @returns {Object}\r\n */\r\nconst strokeDasharray = (type) => {\r\n return {\r\n \"stroke-dasharray\": type || \"264\",\r\n };\r\n};\r\n\r\n/**\r\n * Set type stroke-linecap\r\n * @param {String} round\r\n * @returns {Object}\r\n */\r\nconst strokeLinecap = ({ round }) => {\r\n return {\r\n \"stroke-linecap\": round ? \"round\" : \"\",\r\n };\r\n};\r\n\r\n/**\r\n * Set font sieze/weight\r\n *\r\n * @param {Object} options\r\n * @returns {Object}\r\n */\r\nconst fontSettings = (options) => {\r\n return {\r\n \"font-size\": options.fontSize,\r\n \"font-weight\": options.fontWeight,\r\n };\r\n};\r\n\r\n/**\r\n *\r\n * @param {String} element\r\n * @returns {HTMLElement}\r\n */\r\nconst querySelector = (element) => document.querySelector(element);\r\n\r\n/**\r\n * Set color or linear-gradient\r\n *\r\n * @param {String} element\r\n * @param {Object} object\r\n */\r\nconst setColor = (element, { lineargradient, index, colorSlice }) => {\r\n element.setAttribute(\r\n \"stroke\",\r\n lineargradient ? `url(#linear-${index})` : colorSlice,\r\n );\r\n};\r\n\r\n/**\r\n * Set attribute to specific element\r\n *\r\n * @param {String} element\r\n * @param {Object} object\r\n */\r\nconst setAttribute = (element, object) => {\r\n for (const key in object) {\r\n element?.setAttribute(key, object[key]);\r\n }\r\n};\r\n\r\n/**\r\n * Create svg element\r\n *\r\n * @param {String} type\r\n * @returns {SVGElement}\r\n */\r\nconst createNSElement = (type) =>\r\n document.createElementNS(\"http://www.w3.org/2000/svg\", type);\r\n\r\n/**\r\n * Create svg tspan\r\n *\r\n * @param {String} className\r\n * @param {String} unit\r\n * @returns {HTMLElement}\r\n */\r\nconst tspan = (className, unit) => {\r\n const element = createNSElement(\"tspan\");\r\n\r\n element.classList.add(className);\r\n if (unit) element.textContent = unit;\r\n return element;\r\n};\r\n\r\n/**\r\n * Function generate stroke-dashoffset\r\n *\r\n * @param {Number} count\r\n * @param {Boolean} inverse - Counterclockwise animation\r\n * @param {Number} cut - Angle of the circle sector\r\n * @returns {Number}\r\n */\r\nconst dashOffset = (count, inverse, cut) => {\r\n const cutChar = cut ? (264 / 100) * (100 - cut) : 264;\r\n const angle = 264 - (count / 100) * cutChar;\r\n\r\n // https://github.com/tomickigrzegorz/circular-progress-bar/issues/87\r\n // inverse option is not working in ios safari\r\n // return inverse ? `${264 - angle}` : angle;\r\n return inverse ? -angle : angle;\r\n};\r\n\r\n/**\r\n * @param {HTMLElement} element\r\n * @param {HTMLElement} el\r\n * @param {String} type\r\n */\r\nconst insertAdElement = (element, el, type = \"beforeend\") =>\r\n element.insertAdjacentElement(type, el);\r\n\r\n/**\r\n * Generator function linear-gradient stop svg elements\r\n *\r\n * @param {Object} object\r\n */\r\nconst gradient = ({ index, lineargradient }) => {\r\n const defsElement = createNSElement(\"defs\");\r\n const linearGradient = createNSElement(\"linearGradient\");\r\n linearGradient.id = `linear-${index}`;\r\n\r\n const countGradient = [].slice.call(lineargradient);\r\n\r\n defsElement.appendChild(linearGradient);\r\n\r\n let number = 0;\r\n countGradient.map((item) => {\r\n const stopElements = createNSElement(\"stop\");\r\n\r\n const stopObj = {\r\n offset: `${number}%`,\r\n \"stop-color\": `${item}`,\r\n };\r\n setAttribute(stopElements, stopObj);\r\n\r\n linearGradient.appendChild(stopElements);\r\n number += 100 / (countGradient.length - 1);\r\n });\r\n\r\n return defsElement;\r\n};\r\n\r\n/**\r\n * A function that generates tspan\r\n * elements with a number and unit\r\n *\r\n * @param {Object} options - Global configuration\r\n * @param {String} className\r\n */\r\nconst percent = (options, className) => {\r\n const creatTextElementSVG = createNSElement(\"text\");\r\n\r\n creatTextElementSVG.classList.add(`${className}-text-${options.index}`);\r\n\r\n // create tspan element with number\r\n // and insert to svg text element\r\n insertAdElement(\r\n creatTextElementSVG,\r\n tspan(`${className}-percent-${options.index}`),\r\n );\r\n\r\n // create and insert unit to text element\r\n insertAdElement(\r\n creatTextElementSVG,\r\n tspan(`${className}-unit-${options.index}`, options.unit),\r\n );\r\n\r\n // config to svg text\r\n const obj = {\r\n x: \"50%\",\r\n y: \"50%\",\r\n fill: options.fontColor,\r\n \"text-anchor\": \"middle\",\r\n dy: options.textPosition || \"0.35em\",\r\n ...fontSettings(options),\r\n };\r\n\r\n setAttribute(creatTextElementSVG, obj);\r\n return creatTextElementSVG;\r\n};\r\n\r\nexport {\r\n createNSElement,\r\n dashOffset,\r\n fontSettings,\r\n gradient,\r\n insertAdElement,\r\n percent,\r\n querySelector,\r\n setAttribute,\r\n setColor,\r\n strokeDasharray,\r\n strokeLinecap,\r\n styleTransform,\r\n};\r\n","import defaultOptions from \"./helpers/defaults\";\r\nimport {\r\n createNSElement,\r\n dashOffset,\r\n fontSettings,\r\n gradient,\r\n insertAdElement,\r\n percent,\r\n querySelector,\r\n setAttribute,\r\n setColor,\r\n strokeDasharray,\r\n strokeLinecap,\r\n styleTransform,\r\n} from \"./helpers/function\";\r\n\r\n/**\r\n * @class\r\n */\r\nexport default class CircularProgressBar {\r\n /**\r\n * CircularProgressBar constructor\r\n *\r\n * @param {String} pieName - class name\r\n * @param {Object} globalObj - global configuration\r\n */\r\n constructor(pieName, globalObj = {}) {\r\n this._className = pieName;\r\n this._globalObj = globalObj;\r\n\r\n const pieElements = document.querySelectorAll(`.${pieName}`);\r\n const elements = [].slice.call(pieElements);\r\n // add index to all progressbar\r\n elements.map((item, idx) => {\r\n const id = JSON.parse(item.getAttribute(\"data-pie\"));\r\n item.setAttribute(\r\n \"data-pie-index\",\r\n id.index || globalObj.index || idx + 1,\r\n );\r\n });\r\n\r\n this._elements = elements;\r\n }\r\n\r\n /**\r\n * @param {object} outside\r\n */\r\n initial(outside) {\r\n const triggeredOutside = outside || this._elements;\r\n Array.isArray(triggeredOutside)\r\n ? triggeredOutside.map((element) => this._createSVG(element))\r\n : this._createSVG(triggeredOutside);\r\n }\r\n\r\n /**\r\n * @param {SVGAElement} svg\r\n * @param {HTMLElement} target\r\n * @param {Object} options\r\n */\r\n _progress(svg, target, options) {\r\n const pieName = this._className;\r\n if (options.number) {\r\n insertAdElement(svg, percent(options, pieName));\r\n }\r\n\r\n const progressCircle = querySelector(`.${pieName}-circle-${options.index}`);\r\n\r\n const configCircle = {\r\n fill: \"none\",\r\n \"stroke-width\": options.stroke,\r\n \"stroke-dashoffset\": \"264\",\r\n ...strokeDasharray(),\r\n ...strokeLinecap(options),\r\n };\r\n setAttribute(progressCircle, configCircle);\r\n\r\n // animation progress\r\n this.animationTo({ ...options, element: progressCircle }, true);\r\n\r\n // set style and rotation\r\n progressCircle.setAttribute(\"style\", styleTransform(options));\r\n\r\n // set color\r\n setColor(progressCircle, options);\r\n\r\n // set width and height on div\r\n target.setAttribute(\r\n \"style\",\r\n `width:${options.size}px;height:${options.size}px;`,\r\n );\r\n }\r\n\r\n /**\r\n * Callback function\r\n *\r\n * @param {Object} options\r\n * @param {Boolean} initial\r\n */\r\n animationTo(options, initial = false) {\r\n const pieName = this._className;\r\n const previousConfigObj = JSON.parse(\r\n querySelector(`[data-pie-index=\"${options.index}\"]`).getAttribute(\r\n \"data-pie\",\r\n ),\r\n );\r\n\r\n const circleElement = querySelector(`.${pieName}-circle-${options.index}`);\r\n\r\n if (!circleElement) return;\r\n\r\n // merging all configuration objects\r\n const commonConfiguration = initial\r\n ? options\r\n : {\r\n ...defaultOptions,\r\n ...previousConfigObj,\r\n ...options,\r\n ...this._globalObj,\r\n };\r\n\r\n // update color circle\r\n if (!initial) {\r\n setColor(circleElement, commonConfiguration);\r\n }\r\n\r\n // font color update\r\n if (!initial && commonConfiguration.number) {\r\n const fontconfig = {\r\n fill: commonConfiguration.fontColor,\r\n ...fontSettings(commonConfiguration),\r\n };\r\n const textElement = querySelector(\r\n `.${pieName}-text-${commonConfiguration.index}`,\r\n );\r\n setAttribute(textElement, fontconfig);\r\n }\r\n\r\n const centerNumber = querySelector(`.${pieName}-percent-${options.index}`);\r\n\r\n if (commonConfiguration.animationOff) {\r\n if (commonConfiguration.number)\r\n centerNumber.textContent = `${commonConfiguration.percent}`;\r\n circleElement.setAttribute(\r\n \"stroke-dashoffset\",\r\n dashOffset(commonConfiguration.percent, commonConfiguration.inverse),\r\n );\r\n return;\r\n }\r\n\r\n // get numer percent from data-angel\r\n let angle = JSON.parse(circleElement.getAttribute(\"data-angel\"));\r\n\r\n // round if number is decimal\r\n const percent = Math.round(options.percent);\r\n\r\n // if percent 0 then set at start 0%\r\n if (percent === 0) {\r\n if (commonConfiguration.number) centerNumber.textContent = \"0\";\r\n circleElement.setAttribute(\"stroke-dashoffset\", \"264\");\r\n }\r\n\r\n if (percent > 100 || percent <= 0 || angle === percent) return;\r\n\r\n let request;\r\n let i = initial ? 0 : angle;\r\n\r\n const fps = commonConfiguration.speed || 1000;\r\n const interval = 1000 / fps;\r\n const tolerance = 0.1;\r\n let then = performance.now();\r\n\r\n const performAnimation = (now) => {\r\n request = requestAnimationFrame(performAnimation);\r\n const delta = now - then;\r\n\r\n if (delta >= interval - tolerance) {\r\n then = now - (delta % interval);\r\n\r\n angle >= commonConfiguration.percent ? i-- : i++;\r\n }\r\n\r\n circleElement.setAttribute(\r\n \"stroke-dashoffset\",\r\n dashOffset(i, commonConfiguration.inverse, commonConfiguration.cut),\r\n );\r\n if (centerNumber && commonConfiguration.number) {\r\n centerNumber.textContent = `${i}`;\r\n }\r\n\r\n circleElement.setAttribute(\"data-angel\", i);\r\n circleElement.parentNode.setAttribute(\"aria-valuenow\", i);\r\n\r\n // console.log(i, percent);\r\n if (i === percent) {\r\n cancelAnimationFrame(request);\r\n }\r\n\r\n // return;\r\n };\r\n\r\n requestAnimationFrame(performAnimation);\r\n }\r\n\r\n /**\r\n * Create svg elements\r\n *\r\n * @param {HTMLElement} element\r\n */\r\n _createSVG(element) {\r\n const index = element.getAttribute(\"data-pie-index\");\r\n const json = JSON.parse(element.getAttribute(\"data-pie\"));\r\n\r\n const options = { ...defaultOptions, ...json, index, ...this._globalObj };\r\n\r\n const svg = createNSElement(\"svg\");\r\n\r\n const configSVG = {\r\n role: \"progressbar\",\r\n width: options.size,\r\n height: options.size,\r\n viewBox: \"0 0 100 100\",\r\n \"aria-valuemin\": \"0\",\r\n \"aria-valuemax\": \"100\",\r\n };\r\n\r\n setAttribute(svg, configSVG);\r\n\r\n // colorCircle\r\n if (options.colorCircle) {\r\n svg.appendChild(this._circle(options));\r\n }\r\n\r\n // gradient\r\n if (options.lineargradient) {\r\n svg.appendChild(gradient(options));\r\n }\r\n\r\n svg.appendChild(this._circle(options, \"top\"));\r\n\r\n element.appendChild(svg);\r\n\r\n this._progress(svg, element, options);\r\n }\r\n\r\n /**\r\n * Create circle top/bottom\r\n *\r\n * @param {Object} options\r\n * @param {String} where\r\n * @returns {SVGElement}\r\n */\r\n _circle(options, where = \"bottom\") {\r\n const circle = createNSElement(\"circle\");\r\n\r\n let configCircle = {};\r\n if (options.cut) {\r\n const dashoffset = 264 - (100 - options.cut) * 2.64;\r\n configCircle = {\r\n \"stroke-dashoffset\": options.inverse ? -dashoffset : dashoffset,\r\n style: styleTransform(options),\r\n ...strokeDasharray(),\r\n ...strokeLinecap(options),\r\n };\r\n }\r\n\r\n const objCircle = {\r\n fill: options.fill,\r\n stroke: options.colorCircle,\r\n \"stroke-width\": options.strokeBottom || options.stroke,\r\n ...configCircle,\r\n };\r\n\r\n if (options.strokeDasharray) {\r\n Object.assign(objCircle, { ...strokeDasharray(options.strokeDasharray) });\r\n }\r\n\r\n const typeCircle =\r\n where === \"top\"\r\n ? { class: `${this._className}-circle-${options.index}` }\r\n : objCircle;\r\n\r\n const objConfig = {\r\n cx: \"50%\",\r\n cy: \"50%\",\r\n r: 42,\r\n \"shape-rendering\": \"geometricPrecision\",\r\n ...typeCircle,\r\n };\r\n\r\n setAttribute(circle, objConfig);\r\n\r\n return circle;\r\n }\r\n}\r\n"],"names":["defaultOptions","colorSlice","fontColor","fontSize","fontWeight","lineargradient","number","round","fill","unit","rotation","size","stroke","styleTransform","_ref","animationSmooth","smoothAnimation","strokeDasharray","type","strokeLinecap","_ref2","fontSettings","options","querySelector","element","document","setColor","_ref3","index","setAttribute","object","key","createNSElement","createElementNS","tspan","className","classList","add","textContent","dashOffset","count","inverse","cut","cutChar","angle","insertAdElement","el","insertAdjacentElement","gradient","_ref4","defsElement","linearGradient","id","countGradient","slice","call","appendChild","map","item","stopElements","stopObj","offset","length","percent","creatTextElementSVG","obj","x","y","dy","textPosition","CircularProgressBar","constructor","pieName","globalObj","_className","_globalObj","pieElements","querySelectorAll","elements","idx","JSON","parse","getAttribute","_elements","initial","outside","triggeredOutside","Array","isArray","_createSVG","_progress","svg","target","progressCircle","configCircle","animationTo","previousConfigObj","circleElement","commonConfiguration","fontconfig","textElement","centerNumber","animationOff","Math","request","i","fps","speed","interval","tolerance","then","performance","now","performAnimation","requestAnimationFrame","delta","parentNode","cancelAnimationFrame","json","configSVG","role","width","height","viewBox","colorCircle","_circle","where","circle","dashoffset","style","objCircle","strokeBottom","Object","assign","typeCircle","class","objConfig","cx","cy","r"],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"circularProgressBar.esm.js","sources":["../sources/helpers/defaults.js","../sources/helpers/function.js","../sources/index.js"],"sourcesContent":["/**\r\n * @typedef {Object} - Default object\r\n * @prop {String} [colorSlice] - Progress color circle\r\n * @prop {String} [fontColor] - Font color\r\n * @prop {String} [fontSize] - Font size\r\n * @prop {Number} [fontWeight] - Font weight\r\n * @prop {Array} [linearGradient] - Linear gradien for circle\r\n * @prop {Boolean} [number] - Show/hide number\r\n * @prop {Boolean} [round] - Path rounding\r\n * @prop {String} [fill] - Inner circle color\r\n * @prop {String} [unit] - Different unit instead of percentage (%) inside the circle\r\n * @prop {Number} [rotation] - Chart rotation\r\n * @prop {Number} [size] - Size progress bar width and height in px\r\n * @prop {Number} [stroke] - Stroke width, chart thickness\r\n */\r\n/**\r\n * Returns the default options of the component\r\n * @return {CPBOptions}\r\n */\r\nconst defaultOptions = {\r\n colorSlice: \"#00a1ff\",\r\n fontColor: \"#000\",\r\n fontSize: \"1.6rem\",\r\n fontWeight: 400,\r\n lineargradient: false,\r\n number: true,\r\n round: false,\r\n fill: \"none\",\r\n unit: \"%\",\r\n rotation: -90,\r\n size: 200,\r\n stroke: 10,\r\n};\r\n\r\nexport default defaultOptions;\r\n","/**\r\n *\r\n * @param {Object} object\r\n * @returns {String}\r\n */\r\nconst styleTransform = ({ rotation, animationSmooth }) => {\r\n const smoothAnimation = animationSmooth\r\n ? `transition: stroke-dashoffset ${animationSmooth}`\r\n : \"\";\r\n\r\n return `transform:rotate(${rotation}deg);transform-origin: 50% 50%;${smoothAnimation}`;\r\n};\r\n\r\n/**\r\n * Set \"stroke-dasharray\": \"1, 2\"\r\n * @param {String} type\r\n * @returns {Object}\r\n */\r\nconst strokeDasharray = (type) => {\r\n return {\r\n \"stroke-dasharray\": type || \"264\",\r\n };\r\n};\r\n\r\n/**\r\n * Set type stroke-linecap\r\n * @param {String} round\r\n * @returns {Object}\r\n */\r\nconst strokeLinecap = ({ round }) => {\r\n return {\r\n \"stroke-linecap\": round ? \"round\" : \"\",\r\n };\r\n};\r\n\r\n/**\r\n * Set font sieze/weight\r\n *\r\n * @param {Object} options\r\n * @returns {Object}\r\n */\r\nconst fontSettings = (options) => {\r\n return {\r\n \"font-size\": options.fontSize,\r\n \"font-weight\": options.fontWeight,\r\n };\r\n};\r\n\r\n/**\r\n *\r\n * @param {String} element\r\n * @returns {HTMLElement}\r\n */\r\nconst querySelector = (element) => document.querySelector(element);\r\n\r\n/**\r\n * Set color or linear-gradient\r\n *\r\n * @param {String} element\r\n * @param {Object} object\r\n */\r\nconst setColor = (element, { lineargradient, index, colorSlice }) => {\r\n element.setAttribute(\r\n \"stroke\",\r\n lineargradient ? `url(#linear-${index})` : colorSlice,\r\n );\r\n};\r\n\r\n/**\r\n * Set attribute to specific element\r\n *\r\n * @param {String} element\r\n * @param {Object} object\r\n */\r\nconst setAttribute = (element, object) => {\r\n for (const key in object) {\r\n element?.setAttribute(key, object[key]);\r\n }\r\n};\r\n\r\n/**\r\n * Create svg element\r\n *\r\n * @param {String} type\r\n * @returns {SVGElement}\r\n */\r\nconst createNSElement = (type) =>\r\n document.createElementNS(\"http://www.w3.org/2000/svg\", type);\r\n\r\n/**\r\n * Create svg tspan\r\n *\r\n * @param {String} className\r\n * @param {String} unit\r\n * @returns {HTMLElement}\r\n */\r\nconst tspan = (className, unit) => {\r\n const element = createNSElement(\"tspan\");\r\n\r\n element.classList.add(className);\r\n if (unit) element.textContent = unit;\r\n return element;\r\n};\r\n\r\n/**\r\n * Function generate stroke-dashoffset\r\n *\r\n * @param {Number} count\r\n * @param {Boolean} inverse - Counterclockwise animation\r\n * @param {Number} cut - Angle of the circle sector\r\n * @returns {Number}\r\n */\r\nconst dashOffset = (count, inverse, cut) => {\r\n const cutChar = cut ? (264 / 100) * (100 - cut) : 264;\r\n const angle = 264 - (count / 100) * cutChar;\r\n\r\n // https://github.com/tomickigrzegorz/circular-progress-bar/issues/87\r\n // inverse option is not working in ios safari\r\n // return inverse ? `${264 - angle}` : angle;\r\n return inverse ? -angle : angle;\r\n};\r\n\r\n/**\r\n * @param {HTMLElement} element\r\n * @param {HTMLElement} el\r\n * @param {String} type\r\n */\r\nconst insertAdElement = (element, el, type = \"beforeend\") =>\r\n element.insertAdjacentElement(type, el);\r\n\r\n/**\r\n * Generator function linear-gradient stop svg elements\r\n *\r\n * @param {Object} object\r\n */\r\nconst gradient = ({ index, lineargradient }) => {\r\n const defsElement = createNSElement(\"defs\");\r\n const linearGradient = createNSElement(\"linearGradient\");\r\n linearGradient.id = `linear-${index}`;\r\n\r\n const countGradient = [].slice.call(lineargradient);\r\n\r\n defsElement.appendChild(linearGradient);\r\n\r\n let number = 0;\r\n countGradient.map((item) => {\r\n const stopElements = createNSElement(\"stop\");\r\n\r\n const stopObj = {\r\n offset: `${number}%`,\r\n \"stop-color\": `${item}`,\r\n };\r\n setAttribute(stopElements, stopObj);\r\n\r\n linearGradient.appendChild(stopElements);\r\n number += 100 / (countGradient.length - 1);\r\n });\r\n\r\n return defsElement;\r\n};\r\n\r\n/**\r\n * A function that generates tspan\r\n * elements with a number and unit\r\n *\r\n * @param {Object} options - Global configuration\r\n * @param {String} className\r\n */\r\nconst percent = (options, className) => {\r\n const creatTextElementSVG = createNSElement(\"text\");\r\n\r\n creatTextElementSVG.classList.add(`${className}-text-${options.index}`);\r\n\r\n // create tspan element with number\r\n // and insert to svg text element\r\n insertAdElement(\r\n creatTextElementSVG,\r\n tspan(`${className}-percent-${options.index}`),\r\n );\r\n\r\n // create and insert unit to text element\r\n insertAdElement(\r\n creatTextElementSVG,\r\n tspan(`${className}-unit-${options.index}`, options.unit),\r\n );\r\n\r\n // config to svg text\r\n const obj = {\r\n x: \"50%\",\r\n y: \"50%\",\r\n fill: options.fontColor,\r\n \"text-anchor\": \"middle\",\r\n dy: options.textPosition || \"0.35em\",\r\n ...fontSettings(options),\r\n };\r\n\r\n setAttribute(creatTextElementSVG, obj);\r\n return creatTextElementSVG;\r\n};\r\n\r\nexport {\r\n createNSElement,\r\n dashOffset,\r\n fontSettings,\r\n gradient,\r\n insertAdElement,\r\n percent,\r\n querySelector,\r\n setAttribute,\r\n setColor,\r\n strokeDasharray,\r\n strokeLinecap,\r\n styleTransform,\r\n};\r\n","import defaultOptions from \"./helpers/defaults\";\r\nimport {\r\n createNSElement,\r\n dashOffset,\r\n fontSettings,\r\n gradient,\r\n insertAdElement,\r\n percent,\r\n querySelector,\r\n setAttribute,\r\n setColor,\r\n strokeDasharray,\r\n strokeLinecap,\r\n styleTransform,\r\n} from \"./helpers/function\";\r\n\r\n/**\r\n * @class\r\n */\r\nexport default class CircularProgressBar {\r\n /**\r\n * CircularProgressBar constructor\r\n *\r\n * @param {String} pieName - class name\r\n * @param {Object} globalObj - global configuration\r\n */\r\n constructor(pieName, globalObj = {}) {\r\n this._className = pieName;\r\n this._globalObj = globalObj;\r\n\r\n const pieElements = document.querySelectorAll(`.${pieName}`);\r\n const elements = [].slice.call(pieElements);\r\n // add index to all progressbar\r\n elements.map((item, idx) => {\r\n const id = JSON.parse(item.getAttribute(\"data-pie\"));\r\n item.setAttribute(\r\n \"data-pie-index\",\r\n id.index || globalObj.index || idx + 1,\r\n );\r\n });\r\n\r\n this._elements = elements;\r\n }\r\n\r\n /**\r\n * @param {object} outside\r\n */\r\n initial(outside) {\r\n const triggeredOutside = outside || this._elements;\r\n Array.isArray(triggeredOutside)\r\n ? triggeredOutside.map((element) => this._createSVG(element))\r\n : this._createSVG(triggeredOutside);\r\n }\r\n\r\n /**\r\n * @param {SVGAElement} svg\r\n * @param {HTMLElement} target\r\n * @param {Object} options\r\n */\r\n _progress(svg, target, options) {\r\n const pieName = this._className;\r\n if (options.number) {\r\n insertAdElement(svg, percent(options, pieName));\r\n }\r\n\r\n const progressCircle = querySelector(`.${pieName}-circle-${options.index}`);\r\n\r\n const configCircle = {\r\n fill: \"none\",\r\n \"stroke-width\": options.stroke,\r\n \"stroke-dashoffset\": \"264\",\r\n ...strokeDasharray(),\r\n ...strokeLinecap(options),\r\n };\r\n setAttribute(progressCircle, configCircle);\r\n\r\n // animation progress\r\n this.animationTo({ ...options, element: progressCircle }, true);\r\n\r\n // set style and rotation\r\n progressCircle.setAttribute(\"style\", styleTransform(options));\r\n\r\n // set color\r\n setColor(progressCircle, options);\r\n\r\n // set width and height on div\r\n target.setAttribute(\r\n \"style\",\r\n `width:${options.size}px;height:${options.size}px;`,\r\n );\r\n }\r\n\r\n /**\r\n * Callback function\r\n *\r\n * @param {Object} options\r\n * @param {Boolean} initial\r\n */\r\n animationTo(options, initial = false) {\r\n const pieName = this._className;\r\n const previousConfigObj = JSON.parse(\r\n querySelector(`[data-pie-index=\"${options.index}\"]`).getAttribute(\r\n \"data-pie\",\r\n ),\r\n );\r\n\r\n const circleElement = querySelector(`.${pieName}-circle-${options.index}`);\r\n\r\n if (!circleElement) return;\r\n\r\n // merging all configuration objects\r\n const commonConfiguration = initial\r\n ? options\r\n : {\r\n ...defaultOptions,\r\n ...previousConfigObj,\r\n ...options,\r\n ...this._globalObj,\r\n };\r\n\r\n // update color circle\r\n if (!initial) {\r\n setColor(circleElement, commonConfiguration);\r\n }\r\n\r\n // font color update\r\n if (!initial && commonConfiguration.number) {\r\n const fontconfig = {\r\n fill: commonConfiguration.fontColor,\r\n ...fontSettings(commonConfiguration),\r\n };\r\n const textElement = querySelector(\r\n `.${pieName}-text-${commonConfiguration.index}`,\r\n );\r\n setAttribute(textElement, fontconfig);\r\n }\r\n\r\n const centerNumber = querySelector(`.${pieName}-percent-${options.index}`);\r\n\r\n if (commonConfiguration.animationOff) {\r\n if (commonConfiguration.number)\r\n centerNumber.textContent = `${commonConfiguration.percent}`;\r\n circleElement.setAttribute(\r\n \"stroke-dashoffset\",\r\n dashOffset(commonConfiguration.percent, commonConfiguration.inverse),\r\n );\r\n return;\r\n }\r\n\r\n // get numer percent from data-angel\r\n let angle = JSON.parse(circleElement.getAttribute(\"data-angel\"));\r\n\r\n // round if number is decimal\r\n const percent = Math.round(options.percent);\r\n\r\n // if percent 0 then set at start 0%\r\n if (percent === 0) {\r\n if (commonConfiguration.number) centerNumber.textContent = \"0\";\r\n circleElement.setAttribute(\"stroke-dashoffset\", \"264\");\r\n }\r\n\r\n if (percent > 100 || percent < 0 || angle === percent) return;\r\n\r\n let request;\r\n let i = initial ? 0 : angle;\r\n\r\n const fps = commonConfiguration.speed || 1000;\r\n const interval = 1000 / fps;\r\n const tolerance = 0.1;\r\n let then = performance.now();\r\n\r\n const performAnimation = (now) => {\r\n request = requestAnimationFrame(performAnimation);\r\n const delta = now - then;\r\n\r\n if (delta >= interval - tolerance) {\r\n then = now - (delta % interval);\r\n\r\n // angle >= commonConfiguration.percent ? i-- : i++;\r\n i = i < commonConfiguration.percent ? i + 1 : i - 1;\r\n }\r\n\r\n circleElement.setAttribute(\r\n \"stroke-dashoffset\",\r\n dashOffset(i, commonConfiguration.inverse, commonConfiguration.cut),\r\n );\r\n if (centerNumber && commonConfiguration.number) {\r\n centerNumber.textContent = `${i}`;\r\n }\r\n\r\n circleElement.setAttribute(\"data-angel\", i);\r\n circleElement.parentNode.setAttribute(\"aria-valuenow\", i);\r\n\r\n if (i === percent) {\r\n cancelAnimationFrame(request);\r\n }\r\n\r\n // return;\r\n };\r\n\r\n requestAnimationFrame(performAnimation);\r\n }\r\n\r\n /**\r\n * Create svg elements\r\n *\r\n * @param {HTMLElement} element\r\n */\r\n _createSVG(element) {\r\n const index = element.getAttribute(\"data-pie-index\");\r\n const json = JSON.parse(element.getAttribute(\"data-pie\"));\r\n\r\n const options = { ...defaultOptions, ...json, index, ...this._globalObj };\r\n\r\n const svg = createNSElement(\"svg\");\r\n\r\n const configSVG = {\r\n role: \"progressbar\",\r\n width: options.size,\r\n height: options.size,\r\n viewBox: \"0 0 100 100\",\r\n \"aria-valuemin\": \"0\",\r\n \"aria-valuemax\": \"100\",\r\n };\r\n\r\n setAttribute(svg, configSVG);\r\n\r\n // colorCircle\r\n if (options.colorCircle) {\r\n svg.appendChild(this._circle(options));\r\n }\r\n\r\n // gradient\r\n if (options.lineargradient) {\r\n svg.appendChild(gradient(options));\r\n }\r\n\r\n svg.appendChild(this._circle(options, \"top\"));\r\n\r\n element.appendChild(svg);\r\n\r\n this._progress(svg, element, options);\r\n }\r\n\r\n /**\r\n * Create circle top/bottom\r\n *\r\n * @param {Object} options\r\n * @param {String} where\r\n * @returns {SVGElement}\r\n */\r\n _circle(options, where = \"bottom\") {\r\n const circle = createNSElement(\"circle\");\r\n\r\n let configCircle = {};\r\n if (options.cut) {\r\n const dashoffset = 264 - (100 - options.cut) * 2.64;\r\n configCircle = {\r\n \"stroke-dashoffset\": options.inverse ? -dashoffset : dashoffset,\r\n style: styleTransform(options),\r\n ...strokeDasharray(),\r\n ...strokeLinecap(options),\r\n };\r\n }\r\n\r\n const objCircle = {\r\n fill: options.fill,\r\n stroke: options.colorCircle,\r\n \"stroke-width\": options.strokeBottom || options.stroke,\r\n ...configCircle,\r\n };\r\n\r\n if (options.strokeDasharray) {\r\n Object.assign(objCircle, { ...strokeDasharray(options.strokeDasharray) });\r\n }\r\n\r\n const typeCircle =\r\n where === \"top\"\r\n ? { class: `${this._className}-circle-${options.index}` }\r\n : objCircle;\r\n\r\n const objConfig = {\r\n cx: \"50%\",\r\n cy: \"50%\",\r\n r: 42,\r\n \"shape-rendering\": \"geometricPrecision\",\r\n ...typeCircle,\r\n };\r\n\r\n setAttribute(circle, objConfig);\r\n\r\n return circle;\r\n }\r\n}\r\n"],"names":["defaultOptions","colorSlice","fontColor","fontSize","fontWeight","lineargradient","number","round","fill","unit","rotation","size","stroke","styleTransform","_ref","animationSmooth","smoothAnimation","strokeDasharray","type","strokeLinecap","_ref2","fontSettings","options","querySelector","element","document","setColor","_ref3","index","setAttribute","object","key","createNSElement","createElementNS","tspan","className","classList","add","textContent","dashOffset","count","inverse","cut","cutChar","angle","insertAdElement","el","insertAdjacentElement","gradient","_ref4","defsElement","linearGradient","id","countGradient","slice","call","appendChild","map","item","stopElements","stopObj","offset","length","percent","creatTextElementSVG","obj","x","y","dy","textPosition","CircularProgressBar","constructor","pieName","globalObj","_className","_globalObj","pieElements","querySelectorAll","elements","idx","JSON","parse","getAttribute","_elements","initial","outside","triggeredOutside","Array","isArray","_createSVG","_progress","svg","target","progressCircle","configCircle","animationTo","previousConfigObj","circleElement","commonConfiguration","fontconfig","textElement","centerNumber","animationOff","Math","request","i","fps","speed","interval","tolerance","then","performance","now","performAnimation","requestAnimationFrame","delta","parentNode","cancelAnimationFrame","json","configSVG","role","width","height","viewBox","colorCircle","_circle","where","circle","dashoffset","style","objCircle","strokeBottom","Object","assign","typeCircle","class","objConfig","cx","cy","r"],"mappings":"AAmBA,MAAMA,cAAc,GAAG;AACrBC,EAAAA,UAAU,EAAE,SAAS;AACrBC,EAAAA,SAAS,EAAE,MAAM;AACjBC,EAAAA,QAAQ,EAAE,QAAQ;AAClBC,EAAAA,UAAU,EAAE,GAAG;AACfC,EAAAA,cAAc,EAAE,KAAK;AACrBC,EAAAA,MAAM,EAAE,IAAI;AACZC,EAAAA,KAAK,EAAE,KAAK;AACZC,EAAAA,IAAI,EAAE,MAAM;AACZC,EAAAA,IAAI,EAAE,GAAG;EACTC,QAAQ,EAAE,CAAC,EAAE;AACbC,EAAAA,IAAI,EAAE,GAAG;AACTC,EAAAA,MAAM,EAAE,EAAA;AACV,CAAC;;AC3BD,MAAMC,cAAc,GAAGC,IAAA,IAAmC;EAAA,IAAlC;IAAEJ,QAAQ;AAAEK,IAAAA,eAAAA;AAAgB,GAAC,GAAAD,IAAA,CAAA;EACnD,MAAME,eAAe,GAAGD,eAAe,GAClC,iCAAgCA,eAAgB,CAAA,CAAC,GAClD,EAAE,CAAA;AAEN,EAAA,OAAQ,CAAmBL,iBAAAA,EAAAA,QAAS,CAAiCM,+BAAAA,EAAAA,eAAgB,CAAC,CAAA,CAAA;AACxF,CAAC,CAAA;AAOD,MAAMC,eAAe,GAAIC,IAAI,IAAK;EAChC,OAAO;IACL,kBAAkB,EAAEA,IAAI,IAAI,KAAA;GAC7B,CAAA;AACH,CAAC,CAAA;AAOD,MAAMC,aAAa,GAAGC,KAAA,IAAe;EAAA,IAAd;AAAEb,IAAAA,KAAAA;AAAM,GAAC,GAAAa,KAAA,CAAA;EAC9B,OAAO;AACL,IAAA,gBAAgB,EAAEb,KAAK,GAAG,OAAO,GAAG,EAAA;GACrC,CAAA;AACH,CAAC,CAAA;AAQD,MAAMc,YAAY,GAAIC,OAAO,IAAK;EAChC,OAAO;IACL,WAAW,EAAEA,OAAO,CAACnB,QAAQ;IAC7B,aAAa,EAAEmB,OAAO,CAAClB,UAAAA;GACxB,CAAA;AACH,CAAC,CAAA;AAOD,MAAMmB,aAAa,GAAIC,OAAO,IAAKC,QAAQ,CAACF,aAAa,CAACC,OAAO,CAAC,CAAA;AAQlE,MAAME,QAAQ,GAAGA,CAACF,OAAO,EAAAG,KAAA,KAA4C;EAAA,IAA1C;IAAEtB,cAAc;IAAEuB,KAAK;AAAE3B,IAAAA,UAAAA;AAAW,GAAC,GAAA0B,KAAA,CAAA;AAC9DH,EAAAA,OAAO,CAACK,YAAY,CAClB,QAAQ,EACRxB,cAAc,GAAI,CAAA,YAAA,EAAcuB,KAAM,CAAA,CAAA,CAAE,GAAG3B,UAC7C,CAAC,CAAA;AACH,CAAC,CAAA;AAQD,MAAM4B,YAAY,GAAGA,CAACL,OAAO,EAAEM,MAAM,KAAK;AACxC,EAAA,KAAK,MAAMC,GAAG,IAAID,MAAM,EAAE;IACxBN,OAAO,EAAEK,YAAY,CAACE,GAAG,EAAED,MAAM,CAACC,GAAG,CAAC,CAAC,CAAA;AACzC,GAAA;AACF,CAAC,CAAA;AAQD,MAAMC,eAAe,GAAId,IAAI,IAC3BO,QAAQ,CAACQ,eAAe,CAAC,4BAA4B,EAAEf,IAAI,CAAC,CAAA;AAS9D,MAAMgB,KAAK,GAAGA,CAACC,SAAS,EAAE1B,IAAI,KAAK;AACjC,EAAA,MAAMe,OAAO,GAAGQ,eAAe,CAAC,OAAO,CAAC,CAAA;AAExCR,EAAAA,OAAO,CAACY,SAAS,CAACC,GAAG,CAACF,SAAS,CAAC,CAAA;AAChC,EAAA,IAAI1B,IAAI,EAAEe,OAAO,CAACc,WAAW,GAAG7B,IAAI,CAAA;AACpC,EAAA,OAAOe,OAAO,CAAA;AAChB,CAAC,CAAA;AAUD,MAAMe,UAAU,GAAGA,CAACC,KAAK,EAAEC,OAAO,EAAEC,GAAG,KAAK;AAC1C,EAAA,MAAMC,OAAO,GAAGD,GAAG,GAAI,GAAG,GAAG,GAAG,IAAK,GAAG,GAAGA,GAAG,CAAC,GAAG,GAAG,CAAA;EACrD,MAAME,KAAK,GAAG,GAAG,GAAIJ,KAAK,GAAG,GAAG,GAAIG,OAAO,CAAA;AAK3C,EAAA,OAAOF,OAAO,GAAG,CAACG,KAAK,GAAGA,KAAK,CAAA;AACjC,CAAC,CAAA;AAOD,MAAMC,eAAe,GAAG,UAACrB,OAAO,EAAEsB,EAAE,EAAE5B,IAAI,EAAA;AAAA,EAAA,IAAJA,IAAI,KAAA,KAAA,CAAA,EAAA;AAAJA,IAAAA,IAAI,GAAG,WAAW,CAAA;AAAA,GAAA;AAAA,EAAA,OACtDM,OAAO,CAACuB,qBAAqB,CAAC7B,IAAI,EAAE4B,EAAE,CAAC,CAAA;AAAA,CAAA,CAAA;AAOzC,MAAME,QAAQ,GAAGC,KAAA,IAA+B;EAAA,IAA9B;IAAErB,KAAK;AAAEvB,IAAAA,cAAAA;AAAe,GAAC,GAAA4C,KAAA,CAAA;AACzC,EAAA,MAAMC,WAAW,GAAGlB,eAAe,CAAC,MAAM,CAAC,CAAA;AAC3C,EAAA,MAAMmB,cAAc,GAAGnB,eAAe,CAAC,gBAAgB,CAAC,CAAA;AACxDmB,EAAAA,cAAc,CAACC,EAAE,GAAI,CAAA,OAAA,EAASxB,KAAM,CAAC,CAAA,CAAA;EAErC,MAAMyB,aAAa,GAAG,EAAE,CAACC,KAAK,CAACC,IAAI,CAAClD,cAAc,CAAC,CAAA;AAEnD6C,EAAAA,WAAW,CAACM,WAAW,CAACL,cAAc,CAAC,CAAA;EAEvC,IAAI7C,MAAM,GAAG,CAAC,CAAA;AACd+C,EAAAA,aAAa,CAACI,GAAG,CAAEC,IAAI,IAAK;AAC1B,IAAA,MAAMC,YAAY,GAAG3B,eAAe,CAAC,MAAM,CAAC,CAAA;AAE5C,IAAA,MAAM4B,OAAO,GAAG;MACdC,MAAM,EAAG,CAAEvD,EAAAA,MAAO,CAAE,CAAA,CAAA;MACpB,YAAY,EAAG,GAAEoD,IAAK,CAAA,CAAA;KACvB,CAAA;AACD7B,IAAAA,YAAY,CAAC8B,YAAY,EAAEC,OAAO,CAAC,CAAA;AAEnCT,IAAAA,cAAc,CAACK,WAAW,CAACG,YAAY,CAAC,CAAA;IACxCrD,MAAM,IAAI,GAAG,IAAI+C,aAAa,CAACS,MAAM,GAAG,CAAC,CAAC,CAAA;AAC5C,GAAC,CAAC,CAAA;AAEF,EAAA,OAAOZ,WAAW,CAAA;AACpB,CAAC,CAAA;AASD,MAAMa,OAAO,GAAGA,CAACzC,OAAO,EAAEa,SAAS,KAAK;AACtC,EAAA,MAAM6B,mBAAmB,GAAGhC,eAAe,CAAC,MAAM,CAAC,CAAA;AAEnDgC,EAAAA,mBAAmB,CAAC5B,SAAS,CAACC,GAAG,CAAE,CAAA,EAAEF,SAAU,CAAA,MAAA,EAAQb,OAAO,CAACM,KAAM,CAAA,CAAC,CAAC,CAAA;AAIvEiB,EAAAA,eAAe,CACbmB,mBAAmB,EACnB9B,KAAK,CAAE,CAAA,EAAEC,SAAU,CAAA,SAAA,EAAWb,OAAO,CAACM,KAAM,CAAA,CAAC,CAC/C,CAAC,CAAA;AAGDiB,EAAAA,eAAe,CACbmB,mBAAmB,EACnB9B,KAAK,CAAE,GAAEC,SAAU,CAAA,MAAA,EAAQb,OAAO,CAACM,KAAM,CAAC,CAAA,EAAEN,OAAO,CAACb,IAAI,CAC1D,CAAC,CAAA;AAGD,EAAA,MAAMwD,GAAG,GAAG;AACVC,IAAAA,CAAC,EAAE,KAAK;AACRC,IAAAA,CAAC,EAAE,KAAK;IACR3D,IAAI,EAAEc,OAAO,CAACpB,SAAS;AACvB,IAAA,aAAa,EAAE,QAAQ;AACvBkE,IAAAA,EAAE,EAAE9C,OAAO,CAAC+C,YAAY,IAAI,QAAQ;IACpC,GAAGhD,YAAY,CAACC,OAAO,CAAA;GACxB,CAAA;AAEDO,EAAAA,YAAY,CAACmC,mBAAmB,EAAEC,GAAG,CAAC,CAAA;AACtC,EAAA,OAAOD,mBAAmB,CAAA;AAC5B,CAAC;;ACnLc,MAAMM,mBAAmB,CAAC;AAOvCC,EAAAA,WAAWA,CAACC,OAAO,EAAEC,SAAS,EAAO;AAAA,IAAA,IAAhBA,SAAS,KAAA,KAAA,CAAA,EAAA;MAATA,SAAS,GAAG,EAAE,CAAA;AAAA,KAAA;IACjC,IAAI,CAACC,UAAU,GAAGF,OAAO,CAAA;IACzB,IAAI,CAACG,UAAU,GAAGF,SAAS,CAAA;IAE3B,MAAMG,WAAW,GAAGnD,QAAQ,CAACoD,gBAAgB,CAAE,CAAA,CAAA,EAAGL,OAAQ,CAAA,CAAC,CAAC,CAAA;IAC5D,MAAMM,QAAQ,GAAG,EAAE,CAACxB,KAAK,CAACC,IAAI,CAACqB,WAAW,CAAC,CAAA;AAE3CE,IAAAA,QAAQ,CAACrB,GAAG,CAAC,CAACC,IAAI,EAAEqB,GAAG,KAAK;AAC1B,MAAA,MAAM3B,EAAE,GAAG4B,IAAI,CAACC,KAAK,CAACvB,IAAI,CAACwB,YAAY,CAAC,UAAU,CAAC,CAAC,CAAA;AACpDxB,MAAAA,IAAI,CAAC7B,YAAY,CACf,gBAAgB,EAChBuB,EAAE,CAACxB,KAAK,IAAI6C,SAAS,CAAC7C,KAAK,IAAImD,GAAG,GAAG,CACvC,CAAC,CAAA;AACH,KAAC,CAAC,CAAA;IAEF,IAAI,CAACI,SAAS,GAAGL,QAAQ,CAAA;AAC3B,GAAA;EAKAM,OAAOA,CAACC,OAAO,EAAE;AACf,IAAA,MAAMC,gBAAgB,GAAGD,OAAO,IAAI,IAAI,CAACF,SAAS,CAAA;IAClDI,KAAK,CAACC,OAAO,CAACF,gBAAgB,CAAC,GAC3BA,gBAAgB,CAAC7B,GAAG,CAAEjC,OAAO,IAAK,IAAI,CAACiE,UAAU,CAACjE,OAAO,CAAC,CAAC,GAC3D,IAAI,CAACiE,UAAU,CAACH,gBAAgB,CAAC,CAAA;AACvC,GAAA;AAOAI,EAAAA,SAASA,CAACC,GAAG,EAAEC,MAAM,EAAEtE,OAAO,EAAE;AAC9B,IAAA,MAAMkD,OAAO,GAAG,IAAI,CAACE,UAAU,CAAA;IAC/B,IAAIpD,OAAO,CAAChB,MAAM,EAAE;MAClBuC,eAAe,CAAC8C,GAAG,EAAE5B,OAAO,CAACzC,OAAO,EAAEkD,OAAO,CAAC,CAAC,CAAA;AACjD,KAAA;IAEA,MAAMqB,cAAc,GAAGtE,aAAa,CAAE,CAAA,CAAA,EAAGiD,OAAQ,CAAA,QAAA,EAAUlD,OAAO,CAACM,KAAM,CAAA,CAAC,CAAC,CAAA;AAE3E,IAAA,MAAMkE,YAAY,GAAG;AACnBtF,MAAAA,IAAI,EAAE,MAAM;MACZ,cAAc,EAAEc,OAAO,CAACV,MAAM;AAC9B,MAAA,mBAAmB,EAAE,KAAK;MAC1B,GAAGK,eAAe,EAAE;MACpB,GAAGE,aAAa,CAACG,OAAO,CAAA;KACzB,CAAA;AACDO,IAAAA,YAAY,CAACgE,cAAc,EAAEC,YAAY,CAAC,CAAA;IAG1C,IAAI,CAACC,WAAW,CAAC;AAAE,MAAA,GAAGzE,OAAO;AAAEE,MAAAA,OAAO,EAAEqE,cAAAA;KAAgB,EAAE,IAAI,CAAC,CAAA;IAG/DA,cAAc,CAAChE,YAAY,CAAC,OAAO,EAAEhB,cAAc,CAACS,OAAO,CAAC,CAAC,CAAA;AAG7DI,IAAAA,QAAQ,CAACmE,cAAc,EAAEvE,OAAO,CAAC,CAAA;AAGjCsE,IAAAA,MAAM,CAAC/D,YAAY,CACjB,OAAO,EACN,CAAQP,MAAAA,EAAAA,OAAO,CAACX,IAAK,CAAYW,UAAAA,EAAAA,OAAO,CAACX,IAAK,KACjD,CAAC,CAAA;AACH,GAAA;AAQAoF,EAAAA,WAAWA,CAACzE,OAAO,EAAE8D,OAAO,EAAU;AAAA,IAAA,IAAjBA,OAAO,KAAA,KAAA,CAAA,EAAA;AAAPA,MAAAA,OAAO,GAAG,KAAK,CAAA;AAAA,KAAA;AAClC,IAAA,MAAMZ,OAAO,GAAG,IAAI,CAACE,UAAU,CAAA;AAC/B,IAAA,MAAMsB,iBAAiB,GAAGhB,IAAI,CAACC,KAAK,CAClC1D,aAAa,CAAE,CAAA,iBAAA,EAAmBD,OAAO,CAACM,KAAM,IAAG,CAAC,CAACsD,YAAY,CAC/D,UACF,CACF,CAAC,CAAA;IAED,MAAMe,aAAa,GAAG1E,aAAa,CAAE,CAAA,CAAA,EAAGiD,OAAQ,CAAA,QAAA,EAAUlD,OAAO,CAACM,KAAM,CAAA,CAAC,CAAC,CAAA;IAE1E,IAAI,CAACqE,aAAa,EAAE,OAAA;AAGpB,IAAA,MAAMC,mBAAmB,GAAGd,OAAO,GAC/B9D,OAAO,GACP;AACE,MAAA,GAAGtB,cAAc;AACjB,MAAA,GAAGgG,iBAAiB;AACpB,MAAA,GAAG1E,OAAO;AACV,MAAA,GAAG,IAAI,CAACqD,UAAAA;KACT,CAAA;IAGL,IAAI,CAACS,OAAO,EAAE;AACZ1D,MAAAA,QAAQ,CAACuE,aAAa,EAAEC,mBAAmB,CAAC,CAAA;AAC9C,KAAA;AAGA,IAAA,IAAI,CAACd,OAAO,IAAIc,mBAAmB,CAAC5F,MAAM,EAAE;AAC1C,MAAA,MAAM6F,UAAU,GAAG;QACjB3F,IAAI,EAAE0F,mBAAmB,CAAChG,SAAS;QACnC,GAAGmB,YAAY,CAAC6E,mBAAmB,CAAA;OACpC,CAAA;MACD,MAAME,WAAW,GAAG7E,aAAa,CAC9B,CAAA,CAAA,EAAGiD,OAAQ,CAAA,MAAA,EAAQ0B,mBAAmB,CAACtE,KAAM,CAAA,CAChD,CAAC,CAAA;AACDC,MAAAA,YAAY,CAACuE,WAAW,EAAED,UAAU,CAAC,CAAA;AACvC,KAAA;IAEA,MAAME,YAAY,GAAG9E,aAAa,CAAE,CAAA,CAAA,EAAGiD,OAAQ,CAAA,SAAA,EAAWlD,OAAO,CAACM,KAAM,CAAA,CAAC,CAAC,CAAA;IAE1E,IAAIsE,mBAAmB,CAACI,YAAY,EAAE;AACpC,MAAA,IAAIJ,mBAAmB,CAAC5F,MAAM,EAC5B+F,YAAY,CAAC/D,WAAW,GAAI,CAAE4D,EAAAA,mBAAmB,CAACnC,OAAQ,CAAC,CAAA,CAAA;AAC7DkC,MAAAA,aAAa,CAACpE,YAAY,CACxB,mBAAmB,EACnBU,UAAU,CAAC2D,mBAAmB,CAACnC,OAAO,EAAEmC,mBAAmB,CAACzD,OAAO,CACrE,CAAC,CAAA;AACD,MAAA,OAAA;AACF,KAAA;AAGA,IAAA,IAAIG,KAAK,GAAGoC,IAAI,CAACC,KAAK,CAACgB,aAAa,CAACf,YAAY,CAAC,YAAY,CAAC,CAAC,CAAA;IAGhE,MAAMnB,OAAO,GAAGwC,IAAI,CAAChG,KAAK,CAACe,OAAO,CAACyC,OAAO,CAAC,CAAA;IAG3C,IAAIA,OAAO,KAAK,CAAC,EAAE;MACjB,IAAImC,mBAAmB,CAAC5F,MAAM,EAAE+F,YAAY,CAAC/D,WAAW,GAAG,GAAG,CAAA;AAC9D2D,MAAAA,aAAa,CAACpE,YAAY,CAAC,mBAAmB,EAAE,KAAK,CAAC,CAAA;AACxD,KAAA;IAEA,IAAIkC,OAAO,GAAG,GAAG,IAAIA,OAAO,GAAG,CAAC,IAAInB,KAAK,KAAKmB,OAAO,EAAE,OAAA;AAEvD,IAAA,IAAIyC,OAAO,CAAA;AACX,IAAA,IAAIC,CAAC,GAAGrB,OAAO,GAAG,CAAC,GAAGxC,KAAK,CAAA;AAE3B,IAAA,MAAM8D,GAAG,GAAGR,mBAAmB,CAACS,KAAK,IAAI,IAAI,CAAA;AAC7C,IAAA,MAAMC,QAAQ,GAAG,IAAI,GAAGF,GAAG,CAAA;IAC3B,MAAMG,SAAS,GAAG,GAAG,CAAA;AACrB,IAAA,IAAIC,IAAI,GAAGC,WAAW,CAACC,GAAG,EAAE,CAAA;IAE5B,MAAMC,gBAAgB,GAAID,GAAG,IAAK;AAChCR,MAAAA,OAAO,GAAGU,qBAAqB,CAACD,gBAAgB,CAAC,CAAA;AACjD,MAAA,MAAME,KAAK,GAAGH,GAAG,GAAGF,IAAI,CAAA;AAExB,MAAA,IAAIK,KAAK,IAAIP,QAAQ,GAAGC,SAAS,EAAE;AACjCC,QAAAA,IAAI,GAAGE,GAAG,GAAIG,KAAK,GAAGP,QAAS,CAAA;AAG/BH,QAAAA,CAAC,GAAGA,CAAC,GAAGP,mBAAmB,CAACnC,OAAO,GAAG0C,CAAC,GAAG,CAAC,GAAGA,CAAC,GAAG,CAAC,CAAA;AACrD,OAAA;AAEAR,MAAAA,aAAa,CAACpE,YAAY,CACxB,mBAAmB,EACnBU,UAAU,CAACkE,CAAC,EAAEP,mBAAmB,CAACzD,OAAO,EAAEyD,mBAAmB,CAACxD,GAAG,CACpE,CAAC,CAAA;AACD,MAAA,IAAI2D,YAAY,IAAIH,mBAAmB,CAAC5F,MAAM,EAAE;AAC9C+F,QAAAA,YAAY,CAAC/D,WAAW,GAAI,CAAA,EAAEmE,CAAE,CAAC,CAAA,CAAA;AACnC,OAAA;AAEAR,MAAAA,aAAa,CAACpE,YAAY,CAAC,YAAY,EAAE4E,CAAC,CAAC,CAAA;MAC3CR,aAAa,CAACmB,UAAU,CAACvF,YAAY,CAAC,eAAe,EAAE4E,CAAC,CAAC,CAAA;MAEzD,IAAIA,CAAC,KAAK1C,OAAO,EAAE;QACjBsD,oBAAoB,CAACb,OAAO,CAAC,CAAA;AAC/B,OAAA;KAGD,CAAA;IAEDU,qBAAqB,CAACD,gBAAgB,CAAC,CAAA;AACzC,GAAA;EAOAxB,UAAUA,CAACjE,OAAO,EAAE;AAClB,IAAA,MAAMI,KAAK,GAAGJ,OAAO,CAAC0D,YAAY,CAAC,gBAAgB,CAAC,CAAA;AACpD,IAAA,MAAMoC,IAAI,GAAGtC,IAAI,CAACC,KAAK,CAACzD,OAAO,CAAC0D,YAAY,CAAC,UAAU,CAAC,CAAC,CAAA;AAEzD,IAAA,MAAM5D,OAAO,GAAG;AAAE,MAAA,GAAGtB,cAAc;AAAE,MAAA,GAAGsH,IAAI;MAAE1F,KAAK;AAAE,MAAA,GAAG,IAAI,CAAC+C,UAAAA;KAAY,CAAA;AAEzE,IAAA,MAAMgB,GAAG,GAAG3D,eAAe,CAAC,KAAK,CAAC,CAAA;AAElC,IAAA,MAAMuF,SAAS,GAAG;AAChBC,MAAAA,IAAI,EAAE,aAAa;MACnBC,KAAK,EAAEnG,OAAO,CAACX,IAAI;MACnB+G,MAAM,EAAEpG,OAAO,CAACX,IAAI;AACpBgH,MAAAA,OAAO,EAAE,aAAa;AACtB,MAAA,eAAe,EAAE,GAAG;AACpB,MAAA,eAAe,EAAE,KAAA;KAClB,CAAA;AAED9F,IAAAA,YAAY,CAAC8D,GAAG,EAAE4B,SAAS,CAAC,CAAA;IAG5B,IAAIjG,OAAO,CAACsG,WAAW,EAAE;MACvBjC,GAAG,CAACnC,WAAW,CAAC,IAAI,CAACqE,OAAO,CAACvG,OAAO,CAAC,CAAC,CAAA;AACxC,KAAA;IAGA,IAAIA,OAAO,CAACjB,cAAc,EAAE;AAC1BsF,MAAAA,GAAG,CAACnC,WAAW,CAACR,QAAQ,CAAC1B,OAAO,CAAC,CAAC,CAAA;AACpC,KAAA;IAEAqE,GAAG,CAACnC,WAAW,CAAC,IAAI,CAACqE,OAAO,CAACvG,OAAO,EAAE,KAAK,CAAC,CAAC,CAAA;AAE7CE,IAAAA,OAAO,CAACgC,WAAW,CAACmC,GAAG,CAAC,CAAA;IAExB,IAAI,CAACD,SAAS,CAACC,GAAG,EAAEnE,OAAO,EAAEF,OAAO,CAAC,CAAA;AACvC,GAAA;AASAuG,EAAAA,OAAOA,CAACvG,OAAO,EAAEwG,KAAK,EAAa;AAAA,IAAA,IAAlBA,KAAK,KAAA,KAAA,CAAA,EAAA;AAALA,MAAAA,KAAK,GAAG,QAAQ,CAAA;AAAA,KAAA;AAC/B,IAAA,MAAMC,MAAM,GAAG/F,eAAe,CAAC,QAAQ,CAAC,CAAA;IAExC,IAAI8D,YAAY,GAAG,EAAE,CAAA;IACrB,IAAIxE,OAAO,CAACoB,GAAG,EAAE;MACf,MAAMsF,UAAU,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG1G,OAAO,CAACoB,GAAG,IAAI,IAAI,CAAA;AACnDoD,MAAAA,YAAY,GAAG;QACb,mBAAmB,EAAExE,OAAO,CAACmB,OAAO,GAAG,CAACuF,UAAU,GAAGA,UAAU;AAC/DC,QAAAA,KAAK,EAAEpH,cAAc,CAACS,OAAO,CAAC;QAC9B,GAAGL,eAAe,EAAE;QACpB,GAAGE,aAAa,CAACG,OAAO,CAAA;OACzB,CAAA;AACH,KAAA;AAEA,IAAA,MAAM4G,SAAS,GAAG;MAChB1H,IAAI,EAAEc,OAAO,CAACd,IAAI;MAClBI,MAAM,EAAEU,OAAO,CAACsG,WAAW;AAC3B,MAAA,cAAc,EAAEtG,OAAO,CAAC6G,YAAY,IAAI7G,OAAO,CAACV,MAAM;MACtD,GAAGkF,YAAAA;KACJ,CAAA;IAED,IAAIxE,OAAO,CAACL,eAAe,EAAE;AAC3BmH,MAAAA,MAAM,CAACC,MAAM,CAACH,SAAS,EAAE;AAAE,QAAA,GAAGjH,eAAe,CAACK,OAAO,CAACL,eAAe,CAAA;AAAE,OAAC,CAAC,CAAA;AAC3E,KAAA;AAEA,IAAA,MAAMqH,UAAU,GACdR,KAAK,KAAK,KAAK,GACX;MAAES,KAAK,EAAG,GAAE,IAAI,CAAC7D,UAAW,CAAUpD,QAAAA,EAAAA,OAAO,CAACM,KAAM,CAAA,CAAA;AAAE,KAAC,GACvDsG,SAAS,CAAA;AAEf,IAAA,MAAMM,SAAS,GAAG;AAChBC,MAAAA,EAAE,EAAE,KAAK;AACTC,MAAAA,EAAE,EAAE,KAAK;AACTC,MAAAA,CAAC,EAAE,EAAE;AACL,MAAA,iBAAiB,EAAE,oBAAoB;MACvC,GAAGL,UAAAA;KACJ,CAAA;AAEDzG,IAAAA,YAAY,CAACkG,MAAM,EAAES,SAAS,CAAC,CAAA;AAE/B,IAAA,OAAOT,MAAM,CAAA;AACf,GAAA;AACF;;;;"} \ No newline at end of file diff --git a/dist/circularProgressBar.esm.min.js b/dist/circularProgressBar.esm.min.js index 8065893..5613654 100644 --- a/dist/circularProgressBar.esm.min.js +++ b/dist/circularProgressBar.esm.min.js @@ -1 +1 @@ -const t={colorSlice:"#00a1ff",fontColor:"#000",fontSize:"1.6rem",fontWeight:400,lineargradient:!1,number:!0,round:!1,fill:"none",unit:"%",rotation:-90,size:200,stroke:10},e=t=>{let{rotation:e,animationSmooth:o}=t;return`transform:rotate(${e}deg);transform-origin: 50% 50%;${o?`transition: stroke-dashoffset ${o}`:""}`},o=t=>({"stroke-dasharray":t||"264"}),n=t=>{let{round:e}=t;return{"stroke-linecap":e?"round":""}},i=t=>({"font-size":t.fontSize,"font-weight":t.fontWeight}),r=t=>document.querySelector(t),s=(t,e)=>{let{lineargradient:o,index:n,colorSlice:i}=e;t.setAttribute("stroke",o?`url(#linear-${n})`:i)},a=(t,e)=>{for(const o in e)t?.setAttribute(o,e[o])},c=t=>document.createElementNS("http://www.w3.org/2000/svg",t),l=(t,e)=>{const o=c("tspan");return o.classList.add(t),e&&(o.textContent=e),o},d=(t,e,o)=>{const n=264-t/100*(o?2.64*(100-o):264);return e?-n:n},f=function(t,e,o){return void 0===o&&(o="beforeend"),t.insertAdjacentElement(o,e)};class h{constructor(t,e){void 0===e&&(e={}),this.t=t,this.o=e;const o=document.querySelectorAll(`.${t}`),n=[].slice.call(o);n.map(((t,o)=>{const n=JSON.parse(t.getAttribute("data-pie"));t.setAttribute("data-pie-index",n.index||e.index||o+1)})),this.i=n}initial(t){const e=t||this.i;Array.isArray(e)?e.map((t=>this.l(t))):this.l(e)}h(t,d,h){const u=this.t;h.number&&f(t,((t,e)=>{const o=c("text");o.classList.add(`${e}-text-${t.index}`),f(o,l(`${e}-percent-${t.index}`)),f(o,l(`${e}-unit-${t.index}`,t.unit));const n={x:"50%",y:"50%",fill:t.fontColor,"text-anchor":"middle",dy:t.textPosition||"0.35em",...i(t)};return a(o,n),o})(h,u));const $=r(`.${u}-circle-${h.index}`),m={fill:"none","stroke-width":h.stroke,"stroke-dashoffset":"264",...o(),...n(h)};a($,m),this.animationTo({...h,element:$},!0),$.setAttribute("style",e(h)),s($,h),d.setAttribute("style",`width:${h.size}px;height:${h.size}px;`)}animationTo(e,o){void 0===o&&(o=!1);const n=this.t,c=JSON.parse(r(`[data-pie-index="${e.index}"]`).getAttribute("data-pie")),l=r(`.${n}-circle-${e.index}`);if(!l)return;const f=o?e:{...t,...c,...e,...this.o};if(o||s(l,f),!o&&f.number){const t={fill:f.fontColor,...i(f)},e=r(`.${n}-text-${f.index}`);a(e,t)}const h=r(`.${n}-percent-${e.index}`);if(f.animationOff)return f.number&&(h.textContent=`${f.percent}`),void l.setAttribute("stroke-dashoffset",d(f.percent,f.inverse));let u=JSON.parse(l.getAttribute("data-angel"));const $=Math.round(e.percent);if(0===$&&(f.number&&(h.textContent="0"),l.setAttribute("stroke-dashoffset","264")),$>100||$<=0||u===$)return;let m,p=o?0:u;const g=1e3/(f.speed||1e3);let x=performance.now();const k=t=>{m=requestAnimationFrame(k);const e=t-x;e>=g-.1&&(x=t-e%g,u>=f.percent?p--:p++),l.setAttribute("stroke-dashoffset",d(p,f.inverse,f.cut)),h&&f.number&&(h.textContent=`${p}`),l.setAttribute("data-angel",p),l.parentNode.setAttribute("aria-valuenow",p),p===$&&cancelAnimationFrame(m)};requestAnimationFrame(k)}l(e){const o=e.getAttribute("data-pie-index"),n=JSON.parse(e.getAttribute("data-pie")),i={...t,...n,index:o,...this.o},r=c("svg"),s={role:"progressbar",width:i.size,height:i.size,viewBox:"0 0 100 100","aria-valuemin":"0","aria-valuemax":"100"};a(r,s),i.colorCircle&&r.appendChild(this.u(i)),i.lineargradient&&r.appendChild((t=>{let{index:e,lineargradient:o}=t;const n=c("defs"),i=c("linearGradient");i.id=`linear-${e}`;const r=[].slice.call(o);n.appendChild(i);let s=0;return r.map((t=>{const e=c("stop");a(e,{offset:`${s}%`,"stop-color":`${t}`}),i.appendChild(e),s+=100/(r.length-1)})),n})(i)),r.appendChild(this.u(i,"top")),e.appendChild(r),this.h(r,e,i)}u(t,i){void 0===i&&(i="bottom");const r=c("circle");let s={};if(t.cut){const i=264-2.64*(100-t.cut);s={"stroke-dashoffset":t.inverse?-i:i,style:e(t),...o(),...n(t)}}const l={fill:t.fill,stroke:t.colorCircle,"stroke-width":t.strokeBottom||t.stroke,...s};t.strokeDasharray&&Object.assign(l,{...o(t.strokeDasharray)});const d={cx:"50%",cy:"50%",r:42,"shape-rendering":"geometricPrecision",..."top"===i?{class:`${this.t}-circle-${t.index}`}:l};return a(r,d),r}}export{h as default}; +const t={colorSlice:"#00a1ff",fontColor:"#000",fontSize:"1.6rem",fontWeight:400,lineargradient:!1,number:!0,round:!1,fill:"none",unit:"%",rotation:-90,size:200,stroke:10},e=t=>{let{rotation:e,animationSmooth:o}=t;return`transform:rotate(${e}deg);transform-origin: 50% 50%;${o?`transition: stroke-dashoffset ${o}`:""}`},o=t=>({"stroke-dasharray":t||"264"}),n=t=>{let{round:e}=t;return{"stroke-linecap":e?"round":""}},i=t=>({"font-size":t.fontSize,"font-weight":t.fontWeight}),r=t=>document.querySelector(t),s=(t,e)=>{let{lineargradient:o,index:n,colorSlice:i}=e;t.setAttribute("stroke",o?`url(#linear-${n})`:i)},a=(t,e)=>{for(const o in e)t?.setAttribute(o,e[o])},c=t=>document.createElementNS("http://www.w3.org/2000/svg",t),l=(t,e)=>{const o=c("tspan");return o.classList.add(t),e&&(o.textContent=e),o},d=(t,e,o)=>{const n=264-t/100*(o?2.64*(100-o):264);return e?-n:n},f=function(t,e,o){return void 0===o&&(o="beforeend"),t.insertAdjacentElement(o,e)};class h{constructor(t,e){void 0===e&&(e={}),this.t=t,this.o=e;const o=document.querySelectorAll(`.${t}`),n=[].slice.call(o);n.map(((t,o)=>{const n=JSON.parse(t.getAttribute("data-pie"));t.setAttribute("data-pie-index",n.index||e.index||o+1)})),this.i=n}initial(t){const e=t||this.i;Array.isArray(e)?e.map((t=>this.l(t))):this.l(e)}h(t,d,h){const u=this.t;h.number&&f(t,((t,e)=>{const o=c("text");o.classList.add(`${e}-text-${t.index}`),f(o,l(`${e}-percent-${t.index}`)),f(o,l(`${e}-unit-${t.index}`,t.unit));const n={x:"50%",y:"50%",fill:t.fontColor,"text-anchor":"middle",dy:t.textPosition||"0.35em",...i(t)};return a(o,n),o})(h,u));const $=r(`.${u}-circle-${h.index}`),m={fill:"none","stroke-width":h.stroke,"stroke-dashoffset":"264",...o(),...n(h)};a($,m),this.animationTo({...h,element:$},!0),$.setAttribute("style",e(h)),s($,h),d.setAttribute("style",`width:${h.size}px;height:${h.size}px;`)}animationTo(e,o){void 0===o&&(o=!1);const n=this.t,c=JSON.parse(r(`[data-pie-index="${e.index}"]`).getAttribute("data-pie")),l=r(`.${n}-circle-${e.index}`);if(!l)return;const f=o?e:{...t,...c,...e,...this.o};if(o||s(l,f),!o&&f.number){const t={fill:f.fontColor,...i(f)},e=r(`.${n}-text-${f.index}`);a(e,t)}const h=r(`.${n}-percent-${e.index}`);if(f.animationOff)return f.number&&(h.textContent=`${f.percent}`),void l.setAttribute("stroke-dashoffset",d(f.percent,f.inverse));let u=JSON.parse(l.getAttribute("data-angel"));const $=Math.round(e.percent);if(0===$&&(f.number&&(h.textContent="0"),l.setAttribute("stroke-dashoffset","264")),$>100||$<0||u===$)return;let m,p=o?0:u;const g=1e3/(f.speed||1e3);let x=performance.now();const k=t=>{m=requestAnimationFrame(k);const e=t-x;e>=g-.1&&(x=t-e%g,p=p{let{index:e,lineargradient:o}=t;const n=c("defs"),i=c("linearGradient");i.id=`linear-${e}`;const r=[].slice.call(o);n.appendChild(i);let s=0;return r.map((t=>{const e=c("stop");a(e,{offset:`${s}%`,"stop-color":`${t}`}),i.appendChild(e),s+=100/(r.length-1)})),n})(i)),r.appendChild(this.u(i,"top")),e.appendChild(r),this.h(r,e,i)}u(t,i){void 0===i&&(i="bottom");const r=c("circle");let s={};if(t.cut){const i=264-2.64*(100-t.cut);s={"stroke-dashoffset":t.inverse?-i:i,style:e(t),...o(),...n(t)}}const l={fill:t.fill,stroke:t.colorCircle,"stroke-width":t.strokeBottom||t.stroke,...s};t.strokeDasharray&&Object.assign(l,{...o(t.strokeDasharray)});const d={cx:"50%",cy:"50%",r:42,"shape-rendering":"geometricPrecision",..."top"===i?{class:`${this.t}-circle-${t.index}`}:l};return a(r,d),r}}export{h as default}; diff --git a/dist/circularProgressBar.ie.min.js b/dist/circularProgressBar.ie.min.js index bb60e7e..cb24a8d 100644 --- a/dist/circularProgressBar.ie.min.js +++ b/dist/circularProgressBar.ie.min.js @@ -1 +1 @@ -var CircularProgressBar=function(){"use strict";const t={colorSlice:"#00a1ff",fontColor:"#000",fontSize:"1.6rem",fontWeight:400,lineargradient:!1,number:!0,round:!1,fill:"none",unit:"%",rotation:-90,size:200,stroke:10},e=t=>{let{rotation:e,animationSmooth:n}=t;return"transform:rotate("+e+"deg);transform-origin: 50% 50%;"+(n?"transition: stroke-dashoffset "+n:"")},n=t=>({"stroke-dasharray":t||"264"}),o=t=>{let{round:e}=t;return{"stroke-linecap":e?"round":""}},r=t=>({"font-size":t.fontSize,"font-weight":t.fontWeight}),i=t=>document.querySelector(t),s=(t,e)=>{let{lineargradient:n,index:o,colorSlice:r}=e;t.setAttribute("stroke",n?"url(#linear-"+o+")":r)},a=(t,e)=>{for(const n in e)null==t||t.setAttribute(n,e[n])},c=t=>document.createElementNS("http://www.w3.org/2000/svg",t),l=(t,e)=>{const n=c("tspan");return n.classList.add(t),e&&(n.textContent=e),n},d=(t,e,n)=>{const o=264-t/100*(n?2.64*(100-n):264);return e?-o:o},f=function(t,e,n){return void 0===n&&(n="beforeend"),t.insertAdjacentElement(n,e)};return class{constructor(t,e){void 0===e&&(e={}),this.t=t,this.o=e;const n=document.querySelectorAll("."+t),o=[].slice.call(n);o.map(((t,n)=>{const o=JSON.parse(t.getAttribute("data-pie"));t.setAttribute("data-pie-index",o.index||e.index||n+1)})),this.i=o}initial(t){const e=t||this.i;Array.isArray(e)?e.map((t=>this.l(t))):this.l(e)}h(t,d,h){const u=this.t;h.number&&f(t,((t,e)=>{const n=c("text");n.classList.add(e+"-text-"+t.index),f(n,l(e+"-percent-"+t.index)),f(n,l(e+"-unit-"+t.index,t.unit));const o={x:"50%",y:"50%",fill:t.fontColor,"text-anchor":"middle",dy:t.textPosition||"0.35em",...r(t)};return a(n,o),n})(h,u));const m=i("."+u+"-circle-"+h.index),p={fill:"none","stroke-width":h.stroke,"stroke-dashoffset":"264",...n(),...o(h)};a(m,p),this.animationTo({...h,element:m},!0),m.setAttribute("style",e(h)),s(m,h),d.setAttribute("style","width:"+h.size+"px;height:"+h.size+"px;")}animationTo(e,n){void 0===n&&(n=!1);const o=this.t,c=JSON.parse(i('[data-pie-index="'+e.index+'"]').getAttribute("data-pie")),l=i("."+o+"-circle-"+e.index);if(!l)return;const f=n?e:{...t,...c,...e,...this.o};if(n||s(l,f),!n&&f.number){const t={fill:f.fontColor,...r(f)},e=i("."+o+"-text-"+f.index);a(e,t)}const h=i("."+o+"-percent-"+e.index);if(f.animationOff)return f.number&&(h.textContent=""+f.percent),void l.setAttribute("stroke-dashoffset",d(f.percent,f.inverse));let u=JSON.parse(l.getAttribute("data-angel"));const m=Math.round(e.percent);if(0===m&&(f.number&&(h.textContent="0"),l.setAttribute("stroke-dashoffset","264")),m>100||m<=0||u===m)return;let p,g=n?0:u;const x=1e3/(f.speed||1e3);let k=performance.now();const v=t=>{p=requestAnimationFrame(v);const e=t-k;e>=x-.1&&(k=t-e%x,u>=f.percent?g--:g++),l.setAttribute("stroke-dashoffset",d(g,f.inverse,f.cut)),h&&f.number&&(h.textContent=""+g),l.setAttribute("data-angel",g),l.parentNode.setAttribute("aria-valuenow",g),g===m&&cancelAnimationFrame(p)};requestAnimationFrame(v)}l(e){const n=e.getAttribute("data-pie-index"),o=JSON.parse(e.getAttribute("data-pie")),r={...t,...o,index:n,...this.o},i=c("svg"),s={role:"progressbar",width:r.size,height:r.size,viewBox:"0 0 100 100","aria-valuemin":"0","aria-valuemax":"100"};a(i,s),r.colorCircle&&i.appendChild(this.u(r)),r.lineargradient&&i.appendChild((t=>{let{index:e,lineargradient:n}=t;const o=c("defs"),r=c("linearGradient");r.id="linear-"+e;const i=[].slice.call(n);o.appendChild(r);let s=0;return i.map((t=>{const e=c("stop");a(e,{offset:s+"%","stop-color":""+t}),r.appendChild(e),s+=100/(i.length-1)})),o})(r)),i.appendChild(this.u(r,"top")),e.appendChild(i),this.h(i,e,r)}u(t,r){void 0===r&&(r="bottom");const i=c("circle");let s={};if(t.cut){const r=264-2.64*(100-t.cut);s={"stroke-dashoffset":t.inverse?-r:r,style:e(t),...n(),...o(t)}}const l={fill:t.fill,stroke:t.colorCircle,"stroke-width":t.strokeBottom||t.stroke,...s};t.strokeDasharray&&Object.assign(l,{...n(t.strokeDasharray)});const d={cx:"50%",cy:"50%",r:42,"shape-rendering":"geometricPrecision",..."top"===r?{class:this.t+"-circle-"+t.index}:l};return a(i,d),i}}}(); +var CircularProgressBar=function(){"use strict";const t={colorSlice:"#00a1ff",fontColor:"#000",fontSize:"1.6rem",fontWeight:400,lineargradient:!1,number:!0,round:!1,fill:"none",unit:"%",rotation:-90,size:200,stroke:10},e=t=>{let{rotation:e,animationSmooth:n}=t;return"transform:rotate("+e+"deg);transform-origin: 50% 50%;"+(n?"transition: stroke-dashoffset "+n:"")},n=t=>({"stroke-dasharray":t||"264"}),o=t=>{let{round:e}=t;return{"stroke-linecap":e?"round":""}},r=t=>({"font-size":t.fontSize,"font-weight":t.fontWeight}),i=t=>document.querySelector(t),s=(t,e)=>{let{lineargradient:n,index:o,colorSlice:r}=e;t.setAttribute("stroke",n?"url(#linear-"+o+")":r)},a=(t,e)=>{for(const n in e)null==t||t.setAttribute(n,e[n])},c=t=>document.createElementNS("http://www.w3.org/2000/svg",t),l=(t,e)=>{const n=c("tspan");return n.classList.add(t),e&&(n.textContent=e),n},d=(t,e,n)=>{const o=264-t/100*(n?2.64*(100-n):264);return e?-o:o},f=function(t,e,n){return void 0===n&&(n="beforeend"),t.insertAdjacentElement(n,e)};return class{constructor(t,e){void 0===e&&(e={}),this.t=t,this.o=e;const n=document.querySelectorAll("."+t),o=[].slice.call(n);o.map(((t,n)=>{const o=JSON.parse(t.getAttribute("data-pie"));t.setAttribute("data-pie-index",o.index||e.index||n+1)})),this.i=o}initial(t){const e=t||this.i;Array.isArray(e)?e.map((t=>this.l(t))):this.l(e)}h(t,d,h){const u=this.t;h.number&&f(t,((t,e)=>{const n=c("text");n.classList.add(e+"-text-"+t.index),f(n,l(e+"-percent-"+t.index)),f(n,l(e+"-unit-"+t.index,t.unit));const o={x:"50%",y:"50%",fill:t.fontColor,"text-anchor":"middle",dy:t.textPosition||"0.35em",...r(t)};return a(n,o),n})(h,u));const m=i("."+u+"-circle-"+h.index),p={fill:"none","stroke-width":h.stroke,"stroke-dashoffset":"264",...n(),...o(h)};a(m,p),this.animationTo({...h,element:m},!0),m.setAttribute("style",e(h)),s(m,h),d.setAttribute("style","width:"+h.size+"px;height:"+h.size+"px;")}animationTo(e,n){void 0===n&&(n=!1);const o=this.t,c=JSON.parse(i('[data-pie-index="'+e.index+'"]').getAttribute("data-pie")),l=i("."+o+"-circle-"+e.index);if(!l)return;const f=n?e:{...t,...c,...e,...this.o};if(n||s(l,f),!n&&f.number){const t={fill:f.fontColor,...r(f)},e=i("."+o+"-text-"+f.index);a(e,t)}const h=i("."+o+"-percent-"+e.index);if(f.animationOff)return f.number&&(h.textContent=""+f.percent),void l.setAttribute("stroke-dashoffset",d(f.percent,f.inverse));let u=JSON.parse(l.getAttribute("data-angel"));const m=Math.round(e.percent);if(0===m&&(f.number&&(h.textContent="0"),l.setAttribute("stroke-dashoffset","264")),m>100||m<0||u===m)return;let p,g=n?0:u;const x=1e3/(f.speed||1e3);let k=performance.now();const v=t=>{p=requestAnimationFrame(v);const e=t-k;e>=x-.1&&(k=t-e%x,g=g{let{index:e,lineargradient:n}=t;const o=c("defs"),r=c("linearGradient");r.id="linear-"+e;const i=[].slice.call(n);o.appendChild(r);let s=0;return i.map((t=>{const e=c("stop");a(e,{offset:s+"%","stop-color":""+t}),r.appendChild(e),s+=100/(i.length-1)})),o})(r)),i.appendChild(this.u(r,"top")),e.appendChild(i),this.h(i,e,r)}u(t,r){void 0===r&&(r="bottom");const i=c("circle");let s={};if(t.cut){const r=264-2.64*(100-t.cut);s={"stroke-dashoffset":t.inverse?-r:r,style:e(t),...n(),...o(t)}}const l={fill:t.fill,stroke:t.colorCircle,"stroke-width":t.strokeBottom||t.stroke,...s};t.strokeDasharray&&Object.assign(l,{...n(t.strokeDasharray)});const d={cx:"50%",cy:"50%",r:42,"shape-rendering":"geometricPrecision",..."top"===r?{class:this.t+"-circle-"+t.index}:l};return a(i,d),i}}}(); diff --git a/dist/circularProgressBar.js b/dist/circularProgressBar.js index faa51a7..1d5a077 100644 --- a/dist/circularProgressBar.js +++ b/dist/circularProgressBar.js @@ -193,7 +193,7 @@ var CircularProgressBar = (function () { if (commonConfiguration.number) centerNumber.textContent = "0"; circleElement.setAttribute("stroke-dashoffset", "264"); } - if (percent > 100 || percent <= 0 || angle === percent) return; + if (percent > 100 || percent < 0 || angle === percent) return; let request; let i = initial ? 0 : angle; const fps = commonConfiguration.speed || 1000; @@ -205,7 +205,7 @@ var CircularProgressBar = (function () { const delta = now - then; if (delta >= interval - tolerance) { then = now - delta % interval; - angle >= commonConfiguration.percent ? i-- : i++; + i = i < commonConfiguration.percent ? i + 1 : i - 1; } circleElement.setAttribute("stroke-dashoffset", dashOffset(i, commonConfiguration.inverse, commonConfiguration.cut)); if (centerNumber && commonConfiguration.number) { diff --git a/dist/circularProgressBar.js.map b/dist/circularProgressBar.js.map index 4a74203..e8eba6c 100644 --- a/dist/circularProgressBar.js.map +++ b/dist/circularProgressBar.js.map @@ -1 +1 @@ -{"version":3,"file":"circularProgressBar.js","sources":["../sources/helpers/defaults.js","../sources/helpers/function.js","../sources/index.js"],"sourcesContent":["/**\r\n * @typedef {Object} - Default object\r\n * @prop {String} [colorSlice] - Progress color circle\r\n * @prop {String} [fontColor] - Font color\r\n * @prop {String} [fontSize] - Font size\r\n * @prop {Number} [fontWeight] - Font weight\r\n * @prop {Array} [linearGradient] - Linear gradien for circle\r\n * @prop {Boolean} [number] - Show/hide number\r\n * @prop {Boolean} [round] - Path rounding\r\n * @prop {String} [fill] - Inner circle color\r\n * @prop {String} [unit] - Different unit instead of percentage (%) inside the circle\r\n * @prop {Number} [rotation] - Chart rotation\r\n * @prop {Number} [size] - Size progress bar width and height in px\r\n * @prop {Number} [stroke] - Stroke width, chart thickness\r\n */\r\n/**\r\n * Returns the default options of the component\r\n * @return {CPBOptions}\r\n */\r\nconst defaultOptions = {\r\n colorSlice: \"#00a1ff\",\r\n fontColor: \"#000\",\r\n fontSize: \"1.6rem\",\r\n fontWeight: 400,\r\n lineargradient: false,\r\n number: true,\r\n round: false,\r\n fill: \"none\",\r\n unit: \"%\",\r\n rotation: -90,\r\n size: 200,\r\n stroke: 10,\r\n};\r\n\r\nexport default defaultOptions;\r\n","/**\r\n *\r\n * @param {Object} object\r\n * @returns {String}\r\n */\r\nconst styleTransform = ({ rotation, animationSmooth }) => {\r\n const smoothAnimation = animationSmooth\r\n ? `transition: stroke-dashoffset ${animationSmooth}`\r\n : \"\";\r\n\r\n return `transform:rotate(${rotation}deg);transform-origin: 50% 50%;${smoothAnimation}`;\r\n};\r\n\r\n/**\r\n * Set \"stroke-dasharray\": \"1, 2\"\r\n * @param {String} type\r\n * @returns {Object}\r\n */\r\nconst strokeDasharray = (type) => {\r\n return {\r\n \"stroke-dasharray\": type || \"264\",\r\n };\r\n};\r\n\r\n/**\r\n * Set type stroke-linecap\r\n * @param {String} round\r\n * @returns {Object}\r\n */\r\nconst strokeLinecap = ({ round }) => {\r\n return {\r\n \"stroke-linecap\": round ? \"round\" : \"\",\r\n };\r\n};\r\n\r\n/**\r\n * Set font sieze/weight\r\n *\r\n * @param {Object} options\r\n * @returns {Object}\r\n */\r\nconst fontSettings = (options) => {\r\n return {\r\n \"font-size\": options.fontSize,\r\n \"font-weight\": options.fontWeight,\r\n };\r\n};\r\n\r\n/**\r\n *\r\n * @param {String} element\r\n * @returns {HTMLElement}\r\n */\r\nconst querySelector = (element) => document.querySelector(element);\r\n\r\n/**\r\n * Set color or linear-gradient\r\n *\r\n * @param {String} element\r\n * @param {Object} object\r\n */\r\nconst setColor = (element, { lineargradient, index, colorSlice }) => {\r\n element.setAttribute(\r\n \"stroke\",\r\n lineargradient ? `url(#linear-${index})` : colorSlice,\r\n );\r\n};\r\n\r\n/**\r\n * Set attribute to specific element\r\n *\r\n * @param {String} element\r\n * @param {Object} object\r\n */\r\nconst setAttribute = (element, object) => {\r\n for (const key in object) {\r\n element?.setAttribute(key, object[key]);\r\n }\r\n};\r\n\r\n/**\r\n * Create svg element\r\n *\r\n * @param {String} type\r\n * @returns {SVGElement}\r\n */\r\nconst createNSElement = (type) =>\r\n document.createElementNS(\"http://www.w3.org/2000/svg\", type);\r\n\r\n/**\r\n * Create svg tspan\r\n *\r\n * @param {String} className\r\n * @param {String} unit\r\n * @returns {HTMLElement}\r\n */\r\nconst tspan = (className, unit) => {\r\n const element = createNSElement(\"tspan\");\r\n\r\n element.classList.add(className);\r\n if (unit) element.textContent = unit;\r\n return element;\r\n};\r\n\r\n/**\r\n * Function generate stroke-dashoffset\r\n *\r\n * @param {Number} count\r\n * @param {Boolean} inverse - Counterclockwise animation\r\n * @param {Number} cut - Angle of the circle sector\r\n * @returns {Number}\r\n */\r\nconst dashOffset = (count, inverse, cut) => {\r\n const cutChar = cut ? (264 / 100) * (100 - cut) : 264;\r\n const angle = 264 - (count / 100) * cutChar;\r\n\r\n // https://github.com/tomickigrzegorz/circular-progress-bar/issues/87\r\n // inverse option is not working in ios safari\r\n // return inverse ? `${264 - angle}` : angle;\r\n return inverse ? -angle : angle;\r\n};\r\n\r\n/**\r\n * @param {HTMLElement} element\r\n * @param {HTMLElement} el\r\n * @param {String} type\r\n */\r\nconst insertAdElement = (element, el, type = \"beforeend\") =>\r\n element.insertAdjacentElement(type, el);\r\n\r\n/**\r\n * Generator function linear-gradient stop svg elements\r\n *\r\n * @param {Object} object\r\n */\r\nconst gradient = ({ index, lineargradient }) => {\r\n const defsElement = createNSElement(\"defs\");\r\n const linearGradient = createNSElement(\"linearGradient\");\r\n linearGradient.id = `linear-${index}`;\r\n\r\n const countGradient = [].slice.call(lineargradient);\r\n\r\n defsElement.appendChild(linearGradient);\r\n\r\n let number = 0;\r\n countGradient.map((item) => {\r\n const stopElements = createNSElement(\"stop\");\r\n\r\n const stopObj = {\r\n offset: `${number}%`,\r\n \"stop-color\": `${item}`,\r\n };\r\n setAttribute(stopElements, stopObj);\r\n\r\n linearGradient.appendChild(stopElements);\r\n number += 100 / (countGradient.length - 1);\r\n });\r\n\r\n return defsElement;\r\n};\r\n\r\n/**\r\n * A function that generates tspan\r\n * elements with a number and unit\r\n *\r\n * @param {Object} options - Global configuration\r\n * @param {String} className\r\n */\r\nconst percent = (options, className) => {\r\n const creatTextElementSVG = createNSElement(\"text\");\r\n\r\n creatTextElementSVG.classList.add(`${className}-text-${options.index}`);\r\n\r\n // create tspan element with number\r\n // and insert to svg text element\r\n insertAdElement(\r\n creatTextElementSVG,\r\n tspan(`${className}-percent-${options.index}`),\r\n );\r\n\r\n // create and insert unit to text element\r\n insertAdElement(\r\n creatTextElementSVG,\r\n tspan(`${className}-unit-${options.index}`, options.unit),\r\n );\r\n\r\n // config to svg text\r\n const obj = {\r\n x: \"50%\",\r\n y: \"50%\",\r\n fill: options.fontColor,\r\n \"text-anchor\": \"middle\",\r\n dy: options.textPosition || \"0.35em\",\r\n ...fontSettings(options),\r\n };\r\n\r\n setAttribute(creatTextElementSVG, obj);\r\n return creatTextElementSVG;\r\n};\r\n\r\nexport {\r\n createNSElement,\r\n dashOffset,\r\n fontSettings,\r\n gradient,\r\n insertAdElement,\r\n percent,\r\n querySelector,\r\n setAttribute,\r\n setColor,\r\n strokeDasharray,\r\n strokeLinecap,\r\n styleTransform,\r\n};\r\n","import defaultOptions from \"./helpers/defaults\";\r\nimport {\r\n createNSElement,\r\n dashOffset,\r\n fontSettings,\r\n gradient,\r\n insertAdElement,\r\n percent,\r\n querySelector,\r\n setAttribute,\r\n setColor,\r\n strokeDasharray,\r\n strokeLinecap,\r\n styleTransform,\r\n} from \"./helpers/function\";\r\n\r\n/**\r\n * @class\r\n */\r\nexport default class CircularProgressBar {\r\n /**\r\n * CircularProgressBar constructor\r\n *\r\n * @param {String} pieName - class name\r\n * @param {Object} globalObj - global configuration\r\n */\r\n constructor(pieName, globalObj = {}) {\r\n this._className = pieName;\r\n this._globalObj = globalObj;\r\n\r\n const pieElements = document.querySelectorAll(`.${pieName}`);\r\n const elements = [].slice.call(pieElements);\r\n // add index to all progressbar\r\n elements.map((item, idx) => {\r\n const id = JSON.parse(item.getAttribute(\"data-pie\"));\r\n item.setAttribute(\r\n \"data-pie-index\",\r\n id.index || globalObj.index || idx + 1,\r\n );\r\n });\r\n\r\n this._elements = elements;\r\n }\r\n\r\n /**\r\n * @param {object} outside\r\n */\r\n initial(outside) {\r\n const triggeredOutside = outside || this._elements;\r\n Array.isArray(triggeredOutside)\r\n ? triggeredOutside.map((element) => this._createSVG(element))\r\n : this._createSVG(triggeredOutside);\r\n }\r\n\r\n /**\r\n * @param {SVGAElement} svg\r\n * @param {HTMLElement} target\r\n * @param {Object} options\r\n */\r\n _progress(svg, target, options) {\r\n const pieName = this._className;\r\n if (options.number) {\r\n insertAdElement(svg, percent(options, pieName));\r\n }\r\n\r\n const progressCircle = querySelector(`.${pieName}-circle-${options.index}`);\r\n\r\n const configCircle = {\r\n fill: \"none\",\r\n \"stroke-width\": options.stroke,\r\n \"stroke-dashoffset\": \"264\",\r\n ...strokeDasharray(),\r\n ...strokeLinecap(options),\r\n };\r\n setAttribute(progressCircle, configCircle);\r\n\r\n // animation progress\r\n this.animationTo({ ...options, element: progressCircle }, true);\r\n\r\n // set style and rotation\r\n progressCircle.setAttribute(\"style\", styleTransform(options));\r\n\r\n // set color\r\n setColor(progressCircle, options);\r\n\r\n // set width and height on div\r\n target.setAttribute(\r\n \"style\",\r\n `width:${options.size}px;height:${options.size}px;`,\r\n );\r\n }\r\n\r\n /**\r\n * Callback function\r\n *\r\n * @param {Object} options\r\n * @param {Boolean} initial\r\n */\r\n animationTo(options, initial = false) {\r\n const pieName = this._className;\r\n const previousConfigObj = JSON.parse(\r\n querySelector(`[data-pie-index=\"${options.index}\"]`).getAttribute(\r\n \"data-pie\",\r\n ),\r\n );\r\n\r\n const circleElement = querySelector(`.${pieName}-circle-${options.index}`);\r\n\r\n if (!circleElement) return;\r\n\r\n // merging all configuration objects\r\n const commonConfiguration = initial\r\n ? options\r\n : {\r\n ...defaultOptions,\r\n ...previousConfigObj,\r\n ...options,\r\n ...this._globalObj,\r\n };\r\n\r\n // update color circle\r\n if (!initial) {\r\n setColor(circleElement, commonConfiguration);\r\n }\r\n\r\n // font color update\r\n if (!initial && commonConfiguration.number) {\r\n const fontconfig = {\r\n fill: commonConfiguration.fontColor,\r\n ...fontSettings(commonConfiguration),\r\n };\r\n const textElement = querySelector(\r\n `.${pieName}-text-${commonConfiguration.index}`,\r\n );\r\n setAttribute(textElement, fontconfig);\r\n }\r\n\r\n const centerNumber = querySelector(`.${pieName}-percent-${options.index}`);\r\n\r\n if (commonConfiguration.animationOff) {\r\n if (commonConfiguration.number)\r\n centerNumber.textContent = `${commonConfiguration.percent}`;\r\n circleElement.setAttribute(\r\n \"stroke-dashoffset\",\r\n dashOffset(commonConfiguration.percent, commonConfiguration.inverse),\r\n );\r\n return;\r\n }\r\n\r\n // get numer percent from data-angel\r\n let angle = JSON.parse(circleElement.getAttribute(\"data-angel\"));\r\n\r\n // round if number is decimal\r\n const percent = Math.round(options.percent);\r\n\r\n // if percent 0 then set at start 0%\r\n if (percent === 0) {\r\n if (commonConfiguration.number) centerNumber.textContent = \"0\";\r\n circleElement.setAttribute(\"stroke-dashoffset\", \"264\");\r\n }\r\n\r\n if (percent > 100 || percent <= 0 || angle === percent) return;\r\n\r\n let request;\r\n let i = initial ? 0 : angle;\r\n\r\n const fps = commonConfiguration.speed || 1000;\r\n const interval = 1000 / fps;\r\n const tolerance = 0.1;\r\n let then = performance.now();\r\n\r\n const performAnimation = (now) => {\r\n request = requestAnimationFrame(performAnimation);\r\n const delta = now - then;\r\n\r\n if (delta >= interval - tolerance) {\r\n then = now - (delta % interval);\r\n\r\n angle >= commonConfiguration.percent ? i-- : i++;\r\n }\r\n\r\n circleElement.setAttribute(\r\n \"stroke-dashoffset\",\r\n dashOffset(i, commonConfiguration.inverse, commonConfiguration.cut),\r\n );\r\n if (centerNumber && commonConfiguration.number) {\r\n centerNumber.textContent = `${i}`;\r\n }\r\n\r\n circleElement.setAttribute(\"data-angel\", i);\r\n circleElement.parentNode.setAttribute(\"aria-valuenow\", i);\r\n\r\n // console.log(i, percent);\r\n if (i === percent) {\r\n cancelAnimationFrame(request);\r\n }\r\n\r\n // return;\r\n };\r\n\r\n requestAnimationFrame(performAnimation);\r\n }\r\n\r\n /**\r\n * Create svg elements\r\n *\r\n * @param {HTMLElement} element\r\n */\r\n _createSVG(element) {\r\n const index = element.getAttribute(\"data-pie-index\");\r\n const json = JSON.parse(element.getAttribute(\"data-pie\"));\r\n\r\n const options = { ...defaultOptions, ...json, index, ...this._globalObj };\r\n\r\n const svg = createNSElement(\"svg\");\r\n\r\n const configSVG = {\r\n role: \"progressbar\",\r\n width: options.size,\r\n height: options.size,\r\n viewBox: \"0 0 100 100\",\r\n \"aria-valuemin\": \"0\",\r\n \"aria-valuemax\": \"100\",\r\n };\r\n\r\n setAttribute(svg, configSVG);\r\n\r\n // colorCircle\r\n if (options.colorCircle) {\r\n svg.appendChild(this._circle(options));\r\n }\r\n\r\n // gradient\r\n if (options.lineargradient) {\r\n svg.appendChild(gradient(options));\r\n }\r\n\r\n svg.appendChild(this._circle(options, \"top\"));\r\n\r\n element.appendChild(svg);\r\n\r\n this._progress(svg, element, options);\r\n }\r\n\r\n /**\r\n * Create circle top/bottom\r\n *\r\n * @param {Object} options\r\n * @param {String} where\r\n * @returns {SVGElement}\r\n */\r\n _circle(options, where = \"bottom\") {\r\n const circle = createNSElement(\"circle\");\r\n\r\n let configCircle = {};\r\n if (options.cut) {\r\n const dashoffset = 264 - (100 - options.cut) * 2.64;\r\n configCircle = {\r\n \"stroke-dashoffset\": options.inverse ? -dashoffset : dashoffset,\r\n style: styleTransform(options),\r\n ...strokeDasharray(),\r\n ...strokeLinecap(options),\r\n };\r\n }\r\n\r\n const objCircle = {\r\n fill: options.fill,\r\n stroke: options.colorCircle,\r\n \"stroke-width\": options.strokeBottom || options.stroke,\r\n ...configCircle,\r\n };\r\n\r\n if (options.strokeDasharray) {\r\n Object.assign(objCircle, { ...strokeDasharray(options.strokeDasharray) });\r\n }\r\n\r\n const typeCircle =\r\n where === \"top\"\r\n ? { class: `${this._className}-circle-${options.index}` }\r\n : objCircle;\r\n\r\n const objConfig = {\r\n cx: \"50%\",\r\n cy: \"50%\",\r\n r: 42,\r\n \"shape-rendering\": \"geometricPrecision\",\r\n ...typeCircle,\r\n };\r\n\r\n setAttribute(circle, objConfig);\r\n\r\n return circle;\r\n }\r\n}\r\n"],"names":["defaultOptions","colorSlice","fontColor","fontSize","fontWeight","lineargradient","number","round","fill","unit","rotation","size","stroke","styleTransform","_ref","animationSmooth","smoothAnimation","strokeDasharray","type","strokeLinecap","_ref2","fontSettings","options","querySelector","element","document","setColor","_ref3","index","setAttribute","object","key","createNSElement","createElementNS","tspan","className","classList","add","textContent","dashOffset","count","inverse","cut","cutChar","angle","insertAdElement","el","insertAdjacentElement","gradient","_ref4","defsElement","linearGradient","id","countGradient","slice","call","appendChild","map","item","stopElements","stopObj","offset","length","percent","creatTextElementSVG","obj","x","y","dy","textPosition","CircularProgressBar","constructor","pieName","globalObj","_className","_globalObj","pieElements","querySelectorAll","elements","idx","JSON","parse","getAttribute","_elements","initial","outside","triggeredOutside","Array","isArray","_createSVG","_progress","svg","target","progressCircle","configCircle","animationTo","previousConfigObj","circleElement","commonConfiguration","fontconfig","textElement","centerNumber","animationOff","Math","request","i","fps","speed","interval","tolerance","then","performance","now","performAnimation","requestAnimationFrame","delta","parentNode","cancelAnimationFrame","json","configSVG","role","width","height","viewBox","colorCircle","_circle","where","circle","dashoffset","style","objCircle","strokeBottom","Object","assign","typeCircle","class","objConfig","cx","cy","r"],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"circularProgressBar.js","sources":["../sources/helpers/defaults.js","../sources/helpers/function.js","../sources/index.js"],"sourcesContent":["/**\r\n * @typedef {Object} - Default object\r\n * @prop {String} [colorSlice] - Progress color circle\r\n * @prop {String} [fontColor] - Font color\r\n * @prop {String} [fontSize] - Font size\r\n * @prop {Number} [fontWeight] - Font weight\r\n * @prop {Array} [linearGradient] - Linear gradien for circle\r\n * @prop {Boolean} [number] - Show/hide number\r\n * @prop {Boolean} [round] - Path rounding\r\n * @prop {String} [fill] - Inner circle color\r\n * @prop {String} [unit] - Different unit instead of percentage (%) inside the circle\r\n * @prop {Number} [rotation] - Chart rotation\r\n * @prop {Number} [size] - Size progress bar width and height in px\r\n * @prop {Number} [stroke] - Stroke width, chart thickness\r\n */\r\n/**\r\n * Returns the default options of the component\r\n * @return {CPBOptions}\r\n */\r\nconst defaultOptions = {\r\n colorSlice: \"#00a1ff\",\r\n fontColor: \"#000\",\r\n fontSize: \"1.6rem\",\r\n fontWeight: 400,\r\n lineargradient: false,\r\n number: true,\r\n round: false,\r\n fill: \"none\",\r\n unit: \"%\",\r\n rotation: -90,\r\n size: 200,\r\n stroke: 10,\r\n};\r\n\r\nexport default defaultOptions;\r\n","/**\r\n *\r\n * @param {Object} object\r\n * @returns {String}\r\n */\r\nconst styleTransform = ({ rotation, animationSmooth }) => {\r\n const smoothAnimation = animationSmooth\r\n ? `transition: stroke-dashoffset ${animationSmooth}`\r\n : \"\";\r\n\r\n return `transform:rotate(${rotation}deg);transform-origin: 50% 50%;${smoothAnimation}`;\r\n};\r\n\r\n/**\r\n * Set \"stroke-dasharray\": \"1, 2\"\r\n * @param {String} type\r\n * @returns {Object}\r\n */\r\nconst strokeDasharray = (type) => {\r\n return {\r\n \"stroke-dasharray\": type || \"264\",\r\n };\r\n};\r\n\r\n/**\r\n * Set type stroke-linecap\r\n * @param {String} round\r\n * @returns {Object}\r\n */\r\nconst strokeLinecap = ({ round }) => {\r\n return {\r\n \"stroke-linecap\": round ? \"round\" : \"\",\r\n };\r\n};\r\n\r\n/**\r\n * Set font sieze/weight\r\n *\r\n * @param {Object} options\r\n * @returns {Object}\r\n */\r\nconst fontSettings = (options) => {\r\n return {\r\n \"font-size\": options.fontSize,\r\n \"font-weight\": options.fontWeight,\r\n };\r\n};\r\n\r\n/**\r\n *\r\n * @param {String} element\r\n * @returns {HTMLElement}\r\n */\r\nconst querySelector = (element) => document.querySelector(element);\r\n\r\n/**\r\n * Set color or linear-gradient\r\n *\r\n * @param {String} element\r\n * @param {Object} object\r\n */\r\nconst setColor = (element, { lineargradient, index, colorSlice }) => {\r\n element.setAttribute(\r\n \"stroke\",\r\n lineargradient ? `url(#linear-${index})` : colorSlice,\r\n );\r\n};\r\n\r\n/**\r\n * Set attribute to specific element\r\n *\r\n * @param {String} element\r\n * @param {Object} object\r\n */\r\nconst setAttribute = (element, object) => {\r\n for (const key in object) {\r\n element?.setAttribute(key, object[key]);\r\n }\r\n};\r\n\r\n/**\r\n * Create svg element\r\n *\r\n * @param {String} type\r\n * @returns {SVGElement}\r\n */\r\nconst createNSElement = (type) =>\r\n document.createElementNS(\"http://www.w3.org/2000/svg\", type);\r\n\r\n/**\r\n * Create svg tspan\r\n *\r\n * @param {String} className\r\n * @param {String} unit\r\n * @returns {HTMLElement}\r\n */\r\nconst tspan = (className, unit) => {\r\n const element = createNSElement(\"tspan\");\r\n\r\n element.classList.add(className);\r\n if (unit) element.textContent = unit;\r\n return element;\r\n};\r\n\r\n/**\r\n * Function generate stroke-dashoffset\r\n *\r\n * @param {Number} count\r\n * @param {Boolean} inverse - Counterclockwise animation\r\n * @param {Number} cut - Angle of the circle sector\r\n * @returns {Number}\r\n */\r\nconst dashOffset = (count, inverse, cut) => {\r\n const cutChar = cut ? (264 / 100) * (100 - cut) : 264;\r\n const angle = 264 - (count / 100) * cutChar;\r\n\r\n // https://github.com/tomickigrzegorz/circular-progress-bar/issues/87\r\n // inverse option is not working in ios safari\r\n // return inverse ? `${264 - angle}` : angle;\r\n return inverse ? -angle : angle;\r\n};\r\n\r\n/**\r\n * @param {HTMLElement} element\r\n * @param {HTMLElement} el\r\n * @param {String} type\r\n */\r\nconst insertAdElement = (element, el, type = \"beforeend\") =>\r\n element.insertAdjacentElement(type, el);\r\n\r\n/**\r\n * Generator function linear-gradient stop svg elements\r\n *\r\n * @param {Object} object\r\n */\r\nconst gradient = ({ index, lineargradient }) => {\r\n const defsElement = createNSElement(\"defs\");\r\n const linearGradient = createNSElement(\"linearGradient\");\r\n linearGradient.id = `linear-${index}`;\r\n\r\n const countGradient = [].slice.call(lineargradient);\r\n\r\n defsElement.appendChild(linearGradient);\r\n\r\n let number = 0;\r\n countGradient.map((item) => {\r\n const stopElements = createNSElement(\"stop\");\r\n\r\n const stopObj = {\r\n offset: `${number}%`,\r\n \"stop-color\": `${item}`,\r\n };\r\n setAttribute(stopElements, stopObj);\r\n\r\n linearGradient.appendChild(stopElements);\r\n number += 100 / (countGradient.length - 1);\r\n });\r\n\r\n return defsElement;\r\n};\r\n\r\n/**\r\n * A function that generates tspan\r\n * elements with a number and unit\r\n *\r\n * @param {Object} options - Global configuration\r\n * @param {String} className\r\n */\r\nconst percent = (options, className) => {\r\n const creatTextElementSVG = createNSElement(\"text\");\r\n\r\n creatTextElementSVG.classList.add(`${className}-text-${options.index}`);\r\n\r\n // create tspan element with number\r\n // and insert to svg text element\r\n insertAdElement(\r\n creatTextElementSVG,\r\n tspan(`${className}-percent-${options.index}`),\r\n );\r\n\r\n // create and insert unit to text element\r\n insertAdElement(\r\n creatTextElementSVG,\r\n tspan(`${className}-unit-${options.index}`, options.unit),\r\n );\r\n\r\n // config to svg text\r\n const obj = {\r\n x: \"50%\",\r\n y: \"50%\",\r\n fill: options.fontColor,\r\n \"text-anchor\": \"middle\",\r\n dy: options.textPosition || \"0.35em\",\r\n ...fontSettings(options),\r\n };\r\n\r\n setAttribute(creatTextElementSVG, obj);\r\n return creatTextElementSVG;\r\n};\r\n\r\nexport {\r\n createNSElement,\r\n dashOffset,\r\n fontSettings,\r\n gradient,\r\n insertAdElement,\r\n percent,\r\n querySelector,\r\n setAttribute,\r\n setColor,\r\n strokeDasharray,\r\n strokeLinecap,\r\n styleTransform,\r\n};\r\n","import defaultOptions from \"./helpers/defaults\";\r\nimport {\r\n createNSElement,\r\n dashOffset,\r\n fontSettings,\r\n gradient,\r\n insertAdElement,\r\n percent,\r\n querySelector,\r\n setAttribute,\r\n setColor,\r\n strokeDasharray,\r\n strokeLinecap,\r\n styleTransform,\r\n} from \"./helpers/function\";\r\n\r\n/**\r\n * @class\r\n */\r\nexport default class CircularProgressBar {\r\n /**\r\n * CircularProgressBar constructor\r\n *\r\n * @param {String} pieName - class name\r\n * @param {Object} globalObj - global configuration\r\n */\r\n constructor(pieName, globalObj = {}) {\r\n this._className = pieName;\r\n this._globalObj = globalObj;\r\n\r\n const pieElements = document.querySelectorAll(`.${pieName}`);\r\n const elements = [].slice.call(pieElements);\r\n // add index to all progressbar\r\n elements.map((item, idx) => {\r\n const id = JSON.parse(item.getAttribute(\"data-pie\"));\r\n item.setAttribute(\r\n \"data-pie-index\",\r\n id.index || globalObj.index || idx + 1,\r\n );\r\n });\r\n\r\n this._elements = elements;\r\n }\r\n\r\n /**\r\n * @param {object} outside\r\n */\r\n initial(outside) {\r\n const triggeredOutside = outside || this._elements;\r\n Array.isArray(triggeredOutside)\r\n ? triggeredOutside.map((element) => this._createSVG(element))\r\n : this._createSVG(triggeredOutside);\r\n }\r\n\r\n /**\r\n * @param {SVGAElement} svg\r\n * @param {HTMLElement} target\r\n * @param {Object} options\r\n */\r\n _progress(svg, target, options) {\r\n const pieName = this._className;\r\n if (options.number) {\r\n insertAdElement(svg, percent(options, pieName));\r\n }\r\n\r\n const progressCircle = querySelector(`.${pieName}-circle-${options.index}`);\r\n\r\n const configCircle = {\r\n fill: \"none\",\r\n \"stroke-width\": options.stroke,\r\n \"stroke-dashoffset\": \"264\",\r\n ...strokeDasharray(),\r\n ...strokeLinecap(options),\r\n };\r\n setAttribute(progressCircle, configCircle);\r\n\r\n // animation progress\r\n this.animationTo({ ...options, element: progressCircle }, true);\r\n\r\n // set style and rotation\r\n progressCircle.setAttribute(\"style\", styleTransform(options));\r\n\r\n // set color\r\n setColor(progressCircle, options);\r\n\r\n // set width and height on div\r\n target.setAttribute(\r\n \"style\",\r\n `width:${options.size}px;height:${options.size}px;`,\r\n );\r\n }\r\n\r\n /**\r\n * Callback function\r\n *\r\n * @param {Object} options\r\n * @param {Boolean} initial\r\n */\r\n animationTo(options, initial = false) {\r\n const pieName = this._className;\r\n const previousConfigObj = JSON.parse(\r\n querySelector(`[data-pie-index=\"${options.index}\"]`).getAttribute(\r\n \"data-pie\",\r\n ),\r\n );\r\n\r\n const circleElement = querySelector(`.${pieName}-circle-${options.index}`);\r\n\r\n if (!circleElement) return;\r\n\r\n // merging all configuration objects\r\n const commonConfiguration = initial\r\n ? options\r\n : {\r\n ...defaultOptions,\r\n ...previousConfigObj,\r\n ...options,\r\n ...this._globalObj,\r\n };\r\n\r\n // update color circle\r\n if (!initial) {\r\n setColor(circleElement, commonConfiguration);\r\n }\r\n\r\n // font color update\r\n if (!initial && commonConfiguration.number) {\r\n const fontconfig = {\r\n fill: commonConfiguration.fontColor,\r\n ...fontSettings(commonConfiguration),\r\n };\r\n const textElement = querySelector(\r\n `.${pieName}-text-${commonConfiguration.index}`,\r\n );\r\n setAttribute(textElement, fontconfig);\r\n }\r\n\r\n const centerNumber = querySelector(`.${pieName}-percent-${options.index}`);\r\n\r\n if (commonConfiguration.animationOff) {\r\n if (commonConfiguration.number)\r\n centerNumber.textContent = `${commonConfiguration.percent}`;\r\n circleElement.setAttribute(\r\n \"stroke-dashoffset\",\r\n dashOffset(commonConfiguration.percent, commonConfiguration.inverse),\r\n );\r\n return;\r\n }\r\n\r\n // get numer percent from data-angel\r\n let angle = JSON.parse(circleElement.getAttribute(\"data-angel\"));\r\n\r\n // round if number is decimal\r\n const percent = Math.round(options.percent);\r\n\r\n // if percent 0 then set at start 0%\r\n if (percent === 0) {\r\n if (commonConfiguration.number) centerNumber.textContent = \"0\";\r\n circleElement.setAttribute(\"stroke-dashoffset\", \"264\");\r\n }\r\n\r\n if (percent > 100 || percent < 0 || angle === percent) return;\r\n\r\n let request;\r\n let i = initial ? 0 : angle;\r\n\r\n const fps = commonConfiguration.speed || 1000;\r\n const interval = 1000 / fps;\r\n const tolerance = 0.1;\r\n let then = performance.now();\r\n\r\n const performAnimation = (now) => {\r\n request = requestAnimationFrame(performAnimation);\r\n const delta = now - then;\r\n\r\n if (delta >= interval - tolerance) {\r\n then = now - (delta % interval);\r\n\r\n // angle >= commonConfiguration.percent ? i-- : i++;\r\n i = i < commonConfiguration.percent ? i + 1 : i - 1;\r\n }\r\n\r\n circleElement.setAttribute(\r\n \"stroke-dashoffset\",\r\n dashOffset(i, commonConfiguration.inverse, commonConfiguration.cut),\r\n );\r\n if (centerNumber && commonConfiguration.number) {\r\n centerNumber.textContent = `${i}`;\r\n }\r\n\r\n circleElement.setAttribute(\"data-angel\", i);\r\n circleElement.parentNode.setAttribute(\"aria-valuenow\", i);\r\n\r\n if (i === percent) {\r\n cancelAnimationFrame(request);\r\n }\r\n\r\n // return;\r\n };\r\n\r\n requestAnimationFrame(performAnimation);\r\n }\r\n\r\n /**\r\n * Create svg elements\r\n *\r\n * @param {HTMLElement} element\r\n */\r\n _createSVG(element) {\r\n const index = element.getAttribute(\"data-pie-index\");\r\n const json = JSON.parse(element.getAttribute(\"data-pie\"));\r\n\r\n const options = { ...defaultOptions, ...json, index, ...this._globalObj };\r\n\r\n const svg = createNSElement(\"svg\");\r\n\r\n const configSVG = {\r\n role: \"progressbar\",\r\n width: options.size,\r\n height: options.size,\r\n viewBox: \"0 0 100 100\",\r\n \"aria-valuemin\": \"0\",\r\n \"aria-valuemax\": \"100\",\r\n };\r\n\r\n setAttribute(svg, configSVG);\r\n\r\n // colorCircle\r\n if (options.colorCircle) {\r\n svg.appendChild(this._circle(options));\r\n }\r\n\r\n // gradient\r\n if (options.lineargradient) {\r\n svg.appendChild(gradient(options));\r\n }\r\n\r\n svg.appendChild(this._circle(options, \"top\"));\r\n\r\n element.appendChild(svg);\r\n\r\n this._progress(svg, element, options);\r\n }\r\n\r\n /**\r\n * Create circle top/bottom\r\n *\r\n * @param {Object} options\r\n * @param {String} where\r\n * @returns {SVGElement}\r\n */\r\n _circle(options, where = \"bottom\") {\r\n const circle = createNSElement(\"circle\");\r\n\r\n let configCircle = {};\r\n if (options.cut) {\r\n const dashoffset = 264 - (100 - options.cut) * 2.64;\r\n configCircle = {\r\n \"stroke-dashoffset\": options.inverse ? -dashoffset : dashoffset,\r\n style: styleTransform(options),\r\n ...strokeDasharray(),\r\n ...strokeLinecap(options),\r\n };\r\n }\r\n\r\n const objCircle = {\r\n fill: options.fill,\r\n stroke: options.colorCircle,\r\n \"stroke-width\": options.strokeBottom || options.stroke,\r\n ...configCircle,\r\n };\r\n\r\n if (options.strokeDasharray) {\r\n Object.assign(objCircle, { ...strokeDasharray(options.strokeDasharray) });\r\n }\r\n\r\n const typeCircle =\r\n where === \"top\"\r\n ? { class: `${this._className}-circle-${options.index}` }\r\n : objCircle;\r\n\r\n const objConfig = {\r\n cx: \"50%\",\r\n cy: \"50%\",\r\n r: 42,\r\n \"shape-rendering\": \"geometricPrecision\",\r\n ...typeCircle,\r\n };\r\n\r\n setAttribute(circle, objConfig);\r\n\r\n return circle;\r\n }\r\n}\r\n"],"names":["defaultOptions","colorSlice","fontColor","fontSize","fontWeight","lineargradient","number","round","fill","unit","rotation","size","stroke","styleTransform","_ref","animationSmooth","smoothAnimation","strokeDasharray","type","strokeLinecap","_ref2","fontSettings","options","querySelector","element","document","setColor","_ref3","index","setAttribute","object","key","createNSElement","createElementNS","tspan","className","classList","add","textContent","dashOffset","count","inverse","cut","cutChar","angle","insertAdElement","el","insertAdjacentElement","gradient","_ref4","defsElement","linearGradient","id","countGradient","slice","call","appendChild","map","item","stopElements","stopObj","offset","length","percent","creatTextElementSVG","obj","x","y","dy","textPosition","CircularProgressBar","constructor","pieName","globalObj","_className","_globalObj","pieElements","querySelectorAll","elements","idx","JSON","parse","getAttribute","_elements","initial","outside","triggeredOutside","Array","isArray","_createSVG","_progress","svg","target","progressCircle","configCircle","animationTo","previousConfigObj","circleElement","commonConfiguration","fontconfig","textElement","centerNumber","animationOff","Math","request","i","fps","speed","interval","tolerance","then","performance","now","performAnimation","requestAnimationFrame","delta","parentNode","cancelAnimationFrame","json","configSVG","role","width","height","viewBox","colorCircle","_circle","where","circle","dashoffset","style","objCircle","strokeBottom","Object","assign","typeCircle","class","objConfig","cx","cy","r"],"mappings":"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"} \ No newline at end of file diff --git a/dist/circularProgressBar.min.js b/dist/circularProgressBar.min.js index ce49bf3..9259f00 100644 --- a/dist/circularProgressBar.min.js +++ b/dist/circularProgressBar.min.js @@ -1 +1 @@ -var CircularProgressBar=function(){"use strict";const t={colorSlice:"#00a1ff",fontColor:"#000",fontSize:"1.6rem",fontWeight:400,lineargradient:!1,number:!0,round:!1,fill:"none",unit:"%",rotation:-90,size:200,stroke:10},e=t=>{let{rotation:e,animationSmooth:n}=t;return`transform:rotate(${e}deg);transform-origin: 50% 50%;${n?`transition: stroke-dashoffset ${n}`:""}`},n=t=>({"stroke-dasharray":t||"264"}),o=t=>{let{round:e}=t;return{"stroke-linecap":e?"round":""}},r=t=>({"font-size":t.fontSize,"font-weight":t.fontWeight}),i=t=>document.querySelector(t),s=(t,e)=>{let{lineargradient:n,index:o,colorSlice:r}=e;t.setAttribute("stroke",n?`url(#linear-${o})`:r)},a=(t,e)=>{for(const n in e)t?.setAttribute(n,e[n])},c=t=>document.createElementNS("http://www.w3.org/2000/svg",t),l=(t,e)=>{const n=c("tspan");return n.classList.add(t),e&&(n.textContent=e),n},d=(t,e,n)=>{const o=264-t/100*(n?2.64*(100-n):264);return e?-o:o},f=function(t,e,n){return void 0===n&&(n="beforeend"),t.insertAdjacentElement(n,e)};return class{constructor(t,e){void 0===e&&(e={}),this.t=t,this.o=e;const n=document.querySelectorAll(`.${t}`),o=[].slice.call(n);o.map(((t,n)=>{const o=JSON.parse(t.getAttribute("data-pie"));t.setAttribute("data-pie-index",o.index||e.index||n+1)})),this.i=o}initial(t){const e=t||this.i;Array.isArray(e)?e.map((t=>this.l(t))):this.l(e)}h(t,d,h){const u=this.t;h.number&&f(t,((t,e)=>{const n=c("text");n.classList.add(`${e}-text-${t.index}`),f(n,l(`${e}-percent-${t.index}`)),f(n,l(`${e}-unit-${t.index}`,t.unit));const o={x:"50%",y:"50%",fill:t.fontColor,"text-anchor":"middle",dy:t.textPosition||"0.35em",...r(t)};return a(n,o),n})(h,u));const $=i(`.${u}-circle-${h.index}`),m={fill:"none","stroke-width":h.stroke,"stroke-dashoffset":"264",...n(),...o(h)};a($,m),this.animationTo({...h,element:$},!0),$.setAttribute("style",e(h)),s($,h),d.setAttribute("style",`width:${h.size}px;height:${h.size}px;`)}animationTo(e,n){void 0===n&&(n=!1);const o=this.t,c=JSON.parse(i(`[data-pie-index="${e.index}"]`).getAttribute("data-pie")),l=i(`.${o}-circle-${e.index}`);if(!l)return;const f=n?e:{...t,...c,...e,...this.o};if(n||s(l,f),!n&&f.number){const t={fill:f.fontColor,...r(f)},e=i(`.${o}-text-${f.index}`);a(e,t)}const h=i(`.${o}-percent-${e.index}`);if(f.animationOff)return f.number&&(h.textContent=`${f.percent}`),void l.setAttribute("stroke-dashoffset",d(f.percent,f.inverse));let u=JSON.parse(l.getAttribute("data-angel"));const $=Math.round(e.percent);if(0===$&&(f.number&&(h.textContent="0"),l.setAttribute("stroke-dashoffset","264")),$>100||$<=0||u===$)return;let m,p=n?0:u;const g=1e3/(f.speed||1e3);let x=performance.now();const k=t=>{m=requestAnimationFrame(k);const e=t-x;e>=g-.1&&(x=t-e%g,u>=f.percent?p--:p++),l.setAttribute("stroke-dashoffset",d(p,f.inverse,f.cut)),h&&f.number&&(h.textContent=`${p}`),l.setAttribute("data-angel",p),l.parentNode.setAttribute("aria-valuenow",p),p===$&&cancelAnimationFrame(m)};requestAnimationFrame(k)}l(e){const n=e.getAttribute("data-pie-index"),o=JSON.parse(e.getAttribute("data-pie")),r={...t,...o,index:n,...this.o},i=c("svg"),s={role:"progressbar",width:r.size,height:r.size,viewBox:"0 0 100 100","aria-valuemin":"0","aria-valuemax":"100"};a(i,s),r.colorCircle&&i.appendChild(this.u(r)),r.lineargradient&&i.appendChild((t=>{let{index:e,lineargradient:n}=t;const o=c("defs"),r=c("linearGradient");r.id=`linear-${e}`;const i=[].slice.call(n);o.appendChild(r);let s=0;return i.map((t=>{const e=c("stop");a(e,{offset:`${s}%`,"stop-color":`${t}`}),r.appendChild(e),s+=100/(i.length-1)})),o})(r)),i.appendChild(this.u(r,"top")),e.appendChild(i),this.h(i,e,r)}u(t,r){void 0===r&&(r="bottom");const i=c("circle");let s={};if(t.cut){const r=264-2.64*(100-t.cut);s={"stroke-dashoffset":t.inverse?-r:r,style:e(t),...n(),...o(t)}}const l={fill:t.fill,stroke:t.colorCircle,"stroke-width":t.strokeBottom||t.stroke,...s};t.strokeDasharray&&Object.assign(l,{...n(t.strokeDasharray)});const d={cx:"50%",cy:"50%",r:42,"shape-rendering":"geometricPrecision",..."top"===r?{class:`${this.t}-circle-${t.index}`}:l};return a(i,d),i}}}(); +var CircularProgressBar=function(){"use strict";const t={colorSlice:"#00a1ff",fontColor:"#000",fontSize:"1.6rem",fontWeight:400,lineargradient:!1,number:!0,round:!1,fill:"none",unit:"%",rotation:-90,size:200,stroke:10},e=t=>{let{rotation:e,animationSmooth:n}=t;return`transform:rotate(${e}deg);transform-origin: 50% 50%;${n?`transition: stroke-dashoffset ${n}`:""}`},n=t=>({"stroke-dasharray":t||"264"}),o=t=>{let{round:e}=t;return{"stroke-linecap":e?"round":""}},r=t=>({"font-size":t.fontSize,"font-weight":t.fontWeight}),i=t=>document.querySelector(t),s=(t,e)=>{let{lineargradient:n,index:o,colorSlice:r}=e;t.setAttribute("stroke",n?`url(#linear-${o})`:r)},a=(t,e)=>{for(const n in e)t?.setAttribute(n,e[n])},c=t=>document.createElementNS("http://www.w3.org/2000/svg",t),l=(t,e)=>{const n=c("tspan");return n.classList.add(t),e&&(n.textContent=e),n},d=(t,e,n)=>{const o=264-t/100*(n?2.64*(100-n):264);return e?-o:o},f=function(t,e,n){return void 0===n&&(n="beforeend"),t.insertAdjacentElement(n,e)};return class{constructor(t,e){void 0===e&&(e={}),this.t=t,this.o=e;const n=document.querySelectorAll(`.${t}`),o=[].slice.call(n);o.map(((t,n)=>{const o=JSON.parse(t.getAttribute("data-pie"));t.setAttribute("data-pie-index",o.index||e.index||n+1)})),this.i=o}initial(t){const e=t||this.i;Array.isArray(e)?e.map((t=>this.l(t))):this.l(e)}h(t,d,h){const u=this.t;h.number&&f(t,((t,e)=>{const n=c("text");n.classList.add(`${e}-text-${t.index}`),f(n,l(`${e}-percent-${t.index}`)),f(n,l(`${e}-unit-${t.index}`,t.unit));const o={x:"50%",y:"50%",fill:t.fontColor,"text-anchor":"middle",dy:t.textPosition||"0.35em",...r(t)};return a(n,o),n})(h,u));const $=i(`.${u}-circle-${h.index}`),m={fill:"none","stroke-width":h.stroke,"stroke-dashoffset":"264",...n(),...o(h)};a($,m),this.animationTo({...h,element:$},!0),$.setAttribute("style",e(h)),s($,h),d.setAttribute("style",`width:${h.size}px;height:${h.size}px;`)}animationTo(e,n){void 0===n&&(n=!1);const o=this.t,c=JSON.parse(i(`[data-pie-index="${e.index}"]`).getAttribute("data-pie")),l=i(`.${o}-circle-${e.index}`);if(!l)return;const f=n?e:{...t,...c,...e,...this.o};if(n||s(l,f),!n&&f.number){const t={fill:f.fontColor,...r(f)},e=i(`.${o}-text-${f.index}`);a(e,t)}const h=i(`.${o}-percent-${e.index}`);if(f.animationOff)return f.number&&(h.textContent=`${f.percent}`),void l.setAttribute("stroke-dashoffset",d(f.percent,f.inverse));let u=JSON.parse(l.getAttribute("data-angel"));const $=Math.round(e.percent);if(0===$&&(f.number&&(h.textContent="0"),l.setAttribute("stroke-dashoffset","264")),$>100||$<0||u===$)return;let m,p=n?0:u;const g=1e3/(f.speed||1e3);let x=performance.now();const k=t=>{m=requestAnimationFrame(k);const e=t-x;e>=g-.1&&(x=t-e%g,p=p{let{index:e,lineargradient:n}=t;const o=c("defs"),r=c("linearGradient");r.id=`linear-${e}`;const i=[].slice.call(n);o.appendChild(r);let s=0;return i.map((t=>{const e=c("stop");a(e,{offset:`${s}%`,"stop-color":`${t}`}),r.appendChild(e),s+=100/(i.length-1)})),o})(r)),i.appendChild(this.u(r,"top")),e.appendChild(i),this.h(i,e,r)}u(t,r){void 0===r&&(r="bottom");const i=c("circle");let s={};if(t.cut){const r=264-2.64*(100-t.cut);s={"stroke-dashoffset":t.inverse?-r:r,style:e(t),...n(),...o(t)}}const l={fill:t.fill,stroke:t.colorCircle,"stroke-width":t.strokeBottom||t.stroke,...s};t.strokeDasharray&&Object.assign(l,{...n(t.strokeDasharray)});const d={cx:"50%",cy:"50%",r:42,"shape-rendering":"geometricPrecision",..."top"===r?{class:`${this.t}-circle-${t.index}`}:l};return a(i,d),i}}}(); diff --git a/dist/circularProgressBar.umd.js b/dist/circularProgressBar.umd.js index 11e7f98..b6c831c 100644 --- a/dist/circularProgressBar.umd.js +++ b/dist/circularProgressBar.umd.js @@ -196,7 +196,7 @@ if (commonConfiguration.number) centerNumber.textContent = "0"; circleElement.setAttribute("stroke-dashoffset", "264"); } - if (percent > 100 || percent <= 0 || angle === percent) return; + if (percent > 100 || percent < 0 || angle === percent) return; let request; let i = initial ? 0 : angle; const fps = commonConfiguration.speed || 1000; @@ -208,7 +208,7 @@ const delta = now - then; if (delta >= interval - tolerance) { then = now - delta % interval; - angle >= commonConfiguration.percent ? i-- : i++; + i = i < commonConfiguration.percent ? i + 1 : i - 1; } circleElement.setAttribute("stroke-dashoffset", dashOffset(i, commonConfiguration.inverse, commonConfiguration.cut)); if (centerNumber && commonConfiguration.number) { diff --git a/dist/circularProgressBar.umd.js.map b/dist/circularProgressBar.umd.js.map index 845716a..5ed7731 100644 --- a/dist/circularProgressBar.umd.js.map +++ b/dist/circularProgressBar.umd.js.map @@ -1 +1 @@ -{"version":3,"file":"circularProgressBar.umd.js","sources":["../sources/helpers/defaults.js","../sources/helpers/function.js","../sources/index.js"],"sourcesContent":["/**\r\n * @typedef {Object} - Default object\r\n * @prop {String} [colorSlice] - Progress color circle\r\n * @prop {String} [fontColor] - Font color\r\n * @prop {String} [fontSize] - Font size\r\n * @prop {Number} [fontWeight] - Font weight\r\n * @prop {Array} [linearGradient] - Linear gradien for circle\r\n * @prop {Boolean} [number] - Show/hide number\r\n * @prop {Boolean} [round] - Path rounding\r\n * @prop {String} [fill] - Inner circle color\r\n * @prop {String} [unit] - Different unit instead of percentage (%) inside the circle\r\n * @prop {Number} [rotation] - Chart rotation\r\n * @prop {Number} [size] - Size progress bar width and height in px\r\n * @prop {Number} [stroke] - Stroke width, chart thickness\r\n */\r\n/**\r\n * Returns the default options of the component\r\n * @return {CPBOptions}\r\n */\r\nconst defaultOptions = {\r\n colorSlice: \"#00a1ff\",\r\n fontColor: \"#000\",\r\n fontSize: \"1.6rem\",\r\n fontWeight: 400,\r\n lineargradient: false,\r\n number: true,\r\n round: false,\r\n fill: \"none\",\r\n unit: \"%\",\r\n rotation: -90,\r\n size: 200,\r\n stroke: 10,\r\n};\r\n\r\nexport default defaultOptions;\r\n","/**\r\n *\r\n * @param {Object} object\r\n * @returns {String}\r\n */\r\nconst styleTransform = ({ rotation, animationSmooth }) => {\r\n const smoothAnimation = animationSmooth\r\n ? `transition: stroke-dashoffset ${animationSmooth}`\r\n : \"\";\r\n\r\n return `transform:rotate(${rotation}deg);transform-origin: 50% 50%;${smoothAnimation}`;\r\n};\r\n\r\n/**\r\n * Set \"stroke-dasharray\": \"1, 2\"\r\n * @param {String} type\r\n * @returns {Object}\r\n */\r\nconst strokeDasharray = (type) => {\r\n return {\r\n \"stroke-dasharray\": type || \"264\",\r\n };\r\n};\r\n\r\n/**\r\n * Set type stroke-linecap\r\n * @param {String} round\r\n * @returns {Object}\r\n */\r\nconst strokeLinecap = ({ round }) => {\r\n return {\r\n \"stroke-linecap\": round ? \"round\" : \"\",\r\n };\r\n};\r\n\r\n/**\r\n * Set font sieze/weight\r\n *\r\n * @param {Object} options\r\n * @returns {Object}\r\n */\r\nconst fontSettings = (options) => {\r\n return {\r\n \"font-size\": options.fontSize,\r\n \"font-weight\": options.fontWeight,\r\n };\r\n};\r\n\r\n/**\r\n *\r\n * @param {String} element\r\n * @returns {HTMLElement}\r\n */\r\nconst querySelector = (element) => document.querySelector(element);\r\n\r\n/**\r\n * Set color or linear-gradient\r\n *\r\n * @param {String} element\r\n * @param {Object} object\r\n */\r\nconst setColor = (element, { lineargradient, index, colorSlice }) => {\r\n element.setAttribute(\r\n \"stroke\",\r\n lineargradient ? `url(#linear-${index})` : colorSlice,\r\n );\r\n};\r\n\r\n/**\r\n * Set attribute to specific element\r\n *\r\n * @param {String} element\r\n * @param {Object} object\r\n */\r\nconst setAttribute = (element, object) => {\r\n for (const key in object) {\r\n element?.setAttribute(key, object[key]);\r\n }\r\n};\r\n\r\n/**\r\n * Create svg element\r\n *\r\n * @param {String} type\r\n * @returns {SVGElement}\r\n */\r\nconst createNSElement = (type) =>\r\n document.createElementNS(\"http://www.w3.org/2000/svg\", type);\r\n\r\n/**\r\n * Create svg tspan\r\n *\r\n * @param {String} className\r\n * @param {String} unit\r\n * @returns {HTMLElement}\r\n */\r\nconst tspan = (className, unit) => {\r\n const element = createNSElement(\"tspan\");\r\n\r\n element.classList.add(className);\r\n if (unit) element.textContent = unit;\r\n return element;\r\n};\r\n\r\n/**\r\n * Function generate stroke-dashoffset\r\n *\r\n * @param {Number} count\r\n * @param {Boolean} inverse - Counterclockwise animation\r\n * @param {Number} cut - Angle of the circle sector\r\n * @returns {Number}\r\n */\r\nconst dashOffset = (count, inverse, cut) => {\r\n const cutChar = cut ? (264 / 100) * (100 - cut) : 264;\r\n const angle = 264 - (count / 100) * cutChar;\r\n\r\n // https://github.com/tomickigrzegorz/circular-progress-bar/issues/87\r\n // inverse option is not working in ios safari\r\n // return inverse ? `${264 - angle}` : angle;\r\n return inverse ? -angle : angle;\r\n};\r\n\r\n/**\r\n * @param {HTMLElement} element\r\n * @param {HTMLElement} el\r\n * @param {String} type\r\n */\r\nconst insertAdElement = (element, el, type = \"beforeend\") =>\r\n element.insertAdjacentElement(type, el);\r\n\r\n/**\r\n * Generator function linear-gradient stop svg elements\r\n *\r\n * @param {Object} object\r\n */\r\nconst gradient = ({ index, lineargradient }) => {\r\n const defsElement = createNSElement(\"defs\");\r\n const linearGradient = createNSElement(\"linearGradient\");\r\n linearGradient.id = `linear-${index}`;\r\n\r\n const countGradient = [].slice.call(lineargradient);\r\n\r\n defsElement.appendChild(linearGradient);\r\n\r\n let number = 0;\r\n countGradient.map((item) => {\r\n const stopElements = createNSElement(\"stop\");\r\n\r\n const stopObj = {\r\n offset: `${number}%`,\r\n \"stop-color\": `${item}`,\r\n };\r\n setAttribute(stopElements, stopObj);\r\n\r\n linearGradient.appendChild(stopElements);\r\n number += 100 / (countGradient.length - 1);\r\n });\r\n\r\n return defsElement;\r\n};\r\n\r\n/**\r\n * A function that generates tspan\r\n * elements with a number and unit\r\n *\r\n * @param {Object} options - Global configuration\r\n * @param {String} className\r\n */\r\nconst percent = (options, className) => {\r\n const creatTextElementSVG = createNSElement(\"text\");\r\n\r\n creatTextElementSVG.classList.add(`${className}-text-${options.index}`);\r\n\r\n // create tspan element with number\r\n // and insert to svg text element\r\n insertAdElement(\r\n creatTextElementSVG,\r\n tspan(`${className}-percent-${options.index}`),\r\n );\r\n\r\n // create and insert unit to text element\r\n insertAdElement(\r\n creatTextElementSVG,\r\n tspan(`${className}-unit-${options.index}`, options.unit),\r\n );\r\n\r\n // config to svg text\r\n const obj = {\r\n x: \"50%\",\r\n y: \"50%\",\r\n fill: options.fontColor,\r\n \"text-anchor\": \"middle\",\r\n dy: options.textPosition || \"0.35em\",\r\n ...fontSettings(options),\r\n };\r\n\r\n setAttribute(creatTextElementSVG, obj);\r\n return creatTextElementSVG;\r\n};\r\n\r\nexport {\r\n createNSElement,\r\n dashOffset,\r\n fontSettings,\r\n gradient,\r\n insertAdElement,\r\n percent,\r\n querySelector,\r\n setAttribute,\r\n setColor,\r\n strokeDasharray,\r\n strokeLinecap,\r\n styleTransform,\r\n};\r\n","import defaultOptions from \"./helpers/defaults\";\r\nimport {\r\n createNSElement,\r\n dashOffset,\r\n fontSettings,\r\n gradient,\r\n insertAdElement,\r\n percent,\r\n querySelector,\r\n setAttribute,\r\n setColor,\r\n strokeDasharray,\r\n strokeLinecap,\r\n styleTransform,\r\n} from \"./helpers/function\";\r\n\r\n/**\r\n * @class\r\n */\r\nexport default class CircularProgressBar {\r\n /**\r\n * CircularProgressBar constructor\r\n *\r\n * @param {String} pieName - class name\r\n * @param {Object} globalObj - global configuration\r\n */\r\n constructor(pieName, globalObj = {}) {\r\n this._className = pieName;\r\n this._globalObj = globalObj;\r\n\r\n const pieElements = document.querySelectorAll(`.${pieName}`);\r\n const elements = [].slice.call(pieElements);\r\n // add index to all progressbar\r\n elements.map((item, idx) => {\r\n const id = JSON.parse(item.getAttribute(\"data-pie\"));\r\n item.setAttribute(\r\n \"data-pie-index\",\r\n id.index || globalObj.index || idx + 1,\r\n );\r\n });\r\n\r\n this._elements = elements;\r\n }\r\n\r\n /**\r\n * @param {object} outside\r\n */\r\n initial(outside) {\r\n const triggeredOutside = outside || this._elements;\r\n Array.isArray(triggeredOutside)\r\n ? triggeredOutside.map((element) => this._createSVG(element))\r\n : this._createSVG(triggeredOutside);\r\n }\r\n\r\n /**\r\n * @param {SVGAElement} svg\r\n * @param {HTMLElement} target\r\n * @param {Object} options\r\n */\r\n _progress(svg, target, options) {\r\n const pieName = this._className;\r\n if (options.number) {\r\n insertAdElement(svg, percent(options, pieName));\r\n }\r\n\r\n const progressCircle = querySelector(`.${pieName}-circle-${options.index}`);\r\n\r\n const configCircle = {\r\n fill: \"none\",\r\n \"stroke-width\": options.stroke,\r\n \"stroke-dashoffset\": \"264\",\r\n ...strokeDasharray(),\r\n ...strokeLinecap(options),\r\n };\r\n setAttribute(progressCircle, configCircle);\r\n\r\n // animation progress\r\n this.animationTo({ ...options, element: progressCircle }, true);\r\n\r\n // set style and rotation\r\n progressCircle.setAttribute(\"style\", styleTransform(options));\r\n\r\n // set color\r\n setColor(progressCircle, options);\r\n\r\n // set width and height on div\r\n target.setAttribute(\r\n \"style\",\r\n `width:${options.size}px;height:${options.size}px;`,\r\n );\r\n }\r\n\r\n /**\r\n * Callback function\r\n *\r\n * @param {Object} options\r\n * @param {Boolean} initial\r\n */\r\n animationTo(options, initial = false) {\r\n const pieName = this._className;\r\n const previousConfigObj = JSON.parse(\r\n querySelector(`[data-pie-index=\"${options.index}\"]`).getAttribute(\r\n \"data-pie\",\r\n ),\r\n );\r\n\r\n const circleElement = querySelector(`.${pieName}-circle-${options.index}`);\r\n\r\n if (!circleElement) return;\r\n\r\n // merging all configuration objects\r\n const commonConfiguration = initial\r\n ? options\r\n : {\r\n ...defaultOptions,\r\n ...previousConfigObj,\r\n ...options,\r\n ...this._globalObj,\r\n };\r\n\r\n // update color circle\r\n if (!initial) {\r\n setColor(circleElement, commonConfiguration);\r\n }\r\n\r\n // font color update\r\n if (!initial && commonConfiguration.number) {\r\n const fontconfig = {\r\n fill: commonConfiguration.fontColor,\r\n ...fontSettings(commonConfiguration),\r\n };\r\n const textElement = querySelector(\r\n `.${pieName}-text-${commonConfiguration.index}`,\r\n );\r\n setAttribute(textElement, fontconfig);\r\n }\r\n\r\n const centerNumber = querySelector(`.${pieName}-percent-${options.index}`);\r\n\r\n if (commonConfiguration.animationOff) {\r\n if (commonConfiguration.number)\r\n centerNumber.textContent = `${commonConfiguration.percent}`;\r\n circleElement.setAttribute(\r\n \"stroke-dashoffset\",\r\n dashOffset(commonConfiguration.percent, commonConfiguration.inverse),\r\n );\r\n return;\r\n }\r\n\r\n // get numer percent from data-angel\r\n let angle = JSON.parse(circleElement.getAttribute(\"data-angel\"));\r\n\r\n // round if number is decimal\r\n const percent = Math.round(options.percent);\r\n\r\n // if percent 0 then set at start 0%\r\n if (percent === 0) {\r\n if (commonConfiguration.number) centerNumber.textContent = \"0\";\r\n circleElement.setAttribute(\"stroke-dashoffset\", \"264\");\r\n }\r\n\r\n if (percent > 100 || percent <= 0 || angle === percent) return;\r\n\r\n let request;\r\n let i = initial ? 0 : angle;\r\n\r\n const fps = commonConfiguration.speed || 1000;\r\n const interval = 1000 / fps;\r\n const tolerance = 0.1;\r\n let then = performance.now();\r\n\r\n const performAnimation = (now) => {\r\n request = requestAnimationFrame(performAnimation);\r\n const delta = now - then;\r\n\r\n if (delta >= interval - tolerance) {\r\n then = now - (delta % interval);\r\n\r\n angle >= commonConfiguration.percent ? i-- : i++;\r\n }\r\n\r\n circleElement.setAttribute(\r\n \"stroke-dashoffset\",\r\n dashOffset(i, commonConfiguration.inverse, commonConfiguration.cut),\r\n );\r\n if (centerNumber && commonConfiguration.number) {\r\n centerNumber.textContent = `${i}`;\r\n }\r\n\r\n circleElement.setAttribute(\"data-angel\", i);\r\n circleElement.parentNode.setAttribute(\"aria-valuenow\", i);\r\n\r\n // console.log(i, percent);\r\n if (i === percent) {\r\n cancelAnimationFrame(request);\r\n }\r\n\r\n // return;\r\n };\r\n\r\n requestAnimationFrame(performAnimation);\r\n }\r\n\r\n /**\r\n * Create svg elements\r\n *\r\n * @param {HTMLElement} element\r\n */\r\n _createSVG(element) {\r\n const index = element.getAttribute(\"data-pie-index\");\r\n const json = JSON.parse(element.getAttribute(\"data-pie\"));\r\n\r\n const options = { ...defaultOptions, ...json, index, ...this._globalObj };\r\n\r\n const svg = createNSElement(\"svg\");\r\n\r\n const configSVG = {\r\n role: \"progressbar\",\r\n width: options.size,\r\n height: options.size,\r\n viewBox: \"0 0 100 100\",\r\n \"aria-valuemin\": \"0\",\r\n \"aria-valuemax\": \"100\",\r\n };\r\n\r\n setAttribute(svg, configSVG);\r\n\r\n // colorCircle\r\n if (options.colorCircle) {\r\n svg.appendChild(this._circle(options));\r\n }\r\n\r\n // gradient\r\n if (options.lineargradient) {\r\n svg.appendChild(gradient(options));\r\n }\r\n\r\n svg.appendChild(this._circle(options, \"top\"));\r\n\r\n element.appendChild(svg);\r\n\r\n this._progress(svg, element, options);\r\n }\r\n\r\n /**\r\n * Create circle top/bottom\r\n *\r\n * @param {Object} options\r\n * @param {String} where\r\n * @returns {SVGElement}\r\n */\r\n _circle(options, where = \"bottom\") {\r\n const circle = createNSElement(\"circle\");\r\n\r\n let configCircle = {};\r\n if (options.cut) {\r\n const dashoffset = 264 - (100 - options.cut) * 2.64;\r\n configCircle = {\r\n \"stroke-dashoffset\": options.inverse ? -dashoffset : dashoffset,\r\n style: styleTransform(options),\r\n ...strokeDasharray(),\r\n ...strokeLinecap(options),\r\n };\r\n }\r\n\r\n const objCircle = {\r\n fill: options.fill,\r\n stroke: options.colorCircle,\r\n \"stroke-width\": options.strokeBottom || options.stroke,\r\n ...configCircle,\r\n };\r\n\r\n if (options.strokeDasharray) {\r\n Object.assign(objCircle, { ...strokeDasharray(options.strokeDasharray) });\r\n }\r\n\r\n const typeCircle =\r\n where === \"top\"\r\n ? { class: `${this._className}-circle-${options.index}` }\r\n : objCircle;\r\n\r\n const objConfig = {\r\n cx: \"50%\",\r\n cy: \"50%\",\r\n r: 42,\r\n \"shape-rendering\": \"geometricPrecision\",\r\n ...typeCircle,\r\n };\r\n\r\n setAttribute(circle, objConfig);\r\n\r\n return circle;\r\n }\r\n}\r\n"],"names":["defaultOptions","colorSlice","fontColor","fontSize","fontWeight","lineargradient","number","round","fill","unit","rotation","size","stroke","styleTransform","_ref","animationSmooth","smoothAnimation","strokeDasharray","type","strokeLinecap","_ref2","fontSettings","options","querySelector","element","document","setColor","_ref3","index","setAttribute","object","key","createNSElement","createElementNS","tspan","className","classList","add","textContent","dashOffset","count","inverse","cut","cutChar","angle","insertAdElement","el","insertAdjacentElement","gradient","_ref4","defsElement","linearGradient","id","countGradient","slice","call","appendChild","map","item","stopElements","stopObj","offset","length","percent","creatTextElementSVG","obj","x","y","dy","textPosition","CircularProgressBar","constructor","pieName","globalObj","_className","_globalObj","pieElements","querySelectorAll","elements","idx","JSON","parse","getAttribute","_elements","initial","outside","triggeredOutside","Array","isArray","_createSVG","_progress","svg","target","progressCircle","configCircle","animationTo","previousConfigObj","circleElement","commonConfiguration","fontconfig","textElement","centerNumber","animationOff","Math","request","i","fps","speed","interval","tolerance","then","performance","now","performAnimation","requestAnimationFrame","delta","parentNode","cancelAnimationFrame","json","configSVG","role","width","height","viewBox","colorCircle","_circle","where","circle","dashoffset","style","objCircle","strokeBottom","Object","assign","typeCircle","class","objConfig","cx","cy","r"],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"circularProgressBar.umd.js","sources":["../sources/helpers/defaults.js","../sources/helpers/function.js","../sources/index.js"],"sourcesContent":["/**\r\n * @typedef {Object} - Default object\r\n * @prop {String} [colorSlice] - Progress color circle\r\n * @prop {String} [fontColor] - Font color\r\n * @prop {String} [fontSize] - Font size\r\n * @prop {Number} [fontWeight] - Font weight\r\n * @prop {Array} [linearGradient] - Linear gradien for circle\r\n * @prop {Boolean} [number] - Show/hide number\r\n * @prop {Boolean} [round] - Path rounding\r\n * @prop {String} [fill] - Inner circle color\r\n * @prop {String} [unit] - Different unit instead of percentage (%) inside the circle\r\n * @prop {Number} [rotation] - Chart rotation\r\n * @prop {Number} [size] - Size progress bar width and height in px\r\n * @prop {Number} [stroke] - Stroke width, chart thickness\r\n */\r\n/**\r\n * Returns the default options of the component\r\n * @return {CPBOptions}\r\n */\r\nconst defaultOptions = {\r\n colorSlice: \"#00a1ff\",\r\n fontColor: \"#000\",\r\n fontSize: \"1.6rem\",\r\n fontWeight: 400,\r\n lineargradient: false,\r\n number: true,\r\n round: false,\r\n fill: \"none\",\r\n unit: \"%\",\r\n rotation: -90,\r\n size: 200,\r\n stroke: 10,\r\n};\r\n\r\nexport default defaultOptions;\r\n","/**\r\n *\r\n * @param {Object} object\r\n * @returns {String}\r\n */\r\nconst styleTransform = ({ rotation, animationSmooth }) => {\r\n const smoothAnimation = animationSmooth\r\n ? `transition: stroke-dashoffset ${animationSmooth}`\r\n : \"\";\r\n\r\n return `transform:rotate(${rotation}deg);transform-origin: 50% 50%;${smoothAnimation}`;\r\n};\r\n\r\n/**\r\n * Set \"stroke-dasharray\": \"1, 2\"\r\n * @param {String} type\r\n * @returns {Object}\r\n */\r\nconst strokeDasharray = (type) => {\r\n return {\r\n \"stroke-dasharray\": type || \"264\",\r\n };\r\n};\r\n\r\n/**\r\n * Set type stroke-linecap\r\n * @param {String} round\r\n * @returns {Object}\r\n */\r\nconst strokeLinecap = ({ round }) => {\r\n return {\r\n \"stroke-linecap\": round ? \"round\" : \"\",\r\n };\r\n};\r\n\r\n/**\r\n * Set font sieze/weight\r\n *\r\n * @param {Object} options\r\n * @returns {Object}\r\n */\r\nconst fontSettings = (options) => {\r\n return {\r\n \"font-size\": options.fontSize,\r\n \"font-weight\": options.fontWeight,\r\n };\r\n};\r\n\r\n/**\r\n *\r\n * @param {String} element\r\n * @returns {HTMLElement}\r\n */\r\nconst querySelector = (element) => document.querySelector(element);\r\n\r\n/**\r\n * Set color or linear-gradient\r\n *\r\n * @param {String} element\r\n * @param {Object} object\r\n */\r\nconst setColor = (element, { lineargradient, index, colorSlice }) => {\r\n element.setAttribute(\r\n \"stroke\",\r\n lineargradient ? `url(#linear-${index})` : colorSlice,\r\n );\r\n};\r\n\r\n/**\r\n * Set attribute to specific element\r\n *\r\n * @param {String} element\r\n * @param {Object} object\r\n */\r\nconst setAttribute = (element, object) => {\r\n for (const key in object) {\r\n element?.setAttribute(key, object[key]);\r\n }\r\n};\r\n\r\n/**\r\n * Create svg element\r\n *\r\n * @param {String} type\r\n * @returns {SVGElement}\r\n */\r\nconst createNSElement = (type) =>\r\n document.createElementNS(\"http://www.w3.org/2000/svg\", type);\r\n\r\n/**\r\n * Create svg tspan\r\n *\r\n * @param {String} className\r\n * @param {String} unit\r\n * @returns {HTMLElement}\r\n */\r\nconst tspan = (className, unit) => {\r\n const element = createNSElement(\"tspan\");\r\n\r\n element.classList.add(className);\r\n if (unit) element.textContent = unit;\r\n return element;\r\n};\r\n\r\n/**\r\n * Function generate stroke-dashoffset\r\n *\r\n * @param {Number} count\r\n * @param {Boolean} inverse - Counterclockwise animation\r\n * @param {Number} cut - Angle of the circle sector\r\n * @returns {Number}\r\n */\r\nconst dashOffset = (count, inverse, cut) => {\r\n const cutChar = cut ? (264 / 100) * (100 - cut) : 264;\r\n const angle = 264 - (count / 100) * cutChar;\r\n\r\n // https://github.com/tomickigrzegorz/circular-progress-bar/issues/87\r\n // inverse option is not working in ios safari\r\n // return inverse ? `${264 - angle}` : angle;\r\n return inverse ? -angle : angle;\r\n};\r\n\r\n/**\r\n * @param {HTMLElement} element\r\n * @param {HTMLElement} el\r\n * @param {String} type\r\n */\r\nconst insertAdElement = (element, el, type = \"beforeend\") =>\r\n element.insertAdjacentElement(type, el);\r\n\r\n/**\r\n * Generator function linear-gradient stop svg elements\r\n *\r\n * @param {Object} object\r\n */\r\nconst gradient = ({ index, lineargradient }) => {\r\n const defsElement = createNSElement(\"defs\");\r\n const linearGradient = createNSElement(\"linearGradient\");\r\n linearGradient.id = `linear-${index}`;\r\n\r\n const countGradient = [].slice.call(lineargradient);\r\n\r\n defsElement.appendChild(linearGradient);\r\n\r\n let number = 0;\r\n countGradient.map((item) => {\r\n const stopElements = createNSElement(\"stop\");\r\n\r\n const stopObj = {\r\n offset: `${number}%`,\r\n \"stop-color\": `${item}`,\r\n };\r\n setAttribute(stopElements, stopObj);\r\n\r\n linearGradient.appendChild(stopElements);\r\n number += 100 / (countGradient.length - 1);\r\n });\r\n\r\n return defsElement;\r\n};\r\n\r\n/**\r\n * A function that generates tspan\r\n * elements with a number and unit\r\n *\r\n * @param {Object} options - Global configuration\r\n * @param {String} className\r\n */\r\nconst percent = (options, className) => {\r\n const creatTextElementSVG = createNSElement(\"text\");\r\n\r\n creatTextElementSVG.classList.add(`${className}-text-${options.index}`);\r\n\r\n // create tspan element with number\r\n // and insert to svg text element\r\n insertAdElement(\r\n creatTextElementSVG,\r\n tspan(`${className}-percent-${options.index}`),\r\n );\r\n\r\n // create and insert unit to text element\r\n insertAdElement(\r\n creatTextElementSVG,\r\n tspan(`${className}-unit-${options.index}`, options.unit),\r\n );\r\n\r\n // config to svg text\r\n const obj = {\r\n x: \"50%\",\r\n y: \"50%\",\r\n fill: options.fontColor,\r\n \"text-anchor\": \"middle\",\r\n dy: options.textPosition || \"0.35em\",\r\n ...fontSettings(options),\r\n };\r\n\r\n setAttribute(creatTextElementSVG, obj);\r\n return creatTextElementSVG;\r\n};\r\n\r\nexport {\r\n createNSElement,\r\n dashOffset,\r\n fontSettings,\r\n gradient,\r\n insertAdElement,\r\n percent,\r\n querySelector,\r\n setAttribute,\r\n setColor,\r\n strokeDasharray,\r\n strokeLinecap,\r\n styleTransform,\r\n};\r\n","import defaultOptions from \"./helpers/defaults\";\r\nimport {\r\n createNSElement,\r\n dashOffset,\r\n fontSettings,\r\n gradient,\r\n insertAdElement,\r\n percent,\r\n querySelector,\r\n setAttribute,\r\n setColor,\r\n strokeDasharray,\r\n strokeLinecap,\r\n styleTransform,\r\n} from \"./helpers/function\";\r\n\r\n/**\r\n * @class\r\n */\r\nexport default class CircularProgressBar {\r\n /**\r\n * CircularProgressBar constructor\r\n *\r\n * @param {String} pieName - class name\r\n * @param {Object} globalObj - global configuration\r\n */\r\n constructor(pieName, globalObj = {}) {\r\n this._className = pieName;\r\n this._globalObj = globalObj;\r\n\r\n const pieElements = document.querySelectorAll(`.${pieName}`);\r\n const elements = [].slice.call(pieElements);\r\n // add index to all progressbar\r\n elements.map((item, idx) => {\r\n const id = JSON.parse(item.getAttribute(\"data-pie\"));\r\n item.setAttribute(\r\n \"data-pie-index\",\r\n id.index || globalObj.index || idx + 1,\r\n );\r\n });\r\n\r\n this._elements = elements;\r\n }\r\n\r\n /**\r\n * @param {object} outside\r\n */\r\n initial(outside) {\r\n const triggeredOutside = outside || this._elements;\r\n Array.isArray(triggeredOutside)\r\n ? triggeredOutside.map((element) => this._createSVG(element))\r\n : this._createSVG(triggeredOutside);\r\n }\r\n\r\n /**\r\n * @param {SVGAElement} svg\r\n * @param {HTMLElement} target\r\n * @param {Object} options\r\n */\r\n _progress(svg, target, options) {\r\n const pieName = this._className;\r\n if (options.number) {\r\n insertAdElement(svg, percent(options, pieName));\r\n }\r\n\r\n const progressCircle = querySelector(`.${pieName}-circle-${options.index}`);\r\n\r\n const configCircle = {\r\n fill: \"none\",\r\n \"stroke-width\": options.stroke,\r\n \"stroke-dashoffset\": \"264\",\r\n ...strokeDasharray(),\r\n ...strokeLinecap(options),\r\n };\r\n setAttribute(progressCircle, configCircle);\r\n\r\n // animation progress\r\n this.animationTo({ ...options, element: progressCircle }, true);\r\n\r\n // set style and rotation\r\n progressCircle.setAttribute(\"style\", styleTransform(options));\r\n\r\n // set color\r\n setColor(progressCircle, options);\r\n\r\n // set width and height on div\r\n target.setAttribute(\r\n \"style\",\r\n `width:${options.size}px;height:${options.size}px;`,\r\n );\r\n }\r\n\r\n /**\r\n * Callback function\r\n *\r\n * @param {Object} options\r\n * @param {Boolean} initial\r\n */\r\n animationTo(options, initial = false) {\r\n const pieName = this._className;\r\n const previousConfigObj = JSON.parse(\r\n querySelector(`[data-pie-index=\"${options.index}\"]`).getAttribute(\r\n \"data-pie\",\r\n ),\r\n );\r\n\r\n const circleElement = querySelector(`.${pieName}-circle-${options.index}`);\r\n\r\n if (!circleElement) return;\r\n\r\n // merging all configuration objects\r\n const commonConfiguration = initial\r\n ? options\r\n : {\r\n ...defaultOptions,\r\n ...previousConfigObj,\r\n ...options,\r\n ...this._globalObj,\r\n };\r\n\r\n // update color circle\r\n if (!initial) {\r\n setColor(circleElement, commonConfiguration);\r\n }\r\n\r\n // font color update\r\n if (!initial && commonConfiguration.number) {\r\n const fontconfig = {\r\n fill: commonConfiguration.fontColor,\r\n ...fontSettings(commonConfiguration),\r\n };\r\n const textElement = querySelector(\r\n `.${pieName}-text-${commonConfiguration.index}`,\r\n );\r\n setAttribute(textElement, fontconfig);\r\n }\r\n\r\n const centerNumber = querySelector(`.${pieName}-percent-${options.index}`);\r\n\r\n if (commonConfiguration.animationOff) {\r\n if (commonConfiguration.number)\r\n centerNumber.textContent = `${commonConfiguration.percent}`;\r\n circleElement.setAttribute(\r\n \"stroke-dashoffset\",\r\n dashOffset(commonConfiguration.percent, commonConfiguration.inverse),\r\n );\r\n return;\r\n }\r\n\r\n // get numer percent from data-angel\r\n let angle = JSON.parse(circleElement.getAttribute(\"data-angel\"));\r\n\r\n // round if number is decimal\r\n const percent = Math.round(options.percent);\r\n\r\n // if percent 0 then set at start 0%\r\n if (percent === 0) {\r\n if (commonConfiguration.number) centerNumber.textContent = \"0\";\r\n circleElement.setAttribute(\"stroke-dashoffset\", \"264\");\r\n }\r\n\r\n if (percent > 100 || percent < 0 || angle === percent) return;\r\n\r\n let request;\r\n let i = initial ? 0 : angle;\r\n\r\n const fps = commonConfiguration.speed || 1000;\r\n const interval = 1000 / fps;\r\n const tolerance = 0.1;\r\n let then = performance.now();\r\n\r\n const performAnimation = (now) => {\r\n request = requestAnimationFrame(performAnimation);\r\n const delta = now - then;\r\n\r\n if (delta >= interval - tolerance) {\r\n then = now - (delta % interval);\r\n\r\n // angle >= commonConfiguration.percent ? i-- : i++;\r\n i = i < commonConfiguration.percent ? i + 1 : i - 1;\r\n }\r\n\r\n circleElement.setAttribute(\r\n \"stroke-dashoffset\",\r\n dashOffset(i, commonConfiguration.inverse, commonConfiguration.cut),\r\n );\r\n if (centerNumber && commonConfiguration.number) {\r\n centerNumber.textContent = `${i}`;\r\n }\r\n\r\n circleElement.setAttribute(\"data-angel\", i);\r\n circleElement.parentNode.setAttribute(\"aria-valuenow\", i);\r\n\r\n if (i === percent) {\r\n cancelAnimationFrame(request);\r\n }\r\n\r\n // return;\r\n };\r\n\r\n requestAnimationFrame(performAnimation);\r\n }\r\n\r\n /**\r\n * Create svg elements\r\n *\r\n * @param {HTMLElement} element\r\n */\r\n _createSVG(element) {\r\n const index = element.getAttribute(\"data-pie-index\");\r\n const json = JSON.parse(element.getAttribute(\"data-pie\"));\r\n\r\n const options = { ...defaultOptions, ...json, index, ...this._globalObj };\r\n\r\n const svg = createNSElement(\"svg\");\r\n\r\n const configSVG = {\r\n role: \"progressbar\",\r\n width: options.size,\r\n height: options.size,\r\n viewBox: \"0 0 100 100\",\r\n \"aria-valuemin\": \"0\",\r\n \"aria-valuemax\": \"100\",\r\n };\r\n\r\n setAttribute(svg, configSVG);\r\n\r\n // colorCircle\r\n if (options.colorCircle) {\r\n svg.appendChild(this._circle(options));\r\n }\r\n\r\n // gradient\r\n if (options.lineargradient) {\r\n svg.appendChild(gradient(options));\r\n }\r\n\r\n svg.appendChild(this._circle(options, \"top\"));\r\n\r\n element.appendChild(svg);\r\n\r\n this._progress(svg, element, options);\r\n }\r\n\r\n /**\r\n * Create circle top/bottom\r\n *\r\n * @param {Object} options\r\n * @param {String} where\r\n * @returns {SVGElement}\r\n */\r\n _circle(options, where = \"bottom\") {\r\n const circle = createNSElement(\"circle\");\r\n\r\n let configCircle = {};\r\n if (options.cut) {\r\n const dashoffset = 264 - (100 - options.cut) * 2.64;\r\n configCircle = {\r\n \"stroke-dashoffset\": options.inverse ? -dashoffset : dashoffset,\r\n style: styleTransform(options),\r\n ...strokeDasharray(),\r\n ...strokeLinecap(options),\r\n };\r\n }\r\n\r\n const objCircle = {\r\n fill: options.fill,\r\n stroke: options.colorCircle,\r\n \"stroke-width\": options.strokeBottom || options.stroke,\r\n ...configCircle,\r\n };\r\n\r\n if (options.strokeDasharray) {\r\n Object.assign(objCircle, { ...strokeDasharray(options.strokeDasharray) });\r\n }\r\n\r\n const typeCircle =\r\n where === \"top\"\r\n ? { class: `${this._className}-circle-${options.index}` }\r\n : objCircle;\r\n\r\n const objConfig = {\r\n cx: \"50%\",\r\n cy: \"50%\",\r\n r: 42,\r\n \"shape-rendering\": \"geometricPrecision\",\r\n ...typeCircle,\r\n };\r\n\r\n setAttribute(circle, objConfig);\r\n\r\n return circle;\r\n }\r\n}\r\n"],"names":["defaultOptions","colorSlice","fontColor","fontSize","fontWeight","lineargradient","number","round","fill","unit","rotation","size","stroke","styleTransform","_ref","animationSmooth","smoothAnimation","strokeDasharray","type","strokeLinecap","_ref2","fontSettings","options","querySelector","element","document","setColor","_ref3","index","setAttribute","object","key","createNSElement","createElementNS","tspan","className","classList","add","textContent","dashOffset","count","inverse","cut","cutChar","angle","insertAdElement","el","insertAdjacentElement","gradient","_ref4","defsElement","linearGradient","id","countGradient","slice","call","appendChild","map","item","stopElements","stopObj","offset","length","percent","creatTextElementSVG","obj","x","y","dy","textPosition","CircularProgressBar","constructor","pieName","globalObj","_className","_globalObj","pieElements","querySelectorAll","elements","idx","JSON","parse","getAttribute","_elements","initial","outside","triggeredOutside","Array","isArray","_createSVG","_progress","svg","target","progressCircle","configCircle","animationTo","previousConfigObj","circleElement","commonConfiguration","fontconfig","textElement","centerNumber","animationOff","Math","request","i","fps","speed","interval","tolerance","then","performance","now","performAnimation","requestAnimationFrame","delta","parentNode","cancelAnimationFrame","json","configSVG","role","width","height","viewBox","colorCircle","_circle","where","circle","dashoffset","style","objCircle","strokeBottom","Object","assign","typeCircle","class","objConfig","cx","cy","r"],"mappings":"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"} \ No newline at end of file diff --git a/dist/circularProgressBar.umd.min.js b/dist/circularProgressBar.umd.min.js index 73139c1..e5798c5 100644 --- a/dist/circularProgressBar.umd.min.js +++ b/dist/circularProgressBar.umd.min.js @@ -1 +1 @@ -!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).CircularProgressBar=e()}(this,(function(){"use strict";const t={colorSlice:"#00a1ff",fontColor:"#000",fontSize:"1.6rem",fontWeight:400,lineargradient:!1,number:!0,round:!1,fill:"none",unit:"%",rotation:-90,size:200,stroke:10},e=t=>{let{rotation:e,animationSmooth:n}=t;return`transform:rotate(${e}deg);transform-origin: 50% 50%;${n?`transition: stroke-dashoffset ${n}`:""}`},n=t=>({"stroke-dasharray":t||"264"}),o=t=>{let{round:e}=t;return{"stroke-linecap":e?"round":""}},i=t=>({"font-size":t.fontSize,"font-weight":t.fontWeight}),r=t=>document.querySelector(t),s=(t,e)=>{let{lineargradient:n,index:o,colorSlice:i}=e;t.setAttribute("stroke",n?`url(#linear-${o})`:i)},a=(t,e)=>{for(const n in e)t?.setAttribute(n,e[n])},c=t=>document.createElementNS("http://www.w3.org/2000/svg",t),l=(t,e)=>{const n=c("tspan");return n.classList.add(t),e&&(n.textContent=e),n},d=(t,e,n)=>{const o=264-t/100*(n?2.64*(100-n):264);return e?-o:o},f=function(t,e,n){return void 0===n&&(n="beforeend"),t.insertAdjacentElement(n,e)};return class{constructor(t,e){void 0===e&&(e={}),this.t=t,this.o=e;const n=document.querySelectorAll(`.${t}`),o=[].slice.call(n);o.map(((t,n)=>{const o=JSON.parse(t.getAttribute("data-pie"));t.setAttribute("data-pie-index",o.index||e.index||n+1)})),this.i=o}initial(t){const e=t||this.i;Array.isArray(e)?e.map((t=>this.l(t))):this.l(e)}h(t,d,h){const u=this.t;h.number&&f(t,((t,e)=>{const n=c("text");n.classList.add(`${e}-text-${t.index}`),f(n,l(`${e}-percent-${t.index}`)),f(n,l(`${e}-unit-${t.index}`,t.unit));const o={x:"50%",y:"50%",fill:t.fontColor,"text-anchor":"middle",dy:t.textPosition||"0.35em",...i(t)};return a(n,o),n})(h,u));const $=r(`.${u}-circle-${h.index}`),m={fill:"none","stroke-width":h.stroke,"stroke-dashoffset":"264",...n(),...o(h)};a($,m),this.animationTo({...h,element:$},!0),$.setAttribute("style",e(h)),s($,h),d.setAttribute("style",`width:${h.size}px;height:${h.size}px;`)}animationTo(e,n){void 0===n&&(n=!1);const o=this.t,c=JSON.parse(r(`[data-pie-index="${e.index}"]`).getAttribute("data-pie")),l=r(`.${o}-circle-${e.index}`);if(!l)return;const f=n?e:{...t,...c,...e,...this.o};if(n||s(l,f),!n&&f.number){const t={fill:f.fontColor,...i(f)},e=r(`.${o}-text-${f.index}`);a(e,t)}const h=r(`.${o}-percent-${e.index}`);if(f.animationOff)return f.number&&(h.textContent=`${f.percent}`),void l.setAttribute("stroke-dashoffset",d(f.percent,f.inverse));let u=JSON.parse(l.getAttribute("data-angel"));const $=Math.round(e.percent);if(0===$&&(f.number&&(h.textContent="0"),l.setAttribute("stroke-dashoffset","264")),$>100||$<=0||u===$)return;let m,p=n?0:u;const g=1e3/(f.speed||1e3);let x=performance.now();const k=t=>{m=requestAnimationFrame(k);const e=t-x;e>=g-.1&&(x=t-e%g,u>=f.percent?p--:p++),l.setAttribute("stroke-dashoffset",d(p,f.inverse,f.cut)),h&&f.number&&(h.textContent=`${p}`),l.setAttribute("data-angel",p),l.parentNode.setAttribute("aria-valuenow",p),p===$&&cancelAnimationFrame(m)};requestAnimationFrame(k)}l(e){const n=e.getAttribute("data-pie-index"),o=JSON.parse(e.getAttribute("data-pie")),i={...t,...o,index:n,...this.o},r=c("svg"),s={role:"progressbar",width:i.size,height:i.size,viewBox:"0 0 100 100","aria-valuemin":"0","aria-valuemax":"100"};a(r,s),i.colorCircle&&r.appendChild(this.u(i)),i.lineargradient&&r.appendChild((t=>{let{index:e,lineargradient:n}=t;const o=c("defs"),i=c("linearGradient");i.id=`linear-${e}`;const r=[].slice.call(n);o.appendChild(i);let s=0;return r.map((t=>{const e=c("stop");a(e,{offset:`${s}%`,"stop-color":`${t}`}),i.appendChild(e),s+=100/(r.length-1)})),o})(i)),r.appendChild(this.u(i,"top")),e.appendChild(r),this.h(r,e,i)}u(t,i){void 0===i&&(i="bottom");const r=c("circle");let s={};if(t.cut){const i=264-2.64*(100-t.cut);s={"stroke-dashoffset":t.inverse?-i:i,style:e(t),...n(),...o(t)}}const l={fill:t.fill,stroke:t.colorCircle,"stroke-width":t.strokeBottom||t.stroke,...s};t.strokeDasharray&&Object.assign(l,{...n(t.strokeDasharray)});const d={cx:"50%",cy:"50%",r:42,"shape-rendering":"geometricPrecision",..."top"===i?{class:`${this.t}-circle-${t.index}`}:l};return a(r,d),r}}})); +!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).CircularProgressBar=e()}(this,(function(){"use strict";const t={colorSlice:"#00a1ff",fontColor:"#000",fontSize:"1.6rem",fontWeight:400,lineargradient:!1,number:!0,round:!1,fill:"none",unit:"%",rotation:-90,size:200,stroke:10},e=t=>{let{rotation:e,animationSmooth:n}=t;return`transform:rotate(${e}deg);transform-origin: 50% 50%;${n?`transition: stroke-dashoffset ${n}`:""}`},n=t=>({"stroke-dasharray":t||"264"}),o=t=>{let{round:e}=t;return{"stroke-linecap":e?"round":""}},i=t=>({"font-size":t.fontSize,"font-weight":t.fontWeight}),r=t=>document.querySelector(t),s=(t,e)=>{let{lineargradient:n,index:o,colorSlice:i}=e;t.setAttribute("stroke",n?`url(#linear-${o})`:i)},a=(t,e)=>{for(const n in e)t?.setAttribute(n,e[n])},c=t=>document.createElementNS("http://www.w3.org/2000/svg",t),l=(t,e)=>{const n=c("tspan");return n.classList.add(t),e&&(n.textContent=e),n},d=(t,e,n)=>{const o=264-t/100*(n?2.64*(100-n):264);return e?-o:o},f=function(t,e,n){return void 0===n&&(n="beforeend"),t.insertAdjacentElement(n,e)};return class{constructor(t,e){void 0===e&&(e={}),this.t=t,this.o=e;const n=document.querySelectorAll(`.${t}`),o=[].slice.call(n);o.map(((t,n)=>{const o=JSON.parse(t.getAttribute("data-pie"));t.setAttribute("data-pie-index",o.index||e.index||n+1)})),this.i=o}initial(t){const e=t||this.i;Array.isArray(e)?e.map((t=>this.l(t))):this.l(e)}h(t,d,h){const u=this.t;h.number&&f(t,((t,e)=>{const n=c("text");n.classList.add(`${e}-text-${t.index}`),f(n,l(`${e}-percent-${t.index}`)),f(n,l(`${e}-unit-${t.index}`,t.unit));const o={x:"50%",y:"50%",fill:t.fontColor,"text-anchor":"middle",dy:t.textPosition||"0.35em",...i(t)};return a(n,o),n})(h,u));const $=r(`.${u}-circle-${h.index}`),m={fill:"none","stroke-width":h.stroke,"stroke-dashoffset":"264",...n(),...o(h)};a($,m),this.animationTo({...h,element:$},!0),$.setAttribute("style",e(h)),s($,h),d.setAttribute("style",`width:${h.size}px;height:${h.size}px;`)}animationTo(e,n){void 0===n&&(n=!1);const o=this.t,c=JSON.parse(r(`[data-pie-index="${e.index}"]`).getAttribute("data-pie")),l=r(`.${o}-circle-${e.index}`);if(!l)return;const f=n?e:{...t,...c,...e,...this.o};if(n||s(l,f),!n&&f.number){const t={fill:f.fontColor,...i(f)},e=r(`.${o}-text-${f.index}`);a(e,t)}const h=r(`.${o}-percent-${e.index}`);if(f.animationOff)return f.number&&(h.textContent=`${f.percent}`),void l.setAttribute("stroke-dashoffset",d(f.percent,f.inverse));let u=JSON.parse(l.getAttribute("data-angel"));const $=Math.round(e.percent);if(0===$&&(f.number&&(h.textContent="0"),l.setAttribute("stroke-dashoffset","264")),$>100||$<0||u===$)return;let m,p=n?0:u;const g=1e3/(f.speed||1e3);let x=performance.now();const k=t=>{m=requestAnimationFrame(k);const e=t-x;e>=g-.1&&(x=t-e%g,p=p{let{index:e,lineargradient:n}=t;const o=c("defs"),i=c("linearGradient");i.id=`linear-${e}`;const r=[].slice.call(n);o.appendChild(i);let s=0;return r.map((t=>{const e=c("stop");a(e,{offset:`${s}%`,"stop-color":`${t}`}),i.appendChild(e),s+=100/(r.length-1)})),o})(i)),r.appendChild(this.u(i,"top")),e.appendChild(r),this.h(r,e,i)}u(t,i){void 0===i&&(i="bottom");const r=c("circle");let s={};if(t.cut){const i=264-2.64*(100-t.cut);s={"stroke-dashoffset":t.inverse?-i:i,style:e(t),...n(),...o(t)}}const l={fill:t.fill,stroke:t.colorCircle,"stroke-width":t.strokeBottom||t.stroke,...s};t.strokeDasharray&&Object.assign(l,{...n(t.strokeDasharray)});const d={cx:"50%",cy:"50%",r:42,"shape-rendering":"geometricPrecision",..."top"===i?{class:`${this.t}-circle-${t.index}`}:l};return a(r,d),r}}})); diff --git a/docs/circularProgressBar.min.js b/docs/circularProgressBar.min.js index e950e72..319d212 100644 --- a/docs/circularProgressBar.min.js +++ b/docs/circularProgressBar.min.js @@ -1,2 +1,2 @@ -var CircularProgressBar=function(){"use strict";const t={colorSlice:"#00a1ff",fontColor:"#000",fontSize:"1.6rem",fontWeight:400,lineargradient:!1,number:!0,round:!1,fill:"none",unit:"%",rotation:-90,size:200,stroke:10},e=t=>{let{rotation:e,animationSmooth:n}=t;return`transform:rotate(${e}deg);transform-origin: 50% 50%;${n?`transition: stroke-dashoffset ${n}`:""}`},n=t=>({"stroke-dasharray":t||"264"}),o=t=>{let{round:e}=t;return{"stroke-linecap":e?"round":""}},r=t=>({"font-size":t.fontSize,"font-weight":t.fontWeight}),i=t=>document.querySelector(t),s=(t,e)=>{let{lineargradient:n,index:o,colorSlice:r}=e;t.setAttribute("stroke",n?`url(#linear-${o})`:r)},a=(t,e)=>{for(const n in e)t?.setAttribute(n,e[n])},c=t=>document.createElementNS("http://www.w3.org/2000/svg",t),l=(t,e)=>{const n=c("tspan");return n.classList.add(t),e&&(n.textContent=e),n},d=(t,e,n)=>{const o=264-t/100*(n?2.64*(100-n):264);return e?-o:o},f=function(t,e,n){return void 0===n&&(n="beforeend"),t.insertAdjacentElement(n,e)};return class{constructor(t,e){void 0===e&&(e={}),this.t=t,this.o=e;const n=document.querySelectorAll(`.${t}`),o=[].slice.call(n);o.map(((t,n)=>{const o=JSON.parse(t.getAttribute("data-pie"));t.setAttribute("data-pie-index",o.index||e.index||n+1)})),this.i=o}initial(t){const e=t||this.i;Array.isArray(e)?e.map((t=>this.l(t))):this.l(e)}h(t,d,h){const u=this.t;h.number&&f(t,((t,e)=>{const n=c("text");n.classList.add(`${e}-text-${t.index}`),f(n,l(`${e}-percent-${t.index}`)),f(n,l(`${e}-unit-${t.index}`,t.unit));const o={x:"50%",y:"50%",fill:t.fontColor,"text-anchor":"middle",dy:t.textPosition||"0.35em",...r(t)};return a(n,o),n})(h,u));const $=i(`.${u}-circle-${h.index}`),m={fill:"none","stroke-width":h.stroke,"stroke-dashoffset":"264",...n(),...o(h)};a($,m),this.animationTo({...h,element:$},!0),$.setAttribute("style",e(h)),s($,h),d.setAttribute("style",`width:${h.size}px;height:${h.size}px;`)}animationTo(e,n){void 0===n&&(n=!1);const o=this.t,c=JSON.parse(i(`[data-pie-index="${e.index}"]`).getAttribute("data-pie")),l=i(`.${o}-circle-${e.index}`);if(!l)return;const f=n?e:{...t,...c,...e,...this.o};if(n||s(l,f),!n&&f.number){const t={fill:f.fontColor,...r(f)},e=i(`.${o}-text-${f.index}`);a(e,t)}const h=i(`.${o}-percent-${e.index}`);if(f.animationOff)return f.number&&(h.textContent=`${f.percent}`),void l.setAttribute("stroke-dashoffset",d(f.percent,f.inverse));let u=JSON.parse(l.getAttribute("data-angel"));const $=Math.round(e.percent);if(0===$&&(f.number&&(h.textContent="0"),l.setAttribute("stroke-dashoffset","264")),$>100||$<=0||u===$)return;let m,p=n?0:u;const g=1e3/(f.speed||1e3);let x=performance.now();const k=t=>{m=requestAnimationFrame(k);const e=t-x;e>=g-.1&&(x=t-e%g,u>=f.percent?p--:p++),l.setAttribute("stroke-dashoffset",d(p,f.inverse,f.cut)),h&&f.number&&(h.textContent=`${p}`),l.setAttribute("data-angel",p),l.parentNode.setAttribute("aria-valuenow",p),p===$&&cancelAnimationFrame(m)};requestAnimationFrame(k)}l(e){const n=e.getAttribute("data-pie-index"),o=JSON.parse(e.getAttribute("data-pie")),r={...t,...o,index:n,...this.o},i=c("svg"),s={role:"progressbar",width:r.size,height:r.size,viewBox:"0 0 100 100","aria-valuemin":"0","aria-valuemax":"100"};a(i,s),r.colorCircle&&i.appendChild(this.u(r)),r.lineargradient&&i.appendChild((t=>{let{index:e,lineargradient:n}=t;const o=c("defs"),r=c("linearGradient");r.id=`linear-${e}`;const i=[].slice.call(n);o.appendChild(r);let s=0;return i.map((t=>{const e=c("stop");a(e,{offset:`${s}%`,"stop-color":`${t}`}),r.appendChild(e),s+=100/(i.length-1)})),o})(r)),i.appendChild(this.u(r,"top")),e.appendChild(i),this.h(i,e,r)}u(t,r){void 0===r&&(r="bottom");const i=c("circle");let s={};if(t.cut){const r=264-2.64*(100-t.cut);s={"stroke-dashoffset":t.inverse?-r:r,style:e(t),...n(),...o(t)}}const l={fill:t.fill,stroke:t.colorCircle,"stroke-width":t.strokeBottom||t.stroke,...s};t.strokeDasharray&&Object.assign(l,{...n(t.strokeDasharray)});const d={cx:"50%",cy:"50%",r:42,"shape-rendering":"geometricPrecision",..."top"===r?{class:`${this.t}-circle-${t.index}`}:l};return a(i,d),i}}}(); +var CircularProgressBar=function(){"use strict";const t={colorSlice:"#00a1ff",fontColor:"#000",fontSize:"1.6rem",fontWeight:400,lineargradient:!1,number:!0,round:!1,fill:"none",unit:"%",rotation:-90,size:200,stroke:10},e=t=>{let{rotation:e,animationSmooth:n}=t;return`transform:rotate(${e}deg);transform-origin: 50% 50%;${n?`transition: stroke-dashoffset ${n}`:""}`},n=t=>({"stroke-dasharray":t||"264"}),o=t=>{let{round:e}=t;return{"stroke-linecap":e?"round":""}},r=t=>({"font-size":t.fontSize,"font-weight":t.fontWeight}),i=t=>document.querySelector(t),s=(t,e)=>{let{lineargradient:n,index:o,colorSlice:r}=e;t.setAttribute("stroke",n?`url(#linear-${o})`:r)},a=(t,e)=>{for(const n in e)t?.setAttribute(n,e[n])},c=t=>document.createElementNS("http://www.w3.org/2000/svg",t),l=(t,e)=>{const n=c("tspan");return n.classList.add(t),e&&(n.textContent=e),n},d=(t,e,n)=>{const o=264-t/100*(n?2.64*(100-n):264);return e?-o:o},f=function(t,e,n){return void 0===n&&(n="beforeend"),t.insertAdjacentElement(n,e)};return class{constructor(t,e){void 0===e&&(e={}),this.t=t,this.o=e;const n=document.querySelectorAll(`.${t}`),o=[].slice.call(n);o.map(((t,n)=>{const o=JSON.parse(t.getAttribute("data-pie"));t.setAttribute("data-pie-index",o.index||e.index||n+1)})),this.i=o}initial(t){const e=t||this.i;Array.isArray(e)?e.map((t=>this.l(t))):this.l(e)}h(t,d,h){const u=this.t;h.number&&f(t,((t,e)=>{const n=c("text");n.classList.add(`${e}-text-${t.index}`),f(n,l(`${e}-percent-${t.index}`)),f(n,l(`${e}-unit-${t.index}`,t.unit));const o={x:"50%",y:"50%",fill:t.fontColor,"text-anchor":"middle",dy:t.textPosition||"0.35em",...r(t)};return a(n,o),n})(h,u));const $=i(`.${u}-circle-${h.index}`),m={fill:"none","stroke-width":h.stroke,"stroke-dashoffset":"264",...n(),...o(h)};a($,m),this.animationTo({...h,element:$},!0),$.setAttribute("style",e(h)),s($,h),d.setAttribute("style",`width:${h.size}px;height:${h.size}px;`)}animationTo(e,n){void 0===n&&(n=!1);const o=this.t,c=JSON.parse(i(`[data-pie-index="${e.index}"]`).getAttribute("data-pie")),l=i(`.${o}-circle-${e.index}`);if(!l)return;const f=n?e:{...t,...c,...e,...this.o};if(n||s(l,f),!n&&f.number){const t={fill:f.fontColor,...r(f)},e=i(`.${o}-text-${f.index}`);a(e,t)}const h=i(`.${o}-percent-${e.index}`);if(f.animationOff)return f.number&&(h.textContent=`${f.percent}`),void l.setAttribute("stroke-dashoffset",d(f.percent,f.inverse));let u=JSON.parse(l.getAttribute("data-angel"));const $=Math.round(e.percent);if(0===$&&(f.number&&(h.textContent="0"),l.setAttribute("stroke-dashoffset","264")),$>100||$<0||u===$)return;let m,p=n?0:u;const g=1e3/(f.speed||1e3);let x=performance.now();const k=t=>{m=requestAnimationFrame(k);const e=t-x;e>=g-.1&&(x=t-e%g,p=p{let{index:e,lineargradient:n}=t;const o=c("defs"),r=c("linearGradient");r.id=`linear-${e}`;const i=[].slice.call(n);o.appendChild(r);let s=0;return i.map((t=>{const e=c("stop");a(e,{offset:`${s}%`,"stop-color":`${t}`}),r.appendChild(e),s+=100/(i.length-1)})),o})(r)),i.appendChild(this.u(r,"top")),e.appendChild(i),this.h(i,e,r)}u(t,r){void 0===r&&(r="bottom");const i=c("circle");let s={};if(t.cut){const r=264-2.64*(100-t.cut);s={"stroke-dashoffset":t.inverse?-r:r,style:e(t),...n(),...o(t)}}const l={fill:t.fill,stroke:t.colorCircle,"stroke-width":t.strokeBottom||t.stroke,...s};t.strokeDasharray&&Object.assign(l,{...n(t.strokeDasharray)});const d={cx:"50%",cy:"50%",r:42,"shape-rendering":"geometricPrecision",..."top"===r?{class:`${this.t}-circle-${t.index}`}:l};return a(i,d),i}}}(); //# sourceMappingURL=circularProgressBar.min.js.map diff --git a/docs/circularProgressBar.min.js.map b/docs/circularProgressBar.min.js.map index 9142ec2..31c7132 100644 --- a/docs/circularProgressBar.min.js.map +++ b/docs/circularProgressBar.min.js.map @@ -1 +1 @@ -{"version":3,"file":"circularProgressBar.min.js","sources":["../sources/helpers/defaults.js","../sources/helpers/function.js","../sources/index.js"],"sourcesContent":["/**\r\n * @typedef {Object} - Default object\r\n * @prop {String} [colorSlice] - Progress color circle\r\n * @prop {String} [fontColor] - Font color\r\n * @prop {String} [fontSize] - Font size\r\n * @prop {Number} [fontWeight] - Font weight\r\n * @prop {Array} [linearGradient] - Linear gradien for circle\r\n * @prop {Boolean} [number] - Show/hide number\r\n * @prop {Boolean} [round] - Path rounding\r\n * @prop {String} [fill] - Inner circle color\r\n * @prop {String} [unit] - Different unit instead of percentage (%) inside the circle\r\n * @prop {Number} [rotation] - Chart rotation\r\n * @prop {Number} [size] - Size progress bar width and height in px\r\n * @prop {Number} [stroke] - Stroke width, chart thickness\r\n */\r\n/**\r\n * Returns the default options of the component\r\n * @return {CPBOptions}\r\n */\r\nconst defaultOptions = {\r\n colorSlice: \"#00a1ff\",\r\n fontColor: \"#000\",\r\n fontSize: \"1.6rem\",\r\n fontWeight: 400,\r\n lineargradient: false,\r\n number: true,\r\n round: false,\r\n fill: \"none\",\r\n unit: \"%\",\r\n rotation: -90,\r\n size: 200,\r\n stroke: 10,\r\n};\r\n\r\nexport default defaultOptions;\r\n","/**\r\n *\r\n * @param {Object} object\r\n * @returns {String}\r\n */\r\nconst styleTransform = ({ rotation, animationSmooth }) => {\r\n const smoothAnimation = animationSmooth\r\n ? `transition: stroke-dashoffset ${animationSmooth}`\r\n : \"\";\r\n\r\n return `transform:rotate(${rotation}deg);transform-origin: 50% 50%;${smoothAnimation}`;\r\n};\r\n\r\n/**\r\n * Set \"stroke-dasharray\": \"1, 2\"\r\n * @param {String} type\r\n * @returns {Object}\r\n */\r\nconst strokeDasharray = (type) => {\r\n return {\r\n \"stroke-dasharray\": type || \"264\",\r\n };\r\n};\r\n\r\n/**\r\n * Set type stroke-linecap\r\n * @param {String} round\r\n * @returns {Object}\r\n */\r\nconst strokeLinecap = ({ round }) => {\r\n return {\r\n \"stroke-linecap\": round ? \"round\" : \"\",\r\n };\r\n};\r\n\r\n/**\r\n * Set font sieze/weight\r\n *\r\n * @param {Object} options\r\n * @returns {Object}\r\n */\r\nconst fontSettings = (options) => {\r\n return {\r\n \"font-size\": options.fontSize,\r\n \"font-weight\": options.fontWeight,\r\n };\r\n};\r\n\r\n/**\r\n *\r\n * @param {String} element\r\n * @returns {HTMLElement}\r\n */\r\nconst querySelector = (element) => document.querySelector(element);\r\n\r\n/**\r\n * Set color or linear-gradient\r\n *\r\n * @param {String} element\r\n * @param {Object} object\r\n */\r\nconst setColor = (element, { lineargradient, index, colorSlice }) => {\r\n element.setAttribute(\r\n \"stroke\",\r\n lineargradient ? `url(#linear-${index})` : colorSlice,\r\n );\r\n};\r\n\r\n/**\r\n * Set attribute to specific element\r\n *\r\n * @param {String} element\r\n * @param {Object} object\r\n */\r\nconst setAttribute = (element, object) => {\r\n for (const key in object) {\r\n element?.setAttribute(key, object[key]);\r\n }\r\n};\r\n\r\n/**\r\n * Create svg element\r\n *\r\n * @param {String} type\r\n * @returns {SVGElement}\r\n */\r\nconst createNSElement = (type) =>\r\n document.createElementNS(\"http://www.w3.org/2000/svg\", type);\r\n\r\n/**\r\n * Create svg tspan\r\n *\r\n * @param {String} className\r\n * @param {String} unit\r\n * @returns {HTMLElement}\r\n */\r\nconst tspan = (className, unit) => {\r\n const element = createNSElement(\"tspan\");\r\n\r\n element.classList.add(className);\r\n if (unit) element.textContent = unit;\r\n return element;\r\n};\r\n\r\n/**\r\n * Function generate stroke-dashoffset\r\n *\r\n * @param {Number} count\r\n * @param {Boolean} inverse - Counterclockwise animation\r\n * @param {Number} cut - Angle of the circle sector\r\n * @returns {Number}\r\n */\r\nconst dashOffset = (count, inverse, cut) => {\r\n const cutChar = cut ? (264 / 100) * (100 - cut) : 264;\r\n const angle = 264 - (count / 100) * cutChar;\r\n\r\n // https://github.com/tomickigrzegorz/circular-progress-bar/issues/87\r\n // inverse option is not working in ios safari\r\n // return inverse ? `${264 - angle}` : angle;\r\n return inverse ? -angle : angle;\r\n};\r\n\r\n/**\r\n * @param {HTMLElement} element\r\n * @param {HTMLElement} el\r\n * @param {String} type\r\n */\r\nconst insertAdElement = (element, el, type = \"beforeend\") =>\r\n element.insertAdjacentElement(type, el);\r\n\r\n/**\r\n * Generator function linear-gradient stop svg elements\r\n *\r\n * @param {Object} object\r\n */\r\nconst gradient = ({ index, lineargradient }) => {\r\n const defsElement = createNSElement(\"defs\");\r\n const linearGradient = createNSElement(\"linearGradient\");\r\n linearGradient.id = `linear-${index}`;\r\n\r\n const countGradient = [].slice.call(lineargradient);\r\n\r\n defsElement.appendChild(linearGradient);\r\n\r\n let number = 0;\r\n countGradient.map((item) => {\r\n const stopElements = createNSElement(\"stop\");\r\n\r\n const stopObj = {\r\n offset: `${number}%`,\r\n \"stop-color\": `${item}`,\r\n };\r\n setAttribute(stopElements, stopObj);\r\n\r\n linearGradient.appendChild(stopElements);\r\n number += 100 / (countGradient.length - 1);\r\n });\r\n\r\n return defsElement;\r\n};\r\n\r\n/**\r\n * A function that generates tspan\r\n * elements with a number and unit\r\n *\r\n * @param {Object} options - Global configuration\r\n * @param {String} className\r\n */\r\nconst percent = (options, className) => {\r\n const creatTextElementSVG = createNSElement(\"text\");\r\n\r\n creatTextElementSVG.classList.add(`${className}-text-${options.index}`);\r\n\r\n // create tspan element with number\r\n // and insert to svg text element\r\n insertAdElement(\r\n creatTextElementSVG,\r\n tspan(`${className}-percent-${options.index}`),\r\n );\r\n\r\n // create and insert unit to text element\r\n insertAdElement(\r\n creatTextElementSVG,\r\n tspan(`${className}-unit-${options.index}`, options.unit),\r\n );\r\n\r\n // config to svg text\r\n const obj = {\r\n x: \"50%\",\r\n y: \"50%\",\r\n fill: options.fontColor,\r\n \"text-anchor\": \"middle\",\r\n dy: options.textPosition || \"0.35em\",\r\n ...fontSettings(options),\r\n };\r\n\r\n setAttribute(creatTextElementSVG, obj);\r\n return creatTextElementSVG;\r\n};\r\n\r\nexport {\r\n createNSElement,\r\n dashOffset,\r\n fontSettings,\r\n gradient,\r\n insertAdElement,\r\n percent,\r\n querySelector,\r\n setAttribute,\r\n setColor,\r\n strokeDasharray,\r\n strokeLinecap,\r\n styleTransform,\r\n};\r\n","import defaultOptions from \"./helpers/defaults\";\r\nimport {\r\n createNSElement,\r\n dashOffset,\r\n fontSettings,\r\n gradient,\r\n insertAdElement,\r\n percent,\r\n querySelector,\r\n setAttribute,\r\n setColor,\r\n strokeDasharray,\r\n strokeLinecap,\r\n styleTransform,\r\n} from \"./helpers/function\";\r\n\r\n/**\r\n * @class\r\n */\r\nexport default class CircularProgressBar {\r\n /**\r\n * CircularProgressBar constructor\r\n *\r\n * @param {String} pieName - class name\r\n * @param {Object} globalObj - global configuration\r\n */\r\n constructor(pieName, globalObj = {}) {\r\n this._className = pieName;\r\n this._globalObj = globalObj;\r\n\r\n const pieElements = document.querySelectorAll(`.${pieName}`);\r\n const elements = [].slice.call(pieElements);\r\n // add index to all progressbar\r\n elements.map((item, idx) => {\r\n const id = JSON.parse(item.getAttribute(\"data-pie\"));\r\n item.setAttribute(\r\n \"data-pie-index\",\r\n id.index || globalObj.index || idx + 1,\r\n );\r\n });\r\n\r\n this._elements = elements;\r\n }\r\n\r\n /**\r\n * @param {object} outside\r\n */\r\n initial(outside) {\r\n const triggeredOutside = outside || this._elements;\r\n Array.isArray(triggeredOutside)\r\n ? triggeredOutside.map((element) => this._createSVG(element))\r\n : this._createSVG(triggeredOutside);\r\n }\r\n\r\n /**\r\n * @param {SVGAElement} svg\r\n * @param {HTMLElement} target\r\n * @param {Object} options\r\n */\r\n _progress(svg, target, options) {\r\n const pieName = this._className;\r\n if (options.number) {\r\n insertAdElement(svg, percent(options, pieName));\r\n }\r\n\r\n const progressCircle = querySelector(`.${pieName}-circle-${options.index}`);\r\n\r\n const configCircle = {\r\n fill: \"none\",\r\n \"stroke-width\": options.stroke,\r\n \"stroke-dashoffset\": \"264\",\r\n ...strokeDasharray(),\r\n ...strokeLinecap(options),\r\n };\r\n setAttribute(progressCircle, configCircle);\r\n\r\n // animation progress\r\n this.animationTo({ ...options, element: progressCircle }, true);\r\n\r\n // set style and rotation\r\n progressCircle.setAttribute(\"style\", styleTransform(options));\r\n\r\n // set color\r\n setColor(progressCircle, options);\r\n\r\n // set width and height on div\r\n target.setAttribute(\r\n \"style\",\r\n `width:${options.size}px;height:${options.size}px;`,\r\n );\r\n }\r\n\r\n /**\r\n * Callback function\r\n *\r\n * @param {Object} options\r\n * @param {Boolean} initial\r\n */\r\n animationTo(options, initial = false) {\r\n const pieName = this._className;\r\n const previousConfigObj = JSON.parse(\r\n querySelector(`[data-pie-index=\"${options.index}\"]`).getAttribute(\r\n \"data-pie\",\r\n ),\r\n );\r\n\r\n const circleElement = querySelector(`.${pieName}-circle-${options.index}`);\r\n\r\n if (!circleElement) return;\r\n\r\n // merging all configuration objects\r\n const commonConfiguration = initial\r\n ? options\r\n : {\r\n ...defaultOptions,\r\n ...previousConfigObj,\r\n ...options,\r\n ...this._globalObj,\r\n };\r\n\r\n // update color circle\r\n if (!initial) {\r\n setColor(circleElement, commonConfiguration);\r\n }\r\n\r\n // font color update\r\n if (!initial && commonConfiguration.number) {\r\n const fontconfig = {\r\n fill: commonConfiguration.fontColor,\r\n ...fontSettings(commonConfiguration),\r\n };\r\n const textElement = querySelector(\r\n `.${pieName}-text-${commonConfiguration.index}`,\r\n );\r\n setAttribute(textElement, fontconfig);\r\n }\r\n\r\n const centerNumber = querySelector(`.${pieName}-percent-${options.index}`);\r\n\r\n if (commonConfiguration.animationOff) {\r\n if (commonConfiguration.number)\r\n centerNumber.textContent = `${commonConfiguration.percent}`;\r\n circleElement.setAttribute(\r\n \"stroke-dashoffset\",\r\n dashOffset(commonConfiguration.percent, commonConfiguration.inverse),\r\n );\r\n return;\r\n }\r\n\r\n // get numer percent from data-angel\r\n let angle = JSON.parse(circleElement.getAttribute(\"data-angel\"));\r\n\r\n // round if number is decimal\r\n const percent = Math.round(options.percent);\r\n\r\n // if percent 0 then set at start 0%\r\n if (percent === 0) {\r\n if (commonConfiguration.number) centerNumber.textContent = \"0\";\r\n circleElement.setAttribute(\"stroke-dashoffset\", \"264\");\r\n }\r\n\r\n if (percent > 100 || percent <= 0 || angle === percent) return;\r\n\r\n let request;\r\n let i = initial ? 0 : angle;\r\n\r\n const fps = commonConfiguration.speed || 1000;\r\n const interval = 1000 / fps;\r\n const tolerance = 0.1;\r\n let then = performance.now();\r\n\r\n const performAnimation = (now) => {\r\n request = requestAnimationFrame(performAnimation);\r\n const delta = now - then;\r\n\r\n if (delta >= interval - tolerance) {\r\n then = now - (delta % interval);\r\n\r\n angle >= commonConfiguration.percent ? i-- : i++;\r\n }\r\n\r\n circleElement.setAttribute(\r\n \"stroke-dashoffset\",\r\n dashOffset(i, commonConfiguration.inverse, commonConfiguration.cut),\r\n );\r\n if (centerNumber && commonConfiguration.number) {\r\n centerNumber.textContent = `${i}`;\r\n }\r\n\r\n circleElement.setAttribute(\"data-angel\", i);\r\n circleElement.parentNode.setAttribute(\"aria-valuenow\", i);\r\n\r\n // console.log(i, percent);\r\n if (i === percent) {\r\n cancelAnimationFrame(request);\r\n }\r\n\r\n // return;\r\n };\r\n\r\n requestAnimationFrame(performAnimation);\r\n }\r\n\r\n /**\r\n * Create svg elements\r\n *\r\n * @param {HTMLElement} element\r\n */\r\n _createSVG(element) {\r\n const index = element.getAttribute(\"data-pie-index\");\r\n const json = JSON.parse(element.getAttribute(\"data-pie\"));\r\n\r\n const options = { ...defaultOptions, ...json, index, ...this._globalObj };\r\n\r\n const svg = createNSElement(\"svg\");\r\n\r\n const configSVG = {\r\n role: \"progressbar\",\r\n width: options.size,\r\n height: options.size,\r\n viewBox: \"0 0 100 100\",\r\n \"aria-valuemin\": \"0\",\r\n \"aria-valuemax\": \"100\",\r\n };\r\n\r\n setAttribute(svg, configSVG);\r\n\r\n // colorCircle\r\n if (options.colorCircle) {\r\n svg.appendChild(this._circle(options));\r\n }\r\n\r\n // gradient\r\n if (options.lineargradient) {\r\n svg.appendChild(gradient(options));\r\n }\r\n\r\n svg.appendChild(this._circle(options, \"top\"));\r\n\r\n element.appendChild(svg);\r\n\r\n this._progress(svg, element, options);\r\n }\r\n\r\n /**\r\n * Create circle top/bottom\r\n *\r\n * @param {Object} options\r\n * @param {String} where\r\n * @returns {SVGElement}\r\n */\r\n _circle(options, where = \"bottom\") {\r\n const circle = createNSElement(\"circle\");\r\n\r\n let configCircle = {};\r\n if (options.cut) {\r\n const dashoffset = 264 - (100 - options.cut) * 2.64;\r\n configCircle = {\r\n \"stroke-dashoffset\": options.inverse ? -dashoffset : dashoffset,\r\n style: styleTransform(options),\r\n ...strokeDasharray(),\r\n ...strokeLinecap(options),\r\n };\r\n }\r\n\r\n const objCircle = {\r\n fill: options.fill,\r\n stroke: options.colorCircle,\r\n \"stroke-width\": options.strokeBottom || options.stroke,\r\n ...configCircle,\r\n };\r\n\r\n if (options.strokeDasharray) {\r\n Object.assign(objCircle, { ...strokeDasharray(options.strokeDasharray) });\r\n }\r\n\r\n const typeCircle =\r\n where === \"top\"\r\n ? { class: `${this._className}-circle-${options.index}` }\r\n : objCircle;\r\n\r\n const objConfig = {\r\n cx: \"50%\",\r\n cy: \"50%\",\r\n r: 42,\r\n \"shape-rendering\": \"geometricPrecision\",\r\n ...typeCircle,\r\n };\r\n\r\n setAttribute(circle, objConfig);\r\n\r\n return circle;\r\n }\r\n}\r\n"],"names":["defaultOptions","colorSlice","fontColor","fontSize","fontWeight","lineargradient","number","round","fill","unit","rotation","size","stroke","styleTransform","_ref","animationSmooth","strokeDasharray","type","strokeLinecap","_ref2","fontSettings","options","querySelector","element","document","setColor","_ref3","index","setAttribute","object","key","createNSElement","createElementNS","tspan","className","classList","add","textContent","dashOffset","count","inverse","cut","angle","insertAdElement","el","insertAdjacentElement","constructor","pieName","globalObj","this","_className","_globalObj","pieElements","querySelectorAll","elements","slice","call","map","item","idx","id","JSON","parse","getAttribute","_elements","initial","outside","triggeredOutside","Array","isArray","_createSVG","_progress","svg","target","percent","creatTextElementSVG","obj","x","y","dy","textPosition","progressCircle","configCircle","animationTo","previousConfigObj","circleElement","commonConfiguration","fontconfig","textElement","centerNumber","animationOff","Math","request","i","interval","speed","then","performance","now","performAnimation","requestAnimationFrame","delta","parentNode","cancelAnimationFrame","json","configSVG","role","width","height","viewBox","colorCircle","appendChild","_circle","_ref4","defsElement","linearGradient","countGradient","stopElements","offset","length","gradient","where","circle","dashoffset","style","objCircle","strokeBottom","Object","assign","objConfig","cx","cy","r","class"],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"circularProgressBar.min.js","sources":["../sources/helpers/defaults.js","../sources/helpers/function.js","../sources/index.js"],"sourcesContent":["/**\r\n * @typedef {Object} - Default object\r\n * @prop {String} [colorSlice] - Progress color circle\r\n * @prop {String} [fontColor] - Font color\r\n * @prop {String} [fontSize] - Font size\r\n * @prop {Number} [fontWeight] - Font weight\r\n * @prop {Array} [linearGradient] - Linear gradien for circle\r\n * @prop {Boolean} [number] - Show/hide number\r\n * @prop {Boolean} [round] - Path rounding\r\n * @prop {String} [fill] - Inner circle color\r\n * @prop {String} [unit] - Different unit instead of percentage (%) inside the circle\r\n * @prop {Number} [rotation] - Chart rotation\r\n * @prop {Number} [size] - Size progress bar width and height in px\r\n * @prop {Number} [stroke] - Stroke width, chart thickness\r\n */\r\n/**\r\n * Returns the default options of the component\r\n * @return {CPBOptions}\r\n */\r\nconst defaultOptions = {\r\n colorSlice: \"#00a1ff\",\r\n fontColor: \"#000\",\r\n fontSize: \"1.6rem\",\r\n fontWeight: 400,\r\n lineargradient: false,\r\n number: true,\r\n round: false,\r\n fill: \"none\",\r\n unit: \"%\",\r\n rotation: -90,\r\n size: 200,\r\n stroke: 10,\r\n};\r\n\r\nexport default defaultOptions;\r\n","/**\r\n *\r\n * @param {Object} object\r\n * @returns {String}\r\n */\r\nconst styleTransform = ({ rotation, animationSmooth }) => {\r\n const smoothAnimation = animationSmooth\r\n ? `transition: stroke-dashoffset ${animationSmooth}`\r\n : \"\";\r\n\r\n return `transform:rotate(${rotation}deg);transform-origin: 50% 50%;${smoothAnimation}`;\r\n};\r\n\r\n/**\r\n * Set \"stroke-dasharray\": \"1, 2\"\r\n * @param {String} type\r\n * @returns {Object}\r\n */\r\nconst strokeDasharray = (type) => {\r\n return {\r\n \"stroke-dasharray\": type || \"264\",\r\n };\r\n};\r\n\r\n/**\r\n * Set type stroke-linecap\r\n * @param {String} round\r\n * @returns {Object}\r\n */\r\nconst strokeLinecap = ({ round }) => {\r\n return {\r\n \"stroke-linecap\": round ? \"round\" : \"\",\r\n };\r\n};\r\n\r\n/**\r\n * Set font sieze/weight\r\n *\r\n * @param {Object} options\r\n * @returns {Object}\r\n */\r\nconst fontSettings = (options) => {\r\n return {\r\n \"font-size\": options.fontSize,\r\n \"font-weight\": options.fontWeight,\r\n };\r\n};\r\n\r\n/**\r\n *\r\n * @param {String} element\r\n * @returns {HTMLElement}\r\n */\r\nconst querySelector = (element) => document.querySelector(element);\r\n\r\n/**\r\n * Set color or linear-gradient\r\n *\r\n * @param {String} element\r\n * @param {Object} object\r\n */\r\nconst setColor = (element, { lineargradient, index, colorSlice }) => {\r\n element.setAttribute(\r\n \"stroke\",\r\n lineargradient ? `url(#linear-${index})` : colorSlice,\r\n );\r\n};\r\n\r\n/**\r\n * Set attribute to specific element\r\n *\r\n * @param {String} element\r\n * @param {Object} object\r\n */\r\nconst setAttribute = (element, object) => {\r\n for (const key in object) {\r\n element?.setAttribute(key, object[key]);\r\n }\r\n};\r\n\r\n/**\r\n * Create svg element\r\n *\r\n * @param {String} type\r\n * @returns {SVGElement}\r\n */\r\nconst createNSElement = (type) =>\r\n document.createElementNS(\"http://www.w3.org/2000/svg\", type);\r\n\r\n/**\r\n * Create svg tspan\r\n *\r\n * @param {String} className\r\n * @param {String} unit\r\n * @returns {HTMLElement}\r\n */\r\nconst tspan = (className, unit) => {\r\n const element = createNSElement(\"tspan\");\r\n\r\n element.classList.add(className);\r\n if (unit) element.textContent = unit;\r\n return element;\r\n};\r\n\r\n/**\r\n * Function generate stroke-dashoffset\r\n *\r\n * @param {Number} count\r\n * @param {Boolean} inverse - Counterclockwise animation\r\n * @param {Number} cut - Angle of the circle sector\r\n * @returns {Number}\r\n */\r\nconst dashOffset = (count, inverse, cut) => {\r\n const cutChar = cut ? (264 / 100) * (100 - cut) : 264;\r\n const angle = 264 - (count / 100) * cutChar;\r\n\r\n // https://github.com/tomickigrzegorz/circular-progress-bar/issues/87\r\n // inverse option is not working in ios safari\r\n // return inverse ? `${264 - angle}` : angle;\r\n return inverse ? -angle : angle;\r\n};\r\n\r\n/**\r\n * @param {HTMLElement} element\r\n * @param {HTMLElement} el\r\n * @param {String} type\r\n */\r\nconst insertAdElement = (element, el, type = \"beforeend\") =>\r\n element.insertAdjacentElement(type, el);\r\n\r\n/**\r\n * Generator function linear-gradient stop svg elements\r\n *\r\n * @param {Object} object\r\n */\r\nconst gradient = ({ index, lineargradient }) => {\r\n const defsElement = createNSElement(\"defs\");\r\n const linearGradient = createNSElement(\"linearGradient\");\r\n linearGradient.id = `linear-${index}`;\r\n\r\n const countGradient = [].slice.call(lineargradient);\r\n\r\n defsElement.appendChild(linearGradient);\r\n\r\n let number = 0;\r\n countGradient.map((item) => {\r\n const stopElements = createNSElement(\"stop\");\r\n\r\n const stopObj = {\r\n offset: `${number}%`,\r\n \"stop-color\": `${item}`,\r\n };\r\n setAttribute(stopElements, stopObj);\r\n\r\n linearGradient.appendChild(stopElements);\r\n number += 100 / (countGradient.length - 1);\r\n });\r\n\r\n return defsElement;\r\n};\r\n\r\n/**\r\n * A function that generates tspan\r\n * elements with a number and unit\r\n *\r\n * @param {Object} options - Global configuration\r\n * @param {String} className\r\n */\r\nconst percent = (options, className) => {\r\n const creatTextElementSVG = createNSElement(\"text\");\r\n\r\n creatTextElementSVG.classList.add(`${className}-text-${options.index}`);\r\n\r\n // create tspan element with number\r\n // and insert to svg text element\r\n insertAdElement(\r\n creatTextElementSVG,\r\n tspan(`${className}-percent-${options.index}`),\r\n );\r\n\r\n // create and insert unit to text element\r\n insertAdElement(\r\n creatTextElementSVG,\r\n tspan(`${className}-unit-${options.index}`, options.unit),\r\n );\r\n\r\n // config to svg text\r\n const obj = {\r\n x: \"50%\",\r\n y: \"50%\",\r\n fill: options.fontColor,\r\n \"text-anchor\": \"middle\",\r\n dy: options.textPosition || \"0.35em\",\r\n ...fontSettings(options),\r\n };\r\n\r\n setAttribute(creatTextElementSVG, obj);\r\n return creatTextElementSVG;\r\n};\r\n\r\nexport {\r\n createNSElement,\r\n dashOffset,\r\n fontSettings,\r\n gradient,\r\n insertAdElement,\r\n percent,\r\n querySelector,\r\n setAttribute,\r\n setColor,\r\n strokeDasharray,\r\n strokeLinecap,\r\n styleTransform,\r\n};\r\n","import defaultOptions from \"./helpers/defaults\";\r\nimport {\r\n createNSElement,\r\n dashOffset,\r\n fontSettings,\r\n gradient,\r\n insertAdElement,\r\n percent,\r\n querySelector,\r\n setAttribute,\r\n setColor,\r\n strokeDasharray,\r\n strokeLinecap,\r\n styleTransform,\r\n} from \"./helpers/function\";\r\n\r\n/**\r\n * @class\r\n */\r\nexport default class CircularProgressBar {\r\n /**\r\n * CircularProgressBar constructor\r\n *\r\n * @param {String} pieName - class name\r\n * @param {Object} globalObj - global configuration\r\n */\r\n constructor(pieName, globalObj = {}) {\r\n this._className = pieName;\r\n this._globalObj = globalObj;\r\n\r\n const pieElements = document.querySelectorAll(`.${pieName}`);\r\n const elements = [].slice.call(pieElements);\r\n // add index to all progressbar\r\n elements.map((item, idx) => {\r\n const id = JSON.parse(item.getAttribute(\"data-pie\"));\r\n item.setAttribute(\r\n \"data-pie-index\",\r\n id.index || globalObj.index || idx + 1,\r\n );\r\n });\r\n\r\n this._elements = elements;\r\n }\r\n\r\n /**\r\n * @param {object} outside\r\n */\r\n initial(outside) {\r\n const triggeredOutside = outside || this._elements;\r\n Array.isArray(triggeredOutside)\r\n ? triggeredOutside.map((element) => this._createSVG(element))\r\n : this._createSVG(triggeredOutside);\r\n }\r\n\r\n /**\r\n * @param {SVGAElement} svg\r\n * @param {HTMLElement} target\r\n * @param {Object} options\r\n */\r\n _progress(svg, target, options) {\r\n const pieName = this._className;\r\n if (options.number) {\r\n insertAdElement(svg, percent(options, pieName));\r\n }\r\n\r\n const progressCircle = querySelector(`.${pieName}-circle-${options.index}`);\r\n\r\n const configCircle = {\r\n fill: \"none\",\r\n \"stroke-width\": options.stroke,\r\n \"stroke-dashoffset\": \"264\",\r\n ...strokeDasharray(),\r\n ...strokeLinecap(options),\r\n };\r\n setAttribute(progressCircle, configCircle);\r\n\r\n // animation progress\r\n this.animationTo({ ...options, element: progressCircle }, true);\r\n\r\n // set style and rotation\r\n progressCircle.setAttribute(\"style\", styleTransform(options));\r\n\r\n // set color\r\n setColor(progressCircle, options);\r\n\r\n // set width and height on div\r\n target.setAttribute(\r\n \"style\",\r\n `width:${options.size}px;height:${options.size}px;`,\r\n );\r\n }\r\n\r\n /**\r\n * Callback function\r\n *\r\n * @param {Object} options\r\n * @param {Boolean} initial\r\n */\r\n animationTo(options, initial = false) {\r\n const pieName = this._className;\r\n const previousConfigObj = JSON.parse(\r\n querySelector(`[data-pie-index=\"${options.index}\"]`).getAttribute(\r\n \"data-pie\",\r\n ),\r\n );\r\n\r\n const circleElement = querySelector(`.${pieName}-circle-${options.index}`);\r\n\r\n if (!circleElement) return;\r\n\r\n // merging all configuration objects\r\n const commonConfiguration = initial\r\n ? options\r\n : {\r\n ...defaultOptions,\r\n ...previousConfigObj,\r\n ...options,\r\n ...this._globalObj,\r\n };\r\n\r\n // update color circle\r\n if (!initial) {\r\n setColor(circleElement, commonConfiguration);\r\n }\r\n\r\n // font color update\r\n if (!initial && commonConfiguration.number) {\r\n const fontconfig = {\r\n fill: commonConfiguration.fontColor,\r\n ...fontSettings(commonConfiguration),\r\n };\r\n const textElement = querySelector(\r\n `.${pieName}-text-${commonConfiguration.index}`,\r\n );\r\n setAttribute(textElement, fontconfig);\r\n }\r\n\r\n const centerNumber = querySelector(`.${pieName}-percent-${options.index}`);\r\n\r\n if (commonConfiguration.animationOff) {\r\n if (commonConfiguration.number)\r\n centerNumber.textContent = `${commonConfiguration.percent}`;\r\n circleElement.setAttribute(\r\n \"stroke-dashoffset\",\r\n dashOffset(commonConfiguration.percent, commonConfiguration.inverse),\r\n );\r\n return;\r\n }\r\n\r\n // get numer percent from data-angel\r\n let angle = JSON.parse(circleElement.getAttribute(\"data-angel\"));\r\n\r\n // round if number is decimal\r\n const percent = Math.round(options.percent);\r\n\r\n // if percent 0 then set at start 0%\r\n if (percent === 0) {\r\n if (commonConfiguration.number) centerNumber.textContent = \"0\";\r\n circleElement.setAttribute(\"stroke-dashoffset\", \"264\");\r\n }\r\n\r\n if (percent > 100 || percent < 0 || angle === percent) return;\r\n\r\n let request;\r\n let i = initial ? 0 : angle;\r\n\r\n const fps = commonConfiguration.speed || 1000;\r\n const interval = 1000 / fps;\r\n const tolerance = 0.1;\r\n let then = performance.now();\r\n\r\n const performAnimation = (now) => {\r\n request = requestAnimationFrame(performAnimation);\r\n const delta = now - then;\r\n\r\n if (delta >= interval - tolerance) {\r\n then = now - (delta % interval);\r\n\r\n // angle >= commonConfiguration.percent ? i-- : i++;\r\n i = i < commonConfiguration.percent ? i + 1 : i - 1;\r\n }\r\n\r\n circleElement.setAttribute(\r\n \"stroke-dashoffset\",\r\n dashOffset(i, commonConfiguration.inverse, commonConfiguration.cut),\r\n );\r\n if (centerNumber && commonConfiguration.number) {\r\n centerNumber.textContent = `${i}`;\r\n }\r\n\r\n circleElement.setAttribute(\"data-angel\", i);\r\n circleElement.parentNode.setAttribute(\"aria-valuenow\", i);\r\n\r\n if (i === percent) {\r\n cancelAnimationFrame(request);\r\n }\r\n\r\n // return;\r\n };\r\n\r\n requestAnimationFrame(performAnimation);\r\n }\r\n\r\n /**\r\n * Create svg elements\r\n *\r\n * @param {HTMLElement} element\r\n */\r\n _createSVG(element) {\r\n const index = element.getAttribute(\"data-pie-index\");\r\n const json = JSON.parse(element.getAttribute(\"data-pie\"));\r\n\r\n const options = { ...defaultOptions, ...json, index, ...this._globalObj };\r\n\r\n const svg = createNSElement(\"svg\");\r\n\r\n const configSVG = {\r\n role: \"progressbar\",\r\n width: options.size,\r\n height: options.size,\r\n viewBox: \"0 0 100 100\",\r\n \"aria-valuemin\": \"0\",\r\n \"aria-valuemax\": \"100\",\r\n };\r\n\r\n setAttribute(svg, configSVG);\r\n\r\n // colorCircle\r\n if (options.colorCircle) {\r\n svg.appendChild(this._circle(options));\r\n }\r\n\r\n // gradient\r\n if (options.lineargradient) {\r\n svg.appendChild(gradient(options));\r\n }\r\n\r\n svg.appendChild(this._circle(options, \"top\"));\r\n\r\n element.appendChild(svg);\r\n\r\n this._progress(svg, element, options);\r\n }\r\n\r\n /**\r\n * Create circle top/bottom\r\n *\r\n * @param {Object} options\r\n * @param {String} where\r\n * @returns {SVGElement}\r\n */\r\n _circle(options, where = \"bottom\") {\r\n const circle = createNSElement(\"circle\");\r\n\r\n let configCircle = {};\r\n if (options.cut) {\r\n const dashoffset = 264 - (100 - options.cut) * 2.64;\r\n configCircle = {\r\n \"stroke-dashoffset\": options.inverse ? -dashoffset : dashoffset,\r\n style: styleTransform(options),\r\n ...strokeDasharray(),\r\n ...strokeLinecap(options),\r\n };\r\n }\r\n\r\n const objCircle = {\r\n fill: options.fill,\r\n stroke: options.colorCircle,\r\n \"stroke-width\": options.strokeBottom || options.stroke,\r\n ...configCircle,\r\n };\r\n\r\n if (options.strokeDasharray) {\r\n Object.assign(objCircle, { ...strokeDasharray(options.strokeDasharray) });\r\n }\r\n\r\n const typeCircle =\r\n where === \"top\"\r\n ? { class: `${this._className}-circle-${options.index}` }\r\n : objCircle;\r\n\r\n const objConfig = {\r\n cx: \"50%\",\r\n cy: \"50%\",\r\n r: 42,\r\n \"shape-rendering\": \"geometricPrecision\",\r\n ...typeCircle,\r\n };\r\n\r\n setAttribute(circle, objConfig);\r\n\r\n return circle;\r\n }\r\n}\r\n"],"names":["defaultOptions","colorSlice","fontColor","fontSize","fontWeight","lineargradient","number","round","fill","unit","rotation","size","stroke","styleTransform","_ref","animationSmooth","strokeDasharray","type","strokeLinecap","_ref2","fontSettings","options","querySelector","element","document","setColor","_ref3","index","setAttribute","object","key","createNSElement","createElementNS","tspan","className","classList","add","textContent","dashOffset","count","inverse","cut","angle","insertAdElement","el","insertAdjacentElement","constructor","pieName","globalObj","this","_className","_globalObj","pieElements","querySelectorAll","elements","slice","call","map","item","idx","id","JSON","parse","getAttribute","_elements","initial","outside","triggeredOutside","Array","isArray","_createSVG","_progress","svg","target","percent","creatTextElementSVG","obj","x","y","dy","textPosition","progressCircle","configCircle","animationTo","previousConfigObj","circleElement","commonConfiguration","fontconfig","textElement","centerNumber","animationOff","Math","request","i","interval","speed","then","performance","now","performAnimation","requestAnimationFrame","delta","parentNode","cancelAnimationFrame","json","configSVG","role","width","height","viewBox","colorCircle","appendChild","_circle","_ref4","defsElement","linearGradient","countGradient","stopElements","offset","length","gradient","where","circle","dashoffset","style","objCircle","strokeBottom","Object","assign","objConfig","cx","cy","r","class"],"mappings":"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"} \ No newline at end of file diff --git a/sources/index.js b/sources/index.js index 5dd7642..e2c0b83 100644 --- a/sources/index.js +++ b/sources/index.js @@ -159,7 +159,7 @@ export default class CircularProgressBar { circleElement.setAttribute("stroke-dashoffset", "264"); } - if (percent > 100 || percent <= 0 || angle === percent) return; + if (percent > 100 || percent < 0 || angle === percent) return; let request; let i = initial ? 0 : angle; @@ -176,7 +176,8 @@ export default class CircularProgressBar { if (delta >= interval - tolerance) { then = now - (delta % interval); - angle >= commonConfiguration.percent ? i-- : i++; + // angle >= commonConfiguration.percent ? i-- : i++; + i = i < commonConfiguration.percent ? i + 1 : i - 1; } circleElement.setAttribute( @@ -190,7 +191,6 @@ export default class CircularProgressBar { circleElement.setAttribute("data-angel", i); circleElement.parentNode.setAttribute("aria-valuenow", i); - // console.log(i, percent); if (i === percent) { cancelAnimationFrame(request); }