dikplhd/public/assets/js/pages/pages-profile.js

158 lines
5.4 KiB
JavaScript

/**
* Theme: Attex - Responsive Tailwind CSS 3 Admin Dashboard
* Author: Coderthemes
* Module/App: Profile
*/
(function () {
"use strict";
var Profile = function () {
this.body = document.querySelector("body");
this.charts = [];
};
Profile.prototype.respChart = function (selector, type, data, options) {
var draw3 = Chart.controllers.bar.prototype.draw;
Chart.controllers.bar.draw = function () {
draw3.apply(this, arguments);
var ctx = this.chart.ctx;
var _fill = ctx.fill;
ctx.fill = function () {
ctx.save();
ctx.shadowColor = 'rgba(0,0,0,0.01)';
ctx.shadowBlur = 5;
ctx.shadowOffsetX = 4;
ctx.shadowOffsetY = 5;
_fill.apply(this, arguments);
ctx.restore();
};
};
//default config
Chart.defaults.font.color = "rgba(93,106,120,0.2)";
Chart.defaults.scale.grid.color = "rgba(93,106,120,0.2)";
var ctx = selector.getContext("2d");
var container = selector.parentNode;
function generateChart() {
var ww = selector.setAttribute('width', container.offsetWidth);
var chart;
switch (type) {
case 'Line':
chart = new Chart(ctx, { type: 'line', data: data, options: options });
break;
case 'Doughnut':
chart = new Chart(ctx, { type: 'doughnut', data: data, options: options });
break;
case 'Pie':
chart = new Chart(ctx, { type: 'pie', data: data, options: options });
break;
case 'Bar':
chart = new Chart(ctx, { type: 'bar', data: data, options: options });
break;
case 'Radar':
chart = new Chart(ctx, { type: 'radar', data: data, options: options });
break;
case 'PolarArea':
chart = new Chart(ctx, { data: data, type: 'polarArea', options: options });
break;
}
return chart;
}
return generateChart();
};
Profile.prototype.initCharts = function () {
var charts = [];
var highPerformingProduct = document.getElementById('high-performing-product');
if (highPerformingProduct) {
var ctx = highPerformingProduct.getContext("2d");
var gradientStroke = ctx.createLinearGradient(0, 500, 0, 150);
gradientStroke.addColorStop(0, "#409c6b");
gradientStroke.addColorStop(1, "#3e60d5");
var barChart = {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
datasets: [
{
label: "Orders",
backgroundColor: gradientStroke,
borderColor: gradientStroke,
hoverBackgroundColor: gradientStroke,
hoverBorderColor: gradientStroke,
data: [65, 59, 80, 81, 56, 89, 40, 32, 65, 59, 80, 81]
},
{
label: "Revenue",
backgroundColor: "rgba(93,106,120,0.2)",
borderColor: "rgba(93,106,120,0.2)",
hoverBackgroundColor: "rgba(93,106,120,0.2)",
hoverBorderColor: "rgba(93,106,120,0.2)",
data: [89, 40, 32, 65, 59, 80, 81, 56, 89, 40, 65, 59]
}
]
};
var barOpts = {
maintainAspectRatio: false,
datasets: {
bar: {
barPercentage: 0.7,
categoryPercentage: 0.5
}
},
plugins: {
legend: {
display: false
}
},
scales: {
y: {
grid: {
display: false,
color: "rgba(0,0,0,0.05)"
},
stacked: false,
ticks: {
stepSize: 20
}
},
x: {
stacked: false,
grid: {
color: "rgba(0,0,0,0.01)"
}
}
}
};
charts.push(this.respChart(highPerformingProduct, 'Bar', barChart, barOpts));
}
return charts;
};
Profile.prototype.init = function () {
var self = this;
Chart.defaults.font.family = '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif';
self.charts = this.initCharts();
window.addEventListener('resize', function (e) {
self.charts.forEach(function (chart) {
try {
chart.destroy();
} catch (err) { }
});
self.charts = self.initCharts();
});
};
var profile = new Profile();
profile.init();
})();