mirror of https://github.com/ColorlibHQ/gentelella
Fixed charts
Aigars Silkalns
parent
fb030ee74c
commit
2f9a826015
|
|
@ -16,7 +16,7 @@
|
||||||
<script type="module" src="/src/main-minimal.js"></script>
|
<script type="module" src="/src/main-minimal.js"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="nav-md">
|
<body class="nav-md page-index">
|
||||||
<div class="container body">
|
<div class="container body">
|
||||||
<div class="main_container">
|
<div class="main_container">
|
||||||
<div class="col-md-3 left_col">
|
<div class="col-md-3 left_col">
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@
|
||||||
<script type="module" src="/src/main-minimal.js"></script>
|
<script type="module" src="/src/main-minimal.js"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="nav-md">
|
<body class="nav-md page-index2">
|
||||||
<div class="container body">
|
<div class="container body">
|
||||||
<div class="main_container">
|
<div class="main_container">
|
||||||
<div class="col-md-3 left_col">
|
<div class="col-md-3 left_col">
|
||||||
|
|
@ -324,23 +324,17 @@
|
||||||
<div class="col-md-4 tile">
|
<div class="col-md-4 tile">
|
||||||
<span>Total Sessions</span>
|
<span>Total Sessions</span>
|
||||||
<h2>231,809</h2>
|
<h2>231,809</h2>
|
||||||
<span class="sparkline11 graph" style="height: 160px;">
|
<span class="sparkline11 graph"></span>
|
||||||
<canvas width="200" height="60" style="display: inline-block; vertical-align: top; width: 94px; height: 30px;"></canvas>
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-4 tile">
|
<div class="col-md-4 tile">
|
||||||
<span>Total Revenue</span>
|
<span>Total Revenue</span>
|
||||||
<h2>$231,809</h2>
|
<h2>$231,809</h2>
|
||||||
<span class="sparkline22 graph" style="height: 160px;">
|
<span class="sparkline22 graph"></span>
|
||||||
<canvas width="200" height="60" style="display: inline-block; vertical-align: top; width: 94px; height: 30px;"></canvas>
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-4 tile">
|
<div class="col-md-4 tile">
|
||||||
<span>Total Sessions</span>
|
<span>Total Users</span>
|
||||||
<h2>231,809</h2>
|
<h2>187,245</h2>
|
||||||
<span class="sparkline11 graph" style="height: 160px;">
|
<span class="sparkline11 graph"></span>
|
||||||
<canvas width="200" height="60" style="display: inline-block; vertical-align: top; width: 94px; height: 30px;"></canvas>
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -371,10 +365,9 @@
|
||||||
<i class="fas fa-user aero"></i>
|
<i class="fas fa-user aero"></i>
|
||||||
</a>
|
</a>
|
||||||
<div class="d-flex-body">
|
<div class="d-flex-body">
|
||||||
<a class="title" href="#">Ms. Mary Jane</a>
|
<a class="title" href="#">Sarah Johnson</a>
|
||||||
<p><strong>$2300. </strong> Agent Avarage Sales </p>
|
<p><strong>$4,850.</strong> Top Agent Sales</p>
|
||||||
<p> <small>12 Sales Today</small>
|
<p><small>18 Sales Today</small></p>
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li class="media event">
|
<li class="media event">
|
||||||
|
|
@ -382,10 +375,9 @@
|
||||||
<i class="fas fa-user green"></i>
|
<i class="fas fa-user green"></i>
|
||||||
</a>
|
</a>
|
||||||
<div class="d-flex-body">
|
<div class="d-flex-body">
|
||||||
<a class="title" href="#">Ms. Mary Jane</a>
|
<a class="title" href="#">Michael Chen</a>
|
||||||
<p><strong>$2300. </strong> Agent Avarage Sales </p>
|
<p><strong>$3,920.</strong> Senior Agent Sales</p>
|
||||||
<p> <small>12 Sales Today</small>
|
<p><small>15 Sales Today</small></p>
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li class="media event">
|
<li class="media event">
|
||||||
|
|
@ -393,32 +385,29 @@
|
||||||
<i class="fas fa-user blue"></i>
|
<i class="fas fa-user blue"></i>
|
||||||
</a>
|
</a>
|
||||||
<div class="d-flex-body">
|
<div class="d-flex-body">
|
||||||
<a class="title" href="#">Ms. Mary Jane</a>
|
<a class="title" href="#">Emily Rodriguez</a>
|
||||||
<p><strong>$2300. </strong> Agent Avarage Sales </p>
|
<p><strong>$3,450.</strong> Agent Average Sales</p>
|
||||||
<p> <small>12 Sales Today</small>
|
<p><small>12 Sales Today</small></p>
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li class="media event">
|
<li class="media event">
|
||||||
<a class="pull-left border-aero profile_thumb">
|
<a class="pull-left border-red profile_thumb">
|
||||||
<i class="fas fa-user aero"></i>
|
<i class="fas fa-user red"></i>
|
||||||
</a>
|
</a>
|
||||||
<div class="d-flex-body">
|
<div class="d-flex-body">
|
||||||
<a class="title" href="#">Ms. Mary Jane</a>
|
<a class="title" href="#">David Wilson</a>
|
||||||
<p><strong>$2300. </strong> Agent Avarage Sales </p>
|
<p><strong>$3,180.</strong> Agent Sales</p>
|
||||||
<p> <small>12 Sales Today</small>
|
<p><small>10 Sales Today</small></p>
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li class="media event">
|
<li class="media event">
|
||||||
<a class="pull-left border-green profile_thumb">
|
<a class="pull-left border-purple profile_thumb">
|
||||||
<i class="fas fa-user green"></i>
|
<i class="fas fa-user purple"></i>
|
||||||
</a>
|
</a>
|
||||||
<div class="d-flex-body">
|
<div class="d-flex-body">
|
||||||
<a class="title" href="#">Ms. Mary Jane</a>
|
<a class="title" href="#">Amanda Foster</a>
|
||||||
<p><strong>$2300. </strong> Agent Avarage Sales </p>
|
<p><strong>$2,890.</strong> Agent Sales</p>
|
||||||
<p> <small>12 Sales Today</small>
|
<p><small>9 Sales Today</small></p>
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
@ -456,9 +445,7 @@
|
||||||
|
|
||||||
<div class="row" style="border-bottom: 1px solid #E0E0E0; padding-bottom: 5px; margin-bottom: 5px;">
|
<div class="row" style="border-bottom: 1px solid #E0E0E0; padding-bottom: 5px; margin-bottom: 5px;">
|
||||||
<div class="col-md-7" style="overflow:hidden;">
|
<div class="col-md-7" style="overflow:hidden;">
|
||||||
<span class="sparkline_one" style="height: 160px; padding: 10px 25px;">
|
<span class="sparkline_one" style="height: 160px; padding: 10px 25px;"></span>
|
||||||
<canvas width="200" height="60" style="display: inline-block; vertical-align: top; width: 94px; height: 30px;"></canvas>
|
|
||||||
</span>
|
|
||||||
<h4 style="margin:18px">Weekly sales progress</h4>
|
<h4 style="margin:18px">Weekly sales progress</h4>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -466,15 +453,15 @@
|
||||||
<div class="row" style="text-align: center;">
|
<div class="row" style="text-align: center;">
|
||||||
<div class="col-md-4">
|
<div class="col-md-4">
|
||||||
<canvas class="canvasDoughnut" height="110" width="110" style="margin: 5px 10px 10px 0"></canvas>
|
<canvas class="canvasDoughnut" height="110" width="110" style="margin: 5px 10px 10px 0"></canvas>
|
||||||
<h4 style="margin:0">Bounce Rates</h4>
|
<h4 style="margin:0; font-size: 14px;">Bounce Rate</h4>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-4">
|
<div class="col-md-4">
|
||||||
<canvas class="canvasDoughnut" height="110" width="110" style="margin: 5px 10px 10px 0"></canvas>
|
<canvas class="canvasDoughnut" height="110" width="110" style="margin: 5px 10px 10px 0"></canvas>
|
||||||
<h4 style="margin:0">New Traffic</h4>
|
<h4 style="margin:0; font-size: 14px;">Conversion Rate</h4>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-4">
|
<div class="col-md-4">
|
||||||
<canvas class="canvasDoughnut" height="110" width="110" style="margin: 5px 10px 10px 0"></canvas>
|
<canvas class="canvasDoughnut" height="110" width="110" style="margin: 5px 10px 10px 0"></canvas>
|
||||||
<h4 style="margin:0">Device Share</h4>
|
<h4 style="margin:0; font-size: 14px;">Mobile Traffic</h4>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,7 @@
|
||||||
<script type="module" src="/src/main-minimal.js"></script>
|
<script type="module" src="/src/main-minimal.js"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="nav-md">
|
<body class="nav-md page-index3">
|
||||||
<div class="container body">
|
<div class="container body">
|
||||||
<div class="main_container">
|
<div class="main_container">
|
||||||
<div class="col-md-3 left_col">
|
<div class="col-md-3 left_col">
|
||||||
|
|
|
||||||
|
|
@ -321,7 +321,7 @@
|
||||||
<!-- Three Column Layout -->
|
<!-- Three Column Layout -->
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<!-- Column 1 -->
|
<!-- Column 1 -->
|
||||||
<div class="col-xs-4 text-center">
|
<div class="col-md-4 col-sm-4 col-4 text-center" style="float: left;">
|
||||||
<div style="margin-bottom: 25px;">
|
<div style="margin-bottom: 25px;">
|
||||||
<span class="chart-medium" data-percent="86" data-label="CPU Usage">
|
<span class="chart-medium" data-percent="86" data-label="CPU Usage">
|
||||||
<span class="percent"></span>
|
<span class="percent"></span>
|
||||||
|
|
@ -343,7 +343,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Column 2 -->
|
<!-- Column 2 -->
|
||||||
<div class="col-xs-4 text-center">
|
<div class="col-md-4 col-sm-4 col-4 text-center" style="float: left;">
|
||||||
<div style="margin-bottom: 25px;">
|
<div style="margin-bottom: 25px;">
|
||||||
<span class="chart-medium" data-percent="73" data-label="Memory">
|
<span class="chart-medium" data-percent="73" data-label="Memory">
|
||||||
<span class="percent"></span>
|
<span class="percent"></span>
|
||||||
|
|
@ -365,7 +365,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Column 3 -->
|
<!-- Column 3 -->
|
||||||
<div class="col-xs-4 text-center">
|
<div class="col-md-4 col-sm-4 col-4 text-center" style="float: left;">
|
||||||
<div style="margin-bottom: 25px;">
|
<div style="margin-bottom: 25px;">
|
||||||
<span class="chart-medium" data-percent="92" data-label="Storage">
|
<span class="chart-medium" data-percent="92" data-label="Storage">
|
||||||
<span class="percent"></span>
|
<span class="percent"></span>
|
||||||
|
|
@ -385,6 +385,7 @@
|
||||||
<div style="margin-top: 8px; font-weight: bold; color: #333;">API</div>
|
<div style="margin-top: 8px; font-weight: bold; color: #333;">API</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="clearfix"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -393,60 +394,58 @@
|
||||||
<div class="col-md-6">
|
<div class="col-md-6">
|
||||||
<div class="panel panel-body">
|
<div class="panel panel-body">
|
||||||
<div class="x_title">
|
<div class="x_title">
|
||||||
<h4>Sparkline Inline Graphs</h4>
|
<h4>Sparkline Analytics Dashboard</h4>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>Interactive mini charts showing key performance trends and metrics</p>
|
||||||
|
|
||||||
|
<!-- Sparkline Grid Layout -->
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6 text-center" style="margin-bottom: 30px;">
|
||||||
|
<div style="margin-bottom: 10px;">
|
||||||
|
<span class="sparkline_line"></span>
|
||||||
|
</div>
|
||||||
|
<div style="font-weight: bold; color: #333; font-size: 14px;">Revenue Trend</div>
|
||||||
|
<div style="color: #666; font-size: 12px;">Monthly Growth</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-6 text-center" style="margin-bottom: 30px;">
|
||||||
|
<div style="margin-bottom: 10px;">
|
||||||
|
<span class="sparkline_area"></span>
|
||||||
|
</div>
|
||||||
|
<div style="font-weight: bold; color: #333; font-size: 14px;">User Activity</div>
|
||||||
|
<div style="color: #666; font-size: 12px;">Daily Sessions</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6 text-center" style="margin-bottom: 30px;">
|
||||||
|
<div style="margin-bottom: 10px;">
|
||||||
|
<span class="sparkline_bar"></span>
|
||||||
|
</div>
|
||||||
|
<div style="font-weight: bold; color: #333; font-size: 14px;">Sales Volume</div>
|
||||||
|
<div style="color: #666; font-size: 12px;">Weekly Performance</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-6 text-center" style="margin-bottom: 30px;">
|
||||||
|
<div style="margin-bottom: 10px;">
|
||||||
|
<span class="sparkline_pie"></span>
|
||||||
|
</div>
|
||||||
|
<div style="font-weight: bold; color: #333; font-size: 14px;">Market Share</div>
|
||||||
|
<div style="color: #666; font-size: 12px;">Distribution</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-12 text-center">
|
||||||
|
<div style="margin-bottom: 10px;">
|
||||||
|
<span class="sparkline_discreet"></span>
|
||||||
|
</div>
|
||||||
|
<div style="font-weight: bold; color: #333; font-size: 14px;">System Events</div>
|
||||||
|
<div style="color: #666; font-size: 12px;">Event Distribution Pattern</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>Yet another great library for inline data visualizations</p>
|
|
||||||
<table class="table table-striped">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th style="width:20%"></th>
|
|
||||||
<th style="width:50%"></th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<th>
|
|
||||||
<span class="sparkline_line" style="height: 160px;">
|
|
||||||
<canvas width="200" height="60" style="display: inline-block; vertical-align: top; width: 94px; height: 30px;"></canvas>
|
|
||||||
</span>
|
|
||||||
</th>
|
|
||||||
<td>Line Graph</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th>
|
|
||||||
<span class="sparkline_area" style="height: 160px;">
|
|
||||||
<canvas width="200" height="60" style="display: inline-block; vertical-align: top; width: 94px; height: 30px;"></canvas>
|
|
||||||
</span>
|
|
||||||
</th>
|
|
||||||
<td>Line Area Graph</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th>
|
|
||||||
<span class="sparkline_bar" style="height: 160px;">
|
|
||||||
<canvas width="200" height="60" style="display: inline-block; vertical-align: top; width: 94px; height: 30px;"></canvas>
|
|
||||||
</span>
|
|
||||||
</th>
|
|
||||||
<td>Bar Graph</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th>
|
|
||||||
<span class="sparkline_pie" style="height: 160px;">
|
|
||||||
<canvas width="200" height="60" style="display: inline-block; vertical-align: top; width: 94px; height: 30px;"></canvas>
|
|
||||||
</span>
|
|
||||||
</th>
|
|
||||||
<td>Pie Chart</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th>
|
|
||||||
<span class="sparkline_discreet" style="height: 160px;">
|
|
||||||
<canvas width="200" height="60" style="display: inline-block; vertical-align: top; width: 94px; height: 30px;"></canvas>
|
|
||||||
</span>
|
|
||||||
</th>
|
|
||||||
<td>Discrete chart</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
446
src/js/init.js
446
src/js/init.js
|
|
@ -84,6 +84,7 @@
|
||||||
initializeNetworkCharts();
|
initializeNetworkCharts();
|
||||||
initializeECharts();
|
initializeECharts();
|
||||||
initializeOtherCharts();
|
initializeOtherCharts();
|
||||||
|
initializeIndex2();
|
||||||
initializeSkycons();
|
initializeSkycons();
|
||||||
initializeGeneralElements();
|
initializeGeneralElements();
|
||||||
initializeMaps();
|
initializeMaps();
|
||||||
|
|
@ -1944,13 +1945,48 @@
|
||||||
|
|
||||||
console.log('✅ Easy Pie Charts initialized');
|
console.log('✅ Easy Pie Charts initialized');
|
||||||
|
|
||||||
// 3. Sparkline Charts using ECharts mini charts
|
// 3. Sparkline Charts using ECharts - Larger size to match pie charts
|
||||||
const sparklineElements = [
|
const sparklineElements = [
|
||||||
{ selector: '.sparkline_line', type: 'line', data: [5, 6, 7, 2, 0, 4, 2, 4, 5, 7, 2, 4, 12, 14] },
|
{
|
||||||
{ selector: '.sparkline_area', type: 'area', data: [5, 6, 2, 9, 4, 5, 3, 8, 5, 7, 9, 4, 2, 14] },
|
selector: '.sparkline_line',
|
||||||
{ selector: '.sparkline_bar', type: 'bar', data: [5, 6, 7, 2, 0, 4, 2, 4, 5, 7, 2, 4, 12, 14] },
|
type: 'line',
|
||||||
{ selector: '.sparkline_pie', type: 'pie', data: [20, 30, 25, 25] },
|
data: [45, 52, 38, 64, 51, 47, 59, 68, 42, 58, 73, 65, 78, 82],
|
||||||
{ selector: '.sparkline_discreet', type: 'scatter', data: [4, 6, 7, 7, 4, 3, 2, 1, 4, 4, 5, 6, 3, 4] }
|
width: 180,
|
||||||
|
height: 80,
|
||||||
|
color: '#26B99A'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: '.sparkline_area',
|
||||||
|
type: 'area',
|
||||||
|
data: [32, 48, 54, 41, 67, 59, 45, 73, 68, 52, 84, 76, 59, 91],
|
||||||
|
width: 180,
|
||||||
|
height: 80,
|
||||||
|
color: '#3498DB'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: '.sparkline_bar',
|
||||||
|
type: 'bar',
|
||||||
|
data: [25, 42, 58, 31, 49, 63, 37, 54, 48, 66, 52, 71, 45, 68],
|
||||||
|
width: 180,
|
||||||
|
height: 80,
|
||||||
|
color: '#E74C3C'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: '.sparkline_pie',
|
||||||
|
type: 'pie',
|
||||||
|
data: [35, 28, 22, 15],
|
||||||
|
width: 120,
|
||||||
|
height: 120,
|
||||||
|
color: '#F39C12'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: '.sparkline_discreet',
|
||||||
|
type: 'scatter',
|
||||||
|
data: [12, 24, 18, 32, 28, 15, 41, 38, 22, 29, 45, 33, 19, 36, 42, 27, 51, 38],
|
||||||
|
width: 380,
|
||||||
|
height: 80,
|
||||||
|
color: '#9B59B6'
|
||||||
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
sparklineElements.forEach(function(config, index) {
|
sparklineElements.forEach(function(config, index) {
|
||||||
|
|
@ -1960,13 +1996,15 @@
|
||||||
|
|
||||||
// Clear existing content
|
// Clear existing content
|
||||||
element.innerHTML = '';
|
element.innerHTML = '';
|
||||||
element.style.width = '100px';
|
element.style.width = config.width + 'px';
|
||||||
element.style.height = '40px';
|
element.style.height = config.height + 'px';
|
||||||
|
element.style.margin = '0 auto';
|
||||||
|
element.style.display = 'block';
|
||||||
|
|
||||||
const chartDiv = document.createElement('div');
|
const chartDiv = document.createElement('div');
|
||||||
chartDiv.id = chartId;
|
chartDiv.id = chartId;
|
||||||
chartDiv.style.width = '100px';
|
chartDiv.style.width = config.width + 'px';
|
||||||
chartDiv.style.height = '40px';
|
chartDiv.style.height = config.height + 'px';
|
||||||
element.appendChild(chartDiv);
|
element.appendChild(chartDiv);
|
||||||
|
|
||||||
const sparkChart = echarts.init(chartDiv);
|
const sparkChart = echarts.init(chartDiv);
|
||||||
|
|
@ -1977,25 +2015,31 @@
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
type: 'pie',
|
type: 'pie',
|
||||||
radius: ['40%', '70%'],
|
radius: ['35%', '65%'],
|
||||||
|
center: ['50%', '50%'],
|
||||||
data: [
|
data: [
|
||||||
{ value: config.data[0], itemStyle: { color: '#26B99A' } },
|
{ value: config.data[0], name: 'Product A', itemStyle: { color: '#26B99A' } },
|
||||||
{ value: config.data[1], itemStyle: { color: '#3498DB' } },
|
{ value: config.data[1], name: 'Product B', itemStyle: { color: '#3498DB' } },
|
||||||
{ value: config.data[2], itemStyle: { color: '#E74C3C' } },
|
{ value: config.data[2], name: 'Product C', itemStyle: { color: '#E74C3C' } },
|
||||||
{ value: config.data[3], itemStyle: { color: '#F39C12' } }
|
{ value: config.data[3], name: 'Others', itemStyle: { color: '#F39C12' } }
|
||||||
],
|
],
|
||||||
label: { show: false },
|
label: { show: false },
|
||||||
emphasis: { disabled: true }
|
emphasis: {
|
||||||
|
scale: true,
|
||||||
|
scaleSize: 5
|
||||||
|
},
|
||||||
|
animationType: 'expansion',
|
||||||
|
animationDuration: 800
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
} else {
|
} else {
|
||||||
option = {
|
option = {
|
||||||
grid: {
|
grid: {
|
||||||
left: 0,
|
left: 5,
|
||||||
right: 0,
|
right: 5,
|
||||||
top: 0,
|
top: 5,
|
||||||
bottom: 0
|
bottom: 5
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
|
|
@ -2011,25 +2055,63 @@
|
||||||
type: config.type === 'area' ? 'line' : config.type,
|
type: config.type === 'area' ? 'line' : config.type,
|
||||||
data: config.data,
|
data: config.data,
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: '#26B99A',
|
color: config.color,
|
||||||
width: 2
|
width: 3
|
||||||
},
|
},
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: '#26B99A'
|
color: config.color
|
||||||
},
|
},
|
||||||
areaStyle: config.type === 'area' ? {
|
areaStyle: config.type === 'area' ? {
|
||||||
color: 'rgba(38, 185, 154, 0.3)'
|
color: {
|
||||||
|
type: 'linear',
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
x2: 0,
|
||||||
|
y2: 1,
|
||||||
|
colorStops: [
|
||||||
|
{ offset: 0, color: config.color + '80' },
|
||||||
|
{ offset: 1, color: config.color + '20' }
|
||||||
|
]
|
||||||
|
}
|
||||||
} : undefined,
|
} : undefined,
|
||||||
symbol: config.type === 'scatter' ? 'circle' : 'none',
|
symbol: config.type === 'scatter' ? 'circle' : 'none',
|
||||||
symbolSize: config.type === 'scatter' ? 4 : 0,
|
symbolSize: config.type === 'scatter' ? 6 : 0,
|
||||||
animation: false,
|
animation: true,
|
||||||
barWidth: config.type === 'bar' ? '60%' : undefined
|
animationDuration: 1000,
|
||||||
|
barWidth: config.type === 'bar' ? '70%' : undefined,
|
||||||
|
smooth: config.type === 'line' || config.type === 'area'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
sparkChart.setOption(option);
|
sparkChart.setOption(option);
|
||||||
|
|
||||||
|
// Add hover effects for interactivity
|
||||||
|
if (config.type !== 'pie') {
|
||||||
|
chartDiv.addEventListener('mouseenter', function() {
|
||||||
|
sparkChart.setOption({
|
||||||
|
series: [{
|
||||||
|
lineStyle: {
|
||||||
|
width: config.type === 'line' || config.type === 'area' ? 4 : 3,
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowColor: config.color
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
chartDiv.addEventListener('mouseleave', function() {
|
||||||
|
sparkChart.setOption({
|
||||||
|
series: [{
|
||||||
|
lineStyle: {
|
||||||
|
width: 3,
|
||||||
|
shadowBlur: 0
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -2057,17 +2139,298 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Skycons (Weather Icons) - Fixed initialization
|
// Index2 page specific initialization (Transaction Summary, Top Profiles, Charts)
|
||||||
|
function initializeIndex2() {
|
||||||
|
if (!document.body.classList.contains('page-index2')) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('Initializing Index2 dashboard...');
|
||||||
|
|
||||||
|
try {
|
||||||
|
// 1. Initialize main transaction chart (chart_plot_02)
|
||||||
|
if (document.getElementById('chart_plot_02')) {
|
||||||
|
const chartContainer = document.getElementById('chart_plot_02');
|
||||||
|
chartContainer.style.height = '280px';
|
||||||
|
|
||||||
|
// Clear and create canvas
|
||||||
|
chartContainer.innerHTML = '';
|
||||||
|
const canvas = document.createElement('canvas');
|
||||||
|
canvas.id = 'transactionChart';
|
||||||
|
canvas.style.width = '100%';
|
||||||
|
canvas.style.height = '280px';
|
||||||
|
chartContainer.appendChild(canvas);
|
||||||
|
|
||||||
|
if (typeof Chart !== 'undefined') {
|
||||||
|
const ctx = canvas.getContext('2d');
|
||||||
|
new Chart(ctx, {
|
||||||
|
type: 'line',
|
||||||
|
data: {
|
||||||
|
labels: ['Dec 30', 'Jan 5', 'Jan 10', 'Jan 15', 'Jan 20', 'Jan 25', 'Jan 28'],
|
||||||
|
datasets: [{
|
||||||
|
label: 'Revenue',
|
||||||
|
data: [180000, 195000, 220000, 210000, 231809, 225000, 240000],
|
||||||
|
borderColor: '#1ABB9C',
|
||||||
|
backgroundColor: 'rgba(26, 187, 156, 0.1)',
|
||||||
|
fill: true,
|
||||||
|
tension: 0.4,
|
||||||
|
pointRadius: 6,
|
||||||
|
pointBackgroundColor: '#1ABB9C',
|
||||||
|
pointBorderColor: '#fff',
|
||||||
|
pointBorderWidth: 2
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
responsive: true,
|
||||||
|
maintainAspectRatio: false,
|
||||||
|
plugins: {
|
||||||
|
legend: {
|
||||||
|
display: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
scales: {
|
||||||
|
y: {
|
||||||
|
beginAtZero: false,
|
||||||
|
ticks: {
|
||||||
|
callback: function(value) {
|
||||||
|
return '$' + (value / 1000) + 'K';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('✅ Transaction Summary chart initialized');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2. Initialize sparkline charts in tiles
|
||||||
|
const sparklineConfigs = [
|
||||||
|
{ selector: '.sparkline11', data: [5, 6, 7, 2, 0, 4, 2, 4, 5, 7, 2, 4, 12, 14], color: '#1ABB9C' },
|
||||||
|
{ selector: '.sparkline22', data: [3, 8, 2, 9, 4, 5, 3, 8, 5, 7, 9, 4, 2, 14], color: '#3498DB' }
|
||||||
|
];
|
||||||
|
|
||||||
|
sparklineConfigs.forEach(function(config, index) {
|
||||||
|
const elements = document.querySelectorAll(config.selector);
|
||||||
|
elements.forEach(function(element, elemIndex) {
|
||||||
|
if (typeof echarts !== 'undefined') {
|
||||||
|
element.innerHTML = '';
|
||||||
|
element.style.width = '120px';
|
||||||
|
element.style.height = '40px';
|
||||||
|
|
||||||
|
const chartDiv = document.createElement('div');
|
||||||
|
chartDiv.id = `sparkline-tile-${index}-${elemIndex}`;
|
||||||
|
chartDiv.style.width = '120px';
|
||||||
|
chartDiv.style.height = '40px';
|
||||||
|
element.appendChild(chartDiv);
|
||||||
|
|
||||||
|
const sparkChart = echarts.init(chartDiv);
|
||||||
|
const option = {
|
||||||
|
grid: { left: 0, right: 0, top: 0, bottom: 0 },
|
||||||
|
xAxis: { type: 'category', show: false, data: config.data.map((_, i) => i) },
|
||||||
|
yAxis: { type: 'value', show: false },
|
||||||
|
series: [{
|
||||||
|
type: 'line',
|
||||||
|
data: config.data,
|
||||||
|
lineStyle: { color: config.color, width: 2 },
|
||||||
|
itemStyle: { color: config.color },
|
||||||
|
symbol: 'none',
|
||||||
|
smooth: true,
|
||||||
|
animation: true
|
||||||
|
}]
|
||||||
|
};
|
||||||
|
sparkChart.setOption(option);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// 3. Initialize Weekly Summary sparkline - Enhanced with realistic sales data
|
||||||
|
if (document.querySelector('.sparkline_one')) {
|
||||||
|
const element = document.querySelector('.sparkline_one');
|
||||||
|
if (typeof echarts !== 'undefined') {
|
||||||
|
element.innerHTML = '';
|
||||||
|
element.style.width = '250px';
|
||||||
|
element.style.height = '120px';
|
||||||
|
|
||||||
|
const chartDiv = document.createElement('div');
|
||||||
|
chartDiv.id = 'weekly-sparkline';
|
||||||
|
chartDiv.style.width = '250px';
|
||||||
|
chartDiv.style.height = '120px';
|
||||||
|
element.appendChild(chartDiv);
|
||||||
|
|
||||||
|
const weeklyChart = echarts.init(chartDiv);
|
||||||
|
// More realistic weekly sales progression data
|
||||||
|
const weeklyData = [28000, 31500, 29800, 35400, 33200, 36800, 39500, 42300, 38900, 41600, 45200, 43800, 47100, 49800];
|
||||||
|
const weekDays = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
|
||||||
|
|
||||||
|
const option = {
|
||||||
|
grid: { left: 20, right: 20, top: 20, bottom: 20 },
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
show: true,
|
||||||
|
data: weekDays,
|
||||||
|
axisLabel: { fontSize: 10, color: '#999' },
|
||||||
|
axisLine: { show: false },
|
||||||
|
axisTick: { show: false }
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
show: true,
|
||||||
|
axisLabel: {
|
||||||
|
fontSize: 10,
|
||||||
|
color: '#999',
|
||||||
|
formatter: function(value) {
|
||||||
|
return '$' + (value / 1000) + 'K';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: { color: '#f0f0f0', width: 1 }
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
formatter: function(params) {
|
||||||
|
const point = params[0];
|
||||||
|
return `${point.name}: $${point.value.toLocaleString()}`;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [{
|
||||||
|
type: 'line',
|
||||||
|
data: weeklyData,
|
||||||
|
lineStyle: { color: '#1ABB9C', width: 3 },
|
||||||
|
itemStyle: { color: '#1ABB9C' },
|
||||||
|
areaStyle: {
|
||||||
|
color: {
|
||||||
|
type: 'linear',
|
||||||
|
x: 0, y: 0, x2: 0, y2: 1,
|
||||||
|
colorStops: [
|
||||||
|
{ offset: 0, color: 'rgba(26, 187, 156, 0.3)' },
|
||||||
|
{ offset: 1, color: 'rgba(26, 187, 156, 0.05)' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 6,
|
||||||
|
smooth: true,
|
||||||
|
animation: true,
|
||||||
|
animationDuration: 2000
|
||||||
|
}]
|
||||||
|
};
|
||||||
|
weeklyChart.setOption(option);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 4. Initialize enhanced doughnut charts in Weekly Summary with realistic metrics
|
||||||
|
const doughnutElements = document.querySelectorAll('.canvasDoughnut');
|
||||||
|
const doughnutData = [
|
||||||
|
{
|
||||||
|
label: 'Bounce Rate',
|
||||||
|
value: 32,
|
||||||
|
data: [32, 68],
|
||||||
|
colors: ['#E74C3C', '#ECF0F1'],
|
||||||
|
description: '32% Bounce'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Conversion Rate',
|
||||||
|
value: 8.5,
|
||||||
|
data: [8.5, 91.5],
|
||||||
|
colors: ['#3498DB', '#ECF0F1'],
|
||||||
|
description: '8.5% Convert'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Mobile Traffic',
|
||||||
|
value: 67,
|
||||||
|
data: [67, 33],
|
||||||
|
colors: ['#26B99A', '#ECF0F1'],
|
||||||
|
description: '67% Mobile'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
doughnutElements.forEach(function(canvas, index) {
|
||||||
|
if (typeof Chart !== 'undefined' && index < doughnutData.length) {
|
||||||
|
const ctx = canvas.getContext('2d');
|
||||||
|
const config = doughnutData[index];
|
||||||
|
|
||||||
|
new Chart(ctx, {
|
||||||
|
type: 'doughnut',
|
||||||
|
data: {
|
||||||
|
datasets: [{
|
||||||
|
data: config.data,
|
||||||
|
backgroundColor: config.colors,
|
||||||
|
borderWidth: 0,
|
||||||
|
cutout: '65%'
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
responsive: true,
|
||||||
|
maintainAspectRatio: false,
|
||||||
|
plugins: {
|
||||||
|
legend: { display: false },
|
||||||
|
tooltip: {
|
||||||
|
enabled: true,
|
||||||
|
callbacks: {
|
||||||
|
label: function(context) {
|
||||||
|
return config.description;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add center text showing percentage
|
||||||
|
const centerText = document.createElement('div');
|
||||||
|
centerText.style.position = 'absolute';
|
||||||
|
centerText.style.top = '50%';
|
||||||
|
centerText.style.left = '50%';
|
||||||
|
centerText.style.transform = 'translate(-50%, -50%)';
|
||||||
|
centerText.style.fontSize = '16px';
|
||||||
|
centerText.style.fontWeight = 'bold';
|
||||||
|
centerText.style.color = config.colors[0];
|
||||||
|
centerText.style.textAlign = 'center';
|
||||||
|
centerText.style.pointerEvents = 'none';
|
||||||
|
centerText.innerHTML = `${config.value}${config.label.includes('Rate') ? '%' : config.label.includes('Traffic') ? '%' : ''}`;
|
||||||
|
|
||||||
|
// Position relative container
|
||||||
|
canvas.parentElement.style.position = 'relative';
|
||||||
|
canvas.parentElement.appendChild(centerText);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log('✅ Index2 dashboard initialized successfully');
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('❌ Index2 initialization error:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Skycons (Weather Icons) - Fixed initialization for weather widgets
|
||||||
function initializeSkycons() {
|
function initializeSkycons() {
|
||||||
|
// Check if we're on a page that has weather widgets
|
||||||
|
const hasWeatherWidget = document.body.classList.contains('page-index') ||
|
||||||
|
document.body.classList.contains('page-index3') ||
|
||||||
|
document.querySelector('.weather-icon') !== null;
|
||||||
|
|
||||||
|
if (!hasWeatherWidget) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
if (typeof Skycons === 'undefined') {
|
if (typeof Skycons === 'undefined') {
|
||||||
console.warn('⚠️ Skycons library not available');
|
console.warn('⚠️ Skycons library not available');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
console.log('Initializing Skycons weather icons...');
|
||||||
|
|
||||||
try {
|
try {
|
||||||
var skycons = new Skycons({ color: '#73879C' });
|
var skycons = new Skycons({
|
||||||
|
color: '#73879C',
|
||||||
|
resizeClear: true
|
||||||
|
});
|
||||||
|
|
||||||
// Weather icons mapping
|
// Weather icons mapping with more comprehensive coverage
|
||||||
var weatherElements = [
|
var weatherElements = [
|
||||||
{ id: 'clear-day', type: Skycons.CLEAR_DAY },
|
{ id: 'clear-day', type: Skycons.CLEAR_DAY },
|
||||||
{ id: 'clear-night', type: Skycons.CLEAR_NIGHT },
|
{ id: 'clear-night', type: Skycons.CLEAR_NIGHT },
|
||||||
|
|
@ -2078,18 +2441,35 @@
|
||||||
{ id: 'sleet', type: Skycons.SLEET },
|
{ id: 'sleet', type: Skycons.SLEET },
|
||||||
{ id: 'snow', type: Skycons.SNOW },
|
{ id: 'snow', type: Skycons.SNOW },
|
||||||
{ id: 'wind', type: Skycons.WIND },
|
{ id: 'wind', type: Skycons.WIND },
|
||||||
{ id: 'fog', type: Skycons.FOG }
|
{ id: 'fog', type: Skycons.FOG },
|
||||||
|
{ id: 'hail', type: Skycons.SLEET }, // Use sleet for hail
|
||||||
|
{ id: 'thunderstorm', type: Skycons.RAIN } // Use rain for thunderstorm
|
||||||
];
|
];
|
||||||
|
|
||||||
|
let iconsAdded = 0;
|
||||||
|
|
||||||
weatherElements.forEach(function(weather) {
|
weatherElements.forEach(function(weather) {
|
||||||
var element = document.getElementById(weather.id);
|
var element = document.getElementById(weather.id);
|
||||||
if (element) {
|
if (element) {
|
||||||
|
// Ensure canvas has proper dimensions
|
||||||
|
element.width = element.width || 84;
|
||||||
|
element.height = element.height || 84;
|
||||||
|
|
||||||
skycons.add(element, weather.type);
|
skycons.add(element, weather.type);
|
||||||
|
iconsAdded++;
|
||||||
|
console.log(`✅ Added Skycon: ${weather.id}`);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
skycons.play();
|
if (iconsAdded > 0) {
|
||||||
|
skycons.play();
|
||||||
|
console.log(`✅ Skycons initialized successfully (${iconsAdded} icons)`);
|
||||||
|
|
||||||
|
// Store skycons instance globally for potential cleanup
|
||||||
|
window.skycons = skycons;
|
||||||
|
} else {
|
||||||
|
console.warn('⚠️ No weather canvas elements found for Skycons');
|
||||||
|
}
|
||||||
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('❌ Skycons initialization error:', error);
|
console.error('❌ Skycons initialization error:', error);
|
||||||
|
|
|
||||||
|
|
@ -42,7 +42,8 @@ window.echarts = echarts;
|
||||||
console.log('✅ ECharts loaded');
|
console.log('✅ ECharts loaded');
|
||||||
|
|
||||||
// Skycons (Animated weather icons)
|
// Skycons (Animated weather icons)
|
||||||
import Skycons from 'skycons';
|
import skycons from 'skycons';
|
||||||
|
const Skycons = skycons(typeof window !== 'undefined' ? window : global);
|
||||||
window.Skycons = Skycons;
|
window.Skycons = Skycons;
|
||||||
console.log('✅ Skycons loaded');
|
console.log('✅ Skycons loaded');
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -20,4 +20,7 @@
|
||||||
// @import "jqvmap/dist/jqvmap.min.css";
|
// @import "jqvmap/dist/jqvmap.min.css";
|
||||||
|
|
||||||
// Custom Theme Style
|
// Custom Theme Style
|
||||||
@import "scss/custom.scss";
|
@import "scss/custom.scss";
|
||||||
|
|
||||||
|
// Page-specific styles
|
||||||
|
@import "scss/index2.scss";
|
||||||
|
|
@ -0,0 +1,208 @@
|
||||||
|
/* index2.html specific styles */
|
||||||
|
|
||||||
|
/* Top Profiles Styling */
|
||||||
|
.top_profiles {
|
||||||
|
.media.event {
|
||||||
|
position: relative;
|
||||||
|
padding: 10px 0;
|
||||||
|
border-bottom: 1px solid #f0f0f0;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pull-left {
|
||||||
|
margin-right: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile_thumb {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-size: 20px;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.border-aero {
|
||||||
|
background-color: #1ABB9C;
|
||||||
|
border: 2px solid #1ABB9C;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.border-green {
|
||||||
|
background-color: #26B99A;
|
||||||
|
border: 2px solid #26B99A;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.border-blue {
|
||||||
|
background-color: #3498DB;
|
||||||
|
border: 2px solid #3498DB;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.border-red {
|
||||||
|
background-color: #E74C3C;
|
||||||
|
border: 2px solid #E74C3C;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.border-purple {
|
||||||
|
background-color: #9B59B6;
|
||||||
|
border: 2px solid #9B59B6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.d-flex-body {
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #333;
|
||||||
|
text-decoration: none;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #1ABB9C;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
|
||||||
|
strong {
|
||||||
|
color: #1ABB9C;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
small {
|
||||||
|
color: #999;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Event Date Styling for Timeline */
|
||||||
|
.media.event {
|
||||||
|
.pull-left.date {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
background: #1ABB9C;
|
||||||
|
border-radius: 10px;
|
||||||
|
text-align: center;
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
margin-right: 15px;
|
||||||
|
|
||||||
|
.month {
|
||||||
|
font-size: 12px;
|
||||||
|
margin: 0;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.day {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin: 0;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tiles Styling for Statistics */
|
||||||
|
.tiles {
|
||||||
|
.tile {
|
||||||
|
background: white;
|
||||||
|
padding: 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
border-left: 3px solid #1ABB9C;
|
||||||
|
|
||||||
|
span:first-child {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #999;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 32px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graph {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Scroll View for Lists - Only apply to Top Profiles */
|
||||||
|
.top_profiles.scroll-view {
|
||||||
|
max-height: 300px;
|
||||||
|
overflow-y: auto;
|
||||||
|
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-scrollbar-track {
|
||||||
|
background: #f1f1f1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-scrollbar-thumb {
|
||||||
|
background: #888;
|
||||||
|
border-radius: 3px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: #555;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Media Object Flexbox Support */
|
||||||
|
.media {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.d-flex-body {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Color Classes for Icons */
|
||||||
|
.aero { color: #1ABB9C !important; }
|
||||||
|
.green { color: #26B99A !important; }
|
||||||
|
.blue { color: #3498DB !important; }
|
||||||
|
.red { color: #E74C3C !important; }
|
||||||
|
.purple { color: #9B59B6 !important; }
|
||||||
|
|
||||||
|
/* Panel Improvements */
|
||||||
|
.x_panel {
|
||||||
|
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Chart Container Improvements */
|
||||||
|
.demo-container {
|
||||||
|
background: white;
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Weekly Summary Styling */
|
||||||
|
.canvasDoughnut {
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
@ -8,6 +8,7 @@ export default defineConfig({
|
||||||
emptyOutDir: true,
|
emptyOutDir: true,
|
||||||
chunkSizeWarningLimit: 1000,
|
chunkSizeWarningLimit: 1000,
|
||||||
sourcemap: false,
|
sourcemap: false,
|
||||||
|
target: 'es2022',
|
||||||
rollupOptions: {
|
rollupOptions: {
|
||||||
output: {
|
output: {
|
||||||
manualChunks: {
|
manualChunks: {
|
||||||
|
|
@ -92,6 +93,9 @@ export default defineConfig({
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
esbuild: {
|
||||||
|
target: 'es2022'
|
||||||
|
},
|
||||||
server: {
|
server: {
|
||||||
open: '/production/index.html',
|
open: '/production/index.html',
|
||||||
port: 3000
|
port: 3000
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue