diff --git a/.prettierrc.json b/.prettierrc.json index b0f8d70..8cc5540 100644 --- a/.prettierrc.json +++ b/.prettierrc.json @@ -1,6 +1,6 @@ { "semi": true, - "singleQuote": true, + "singleQuote": false, "tabWidth": 2, "endOfLine": "auto", "printWidth": 80 diff --git a/CHANGELOG.md b/CHANGELOG.md index 19838fb..a40ec70 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,21 @@ -## 2022-02-26 (v1.1.8) +## 2022-02-12 (v1.1.9) + +### Added +- `index` - new props. You can add `index` both to the `data-pie` and to the global configuration. From now on you can set your own index of the entire div - `data-pie-index`. You can easily refer to an element, such as in the example "GLOBAL CONFIGURATION" + +### Build +- added script to change library version everywhere during production build + +### Improvements +- reducing the size of the library by mangle properties and methods: +```js +mangle: { + properties: { + regex: /^_/, + }, +}, +``` +## 2022-01-26 (v1.1.8) ### Added - separate version for IE in dist folder diff --git a/README.md b/README.md index e5d1143..72e0f6d 100644 --- a/README.md +++ b/README.md @@ -27,7 +27,7 @@ See the demo - [example](https://tomik23.github.io/circular-progress-bar/) #### JavaScript ```html - + ``` ##### -- OR -- @@ -42,7 +42,7 @@ Just download the library from the `dist/circularProgressBar.min.js` and add it ## Sample configuration 1. Add a div element to the page `
` -2. Build the script or download it from the `docs` folder and add `circularProgressBar.min.js` to the page +2. Build the script or download it from the `dist` folder and add `circularProgressBar.min.js` to the page, [umd, esm, iife] 3. Call the functions `const circle = new CircularProgressBar('pie'); circle.initial();` More extensive example: @@ -87,7 +87,7 @@ window.addEventListener('DOMContentLoaded', () => { const ovserver = new IntersectionObserver((entries, observer) => { entries.map((entry) => { - if (entry.isIntersecting && entry.intersectionRatio > 0.75) { + if (entry.isIntersecting && entry.intersectionRatio >= 0.75) { circle.initial(entry.target); observer.unobserve(entry.target); } @@ -118,6 +118,7 @@ circle.initial(); setTimeout(() => { const options = { // item number you want to update + // read data-pie-index from the element index: 1, // update props percent: 30, @@ -161,7 +162,8 @@ const globalConfig = { "strokeBottom": 5, "colorSlice": "#EC407A", "colorCircle": "#f1f1f1", - "round": true + "round": true, + /* e.t.c */ } const global = new CircularProgressBar('global', globalConfig); @@ -191,6 +193,7 @@ npm run build | props | type | default | require | description | | -------------- | :-----------: | :---------: | :-----: | ---------------------------------------------------------------------------------------------------------- | | percent | number | | ✔ | Represents the progress bar and animation of the animation progress expressed by a number e.g. 65% | +| index | number | `` | | Set your number `data-pie-index`, if you do not set it, it will be dynamically set depending on the order of elements | | colorSlice | string | `'#00a1ff'` | | Progress layer color and background ["#ffff00","brown" 2](#colors-names) | | colorCircle | string | `''` | | Bottom circle color Font ["#ffff00","brown" 2](#colors-names) | | speed | number | `1000` | | Frame rate animation [fps]. Let's say you want the animation to be 60fps, just add the parameter speed: 60 | @@ -242,7 +245,7 @@ Configuration for IE: ### cdn -- https://cdn.jsdelivr.net/gh/tomik23/circular-progress-bar@1.1.8/dist/circularProgressBar.ie.min +- https://cdn.jsdelivr.net/gh/tomik23/circular-progress-bar@1.1.9/dist/circularProgressBar.ie.min ## License diff --git a/dist/circularProgressBar.esm.js b/dist/circularProgressBar.esm.js index e90e908..e9888d9 100644 --- a/dist/circularProgressBar.esm.js +++ b/dist/circularProgressBar.esm.js @@ -105,29 +105,30 @@ const percent = (options, className) => { class CircularProgressBar { constructor(pieName, globalObj = {}) { - this.className = pieName; - this.globalObj = globalObj; + this._className = pieName; + this._globalObj = globalObj; const pieElements = document.querySelectorAll(`.${pieName}`); const elements = [].slice.call(pieElements); - elements.map((item, index) => { - item.setAttribute('data-pie-index', index + 1); + elements.map((item, idx) => { + const id = JSON.parse(item.getAttribute("data-pie")); + item.setAttribute("data-pie-index", id.index || globalObj.index || idx + 1); }); - this.elements = elements; + this._elements = elements; } initial(outside) { - const triggeredOutside = outside || this.elements; - Array.isArray(triggeredOutside) ? triggeredOutside.map(element => this.createSVG(element)) : this.createSVG(triggeredOutside); + const triggeredOutside = outside || this._elements; + Array.isArray(triggeredOutside) ? triggeredOutside.map(element => this._createSVG(element)) : this._createSVG(triggeredOutside); } - progress(svg, target, options) { - const pieName = this.className; + _progress(svg, target, options) { + const pieName = this._className; if (options.number) { insertAdElement(svg, percent(options, pieName)); } const progressCircle = querySelector(`.${pieName}-circle-${options.index}`); const configCircle = { - fill: 'none', - 'stroke-width': options.stroke, - 'stroke-dashoffset': '264', + fill: "none", + "stroke-width": options.stroke, + "stroke-dashoffset": "264", ...strokeDasharray(), ...strokeLinecap(options) }; @@ -135,19 +136,19 @@ class CircularProgressBar { this.animationTo({ ...options, element: progressCircle }, true); - progressCircle.setAttribute('style', styleTransform(options)); + progressCircle.setAttribute("style", styleTransform(options)); setColor(progressCircle, options); - target.setAttribute('style', `width:${options.size}px;height:${options.size}px;`); + target.setAttribute("style", `width:${options.size}px;height:${options.size}px;`); } animationTo(options, initial = false) { - const pieName = this.className; - const previousConfigObj = JSON.parse(querySelector(`[data-pie-index="${options.index}"]`).getAttribute('data-pie')); + const pieName = this._className; + const previousConfigObj = JSON.parse(querySelector(`[data-pie-index="${options.index}"]`).getAttribute("data-pie")); const circleElement = querySelector(`.${pieName}-circle-${options.index}`); if (!circleElement) return; const commonConfiguration = initial ? options : { ...defaultOptions, ...previousConfigObj, ...options, - ...this.globalObj + ...this._globalObj }; if (!initial) { setColor(circleElement, commonConfiguration); @@ -163,14 +164,14 @@ class CircularProgressBar { const centerNumber = querySelector(`.${pieName}-percent-${options.index}`); if (commonConfiguration.animationOff) { if (commonConfiguration.number) centerNumber.textContent = `${commonConfiguration.percent}`; - circleElement.setAttribute('stroke-dashoffset', dashOffset(commonConfiguration.percent, commonConfiguration.inverse)); + circleElement.setAttribute("stroke-dashoffset", dashOffset(commonConfiguration.percent, commonConfiguration.inverse)); return; } - let angle = JSON.parse(circleElement.getAttribute('data-angel')); + let angle = JSON.parse(circleElement.getAttribute("data-angel")); const percent = Math.round(options.percent); if (percent == 0) { - if (commonConfiguration.number) centerNumber.textContent = '0'; - circleElement.setAttribute('stroke-dashoffset', '264'); + if (commonConfiguration.number) centerNumber.textContent = "0"; + circleElement.setAttribute("stroke-dashoffset", "264"); } if (percent > 100 || percent <= 0 || angle === percent) return; let request; @@ -186,53 +187,53 @@ class CircularProgressBar { then = now - delta % interval; angle >= commonConfiguration.percent ? i-- : i++; } - circleElement.setAttribute('stroke-dashoffset', dashOffset(i, commonConfiguration.inverse, commonConfiguration.cut)); + circleElement.setAttribute("stroke-dashoffset", dashOffset(i, commonConfiguration.inverse, commonConfiguration.cut)); if (centerNumber && commonConfiguration.number) { centerNumber.textContent = `${i}`; } - circleElement.setAttribute('data-angel', i); - circleElement.parentNode.setAttribute('aria-valuenow', i); + circleElement.setAttribute("data-angel", i); + circleElement.parentNode.setAttribute("aria-valuenow", i); if (i === percent) { cancelAnimationFrame(request); } }; requestAnimationFrame(performAnimation); } - createSVG(element) { - const index = element.getAttribute('data-pie-index'); - const json = JSON.parse(element.getAttribute('data-pie')); + _createSVG(element) { + const index = element.getAttribute("data-pie-index"); + const json = JSON.parse(element.getAttribute("data-pie")); const options = { ...defaultOptions, ...json, index, - ...this.globalObj + ...this._globalObj }; - const svg = createNSElement('svg'); + const svg = createNSElement("svg"); const configSVG = { - role: 'progressbar', + role: "progressbar", width: options.size, height: options.size, - viewBox: '0 0 100 100', - 'aria-valuemin': '0', - 'aria-valuemax': '100' + viewBox: "0 0 100 100", + "aria-valuemin": "0", + "aria-valuemax": "100" }; setAttribute(svg, configSVG); if (options.colorCircle) { - svg.appendChild(this.circle(options)); + svg.appendChild(this._circle(options)); } if (options.lineargradient) { svg.appendChild(gradient(options)); } - svg.appendChild(this.circle(options, 'top')); + svg.appendChild(this._circle(options, "top")); element.appendChild(svg); - this.progress(svg, element, options); + this._progress(svg, element, options); } - circle(options, where = 'bottom') { - const circle = createNSElement('circle'); + _circle(options, where = "bottom") { + const circle = createNSElement("circle"); let configCircle = {}; if (options.cut) { const dashoffset = 264 - (100 - options.cut) * 2.64; configCircle = { - 'stroke-dashoffset': options.inverse ? -dashoffset : dashoffset, + "stroke-dashoffset": options.inverse ? -dashoffset : dashoffset, style: styleTransform(options), ...strokeDasharray(), ...strokeLinecap(options) @@ -241,21 +242,21 @@ class CircularProgressBar { const objCircle = { fill: options.fill, stroke: options.colorCircle, - 'stroke-width': options.strokeBottom || options.stroke, + "stroke-width": options.strokeBottom || options.stroke, ...configCircle }; if (options.strokeDasharray) { Object.assign(objCircle, { ...strokeDasharray(options.strokeDasharray) }); } - const typeCircle = where === 'top' ? { - class: `${this.className}-circle-${options.index}` + const typeCircle = where === "top" ? { + class: `${this._className}-circle-${options.index}` } : objCircle; const objConfig = { - cx: '50%', - cy: '50%', + cx: "50%", + cy: "50%", r: 42, - 'shape-rendering': 'geometricPrecision', + "shape-rendering": "geometricPrecision", ...typeCircle }; setAttribute(circle, objConfig); diff --git a/dist/circularProgressBar.esm.js.map b/dist/circularProgressBar.esm.js.map index 8a26e92..f8e5809 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 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, index) => {\r\n item.setAttribute('data-pie-index', index + 1);\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 if (i === percent) {\r\n cancelAnimationFrame(request);\r\n }\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","animationSmooth","smoothAnimation","strokeDasharray","type","strokeLinecap","fontSettings","options","querySelector","element","document","setColor","index","setAttribute","object","key","createNSElement","createElementNS","tspan","className","classList","add","textContent","dashOffset","count","inverse","cut","cutChar","angle","insertAdElement","el","insertAdjacentElement","gradient","defsElement","linearGradient","id","countGradient","slice","call","appendChild","map","item","stopElements","stopObj","offset","length","percent","creatTextElementSVG","obj","x","y","dy","textPosition","CircularProgressBar","constructor","pieName","globalObj","pieElements","querySelectorAll","elements","initial","outside","triggeredOutside","Array","isArray","createSVG","progress","svg","target","progressCircle","configCircle","animationTo","previousConfigObj","JSON","parse","getAttribute","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","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 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 if (i === percent) {\r\n cancelAnimationFrame(request);\r\n }\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","animationSmooth","smoothAnimation","strokeDasharray","type","strokeLinecap","fontSettings","options","querySelector","element","document","setColor","index","setAttribute","object","key","createNSElement","createElementNS","tspan","className","classList","add","textContent","dashOffset","count","inverse","cut","cutChar","angle","insertAdElement","el","insertAdjacentElement","gradient","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.esm.min.js b/dist/circularProgressBar.esm.min.js index 7b88974..a7bcde9 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=({rotation:t,animationSmooth:e})=>`transform:rotate(${t}deg);transform-origin: 50% 50%;${e?"transition: stroke-dashoffset "+e:""}`,n=t=>({"stroke-dasharray":t||"264"}),r=({round:t})=>({"stroke-linecap":t?"round":""}),i=t=>({"font-size":t.fontSize,"font-weight":t.fontWeight}),s=t=>document.querySelector(t),o=(t,{lineargradient:e,index:n,colorSlice:r})=>{t.setAttribute("stroke",e?`url(#linear-${n})`:r)},a=(t,e)=>{for(const n in e)null==t||t.setAttribute(n,e[n])},l=t=>document.createElementNS("http://www.w3.org/2000/svg",t),c=(t,e)=>{const n=l("tspan");return n.classList.add(t),e&&(n.textContent=e),n},d=(t,e,n)=>{const r=264-t/100*(n?2.64*(100-n):264);return e?-r:r},u=(t,e,n="beforeend")=>t.insertAdjacentElement(n,e);class h{constructor(t,e={}){this.className=t,this.globalObj=e;const n=document.querySelectorAll("."+t),r=[].slice.call(n);r.map(((t,e)=>{t.setAttribute("data-pie-index",e+1)})),this.elements=r}initial(t){const e=t||this.elements;Array.isArray(e)?e.map((t=>this.createSVG(t))):this.createSVG(e)}progress(t,d,h){const p=this.className;h.number&&u(t,((t,e)=>{const n=l("text");n.classList.add(`${e}-text-${t.index}`),u(n,c(`${e}-percent-${t.index}`)),u(n,c(`${e}-unit-${t.index}`,t.unit));const r={x:"50%",y:"50%",fill:t.fontColor,"text-anchor":"middle",dy:t.textPosition||"0.35em",...i(t)};return a(n,r),n})(h,p));const f=s(`.${p}-circle-${h.index}`),m={fill:"none","stroke-width":h.stroke,"stroke-dashoffset":"264",...n(),...r(h)};a(f,m),this.animationTo({...h,element:f},!0),f.setAttribute("style",e(h)),o(f,h),d.setAttribute("style",`width:${h.size}px;height:${h.size}px;`)}animationTo(e,n=!1){const r=this.className,l=JSON.parse(s(`[data-pie-index="${e.index}"]`).getAttribute("data-pie")),c=s(`.${r}-circle-${e.index}`);if(!c)return;const u=n?e:{...t,...l,...e,...this.globalObj};if(n||o(c,u),!n&&u.number){const t={fill:u.fontColor,...i(u)},e=s(`.${r}-text-${u.index}`);a(e,t)}const h=s(`.${r}-percent-${e.index}`);if(u.animationOff)return u.number&&(h.textContent=""+u.percent),void c.setAttribute("stroke-dashoffset",d(u.percent,u.inverse));let p=JSON.parse(c.getAttribute("data-angel"));const f=Math.round(e.percent);if(0==f&&(u.number&&(h.textContent="0"),c.setAttribute("stroke-dashoffset","264")),f>100||f<=0||p===f)return;let m,x=n?0:p;const b=1e3/(u.speed||1e3);let g=performance.now();const $=t=>{m=requestAnimationFrame($);const e=t-g;e>=b-.1&&(g=t-e%b,p>=u.percent?x--:x++),c.setAttribute("stroke-dashoffset",d(x,u.inverse,u.cut)),h&&u.number&&(h.textContent=""+x),c.setAttribute("data-angel",x),c.parentNode.setAttribute("aria-valuenow",x),x===f&&cancelAnimationFrame(m)};requestAnimationFrame($)}createSVG(e){const n=e.getAttribute("data-pie-index"),r=JSON.parse(e.getAttribute("data-pie")),i={...t,...r,index:n,...this.globalObj},s=l("svg"),o={role:"progressbar",width:i.size,height:i.size,viewBox:"0 0 100 100","aria-valuemin":"0","aria-valuemax":"100"};a(s,o),i.colorCircle&&s.appendChild(this.circle(i)),i.lineargradient&&s.appendChild((({index:t,lineargradient:e})=>{const n=l("defs"),r=l("linearGradient");r.id="linear-"+t;const i=[].slice.call(e);n.appendChild(r);let s=0;return i.map((t=>{const e=l("stop");a(e,{offset:s+"%","stop-color":""+t}),r.appendChild(e),s+=100/(i.length-1)})),n})(i)),s.appendChild(this.circle(i,"top")),e.appendChild(s),this.progress(s,e,i)}circle(t,i="bottom"){const s=l("circle");let o={};if(t.cut){const i=264-2.64*(100-t.cut);o={"stroke-dashoffset":t.inverse?-i:i,style:e(t),...n(),...r(t)}}const c={fill:t.fill,stroke:t.colorCircle,"stroke-width":t.strokeBottom||t.stroke,...o};t.strokeDasharray&&Object.assign(c,{...n(t.strokeDasharray)});const d={cx:"50%",cy:"50%",r:42,"shape-rendering":"geometricPrecision",..."top"===i?{class:`${this.className}-circle-${t.index}`}:c};return a(s,d),s}}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=({rotation:t,animationSmooth:e})=>`transform:rotate(${t}deg);transform-origin: 50% 50%;${e?"transition: stroke-dashoffset "+e:""}`,o=t=>({"stroke-dasharray":t||"264"}),n=({round:t})=>({"stroke-linecap":t?"round":""}),i=t=>({"font-size":t.fontSize,"font-weight":t.fontWeight}),r=t=>document.querySelector(t),s=(t,{lineargradient:e,index:o,colorSlice:n})=>{t.setAttribute("stroke",e?`url(#linear-${o})`:n)},a=(t,e)=>{for(const o in e)null==t||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=(t,e,o="beforeend")=>t.insertAdjacentElement(o,e);class h{constructor(t,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 m=r(`.${u}-circle-${h.index}`),p={fill:"none","stroke-width":h.stroke,"stroke-dashoffset":"264",...o(),...n(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,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 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,$=o?0:u;const g=1e3/(f.speed||1e3);let x=performance.now();const k=t=>{p=requestAnimationFrame(k);const e=t-x;e>=g-.1&&(x=t-e%g,u>=f.percent?$--:$++),l.setAttribute("stroke-dashoffset",d($,f.inverse,f.cut)),h&&f.number&&(h.textContent=""+$),l.setAttribute("data-angel",$),l.parentNode.setAttribute("aria-valuenow",$),$===m&&cancelAnimationFrame(p)};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((({index:t,lineargradient:e})=>{const o=c("defs"),n=c("linearGradient");n.id="linear-"+t;const i=[].slice.call(e);o.appendChild(n);let r=0;return i.map((t=>{const e=c("stop");a(e,{offset:r+"%","stop-color":""+t}),n.appendChild(e),r+=100/(i.length-1)})),o})(i)),r.appendChild(this.u(i,"top")),e.appendChild(r),this.h(r,e,i)}u(t,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 7064ed2..54a628a 100644 --- a/dist/circularProgressBar.ie.min.js +++ b/dist/circularProgressBar.ie.min.js @@ -1 +1 @@ -var CircularProgressBar=function(){"use strict";var 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=function(t){var e=t.rotation,r=t.animationSmooth;return"transform:rotate("+e+"deg);transform-origin: 50% 50%;"+(r?"transition: stroke-dashoffset "+r:"")},r=function(t){return{"stroke-dasharray":t||"264"}},n=function(t){return{"stroke-linecap":t.round?"round":""}},i=function(t){return{"font-size":t.fontSize,"font-weight":t.fontWeight}},a=function(t){return document.querySelector(t)},o=function(t,e){var r=e.lineargradient,n=e.index,i=e.colorSlice;t.setAttribute("stroke",r?"url(#linear-"+n+")":i)},s=function(t,e){for(var r in e)null==t||t.setAttribute(r,e[r])},c=function(t){return document.createElementNS("http://www.w3.org/2000/svg",t)},l=function(t,e){var r=c("tspan");return r.classList.add(t),e&&(r.textContent=e),r},u=function(t,e,r){var n=264-t/100*(r?2.64*(100-r):264);return e?-n:n},d=function(t,e,r){return void 0===r&&(r="beforeend"),t.insertAdjacentElement(r,e)};return function(){function f(t,e){void 0===e&&(e={}),this.className=t,this.globalObj=e;var r=document.querySelectorAll("."+t),n=[].slice.call(r);n.map((function(t,e){t.setAttribute("data-pie-index",e+1)})),this.elements=n}var h=f.prototype;return h.initial=function(t){var e=this,r=t||this.elements;Array.isArray(r)?r.map((function(t){return e.createSVG(t)})):this.createSVG(r)},h.progress=function(t,u,f){var h=this.className;f.number&&d(t,function(t,e){var r=c("text");r.classList.add(e+"-text-"+t.index),d(r,l(e+"-percent-"+t.index)),d(r,l(e+"-unit-"+t.index,t.unit));var n=Object.assign({x:"50%",y:"50%",fill:t.fontColor,"text-anchor":"middle",dy:t.textPosition||"0.35em"},i(t));return s(r,n),r}(f,h));var p=a("."+h+"-circle-"+f.index),v=Object.assign({fill:"none","stroke-width":f.stroke,"stroke-dashoffset":"264"},r(),n(f));s(p,v),this.animationTo(Object.assign({},f,{element:p}),!0),p.setAttribute("style",e(f)),o(p,f),u.setAttribute("style","width:"+f.size+"px;height:"+f.size+"px;")},h.animationTo=function(e,r){void 0===r&&(r=!1);var n=this.className,c=JSON.parse(a('[data-pie-index="'+e.index+'"]').getAttribute("data-pie")),l=a("."+n+"-circle-"+e.index);if(l){var d=r?e:Object.assign({},t,c,e,this.globalObj);if(r||o(l,d),!r&&d.number){var f=Object.assign({fill:d.fontColor},i(d)),h=a("."+n+"-text-"+d.index);s(h,f)}var p=a("."+n+"-percent-"+e.index);if(d.animationOff)return d.number&&(p.textContent=""+d.percent),void l.setAttribute("stroke-dashoffset",u(d.percent,d.inverse));var v=JSON.parse(l.getAttribute("data-angel")),m=Math.round(e.percent);if(0==m&&(d.number&&(p.textContent="0"),l.setAttribute("stroke-dashoffset","264")),!(m>100||m<=0||v===m)){var g,b=r?0:v,x=1e3/(d.speed||1e3),A=performance.now();requestAnimationFrame((function t(e){g=requestAnimationFrame(t);var r=e-A;r>=x-.1&&(A=e-r%x,v>=d.percent?b--:b++),l.setAttribute("stroke-dashoffset",u(b,d.inverse,d.cut)),p&&d.number&&(p.textContent=""+b),l.setAttribute("data-angel",b),l.parentNode.setAttribute("aria-valuenow",b),b===m&&cancelAnimationFrame(g)}))}}},h.createSVG=function(e){var r=e.getAttribute("data-pie-index"),n=JSON.parse(e.getAttribute("data-pie")),i=Object.assign({},t,n,{index:r},this.globalObj),a=c("svg"),o={role:"progressbar",width:i.size,height:i.size,viewBox:"0 0 100 100","aria-valuemin":"0","aria-valuemax":"100"};s(a,o),i.colorCircle&&a.appendChild(this.circle(i)),i.lineargradient&&a.appendChild(function(t){var e=t.index,r=t.lineargradient,n=c("defs"),i=c("linearGradient");i.id="linear-"+e;var a=[].slice.call(r);n.appendChild(i);var o=0;return a.map((function(t){var e=c("stop");s(e,{offset:o+"%","stop-color":""+t}),i.appendChild(e),o+=100/(a.length-1)})),n}(i)),a.appendChild(this.circle(i,"top")),e.appendChild(a),this.progress(a,e,i)},h.circle=function(t,i){void 0===i&&(i="bottom");var a=c("circle"),o={};if(t.cut){var l=264-2.64*(100-t.cut);o=Object.assign({"stroke-dashoffset":t.inverse?-l:l,style:e(t)},r(),n(t))}var u=Object.assign({fill:t.fill,stroke:t.colorCircle,"stroke-width":t.strokeBottom||t.stroke},o);t.strokeDasharray&&Object.assign(u,Object.assign({},r(t.strokeDasharray)));var d="top"===i?{class:this.className+"-circle-"+t.index}:u,f=Object.assign({cx:"50%",cy:"50%",r:42,"shape-rendering":"geometricPrecision"},d);return s(a,f),a},f}()}(); +var CircularProgressBar=function(){"use strict";var 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},r=function(t){var r=t.rotation,e=t.animationSmooth;return"transform:rotate("+r+"deg);transform-origin: 50% 50%;"+(e?"transition: stroke-dashoffset "+e:"")},e=function(t){return{"stroke-dasharray":t||"264"}},n=function(t){return{"stroke-linecap":t.round?"round":""}},i=function(t){return{"font-size":t.fontSize,"font-weight":t.fontWeight}},a=function(t){return document.querySelector(t)},o=function(t,r){var e=r.lineargradient,n=r.index,i=r.colorSlice;t.setAttribute("stroke",e?"url(#linear-"+n+")":i)},s=function(t,r){for(var e in r)null==t||t.setAttribute(e,r[e])},c=function(t){return document.createElementNS("http://www.w3.org/2000/svg",t)},f=function(t,r){var e=c("tspan");return e.classList.add(t),r&&(e.textContent=r),e},u=function(t,r,e){var n=264-t/100*(e?2.64*(100-e):264);return r?-n:n},d=function(t,r,e){return void 0===e&&(e="beforeend"),t.insertAdjacentElement(e,r)};return function(){function v(t,r){void 0===r&&(r={}),this.t=t,this.i=r;var e=document.querySelectorAll("."+t),n=[].slice.call(e);n.map((function(t,e){var n=JSON.parse(t.getAttribute("data-pie"));t.setAttribute("data-pie-index",n.index||r.index||e+1)})),this.o=n}var l=v.prototype;return l.initial=function(t){var r=this,e=t||this.o;Array.isArray(e)?e.map((function(t){return r.u(t)})):this.u(e)},l.v=function(t,u,v){var l=this.t;v.number&&d(t,function(t,r){var e=c("text");e.classList.add(r+"-text-"+t.index),d(e,f(r+"-percent-"+t.index)),d(e,f(r+"-unit-"+t.index,t.unit));var n=Object.assign({x:"50%",y:"50%",fill:t.fontColor,"text-anchor":"middle",dy:t.textPosition||"0.35em"},i(t));return s(e,n),e}(v,l));var h=a("."+l+"-circle-"+v.index),m=Object.assign({fill:"none","stroke-width":v.stroke,"stroke-dashoffset":"264"},e(),n(v));s(h,m),this.animationTo(Object.assign({},v,{element:h}),!0),h.setAttribute("style",r(v)),o(h,v),u.setAttribute("style","width:"+v.size+"px;height:"+v.size+"px;")},l.animationTo=function(r,e){void 0===e&&(e=!1);var n=this.t,c=JSON.parse(a('[data-pie-index="'+r.index+'"]').getAttribute("data-pie")),f=a("."+n+"-circle-"+r.index);if(f){var d=e?r:Object.assign({},t,c,r,this.i);if(e||o(f,d),!e&&d.number){var v=Object.assign({fill:d.fontColor},i(d)),l=a("."+n+"-text-"+d.index);s(l,v)}var h=a("."+n+"-percent-"+r.index);if(d.animationOff)return d.number&&(h.textContent=""+d.percent),void f.setAttribute("stroke-dashoffset",u(d.percent,d.inverse));var m=JSON.parse(f.getAttribute("data-angel")),p=Math.round(r.percent);if(0==p&&(d.number&&(h.textContent="0"),f.setAttribute("stroke-dashoffset","264")),!(p>100||p<=0||m===p)){var g,b=e?0:m,O=1e3/(d.speed||1e3),x=performance.now();requestAnimationFrame((function t(r){g=requestAnimationFrame(t);var e=r-x;e>=O-.1&&(x=r-e%O,m>=d.percent?b--:b++),f.setAttribute("stroke-dashoffset",u(b,d.inverse,d.cut)),h&&d.number&&(h.textContent=""+b),f.setAttribute("data-angel",b),f.parentNode.setAttribute("aria-valuenow",b),b===p&&cancelAnimationFrame(g)}))}}},l.u=function(r){var e=r.getAttribute("data-pie-index"),n=JSON.parse(r.getAttribute("data-pie")),i=Object.assign({},t,n,{index:e},this.i),a=c("svg"),o={role:"progressbar",width:i.size,height:i.size,viewBox:"0 0 100 100","aria-valuemin":"0","aria-valuemax":"100"};s(a,o),i.colorCircle&&a.appendChild(this.l(i)),i.lineargradient&&a.appendChild(function(t){var r=t.index,e=t.lineargradient,n=c("defs"),i=c("linearGradient");i.id="linear-"+r;var a=[].slice.call(e);n.appendChild(i);var o=0;return a.map((function(t){var r=c("stop");s(r,{offset:o+"%","stop-color":""+t}),i.appendChild(r),o+=100/(a.length-1)})),n}(i)),a.appendChild(this.l(i,"top")),r.appendChild(a),this.v(a,r,i)},l.l=function(t,i){void 0===i&&(i="bottom");var a=c("circle"),o={};if(t.cut){var f=264-2.64*(100-t.cut);o=Object.assign({"stroke-dashoffset":t.inverse?-f:f,style:r(t)},e(),n(t))}var u=Object.assign({fill:t.fill,stroke:t.colorCircle,"stroke-width":t.strokeBottom||t.stroke},o);t.strokeDasharray&&Object.assign(u,Object.assign({},e(t.strokeDasharray)));var d="top"===i?{class:this.t+"-circle-"+t.index}:u,v=Object.assign({cx:"50%",cy:"50%",r:42,"shape-rendering":"geometricPrecision"},d);return s(a,v),a},v}()}(); diff --git a/dist/circularProgressBar.js b/dist/circularProgressBar.js index 4fb0b09..5023666 100644 --- a/dist/circularProgressBar.js +++ b/dist/circularProgressBar.js @@ -108,29 +108,30 @@ var CircularProgressBar = (function () { class CircularProgressBar { constructor(pieName, globalObj = {}) { - this.className = pieName; - this.globalObj = globalObj; + this._className = pieName; + this._globalObj = globalObj; const pieElements = document.querySelectorAll(`.${pieName}`); const elements = [].slice.call(pieElements); - elements.map((item, index) => { - item.setAttribute('data-pie-index', index + 1); + elements.map((item, idx) => { + const id = JSON.parse(item.getAttribute("data-pie")); + item.setAttribute("data-pie-index", id.index || globalObj.index || idx + 1); }); - this.elements = elements; + this._elements = elements; } initial(outside) { - const triggeredOutside = outside || this.elements; - Array.isArray(triggeredOutside) ? triggeredOutside.map(element => this.createSVG(element)) : this.createSVG(triggeredOutside); + const triggeredOutside = outside || this._elements; + Array.isArray(triggeredOutside) ? triggeredOutside.map(element => this._createSVG(element)) : this._createSVG(triggeredOutside); } - progress(svg, target, options) { - const pieName = this.className; + _progress(svg, target, options) { + const pieName = this._className; if (options.number) { insertAdElement(svg, percent(options, pieName)); } const progressCircle = querySelector(`.${pieName}-circle-${options.index}`); const configCircle = { - fill: 'none', - 'stroke-width': options.stroke, - 'stroke-dashoffset': '264', + fill: "none", + "stroke-width": options.stroke, + "stroke-dashoffset": "264", ...strokeDasharray(), ...strokeLinecap(options) }; @@ -138,19 +139,19 @@ var CircularProgressBar = (function () { this.animationTo({ ...options, element: progressCircle }, true); - progressCircle.setAttribute('style', styleTransform(options)); + progressCircle.setAttribute("style", styleTransform(options)); setColor(progressCircle, options); - target.setAttribute('style', `width:${options.size}px;height:${options.size}px;`); + target.setAttribute("style", `width:${options.size}px;height:${options.size}px;`); } animationTo(options, initial = false) { - const pieName = this.className; - const previousConfigObj = JSON.parse(querySelector(`[data-pie-index="${options.index}"]`).getAttribute('data-pie')); + const pieName = this._className; + const previousConfigObj = JSON.parse(querySelector(`[data-pie-index="${options.index}"]`).getAttribute("data-pie")); const circleElement = querySelector(`.${pieName}-circle-${options.index}`); if (!circleElement) return; const commonConfiguration = initial ? options : { ...defaultOptions, ...previousConfigObj, ...options, - ...this.globalObj + ...this._globalObj }; if (!initial) { setColor(circleElement, commonConfiguration); @@ -166,14 +167,14 @@ var CircularProgressBar = (function () { const centerNumber = querySelector(`.${pieName}-percent-${options.index}`); if (commonConfiguration.animationOff) { if (commonConfiguration.number) centerNumber.textContent = `${commonConfiguration.percent}`; - circleElement.setAttribute('stroke-dashoffset', dashOffset(commonConfiguration.percent, commonConfiguration.inverse)); + circleElement.setAttribute("stroke-dashoffset", dashOffset(commonConfiguration.percent, commonConfiguration.inverse)); return; } - let angle = JSON.parse(circleElement.getAttribute('data-angel')); + let angle = JSON.parse(circleElement.getAttribute("data-angel")); const percent = Math.round(options.percent); if (percent == 0) { - if (commonConfiguration.number) centerNumber.textContent = '0'; - circleElement.setAttribute('stroke-dashoffset', '264'); + if (commonConfiguration.number) centerNumber.textContent = "0"; + circleElement.setAttribute("stroke-dashoffset", "264"); } if (percent > 100 || percent <= 0 || angle === percent) return; let request; @@ -189,53 +190,53 @@ var CircularProgressBar = (function () { then = now - delta % interval; angle >= commonConfiguration.percent ? i-- : i++; } - circleElement.setAttribute('stroke-dashoffset', dashOffset(i, commonConfiguration.inverse, commonConfiguration.cut)); + circleElement.setAttribute("stroke-dashoffset", dashOffset(i, commonConfiguration.inverse, commonConfiguration.cut)); if (centerNumber && commonConfiguration.number) { centerNumber.textContent = `${i}`; } - circleElement.setAttribute('data-angel', i); - circleElement.parentNode.setAttribute('aria-valuenow', i); + circleElement.setAttribute("data-angel", i); + circleElement.parentNode.setAttribute("aria-valuenow", i); if (i === percent) { cancelAnimationFrame(request); } }; requestAnimationFrame(performAnimation); } - createSVG(element) { - const index = element.getAttribute('data-pie-index'); - const json = JSON.parse(element.getAttribute('data-pie')); + _createSVG(element) { + const index = element.getAttribute("data-pie-index"); + const json = JSON.parse(element.getAttribute("data-pie")); const options = { ...defaultOptions, ...json, index, - ...this.globalObj + ...this._globalObj }; - const svg = createNSElement('svg'); + const svg = createNSElement("svg"); const configSVG = { - role: 'progressbar', + role: "progressbar", width: options.size, height: options.size, - viewBox: '0 0 100 100', - 'aria-valuemin': '0', - 'aria-valuemax': '100' + viewBox: "0 0 100 100", + "aria-valuemin": "0", + "aria-valuemax": "100" }; setAttribute(svg, configSVG); if (options.colorCircle) { - svg.appendChild(this.circle(options)); + svg.appendChild(this._circle(options)); } if (options.lineargradient) { svg.appendChild(gradient(options)); } - svg.appendChild(this.circle(options, 'top')); + svg.appendChild(this._circle(options, "top")); element.appendChild(svg); - this.progress(svg, element, options); + this._progress(svg, element, options); } - circle(options, where = 'bottom') { - const circle = createNSElement('circle'); + _circle(options, where = "bottom") { + const circle = createNSElement("circle"); let configCircle = {}; if (options.cut) { const dashoffset = 264 - (100 - options.cut) * 2.64; configCircle = { - 'stroke-dashoffset': options.inverse ? -dashoffset : dashoffset, + "stroke-dashoffset": options.inverse ? -dashoffset : dashoffset, style: styleTransform(options), ...strokeDasharray(), ...strokeLinecap(options) @@ -244,21 +245,21 @@ var CircularProgressBar = (function () { const objCircle = { fill: options.fill, stroke: options.colorCircle, - 'stroke-width': options.strokeBottom || options.stroke, + "stroke-width": options.strokeBottom || options.stroke, ...configCircle }; if (options.strokeDasharray) { Object.assign(objCircle, { ...strokeDasharray(options.strokeDasharray) }); } - const typeCircle = where === 'top' ? { - class: `${this.className}-circle-${options.index}` + const typeCircle = where === "top" ? { + class: `${this._className}-circle-${options.index}` } : objCircle; const objConfig = { - cx: '50%', - cy: '50%', + cx: "50%", + cy: "50%", r: 42, - 'shape-rendering': 'geometricPrecision', + "shape-rendering": "geometricPrecision", ...typeCircle }; setAttribute(circle, objConfig); diff --git a/dist/circularProgressBar.js.map b/dist/circularProgressBar.js.map index 45e6f32..4cdaf19 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 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, index) => {\r\n item.setAttribute('data-pie-index', index + 1);\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 if (i === percent) {\r\n cancelAnimationFrame(request);\r\n }\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","animationSmooth","smoothAnimation","strokeDasharray","type","strokeLinecap","fontSettings","options","querySelector","element","document","setColor","index","setAttribute","object","key","createNSElement","createElementNS","tspan","className","classList","add","textContent","dashOffset","count","inverse","cut","cutChar","angle","insertAdElement","el","insertAdjacentElement","gradient","defsElement","linearGradient","id","countGradient","slice","call","appendChild","map","item","stopElements","stopObj","offset","length","percent","creatTextElementSVG","obj","x","y","dy","textPosition","CircularProgressBar","constructor","pieName","globalObj","pieElements","querySelectorAll","elements","initial","outside","triggeredOutside","Array","isArray","createSVG","progress","svg","target","progressCircle","configCircle","animationTo","previousConfigObj","JSON","parse","getAttribute","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","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 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 if (i === percent) {\r\n cancelAnimationFrame(request);\r\n }\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","animationSmooth","smoothAnimation","strokeDasharray","type","strokeLinecap","fontSettings","options","querySelector","element","document","setColor","index","setAttribute","object","key","createNSElement","createElementNS","tspan","className","classList","add","textContent","dashOffset","count","inverse","cut","cutChar","angle","insertAdElement","el","insertAdjacentElement","gradient","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 c881ec1..8a72d25 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=({rotation:t,animationSmooth:e})=>`transform:rotate(${t}deg);transform-origin: 50% 50%;${e?"transition: stroke-dashoffset "+e:""}`,r=t=>({"stroke-dasharray":t||"264"}),n=({round:t})=>({"stroke-linecap":t?"round":""}),i=t=>({"font-size":t.fontSize,"font-weight":t.fontWeight}),s=t=>document.querySelector(t),o=(t,{lineargradient:e,index:r,colorSlice:n})=>{t.setAttribute("stroke",e?`url(#linear-${r})`:n)},a=(t,e)=>{for(const r in e)null==t||t.setAttribute(r,e[r])},l=t=>document.createElementNS("http://www.w3.org/2000/svg",t),c=(t,e)=>{const r=l("tspan");return r.classList.add(t),e&&(r.textContent=e),r},d=(t,e,r)=>{const n=264-t/100*(r?2.64*(100-r):264);return e?-n:n},u=(t,e,r="beforeend")=>t.insertAdjacentElement(r,e);return class{constructor(t,e={}){this.className=t,this.globalObj=e;const r=document.querySelectorAll("."+t),n=[].slice.call(r);n.map(((t,e)=>{t.setAttribute("data-pie-index",e+1)})),this.elements=n}initial(t){const e=t||this.elements;Array.isArray(e)?e.map((t=>this.createSVG(t))):this.createSVG(e)}progress(t,d,h){const f=this.className;h.number&&u(t,((t,e)=>{const r=l("text");r.classList.add(`${e}-text-${t.index}`),u(r,c(`${e}-percent-${t.index}`)),u(r,c(`${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(r,n),r})(h,f));const p=s(`.${f}-circle-${h.index}`),m={fill:"none","stroke-width":h.stroke,"stroke-dashoffset":"264",...r(),...n(h)};a(p,m),this.animationTo({...h,element:p},!0),p.setAttribute("style",e(h)),o(p,h),d.setAttribute("style",`width:${h.size}px;height:${h.size}px;`)}animationTo(e,r=!1){const n=this.className,l=JSON.parse(s(`[data-pie-index="${e.index}"]`).getAttribute("data-pie")),c=s(`.${n}-circle-${e.index}`);if(!c)return;const u=r?e:{...t,...l,...e,...this.globalObj};if(r||o(c,u),!r&&u.number){const t={fill:u.fontColor,...i(u)},e=s(`.${n}-text-${u.index}`);a(e,t)}const h=s(`.${n}-percent-${e.index}`);if(u.animationOff)return u.number&&(h.textContent=""+u.percent),void c.setAttribute("stroke-dashoffset",d(u.percent,u.inverse));let f=JSON.parse(c.getAttribute("data-angel"));const p=Math.round(e.percent);if(0==p&&(u.number&&(h.textContent="0"),c.setAttribute("stroke-dashoffset","264")),p>100||p<=0||f===p)return;let m,g=r?0:f;const b=1e3/(u.speed||1e3);let x=performance.now();const $=t=>{m=requestAnimationFrame($);const e=t-x;e>=b-.1&&(x=t-e%b,f>=u.percent?g--:g++),c.setAttribute("stroke-dashoffset",d(g,u.inverse,u.cut)),h&&u.number&&(h.textContent=""+g),c.setAttribute("data-angel",g),c.parentNode.setAttribute("aria-valuenow",g),g===p&&cancelAnimationFrame(m)};requestAnimationFrame($)}createSVG(e){const r=e.getAttribute("data-pie-index"),n=JSON.parse(e.getAttribute("data-pie")),i={...t,...n,index:r,...this.globalObj},s=l("svg"),o={role:"progressbar",width:i.size,height:i.size,viewBox:"0 0 100 100","aria-valuemin":"0","aria-valuemax":"100"};a(s,o),i.colorCircle&&s.appendChild(this.circle(i)),i.lineargradient&&s.appendChild((({index:t,lineargradient:e})=>{const r=l("defs"),n=l("linearGradient");n.id="linear-"+t;const i=[].slice.call(e);r.appendChild(n);let s=0;return i.map((t=>{const e=l("stop");a(e,{offset:s+"%","stop-color":""+t}),n.appendChild(e),s+=100/(i.length-1)})),r})(i)),s.appendChild(this.circle(i,"top")),e.appendChild(s),this.progress(s,e,i)}circle(t,i="bottom"){const s=l("circle");let o={};if(t.cut){const i=264-2.64*(100-t.cut);o={"stroke-dashoffset":t.inverse?-i:i,style:e(t),...r(),...n(t)}}const c={fill:t.fill,stroke:t.colorCircle,"stroke-width":t.strokeBottom||t.stroke,...o};t.strokeDasharray&&Object.assign(c,{...r(t.strokeDasharray)});const d={cx:"50%",cy:"50%",r:42,"shape-rendering":"geometricPrecision",..."top"===i?{class:`${this.className}-circle-${t.index}`}:c};return a(s,d),s}}}(); +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=({rotation:t,animationSmooth:e})=>`transform:rotate(${t}deg);transform-origin: 50% 50%;${e?"transition: stroke-dashoffset "+e:""}`,n=t=>({"stroke-dasharray":t||"264"}),o=({round:t})=>({"stroke-linecap":t?"round":""}),r=t=>({"font-size":t.fontSize,"font-weight":t.fontWeight}),i=t=>document.querySelector(t),s=(t,{lineargradient:e,index:n,colorSlice:o})=>{t.setAttribute("stroke",e?`url(#linear-${n})`:o)},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=(t,e,n="beforeend")=>t.insertAdjacentElement(n,e);return class{constructor(t,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}`),$={fill:"none","stroke-width":h.stroke,"stroke-dashoffset":"264",...n(),...o(h)};a(m,$),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=!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=n?0:u;const g=1e3/(f.speed||1e3);let x=performance.now();const k=t=>{$=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===m&&cancelAnimationFrame($)};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((({index:t,lineargradient:e})=>{const n=c("defs"),o=c("linearGradient");o.id="linear-"+t;const r=[].slice.call(e);n.appendChild(o);let i=0;return r.map((t=>{const e=c("stop");a(e,{offset:i+"%","stop-color":""+t}),o.appendChild(e),i+=100/(r.length-1)})),n})(r)),i.appendChild(this.u(r,"top")),e.appendChild(i),this.h(i,e,r)}u(t,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 3d62c71..0a667e4 100644 --- a/dist/circularProgressBar.umd.js +++ b/dist/circularProgressBar.umd.js @@ -111,29 +111,30 @@ class CircularProgressBar { constructor(pieName, globalObj = {}) { - this.className = pieName; - this.globalObj = globalObj; + this._className = pieName; + this._globalObj = globalObj; const pieElements = document.querySelectorAll(`.${pieName}`); const elements = [].slice.call(pieElements); - elements.map((item, index) => { - item.setAttribute('data-pie-index', index + 1); + elements.map((item, idx) => { + const id = JSON.parse(item.getAttribute("data-pie")); + item.setAttribute("data-pie-index", id.index || globalObj.index || idx + 1); }); - this.elements = elements; + this._elements = elements; } initial(outside) { - const triggeredOutside = outside || this.elements; - Array.isArray(triggeredOutside) ? triggeredOutside.map(element => this.createSVG(element)) : this.createSVG(triggeredOutside); + const triggeredOutside = outside || this._elements; + Array.isArray(triggeredOutside) ? triggeredOutside.map(element => this._createSVG(element)) : this._createSVG(triggeredOutside); } - progress(svg, target, options) { - const pieName = this.className; + _progress(svg, target, options) { + const pieName = this._className; if (options.number) { insertAdElement(svg, percent(options, pieName)); } const progressCircle = querySelector(`.${pieName}-circle-${options.index}`); const configCircle = { - fill: 'none', - 'stroke-width': options.stroke, - 'stroke-dashoffset': '264', + fill: "none", + "stroke-width": options.stroke, + "stroke-dashoffset": "264", ...strokeDasharray(), ...strokeLinecap(options) }; @@ -141,19 +142,19 @@ this.animationTo({ ...options, element: progressCircle }, true); - progressCircle.setAttribute('style', styleTransform(options)); + progressCircle.setAttribute("style", styleTransform(options)); setColor(progressCircle, options); - target.setAttribute('style', `width:${options.size}px;height:${options.size}px;`); + target.setAttribute("style", `width:${options.size}px;height:${options.size}px;`); } animationTo(options, initial = false) { - const pieName = this.className; - const previousConfigObj = JSON.parse(querySelector(`[data-pie-index="${options.index}"]`).getAttribute('data-pie')); + const pieName = this._className; + const previousConfigObj = JSON.parse(querySelector(`[data-pie-index="${options.index}"]`).getAttribute("data-pie")); const circleElement = querySelector(`.${pieName}-circle-${options.index}`); if (!circleElement) return; const commonConfiguration = initial ? options : { ...defaultOptions, ...previousConfigObj, ...options, - ...this.globalObj + ...this._globalObj }; if (!initial) { setColor(circleElement, commonConfiguration); @@ -169,14 +170,14 @@ const centerNumber = querySelector(`.${pieName}-percent-${options.index}`); if (commonConfiguration.animationOff) { if (commonConfiguration.number) centerNumber.textContent = `${commonConfiguration.percent}`; - circleElement.setAttribute('stroke-dashoffset', dashOffset(commonConfiguration.percent, commonConfiguration.inverse)); + circleElement.setAttribute("stroke-dashoffset", dashOffset(commonConfiguration.percent, commonConfiguration.inverse)); return; } - let angle = JSON.parse(circleElement.getAttribute('data-angel')); + let angle = JSON.parse(circleElement.getAttribute("data-angel")); const percent = Math.round(options.percent); if (percent == 0) { - if (commonConfiguration.number) centerNumber.textContent = '0'; - circleElement.setAttribute('stroke-dashoffset', '264'); + if (commonConfiguration.number) centerNumber.textContent = "0"; + circleElement.setAttribute("stroke-dashoffset", "264"); } if (percent > 100 || percent <= 0 || angle === percent) return; let request; @@ -192,53 +193,53 @@ then = now - delta % interval; angle >= commonConfiguration.percent ? i-- : i++; } - circleElement.setAttribute('stroke-dashoffset', dashOffset(i, commonConfiguration.inverse, commonConfiguration.cut)); + circleElement.setAttribute("stroke-dashoffset", dashOffset(i, commonConfiguration.inverse, commonConfiguration.cut)); if (centerNumber && commonConfiguration.number) { centerNumber.textContent = `${i}`; } - circleElement.setAttribute('data-angel', i); - circleElement.parentNode.setAttribute('aria-valuenow', i); + circleElement.setAttribute("data-angel", i); + circleElement.parentNode.setAttribute("aria-valuenow", i); if (i === percent) { cancelAnimationFrame(request); } }; requestAnimationFrame(performAnimation); } - createSVG(element) { - const index = element.getAttribute('data-pie-index'); - const json = JSON.parse(element.getAttribute('data-pie')); + _createSVG(element) { + const index = element.getAttribute("data-pie-index"); + const json = JSON.parse(element.getAttribute("data-pie")); const options = { ...defaultOptions, ...json, index, - ...this.globalObj + ...this._globalObj }; - const svg = createNSElement('svg'); + const svg = createNSElement("svg"); const configSVG = { - role: 'progressbar', + role: "progressbar", width: options.size, height: options.size, - viewBox: '0 0 100 100', - 'aria-valuemin': '0', - 'aria-valuemax': '100' + viewBox: "0 0 100 100", + "aria-valuemin": "0", + "aria-valuemax": "100" }; setAttribute(svg, configSVG); if (options.colorCircle) { - svg.appendChild(this.circle(options)); + svg.appendChild(this._circle(options)); } if (options.lineargradient) { svg.appendChild(gradient(options)); } - svg.appendChild(this.circle(options, 'top')); + svg.appendChild(this._circle(options, "top")); element.appendChild(svg); - this.progress(svg, element, options); + this._progress(svg, element, options); } - circle(options, where = 'bottom') { - const circle = createNSElement('circle'); + _circle(options, where = "bottom") { + const circle = createNSElement("circle"); let configCircle = {}; if (options.cut) { const dashoffset = 264 - (100 - options.cut) * 2.64; configCircle = { - 'stroke-dashoffset': options.inverse ? -dashoffset : dashoffset, + "stroke-dashoffset": options.inverse ? -dashoffset : dashoffset, style: styleTransform(options), ...strokeDasharray(), ...strokeLinecap(options) @@ -247,21 +248,21 @@ const objCircle = { fill: options.fill, stroke: options.colorCircle, - 'stroke-width': options.strokeBottom || options.stroke, + "stroke-width": options.strokeBottom || options.stroke, ...configCircle }; if (options.strokeDasharray) { Object.assign(objCircle, { ...strokeDasharray(options.strokeDasharray) }); } - const typeCircle = where === 'top' ? { - class: `${this.className}-circle-${options.index}` + const typeCircle = where === "top" ? { + class: `${this._className}-circle-${options.index}` } : objCircle; const objConfig = { - cx: '50%', - cy: '50%', + cx: "50%", + cy: "50%", r: 42, - 'shape-rendering': 'geometricPrecision', + "shape-rendering": "geometricPrecision", ...typeCircle }; setAttribute(circle, objConfig); diff --git a/dist/circularProgressBar.umd.js.map b/dist/circularProgressBar.umd.js.map index 4d86b9f..1300b40 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 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, index) => {\r\n item.setAttribute('data-pie-index', index + 1);\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 if (i === percent) {\r\n cancelAnimationFrame(request);\r\n }\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","animationSmooth","smoothAnimation","strokeDasharray","type","strokeLinecap","fontSettings","options","querySelector","element","document","setColor","index","setAttribute","object","key","createNSElement","createElementNS","tspan","className","classList","add","textContent","dashOffset","count","inverse","cut","cutChar","angle","insertAdElement","el","insertAdjacentElement","gradient","defsElement","linearGradient","id","countGradient","slice","call","appendChild","map","item","stopElements","stopObj","offset","length","percent","creatTextElementSVG","obj","x","y","dy","textPosition","CircularProgressBar","constructor","pieName","globalObj","pieElements","querySelectorAll","elements","initial","outside","triggeredOutside","Array","isArray","createSVG","progress","svg","target","progressCircle","configCircle","animationTo","previousConfigObj","JSON","parse","getAttribute","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","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 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 if (i === percent) {\r\n cancelAnimationFrame(request);\r\n }\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","animationSmooth","smoothAnimation","strokeDasharray","type","strokeLinecap","fontSettings","options","querySelector","element","document","setColor","index","setAttribute","object","key","createNSElement","createElementNS","tspan","className","classList","add","textContent","dashOffset","count","inverse","cut","cutChar","angle","insertAdElement","el","insertAdjacentElement","gradient","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":";;;;;;EAmBA,MAAMA,cAAc,GAAG;EACrBC,EAAAA,UAAU,EAAE,SADS;EAErBC,EAAAA,SAAS,EAAE,MAFU;EAGrBC,EAAAA,QAAQ,EAAE,QAHW;EAIrBC,EAAAA,UAAU,EAAE,GAJS;EAKrBC,EAAAA,cAAc,EAAE,KALK;EAMrBC,EAAAA,MAAM,EAAE,IANa;EAOrBC,EAAAA,KAAK,EAAE,KAPc;EAQrBC,EAAAA,IAAI,EAAE,MARe;EASrBC,EAAAA,IAAI,EAAE,GATe;EAUrBC,EAAAA,QAAQ,EAAE,CAAC,EAVU;EAWrBC,EAAAA,IAAI,EAAE,GAXe;EAYrBC,EAAAA,MAAM,EAAE;EAZa,CAAvB;;ECdA,MAAMC,cAAc,GAAG,CAAC;EAAEH,EAAAA,QAAF;EAAYI,EAAAA;EAAZ,CAAD,KAAmC;EACxD,QAAMC,eAAe,GAAGD,eAAe,GAClC,iCAAgCA,eAAgB,EADd,GAEnC,EAFJ;EAIA,SAAQ,oBAAmBJ,QAAS,kCAAiCK,eAAgB,EAArF;EACD,CAND;EAaA,MAAMC,eAAe,GAAIC,IAAD,IAAU;EAChC,SAAO;EACL,wBAAoBA,IAAI,IAAI;EADvB,GAAP;EAGD,CAJD;EAWA,MAAMC,aAAa,GAAG,CAAC;EAAEX,EAAAA;EAAF,CAAD,KAAe;EACnC,SAAO;EACL,sBAAkBA,KAAK,GAAG,OAAH,GAAa;EAD/B,GAAP;EAGD,CAJD;EAYA,MAAMY,YAAY,GAAIC,OAAD,IAAa;EAChC,SAAO;EACL,iBAAaA,OAAO,CAACjB,QADhB;EAEL,mBAAeiB,OAAO,CAAChB;EAFlB,GAAP;EAID,CALD;EAYA,MAAMiB,aAAa,GAAIC,OAAD,IAAaC,QAAQ,CAACF,aAAT,CAAuBC,OAAvB,CAAnC;EAQA,MAAME,QAAQ,GAAG,CAACF,OAAD,EAAU;EAAEjB,EAAAA,cAAF;EAAkBoB,EAAAA,KAAlB;EAAyBxB,EAAAA;EAAzB,CAAV,KAAoD;EACnEqB,EAAAA,OAAO,CAACI,YAAR,CACE,QADF,EAEErB,cAAc,GAAI,eAAcoB,KAAM,GAAxB,GAA6BxB,UAF7C;EAID,CALD;EAaA,MAAMyB,YAAY,GAAG,CAACJ,OAAD,EAAUK,MAAV,KAAqB;EACxC,OAAK,MAAMC,GAAX,IAAkBD,MAAlB,EAA0B;EACxBL,IAAAA,OAAO,QAAP,YAAAA,OAAO,CAAEI,YAAT,CAAsBE,GAAtB,EAA2BD,MAAM,CAACC,GAAD,CAAjC;EACD;EACF,CAJD;EAYA,MAAMC,eAAe,GAAIZ,IAAD,IACtBM,QAAQ,CAACO,eAAT,CAAyB,4BAAzB,EAAuDb,IAAvD,CADF;EAUA,MAAMc,KAAK,GAAG,CAACC,SAAD,EAAYvB,IAAZ,KAAqB;EACjC,QAAMa,OAAO,GAAGO,eAAe,CAAC,OAAD,CAA/B;EAEAP,EAAAA,OAAO,CAACW,SAAR,CAAkBC,GAAlB,CAAsBF,SAAtB;EACA,MAAIvB,IAAJ,EAAUa,OAAO,CAACa,WAAR,GAAsB1B,IAAtB;EACV,SAAOa,OAAP;EACD,CAND;EAgBA,MAAMc,UAAU,GAAG,CAACC,KAAD,EAAQC,OAAR,EAAiBC,GAAjB,KAAyB;EAC1C,QAAMC,OAAO,GAAGD,GAAG,GAAI,MAAM,GAAP,IAAe,MAAMA,GAArB,CAAH,GAA+B,GAAlD;EACA,QAAME,KAAK,GAAG,MAAOJ,KAAK,GAAG,GAAT,GAAgBG,OAApC;EAEA,SAAOF,OAAO,GAAG,CAACG,KAAJ,GAAYA,KAA1B;EACD,CALD;EAYA,MAAMC,eAAe,GAAG,CAACpB,OAAD,EAAUqB,EAAV,EAAc1B,IAAI,GAAG,WAArB,KACtBK,OAAO,CAACsB,qBAAR,CAA8B3B,IAA9B,EAAoC0B,EAApC,CADF;EAQA,MAAME,QAAQ,GAAG,CAAC;EAAEpB,EAAAA,KAAF;EAASpB,EAAAA;EAAT,CAAD,KAA+B;EAC9C,QAAMyC,WAAW,GAAGjB,eAAe,CAAC,MAAD,CAAnC;EACA,QAAMkB,cAAc,GAAGlB,eAAe,CAAC,gBAAD,CAAtC;EACAkB,EAAAA,cAAc,CAACC,EAAf,GAAqB,UAASvB,KAAM,EAApC;EAEA,QAAMwB,aAAa,GAAG,GAAGC,KAAH,CAASC,IAAT,CAAc9C,cAAd,CAAtB;EAEAyC,EAAAA,WAAW,CAACM,WAAZ,CAAwBL,cAAxB;EAEA,MAAIzC,MAAM,GAAG,CAAb;EACA2C,EAAAA,aAAa,CAACI,GAAd,CAAmBC,IAAD,IAAU;EAC1B,UAAMC,YAAY,GAAG1B,eAAe,CAAC,MAAD,CAApC;EAEA,UAAM2B,OAAO,GAAG;EACdC,MAAAA,MAAM,EAAG,GAAEnD,MAAO,GADJ;EAEd,oBAAe,GAAEgD,IAAK;EAFR,KAAhB;EAIA5B,IAAAA,YAAY,CAAC6B,YAAD,EAAeC,OAAf,CAAZ;EAEAT,IAAAA,cAAc,CAACK,WAAf,CAA2BG,YAA3B;EACAjD,IAAAA,MAAM,IAAI,OAAO2C,aAAa,CAACS,MAAd,GAAuB,CAA9B,CAAV;EACD,GAXD;EAaA,SAAOZ,WAAP;EACD,CAxBD;EAiCA,MAAMa,OAAO,GAAG,CAACvC,OAAD,EAAUY,SAAV,KAAwB;EACtC,QAAM4B,mBAAmB,GAAG/B,eAAe,CAAC,MAAD,CAA3C;EAEA+B,EAAAA,mBAAmB,CAAC3B,SAApB,CAA8BC,GAA9B,CAAmC,GAAEF,SAAU,SAAQZ,OAAO,CAACK,KAAM,EAArE,EAHsC;EAOtCiB,EAAAA,eAAe,CACbkB,mBADa,EAEb7B,KAAK,CAAE,GAAEC,SAAU,YAAWZ,OAAO,CAACK,KAAM,EAAvC,CAFQ,CAAf,CAPsC;EAatCiB,EAAAA,eAAe,CACbkB,mBADa,EAEb7B,KAAK,CAAE,GAAEC,SAAU,SAAQZ,OAAO,CAACK,KAAM,EAApC,EAAuCL,OAAO,CAACX,IAA/C,CAFQ,CAAf,CAbsC;EAmBtC,QAAMoD,GAAG,GAAG;EACVC,IAAAA,CAAC,EAAE,KADO;EAEVC,IAAAA,CAAC,EAAE,KAFO;EAGVvD,IAAAA,IAAI,EAAEY,OAAO,CAAClB,SAHJ;EAIV,mBAAe,QAJL;EAKV8D,IAAAA,EAAE,EAAE5C,OAAO,CAAC6C,YAAR,IAAwB,QALlB;EAMV,OAAG9C,YAAY,CAACC,OAAD;EANL,GAAZ;EASAM,EAAAA,YAAY,CAACkC,mBAAD,EAAsBC,GAAtB,CAAZ;EACA,SAAOD,mBAAP;EACD,CA9BD;;EClJe,MAAMM,mBAAN,CAA0B;EAOvCC,EAAAA,WAAW,CAACC,OAAD,EAAUC,SAAS,GAAG,EAAtB,EAA0B;EACnC,SAAKC,UAAL,GAAkBF,OAAlB;EACA,SAAKG,UAAL,GAAkBF,SAAlB;EAEA,UAAMG,WAAW,GAAGjD,QAAQ,CAACkD,gBAAT,CAA2B,IAAGL,OAAQ,EAAtC,CAApB;EACA,UAAMM,QAAQ,GAAG,GAAGxB,KAAH,CAASC,IAAT,CAAcqB,WAAd,CAAjB,CALmC;EAOnCE,IAAAA,QAAQ,CAACrB,GAAT,CAAa,CAACC,IAAD,EAAOqB,GAAP,KAAe;EAC1B,YAAM3B,EAAE,GAAG4B,IAAI,CAACC,KAAL,CAAWvB,IAAI,CAACwB,YAAL,CAAkB,UAAlB,CAAX,CAAX;EACAxB,MAAAA,IAAI,CAAC5B,YAAL,CACE,gBADF,EAEEsB,EAAE,CAACvB,KAAH,IAAY4C,SAAS,CAAC5C,KAAtB,IAA+BkD,GAAG,GAAG,CAFvC;EAID,KAND;EAQA,SAAKI,SAAL,GAAiBL,QAAjB;EACD;EAKDM,EAAAA,OAAO,CAACC,OAAD,EAAU;EACf,UAAMC,gBAAgB,GAAGD,OAAO,IAAI,KAAKF,SAAzC;EACAI,IAAAA,KAAK,CAACC,OAAN,CAAcF,gBAAd,IACIA,gBAAgB,CAAC7B,GAAjB,CAAsB/B,OAAD,IAAa,KAAK+D,UAAL,CAAgB/D,OAAhB,CAAlC,CADJ,GAEI,KAAK+D,UAAL,CAAgBH,gBAAhB,CAFJ;EAGD;EAODI,EAAAA,SAAS,CAACC,GAAD,EAAMC,MAAN,EAAcpE,OAAd,EAAuB;EAC9B,UAAMgD,OAAO,GAAG,KAAKE,UAArB;EACA,QAAIlD,OAAO,CAACd,MAAZ,EAAoB;EAClBoC,MAAAA,eAAe,CAAC6C,GAAD,EAAM5B,OAAO,CAACvC,OAAD,EAAUgD,OAAV,CAAb,CAAf;EACD;EAED,UAAMqB,cAAc,GAAGpE,aAAa,CAAE,IAAG+C,OAAQ,WAAUhD,OAAO,CAACK,KAAM,EAArC,CAApC;EAEA,UAAMiE,YAAY,GAAG;EACnBlF,MAAAA,IAAI,EAAE,MADa;EAEnB,sBAAgBY,OAAO,CAACR,MAFL;EAGnB,2BAAqB,KAHF;EAInB,SAAGI,eAAe,EAJC;EAKnB,SAAGE,aAAa,CAACE,OAAD;EALG,KAArB;EAOAM,IAAAA,YAAY,CAAC+D,cAAD,EAAiBC,YAAjB,CAAZ,CAf8B;EAkB9B,SAAKC,WAAL,CAAiB,EAAE,GAAGvE,OAAL;EAAcE,MAAAA,OAAO,EAAEmE;EAAvB,KAAjB,EAA0D,IAA1D,EAlB8B;EAqB9BA,IAAAA,cAAc,CAAC/D,YAAf,CAA4B,OAA5B,EAAqCb,cAAc,CAACO,OAAD,CAAnD,EArB8B;EAwB9BI,IAAAA,QAAQ,CAACiE,cAAD,EAAiBrE,OAAjB,CAAR,CAxB8B;EA2B9BoE,IAAAA,MAAM,CAAC9D,YAAP,CACE,OADF,EAEG,SAAQN,OAAO,CAACT,IAAK,aAAYS,OAAO,CAACT,IAAK,KAFjD;EAID;EAQDgF,EAAAA,WAAW,CAACvE,OAAD,EAAU4D,OAAO,GAAG,KAApB,EAA2B;EACpC,UAAMZ,OAAO,GAAG,KAAKE,UAArB;EACA,UAAMsB,iBAAiB,GAAGhB,IAAI,CAACC,KAAL,CACxBxD,aAAa,CAAE,oBAAmBD,OAAO,CAACK,KAAM,IAAnC,CAAb,CAAqDqD,YAArD,CACE,UADF,CADwB,CAA1B;EAMA,UAAMe,aAAa,GAAGxE,aAAa,CAAE,IAAG+C,OAAQ,WAAUhD,OAAO,CAACK,KAAM,EAArC,CAAnC;EAEA,QAAI,CAACoE,aAAL,EAAoB,OAVgB;EAapC,UAAMC,mBAAmB,GAAGd,OAAO,GAC/B5D,OAD+B,GAE/B,EACE,GAAGpB,cADL;EAEE,SAAG4F,iBAFL;EAGE,SAAGxE,OAHL;EAIE,SAAG,KAAKmD;EAJV,KAFJ,CAboC;EAuBpC,QAAI,CAACS,OAAL,EAAc;EACZxD,MAAAA,QAAQ,CAACqE,aAAD,EAAgBC,mBAAhB,CAAR;EACD,KAzBmC;EA4BpC,QAAI,CAACd,OAAD,IAAYc,mBAAmB,CAACxF,MAApC,EAA4C;EAC1C,YAAMyF,UAAU,GAAG;EACjBvF,QAAAA,IAAI,EAAEsF,mBAAmB,CAAC5F,SADT;EAEjB,WAAGiB,YAAY,CAAC2E,mBAAD;EAFE,OAAnB;EAIA,YAAME,WAAW,GAAG3E,aAAa,CAC9B,IAAG+C,OAAQ,SAAQ0B,mBAAmB,CAACrE,KAAM,EADf,CAAjC;EAGAC,MAAAA,YAAY,CAACsE,WAAD,EAAcD,UAAd,CAAZ;EACD;EAED,UAAME,YAAY,GAAG5E,aAAa,CAAE,IAAG+C,OAAQ,YAAWhD,OAAO,CAACK,KAAM,EAAtC,CAAlC;EAEA,QAAIqE,mBAAmB,CAACI,YAAxB,EAAsC;EACpC,UAAIJ,mBAAmB,CAACxF,MAAxB,EACE2F,YAAY,CAAC9D,WAAb,GAA4B,GAAE2D,mBAAmB,CAACnC,OAAQ,EAA1D;EACFkC,MAAAA,aAAa,CAACnE,YAAd,CACE,mBADF,EAEEU,UAAU,CAAC0D,mBAAmB,CAACnC,OAArB,EAA8BmC,mBAAmB,CAACxD,OAAlD,CAFZ;EAIA;EACD,KAjDmC;EAoDpC,QAAIG,KAAK,GAAGmC,IAAI,CAACC,KAAL,CAAWgB,aAAa,CAACf,YAAd,CAA2B,YAA3B,CAAX,CAAZ,CApDoC;EAuDpC,UAAMnB,OAAO,GAAGwC,IAAI,CAAC5F,KAAL,CAAWa,OAAO,CAACuC,OAAnB,CAAhB,CAvDoC;EA0DpC,QAAIA,OAAO,IAAI,CAAf,EAAkB;EAChB,UAAImC,mBAAmB,CAACxF,MAAxB,EAAgC2F,YAAY,CAAC9D,WAAb,GAA2B,GAA3B;EAChC0D,MAAAA,aAAa,CAACnE,YAAd,CAA2B,mBAA3B,EAAgD,KAAhD;EACD;EAED,QAAIiC,OAAO,GAAG,GAAV,IAAiBA,OAAO,IAAI,CAA5B,IAAiClB,KAAK,KAAKkB,OAA/C,EAAwD;EAExD,QAAIyC,OAAJ;EACA,QAAIC,CAAC,GAAGrB,OAAO,GAAG,CAAH,GAAOvC,KAAtB;EAEA,UAAM6D,GAAG,GAAGR,mBAAmB,CAACS,KAApB,IAA6B,IAAzC;EACA,UAAMC,QAAQ,GAAG,OAAOF,GAAxB;EACA,UAAMG,SAAS,GAAG,GAAlB;EACA,QAAIC,IAAI,GAAGC,WAAW,CAACC,GAAZ,EAAX;EAEA,UAAMC,gBAAgB,GAAID,GAAD,IAAS;EAChCR,MAAAA,OAAO,GAAGU,qBAAqB,CAACD,gBAAD,CAA/B;EACA,YAAME,KAAK,GAAGH,GAAG,GAAGF,IAApB;EAEA,UAAIK,KAAK,IAAIP,QAAQ,GAAGC,SAAxB,EAAmC;EACjCC,QAAAA,IAAI,GAAGE,GAAG,GAAIG,KAAK,GAAGP,QAAtB;EAEA/D,QAAAA,KAAK,IAAIqD,mBAAmB,CAACnC,OAA7B,GAAuC0C,CAAC,EAAxC,GAA6CA,CAAC,EAA9C;EACD;EAEDR,MAAAA,aAAa,CAACnE,YAAd,CACE,mBADF,EAEEU,UAAU,CAACiE,CAAD,EAAIP,mBAAmB,CAACxD,OAAxB,EAAiCwD,mBAAmB,CAACvD,GAArD,CAFZ;EAIA,UAAI0D,YAAY,IAAIH,mBAAmB,CAACxF,MAAxC,EAAgD;EAC9C2F,QAAAA,YAAY,CAAC9D,WAAb,GAA4B,GAAEkE,CAAE,EAAhC;EACD;EAEDR,MAAAA,aAAa,CAACnE,YAAd,CAA2B,YAA3B,EAAyC2E,CAAzC;EACAR,MAAAA,aAAa,CAACmB,UAAd,CAAyBtF,YAAzB,CAAsC,eAAtC,EAAuD2E,CAAvD;EAEA,UAAIA,CAAC,KAAK1C,OAAV,EAAmB;EACjBsD,QAAAA,oBAAoB,CAACb,OAAD,CAApB;EACD;EACF,KAxBD;EA0BAU,IAAAA,qBAAqB,CAACD,gBAAD,CAArB;EACD;EAODxB,EAAAA,UAAU,CAAC/D,OAAD,EAAU;EAClB,UAAMG,KAAK,GAAGH,OAAO,CAACwD,YAAR,CAAqB,gBAArB,CAAd;EACA,UAAMoC,IAAI,GAAGtC,IAAI,CAACC,KAAL,CAAWvD,OAAO,CAACwD,YAAR,CAAqB,UAArB,CAAX,CAAb;EAEA,UAAM1D,OAAO,GAAG,EAAE,GAAGpB,cAAL;EAAqB,SAAGkH,IAAxB;EAA8BzF,MAAAA,KAA9B;EAAqC,SAAG,KAAK8C;EAA7C,KAAhB;EAEA,UAAMgB,GAAG,GAAG1D,eAAe,CAAC,KAAD,CAA3B;EAEA,UAAMsF,SAAS,GAAG;EAChBC,MAAAA,IAAI,EAAE,aADU;EAEhBC,MAAAA,KAAK,EAAEjG,OAAO,CAACT,IAFC;EAGhB2G,MAAAA,MAAM,EAAElG,OAAO,CAACT,IAHA;EAIhB4G,MAAAA,OAAO,EAAE,aAJO;EAKhB,uBAAiB,GALD;EAMhB,uBAAiB;EAND,KAAlB;EASA7F,IAAAA,YAAY,CAAC6D,GAAD,EAAM4B,SAAN,CAAZ,CAjBkB;EAoBlB,QAAI/F,OAAO,CAACoG,WAAZ,EAAyB;EACvBjC,MAAAA,GAAG,CAACnC,WAAJ,CAAgB,KAAKqE,OAAL,CAAarG,OAAb,CAAhB;EACD,KAtBiB;EAyBlB,QAAIA,OAAO,CAACf,cAAZ,EAA4B;EAC1BkF,MAAAA,GAAG,CAACnC,WAAJ,CAAgBP,QAAQ,CAACzB,OAAD,CAAxB;EACD;EAEDmE,IAAAA,GAAG,CAACnC,WAAJ,CAAgB,KAAKqE,OAAL,CAAarG,OAAb,EAAsB,KAAtB,CAAhB;EAEAE,IAAAA,OAAO,CAAC8B,WAAR,CAAoBmC,GAApB;EAEA,SAAKD,SAAL,CAAeC,GAAf,EAAoBjE,OAApB,EAA6BF,OAA7B;EACD;EASDqG,EAAAA,OAAO,CAACrG,OAAD,EAAUsG,KAAK,GAAG,QAAlB,EAA4B;EACjC,UAAMC,MAAM,GAAG9F,eAAe,CAAC,QAAD,CAA9B;EAEA,QAAI6D,YAAY,GAAG,EAAnB;EACA,QAAItE,OAAO,CAACmB,GAAZ,EAAiB;EACf,YAAMqF,UAAU,GAAG,MAAM,CAAC,MAAMxG,OAAO,CAACmB,GAAf,IAAsB,IAA/C;EACAmD,MAAAA,YAAY,GAAG;EACb,6BAAqBtE,OAAO,CAACkB,OAAR,GAAkB,CAACsF,UAAnB,GAAgCA,UADxC;EAEbC,QAAAA,KAAK,EAAEhH,cAAc,CAACO,OAAD,CAFR;EAGb,WAAGJ,eAAe,EAHL;EAIb,WAAGE,aAAa,CAACE,OAAD;EAJH,OAAf;EAMD;EAED,UAAM0G,SAAS,GAAG;EAChBtH,MAAAA,IAAI,EAAEY,OAAO,CAACZ,IADE;EAEhBI,MAAAA,MAAM,EAAEQ,OAAO,CAACoG,WAFA;EAGhB,sBAAgBpG,OAAO,CAAC2G,YAAR,IAAwB3G,OAAO,CAACR,MAHhC;EAIhB,SAAG8E;EAJa,KAAlB;EAOA,QAAItE,OAAO,CAACJ,eAAZ,EAA6B;EAC3BgH,MAAAA,MAAM,CAACC,MAAP,CAAcH,SAAd,EAAyB,EAAE,GAAG9G,eAAe,CAACI,OAAO,CAACJ,eAAT;EAApB,OAAzB;EACD;EAED,UAAMkH,UAAU,GACdR,KAAK,KAAK,KAAV,GACI;EAAES,MAAAA,KAAK,EAAG,GAAE,KAAK7D,UAAW,WAAUlD,OAAO,CAACK,KAAM;EAApD,KADJ,GAEIqG,SAHN;EAKA,UAAMM,SAAS,GAAG;EAChBC,MAAAA,EAAE,EAAE,KADY;EAEhBC,MAAAA,EAAE,EAAE,KAFY;EAGhBC,MAAAA,CAAC,EAAE,EAHa;EAIhB,yBAAmB,oBAJH;EAKhB,SAAGL;EALa,KAAlB;EAQAxG,IAAAA,YAAY,CAACiG,MAAD,EAASS,SAAT,CAAZ;EAEA,WAAOT,MAAP;EACD;EA9QsC;;;;;;;;"} \ No newline at end of file diff --git a/dist/circularProgressBar.umd.min.js b/dist/circularProgressBar.umd.min.js index 453a918..f0c087f 100644 --- a/dist/circularProgressBar.umd.min.js +++ b/dist/circularProgressBar.umd.min.js @@ -1 +1 @@ -!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).CircularProgressBar=t()}(this,(function(){"use strict";const e={colorSlice:"#00a1ff",fontColor:"#000",fontSize:"1.6rem",fontWeight:400,lineargradient:!1,number:!0,round:!1,fill:"none",unit:"%",rotation:-90,size:200,stroke:10},t=({rotation:e,animationSmooth:t})=>`transform:rotate(${e}deg);transform-origin: 50% 50%;${t?"transition: stroke-dashoffset "+t:""}`,n=e=>({"stroke-dasharray":e||"264"}),i=({round:e})=>({"stroke-linecap":e?"round":""}),r=e=>({"font-size":e.fontSize,"font-weight":e.fontWeight}),s=e=>document.querySelector(e),o=(e,{lineargradient:t,index:n,colorSlice:i})=>{e.setAttribute("stroke",t?`url(#linear-${n})`:i)},a=(e,t)=>{for(const n in t)null==e||e.setAttribute(n,t[n])},l=e=>document.createElementNS("http://www.w3.org/2000/svg",e),c=(e,t)=>{const n=l("tspan");return n.classList.add(e),t&&(n.textContent=t),n},d=(e,t,n)=>{const i=264-e/100*(n?2.64*(100-n):264);return t?-i:i},u=(e,t,n="beforeend")=>e.insertAdjacentElement(n,t);return class{constructor(e,t={}){this.className=e,this.globalObj=t;const n=document.querySelectorAll("."+e),i=[].slice.call(n);i.map(((e,t)=>{e.setAttribute("data-pie-index",t+1)})),this.elements=i}initial(e){const t=e||this.elements;Array.isArray(t)?t.map((e=>this.createSVG(e))):this.createSVG(t)}progress(e,d,f){const p=this.className;f.number&&u(e,((e,t)=>{const n=l("text");n.classList.add(`${t}-text-${e.index}`),u(n,c(`${t}-percent-${e.index}`)),u(n,c(`${t}-unit-${e.index}`,e.unit));const i={x:"50%",y:"50%",fill:e.fontColor,"text-anchor":"middle",dy:e.textPosition||"0.35em",...r(e)};return a(n,i),n})(f,p));const h=s(`.${p}-circle-${f.index}`),m={fill:"none","stroke-width":f.stroke,"stroke-dashoffset":"264",...n(),...i(f)};a(h,m),this.animationTo({...f,element:h},!0),h.setAttribute("style",t(f)),o(h,f),d.setAttribute("style",`width:${f.size}px;height:${f.size}px;`)}animationTo(t,n=!1){const i=this.className,l=JSON.parse(s(`[data-pie-index="${t.index}"]`).getAttribute("data-pie")),c=s(`.${i}-circle-${t.index}`);if(!c)return;const u=n?t:{...e,...l,...t,...this.globalObj};if(n||o(c,u),!n&&u.number){const e={fill:u.fontColor,...r(u)},t=s(`.${i}-text-${u.index}`);a(t,e)}const f=s(`.${i}-percent-${t.index}`);if(u.animationOff)return u.number&&(f.textContent=""+u.percent),void c.setAttribute("stroke-dashoffset",d(u.percent,u.inverse));let p=JSON.parse(c.getAttribute("data-angel"));const h=Math.round(t.percent);if(0==h&&(u.number&&(f.textContent="0"),c.setAttribute("stroke-dashoffset","264")),h>100||h<=0||p===h)return;let m,b=n?0:p;const g=1e3/(u.speed||1e3);let x=performance.now();const $=e=>{m=requestAnimationFrame($);const t=e-x;t>=g-.1&&(x=e-t%g,p>=u.percent?b--:b++),c.setAttribute("stroke-dashoffset",d(b,u.inverse,u.cut)),f&&u.number&&(f.textContent=""+b),c.setAttribute("data-angel",b),c.parentNode.setAttribute("aria-valuenow",b),b===h&&cancelAnimationFrame(m)};requestAnimationFrame($)}createSVG(t){const n=t.getAttribute("data-pie-index"),i=JSON.parse(t.getAttribute("data-pie")),r={...e,...i,index:n,...this.globalObj},s=l("svg"),o={role:"progressbar",width:r.size,height:r.size,viewBox:"0 0 100 100","aria-valuemin":"0","aria-valuemax":"100"};a(s,o),r.colorCircle&&s.appendChild(this.circle(r)),r.lineargradient&&s.appendChild((({index:e,lineargradient:t})=>{const n=l("defs"),i=l("linearGradient");i.id="linear-"+e;const r=[].slice.call(t);n.appendChild(i);let s=0;return r.map((e=>{const t=l("stop");a(t,{offset:s+"%","stop-color":""+e}),i.appendChild(t),s+=100/(r.length-1)})),n})(r)),s.appendChild(this.circle(r,"top")),t.appendChild(s),this.progress(s,t,r)}circle(e,r="bottom"){const s=l("circle");let o={};if(e.cut){const r=264-2.64*(100-e.cut);o={"stroke-dashoffset":e.inverse?-r:r,style:t(e),...n(),...i(e)}}const c={fill:e.fill,stroke:e.colorCircle,"stroke-width":e.strokeBottom||e.stroke,...o};e.strokeDasharray&&Object.assign(c,{...n(e.strokeDasharray)});const d={cx:"50%",cy:"50%",r:42,"shape-rendering":"geometricPrecision",..."top"===r?{class:`${this.className}-circle-${e.index}`}:c};return a(s,d),s}}})); +!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=({rotation:t,animationSmooth:e})=>`transform:rotate(${t}deg);transform-origin: 50% 50%;${e?"transition: stroke-dashoffset "+e:""}`,n=t=>({"stroke-dasharray":t||"264"}),o=({round:t})=>({"stroke-linecap":t?"round":""}),i=t=>({"font-size":t.fontSize,"font-weight":t.fontWeight}),s=t=>document.querySelector(t),r=(t,{lineargradient:e,index:n,colorSlice:o})=>{t.setAttribute("stroke",e?`url(#linear-${n})`:o)},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=(t,e,n="beforeend")=>t.insertAdjacentElement(n,e);return class{constructor(t,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 m=s(`.${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)),r(m,h),d.setAttribute("style",`width:${h.size}px;height:${h.size}px;`)}animationTo(e,n=!1){const o=this.t,c=JSON.parse(s(`[data-pie-index="${e.index}"]`).getAttribute("data-pie")),l=s(`.${o}-circle-${e.index}`);if(!l)return;const f=n?e:{...t,...c,...e,...this.o};if(n||r(l,f),!n&&f.number){const t={fill:f.fontColor,...i(f)},e=s(`.${o}-text-${f.index}`);a(e,t)}const h=s(`.${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,$=n?0:u;const g=1e3/(f.speed||1e3);let x=performance.now();const k=t=>{p=requestAnimationFrame(k);const e=t-x;e>=g-.1&&(x=t-e%g,u>=f.percent?$--:$++),l.setAttribute("stroke-dashoffset",d($,f.inverse,f.cut)),h&&f.number&&(h.textContent=""+$),l.setAttribute("data-angel",$),l.parentNode.setAttribute("aria-valuenow",$),$===m&&cancelAnimationFrame(p)};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},s=c("svg"),r={role:"progressbar",width:i.size,height:i.size,viewBox:"0 0 100 100","aria-valuemin":"0","aria-valuemax":"100"};a(s,r),i.colorCircle&&s.appendChild(this.u(i)),i.lineargradient&&s.appendChild((({index:t,lineargradient:e})=>{const n=c("defs"),o=c("linearGradient");o.id="linear-"+t;const i=[].slice.call(e);n.appendChild(o);let s=0;return i.map((t=>{const e=c("stop");a(e,{offset:s+"%","stop-color":""+t}),o.appendChild(e),s+=100/(i.length-1)})),n})(i)),s.appendChild(this.u(i,"top")),e.appendChild(s),this.h(s,e,i)}u(t,i="bottom"){const s=c("circle");let r={};if(t.cut){const i=264-2.64*(100-t.cut);r={"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,...r};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(s,d),s}}})); diff --git a/docs/circularProgressBar.min.js b/docs/circularProgressBar.min.js index 09fe146..c1a1e6d 100644 --- a/docs/circularProgressBar.min.js +++ b/docs/circularProgressBar.min.js @@ -1,272 +1,2 @@ -var CircularProgressBar = (function () { - 'use strict'; - - const defaultOptions = { - colorSlice: '#00a1ff', - fontColor: '#000', - fontSize: '1.6rem', - fontWeight: 400, - lineargradient: false, - number: true, - round: false, - fill: 'none', - unit: '%', - rotation: -90, - size: 200, - stroke: 10 - }; - - const styleTransform = ({ - rotation, - animationSmooth - }) => { - const smoothAnimation = animationSmooth ? `transition: stroke-dashoffset ${animationSmooth}` : ''; - return `transform:rotate(${rotation}deg);transform-origin: 50% 50%;${smoothAnimation}`; - }; - const strokeDasharray = type => { - return { - 'stroke-dasharray': type || '264' - }; - }; - const strokeLinecap = ({ - round - }) => { - return { - 'stroke-linecap': round ? 'round' : '' - }; - }; - const fontSettings = options => { - return { - 'font-size': options.fontSize, - 'font-weight': options.fontWeight - }; - }; - const querySelector = element => document.querySelector(element); - const setColor = (element, { - lineargradient, - index, - colorSlice - }) => { - element.setAttribute('stroke', lineargradient ? `url(#linear-${index})` : colorSlice); - }; - const setAttribute = (element, object) => { - for (const key in object) { - element == null ? void 0 : element.setAttribute(key, object[key]); - } - }; - const createNSElement = type => document.createElementNS('http://www.w3.org/2000/svg', type); - const tspan = (className, unit) => { - const element = createNSElement('tspan'); - element.classList.add(className); - if (unit) element.textContent = unit; - return element; - }; - const dashOffset = (count, inverse, cut) => { - const cutChar = cut ? 264 / 100 * (100 - cut) : 264; - const angle = 264 - count / 100 * cutChar; - return inverse ? -angle : angle; - }; - const insertAdElement = (element, el, type = 'beforeend') => element.insertAdjacentElement(type, el); - const gradient = ({ - index, - lineargradient - }) => { - const defsElement = createNSElement('defs'); - const linearGradient = createNSElement('linearGradient'); - linearGradient.id = `linear-${index}`; - const countGradient = [].slice.call(lineargradient); - defsElement.appendChild(linearGradient); - let number = 0; - countGradient.map(item => { - const stopElements = createNSElement('stop'); - const stopObj = { - offset: `${number}%`, - 'stop-color': `${item}` - }; - setAttribute(stopElements, stopObj); - linearGradient.appendChild(stopElements); - number += 100 / (countGradient.length - 1); - }); - return defsElement; - }; - const percent = (options, className) => { - const creatTextElementSVG = createNSElement('text'); - creatTextElementSVG.classList.add(`${className}-text-${options.index}`); - insertAdElement(creatTextElementSVG, tspan(`${className}-percent-${options.index}`)); - insertAdElement(creatTextElementSVG, tspan(`${className}-unit-${options.index}`, options.unit)); - const obj = { - x: '50%', - y: '50%', - fill: options.fontColor, - 'text-anchor': 'middle', - dy: options.textPosition || '0.35em', - ...fontSettings(options) - }; - setAttribute(creatTextElementSVG, obj); - return creatTextElementSVG; - }; - - class CircularProgressBar { - constructor(pieName, globalObj = {}) { - this.className = pieName; - this.globalObj = globalObj; - const pieElements = document.querySelectorAll(`.${pieName}`); - const elements = [].slice.call(pieElements); - elements.map((item, index) => { - item.setAttribute('data-pie-index', index + 1); - }); - this.elements = elements; - } - initial(outside) { - const triggeredOutside = outside || this.elements; - Array.isArray(triggeredOutside) ? triggeredOutside.map(element => this.createSVG(element)) : this.createSVG(triggeredOutside); - } - progress(svg, target, options) { - const pieName = this.className; - if (options.number) { - insertAdElement(svg, percent(options, pieName)); - } - const progressCircle = querySelector(`.${pieName}-circle-${options.index}`); - const configCircle = { - fill: 'none', - 'stroke-width': options.stroke, - 'stroke-dashoffset': '264', - ...strokeDasharray(), - ...strokeLinecap(options) - }; - setAttribute(progressCircle, configCircle); - this.animationTo({ ...options, - element: progressCircle - }, true); - progressCircle.setAttribute('style', styleTransform(options)); - setColor(progressCircle, options); - target.setAttribute('style', `width:${options.size}px;height:${options.size}px;`); - } - animationTo(options, initial = false) { - const pieName = this.className; - const previousConfigObj = JSON.parse(querySelector(`[data-pie-index="${options.index}"]`).getAttribute('data-pie')); - const circleElement = querySelector(`.${pieName}-circle-${options.index}`); - if (!circleElement) return; - const commonConfiguration = initial ? options : { ...defaultOptions, - ...previousConfigObj, - ...options, - ...this.globalObj - }; - if (!initial) { - setColor(circleElement, commonConfiguration); - } - if (!initial && commonConfiguration.number) { - const fontconfig = { - fill: commonConfiguration.fontColor, - ...fontSettings(commonConfiguration) - }; - const textElement = querySelector(`.${pieName}-text-${commonConfiguration.index}`); - setAttribute(textElement, fontconfig); - } - const centerNumber = querySelector(`.${pieName}-percent-${options.index}`); - if (commonConfiguration.animationOff) { - if (commonConfiguration.number) centerNumber.textContent = `${commonConfiguration.percent}`; - circleElement.setAttribute('stroke-dashoffset', dashOffset(commonConfiguration.percent, commonConfiguration.inverse)); - return; - } - let angle = JSON.parse(circleElement.getAttribute('data-angel')); - const percent = Math.round(options.percent); - if (percent == 0) { - if (commonConfiguration.number) centerNumber.textContent = '0'; - circleElement.setAttribute('stroke-dashoffset', '264'); - } - if (percent > 100 || percent <= 0 || angle === percent) return; - let request; - let i = initial ? 0 : angle; - const fps = commonConfiguration.speed || 1000; - const interval = 1000 / fps; - const tolerance = 0.1; - let then = performance.now(); - const performAnimation = now => { - request = requestAnimationFrame(performAnimation); - const delta = now - then; - if (delta >= interval - tolerance) { - then = now - delta % interval; - angle >= commonConfiguration.percent ? i-- : i++; - } - circleElement.setAttribute('stroke-dashoffset', dashOffset(i, commonConfiguration.inverse, commonConfiguration.cut)); - if (centerNumber && commonConfiguration.number) { - centerNumber.textContent = `${i}`; - } - circleElement.setAttribute('data-angel', i); - circleElement.parentNode.setAttribute('aria-valuenow', i); - if (i === percent) { - cancelAnimationFrame(request); - } - }; - requestAnimationFrame(performAnimation); - } - createSVG(element) { - const index = element.getAttribute('data-pie-index'); - const json = JSON.parse(element.getAttribute('data-pie')); - const options = { ...defaultOptions, - ...json, - index, - ...this.globalObj - }; - const svg = createNSElement('svg'); - const configSVG = { - role: 'progressbar', - width: options.size, - height: options.size, - viewBox: '0 0 100 100', - 'aria-valuemin': '0', - 'aria-valuemax': '100' - }; - setAttribute(svg, configSVG); - if (options.colorCircle) { - svg.appendChild(this.circle(options)); - } - if (options.lineargradient) { - svg.appendChild(gradient(options)); - } - svg.appendChild(this.circle(options, 'top')); - element.appendChild(svg); - this.progress(svg, element, options); - } - circle(options, where = 'bottom') { - const circle = createNSElement('circle'); - let configCircle = {}; - if (options.cut) { - const dashoffset = 264 - (100 - options.cut) * 2.64; - configCircle = { - 'stroke-dashoffset': options.inverse ? -dashoffset : dashoffset, - style: styleTransform(options), - ...strokeDasharray(), - ...strokeLinecap(options) - }; - } - const objCircle = { - fill: options.fill, - stroke: options.colorCircle, - 'stroke-width': options.strokeBottom || options.stroke, - ...configCircle - }; - if (options.strokeDasharray) { - Object.assign(objCircle, { ...strokeDasharray(options.strokeDasharray) - }); - } - const typeCircle = where === 'top' ? { - class: `${this.className}-circle-${options.index}` - } : objCircle; - const objConfig = { - cx: '50%', - cy: '50%', - r: 42, - 'shape-rendering': 'geometricPrecision', - ...typeCircle - }; - setAttribute(circle, objConfig); - return circle; - } - } - - return CircularProgressBar; - -})(); +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=({rotation:t,animationSmooth:e})=>`transform:rotate(${t}deg);transform-origin: 50% 50%;${e?"transition: stroke-dashoffset "+e:""}`,n=t=>({"stroke-dasharray":t||"264"}),o=({round:t})=>({"stroke-linecap":t?"round":""}),r=t=>({"font-size":t.fontSize,"font-weight":t.fontWeight}),i=t=>document.querySelector(t),s=(t,{lineargradient:e,index:n,colorSlice:o})=>{t.setAttribute("stroke",e?`url(#linear-${n})`:o)},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=(t,e,n="beforeend")=>t.insertAdjacentElement(n,e);return class{constructor(t,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}`),$={fill:"none","stroke-width":h.stroke,"stroke-dashoffset":"264",...n(),...o(h)};a(m,$),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=!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=n?0:u;const g=1e3/(f.speed||1e3);let x=performance.now();const k=t=>{$=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===m&&cancelAnimationFrame($)};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((({index:t,lineargradient:e})=>{const n=c("defs"),o=c("linearGradient");o.id="linear-"+t;const r=[].slice.call(e);n.appendChild(o);let i=0;return r.map((t=>{const e=c("stop");a(e,{offset:i+"%","stop-color":""+t}),o.appendChild(e),i+=100/(r.length-1)})),n})(r)),i.appendChild(this.u(r,"top")),e.appendChild(i),this.h(i,e,r)}u(t,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 c388a55..5ca1ae3 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 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, index) => {\r\n item.setAttribute('data-pie-index', index + 1);\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 if (i === percent) {\r\n cancelAnimationFrame(request);\r\n }\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","animationSmooth","smoothAnimation","strokeDasharray","type","strokeLinecap","fontSettings","options","querySelector","element","document","setColor","index","setAttribute","object","key","createNSElement","createElementNS","tspan","className","classList","add","textContent","dashOffset","count","inverse","cut","cutChar","angle","insertAdElement","el","insertAdjacentElement","gradient","defsElement","linearGradient","id","countGradient","slice","call","appendChild","map","item","stopElements","stopObj","offset","length","percent","creatTextElementSVG","obj","x","y","dy","textPosition","CircularProgressBar","constructor","pieName","globalObj","pieElements","querySelectorAll","elements","initial","outside","triggeredOutside","Array","isArray","createSVG","progress","svg","target","progressCircle","configCircle","animationTo","previousConfigObj","JSON","parse","getAttribute","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","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.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 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 if (i === percent) {\r\n cancelAnimationFrame(request);\r\n }\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","animationSmooth","strokeDasharray","type","strokeLinecap","fontSettings","options","querySelector","element","document","setColor","index","setAttribute","object","key","createNSElement","createElementNS","tspan","className","classList","add","textContent","dashOffset","count","inverse","cut","angle","insertAdElement","el","insertAdjacentElement","constructor","pieName","globalObj","_className","_globalObj","pieElements","querySelectorAll","elements","slice","call","map","item","idx","id","JSON","parse","getAttribute","_elements","initial","outside","triggeredOutside","this","Array","isArray","_createSVG","_progress","svg","target","creatTextElementSVG","obj","x","y","dy","textPosition","percent","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","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/docs/global.css b/docs/global.css index 3d2d8ad..a6b05b9 100644 --- a/docs/global.css +++ b/docs/global.css @@ -65,7 +65,7 @@ h1 { text-transform: uppercase; } -[type='range'] { +[type="range"] { width: 200px; } @@ -110,13 +110,13 @@ code { margin-top: -20px; } -[data-pie-index='2'] { +[data-pie-index="2"] { position: relative; border-radius: 50%; box-shadow: inset 0 0 25px 10px #a2caff; } -[data-pie-index='16'] { +[data-pie-index="16"] { position: relative; border-radius: 50%; box-shadow: inset 0 0 25px 10px #f50057; diff --git a/docs/index.html b/docs/index.html index 2d5ce07..ca79ba0 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,12 +1,14 @@ - - - - - - + + + + + circular progress bar @@ -15,17 +17,15 @@

circular-progress-bar

progress
- +
-
minimal
code
-
-
+ 
             data-pie='{
@@ -39,8 +39,7 @@ 
circular-progress-bar

           
minimal width shadow

           
code
-
-
+ 
             // css
@@ -61,9 +60,10 @@ 
circular-progress-bar

           
simple

           
code
-
-
+ 
             data-pie='{ 
@@ -80,9 +80,10 @@ 
circular-progress-bar

           
linear gradient

           
code
-
-
+ 
             data-pie='{ 
@@ -99,9 +100,10 @@ 
circular-progress-bar

           
counterclockwise

           
code
-
-
+ 
             data-pie='{ 
@@ -119,9 +121,10 @@ 
circular-progress-bar

           
stroke-dasharray

           
code
-
-
+ 
             data-pie='{ 
@@ -141,9 +144,10 @@ 
circular-progress-bar

           
animation off

           
code
-
-
+ 
             data-pie='{ 
@@ -161,8 +165,10 @@ 
circular-progress-bar

           
without number

           
code
-
-
+ 
             data-pie='{ 
@@ -179,9 +185,10 @@ 
circular-progress-bar

           
rotation

           
code
-
-
+ 
             data-pie='{ 
@@ -199,9 +206,10 @@ 
circular-progress-bar

           
fill

           
code
-
-
+ 
                   data-pie='{ 
@@ -222,9 +230,10 @@ 
circular-progress-bar

           
unit

           
code
-
-
+ 
             data-pie='{ 
@@ -244,9 +253,10 @@ 
circular-progress-bar

           
stroke bottom

           
code
-
-
+ 
             data-pie='{ 
@@ -264,9 +274,10 @@ 
circular-progress-bar

           
SPEED

           
code
-
-
+ 
             data-pie='{ 
@@ -284,9 +295,10 @@ 
circular-progress-bar

           
cut

           
code
-
-
+ 
             data-pie='{ 
@@ -306,10 +318,26 @@ 
circular-progress-bar

           
texpositon

           
code
-
- Random image +
+ Random image 
@@ -328,8 +356,10 @@ 
circular-progress-bar

           
mixed

           
code
-
+
❤
@@ -383,9 +413,10 @@

circular-progress-bar

update props
code
-
-
+ 
             <script>
@@ -412,9 +443,10 @@ 
circular-progress-bar

           
smooth animation

           
code
-
-
+ 
             data-pie='{ 
@@ -441,12 +473,13 @@ 
circular-progress-bar

 
 // js
 const globalConfig = {
-  "speed": 30,
-  "animationSmooth": "1s ease-out",
-  "strokeBottom": 5,
-  "colorSlice": "#FF6D00",
-  "colorCircle": "#f1f1f1",
-  "round": true
+  index: 58,
+  speed: 30,
+  animationSmooth: "1s ease-out",
+  strokeBottom: 5,
+  colorSlice: "#FF6D00",
+  colorCircle: "#f1f1f1",
+  round: true
 }
 
 const global = new CircularProgressBar('global', globalConfig);
@@ -457,37 +490,37 @@ 
circular-progress-bar
- - \ No newline at end of file + diff --git a/package.json b/package.json index e3b7610..9d44787 100644 --- a/package.json +++ b/package.json @@ -1,14 +1,16 @@ { "name": "circular-progress-bar", - "version": "1.1.8", + "version": "1.1.9", "main": "dist/circularProgressBar.js", "description": "A circular progress bar in svg", "repository": "https://github.com/tomik23/circular-progress-bar.git", "author": "Grzegorz Tomicki", "license": "MIT", "scripts": { + "watch": "rollup --config --watch --sourcemap", "build": "rollup --config --environment PRODUCTION", - "watch": "rollup --config --watch --sourcemap" + "prod": "yarn build && yarn lib:version", + "lib:version": "node scripts/version.js" }, "keywords": [ "js", diff --git a/rollup.config.js b/rollup.config.js index 2deee31..2abf0d0 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -1,47 +1,55 @@ -import { babel } from '@rollup/plugin-babel'; -import { terser } from 'rollup-plugin-terser'; -import serve from 'rollup-plugin-serve'; -import livereload from 'rollup-plugin-livereload'; -import cleanup from 'rollup-plugin-cleanup'; +import { babel } from "@rollup/plugin-babel"; +import { terser } from "rollup-plugin-terser"; +import serve from "rollup-plugin-serve"; +import livereload from "rollup-plugin-livereload"; +import cleanup from "rollup-plugin-cleanup"; -import pkg from './package.json'; +import pkg from "./package.json"; const { PRODUCTION } = process.env; -const input = 'sources/index.js'; +const input = "sources/index.js"; const targets = { targets: { - browsers: ['defaults', 'not IE 11', 'maintained node versions'], + browsers: ["defaults", "not IE 11", "maintained node versions"], }, }; const targetsIE = { targets: { - browsers: ['>0.2%', 'not dead', 'not op_mini all'], + browsers: [">0.2%", "not dead", "not op_mini all"], }, }; const pluginsConfig = (target) => [ babel({ - babelHelpers: 'bundled', + babelHelpers: "bundled", presets: [ [ - '@babel/preset-env', + "@babel/preset-env", { // debug: true, // useBuiltIns: 'usage', - useBuiltIns: 'entry', + useBuiltIns: "entry", corejs: 3, loose: true, ...target, }, ], ], - plugins: [['@babel/proposal-class-properties', { loose: true }]], + plugins: [["@babel/proposal-class-properties", { loose: true }]], }), cleanup(), ]; +const terserConfig = { + mangle: { + properties: { + regex: /^_/, + }, + }, +}; + export default [ // ------------------------------------------------------------ // iife @@ -50,8 +58,8 @@ export default [ plugins: pluginsConfig(targets), watch: false, output: { - name: 'CircularProgressBar', - format: 'iife', + name: "CircularProgressBar", + format: "iife", file: pkg.main, sourcemap: true, }, @@ -61,23 +69,30 @@ export default [ plugins: pluginsConfig(targets), watch: false, output: { - name: 'CircularProgressBar', - format: 'iife', + name: "CircularProgressBar", + format: "iife", sourcemap: false, - file: 'dist/circularProgressBar.min.js', - plugins: [terser()], + file: "dist/circularProgressBar.min.js", + plugins: [ + terser({ + ...terserConfig, + }), + ], }, }, { input, plugins: pluginsConfig(targets), output: { - name: 'CircularProgressBar', - format: 'iife', + name: "CircularProgressBar", + format: "iife", sourcemap: true, - file: 'docs/circularProgressBar.min.js', + file: "docs/circularProgressBar.min.js", plugins: [ - !PRODUCTION && serve({ open: true, contentBase: ['docs'] }), + terser({ + ...terserConfig, + }), + !PRODUCTION && serve({ open: true, contentBase: ["docs"] }), !PRODUCTION && livereload(), ], }, @@ -90,19 +105,19 @@ export default [ plugins: pluginsConfig(targets), output: [ { - name: 'CircularProgressBar', - format: 'umd', + name: "CircularProgressBar", + format: "umd", sourcemap: true, - file: 'dist/circularProgressBar.umd.js', + file: "dist/circularProgressBar.umd.js", }, { - name: 'CircularProgressBar', - format: 'umd', + name: "CircularProgressBar", + format: "umd", sourcemap: false, - file: 'dist/circularProgressBar.umd.min.js', + file: "dist/circularProgressBar.umd.min.js", plugins: [ terser({ - mangle: true, + ...terserConfig, compress: { drop_console: true, drop_debugger: true }, }), ], @@ -117,19 +132,19 @@ export default [ plugins: pluginsConfig(targets), output: [ { - name: 'CircularProgressBar', - format: 'es', + name: "CircularProgressBar", + format: "es", sourcemap: true, - file: 'dist/circularProgressBar.esm.js', + file: "dist/circularProgressBar.esm.js", }, { - name: 'CircularProgressBar', - format: 'es', + name: "CircularProgressBar", + format: "es", sourcemap: false, - file: 'dist/circularProgressBar.esm.min.js', + file: "dist/circularProgressBar.esm.min.js", plugins: [ terser({ - mangle: true, + ...terserConfig, compress: { drop_console: true, drop_debugger: true }, }), ], @@ -144,11 +159,11 @@ export default [ plugins: pluginsConfig(targetsIE), output: [ { - name: 'CircularProgressBar', - format: 'iife', + name: "CircularProgressBar", + format: "iife", sourcemap: false, - file: 'dist/circularProgressBar.ie.min.js', - plugins: [terser()], + file: "dist/circularProgressBar.ie.min.js", + plugins: [terser({ ...terserConfig })], }, ], }, diff --git a/scripts/version.js b/scripts/version.js new file mode 100644 index 0000000..5e1daa7 --- /dev/null +++ b/scripts/version.js @@ -0,0 +1,30 @@ +var fs = require('fs'); + +var pkg = require('../package.json'); + +const newVersion = pkg.version; + +function updateVersion(file, newVersion) { + fs.readFile(file, 'utf8', function (err, data) { + if (err) { + return console.log(err); + } + + const matches = data.match(/\@(.*?)\/dist/i)[1]; + + const reg = new RegExp(matches.replace(/\./g, '\\.'), 'g'); + + const result = data.replace(reg, newVersion); + + fs.writeFile(file, result, 'utf8', function (err) { + if (err) return console.log(err); + }); + }); +} +// ------------------------------------------------------------ + +const someFiles = ['README.md']; + +someFiles.forEach((file) => { + updateVersion(file, newVersion); +}); diff --git a/sources/helpers/defaults.js b/sources/helpers/defaults.js index 9dad439..ff9165c 100644 --- a/sources/helpers/defaults.js +++ b/sources/helpers/defaults.js @@ -18,15 +18,15 @@ * @return {CPBOptions} */ const defaultOptions = { - colorSlice: '#00a1ff', - fontColor: '#000', - fontSize: '1.6rem', + colorSlice: "#00a1ff", + fontColor: "#000", + fontSize: "1.6rem", fontWeight: 400, lineargradient: false, number: true, round: false, - fill: 'none', - unit: '%', + fill: "none", + unit: "%", rotation: -90, size: 200, stroke: 10, diff --git a/sources/helpers/function.js b/sources/helpers/function.js index f5eb12f..41255b2 100644 --- a/sources/helpers/function.js +++ b/sources/helpers/function.js @@ -6,7 +6,7 @@ const styleTransform = ({ rotation, animationSmooth }) => { const smoothAnimation = animationSmooth ? `transition: stroke-dashoffset ${animationSmooth}` - : ''; + : ""; return `transform:rotate(${rotation}deg);transform-origin: 50% 50%;${smoothAnimation}`; }; @@ -18,7 +18,7 @@ const styleTransform = ({ rotation, animationSmooth }) => { */ const strokeDasharray = (type) => { return { - 'stroke-dasharray': type || '264', + "stroke-dasharray": type || "264", }; }; @@ -29,7 +29,7 @@ const strokeDasharray = (type) => { */ const strokeLinecap = ({ round }) => { return { - 'stroke-linecap': round ? 'round' : '', + "stroke-linecap": round ? "round" : "", }; }; @@ -41,8 +41,8 @@ const strokeLinecap = ({ round }) => { */ const fontSettings = (options) => { return { - 'font-size': options.fontSize, - 'font-weight': options.fontWeight, + "font-size": options.fontSize, + "font-weight": options.fontWeight, }; }; @@ -61,7 +61,7 @@ const querySelector = (element) => document.querySelector(element); */ const setColor = (element, { lineargradient, index, colorSlice }) => { element.setAttribute( - 'stroke', + "stroke", lineargradient ? `url(#linear-${index})` : colorSlice ); }; @@ -85,7 +85,7 @@ const setAttribute = (element, object) => { * @returns {SVGElement} */ const createNSElement = (type) => - document.createElementNS('http://www.w3.org/2000/svg', type); + document.createElementNS("http://www.w3.org/2000/svg", type); /** * Create svg tspan @@ -95,7 +95,7 @@ const createNSElement = (type) => * @returns {HTMLElement} */ const tspan = (className, unit) => { - const element = createNSElement('tspan'); + const element = createNSElement("tspan"); element.classList.add(className); if (unit) element.textContent = unit; @@ -122,7 +122,7 @@ const dashOffset = (count, inverse, cut) => { * @param {HTMLElement} el * @param {String} type */ -const insertAdElement = (element, el, type = 'beforeend') => +const insertAdElement = (element, el, type = "beforeend") => element.insertAdjacentElement(type, el); /** @@ -131,8 +131,8 @@ const insertAdElement = (element, el, type = 'beforeend') => * @param {Object} object */ const gradient = ({ index, lineargradient }) => { - const defsElement = createNSElement('defs'); - const linearGradient = createNSElement('linearGradient'); + const defsElement = createNSElement("defs"); + const linearGradient = createNSElement("linearGradient"); linearGradient.id = `linear-${index}`; const countGradient = [].slice.call(lineargradient); @@ -141,11 +141,11 @@ const gradient = ({ index, lineargradient }) => { let number = 0; countGradient.map((item) => { - const stopElements = createNSElement('stop'); + const stopElements = createNSElement("stop"); const stopObj = { offset: `${number}%`, - 'stop-color': `${item}`, + "stop-color": `${item}`, }; setAttribute(stopElements, stopObj); @@ -164,7 +164,7 @@ const gradient = ({ index, lineargradient }) => { * @param {String} className */ const percent = (options, className) => { - const creatTextElementSVG = createNSElement('text'); + const creatTextElementSVG = createNSElement("text"); creatTextElementSVG.classList.add(`${className}-text-${options.index}`); @@ -183,11 +183,11 @@ const percent = (options, className) => { // config to svg text const obj = { - x: '50%', - y: '50%', + x: "50%", + y: "50%", fill: options.fontColor, - 'text-anchor': 'middle', - dy: options.textPosition || '0.35em', + "text-anchor": "middle", + dy: options.textPosition || "0.35em", ...fontSettings(options), }; diff --git a/sources/index.js b/sources/index.js index d0ff1e8..fb423fd 100644 --- a/sources/index.js +++ b/sources/index.js @@ -1,4 +1,4 @@ -import defaultOptions from './helpers/defaults'; +import defaultOptions from "./helpers/defaults"; import { createNSElement, dashOffset, @@ -12,7 +12,7 @@ import { strokeDasharray, strokeLinecap, styleTransform, -} from './helpers/function'; +} from "./helpers/function"; /** * @class @@ -25,27 +25,31 @@ export default class CircularProgressBar { * @param {Object} globalObj - global configuration */ constructor(pieName, globalObj = {}) { - this.className = pieName; - this.globalObj = globalObj; + this._className = pieName; + this._globalObj = globalObj; const pieElements = document.querySelectorAll(`.${pieName}`); const elements = [].slice.call(pieElements); // add index to all progressbar - elements.map((item, index) => { - item.setAttribute('data-pie-index', index + 1); + elements.map((item, idx) => { + const id = JSON.parse(item.getAttribute("data-pie")); + item.setAttribute( + "data-pie-index", + id.index || globalObj.index || idx + 1 + ); }); - this.elements = elements; + this._elements = elements; } /** * @param {object} outside */ initial(outside) { - const triggeredOutside = outside || this.elements; + const triggeredOutside = outside || this._elements; Array.isArray(triggeredOutside) - ? triggeredOutside.map((element) => this.createSVG(element)) - : this.createSVG(triggeredOutside); + ? triggeredOutside.map((element) => this._createSVG(element)) + : this._createSVG(triggeredOutside); } /** @@ -53,8 +57,8 @@ export default class CircularProgressBar { * @param {HTMLElement} target * @param {Object} options */ - progress(svg, target, options) { - const pieName = this.className; + _progress(svg, target, options) { + const pieName = this._className; if (options.number) { insertAdElement(svg, percent(options, pieName)); } @@ -62,9 +66,9 @@ export default class CircularProgressBar { const progressCircle = querySelector(`.${pieName}-circle-${options.index}`); const configCircle = { - fill: 'none', - 'stroke-width': options.stroke, - 'stroke-dashoffset': '264', + fill: "none", + "stroke-width": options.stroke, + "stroke-dashoffset": "264", ...strokeDasharray(), ...strokeLinecap(options), }; @@ -74,14 +78,14 @@ export default class CircularProgressBar { this.animationTo({ ...options, element: progressCircle }, true); // set style and rotation - progressCircle.setAttribute('style', styleTransform(options)); + progressCircle.setAttribute("style", styleTransform(options)); // set color setColor(progressCircle, options); // set width and height on div target.setAttribute( - 'style', + "style", `width:${options.size}px;height:${options.size}px;` ); } @@ -93,10 +97,10 @@ export default class CircularProgressBar { * @param {Boolean} initial */ animationTo(options, initial = false) { - const pieName = this.className; + const pieName = this._className; const previousConfigObj = JSON.parse( querySelector(`[data-pie-index="${options.index}"]`).getAttribute( - 'data-pie' + "data-pie" ) ); @@ -111,7 +115,7 @@ export default class CircularProgressBar { ...defaultOptions, ...previousConfigObj, ...options, - ...this.globalObj, + ...this._globalObj, }; // update color circle @@ -137,22 +141,22 @@ export default class CircularProgressBar { if (commonConfiguration.number) centerNumber.textContent = `${commonConfiguration.percent}`; circleElement.setAttribute( - 'stroke-dashoffset', + "stroke-dashoffset", dashOffset(commonConfiguration.percent, commonConfiguration.inverse) ); return; } // get numer percent from data-angel - let angle = JSON.parse(circleElement.getAttribute('data-angel')); + let angle = JSON.parse(circleElement.getAttribute("data-angel")); // round if number is decimal const percent = Math.round(options.percent); // if percent 0 then set at start 0% if (percent == 0) { - if (commonConfiguration.number) centerNumber.textContent = '0'; - circleElement.setAttribute('stroke-dashoffset', '264'); + if (commonConfiguration.number) centerNumber.textContent = "0"; + circleElement.setAttribute("stroke-dashoffset", "264"); } if (percent > 100 || percent <= 0 || angle === percent) return; @@ -176,15 +180,15 @@ export default class CircularProgressBar { } circleElement.setAttribute( - 'stroke-dashoffset', + "stroke-dashoffset", dashOffset(i, commonConfiguration.inverse, commonConfiguration.cut) ); if (centerNumber && commonConfiguration.number) { centerNumber.textContent = `${i}`; } - circleElement.setAttribute('data-angel', i); - circleElement.parentNode.setAttribute('aria-valuenow', i); + circleElement.setAttribute("data-angel", i); + circleElement.parentNode.setAttribute("aria-valuenow", i); if (i === percent) { cancelAnimationFrame(request); @@ -199,28 +203,28 @@ export default class CircularProgressBar { * * @param {HTMLElement} element */ - createSVG(element) { - const index = element.getAttribute('data-pie-index'); - const json = JSON.parse(element.getAttribute('data-pie')); + _createSVG(element) { + const index = element.getAttribute("data-pie-index"); + const json = JSON.parse(element.getAttribute("data-pie")); - const options = { ...defaultOptions, ...json, index, ...this.globalObj }; + const options = { ...defaultOptions, ...json, index, ...this._globalObj }; - const svg = createNSElement('svg'); + const svg = createNSElement("svg"); const configSVG = { - role: 'progressbar', + role: "progressbar", width: options.size, height: options.size, - viewBox: '0 0 100 100', - 'aria-valuemin': '0', - 'aria-valuemax': '100', + viewBox: "0 0 100 100", + "aria-valuemin": "0", + "aria-valuemax": "100", }; setAttribute(svg, configSVG); // colorCircle if (options.colorCircle) { - svg.appendChild(this.circle(options)); + svg.appendChild(this._circle(options)); } // gradient @@ -228,11 +232,11 @@ export default class CircularProgressBar { svg.appendChild(gradient(options)); } - svg.appendChild(this.circle(options, 'top')); + svg.appendChild(this._circle(options, "top")); element.appendChild(svg); - this.progress(svg, element, options); + this._progress(svg, element, options); } /** @@ -242,14 +246,14 @@ export default class CircularProgressBar { * @param {String} where * @returns {SVGElement} */ - circle(options, where = 'bottom') { - const circle = createNSElement('circle'); + _circle(options, where = "bottom") { + const circle = createNSElement("circle"); let configCircle = {}; if (options.cut) { const dashoffset = 264 - (100 - options.cut) * 2.64; configCircle = { - 'stroke-dashoffset': options.inverse ? -dashoffset : dashoffset, + "stroke-dashoffset": options.inverse ? -dashoffset : dashoffset, style: styleTransform(options), ...strokeDasharray(), ...strokeLinecap(options), @@ -259,7 +263,7 @@ export default class CircularProgressBar { const objCircle = { fill: options.fill, stroke: options.colorCircle, - 'stroke-width': options.strokeBottom || options.stroke, + "stroke-width": options.strokeBottom || options.stroke, ...configCircle, }; @@ -268,15 +272,15 @@ export default class CircularProgressBar { } const typeCircle = - where === 'top' - ? { class: `${this.className}-circle-${options.index}` } + where === "top" + ? { class: `${this._className}-circle-${options.index}` } : objCircle; const objConfig = { - cx: '50%', - cy: '50%', + cx: "50%", + cy: "50%", r: 42, - 'shape-rendering': 'geometricPrecision', + "shape-rendering": "geometricPrecision", ...typeCircle, };