kjh2064
40cffb3beb
TaxBaik CI/CD / build-and-deploy (push) Successful in 2m26s
Problem: JavaScript login form saved tokens to localStorage but didn't notify CustomAuthenticationStateProvider, causing [Authorize] pages to remain in 'loading' state indefinitely. The provider only reads tokens when: 1. GetAuthenticationStateAsync() is called (page load) 2. NotifyAuthenticationStateChanged() is triggered (UI updates) But JavaScript login didn't trigger either, leaving the authentication state stale. Solution: Convert AdminLoginForm from HTML+JavaScript to pure Blazor component. Now the login flow is: 1. User enters credentials in Blazor form 2. HttpClient POST to /api/auth/login 3. Save tokens to localStorage 4. Call CustomAuthenticationStateProvider.LoginAsync() directly 5. Blazor detects auth state change and re-evaluates [Authorize] pages 6. Dashboard [Authorize] page renders successfully Result: Immediate authentication state update, no loading timeout on protected pages. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
1666 lines
52 KiB
JavaScript
1666 lines
52 KiB
JavaScript
import ApexCharts from '../thirdparty/apexchartsWrapper.js';
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
'use strict';
|
|
|
|
// Basic Line Chart
|
|
if (document.getElementById('basic-line-chart')) {
|
|
const basicLineOptions = {
|
|
series: [{
|
|
name: 'Sales',
|
|
data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
|
|
}],
|
|
chart: {
|
|
height: 350,
|
|
type: 'line',
|
|
toolbar: {
|
|
show: true
|
|
},
|
|
zoom: {
|
|
enabled: true
|
|
}
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
stroke: {
|
|
curve: 'straight',
|
|
width: 3
|
|
},
|
|
grid: {
|
|
show: true,
|
|
borderColor: window.colorMap.bootstrapVars.bodyColor.rgba(0.08),
|
|
strokeDashArray: 5,
|
|
position: 'back',
|
|
row: {
|
|
colors: [window.colorMap.bootstrapVars.bodyColor.rgba(0.05), 'transparent'],
|
|
opacity: 0.5
|
|
},
|
|
xaxis: {
|
|
lines: {
|
|
show: false
|
|
}
|
|
}
|
|
},
|
|
xaxis: {
|
|
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
|
|
labels: {
|
|
style: {
|
|
colors: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
}
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
style: {
|
|
colors: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
}
|
|
},
|
|
tooltip: {
|
|
theme: 'dark'
|
|
},
|
|
colors: [window.colorMap.primary[500].hex]
|
|
};
|
|
|
|
const basicLineChart = new ApexCharts(
|
|
document.getElementById('basic-line-chart'),
|
|
basicLineOptions
|
|
);
|
|
basicLineChart.render();
|
|
}
|
|
|
|
// Line Chart with Data Labels
|
|
if (document.getElementById('line-with-data-labels-chart')) {
|
|
const lineWithDataLabelsOptions = {
|
|
series: [{
|
|
name: 'Website Traffic',
|
|
data: [45, 52, 38, 24, 33, 56, 85, 112, 97, 84, 72, 89]
|
|
}],
|
|
chart: {
|
|
height: 350,
|
|
type: 'line',
|
|
toolbar: {
|
|
show: true
|
|
},
|
|
dropShadow: {
|
|
enabled: true,
|
|
color: window.colorMap.primary[500].hex,
|
|
top: 18,
|
|
left: 7,
|
|
blur: 10,
|
|
opacity: 0.2
|
|
}
|
|
},
|
|
dataLabels: {
|
|
enabled: true
|
|
},
|
|
stroke: {
|
|
curve: 'smooth',
|
|
width: 3
|
|
},
|
|
grid: {
|
|
show: true,
|
|
borderColor: window.colorMap.bootstrapVars.bodyColor.rgba(0.08),
|
|
strokeDashArray: 5,
|
|
position: 'back',
|
|
row: {
|
|
colors: [window.colorMap.bootstrapVars.bodyColor.rgba(0.05), 'transparent'],
|
|
opacity: 0.5
|
|
},
|
|
xaxis: {
|
|
lines: {
|
|
show: false
|
|
}
|
|
}
|
|
},
|
|
markers: {
|
|
size: 6
|
|
},
|
|
xaxis: {
|
|
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
|
title: {
|
|
text: 'Month',
|
|
style: {
|
|
color: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
},
|
|
labels: {
|
|
style: {
|
|
colors: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
}
|
|
},
|
|
yaxis: {
|
|
title: {
|
|
text: 'Visitors (thousands)',
|
|
style: {
|
|
color: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
},
|
|
labels: {
|
|
style: {
|
|
colors: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
}
|
|
},
|
|
tooltip: {
|
|
theme: 'dark',
|
|
y: {
|
|
formatter: function(val) {
|
|
return val + "k visitors";
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
position: 'top',
|
|
horizontalAlign: 'right',
|
|
floating: true,
|
|
offsetY: -25,
|
|
offsetX: -5
|
|
},
|
|
colors: [window.colorMap.primary[500].hex]
|
|
};
|
|
|
|
const lineWithDataLabelsChart = new ApexCharts(
|
|
document.getElementById('line-with-data-labels-chart'),
|
|
lineWithDataLabelsOptions
|
|
);
|
|
lineWithDataLabelsChart.render();
|
|
}
|
|
|
|
// Multi-line Chart
|
|
if (document.getElementById('multi-line-chart')) {
|
|
const multiLineOptions = {
|
|
series: [{
|
|
name: 'Desktop',
|
|
data: [45, 52, 38, 24, 33, 26, 21, 20, 6, 8, 15, 10]
|
|
}, {
|
|
name: 'Mobile',
|
|
data: [35, 41, 62, 42, 13, 18, 29, 37, 36, 51, 32, 35]
|
|
}, {
|
|
name: 'Tablet',
|
|
data: [87, 57, 74, 99, 75, 38, 62, 47, 82, 56, 45, 47]
|
|
}],
|
|
chart: {
|
|
height: 350,
|
|
type: 'line',
|
|
toolbar: {
|
|
show: true
|
|
},
|
|
zoom: {
|
|
enabled: true
|
|
}
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
stroke: {
|
|
width: [3, 3, 3],
|
|
curve: 'straight',
|
|
dashArray: [0, 0, 0]
|
|
},
|
|
title: {
|
|
text: 'Device Traffic Comparison',
|
|
align: 'left',
|
|
style: {
|
|
color: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
},
|
|
legend: {
|
|
tooltipHoverFormatter: function(val, opts) {
|
|
return val + ' - ' + opts.w.globals.series[opts.seriesIndex][opts.dataPointIndex] + ' users';
|
|
},
|
|
labels: {
|
|
style: {
|
|
colors: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
},
|
|
position: 'top'
|
|
},
|
|
markers: {
|
|
size: 0,
|
|
hover: {
|
|
sizeOffset: 6
|
|
}
|
|
},
|
|
xaxis: {
|
|
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
|
labels: {
|
|
style: {
|
|
colors: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
}
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
style: {
|
|
colors: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
}
|
|
},
|
|
tooltip: {
|
|
theme: 'dark',
|
|
y: {
|
|
formatter: function(val) {
|
|
return val + "k users";
|
|
}
|
|
}
|
|
},
|
|
grid: {
|
|
show: true,
|
|
borderColor: window.colorMap.bootstrapVars.bodyColor.rgba(0.08),
|
|
strokeDashArray: 5,
|
|
position: 'back',
|
|
xaxis: {
|
|
lines: {
|
|
show: false
|
|
}
|
|
}
|
|
},
|
|
colors: [window.colorMap.primary[500].hex, window.colorMap.primary[300].hex, window.colorMap.danger[500].hex]
|
|
};
|
|
|
|
const multiLineChart = new ApexCharts(
|
|
document.getElementById('multi-line-chart'),
|
|
multiLineOptions
|
|
);
|
|
multiLineChart.render();
|
|
}
|
|
|
|
// Steeped Line Chart
|
|
if (document.getElementById('stepped-line-chart')) {
|
|
const steppedLineOptions = {
|
|
series: [{
|
|
name: 'Orders',
|
|
data: [34, 44, 54, 21, 12, 43, 33, 23, 66, 66, 58, 79]
|
|
}],
|
|
chart: {
|
|
type: 'line',
|
|
height: 350,
|
|
toolbar: {
|
|
show: true
|
|
}
|
|
},
|
|
stroke: {
|
|
curve: 'stepline',
|
|
width: 3
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
title: {
|
|
text: 'Daily Order Count',
|
|
align: 'left'
|
|
},
|
|
markers: {
|
|
hover: {
|
|
sizeOffset: 4
|
|
}
|
|
},
|
|
xaxis: {
|
|
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
|
},
|
|
tooltip: {
|
|
theme: 'dark'
|
|
},
|
|
grid: {
|
|
show: true,
|
|
borderColor: window.colorMap.bootstrapVars.bodyColor.rgba(0.08),
|
|
strokeDashArray: 5,
|
|
position: 'back',
|
|
xaxis: {
|
|
lines: {
|
|
show: false
|
|
}
|
|
}
|
|
},
|
|
colors: [window.colorMap.primary[500].hex]
|
|
};
|
|
|
|
const steppedLineChart = new ApexCharts(
|
|
document.getElementById('stepped-line-chart'),
|
|
steppedLineOptions
|
|
);
|
|
steppedLineChart.render();
|
|
}
|
|
|
|
// Gradient Line Chart
|
|
if (document.getElementById('gradient-line-chart')) {
|
|
const gradientLineOptions = {
|
|
series: [{
|
|
name: 'Revenue',
|
|
data: [31, 40, 28, 51, 42, 109, 100, 120, 80, 95, 110, 140]
|
|
}],
|
|
chart: {
|
|
height: 350,
|
|
type: 'line',
|
|
toolbar: {
|
|
show: true
|
|
}
|
|
},
|
|
stroke: {
|
|
width: 5,
|
|
curve: 'smooth'
|
|
},
|
|
title: {
|
|
text: 'Monthly Revenue',
|
|
align: 'left',
|
|
style: {
|
|
color: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
},
|
|
fill: {
|
|
type: 'gradient',
|
|
gradient: {
|
|
shade: 'dark',
|
|
gradientToColors: [window.colorMap.danger[500].hex],
|
|
shadeIntensity: 1,
|
|
type: 'horizontal',
|
|
opacityFrom: 1,
|
|
opacityTo: 1,
|
|
stops: [0, 100]
|
|
},
|
|
},
|
|
markers: {
|
|
size: 4,
|
|
colors: [window.colorMap.success[500].hex],
|
|
strokeColors: window.colorMap.bootstrapVars.bodyBg.hex,
|
|
strokeWidth: 2,
|
|
hover: {
|
|
size: 7,
|
|
}
|
|
},
|
|
xaxis: {
|
|
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
|
labels: {
|
|
style: {
|
|
colors: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
}
|
|
},
|
|
yaxis: {
|
|
title: {
|
|
text: 'Revenue in $1000',
|
|
style: {
|
|
color: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
},
|
|
min: 0,
|
|
max: 150,
|
|
labels: {
|
|
style: {
|
|
colors: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
}
|
|
},
|
|
tooltip: {
|
|
theme: 'dark',
|
|
y: {
|
|
formatter: function(val) {
|
|
return "$" + val + "k";
|
|
}
|
|
}
|
|
},
|
|
grid: {
|
|
show: true,
|
|
borderColor: window.colorMap.bootstrapVars.bodyColor.rgba(0.08),
|
|
strokeDashArray: 5,
|
|
position: 'back',
|
|
xaxis: {
|
|
lines: {
|
|
show: false
|
|
}
|
|
}
|
|
},
|
|
colors: [window.colorMap.success[500].hex]
|
|
};
|
|
|
|
const gradientLineChart = new ApexCharts(
|
|
document.getElementById('gradient-line-chart'),
|
|
gradientLineOptions
|
|
);
|
|
gradientLineChart.render();
|
|
}
|
|
|
|
// Line Chart with Annotations
|
|
if (document.getElementById('line-with-annotations-chart')) {
|
|
const lineWithAnnotationsOptions = {
|
|
series: [{
|
|
name: 'Stock Price',
|
|
data: [8107, 8128, 8122, 8165, 8340, 8423, 8423, 8514, 8481, 8487, 8506, 8626, 8668, 8602, 8607, 8512, 8496, 8600, 8881, 9340]
|
|
}],
|
|
chart: {
|
|
height: 350,
|
|
type: 'line',
|
|
id: 'stock-prices',
|
|
toolbar: {
|
|
show: true
|
|
}
|
|
},
|
|
annotations: {
|
|
yaxis: [{
|
|
y: 8600,
|
|
borderColor: window.colorMap.primary[500].hex,
|
|
label: {
|
|
borderColor: window.colorMap.primary[500].hex,
|
|
style: {
|
|
color: window.colorMap.bootstrapVars.bodyBg.hex,
|
|
background: window.colorMap.primary[500].hex
|
|
},
|
|
text: 'Support Level',
|
|
}
|
|
}],
|
|
xaxis: [{
|
|
x: new Date('15 Nov 2021').getTime(),
|
|
borderColor: window.colorMap.danger[500].hex,
|
|
yAxisIndex: 0,
|
|
label: {
|
|
borderColor: window.colorMap.danger[500].hex,
|
|
style: {
|
|
color: window.colorMap.bootstrapVars.bodyBg.hex,
|
|
background: window.colorMap.danger[500].hex,
|
|
},
|
|
text: 'Market Dip',
|
|
},
|
|
}],
|
|
points: [{
|
|
x: new Date('01 Dec 2021').getTime(),
|
|
y: 9340,
|
|
marker: {
|
|
size: 8,
|
|
fillColor: window.colorMap.primary[500].hex,
|
|
strokeColor: window.colorMap.bootstrapVars.bodyBg.hex,
|
|
radius: 2
|
|
},
|
|
label: {
|
|
borderColor: window.colorMap.primary[500].hex,
|
|
offsetY: 0,
|
|
style: {
|
|
color: window.colorMap.bootstrapVars.bodyBg.hex,
|
|
background: window.colorMap.primary[500].hex,
|
|
},
|
|
text: 'All-time High',
|
|
}
|
|
}]
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
stroke: {
|
|
curve: 'straight',
|
|
width: 3
|
|
},
|
|
grid: {
|
|
show: true,
|
|
borderColor: window.colorMap.bootstrapVars.bodyColor.rgba(0.08),
|
|
strokeDashArray: 5,
|
|
position: 'back',
|
|
padding: {
|
|
right: 30,
|
|
left: 20
|
|
},
|
|
xaxis: {
|
|
lines: {
|
|
show: false
|
|
}
|
|
}
|
|
},
|
|
title: {
|
|
text: 'Stock Market Analysis',
|
|
align: 'left'
|
|
},
|
|
xaxis: {
|
|
type: 'datetime',
|
|
categories: [
|
|
'01 Nov 2021', '02 Nov 2021', '03 Nov 2021', '04 Nov 2021', '05 Nov 2021',
|
|
'08 Nov 2021', '09 Nov 2021', '10 Nov 2021', '11 Nov 2021', '12 Nov 2021',
|
|
'15 Nov 2021', '16 Nov 2021', '17 Nov 2021', '18 Nov 2021', '19 Nov 2021',
|
|
'22 Nov 2021', '23 Nov 2021', '24 Nov 2021', '29 Nov 2021', '01 Dec 2021'
|
|
],
|
|
},
|
|
tooltip: {
|
|
theme: 'dark',
|
|
shared: false,
|
|
x: {
|
|
format: 'dd MMM yyyy'
|
|
},
|
|
y: {
|
|
formatter: function(val) {
|
|
return "$" + val;
|
|
}
|
|
}
|
|
},
|
|
colors: [window.colorMap.primary[500].hex]
|
|
};
|
|
|
|
const lineWithAnnotationsChart = new ApexCharts(
|
|
document.getElementById('line-with-annotations-chart'),
|
|
lineWithAnnotationsOptions
|
|
);
|
|
lineWithAnnotationsChart.render();
|
|
}
|
|
|
|
// Dashed Line Chart
|
|
if (document.getElementById('dashed-line-chart')) {
|
|
const dashedLineOptions = {
|
|
series: [{
|
|
name: "Session Duration",
|
|
data: [45, 52, 38, 24, 33, 26, 21, 20, 6, 8, 15, 10]
|
|
}, {
|
|
name: "Page Views",
|
|
data: [35, 41, 62, 42, 13, 18, 29, 37, 36, 51, 32, 35]
|
|
}, {
|
|
name: 'Total Visits',
|
|
data: [87, 57, 74, 99, 75, 38, 62, 47, 82, 56, 45, 47]
|
|
}],
|
|
chart: {
|
|
height: 350,
|
|
type: 'line',
|
|
toolbar: {
|
|
show: true
|
|
}
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
stroke: {
|
|
width: [3, 3, 3],
|
|
curve: 'straight',
|
|
dashArray: [0, 8, 5]
|
|
},
|
|
title: {
|
|
text: 'Page Statistics',
|
|
align: 'left',
|
|
style: {
|
|
color: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
},
|
|
legend: {
|
|
tooltipHoverFormatter: function(val, opts) {
|
|
return val + ' - ' + opts.w.globals.series[opts.seriesIndex][opts.dataPointIndex] + '';
|
|
},
|
|
labels: {
|
|
colors: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
},
|
|
markers: {
|
|
size: 0,
|
|
hover: {
|
|
sizeOffset: 6
|
|
}
|
|
},
|
|
xaxis: {
|
|
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
|
labels: {
|
|
style: {
|
|
colors: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
}
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
style: {
|
|
colors: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
}
|
|
},
|
|
tooltip: {
|
|
theme: 'dark',
|
|
y: [{
|
|
title: {
|
|
formatter: function (val) {
|
|
return val + " (mins)";
|
|
}
|
|
}
|
|
}, {
|
|
title: {
|
|
formatter: function (val) {
|
|
return val;
|
|
}
|
|
}
|
|
}, {
|
|
title: {
|
|
formatter: function (val) {
|
|
return val;
|
|
}
|
|
}
|
|
}]
|
|
},
|
|
grid: {
|
|
show: true,
|
|
borderColor: window.colorMap.bootstrapVars.bodyColor.rgba(0.08),
|
|
strokeDashArray: 5,
|
|
position: 'back',
|
|
xaxis: {
|
|
lines: {
|
|
show: false
|
|
}
|
|
}
|
|
},
|
|
colors: [window.colorMap.primary[500].hex, window.colorMap.primary[300].hex, window.colorMap.danger[500].hex]
|
|
};
|
|
|
|
const dashedLineChart = new ApexCharts(
|
|
document.getElementById('dashed-line-chart'),
|
|
dashedLineOptions
|
|
);
|
|
dashedLineChart.render();
|
|
}
|
|
|
|
// Zoomable Timeseries Chart
|
|
if (document.getElementById('zoomable-timeseries-chart')) {
|
|
const generateDayWiseTimeSeries = function(baseval, count, yrange) {
|
|
let i = 0;
|
|
let series = [];
|
|
while (i < count) {
|
|
const y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
|
|
series.push({
|
|
x: baseval,
|
|
y: y
|
|
});
|
|
baseval += 86400000;
|
|
i++;
|
|
}
|
|
return series;
|
|
};
|
|
|
|
const zoomableTimeseriesOptions = {
|
|
series: [{
|
|
name: 'XYZ MOTORS',
|
|
data: generateDayWiseTimeSeries(new Date('11 Feb 2020 GMT').getTime(), 200, {
|
|
min: 30,
|
|
max: 90
|
|
})
|
|
}],
|
|
chart: {
|
|
type: 'area',
|
|
stacked: false,
|
|
height: 350,
|
|
zoom: {
|
|
type: 'x',
|
|
enabled: true,
|
|
autoScaleYaxis: true
|
|
},
|
|
toolbar: {
|
|
autoSelected: 'zoom',
|
|
show: true
|
|
}
|
|
},
|
|
stroke: {
|
|
//curve: 'straight',
|
|
width: 2
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
markers: {
|
|
size: 0,
|
|
},
|
|
title: {
|
|
text: 'Stock Price Movement',
|
|
align: 'left',
|
|
style: {
|
|
color: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
},
|
|
fill: {
|
|
type: 'gradient',
|
|
gradient: {
|
|
shadeIntensity: 1,
|
|
inverseColors: false,
|
|
opacityFrom: 0.5,
|
|
opacityTo: 0,
|
|
stops: [0, 90, 100]
|
|
},
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
formatter: function (val) {
|
|
return (val).toFixed(2);
|
|
},
|
|
style: {
|
|
colors: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
},
|
|
title: {
|
|
text: 'Price',
|
|
style: {
|
|
color: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
},
|
|
},
|
|
xaxis: {
|
|
type: 'datetime',
|
|
labels: {
|
|
style: {
|
|
colors: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
}
|
|
},
|
|
tooltip: {
|
|
theme: 'dark',
|
|
shared: false,
|
|
y: {
|
|
formatter: function (val) {
|
|
return "$" + (val).toFixed(2);
|
|
}
|
|
},
|
|
x: {
|
|
format: 'dd MMM yyyy'
|
|
}
|
|
},
|
|
grid: {
|
|
show: true,
|
|
borderColor: window.colorMap.bootstrapVars.bodyColor.rgba(0.08),
|
|
strokeDashArray: 5,
|
|
position: 'back',
|
|
xaxis: {
|
|
lines: {
|
|
show: false
|
|
}
|
|
}
|
|
},
|
|
colors: [window.colorMap.primary[500].hex]
|
|
};
|
|
|
|
const zoomableTimeseriesChart = new ApexCharts(
|
|
document.getElementById('zoomable-timeseries-chart'),
|
|
zoomableTimeseriesOptions
|
|
);
|
|
zoomableTimeseriesChart.render();
|
|
}
|
|
|
|
// Annotations Line Chart (replacing the duplicate)
|
|
if (document.getElementById('annotations-line-chart')) {
|
|
const annotationsLineOptions = {
|
|
series: [{
|
|
name: 'Website Traffic',
|
|
data: [31, 40, 28, 51, 42, 109, 100, 120, 95, 98, 86, 75]
|
|
}],
|
|
chart: {
|
|
height: 350,
|
|
type: 'line',
|
|
toolbar: {
|
|
show: true
|
|
}
|
|
},
|
|
annotations: {
|
|
yaxis: [{
|
|
y: 100,
|
|
borderColor: window.colorMap.success[500].hex,
|
|
label: {
|
|
borderColor: window.colorMap.success[500].hex,
|
|
style: {
|
|
color: '#fff',
|
|
background: window.colorMap.success[500].hex,
|
|
},
|
|
text: 'Traffic Goal',
|
|
}
|
|
}],
|
|
xaxis: [{
|
|
x: new Date('07 Jul 2023').getTime(),
|
|
borderColor: window.colorMap.danger[500].hex,
|
|
yAxisIndex: 0,
|
|
label: {
|
|
style: {
|
|
color: '#fff',
|
|
background: window.colorMap.danger[500].hex,
|
|
},
|
|
text: 'Summer Event',
|
|
},
|
|
}]
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
stroke: {
|
|
curve: 'smooth',
|
|
width: 3
|
|
},
|
|
grid: {
|
|
show: true,
|
|
borderColor: window.colorMap.bootstrapVars.bodyColor.rgba(0.08),
|
|
strokeDashArray: 5,
|
|
position: 'back',
|
|
padding: {
|
|
right: 30,
|
|
left: 20
|
|
},
|
|
xaxis: {
|
|
lines: {
|
|
show: false
|
|
}
|
|
}
|
|
},
|
|
title: {
|
|
text: 'Monthly Website Traffic',
|
|
align: 'left',
|
|
style: {
|
|
color: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
},
|
|
xaxis: {
|
|
type: 'category',
|
|
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
|
labels: {
|
|
style: {
|
|
colors: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
}
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
style: {
|
|
colors: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
}
|
|
},
|
|
tooltip: {
|
|
theme: 'dark'
|
|
},
|
|
colors: [window.colorMap.primary[500].hex]
|
|
};
|
|
|
|
const annotationsLineChart = new ApexCharts(
|
|
document.getElementById('annotations-line-chart'),
|
|
annotationsLineOptions
|
|
);
|
|
annotationsLineChart.render();
|
|
}
|
|
|
|
// Synchronized Charts
|
|
if (document.getElementById('synchronized-line-chart')) {
|
|
function generateSyncData(count, min, max) {
|
|
let i = 0;
|
|
const series = [];
|
|
const baseDate = new Date('31 Jan 2023').getTime();
|
|
|
|
while (i < count) {
|
|
const x = baseDate + i * (24 * 60 * 60 * 1000);
|
|
const y = Math.floor(Math.random() * (max - min + 1)) + min;
|
|
series.push({ x, y });
|
|
i++;
|
|
}
|
|
return series;
|
|
}
|
|
|
|
// Generate data once and reuse
|
|
const syncData = generateSyncData(30, 50, 80);
|
|
|
|
const syncChartOptions = {
|
|
series: [{
|
|
data: syncData // Use the same data
|
|
}],
|
|
chart: {
|
|
id: 'sync-chart',
|
|
type: 'line',
|
|
height: 250,
|
|
toolbar: {
|
|
autoSelected: 'pan',
|
|
show: true
|
|
},
|
|
animations: {
|
|
enabled: true,
|
|
easing: 'linear',
|
|
dynamicAnimation: {
|
|
speed: 1000
|
|
}
|
|
}
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
stroke: {
|
|
curve: 'straight',
|
|
width: 3
|
|
},
|
|
title: {
|
|
text: 'Synchronized Chart (use Pan & Zoom)',
|
|
align: 'left',
|
|
style: {
|
|
color: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
},
|
|
grid: {
|
|
show: true,
|
|
borderColor: window.colorMap.bootstrapVars.bodyColor.rgba(0.08),
|
|
strokeDashArray: 5,
|
|
position: 'back',
|
|
row: {
|
|
colors: [window.colorMap.bootstrapVars.bodyColor.rgba(0.05), 'transparent'],
|
|
opacity: 0.5
|
|
},
|
|
xaxis: {
|
|
lines: {
|
|
show: false
|
|
}
|
|
}
|
|
},
|
|
xaxis: {
|
|
type: 'datetime',
|
|
labels: {
|
|
style: {
|
|
colors: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
}
|
|
},
|
|
yaxis: {
|
|
min: 45, // Set minimum value with padding
|
|
max: 85, // Set maximum value with padding
|
|
tickAmount: 5,
|
|
labels: {
|
|
style: {
|
|
colors: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
}
|
|
},
|
|
tooltip: {
|
|
theme: 'dark'
|
|
},
|
|
colors: [window.colorMap.primary[500].hex]
|
|
};
|
|
|
|
const syncChartSmallOptions = {
|
|
series: [{
|
|
data: syncData // Use the same data
|
|
}],
|
|
chart: {
|
|
id: 'sync-chart-small',
|
|
height: 100,
|
|
type: 'area',
|
|
brush: {
|
|
target: 'sync-chart',
|
|
enabled: true
|
|
},
|
|
selection: {
|
|
enabled: true,
|
|
xaxis: {
|
|
min: new Date('31 Jan 2023').getTime(),
|
|
max: new Date('15 Feb 2023').getTime() // Show 15 days initially
|
|
},
|
|
fill: {
|
|
color: window.colorMap.bootstrapVars.bodyColor.hex,
|
|
opacity: 0.1
|
|
},
|
|
stroke: {
|
|
color: window.colorMap.bootstrapVars.bodyColor.hex,
|
|
width: 2,
|
|
}
|
|
},
|
|
toolbar: {
|
|
show: false
|
|
}
|
|
},
|
|
stroke: {
|
|
curve: 'straight',
|
|
width: 1
|
|
},
|
|
colors: [window.colorMap.primary[300].hex],
|
|
fill: {
|
|
type: 'gradient',
|
|
gradient: {
|
|
shade: 'light',
|
|
type: 'vertical',
|
|
shadeIntensity: 0.4,
|
|
gradientToColors: [window.colorMap.bootstrapVars.bodyBg.hex, window.colorMap.bootstrapVars.bodyBg.hex],
|
|
inverseColors: false,
|
|
opacityFrom: 0.7,
|
|
opacityTo: 0.2,
|
|
stops: [0, 100]
|
|
}
|
|
},
|
|
xaxis: {
|
|
type: 'datetime',
|
|
tooltip: {
|
|
enabled: false
|
|
},
|
|
labels: {
|
|
show: false,
|
|
}
|
|
},
|
|
yaxis: {
|
|
show: false,
|
|
},
|
|
grid: {
|
|
show: true,
|
|
borderColor: window.colorMap.bootstrapVars.bodyColor.rgba(0.08),
|
|
strokeDashArray: 5,
|
|
position: 'back',
|
|
xaxis: {
|
|
lines: {
|
|
show: false
|
|
}
|
|
}
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
}
|
|
};
|
|
|
|
const syncChart = new ApexCharts(
|
|
document.getElementById('synchronized-line-chart'),
|
|
syncChartOptions
|
|
);
|
|
syncChart.render();
|
|
|
|
const syncChartSmall = new ApexCharts(
|
|
document.getElementById('synchronized-line-chart-small'),
|
|
syncChartSmallOptions
|
|
);
|
|
syncChartSmall.render();
|
|
}
|
|
|
|
// Brush Chart
|
|
if (document.getElementById('brush-line-chart')) {
|
|
const brushChartOptions = {
|
|
series: [{
|
|
name: "series1",
|
|
data: [45, 52, 38, 45, 19, 23, 2, 48, 38, 41, 45, 54, 28, 35, 36, 39, 46, 28, 38, 54, 36, 42, 45, 54, 29, 32, 25]
|
|
}],
|
|
chart: {
|
|
id: 'chart2',
|
|
type: 'line',
|
|
height: 230,
|
|
toolbar: {
|
|
autoSelected: 'pan',
|
|
show: true
|
|
}
|
|
},
|
|
colors: [window.colorMap.primary[500].hex],
|
|
stroke: {
|
|
width: 3,
|
|
curve: 'smooth'
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
fill: {
|
|
opacity: 1,
|
|
},
|
|
markers: {
|
|
size: 0
|
|
},
|
|
xaxis: {
|
|
type: 'datetime',
|
|
categories: generateDateCategories(27),
|
|
labels: {
|
|
style: {
|
|
colors: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
}
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
style: {
|
|
colors: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
}
|
|
},
|
|
tooltip: {
|
|
theme: 'dark'
|
|
},
|
|
grid: {
|
|
show: true,
|
|
borderColor: window.colorMap.bootstrapVars.bodyColor.rgba(0.08),
|
|
strokeDashArray: 5,
|
|
position: 'back',
|
|
xaxis: {
|
|
lines: {
|
|
show: false
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
const brushChartSmallOptions = {
|
|
series: [{
|
|
name: "series1",
|
|
data: [45, 52, 38, 45, 19, 23, 2, 48, 38, 41, 45, 54, 28, 35, 36, 39, 46, 28, 38, 54, 36, 42, 45, 54, 29, 32, 25]
|
|
}],
|
|
|
|
chart: {
|
|
id: 'chart1',
|
|
height: 130,
|
|
type: 'area',
|
|
brush: {
|
|
target: 'chart2',
|
|
enabled: true
|
|
},
|
|
selection: {
|
|
enabled: true,
|
|
fill: {
|
|
color: window.colorMap.bootstrapVars.bodyColor.hex,
|
|
opacity: 0.1
|
|
},
|
|
stroke: {
|
|
color: window.colorMap.bootstrapVars.bodyColor.hex,
|
|
width: 2,
|
|
}
|
|
}
|
|
},
|
|
colors: [window.colorMap.primary[300].hex],
|
|
fill: {
|
|
type: 'gradient',
|
|
gradient: {
|
|
shade: 'light',
|
|
type: 'vertical',
|
|
shadeIntensity: 0.4,
|
|
gradientToColors: [window.colorMap.bootstrapVars.bodyBg.hex, window.colorMap.bootstrapVars.bodyBg.hex],
|
|
inverseColors: false,
|
|
opacityFrom: 0.7,
|
|
opacityTo: 0.2,
|
|
stops: [0, 100]
|
|
}
|
|
},
|
|
xaxis: {
|
|
type: 'datetime',
|
|
categories: generateDateCategories(27),
|
|
tooltip: {
|
|
enabled: false
|
|
},
|
|
labels: {
|
|
style: {
|
|
colors: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
}
|
|
},
|
|
yaxis: {
|
|
tickAmount: 2,
|
|
labels: {
|
|
style: {
|
|
colors: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
}
|
|
},
|
|
grid: {
|
|
show: true,
|
|
borderColor: window.colorMap.bootstrapVars.bodyColor.rgba(0.08),
|
|
strokeDashArray: 5,
|
|
position: 'back',
|
|
xaxis: {
|
|
lines: {
|
|
show: false
|
|
}
|
|
}
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
}
|
|
};
|
|
|
|
|
|
|
|
const brushChart = new ApexCharts(
|
|
document.getElementById('brush-line-chart'),
|
|
brushChartOptions
|
|
);
|
|
brushChart.render();
|
|
|
|
const brushChartSmall = new ApexCharts(
|
|
document.getElementById('brush-line-chart-small'),
|
|
brushChartSmallOptions
|
|
);
|
|
brushChartSmall.render();
|
|
|
|
function generateDateCategories(count) {
|
|
const categories = [];
|
|
let startDate = new Date('01 Jan 2023');
|
|
|
|
for (let i = 0; i < count; i++) {
|
|
const date = new Date(startDate);
|
|
date.setDate(startDate.getDate() + i);
|
|
categories.push(date.toISOString());
|
|
}
|
|
|
|
return categories;
|
|
}
|
|
}
|
|
|
|
// Negative Values Line Chart
|
|
if (document.getElementById('negative-values-line-chart')) {
|
|
const negativeValuesOptions = {
|
|
series: [{
|
|
name: 'Cash Flow',
|
|
data: [1.45, 5.42, 5.9, -0.42, -12.6, -18.1, -18.2, -14.16, -11.1, -6.09, 0.34, 3.88, 13.07,
|
|
5.8, 2, 7.37, 8.1, 13.57, 15.75, 17.1, 19.8, -27.03, -54.4, -47.2, -43.3, -18.6, -
|
|
48.6, -41.1, -39.6, -37.6, -29.4, -21.4, -2.4
|
|
]
|
|
}],
|
|
chart: {
|
|
type: 'line',
|
|
height: 350,
|
|
toolbar: {
|
|
show: true
|
|
}
|
|
},
|
|
stroke: {
|
|
curve: 'smooth',
|
|
width: 3
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
title: {
|
|
text: 'Monthly Cash Flow',
|
|
align: 'left',
|
|
style: {
|
|
color: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
},
|
|
markers: {
|
|
size: 0,
|
|
hover: {
|
|
sizeOffset: 6
|
|
}
|
|
},
|
|
xaxis: {
|
|
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
|
|
'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
|
|
'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'
|
|
],
|
|
labels: {
|
|
rotate: -90,
|
|
style: {
|
|
colors: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
}
|
|
},
|
|
yaxis: {
|
|
title: {
|
|
text: 'Cash Flow (thousands)',
|
|
style: {
|
|
color: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
},
|
|
min: -60,
|
|
max: 30,
|
|
labels: {
|
|
style: {
|
|
colors: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
}
|
|
},
|
|
grid: {
|
|
show: true,
|
|
borderColor: window.colorMap.bootstrapVars.bodyColor.rgba(0.08),
|
|
strokeDashArray: 5,
|
|
position: 'back',
|
|
xaxis: {
|
|
lines: {
|
|
show: false
|
|
}
|
|
}
|
|
},
|
|
tooltip: {
|
|
theme: 'dark',
|
|
shared: false,
|
|
y: {
|
|
formatter: function (val) {
|
|
return "$" + val + "k";
|
|
}
|
|
}
|
|
},
|
|
colors: [window.colorMap.primary[500].hex],
|
|
fill: {
|
|
type: 'gradient',
|
|
gradient: {
|
|
shade: 'dark',
|
|
gradientToColors: [window.colorMap.danger[500].hex],
|
|
shadeIntensity: 1,
|
|
type: 'horizontal',
|
|
opacityFrom: 1,
|
|
opacityTo: 1,
|
|
colorStops: [
|
|
{
|
|
offset: 0,
|
|
color: window.colorMap.primary[500].hex,
|
|
opacity: 1
|
|
},
|
|
{
|
|
offset: 50,
|
|
color: window.colorMap.primary[500].hex,
|
|
opacity: 1
|
|
},
|
|
{
|
|
offset: 50,
|
|
color: window.colorMap.danger[500].hex,
|
|
opacity: 1
|
|
},
|
|
{
|
|
offset: 100,
|
|
color: window.colorMap.danger[500].hex,
|
|
opacity: 1
|
|
}
|
|
]
|
|
}
|
|
}
|
|
};
|
|
|
|
const negativeValuesChart = new ApexCharts(
|
|
document.getElementById('negative-values-line-chart'),
|
|
negativeValuesOptions
|
|
);
|
|
negativeValuesChart.render();
|
|
}
|
|
|
|
// Missing/Null Values Chart
|
|
if (document.getElementById('null-values-line-chart')) {
|
|
const nullValuesOptions = {
|
|
series: [{
|
|
name: 'Network Usage',
|
|
data: [31, 40, 28, 51, null, 42, 109, null, null, 70, 25, 35, 58, 62, 85, 95, 112, 118, 95, 97, 92, null, 90, 88, 82, 75, 68, 65]
|
|
}],
|
|
chart: {
|
|
height: 350,
|
|
type: 'line',
|
|
animations: {
|
|
enabled: true,
|
|
easing: 'linear',
|
|
dynamicAnimation: {
|
|
speed: 1000
|
|
}
|
|
},
|
|
dropShadow: {
|
|
enabled: true,
|
|
top: 3,
|
|
left: 3,
|
|
blur: 1,
|
|
opacity: 0.2
|
|
},
|
|
toolbar: {
|
|
show: true
|
|
}
|
|
},
|
|
stroke: {
|
|
curve: 'smooth',
|
|
width: 3
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
title: {
|
|
text: 'Network Usage with Missing Data',
|
|
align: 'left',
|
|
style: {
|
|
color: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
},
|
|
grid: {
|
|
show: true,
|
|
borderColor: window.colorMap.bootstrapVars.bodyColor.rgba(0.08),
|
|
strokeDashArray: 5,
|
|
position: 'back',
|
|
row: {
|
|
colors: [window.colorMap.bootstrapVars.bodyColor.rgba(0.05), 'transparent'],
|
|
opacity: 0.5
|
|
},
|
|
xaxis: {
|
|
lines: {
|
|
show: false
|
|
}
|
|
}
|
|
},
|
|
xaxis: {
|
|
categories: ["Jan 01", "Jan 02", "Jan 03", "Jan 04", "Jan 05", "Jan 06", "Jan 07", "Jan 08", "Jan 09", "Jan 10", "Jan 11", "Jan 12", "Jan 13", "Jan 14", "Jan 15", "Jan 16", "Jan 17", "Jan 18", "Jan 19", "Jan 20", "Jan 21", "Jan 22", "Jan 23", "Jan 24", "Jan 25", "Jan 26", "Jan 27", "Jan 28"],
|
|
labels: {
|
|
style: {
|
|
colors: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
}
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
style: {
|
|
colors: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
}
|
|
},
|
|
tooltip: {
|
|
theme: 'dark',
|
|
x: {
|
|
format: 'dd/MM/yy'
|
|
}
|
|
},
|
|
markers: {
|
|
size: 5,
|
|
hover: {
|
|
size: 9
|
|
}
|
|
},
|
|
colors: [window.colorMap.primary[500].hex]
|
|
};
|
|
|
|
const nullValuesChart = new ApexCharts(
|
|
document.getElementById('null-values-line-chart'),
|
|
nullValuesOptions
|
|
);
|
|
nullValuesChart.render();
|
|
}
|
|
|
|
// Realtime Line Chart
|
|
if (document.getElementById('realtime-line-chart')) {
|
|
const realtimeOptions = {
|
|
series: [{
|
|
name: 'Data',
|
|
data: generateRealtimeData(100)
|
|
}],
|
|
chart: {
|
|
id: 'realtime',
|
|
height: 350,
|
|
type: 'line',
|
|
animations: {
|
|
enabled: false,
|
|
easing: 'linear',
|
|
dynamicAnimation: {
|
|
speed: 500
|
|
}
|
|
},
|
|
toolbar: {
|
|
show: true
|
|
},
|
|
zoom: {
|
|
enabled: false
|
|
}
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
stroke: {
|
|
curve: 'smooth',
|
|
width: 2
|
|
},
|
|
title: {
|
|
text: 'Dynamic Updating Chart',
|
|
align: 'left',
|
|
style: {
|
|
color: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
},
|
|
markers: {
|
|
size: 0
|
|
},
|
|
xaxis: {
|
|
type: 'datetime',
|
|
tickAmount: 10,
|
|
labels: {
|
|
datetimeUTC: false,
|
|
format: 'HH:mm:ss',
|
|
style: {
|
|
colors: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
}
|
|
},
|
|
yaxis: {
|
|
min: 20,
|
|
max: 100,
|
|
labels: {
|
|
formatter: function(val) {
|
|
return val.toFixed(0);
|
|
},
|
|
style: {
|
|
colors: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
}
|
|
},
|
|
grid: {
|
|
show: true,
|
|
borderColor: window.colorMap.bootstrapVars.bodyColor.rgba(0.08),
|
|
strokeDashArray: 5,
|
|
position: 'back',
|
|
xaxis: {
|
|
lines: {
|
|
show: false
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
show: true,
|
|
legend: {
|
|
labels: {
|
|
colors: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
},
|
|
},
|
|
tooltip: {
|
|
theme: 'dark',
|
|
x: {
|
|
format: 'HH:mm:ss'
|
|
}
|
|
},
|
|
colors: [window.colorMap.primary[500].hex]
|
|
};
|
|
|
|
const realtimeChart = new ApexCharts(
|
|
document.getElementById('realtime-line-chart'),
|
|
realtimeOptions
|
|
);
|
|
realtimeChart.render();
|
|
|
|
// Create initial data that's evenly distributed across the chart
|
|
function generateRealtimeData(count) {
|
|
const data = [];
|
|
const now = new Date();
|
|
const yrange = { min: 30, max: 90 };
|
|
|
|
// Distribute points evenly from left to right
|
|
for (let i = 0; i < count; i++) {
|
|
// Calculate timestamp to spread points evenly across the chart
|
|
// This creates a series of points going from left (past) to right (now)
|
|
const timeOffset = (count - i) * 1000; // 1 second intervals
|
|
const x = now.getTime() - timeOffset;
|
|
|
|
// Create some natural-looking data
|
|
const y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
|
|
data.push({ x, y });
|
|
}
|
|
return data;
|
|
}
|
|
|
|
// Update data every 1000ms
|
|
let lastDate = new Date();
|
|
let data = realtimeChart.w.config.series[0].data;
|
|
let TICKINTERVAL = 1000;
|
|
|
|
const updateRealtimeChart = function() {
|
|
let newDate = new Date(lastDate.getTime() + TICKINTERVAL);
|
|
lastDate = newDate;
|
|
|
|
// Shift all data points left by one position
|
|
for (let i = 0; i < data.length - 1; i++) {
|
|
data[i].x = data[i + 1].x;
|
|
data[i].y = data[i + 1].y;
|
|
}
|
|
|
|
// Add new point at the right edge
|
|
data[data.length - 1].x = newDate.getTime();
|
|
data[data.length - 1].y = Math.floor(Math.random() * (100 - 30 + 1)) + 30;
|
|
|
|
// Update the chart
|
|
realtimeChart.updateSeries([{
|
|
name: 'Data',
|
|
data: data
|
|
}]);
|
|
};
|
|
|
|
// Start update interval
|
|
const realtimeInterval = setInterval(updateRealtimeChart, TICKINTERVAL);
|
|
|
|
// Clean up interval when navigating away
|
|
window.addEventListener('beforeunload', function() {
|
|
clearInterval(realtimeInterval);
|
|
});
|
|
}
|
|
|
|
// Stepped Line Chart (fix the ID to match the HTML)
|
|
if (document.getElementById('stepline-chart')) {
|
|
const steplineOptions = {
|
|
series: [{
|
|
name: 'Orders',
|
|
data: [34, 44, 54, 21, 12, 43, 33, 23, 66, 66, 58, 79]
|
|
}],
|
|
chart: {
|
|
type: 'line',
|
|
height: 350,
|
|
toolbar: {
|
|
show: true
|
|
}
|
|
},
|
|
stroke: {
|
|
curve: 'stepline',
|
|
width: 3
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
title: {
|
|
text: 'Daily Order Count',
|
|
align: 'left',
|
|
style: {
|
|
color: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
},
|
|
markers: {
|
|
hover: {
|
|
sizeOffset: 4
|
|
}
|
|
},
|
|
xaxis: {
|
|
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
|
labels: {
|
|
style: {
|
|
colors: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
}
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
style: {
|
|
colors: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
}
|
|
},
|
|
grid: {
|
|
show: true,
|
|
borderColor: window.colorMap.bootstrapVars.bodyColor.rgba(0.08),
|
|
strokeDashArray: 5,
|
|
position: 'back',
|
|
xaxis: {
|
|
lines: {
|
|
show: false
|
|
}
|
|
}
|
|
},
|
|
tooltip: {
|
|
theme: 'dark'
|
|
},
|
|
colors: [window.colorMap.primary[500].hex]
|
|
};
|
|
|
|
const steplineChart = new ApexCharts(
|
|
document.getElementById('stepline-chart'),
|
|
steplineOptions
|
|
);
|
|
steplineChart.render();
|
|
}
|
|
});
|