You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1430 lines
37 KiB
1430 lines
37 KiB
/**
|
|
* Modern Chart Component
|
|
* Replaces jQuery Sparkline with Chart.js
|
|
*/
|
|
|
|
import { Chart, registerables } from 'chart.js';
|
|
import { COLORS } from '../constants/colors';
|
|
|
|
// Register Chart.js components
|
|
Chart.register(...registerables);
|
|
|
|
class ChartComponent {
|
|
constructor() {
|
|
this.charts = new Map(); // Store chart instances
|
|
this.debounceTimer = null;
|
|
this.init();
|
|
}
|
|
|
|
init() {
|
|
// Only disable resizing for small sparkline charts
|
|
this.createSparklines();
|
|
this.createOtherCharts();
|
|
this.setupResizeHandler();
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
* Create sparklines (only for dashboard page)
|
|
*/
|
|
createSparklines() {
|
|
// Only create sparklines if we're on a page that has them
|
|
const sparklineExists = document.getElementById('sparklinedash');
|
|
if (!sparklineExists) {
|
|
console.log('Skipping sparklines - not on dashboard page');
|
|
return;
|
|
}
|
|
|
|
const sparklineConfigs = [
|
|
{
|
|
id: 'sparklinedash',
|
|
data: [0, 5, 6, 10, 9, 12, 4, 9],
|
|
color: '#4caf50'
|
|
},
|
|
{
|
|
id: 'sparklinedash2',
|
|
data: [0, 5, 6, 10, 9, 12, 4, 9],
|
|
color: '#9675ce'
|
|
},
|
|
{
|
|
id: 'sparklinedash3',
|
|
data: [0, 5, 6, 10, 9, 12, 4, 9],
|
|
color: '#03a9f3'
|
|
},
|
|
{
|
|
id: 'sparklinedash4',
|
|
data: [0, 5, 6, 10, 9, 12, 4, 9],
|
|
color: '#f96262'
|
|
}
|
|
];
|
|
|
|
sparklineConfigs.forEach(config => {
|
|
// Only create if the target element exists
|
|
if (document.getElementById(config.id)) {
|
|
this.createSparklineChart(config);
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Create sparkline chart from configuration
|
|
*/
|
|
createSparklineChart({ id, data, color }) {
|
|
let canvas = document.getElementById(id);
|
|
|
|
// Only proceed if we have a valid target element
|
|
if (!canvas) {
|
|
console.log(`Skipping chart ${id} - target element not found`);
|
|
return;
|
|
}
|
|
|
|
// If element exists but isn't a canvas, replace it with canvas
|
|
if (canvas.tagName !== 'CANVAS') {
|
|
const parent = canvas.parentNode;
|
|
if (!parent) {
|
|
console.log(`Skipping chart ${id} - no parent element`);
|
|
return;
|
|
}
|
|
|
|
// Create new canvas element
|
|
const newCanvas = document.createElement('canvas');
|
|
newCanvas.id = id;
|
|
newCanvas.width = 100;
|
|
newCanvas.height = 20;
|
|
newCanvas.style.width = '100px';
|
|
newCanvas.style.height = '20px';
|
|
|
|
// Replace the span with canvas
|
|
parent.replaceChild(newCanvas, canvas);
|
|
canvas = newCanvas;
|
|
} else {
|
|
// Set canvas dimensions to match original sparkline
|
|
canvas.width = 100;
|
|
canvas.height = 20;
|
|
canvas.style.width = '100px';
|
|
canvas.style.height = '20px';
|
|
}
|
|
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
const chart = new Chart(ctx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: data.map((_, i) => i),
|
|
datasets: [{
|
|
data: data,
|
|
backgroundColor: color,
|
|
borderColor: color,
|
|
borderWidth: 0,
|
|
barPercentage: 0.6,
|
|
categoryPercentage: 0.8
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: false,
|
|
maintainAspectRatio: false,
|
|
animation: false,
|
|
events: [],
|
|
onResize: null,
|
|
scales: {
|
|
x: {
|
|
display: false
|
|
},
|
|
y: {
|
|
display: false
|
|
}
|
|
},
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
},
|
|
tooltip: {
|
|
enabled: false
|
|
}
|
|
},
|
|
elements: {
|
|
bar: {
|
|
borderRadius: 1
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
this.charts.set(id, chart);
|
|
}
|
|
|
|
/**
|
|
* Create other chart types (only if they exist on the page)
|
|
*/
|
|
createOtherCharts() {
|
|
// Determine if we're on the dashboard or charts page
|
|
const isChartsPage = document.getElementById('area-chart') !== null;
|
|
const isDashboard = !isChartsPage && document.getElementById('line-chart') !== null;
|
|
|
|
// Create Monthly Stats chart with enhanced dual-line data (dashboard only)
|
|
if (isDashboard) {
|
|
this.createMonthlyStatsChart();
|
|
}
|
|
|
|
// Charts page specific charts (only on charts page)
|
|
if (isChartsPage) {
|
|
this.createChartsPageCharts();
|
|
}
|
|
|
|
// Only create charts if their target elements exist
|
|
if (document.getElementById('sparkline')) {
|
|
this.createLineChart('sparkline', [5, 6, 7, 9, 9, 5, 3, 2, 2, 4, 6, 7]);
|
|
}
|
|
|
|
if (document.getElementById('compositebar')) {
|
|
this.createCompositeChart('compositebar', [4, 1, 5, 7, 9, 9, 8, 7, 6, 6, 4, 7, 8, 4, 3, 2, 2, 5, 6, 7]);
|
|
}
|
|
|
|
// Regular sparklines with custom colors (only on pages that have them)
|
|
this.createCustomSparklines();
|
|
|
|
// Easy Pie Charts (only if they exist)
|
|
this.createEasyPieCharts();
|
|
}
|
|
|
|
/**
|
|
* Create enhanced Monthly Stats chart with dual lines and more data
|
|
*/
|
|
createMonthlyStatsChart() {
|
|
const canvas = document.getElementById('line-chart');
|
|
if (!canvas) return;
|
|
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
// Enhanced data for monthly stats
|
|
const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
|
|
const salesData = [120, 135, 145, 165, 180, 195, 210, 225, 240, 220, 200, 185];
|
|
const profitData = [45, 52, 58, 62, 68, 75, 82, 88, 92, 85, 78, 72];
|
|
|
|
const chart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: months,
|
|
datasets: [
|
|
{
|
|
label: 'Sales ($K)',
|
|
data: salesData,
|
|
borderColor: '#4caf50',
|
|
backgroundColor: 'rgba(76, 175, 80, 0.1)',
|
|
borderWidth: 3,
|
|
pointRadius: 5,
|
|
pointHoverRadius: 7,
|
|
pointBackgroundColor: '#4caf50',
|
|
pointBorderColor: '#ffffff',
|
|
pointBorderWidth: 2,
|
|
tension: 0.4,
|
|
fill: false
|
|
},
|
|
{
|
|
label: 'Profit ($K)',
|
|
data: profitData,
|
|
borderColor: '#2196f3',
|
|
backgroundColor: 'rgba(33, 150, 243, 0.1)',
|
|
borderWidth: 3,
|
|
pointRadius: 5,
|
|
pointHoverRadius: 7,
|
|
pointBackgroundColor: '#2196f3',
|
|
pointBorderColor: '#ffffff',
|
|
pointBorderWidth: 2,
|
|
tension: 0.4,
|
|
fill: false
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: true,
|
|
position: 'top',
|
|
labels: {
|
|
padding: 20,
|
|
font: {
|
|
size: 12,
|
|
weight: '600'
|
|
},
|
|
color: '#333'
|
|
}
|
|
},
|
|
tooltip: {
|
|
enabled: true,
|
|
backgroundColor: 'rgba(255, 255, 255, 0.95)',
|
|
titleColor: '#333',
|
|
bodyColor: '#666',
|
|
borderColor: '#ddd',
|
|
borderWidth: 1,
|
|
cornerRadius: 8,
|
|
displayColors: true,
|
|
intersect: false,
|
|
mode: 'index',
|
|
callbacks: {
|
|
label: function(context) {
|
|
return context.dataset.label + ': $' + context.parsed.y + 'K';
|
|
}
|
|
}
|
|
}
|
|
},
|
|
scales: {
|
|
x: {
|
|
grid: {
|
|
display: false
|
|
},
|
|
ticks: {
|
|
color: '#666',
|
|
font: {
|
|
size: 11
|
|
}
|
|
}
|
|
},
|
|
y: {
|
|
beginAtZero: true,
|
|
grid: {
|
|
color: 'rgba(0, 0, 0, 0.05)',
|
|
borderDash: [5, 5]
|
|
},
|
|
ticks: {
|
|
color: '#666',
|
|
font: {
|
|
size: 11
|
|
},
|
|
callback: function(value) {
|
|
return '$' + value + 'K';
|
|
}
|
|
}
|
|
}
|
|
},
|
|
interaction: {
|
|
intersect: false,
|
|
mode: 'index'
|
|
}
|
|
}
|
|
});
|
|
|
|
this.charts.set('line-chart', chart);
|
|
}
|
|
|
|
/**
|
|
* Create line chart (only if target exists)
|
|
*/
|
|
createLineChart(id, data) {
|
|
let canvas = document.getElementById(id);
|
|
|
|
// Only proceed if target element exists
|
|
if (!canvas) {
|
|
console.log(`Skipping line chart ${id} - target element not found`);
|
|
return;
|
|
}
|
|
|
|
// If element exists but isn't a canvas, replace it with canvas
|
|
if (canvas.tagName !== 'CANVAS') {
|
|
const parent = canvas.parentNode;
|
|
if (!parent) {
|
|
console.log(`Skipping line chart ${id} - no parent element`);
|
|
return;
|
|
}
|
|
|
|
// Create new canvas element
|
|
const newCanvas = document.createElement('canvas');
|
|
newCanvas.id = id;
|
|
newCanvas.width = 100;
|
|
newCanvas.height = 20;
|
|
newCanvas.style.width = '100px';
|
|
newCanvas.style.height = '20px';
|
|
|
|
// Replace element with canvas
|
|
parent.replaceChild(newCanvas, canvas);
|
|
canvas = newCanvas;
|
|
} else {
|
|
canvas.width = 100;
|
|
canvas.height = 20;
|
|
canvas.style.width = '100px';
|
|
canvas.style.height = '20px';
|
|
}
|
|
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
const chart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: data.map((_, i) => i),
|
|
datasets: [{
|
|
data: data,
|
|
borderColor: COLORS['blue-500'],
|
|
backgroundColor: 'transparent',
|
|
borderWidth: 1,
|
|
pointRadius: 0,
|
|
tension: 0.4
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: false,
|
|
maintainAspectRatio: false,
|
|
animation: false,
|
|
events: [],
|
|
onResize: null,
|
|
scales: {
|
|
x: { display: false },
|
|
y: { display: false }
|
|
},
|
|
plugins: {
|
|
legend: { display: false },
|
|
tooltip: { enabled: false }
|
|
}
|
|
}
|
|
});
|
|
|
|
this.charts.set(id, chart);
|
|
}
|
|
|
|
/**
|
|
* Create composite chart (only if target exists)
|
|
*/
|
|
createCompositeChart(id, data) {
|
|
let canvas = document.getElementById(id);
|
|
|
|
// Only proceed if target element exists
|
|
if (!canvas) {
|
|
console.log(`Skipping composite chart ${id} - target element not found`);
|
|
return;
|
|
}
|
|
|
|
// If element exists but isn't a canvas, replace it with canvas
|
|
if (canvas.tagName !== 'CANVAS') {
|
|
const parent = canvas.parentNode;
|
|
if (!parent) {
|
|
console.log(`Skipping composite chart ${id} - no parent element`);
|
|
return;
|
|
}
|
|
|
|
// Create new canvas element
|
|
const newCanvas = document.createElement('canvas');
|
|
newCanvas.id = id;
|
|
newCanvas.width = 100;
|
|
newCanvas.height = 20;
|
|
newCanvas.style.width = '100px';
|
|
newCanvas.style.height = '20px';
|
|
|
|
// Replace element with canvas
|
|
parent.replaceChild(newCanvas, canvas);
|
|
canvas = newCanvas;
|
|
} else {
|
|
canvas.width = 100;
|
|
canvas.height = 20;
|
|
canvas.style.width = '100px';
|
|
canvas.style.height = '20px';
|
|
}
|
|
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
const chart = new Chart(ctx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: data.map((_, i) => i),
|
|
datasets: [
|
|
{
|
|
type: 'bar',
|
|
data: data,
|
|
backgroundColor: '#aaf',
|
|
borderColor: '#aaf',
|
|
borderWidth: 0
|
|
},
|
|
{
|
|
type: 'line',
|
|
data: data,
|
|
borderColor: 'red',
|
|
backgroundColor: 'transparent',
|
|
borderWidth: 1,
|
|
pointRadius: 0,
|
|
tension: 0.4
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
responsive: false,
|
|
maintainAspectRatio: false,
|
|
animation: false,
|
|
events: [],
|
|
onResize: null,
|
|
scales: {
|
|
x: { display: false },
|
|
y: { display: false }
|
|
},
|
|
plugins: {
|
|
legend: { display: false },
|
|
tooltip: { enabled: false }
|
|
}
|
|
}
|
|
});
|
|
|
|
this.charts.set(id, chart);
|
|
}
|
|
|
|
/**
|
|
* Create custom sparklines for different elements (only if they exist)
|
|
*/
|
|
createCustomSparklines() {
|
|
const sparklineElements = document.querySelectorAll('.sparkline');
|
|
const sparkbarElements = document.querySelectorAll('.sparkbar');
|
|
const sparktriElements = document.querySelectorAll('.sparktri');
|
|
const sparkdiscElements = document.querySelectorAll('.sparkdisc');
|
|
const sparkbullElements = document.querySelectorAll('.sparkbull');
|
|
const sparkboxElements = document.querySelectorAll('.sparkbox');
|
|
|
|
// Only create if we have elements
|
|
if (sparklineElements.length === 0 && sparkbarElements.length === 0 &&
|
|
sparktriElements.length === 0 && sparkdiscElements.length === 0 &&
|
|
sparkbullElements.length === 0 && sparkboxElements.length === 0) {
|
|
console.log('Skipping custom sparklines - no sparkline elements found');
|
|
return;
|
|
}
|
|
|
|
const values = [5, 4, 5, -2, 0, 3, -5, 6, 7, 9, 9, 5, -3, -2, 2, -4];
|
|
const valuesAlt = [1, 1, 0, 1, -1, -1, 1, -1, 0, 0, 1, 1];
|
|
|
|
sparklineElements.forEach((element, index) => {
|
|
this.createCustomLineChart(element, values, `sparkline-${index}`);
|
|
});
|
|
|
|
sparkbarElements.forEach((element, index) => {
|
|
this.createCustomBarChart(element, values, `sparkbar-${index}`);
|
|
});
|
|
|
|
sparktriElements.forEach((element, index) => {
|
|
this.createTristateChart(element, valuesAlt, `sparktri-${index}`);
|
|
});
|
|
|
|
sparkdiscElements.forEach((element, index) => {
|
|
this.createDiscreteChart(element, values, `sparkdisc-${index}`);
|
|
});
|
|
|
|
sparkbullElements.forEach((element, index) => {
|
|
this.createBulletChart(element, values, `sparkbull-${index}`);
|
|
});
|
|
|
|
sparkboxElements.forEach((element, index) => {
|
|
this.createBoxChart(element, values, `sparkbox-${index}`);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Create custom line chart for sparkline elements
|
|
*/
|
|
createCustomLineChart(element, data, id) {
|
|
// Create canvas if it doesn't exist
|
|
let canvas = element.querySelector('canvas');
|
|
if (!canvas) {
|
|
canvas = document.createElement('canvas');
|
|
canvas.width = 100;
|
|
canvas.height = 20;
|
|
canvas.style.width = '100px';
|
|
canvas.style.height = '20px';
|
|
element.appendChild(canvas);
|
|
}
|
|
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
const chart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: data.map((_, i) => i),
|
|
datasets: [{
|
|
data: data,
|
|
borderColor: COLORS['red-500'],
|
|
backgroundColor: 'transparent',
|
|
borderWidth: 2,
|
|
pointRadius: 3,
|
|
pointBackgroundColor: COLORS['red-500'],
|
|
tension: 0.4
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: false,
|
|
maintainAspectRatio: false,
|
|
animation: false, // Disable animations to prevent resize triggers
|
|
events: [], // Disable all events to prevent resize
|
|
onResize: null, // Explicitly disable resize callback
|
|
scales: {
|
|
x: { display: false },
|
|
y: { display: false }
|
|
},
|
|
plugins: {
|
|
legend: { display: false },
|
|
tooltip: { enabled: false } // Disable tooltip to prevent events
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
|
|
this.charts.set(id, chart);
|
|
}
|
|
|
|
/**
|
|
* Create custom bar chart for sparkbar elements
|
|
*/
|
|
createCustomBarChart(element, data, id) {
|
|
// Create canvas if it doesn't exist
|
|
let canvas = element.querySelector('canvas');
|
|
if (!canvas) {
|
|
canvas = document.createElement('canvas');
|
|
canvas.width = 100;
|
|
canvas.height = 20;
|
|
canvas.style.width = '100px';
|
|
canvas.style.height = '20px';
|
|
element.appendChild(canvas);
|
|
}
|
|
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
const chart = new Chart(ctx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: data.map((_, i) => i),
|
|
datasets: [{
|
|
data: data,
|
|
backgroundColor: data.map(val => val < 0 ? COLORS['deep-purple-500'] : '#39f'),
|
|
borderColor: data.map(val => val < 0 ? COLORS['deep-purple-500'] : '#39f'),
|
|
borderWidth: 1,
|
|
barPercentage: 0.8
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: false,
|
|
maintainAspectRatio: false,
|
|
scales: {
|
|
x: { display: false },
|
|
y: { display: false }
|
|
},
|
|
plugins: {
|
|
legend: { display: false },
|
|
tooltip: {
|
|
enabled: true,
|
|
callbacks: {
|
|
label: (context) => `${context.parsed.y}°Celsius`
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
this.charts.set(id, chart);
|
|
}
|
|
|
|
/**
|
|
* Setup resize handler for charts
|
|
*/
|
|
setupResizeHandler() {
|
|
// Setup responsive resize for large charts only
|
|
window.addEventListener('resize', () => {
|
|
this.debounceResize();
|
|
});
|
|
|
|
// Listen for sidebar toggle events
|
|
window.addEventListener('sidebar:toggle', () => {
|
|
this.debounceResize();
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Debounced resize handler
|
|
*/
|
|
debounceResize() {
|
|
if (this.debounceTimer) {
|
|
clearTimeout(this.debounceTimer);
|
|
}
|
|
this.debounceTimer = setTimeout(() => {
|
|
this.redrawLargeChartsOnly();
|
|
}, 150);
|
|
}
|
|
|
|
/**
|
|
* Redraw only large charts, not sparklines
|
|
*/
|
|
redrawLargeChartsOnly() {
|
|
const largeChartIds = [
|
|
'line-chart', 'area-chart', 'scatter-chart', 'bar-chart',
|
|
'doughnut-chart', 'polar-chart', 'radar-chart', 'mixed-chart', 'bubble-chart'
|
|
];
|
|
|
|
largeChartIds.forEach(id => {
|
|
const chart = this.charts.get(id);
|
|
if (chart && chart.options.responsive) {
|
|
chart.resize();
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Redraw all charts (used sparingly)
|
|
*/
|
|
redrawCharts() {
|
|
this.charts.forEach((chart, id) => {
|
|
if (chart.options.responsive) {
|
|
chart.resize();
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Update chart data
|
|
*/
|
|
updateChart(id, newData) {
|
|
const chart = this.charts.get(id);
|
|
if (chart) {
|
|
chart.data.datasets[0].data = newData;
|
|
chart.update();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Create charts for the charts.html page
|
|
*/
|
|
createChartsPageCharts() {
|
|
// Line Chart
|
|
this.createLargeChart('line-chart', 'line', {
|
|
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
|
datasets: [{
|
|
label: 'Dataset 1',
|
|
data: [65, 59, 80, 81, 56, 55, 40],
|
|
borderColor: 'rgb(75, 192, 192)',
|
|
backgroundColor: 'rgba(75, 192, 192, 0.2)',
|
|
tension: 0.4
|
|
}]
|
|
});
|
|
|
|
// Area Chart
|
|
this.createLargeChart('area-chart', 'line', {
|
|
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
|
datasets: [{
|
|
label: 'Dataset 1',
|
|
data: [65, 59, 80, 81, 56, 55, 40],
|
|
borderColor: 'rgb(54, 162, 235)',
|
|
backgroundColor: 'rgba(54, 162, 235, 0.4)',
|
|
fill: true,
|
|
tension: 0.4
|
|
}]
|
|
});
|
|
|
|
// Scatter Chart with more data points
|
|
this.createLargeChart('scatter-chart', 'scatter', {
|
|
datasets: [{
|
|
label: 'Dataset 1',
|
|
data: [
|
|
{x: -15, y: 8}, {x: -12, y: 12}, {x: -8, y: 3}, {x: -5, y: 15},
|
|
{x: -2, y: 7}, {x: 0, y: 10}, {x: 3, y: 18}, {x: 6, y: 5},
|
|
{x: 9, y: 22}, {x: 12, y: 8}, {x: 15, y: 14}, {x: 18, y: 19},
|
|
{x: -10, y: 0}, {x: 10, y: 5}, {x: 0.5, y: 5.5}, {x: 7, y: 12},
|
|
{x: -7, y: 17}, {x: 4, y: 9}, {x: 11, y: 16}, {x: -3, y: 11}
|
|
],
|
|
backgroundColor: 'rgba(255, 99, 132, 0.7)',
|
|
borderColor: 'rgb(255, 99, 132)',
|
|
borderWidth: 1
|
|
}, {
|
|
label: 'Dataset 2',
|
|
data: [
|
|
{x: -13, y: 4}, {x: -9, y: 8}, {x: -6, y: 13}, {x: -1, y: 6},
|
|
{x: 2, y: 11}, {x: 5, y: 15}, {x: 8, y: 2}, {x: 13, y: 17},
|
|
{x: 16, y: 9}, {x: -4, y: 14}, {x: 1, y: 20}, {x: 14, y: 4}
|
|
],
|
|
backgroundColor: 'rgba(54, 162, 235, 0.7)',
|
|
borderColor: 'rgb(54, 162, 235)',
|
|
borderWidth: 1
|
|
}]
|
|
});
|
|
|
|
// Bar Chart
|
|
this.createLargeChart('bar-chart', 'bar', {
|
|
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
|
|
datasets: [{
|
|
label: '# of Votes',
|
|
data: [12, 19, 3, 5, 2, 3],
|
|
backgroundColor: [
|
|
'rgba(255, 99, 132, 0.6)',
|
|
'rgba(54, 162, 235, 0.6)',
|
|
'rgba(255, 205, 86, 0.6)',
|
|
'rgba(75, 192, 192, 0.6)',
|
|
'rgba(153, 102, 255, 0.6)',
|
|
'rgba(255, 159, 64, 0.6)'
|
|
],
|
|
borderColor: [
|
|
'rgba(255, 99, 132, 1)',
|
|
'rgba(54, 162, 235, 1)',
|
|
'rgba(255, 205, 86, 1)',
|
|
'rgba(75, 192, 192, 1)',
|
|
'rgba(153, 102, 255, 1)',
|
|
'rgba(255, 159, 64, 1)'
|
|
],
|
|
borderWidth: 1
|
|
}]
|
|
});
|
|
|
|
// Doughnut Chart
|
|
this.createLargeChart('doughnut-chart', 'doughnut', {
|
|
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
|
|
datasets: [{
|
|
label: 'My First Dataset',
|
|
data: [300, 50, 100, 75, 120, 60],
|
|
backgroundColor: [
|
|
'rgba(255, 99, 132, 0.8)',
|
|
'rgba(54, 162, 235, 0.8)',
|
|
'rgba(255, 205, 86, 0.8)',
|
|
'rgba(75, 192, 192, 0.8)',
|
|
'rgba(153, 102, 255, 0.8)',
|
|
'rgba(255, 159, 64, 0.8)'
|
|
],
|
|
borderColor: [
|
|
'rgba(255, 99, 132, 1)',
|
|
'rgba(54, 162, 235, 1)',
|
|
'rgba(255, 205, 86, 1)',
|
|
'rgba(75, 192, 192, 1)',
|
|
'rgba(153, 102, 255, 1)',
|
|
'rgba(255, 159, 64, 1)'
|
|
],
|
|
borderWidth: 2,
|
|
hoverOffset: 10
|
|
}]
|
|
});
|
|
|
|
// Polar Area Chart
|
|
this.createLargeChart('polar-chart', 'polarArea', {
|
|
labels: ['Red', 'Green', 'Yellow', 'Grey', 'Blue'],
|
|
datasets: [{
|
|
label: 'My First Dataset',
|
|
data: [11, 16, 7, 3, 14],
|
|
backgroundColor: [
|
|
'rgba(255, 99, 132, 0.7)',
|
|
'rgba(75, 192, 192, 0.7)',
|
|
'rgba(255, 205, 86, 0.7)',
|
|
'rgba(201, 203, 207, 0.7)',
|
|
'rgba(54, 162, 235, 0.7)'
|
|
],
|
|
borderColor: [
|
|
'rgb(255, 99, 132)',
|
|
'rgb(75, 192, 192)',
|
|
'rgb(255, 205, 86)',
|
|
'rgb(201, 203, 207)',
|
|
'rgb(54, 162, 235)'
|
|
],
|
|
borderWidth: 2
|
|
}]
|
|
});
|
|
|
|
// Radar Chart
|
|
this.createLargeChart('radar-chart', 'radar', {
|
|
labels: ['Speed', 'Reliability', 'Comfort', 'Safety', 'Efficiency', 'Innovation'],
|
|
datasets: [{
|
|
label: 'Product A',
|
|
data: [65, 59, 90, 81, 56, 55],
|
|
fill: true,
|
|
backgroundColor: 'rgba(54, 162, 235, 0.2)',
|
|
borderColor: 'rgb(54, 162, 235)',
|
|
borderWidth: 2,
|
|
pointBackgroundColor: 'rgb(54, 162, 235)',
|
|
pointBorderColor: '#fff',
|
|
pointHoverBackgroundColor: '#fff',
|
|
pointHoverBorderColor: 'rgb(54, 162, 235)'
|
|
}, {
|
|
label: 'Product B',
|
|
data: [28, 48, 40, 95, 86, 27],
|
|
fill: true,
|
|
backgroundColor: 'rgba(255, 99, 132, 0.2)',
|
|
borderColor: 'rgb(255, 99, 132)',
|
|
borderWidth: 2,
|
|
pointBackgroundColor: 'rgb(255, 99, 132)',
|
|
pointBorderColor: '#fff',
|
|
pointHoverBackgroundColor: '#fff',
|
|
pointHoverBorderColor: 'rgb(255, 99, 132)'
|
|
}]
|
|
});
|
|
|
|
// Mixed Chart (Bar + Line)
|
|
this.createLargeChart('mixed-chart', 'bar', {
|
|
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
|
|
datasets: [{
|
|
type: 'bar',
|
|
label: 'Sales',
|
|
data: [12, 19, 3, 5, 2, 3],
|
|
backgroundColor: 'rgba(54, 162, 235, 0.7)',
|
|
borderColor: 'rgb(54, 162, 235)',
|
|
borderWidth: 1
|
|
}, {
|
|
type: 'line',
|
|
label: 'Revenue',
|
|
data: [18, 25, 8, 15, 12, 18],
|
|
fill: false,
|
|
borderColor: 'rgb(255, 99, 132)',
|
|
backgroundColor: 'rgba(255, 99, 132, 0.2)',
|
|
borderWidth: 3,
|
|
tension: 0.4,
|
|
pointRadius: 5,
|
|
pointHoverRadius: 7
|
|
}]
|
|
});
|
|
|
|
// Bubble Chart
|
|
this.createLargeChart('bubble-chart', 'bubble', {
|
|
datasets: [{
|
|
label: 'First Dataset',
|
|
data: [
|
|
{x: 20, y: 30, r: 15},
|
|
{x: 40, y: 10, r: 10},
|
|
{x: 30, y: 40, r: 20},
|
|
{x: 50, y: 35, r: 12},
|
|
{x: 10, y: 50, r: 8},
|
|
{x: 60, y: 20, r: 18},
|
|
{x: 25, y: 25, r: 14}
|
|
],
|
|
backgroundColor: 'rgba(54, 162, 235, 0.6)',
|
|
borderColor: 'rgb(54, 162, 235)',
|
|
borderWidth: 2
|
|
}, {
|
|
label: 'Second Dataset',
|
|
data: [
|
|
{x: 15, y: 45, r: 12},
|
|
{x: 35, y: 15, r: 16},
|
|
{x: 45, y: 25, r: 9},
|
|
{x: 55, y: 45, r: 14},
|
|
{x: 25, y: 35, r: 11}
|
|
],
|
|
backgroundColor: 'rgba(255, 99, 132, 0.6)',
|
|
borderColor: 'rgb(255, 99, 132)',
|
|
borderWidth: 2
|
|
}]
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Create large chart for charts page
|
|
*/
|
|
createLargeChart(id, type, data) {
|
|
const canvas = document.getElementById(id);
|
|
if (!canvas) return;
|
|
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
// Define chart-specific options
|
|
const chartOptions = this.getChartOptions(type);
|
|
|
|
const chart = new Chart(ctx, {
|
|
type: type,
|
|
data: data,
|
|
options: chartOptions
|
|
});
|
|
|
|
this.charts.set(id, chart);
|
|
}
|
|
|
|
/**
|
|
* Get chart-specific options based on chart type
|
|
*/
|
|
getChartOptions(type) {
|
|
const baseOptions = {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: true,
|
|
position: 'top',
|
|
labels: {
|
|
padding: 20,
|
|
font: {
|
|
size: 12,
|
|
weight: '600'
|
|
},
|
|
color: '#333'
|
|
}
|
|
},
|
|
tooltip: {
|
|
enabled: true,
|
|
backgroundColor: 'rgba(255, 255, 255, 0.95)',
|
|
titleColor: '#333',
|
|
bodyColor: '#666',
|
|
borderColor: '#ddd',
|
|
borderWidth: 1,
|
|
cornerRadius: 8,
|
|
displayColors: true
|
|
}
|
|
}
|
|
};
|
|
|
|
// Chart type specific configurations
|
|
switch (type) {
|
|
case 'doughnut':
|
|
case 'pie':
|
|
return {
|
|
...baseOptions,
|
|
plugins: {
|
|
...baseOptions.plugins,
|
|
legend: {
|
|
...baseOptions.plugins.legend,
|
|
position: 'right'
|
|
}
|
|
},
|
|
interaction: {
|
|
intersect: false
|
|
}
|
|
};
|
|
|
|
case 'polarArea':
|
|
return {
|
|
...baseOptions,
|
|
scales: {
|
|
r: {
|
|
pointLabels: {
|
|
display: true,
|
|
centerPointLabels: true,
|
|
font: {
|
|
size: 10
|
|
}
|
|
},
|
|
grid: {
|
|
color: 'rgba(0, 0, 0, 0.1)'
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
case 'radar':
|
|
return {
|
|
...baseOptions,
|
|
scales: {
|
|
r: {
|
|
angleLines: {
|
|
display: true,
|
|
color: 'rgba(0, 0, 0, 0.1)'
|
|
},
|
|
grid: {
|
|
color: 'rgba(0, 0, 0, 0.1)'
|
|
},
|
|
pointLabels: {
|
|
font: {
|
|
size: 11
|
|
},
|
|
color: '#666'
|
|
},
|
|
ticks: {
|
|
display: true,
|
|
color: '#666',
|
|
font: {
|
|
size: 10
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
case 'bubble':
|
|
return {
|
|
...baseOptions,
|
|
scales: {
|
|
x: {
|
|
type: 'linear',
|
|
position: 'bottom',
|
|
grid: {
|
|
color: 'rgba(0, 0, 0, 0.05)',
|
|
borderDash: [5, 5]
|
|
},
|
|
ticks: {
|
|
color: '#666',
|
|
font: {
|
|
size: 11
|
|
}
|
|
}
|
|
},
|
|
y: {
|
|
beginAtZero: true,
|
|
grid: {
|
|
color: 'rgba(0, 0, 0, 0.05)',
|
|
borderDash: [5, 5]
|
|
},
|
|
ticks: {
|
|
color: '#666',
|
|
font: {
|
|
size: 11
|
|
}
|
|
}
|
|
}
|
|
},
|
|
plugins: {
|
|
...baseOptions.plugins,
|
|
tooltip: {
|
|
...baseOptions.plugins.tooltip,
|
|
callbacks: {
|
|
label: function(context) {
|
|
return `${context.dataset.label}: (${context.parsed.x}, ${context.parsed.y}), Size: ${context.parsed._custom}`;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
case 'scatter':
|
|
return {
|
|
...baseOptions,
|
|
scales: {
|
|
x: {
|
|
type: 'linear',
|
|
position: 'bottom',
|
|
grid: {
|
|
color: 'rgba(0, 0, 0, 0.05)',
|
|
borderDash: [5, 5]
|
|
},
|
|
ticks: {
|
|
color: '#666',
|
|
font: {
|
|
size: 11
|
|
}
|
|
}
|
|
},
|
|
y: {
|
|
grid: {
|
|
color: 'rgba(0, 0, 0, 0.05)',
|
|
borderDash: [5, 5]
|
|
},
|
|
ticks: {
|
|
color: '#666',
|
|
font: {
|
|
size: 11
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
default:
|
|
// For line, bar, area, mixed charts
|
|
return {
|
|
...baseOptions,
|
|
scales: {
|
|
x: {
|
|
grid: {
|
|
color: 'rgba(0, 0, 0, 0.05)',
|
|
borderDash: [5, 5]
|
|
},
|
|
ticks: {
|
|
color: '#666',
|
|
font: {
|
|
size: 11
|
|
}
|
|
}
|
|
},
|
|
y: {
|
|
beginAtZero: true,
|
|
grid: {
|
|
color: 'rgba(0, 0, 0, 0.05)',
|
|
borderDash: [5, 5]
|
|
},
|
|
ticks: {
|
|
color: '#666',
|
|
font: {
|
|
size: 11
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Create tristate chart (for .sparktri elements)
|
|
*/
|
|
createTristateChart(element, data, id) {
|
|
let canvas = element.querySelector('canvas');
|
|
if (!canvas) {
|
|
canvas = document.createElement('canvas');
|
|
canvas.width = 100;
|
|
canvas.height = 20;
|
|
canvas.style.width = '100px';
|
|
canvas.style.height = '20px';
|
|
element.appendChild(canvas);
|
|
}
|
|
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
const chart = new Chart(ctx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: data.map((_, i) => i),
|
|
datasets: [{
|
|
data: data.map(val => Math.abs(val)),
|
|
backgroundColor: data.map(val => {
|
|
if (val > 0) return COLORS['light-blue-500'];
|
|
if (val < 0) return '#f90';
|
|
return '#000';
|
|
}),
|
|
borderColor: data.map(val => {
|
|
if (val > 0) return COLORS['light-blue-500'];
|
|
if (val < 0) return '#f90';
|
|
return '#000';
|
|
}),
|
|
borderWidth: 1,
|
|
barPercentage: 0.8
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: false,
|
|
maintainAspectRatio: false,
|
|
scales: {
|
|
x: { display: false },
|
|
y: { display: false }
|
|
},
|
|
plugins: {
|
|
legend: { display: false },
|
|
tooltip: {
|
|
enabled: true,
|
|
callbacks: {
|
|
label: (context) => `${context.parsed.y}°Celsius`
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
this.charts.set(id, chart);
|
|
}
|
|
|
|
/**
|
|
* Create discrete chart (for .sparkdisc elements)
|
|
*/
|
|
createDiscreteChart(element, data, id) {
|
|
let canvas = element.querySelector('canvas');
|
|
if (!canvas) {
|
|
canvas = document.createElement('canvas');
|
|
canvas.width = 100;
|
|
canvas.height = 20;
|
|
canvas.style.width = '100px';
|
|
canvas.style.height = '20px';
|
|
element.appendChild(canvas);
|
|
}
|
|
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
const chart = new Chart(ctx, {
|
|
type: 'scatter',
|
|
data: {
|
|
datasets: [{
|
|
data: data.map((val, index) => ({x: index, y: val})),
|
|
backgroundColor: '#9f0',
|
|
borderColor: '#9f0',
|
|
pointRadius: 2,
|
|
showLine: false
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: false,
|
|
maintainAspectRatio: false,
|
|
scales: {
|
|
x: { display: false },
|
|
y: { display: false }
|
|
},
|
|
plugins: {
|
|
legend: { display: false },
|
|
tooltip: {
|
|
enabled: true,
|
|
callbacks: {
|
|
label: (context) => `${context.parsed.y}°Celsius`
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
this.charts.set(id, chart);
|
|
}
|
|
|
|
/**
|
|
* Create bullet chart (for .sparkbull elements)
|
|
*/
|
|
createBulletChart(element, data, id) {
|
|
let canvas = element.querySelector('canvas');
|
|
if (!canvas) {
|
|
canvas = document.createElement('canvas');
|
|
canvas.width = 100;
|
|
canvas.height = 20;
|
|
canvas.style.width = '100px';
|
|
canvas.style.height = '20px';
|
|
element.appendChild(canvas);
|
|
}
|
|
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
// Simplified bullet chart as horizontal bar
|
|
const chart = new Chart(ctx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: [''],
|
|
datasets: [{
|
|
data: [Math.max(...data)],
|
|
backgroundColor: COLORS['amber-500'],
|
|
borderColor: COLORS['amber-500'],
|
|
borderWidth: 1,
|
|
barPercentage: 0.6
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: false,
|
|
maintainAspectRatio: false,
|
|
indexAxis: 'y',
|
|
scales: {
|
|
x: { display: false },
|
|
y: { display: false }
|
|
},
|
|
plugins: {
|
|
legend: { display: false },
|
|
tooltip: {
|
|
enabled: true,
|
|
callbacks: {
|
|
label: (context) => `${context.parsed.x}°Celsius`
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
this.charts.set(id, chart);
|
|
}
|
|
|
|
/**
|
|
* Create box chart (for .sparkbox elements)
|
|
*/
|
|
createBoxChart(element, data, id) {
|
|
let canvas = element.querySelector('canvas');
|
|
if (!canvas) {
|
|
canvas = document.createElement('canvas');
|
|
canvas.width = 100;
|
|
canvas.height = 20;
|
|
canvas.style.width = '100px';
|
|
canvas.style.height = '20px';
|
|
element.appendChild(canvas);
|
|
}
|
|
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
// Box plot simplified as bar chart showing quartiles
|
|
const sortedData = [...data].sort((a, b) => a - b);
|
|
const q1 = sortedData[Math.floor(sortedData.length * 0.25)];
|
|
const median = sortedData[Math.floor(sortedData.length * 0.5)];
|
|
const q3 = sortedData[Math.floor(sortedData.length * 0.75)];
|
|
|
|
const chart = new Chart(ctx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ['Q1', 'Med', 'Q3'],
|
|
datasets: [{
|
|
data: [q1, median, q3],
|
|
backgroundColor: '#9f0',
|
|
borderColor: '#9f0',
|
|
borderWidth: 1,
|
|
barPercentage: 0.8
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: false,
|
|
maintainAspectRatio: false,
|
|
scales: {
|
|
x: { display: false },
|
|
y: { display: false }
|
|
},
|
|
plugins: {
|
|
legend: { display: false },
|
|
tooltip: {
|
|
enabled: true,
|
|
callbacks: {
|
|
label: (context) => `${context.parsed.y}°Celsius`
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
this.charts.set(id, chart);
|
|
}
|
|
|
|
/**
|
|
* Create Easy Pie Charts (replaces jQuery Easy Pie Chart)
|
|
*/
|
|
createEasyPieCharts() {
|
|
const easyPieElements = document.querySelectorAll('.easy-pie-chart');
|
|
|
|
easyPieElements.forEach((element, index) => {
|
|
const size = parseInt(element.dataset.size) || 80;
|
|
const percent = parseInt(element.dataset.percent) || 0;
|
|
const barColor = element.dataset.barColor || '#f44336';
|
|
|
|
// Create canvas for the pie chart
|
|
let canvas = element.querySelector('canvas');
|
|
if (!canvas) {
|
|
canvas = document.createElement('canvas');
|
|
canvas.width = size;
|
|
canvas.height = size;
|
|
canvas.style.width = `${size}px`;
|
|
canvas.style.height = `${size}px`;
|
|
element.appendChild(canvas);
|
|
}
|
|
|
|
// Create percentage display
|
|
let percentDisplay = element.querySelector('span');
|
|
if (percentDisplay) {
|
|
percentDisplay.textContent = `${percent}%`;
|
|
percentDisplay.style.position = 'absolute';
|
|
percentDisplay.style.top = '50%';
|
|
percentDisplay.style.left = '50%';
|
|
percentDisplay.style.transform = 'translate(-50%, -50%)';
|
|
percentDisplay.style.fontSize = '14px';
|
|
percentDisplay.style.fontWeight = 'bold';
|
|
}
|
|
|
|
// Set element position to relative for absolute positioning of text
|
|
element.style.position = 'relative';
|
|
element.style.display = 'inline-block';
|
|
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
const chart = new Chart(ctx, {
|
|
type: 'doughnut',
|
|
data: {
|
|
datasets: [{
|
|
data: [percent, 100 - percent],
|
|
backgroundColor: [barColor, '#f0f0f0'],
|
|
borderWidth: 0,
|
|
cutout: '70%'
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: false,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: { display: false },
|
|
tooltip: { enabled: false }
|
|
}
|
|
}
|
|
});
|
|
|
|
this.charts.set(`easy-pie-${index}`, chart);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Destroy all charts
|
|
*/
|
|
destroy() {
|
|
this.charts.forEach(chart => {
|
|
chart.destroy();
|
|
});
|
|
this.charts.clear();
|
|
|
|
if (this.debounceTimer) {
|
|
clearTimeout(this.debounceTimer);
|
|
}
|
|
}
|
|
}
|
|
|
|
export default ChartComponent;
|