@talentsoft-opensource/uxp-themes
Version:
Talentsoft UX themes
85 lines (84 loc) • 3.29 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Chart = /** @class */ (function () {
function Chart($chart, $percentElm, $animationSpeed) {
if ($animationSpeed === void 0) { $animationSpeed = 1; }
this.rootDegrees = -90;
this.chart = $chart;
this.animationSpeed = $animationSpeed;
//Give size for Rétina
$chart.width = 200;
$chart.height = 200;
$chart.style.width = '100px';
$chart.style.height = '100px';
this.ctx = $chart.getContext('2d');
this.ctx.scale(2, 2);
this.percentElement = $percentElm;
this.updateChart();
}
Chart.prototype.updateChart = function () {
var dataPercent = this.chart.getAttribute('data-pourcent');
this.startDegrees = this.rootDegrees;
this.start = 0;
this.maxDegrees = (this.getDegrees(dataPercent) || 0) + this.rootDegrees;
this.degreeChart = dataPercent ? null : '--';
if (this.animation) {
cancelAnimationFrame(this.animation);
}
this.animation = requestAnimationFrame(this.createChart.bind(this));
};
Chart.prototype.createChart = function () {
var color;
if (this.start < 90 && this.start > 0) {
color = '#D11548';
}
else if (this.start > 90 && this.start < 180) {
color = '#FD9141';
}
else {
color = '#308649';
}
this.percentElement.innerHTML = this.degreeChart || Math.ceil(this.start / 360 * 100) + "%";
this.percentElement.style.color = color;
if (this.degreeChart || this.maxDegrees === this.rootDegrees) {
this.clearCircle();
}
else if (this.ctx && this.startDegrees < this.maxDegrees) {
this.clearCircle();
var step = Math.round(this.animationSpeed * (1 - this.startDegrees / this.maxDegrees));
var remainig = this.maxDegrees - this.startDegrees;
step = step > remainig ? remainig : (step < 1 ? 1 : step);
this.start += step;
this.ctx.beginPath();
this.ctx.arc(50, 50, 46, this.degreesToRadians(this.rootDegrees), this.degreesToRadians(this.startDegrees), false);
this.startDegrees += step;
this.ctx.lineWidth = 4;
this.ctx.strokeStyle = color;
this.ctx.lineCap = 'round';
this.ctx.stroke();
this.animation = requestAnimationFrame(this.createChart.bind(this));
}
else {
cancelAnimationFrame(this.animation);
}
};
Chart.prototype.clearCircle = function () {
if (this.ctx) {
this.ctx.clearRect(0, 0, 200, 200);
this.ctx.beginPath();
this.ctx.arc(50, 50, 46, 0, Math.PI * 2, true);
this.ctx.lineWidth = 4;
this.ctx.strokeStyle = '#FFFFFF';
this.ctx.lineCap = 'round';
this.ctx.stroke();
}
};
Chart.prototype.degreesToRadians = function (degrees) {
return (degrees * Math.PI) / 180;
};
Chart.prototype.getDegrees = function (degrees) {
return degrees ? (360 * +degrees) / 100 : null;
};
return Chart;
}());
exports.default = Chart;