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>
1442 lines
46 KiB
JavaScript
1442 lines
46 KiB
JavaScript
|
|
import ApexCharts from '../thirdparty/apexchartsWrapper.js';
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
'use strict';
|
|
|
|
// Basic Column Chart
|
|
if (document.getElementById('basic-column-chart')) {
|
|
const basicColumnOptions = {
|
|
series: [{
|
|
name: 'Net Profit',
|
|
data: [44, 55, 57, 56, 61, 58, 63, 60, 66]
|
|
}, {
|
|
name: 'Revenue',
|
|
data: [76, 85, 101, 98, 87, 105, 91, 114, 94]
|
|
}, {
|
|
name: 'Free Cash Flow',
|
|
data: [35, 41, 36, 26, 45, 48, 52, 53, 41]
|
|
}],
|
|
chart: {
|
|
type: 'bar',
|
|
height: 350,
|
|
toolbar: {
|
|
show: true
|
|
},
|
|
zoom: {
|
|
enabled: false
|
|
}
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
horizontal: false,
|
|
columnWidth: '55%',
|
|
endingShape: 'rounded'
|
|
},
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
stroke: {
|
|
show: true,
|
|
width: 2,
|
|
colors: ['transparent']
|
|
},
|
|
xaxis: {
|
|
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
|
|
labels: {
|
|
style: {
|
|
colors: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
},
|
|
axisBorder: {
|
|
show: true,
|
|
color: window.colorMap.bootstrapVars.bodyColor.rgba(0.1)
|
|
},
|
|
axisTicks: {
|
|
show: true,
|
|
color: window.colorMap.bootstrapVars.bodyColor.rgba(0.1)
|
|
}
|
|
},
|
|
yaxis: {
|
|
title: {
|
|
text: '$ (thousands)',
|
|
style: {
|
|
color: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
},
|
|
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
|
|
}
|
|
},
|
|
row: {
|
|
colors: [window.colorMap.bootstrapVars.bodyColor.rgba(0.05), 'transparent'],
|
|
opacity: 0.5
|
|
}
|
|
},
|
|
fill: {
|
|
opacity: 1
|
|
},
|
|
tooltip: {
|
|
y: {
|
|
formatter: function (val) {
|
|
return "$ " + val + " thousands"
|
|
}
|
|
},
|
|
theme: 'dark'
|
|
},
|
|
legend: {
|
|
labels: {
|
|
colors: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
},
|
|
colors: [window.colorMap.primary[500].hex, window.colorMap.primary[300].hex, window.colorMap.primary[200].hex]
|
|
};
|
|
|
|
const basicColumnChart = new ApexCharts(
|
|
document.getElementById('basic-column-chart'),
|
|
basicColumnOptions
|
|
);
|
|
basicColumnChart.render();
|
|
}
|
|
|
|
// Column with Data Labels
|
|
if (document.getElementById('column-with-data-labels-chart')) {
|
|
const columnWithDataLabelsOptions = {
|
|
series: [{
|
|
name: 'Inflation',
|
|
data: [2.3, 3.1, 4.0, 10.1, 4.0, 3.6, 3.2, 2.3, 1.4, 0.8, 0.5, 0.2]
|
|
}],
|
|
chart: {
|
|
height: 350,
|
|
type: 'bar',
|
|
toolbar: {
|
|
show: true
|
|
},
|
|
zoom: {
|
|
enabled: false
|
|
}
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
horizontal: false,
|
|
columnWidth: '55%',
|
|
endingShape: 'rounded'
|
|
},
|
|
},
|
|
dataLabels: {
|
|
enabled: true,
|
|
offsetY: -20,
|
|
style: {
|
|
fontSize: '12px',
|
|
colors: ['#fff']
|
|
}
|
|
},
|
|
stroke: {
|
|
show: true,
|
|
width: 2,
|
|
colors: ['transparent']
|
|
},
|
|
xaxis: {
|
|
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
|
labels: {
|
|
style: {
|
|
colors: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
},
|
|
axisBorder: {
|
|
show: true,
|
|
color: window.colorMap.bootstrapVars.bodyColor.rgba(0.1)
|
|
},
|
|
axisTicks: {
|
|
show: true,
|
|
color: window.colorMap.bootstrapVars.bodyColor.rgba(0.1)
|
|
}
|
|
},
|
|
yaxis: {
|
|
title: {
|
|
text: 'Servings',
|
|
style: {
|
|
color: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
},
|
|
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
|
|
}
|
|
},
|
|
row: {
|
|
colors: [window.colorMap.bootstrapVars.bodyColor.rgba(0.05), 'transparent'],
|
|
opacity: 0.5
|
|
}
|
|
},
|
|
fill: {
|
|
opacity: 1
|
|
},
|
|
tooltip: {
|
|
y: {
|
|
formatter: function (val) {
|
|
return val + " Servings"
|
|
}
|
|
},
|
|
theme: 'dark'
|
|
},
|
|
colors: [window.colorMap.primary[500].hex, window.colorMap.primary[300].hex, window.colorMap.primary[200].hex]
|
|
};
|
|
|
|
const columnWithDataLabelsChart = new ApexCharts(
|
|
document.getElementById('column-with-data-labels-chart'),
|
|
columnWithDataLabelsOptions
|
|
);
|
|
columnWithDataLabelsChart.render();
|
|
}
|
|
|
|
// Stacked Column Chart
|
|
if (document.getElementById('stacked-column-chart')) {
|
|
const stackedColumnOptions = {
|
|
series: [{
|
|
name: 'PRODUCT A',
|
|
data: [44, 55, 41, 67, 22, 43]
|
|
}, {
|
|
name: 'PRODUCT B',
|
|
data: [13, 23, 20, 8, 13, 27]
|
|
}, {
|
|
name: 'PRODUCT C',
|
|
data: [11, 17, 15, 15, 21, 14]
|
|
}, {
|
|
name: 'PRODUCT D',
|
|
data: [21, 7, 25, 13, 22, 8]
|
|
}],
|
|
chart: {
|
|
height: 350,
|
|
type: 'bar',
|
|
stacked: true,
|
|
toolbar: {
|
|
show: true
|
|
},
|
|
zoom: {
|
|
enabled: true
|
|
}
|
|
},
|
|
responsive: [{
|
|
breakpoint: 480,
|
|
options: {
|
|
legend: {
|
|
position: 'bottom',
|
|
offsetX: -10,
|
|
offsetY: 0
|
|
}
|
|
}
|
|
}],
|
|
plotOptions: {
|
|
bar: {
|
|
horizontal: false,
|
|
columnWidth: '55%',
|
|
endingShape: 'rounded'
|
|
},
|
|
},
|
|
dataLabels: {
|
|
enabled: true,
|
|
style: {
|
|
fontSize: '12px',
|
|
colors: ["#304758"]
|
|
}
|
|
},
|
|
stroke: {
|
|
show: true,
|
|
width: 2,
|
|
colors: ['transparent']
|
|
},
|
|
xaxis: {
|
|
type: 'category',
|
|
categories: ['Q1 2020', 'Q2 2020', 'Q3 2020', 'Q4 2020', 'Q1 2021', 'Q2 2021'],
|
|
labels: {
|
|
style: {
|
|
colors: Array(6).fill(window.colorMap.bootstrapVars.bodyColor.hex)
|
|
}
|
|
},
|
|
axisBorder: {
|
|
show: true,
|
|
color: window.colorMap.bootstrapVars.bodyColor.rgba(0.1)
|
|
},
|
|
axisTicks: {
|
|
show: true,
|
|
color: window.colorMap.bootstrapVars.bodyColor.rgba(0.1)
|
|
}
|
|
},
|
|
yaxis: {
|
|
title: {
|
|
text: 'Sales',
|
|
style: {
|
|
color: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
},
|
|
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
|
|
}
|
|
},
|
|
row: {
|
|
colors: [window.colorMap.bootstrapVars.bodyColor.rgba(0.05), 'transparent'],
|
|
opacity: 0.5
|
|
}
|
|
},
|
|
legend: {
|
|
position: 'right',
|
|
offsetY: 40,
|
|
labels: {
|
|
colors: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
},
|
|
fill: {
|
|
opacity: 1
|
|
},
|
|
tooltip: {
|
|
theme: 'dark',
|
|
y: {
|
|
formatter: function (val) {
|
|
return val + " units"
|
|
}
|
|
}
|
|
},
|
|
colors: [window.colorMap.primary[500].hex, window.colorMap.primary[300].hex, window.colorMap.primary[200].hex, window.colorMap.primary[100].hex]
|
|
};
|
|
|
|
const stackedColumnChart = new ApexCharts(
|
|
document.getElementById('stacked-column-chart'),
|
|
stackedColumnOptions
|
|
);
|
|
stackedColumnChart.render();
|
|
}
|
|
|
|
// Stacked 100 Column Chart
|
|
if (document.getElementById('stacked-100-column-chart')) {
|
|
const stacked100ColumnOptions = {
|
|
series: [{
|
|
name: 'PRODUCT A',
|
|
data: [44, 55, 41, 67, 22, 43, 21, 49]
|
|
}, {
|
|
name: 'PRODUCT B',
|
|
data: [13, 23, 20, 8, 13, 27, 33, 12]
|
|
}, {
|
|
name: 'PRODUCT C',
|
|
data: [11, 17, 15, 15, 21, 14, 15, 13]
|
|
}, {
|
|
name: 'PRODUCT D',
|
|
data: [21, 7, 25, 13, 22, 8, 10, 7]
|
|
}],
|
|
chart: {
|
|
type: 'bar',
|
|
height: 350,
|
|
stacked: true,
|
|
stackType: '100%',
|
|
toolbar: {
|
|
show: true
|
|
}
|
|
},
|
|
responsive: [{
|
|
breakpoint: 480,
|
|
options: {
|
|
legend: {
|
|
position: 'bottom',
|
|
offsetX: -10,
|
|
offsetY: 0
|
|
}
|
|
}
|
|
}],
|
|
xaxis: {
|
|
categories: ['2011 Q1', '2011 Q2', '2011 Q3', '2011 Q4', '2012 Q1', '2012 Q2',
|
|
'2012 Q3', '2012 Q4'
|
|
],
|
|
labels: {
|
|
style: {
|
|
colors: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
}
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
style: {
|
|
colors: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
}
|
|
},
|
|
fill: {
|
|
opacity: 1
|
|
},
|
|
legend: {
|
|
position: 'right',
|
|
offsetX: 0,
|
|
offsetY: 50,
|
|
labels: {
|
|
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, window.colorMap.primary[300].hex, window.colorMap.primary[200].hex, window.colorMap.primary[100].hex]
|
|
};
|
|
|
|
const stacked100ColumnChart = new ApexCharts(
|
|
document.getElementById('stacked-100-column-chart'),
|
|
stacked100ColumnOptions
|
|
);
|
|
stacked100ColumnChart.render();
|
|
}
|
|
|
|
// Grouped Stacked Column Chart
|
|
if (document.getElementById('grouped-stacked-column-chart')) {
|
|
const groupedStackedColumnOptions = {
|
|
series: [{
|
|
name: 'Actual Budget',
|
|
group: 'Budget',
|
|
data: [44000, 55000, 41000, 67000, 22000, 43000]
|
|
}, {
|
|
name: 'Expected Budget',
|
|
group: 'Budget',
|
|
data: [13000, 36000, 20000, 8000, 13000, 27000]
|
|
}, {
|
|
name: 'Actual Spending',
|
|
group: 'Spending',
|
|
data: [48000, 17000, 15000, 29000, 21000, 14000]
|
|
}, {
|
|
name: 'Expected Spending',
|
|
group: 'Spending',
|
|
data: [17000, 28000, 13000, 23000, 15000, 13000]
|
|
}],
|
|
chart: {
|
|
type: 'bar',
|
|
height: 350,
|
|
stacked: true,
|
|
toolbar: {
|
|
show: true
|
|
}
|
|
},
|
|
stroke: {
|
|
width: 1,
|
|
colors: ['#fff']
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
horizontal: false
|
|
}
|
|
},
|
|
xaxis: {
|
|
categories: [
|
|
'Marketing',
|
|
'Research',
|
|
'Operations',
|
|
'Sales',
|
|
'HR',
|
|
'IT'
|
|
],
|
|
labels: {
|
|
style: {
|
|
colors: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
}
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
style: {
|
|
colors: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
}
|
|
},
|
|
fill: {
|
|
opacity: 1
|
|
},
|
|
legend: {
|
|
position: 'top',
|
|
labels: {
|
|
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
|
|
}
|
|
}
|
|
},
|
|
colors: [window.colorMap.primary[500].hex, window.colorMap.primary[300].hex, window.colorMap.danger[500].hex, window.colorMap.danger[300].hex]
|
|
};
|
|
|
|
const groupedStackedColumnChart = new ApexCharts(
|
|
document.getElementById('grouped-stacked-column-chart'),
|
|
groupedStackedColumnOptions
|
|
);
|
|
groupedStackedColumnChart.render();
|
|
}
|
|
|
|
// Column Range (Dumbbell Chart)
|
|
if (document.getElementById('column-range-chart')) {
|
|
const columnRangeOptions = {
|
|
series: [{
|
|
data: [{
|
|
x: '2015',
|
|
y: [5000, 8000]
|
|
}, {
|
|
x: '2016',
|
|
y: [4000, 9500]
|
|
}, {
|
|
x: '2017',
|
|
y: [5000, 7500]
|
|
}, {
|
|
x: '2018',
|
|
y: [4500, 8500]
|
|
}, {
|
|
x: '2019',
|
|
y: [6000, 9000]
|
|
}, {
|
|
x: '2020',
|
|
y: [5000, 8700]
|
|
}, {
|
|
x: '2021',
|
|
y: [6500, 8800]
|
|
}]
|
|
}],
|
|
xaxis: {
|
|
labels: {
|
|
style: {
|
|
colors: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
}
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
style: {
|
|
colors: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
}
|
|
},
|
|
chart: {
|
|
height: 350,
|
|
type: 'rangeBar',
|
|
toolbar: {
|
|
show: true
|
|
}
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
horizontal: false,
|
|
columnWidth: '30%',
|
|
borderRadius: 5
|
|
}
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
title: {
|
|
text: 'Column Range Chart (Dumbbell)',
|
|
align: 'left'
|
|
},
|
|
colors: [window.colorMap.primary[500].hex],
|
|
tooltip: {
|
|
theme: 'dark'
|
|
},
|
|
grid: {
|
|
show: true,
|
|
borderColor: window.colorMap.bootstrapVars.bodyColor.rgba(0.08),
|
|
strokeDashArray: 5,
|
|
position: 'back',
|
|
xaxis: {
|
|
lines: {
|
|
show: false
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
const columnRangeChart = new ApexCharts(
|
|
document.getElementById('column-range-chart'),
|
|
columnRangeOptions
|
|
);
|
|
columnRangeChart.render();
|
|
}
|
|
|
|
// Distributed Column Chart
|
|
if (document.getElementById('distributed-column-chart')) {
|
|
const distributedColumnOptions = {
|
|
series: [{
|
|
data: [21, 22, 10, 28, 16, 21, 13, 30, 18, 20]
|
|
}],
|
|
chart: {
|
|
height: 350,
|
|
type: 'bar',
|
|
toolbar: {
|
|
show: true
|
|
},
|
|
events: {
|
|
click: function(chart, w, e) {
|
|
// Handle click events if needed
|
|
}
|
|
}
|
|
},
|
|
colors: [
|
|
window.colorMap.primary[500].hex, window.colorMap.primary[300].hex, window.colorMap.primary[200].hex, window.colorMap.primary[100].hex, window.colorMap.danger[500].hex,
|
|
window.colorMap.danger[50].hex, window.colorMap.info[200].hex, window.colorMap.info[600].hex, window.colorMap.success[300].hex, window.colorMap.warning[300].hex
|
|
],
|
|
plotOptions: {
|
|
bar: {
|
|
columnWidth: '45%',
|
|
distributed: true,
|
|
borderRadius: 4,
|
|
dataLabels: {
|
|
position: 'top'
|
|
}
|
|
}
|
|
},
|
|
grid: {
|
|
show: true,
|
|
borderColor: window.colorMap.bootstrapVars.bodyColor.rgba(0.08),
|
|
strokeDashArray: 5,
|
|
position: 'back',
|
|
xaxis: {
|
|
lines: {
|
|
show: false
|
|
}
|
|
}
|
|
},
|
|
dataLabels: {
|
|
enabled: true,
|
|
formatter: function(val) {
|
|
return val;
|
|
},
|
|
offsetY: -20,
|
|
style: {
|
|
fontSize: '12px',
|
|
colors: [window.colorMap.bootstrapVars.bodyColor.hex]
|
|
}
|
|
},
|
|
legend: {
|
|
show: false
|
|
},
|
|
xaxis: {
|
|
categories: [
|
|
'Team A', 'Team B', 'Team C', 'Team D', 'Team E',
|
|
'Team F', 'Team G', 'Team H', 'Team I', 'Team J'
|
|
],
|
|
labels: {
|
|
style: {
|
|
fontSize: '12px',
|
|
colors: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
}
|
|
},
|
|
title: {
|
|
text: 'Distributed Column Chart',
|
|
align: 'left',
|
|
style: {
|
|
color: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
},
|
|
subtitle: {
|
|
text: 'Each column has a different color',
|
|
align: 'left',
|
|
style: {
|
|
color: window.colorMap.bootstrapVars.bodyColor.rgba(0.5)
|
|
}
|
|
}
|
|
};
|
|
|
|
const distributedColumnChart = new ApexCharts(
|
|
document.getElementById('distributed-column-chart'),
|
|
distributedColumnOptions
|
|
);
|
|
distributedColumnChart.render();
|
|
}
|
|
|
|
// Column with Negative Values
|
|
if (document.getElementById('column-with-negative-values-chart')) {
|
|
const columnWithNegativeValuesOptions = {
|
|
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: 'bar',
|
|
height: 350,
|
|
toolbar: {
|
|
show: true
|
|
}
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
colors: {
|
|
ranges: [{
|
|
from: -100,
|
|
to: -46,
|
|
color: window.colorMap.danger[500].hex
|
|
}, {
|
|
from: -45,
|
|
to: 0,
|
|
color: window.colorMap.warning[500].hex
|
|
}]
|
|
},
|
|
columnWidth: '80%'
|
|
}
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
xaxis: {
|
|
type: 'datetime',
|
|
categories: [
|
|
'2011-01-01', '2011-02-01', '2011-03-01', '2011-04-01', '2011-05-01', '2011-06-01',
|
|
'2011-07-01', '2011-08-01', '2011-09-01', '2011-10-01', '2011-11-01', '2011-12-01',
|
|
'2012-01-01', '2012-02-01', '2012-03-01', '2012-04-01', '2012-05-01', '2012-06-01',
|
|
'2012-07-01', '2012-08-01', '2012-09-01', '2012-10-01', '2012-11-01', '2012-12-01',
|
|
'2013-01-01', '2013-02-01', '2013-03-01', '2013-04-01', '2013-05-01', '2013-06-01',
|
|
'2013-07-01', '2013-08-01', '2013-09-01'
|
|
],
|
|
labels: {
|
|
rotate: -90,
|
|
style: {
|
|
colors: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
}
|
|
},
|
|
yaxis: {
|
|
title: {
|
|
text: 'Growth',
|
|
style: {
|
|
color: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
},
|
|
labels: {
|
|
formatter: function(val) {
|
|
return val.toFixed(0) + "%";
|
|
},
|
|
style: {
|
|
colors: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
}
|
|
},
|
|
tooltip: {
|
|
theme: 'dark',
|
|
y: {
|
|
formatter: function(val) {
|
|
return val.toFixed(2) + "%";
|
|
}
|
|
}
|
|
},
|
|
colors: [window.colorMap.primary[500].hex],
|
|
grid: {
|
|
show: true,
|
|
borderColor: window.colorMap.bootstrapVars.bodyColor.rgba(0.08),
|
|
strokeDashArray: 5,
|
|
position: 'back',
|
|
xaxis: {
|
|
lines: {
|
|
show: false
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
const columnWithNegativeValuesChart = new ApexCharts(
|
|
document.getElementById('column-with-negative-values-chart'),
|
|
columnWithNegativeValuesOptions
|
|
);
|
|
columnWithNegativeValuesChart.render();
|
|
}
|
|
|
|
// Column with Markers
|
|
if (document.getElementById('column-with-markers-chart')) {
|
|
const columnWithMarkersOptions = {
|
|
series: [{
|
|
name: 'Actual',
|
|
data: [
|
|
{
|
|
x: '2011',
|
|
y: 1292,
|
|
goals: [
|
|
{
|
|
name: 'Expected',
|
|
value: 1400,
|
|
strokeHeight: 5,
|
|
strokeColor: window.colorMap.primary[300].hex
|
|
}
|
|
]
|
|
},
|
|
{
|
|
x: '2012',
|
|
y: 4432,
|
|
goals: [
|
|
{
|
|
name: 'Expected',
|
|
value: 5400,
|
|
strokeHeight: 5,
|
|
strokeColor: window.colorMap.primary[300].hex
|
|
}
|
|
]
|
|
},
|
|
{
|
|
x: '2013',
|
|
y: 5423,
|
|
goals: [
|
|
{
|
|
name: 'Expected',
|
|
value: 5200,
|
|
strokeHeight: 5,
|
|
strokeColor: window.colorMap.primary[300].hex
|
|
}
|
|
]
|
|
},
|
|
{
|
|
x: '2014',
|
|
y: 6653,
|
|
goals: [
|
|
{
|
|
name: 'Expected',
|
|
value: 6500,
|
|
strokeHeight: 5,
|
|
strokeColor: window.colorMap.primary[300].hex
|
|
}
|
|
]
|
|
},
|
|
{
|
|
x: '2015',
|
|
y: 8133,
|
|
goals: [
|
|
{
|
|
name: 'Expected',
|
|
value: 6600,
|
|
strokeHeight: 13,
|
|
strokeWidth: 0,
|
|
strokeLineCap: 'round',
|
|
strokeColor: window.colorMap.primary[300].hex
|
|
}
|
|
]
|
|
},
|
|
{
|
|
x: '2016',
|
|
y: 7132,
|
|
goals: [
|
|
{
|
|
name: 'Expected',
|
|
value: 7500,
|
|
strokeHeight: 5,
|
|
strokeColor: window.colorMap.primary[300].hex
|
|
}
|
|
]
|
|
},
|
|
{
|
|
x: '2017',
|
|
y: 7332,
|
|
goals: [
|
|
{
|
|
name: 'Expected',
|
|
value: 8700,
|
|
strokeHeight: 5,
|
|
strokeColor: window.colorMap.primary[300].hex
|
|
}
|
|
]
|
|
},
|
|
{
|
|
x: '2018',
|
|
y: 6553,
|
|
goals: [
|
|
{
|
|
name: 'Expected',
|
|
value: 7300,
|
|
strokeHeight: 2,
|
|
strokeDashArray: 2,
|
|
strokeColor: window.colorMap.primary[300].hex
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}],
|
|
chart: {
|
|
height: 350,
|
|
type: 'bar',
|
|
toolbar: {
|
|
show: true
|
|
}
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
columnWidth: '60%',
|
|
borderRadius: 3
|
|
}
|
|
},
|
|
colors: [window.colorMap.warning[500].hex],
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
legend: {
|
|
show: true,
|
|
showForSingleSeries: true,
|
|
customLegendItems: ['Actual', 'Expected'],
|
|
markers: {
|
|
fillColors: [window.colorMap.warning[500].hex, window.colorMap.primary[300].hex]
|
|
},
|
|
labels: {
|
|
colors: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
},
|
|
stroke: {
|
|
width: 1
|
|
},
|
|
title: {
|
|
text: 'Actual vs Expected Values',
|
|
align: 'left',
|
|
style: {
|
|
color: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
},
|
|
xaxis: {
|
|
labels: {
|
|
style: {
|
|
colors: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
}
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
style: {
|
|
colors: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
}
|
|
},
|
|
tooltip: {
|
|
theme: 'dark',
|
|
shared: true,
|
|
intersect: false
|
|
},
|
|
grid: {
|
|
show: true,
|
|
borderColor: window.colorMap.bootstrapVars.bodyColor.rgba(0.08),
|
|
strokeDashArray: 5,
|
|
position: 'back',
|
|
xaxis: {
|
|
lines: {
|
|
show: false
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
const columnWithMarkersChart = new ApexCharts(
|
|
document.getElementById('column-with-markers-chart'),
|
|
columnWithMarkersOptions
|
|
);
|
|
columnWithMarkersChart.render();
|
|
}
|
|
|
|
// Column with Group Labels
|
|
if (document.getElementById('column-with-group-label-chart')) {
|
|
const columnWithGroupLabelOptions = {
|
|
series: [{
|
|
name: 'Actual',
|
|
data: [150000, 205000, 178000, 235000, 210000, 280000, 310000, 300000, 340000, 365000, 340000, 400000]
|
|
}, {
|
|
name: 'Target',
|
|
data: [190000, 230000, 200000, 255000, 235000, 300000, 330000, 320000, 360000, 385000, 360000, 420000]
|
|
}],
|
|
chart: {
|
|
type: 'bar',
|
|
height: 350,
|
|
toolbar: {
|
|
show: true
|
|
}
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
horizontal: false,
|
|
columnWidth: '60%',
|
|
borderRadius: 3,
|
|
rangeBarOverlap: false
|
|
}
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
stroke: {
|
|
show: true,
|
|
width: 0,
|
|
colors: ['transparent']
|
|
},
|
|
xaxis: {
|
|
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
|
labels: {
|
|
style: {
|
|
colors: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
},
|
|
axisBorder: {
|
|
show: false
|
|
},
|
|
axisTicks: {
|
|
show: false
|
|
}
|
|
},
|
|
yaxis: {
|
|
title: {
|
|
text: 'Sales (in dollars)',
|
|
style: {
|
|
color: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
},
|
|
labels: {
|
|
formatter: function(val) {
|
|
return '$' + val.toLocaleString(undefined, {maximumFractionDigits: 0});
|
|
},
|
|
style: {
|
|
colors: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
},
|
|
min: 0,
|
|
max: 450000,
|
|
tickAmount: 5
|
|
},
|
|
fill: {
|
|
opacity: 1
|
|
},
|
|
legend: {
|
|
position: 'top',
|
|
horizontalAlign: 'left',
|
|
labels: {
|
|
colors: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
},
|
|
colors: [window.colorMap.primary[500].hex, window.colorMap.primary[300].hex],
|
|
grid: {
|
|
show: true,
|
|
borderColor: window.colorMap.bootstrapVars.bodyColor.rgba(0.08),
|
|
strokeDashArray: 5,
|
|
position: 'back',
|
|
xaxis: {
|
|
lines: {
|
|
show: false
|
|
}
|
|
}
|
|
},
|
|
tooltip: {
|
|
theme: 'dark',
|
|
y: {
|
|
formatter: function(val) {
|
|
return '$' + val.toLocaleString(undefined, {maximumFractionDigits: 0});
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
const columnWithGroupLabelChart = new ApexCharts(
|
|
document.getElementById('column-with-group-label-chart'),
|
|
columnWithGroupLabelOptions
|
|
);
|
|
columnWithGroupLabelChart.render();
|
|
}
|
|
|
|
// Column with Rotated Labels
|
|
if (document.getElementById('column-with-rotated-labels-chart')) {
|
|
const columnWithRotatedLabelsOptions = {
|
|
series: [{
|
|
name: 'Population',
|
|
data: [2.8, 3.9, 5.2, 6.1, 8.5, 11.7, 14.3, 16.5, 19.8, 24.1, 31.0]
|
|
}],
|
|
chart: {
|
|
height: 350,
|
|
type: 'bar',
|
|
toolbar: {
|
|
show: true
|
|
}
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
borderRadius: 4,
|
|
columnWidth: '70%',
|
|
}
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
stroke: {
|
|
width: 2
|
|
},
|
|
xaxis: {
|
|
categories: [
|
|
'South Korea', 'Canada', 'United Kingdom', 'France', 'Germany',
|
|
'Japan', 'Russia', 'Brazil', 'United States', 'Indonesia', 'India'
|
|
],
|
|
labels: {
|
|
rotate: -45,
|
|
rotateAlways: true,
|
|
style: {
|
|
fontSize: '12px',
|
|
colors: Array(11).fill(window.colorMap.bootstrapVars.bodyColor.hex)
|
|
}
|
|
}
|
|
},
|
|
yaxis: {
|
|
title: {
|
|
text: 'Population (in millions)',
|
|
style: {
|
|
color: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
},
|
|
labels: {
|
|
formatter: function(val) {
|
|
return val.toFixed(1) + 'M';
|
|
},
|
|
style: {
|
|
colors: Array(6).fill(window.colorMap.bootstrapVars.bodyColor.hex)
|
|
}
|
|
}
|
|
},
|
|
fill: {
|
|
type: 'gradient',
|
|
gradient: {
|
|
shade: 'light',
|
|
type: 'vertical',
|
|
shadeIntensity: 0.4,
|
|
gradientToColors: ['#ffffff'],
|
|
inverseColors: false,
|
|
opacityFrom: 0.7,
|
|
opacityTo: 0.2,
|
|
stops: [0, 100]
|
|
}
|
|
},
|
|
tooltip: {
|
|
theme: 'dark',
|
|
y: {
|
|
formatter: function(val) {
|
|
return val.toFixed(1) + ' million';
|
|
}
|
|
}
|
|
},
|
|
colors: [window.colorMap.primary[500].hex],
|
|
grid: {
|
|
show: true,
|
|
borderColor: window.colorMap.bootstrapVars.bodyColor.rgba(0.08),
|
|
strokeDashArray: 5,
|
|
position: 'back',
|
|
xaxis: {
|
|
lines: {
|
|
show: false
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
const columnWithRotatedLabelsChart = new ApexCharts(
|
|
document.getElementById('column-with-rotated-labels-chart'),
|
|
columnWithRotatedLabelsOptions
|
|
);
|
|
columnWithRotatedLabelsChart.render();
|
|
}
|
|
|
|
// Dynamic Loaded Column Chart
|
|
if (document.getElementById('dynamic-loaded-column-chart')) {
|
|
const dynamicLoadedColumnOptions = {
|
|
series: [{
|
|
name: "Load",
|
|
data: []
|
|
}],
|
|
chart: {
|
|
height: 350,
|
|
type: 'bar',
|
|
toolbar: {
|
|
show: true
|
|
},
|
|
animations: {
|
|
enabled: true,
|
|
easing: 'easeinout',
|
|
speed: 800,
|
|
animateGradually: {
|
|
enabled: true,
|
|
delay: 150
|
|
},
|
|
dynamicAnimation: {
|
|
enabled: true,
|
|
speed: 350
|
|
}
|
|
}
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
borderRadius: 4,
|
|
columnWidth: '45%',
|
|
distributed: false
|
|
}
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
legend: {
|
|
show: false
|
|
},
|
|
stroke: {
|
|
show: true,
|
|
width: 2
|
|
},
|
|
xaxis: {
|
|
categories: [],
|
|
labels: {
|
|
rotate: 0,
|
|
style: {
|
|
colors: Array(10).fill(window.colorMap.bootstrapVars.bodyColor.hex)
|
|
}
|
|
}
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
style: {
|
|
colors: Array(6).fill(window.colorMap.bootstrapVars.bodyColor.hex)
|
|
}
|
|
}
|
|
},
|
|
tooltip: {
|
|
theme: 'dark',
|
|
y: {
|
|
formatter: function(val) {
|
|
return val.toFixed(0);
|
|
}
|
|
}
|
|
},
|
|
colors: [window.colorMap.primary[500].hex],
|
|
grid: {
|
|
show: true,
|
|
borderColor: window.colorMap.bootstrapVars.bodyColor.rgba(0.08),
|
|
strokeDashArray: 5,
|
|
position: 'back',
|
|
xaxis: {
|
|
lines: {
|
|
show: false
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
const dynamicLoadedColumnChart = new ApexCharts(
|
|
document.getElementById('dynamic-loaded-column-chart'),
|
|
dynamicLoadedColumnOptions
|
|
);
|
|
dynamicLoadedColumnChart.render();
|
|
|
|
// Function to simulate loading data
|
|
const updateDynamicChart = function() {
|
|
const newData = [];
|
|
const newCategories = [];
|
|
|
|
// Generate random data
|
|
for (let i = 1; i <= 10; i++) {
|
|
newData.push(Math.floor(Math.random() * 90) + 10);
|
|
newCategories.push('Item ' + i);
|
|
}
|
|
|
|
// Update chart with new data
|
|
dynamicLoadedColumnChart.updateOptions({
|
|
xaxis: {
|
|
categories: newCategories
|
|
}
|
|
});
|
|
|
|
dynamicLoadedColumnChart.updateSeries([{
|
|
name: 'Load',
|
|
data: newData
|
|
}]);
|
|
};
|
|
|
|
// Initial load
|
|
setTimeout(updateDynamicChart, 1000);
|
|
|
|
// Set up reload button if it exists
|
|
const reloadButton = document.getElementById('reload-dynamic-chart');
|
|
if (reloadButton) {
|
|
reloadButton.addEventListener('click', updateDynamicChart);
|
|
} else {
|
|
// If no button exists, reload every 5 seconds
|
|
setInterval(updateDynamicChart, 5000);
|
|
}
|
|
}
|
|
|
|
// Dumbbell Column Chart
|
|
if (document.getElementById('dumbbell-column-chart')) {
|
|
const dumbbellColumnOptions = {
|
|
series: [{
|
|
data: [{
|
|
x: '2015',
|
|
y: [5000, 8000]
|
|
}, {
|
|
x: '2016',
|
|
y: [4000, 9500]
|
|
}, {
|
|
x: '2017',
|
|
y: [5000, 7500]
|
|
}, {
|
|
x: '2018',
|
|
y: [4500, 8500]
|
|
}, {
|
|
x: '2019',
|
|
y: [6000, 9000]
|
|
}, {
|
|
x: '2020',
|
|
y: [5000, 8700]
|
|
}, {
|
|
x: '2021',
|
|
y: [6500, 8800]
|
|
}, {
|
|
x: '2022',
|
|
y: [7200, 9400]
|
|
}, {
|
|
x: '2023',
|
|
y: [7800, 10200]
|
|
}]
|
|
}],
|
|
chart: {
|
|
height: 350,
|
|
type: 'rangeBar',
|
|
toolbar: {
|
|
show: true
|
|
}
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
horizontal: false,
|
|
columnWidth: '30%',
|
|
borderRadius: 5,
|
|
isDumbbell: true,
|
|
dumbbellColors: [[window.colorMap.primary[500].hex, window.colorMap.danger[500].hex]]
|
|
}
|
|
},
|
|
title: {
|
|
text: 'Year-wise Revenue Range (Min-Max)',
|
|
align: 'left',
|
|
style: {
|
|
color: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
},
|
|
subtitle: {
|
|
text: 'Range between minimum and maximum revenue',
|
|
align: 'left',
|
|
style: {
|
|
color: window.colorMap.bootstrapVars.bodyColor.rgba(0.5)
|
|
}
|
|
},
|
|
legend: {
|
|
show: false
|
|
},
|
|
xaxis: {
|
|
type: 'category',
|
|
labels: {
|
|
rotate: -45,
|
|
rotateAlways: true,
|
|
style: {
|
|
colors: Array(9).fill(window.colorMap.bootstrapVars.bodyColor.hex)
|
|
}
|
|
}
|
|
},
|
|
yaxis: {
|
|
title: {
|
|
text: 'Revenue ($ thousands)',
|
|
style: {
|
|
color: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
},
|
|
labels: {
|
|
formatter: function(val) {
|
|
return '$' + val.toFixed(0) + 'k';
|
|
},
|
|
style: {
|
|
colors: Array(20).fill(window.colorMap.bootstrapVars.bodyColor.hex)
|
|
}
|
|
}
|
|
},
|
|
tooltip: {
|
|
theme: 'dark',
|
|
custom: function({series, seriesIndex, dataPointIndex, w}) {
|
|
const data = w.globals.initialSeries[seriesIndex].data[dataPointIndex];
|
|
const min = data.y[0];
|
|
const max = data.y[1];
|
|
const range = max - min;
|
|
|
|
return (
|
|
'<div class="p-2">' +
|
|
'<div class="mb-1"><b>' + data.x + ' Revenue Range</b></div>' +
|
|
'<div>Min: $' + min.toLocaleString() + '</div>' +
|
|
'<div>Max: $' + max.toLocaleString() + '</div>' +
|
|
'<div>Range: $' + range.toLocaleString() + '</div>' +
|
|
'</div>'
|
|
);
|
|
}
|
|
},
|
|
grid: {
|
|
show: true,
|
|
borderColor: window.colorMap.bootstrapVars.bodyColor.rgba(0.08),
|
|
strokeDashArray: 5,
|
|
position: 'back',
|
|
xaxis: {
|
|
lines: {
|
|
show: false
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
const dumbbellColumnChart = new ApexCharts(
|
|
document.getElementById('dumbbell-column-chart'),
|
|
dumbbellColumnOptions
|
|
);
|
|
dumbbellColumnChart.render();
|
|
}
|
|
});
|