2022-11-15 12:54:21 +08:00
|
|
|
|
<main id="js-page-content" role="main" class="page-content">
|
|
|
|
|
|
<div class="row">
|
|
|
|
|
|
<div class="col-sm-12 col-xl-4">
|
|
|
|
|
|
<img src="img/clouds.png" class="img-fluid" style="min-height: 520px;">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="col-sm-12 col-xl-4">
|
|
|
|
|
|
<div class="row">
|
|
|
|
|
|
<div class="col-sm-6 col-xl-6">
|
|
|
|
|
|
<div class="p-3 bg-primary-300 rounded overflow-hidden position-relative text-white mb-g">
|
|
|
|
|
|
<div class="">
|
|
|
|
|
|
<h3 class="display-4 d-block l-h-n m-0 fw-500">
|
|
|
|
|
|
21.5k
|
|
|
|
|
|
<small class="m-0 l-h-n">users signed up</small>
|
|
|
|
|
|
</h3>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<i class="fal fa-user position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n1" style="font-size:6rem"></i>
|
|
|
|
|
|
</div>
|
2022-11-15 11:25:47 +08:00
|
|
|
|
</div>
|
2022-11-15 12:54:21 +08:00
|
|
|
|
<div class="col-sm-6 col-xl-6">
|
|
|
|
|
|
<div class="p-3 bg-warning-400 rounded overflow-hidden position-relative text-white mb-g">
|
|
|
|
|
|
<div class="">
|
|
|
|
|
|
<h3 class="display-4 d-block l-h-n m-0 fw-500">
|
|
|
|
|
|
$10,203
|
|
|
|
|
|
<small class="m-0 l-h-n">Visual Index Figure</small>
|
|
|
|
|
|
</h3>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<i class="fal fa-gem position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n4" style="font-size: 6rem;"></i>
|
|
|
|
|
|
</div>
|
2022-11-15 11:25:47 +08:00
|
|
|
|
</div>
|
2022-11-15 12:54:21 +08:00
|
|
|
|
<div class="col-lg-12">
|
|
|
|
|
|
<div id="panel-2" class="panel panel-locked" data-panel-sortable data-panel-collapsed data-panel-close>
|
|
|
|
|
|
<div class="panel-hdr">
|
|
|
|
|
|
<h2>
|
|
|
|
|
|
昨日／今日用電比較
|
|
|
|
|
|
</h2>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="panel-container show">
|
|
|
|
|
|
<div class="panel-content poisition-relative" style="min-height: 346.84px;">
|
|
|
|
|
|
<div class="p-1 position-absolute pos-right pos-top mt-3 mr-3 z-index-cloud d-flex align-items-center justify-content-center">
|
|
|
|
|
|
<div class="border-faded border-top-0 border-left-0 border-bottom-0 py-2 pr-4 mr-3 hidden-sm-down">
|
|
|
|
|
|
<div class="text-right fw-500 l-h-n d-flex flex-column">
|
|
|
|
|
|
<div class="h3 m-0 d-flex align-items-center justify-content-end">
|
|
|
|
|
|
<div class='icon-stack mr-2'>
|
|
|
|
|
|
<i class="base base-7 icon-stack-3x opacity-100 color-success-600"></i>
|
|
|
|
|
|
<i class="base base-7 icon-stack-2x opacity-100 color-success-500"></i>
|
|
|
|
|
|
<i class="fal fa-arrow-up icon-stack-1x opacity-100 color-white"></i>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
$44.34 / GE
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<span class="m-0 fs-xs text-muted">Increased Profit as per redux margins and estimates</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="js-easy-pie-chart color-info-400 position-relative d-inline-flex align-items-center justify-content-center" data-percent="35" data-piesize="95" data-linewidth="10" data-scalelength="5">
|
|
|
|
|
|
<div class="js-easy-pie-chart color-success-400 position-relative position-absolute pos-left pos-right pos-top pos-bottom d-flex align-items-center justify-content-center" data-percent="65" data-piesize="60" data-linewidth="5" data-scalelength="1" data-scalecolor="#fff">
|
|
|
|
|
|
<div class="position-absolute pos-top pos-left pos-right pos-bottom d-flex align-items-center justify-content-center fw-500 fs-xl text-dark">78%</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div id="flot-area" style="width:100%; height:300px;"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2022-11-15 11:25:47 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2022-11-15 12:54:21 +08:00
|
|
|
|
<div class="col-sm-12 col-xl-4">
|
|
|
|
|
|
<div class="row">
|
|
|
|
|
|
<div class="col-sm-6 col-xl-6">
|
|
|
|
|
|
<div class="p-3 bg-success-200 rounded overflow-hidden position-relative text-white mb-g">
|
|
|
|
|
|
<div class="">
|
|
|
|
|
|
<h3 class="display-4 d-block l-h-n m-0 fw-500">
|
|
|
|
|
|
- 103.72
|
|
|
|
|
|
<small class="m-0 l-h-n">Offset Balance Ratio</small>
|
|
|
|
|
|
</h3>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<i class="fal fa-lightbulb position-absolute pos-right pos-bottom opacity-15 mb-n5 mr-n6" style="font-size: 8rem;"></i>
|
|
|
|
|
|
</div>
|
2022-11-15 11:25:47 +08:00
|
|
|
|
</div>
|
2022-11-15 12:54:21 +08:00
|
|
|
|
<div class="col-sm-6 col-xl-6">
|
|
|
|
|
|
<div class="p-3 bg-info-200 rounded overflow-hidden position-relative text-white mb-g">
|
|
|
|
|
|
<div class="">
|
|
|
|
|
|
<h3 class="display-4 d-block l-h-n m-0 fw-500">
|
|
|
|
|
|
+40%
|
|
|
|
|
|
<small class="m-0 l-h-n">Product level increase</small>
|
|
|
|
|
|
</h3>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<i class="fal fa-globe position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n4" style="font-size: 6rem;"></i>
|
|
|
|
|
|
</div>
|
2022-11-15 11:25:47 +08:00
|
|
|
|
</div>
|
2022-11-15 12:54:21 +08:00
|
|
|
|
<div class="col-lg-12">
|
|
|
|
|
|
<div id="panel-3" class="panel panel-locked" data-panel-sortable data-panel-collapsed data-panel-close>
|
|
|
|
|
|
<div class="panel-hdr">
|
|
|
|
|
|
<h2>
|
|
|
|
|
|
本週／上週用電比較
|
|
|
|
|
|
</h2>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="panel-container show">
|
|
|
|
|
|
<div class="panel-content poisition-relative">
|
|
|
|
|
|
<div class="pb-5 pt-3">
|
|
|
|
|
|
<div class="row">
|
|
|
|
|
|
<div class="col-6 col-xl-3 d-sm-flex align-items-center">
|
|
|
|
|
|
<div class="p-2 mr-3 bg-info-200 rounded">
|
|
|
|
|
|
<span class="peity-bar" data-peity="{"fill": ["#fff"], "width": 27, "height": 27 }">3,4,5,8,2</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<label class="fs-sm mb-0">Bounce Rate</label>
|
|
|
|
|
|
<h4 class="font-weight-bold mb-0">37.56%</h4>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="col-6 col-xl-3 d-sm-flex align-items-center">
|
|
|
|
|
|
<div class="p-2 mr-3 bg-info-300 rounded">
|
|
|
|
|
|
<span class="peity-bar" data-peity="{"fill": ["#fff"], "width": 27, "height": 27 }">5,3,1,7,9</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<label class="fs-sm mb-0">Sessions</label>
|
|
|
|
|
|
<h4 class="font-weight-bold mb-0">759</h4>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="col-6 col-xl-3 d-sm-flex align-items-center">
|
|
|
|
|
|
<div class="p-2 mr-3 bg-success-300 rounded">
|
|
|
|
|
|
<span class="peity-bar" data-peity="{"fill": ["#fff"], "width": 27, "height": 27 }">3,4,3,5,5</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<label class="fs-sm mb-0">New Sessions</label>
|
|
|
|
|
|
<h4 class="font-weight-bold mb-0">12.17%</h4>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="col-6 col-xl-3 d-sm-flex align-items-center">
|
|
|
|
|
|
<div class="p-2 mr-3 bg-success-500 rounded">
|
|
|
|
|
|
<span class="peity-bar" data-peity="{"fill": ["#fff"], "width": 27, "height": 27 }">6,4,7,5,6</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<label class="fs-sm mb-0">Clickthrough</label>
|
|
|
|
|
|
<h4 class="font-weight-bold mb-0">19.77%</h4>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div id="flotVisit" style="width:100%; height:208px;"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2022-11-15 11:25:47 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2022-11-15 12:54:21 +08:00
|
|
|
|
|
|
|
|
|
|
<div class="row">
|
|
|
|
|
|
<div class="col-sm-12 col-lg-4">
|
|
|
|
|
|
<div class="row">
|
|
|
|
|
|
<div class="btn-group btn-group-lg col-lg-6 mb-4">
|
|
|
|
|
|
<button type="button" class="btn btn-secondary"><i class="fal fa-lightbulb-on fa-2x blink"></i></button>
|
|
|
|
|
|
<button type="button" class="btn btn-secondary">照明系統 </button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="btn-group btn-group-lg col-lg-6 mb-4">
|
|
|
|
|
|
<button type="button" class="btn btn-secondary"><i class="fal fa-thermometer-full fa-2x"></i></button>
|
|
|
|
|
|
<button type="button" class="btn btn-secondary">環境感測系統</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="btn-group btn-group-lg col-lg-6 mb-4">
|
|
|
|
|
|
<button type="button" class="btn btn-secondary"><i class="fal fa-car-battery fa-2x"></i></button>
|
|
|
|
|
|
<button type="button" class="btn btn-secondary">電錶系統 </button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="btn-group btn-group-lg col-lg-6 mb-4">
|
|
|
|
|
|
<button type="button" class="btn btn-secondary"><i class="fal fa-wind fa-2x"></i></button>
|
|
|
|
|
|
<button type="button" class="btn btn-secondary">空調系統 </button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="btn-group btn-group-lg col-lg-6 mb-4">
|
|
|
|
|
|
<button type="button" class="btn btn-secondary"><i class="fal fa-window-restore fa-2x"></i></button>
|
|
|
|
|
|
<button type="button" class="btn btn-secondary">電梯系統 </button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="btn-group btn-group-lg col-lg-6 mb-4">
|
|
|
|
|
|
<button type="button" class="btn btn-secondary"><i class="fal fa-door-closed fa-2x"></i></button>
|
|
|
|
|
|
<button type="button" class="btn btn-secondary">門禁系統 </button>
|
|
|
|
|
|
</div>
|
2022-11-15 11:25:47 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2022-11-15 12:54:21 +08:00
|
|
|
|
<div class="col-sm-12 col-lg-4">
|
|
|
|
|
|
<div class="row">
|
|
|
|
|
|
<div class="btn-group btn-group-lg col-lg-6 mb-4">
|
|
|
|
|
|
<button type="button" class="btn btn-secondary"><i class="fal fa-lightbulb-on fa-2x"></i></button>
|
|
|
|
|
|
<button type="button" class="btn btn-secondary">照明系統 </button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="btn-group btn-group-lg col-lg-6 mb-4">
|
|
|
|
|
|
<button type="button" class="btn btn-secondary"><i class="fal fa-thermometer-full fa-2x"></i></button>
|
|
|
|
|
|
<button type="button" class="btn btn-secondary">環境感測系統</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="btn-group btn-group-lg col-lg-6 mb-4">
|
|
|
|
|
|
<button type="button" class="btn btn-secondary"><i class="fal fa-car-battery fa-2x"></i></button>
|
|
|
|
|
|
<button type="button" class="btn btn-secondary">電錶系統 </button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="btn-group btn-group-lg col-lg-6 mb-4">
|
|
|
|
|
|
<button type="button" class="btn btn-secondary"><i class="fal fa-wind fa-2x"></i></button>
|
|
|
|
|
|
<button type="button" class="btn btn-secondary">空調系統 </button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="btn-group btn-group-lg col-lg-6 mb-4">
|
|
|
|
|
|
<button type="button" class="btn btn-secondary"><i class="fal fa-window-restore fa-2x"></i></button>
|
|
|
|
|
|
<button type="button" class="btn btn-secondary">電梯系統 </button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="btn-group btn-group-lg col-lg-6 mb-4">
|
|
|
|
|
|
<button type="button" class="btn btn-secondary"><i class="fal fa-door-closed fa-2x"></i></button>
|
|
|
|
|
|
<button type="button" class="btn btn-secondary">門禁系統 </button>
|
2022-11-15 11:25:47 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2022-11-15 12:54:21 +08:00
|
|
|
|
<div class="col-sm-12 col-lg-4">
|
|
|
|
|
|
<div class="row">
|
|
|
|
|
|
<div class="col-lg-6">
|
|
|
|
|
|
<div id="panel-3" class="panel panel-locked" data-panel-sortable data-panel-collapsed data-panel-close>
|
|
|
|
|
|
<div class="panel-hdr">
|
|
|
|
|
|
<h2>
|
|
|
|
|
|
異常狀態
|
|
|
|
|
|
</h2>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="panel-container show">
|
|
|
|
|
|
<div class="panel-content poisition-relative">
|
|
|
|
|
|
<div class="pb-5 pt-3">
|
|
|
|
|
|
<div class="d-flex mr-4">
|
|
|
|
|
|
<div class="mr-2">
|
|
|
|
|
|
<span class="peity-donut" data-peity="{ "fill": ["#967bbd", "#ccbfdf"], "innerRadius": 14, "radius": 20 }">7/10</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<label class="fs-sm mb-0 mt-2 mt-md-0">New Sessions</label>
|
|
|
|
|
|
<h4 class="font-weight-bold mb-0">70.60%</h4>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="col-lg-6">
|
|
|
|
|
|
<div id="panel-3" class="panel panel-locked" data-panel-sortable data-panel-collapsed data-panel-close>
|
|
|
|
|
|
<div class="panel-hdr">
|
|
|
|
|
|
<h2>
|
|
|
|
|
|
工單進度
|
|
|
|
|
|
</h2>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="panel-container show">
|
|
|
|
|
|
<div class="panel-content poisition-relative">
|
|
|
|
|
|
<div class="pb-5 pt-3">
|
|
|
|
|
|
<div class="d-flex mr-0">
|
|
|
|
|
|
<div class="mr-2">
|
|
|
|
|
|
<span class="peity-donut" data-peity="{ "fill": ["#2196F3", "#9acffa"], "innerRadius": 14, "radius": 20 }">3/10</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<label class="fs-sm mb-0 mt-2 mt-md-0">Page Views</label>
|
|
|
|
|
|
<h4 class="font-weight-bold mb-0">14,134</h4>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2022-11-15 11:25:47 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2022-11-15 12:54:21 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</main>
|
|
|
|
|
|
|
2022-11-15 11:25:47 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
2022-11-15 12:54:21 +08:00
|
|
|
|
/* defined datas */
|
|
|
|
|
|
var dataTargetProfit = [
|
|
|
|
|
|
[1354586000000, 153],
|
|
|
|
|
|
[1364587000000, 658],
|
|
|
|
|
|
[1374588000000, 198],
|
|
|
|
|
|
[1384589000000, 663],
|
|
|
|
|
|
[1394590000000, 801],
|
|
|
|
|
|
[1404591000000, 1080],
|
|
|
|
|
|
[1414592000000, 353],
|
|
|
|
|
|
[1424593000000, 749],
|
|
|
|
|
|
[1434594000000, 523],
|
|
|
|
|
|
[1444595000000, 258],
|
|
|
|
|
|
[1454596000000, 688],
|
|
|
|
|
|
[1464597000000, 364]
|
|
|
|
|
|
]
|
|
|
|
|
|
var dataProfit = [
|
|
|
|
|
|
[1354586000000, 53],
|
|
|
|
|
|
[1364587000000, 65],
|
|
|
|
|
|
[1374588000000, 98],
|
|
|
|
|
|
[1384589000000, 83],
|
|
|
|
|
|
[1394590000000, 980],
|
|
|
|
|
|
[1404591000000, 808],
|
|
|
|
|
|
[1414592000000, 720],
|
|
|
|
|
|
[1424593000000, 674],
|
|
|
|
|
|
[1434594000000, 23],
|
|
|
|
|
|
[1444595000000, 79],
|
|
|
|
|
|
[1454596000000, 88],
|
|
|
|
|
|
[1464597000000, 36]
|
|
|
|
|
|
]
|
|
|
|
|
|
var dataSignups = [
|
|
|
|
|
|
[1354586000000, 647],
|
|
|
|
|
|
[1364587000000, 435],
|
|
|
|
|
|
[1374588000000, 784],
|
|
|
|
|
|
[1384589000000, 346],
|
|
|
|
|
|
[1394590000000, 487],
|
|
|
|
|
|
[1404591000000, 463],
|
|
|
|
|
|
[1414592000000, 479],
|
|
|
|
|
|
[1424593000000, 236],
|
|
|
|
|
|
[1434594000000, 843],
|
|
|
|
|
|
[1444595000000, 657],
|
|
|
|
|
|
[1454596000000, 241],
|
|
|
|
|
|
[1464597000000, 341]
|
|
|
|
|
|
]
|
|
|
|
|
|
var dataSet1 = [
|
|
|
|
|
|
[0, 10],
|
|
|
|
|
|
[100, 8],
|
|
|
|
|
|
[200, 7],
|
|
|
|
|
|
[300, 5],
|
|
|
|
|
|
[400, 4],
|
|
|
|
|
|
[500, 6],
|
|
|
|
|
|
[600, 3],
|
|
|
|
|
|
[700, 2]
|
|
|
|
|
|
];
|
|
|
|
|
|
var dataSet2 = [
|
|
|
|
|
|
[0, 9],
|
|
|
|
|
|
[100, 6],
|
|
|
|
|
|
[200, 5],
|
|
|
|
|
|
[300, 3],
|
|
|
|
|
|
[400, 3],
|
|
|
|
|
|
[500, 5],
|
|
|
|
|
|
[600, 2],
|
|
|
|
|
|
[700, 1]
|
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
|
|
$(document).ready(function () {
|
|
|
|
|
|
|
|
|
|
|
|
/* init datatables */
|
|
|
|
|
|
$('#dt-basic-example').dataTable(
|
|
|
|
|
|
{
|
|
|
|
|
|
responsive: true,
|
|
|
|
|
|
dom: "<'row mb-3'<'col-sm-12 col-md-6 d-flex align-items-center justify-content-start'f><'col-sm-12 col-md-6 d-flex align-items-center justify-content-end'B>>" +
|
|
|
|
|
|
"<'row'<'col-sm-12'tr>>" +
|
|
|
|
|
|
"<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
|
|
|
|
|
|
buttons: [
|
2022-11-15 11:25:47 +08:00
|
|
|
|
{
|
2022-11-15 12:54:21 +08:00
|
|
|
|
extend: 'colvis',
|
|
|
|
|
|
text: 'Column Visibility',
|
|
|
|
|
|
titleAttr: 'Col visibility',
|
|
|
|
|
|
className: 'btn-outline-default'
|
2022-11-15 11:25:47 +08:00
|
|
|
|
},
|
|
|
|
|
|
{
|
2022-11-15 12:54:21 +08:00
|
|
|
|
extend: 'csvHtml5',
|
|
|
|
|
|
text: 'CSV',
|
|
|
|
|
|
titleAttr: 'Generate CSV',
|
|
|
|
|
|
className: 'btn-outline-default'
|
2022-11-15 11:25:47 +08:00
|
|
|
|
},
|
|
|
|
|
|
{
|
2022-11-15 12:54:21 +08:00
|
|
|
|
extend: 'copyHtml5',
|
|
|
|
|
|
text: 'Copy',
|
|
|
|
|
|
titleAttr: 'Copy to clipboard',
|
|
|
|
|
|
className: 'btn-outline-default'
|
2022-11-15 11:25:47 +08:00
|
|
|
|
},
|
|
|
|
|
|
{
|
2022-11-15 12:54:21 +08:00
|
|
|
|
extend: 'print',
|
|
|
|
|
|
text: '<i class="fal fa-print"></i>',
|
|
|
|
|
|
titleAttr: 'Print Table',
|
|
|
|
|
|
className: 'btn-outline-default'
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
],
|
|
|
|
|
|
columnDefs: [
|
2022-11-15 11:25:47 +08:00
|
|
|
|
{
|
2022-11-15 12:54:21 +08:00
|
|
|
|
targets: -1,
|
|
|
|
|
|
title: '',
|
|
|
|
|
|
orderable: false,
|
|
|
|
|
|
render: function (data, type, full, meta) {
|
|
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
|
-- ES6
|
|
|
|
|
|
-- convert using https://babeljs.io online transpiler
|
|
|
|
|
|
return `
|
|
|
|
|
|
<a href='javascript:void(0);' class='btn btn-sm btn-icon btn-outline-danger rounded-circle mr-1' title='Delete Record'>
|
|
|
|
|
|
<i class="fal fa-times"></i>
|
|
|
|
|
|
</a>
|
|
|
|
|
|
<div class='dropdown d-inline-block dropleft '>
|
|
|
|
|
|
<a href='#'' class='btn btn-sm btn-icon btn-outline-primary rounded-circle shadow-0' data-toggle='dropdown' aria-expanded='true' title='More options'>
|
|
|
|
|
|
<i class="fal fa-ellipsis-v"></i>
|
|
|
|
|
|
</a>
|
|
|
|
|
|
<div class='dropdown-menu'>
|
|
|
|
|
|
<a class='dropdown-item' href='javascript:void(0);'>Change Status</a>
|
|
|
|
|
|
<a class='dropdown-item' href='javascript:void(0);'>Generate Report</a>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>`;
|
|
|
|
|
|
|
|
|
|
|
|
ES5 example below:
|
|
|
|
|
|
|
|
|
|
|
|
*/
|
|
|
|
|
|
return "\n\t\t\t\t\t\t<a href='javascript:void(0);' class='btn btn-sm btn-icon btn-outline-danger rounded-circle mr-1' title='Delete Record'>\n\t\t\t\t\t\t\t<i class=\"fal fa-times\"></i>\n\t\t\t\t\t\t</a>\n\t\t\t\t\t\t<div class='dropdown d-inline-block dropleft'>\n\t\t\t\t\t\t\t<a href='#'' class='btn btn-sm btn-icon btn-outline-primary rounded-circle shadow-0' data-toggle='dropdown' aria-expanded='true' title='More options'>\n\t\t\t\t\t\t\t\t<i class=\"fal fa-ellipsis-v\"></i>\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t<div class='dropdown-menu'>\n\t\t\t\t\t\t\t\t<a class='dropdown-item' href='javascript:void(0);'>Change Status</a>\n\t\t\t\t\t\t\t\t<a class='dropdown-item' href='javascript:void(0);'>Generate Report</a>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>";
|
|
|
|
|
|
},
|
2022-11-15 11:25:47 +08:00
|
|
|
|
},
|
2022-11-15 12:54:21 +08:00
|
|
|
|
|
|
|
|
|
|
]
|
|
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
/* flot toggle example */
|
|
|
|
|
|
var flot_toggle = function () {
|
|
|
|
|
|
|
|
|
|
|
|
var data = [
|
|
|
|
|
|
{
|
|
|
|
|
|
label: "Target Profit",
|
|
|
|
|
|
data: dataTargetProfit,
|
|
|
|
|
|
color: color.info._400,
|
|
|
|
|
|
bars:
|
2022-11-15 11:25:47 +08:00
|
|
|
|
{
|
2022-11-15 12:54:21 +08:00
|
|
|
|
show: true,
|
|
|
|
|
|
align: "center",
|
|
|
|
|
|
barWidth: 30 * 30 * 60 * 1000 * 80,
|
|
|
|
|
|
lineWidth: 0,
|
|
|
|
|
|
/*fillColor: {
|
|
|
|
|
|
colors: [color.primary._500, color.primary._900]
|
|
|
|
|
|
},*/
|
|
|
|
|
|
fillColor:
|
|
|
|
|
|
{
|
|
|
|
|
|
colors: [
|
|
|
|
|
|
{
|
|
|
|
|
|
opacity: 0.9
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
opacity: 0.1
|
|
|
|
|
|
}]
|
|
|
|
|
|
}
|
2022-11-15 11:25:47 +08:00
|
|
|
|
},
|
2022-11-15 12:54:21 +08:00
|
|
|
|
highlightColor: 'rgba(255,255,255,0.3)',
|
|
|
|
|
|
shadowSize: 0
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
label: "Actual Profit",
|
|
|
|
|
|
data: dataProfit,
|
|
|
|
|
|
color: color.warning._500,
|
|
|
|
|
|
lines:
|
2022-11-15 11:25:47 +08:00
|
|
|
|
{
|
2022-11-15 12:54:21 +08:00
|
|
|
|
show: true,
|
|
|
|
|
|
lineWidth: 2
|
2022-11-15 11:25:47 +08:00
|
|
|
|
},
|
2022-11-15 12:54:21 +08:00
|
|
|
|
shadowSize: 0,
|
|
|
|
|
|
points:
|
2022-11-15 11:25:47 +08:00
|
|
|
|
{
|
2022-11-15 12:54:21 +08:00
|
|
|
|
show: true
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
label: "User Signups",
|
|
|
|
|
|
data: dataSignups,
|
|
|
|
|
|
color: color.success._500,
|
|
|
|
|
|
lines:
|
2022-11-15 11:25:47 +08:00
|
|
|
|
{
|
2022-11-15 12:54:21 +08:00
|
|
|
|
show: true,
|
|
|
|
|
|
lineWidth: 2
|
2022-11-15 11:25:47 +08:00
|
|
|
|
},
|
2022-11-15 12:54:21 +08:00
|
|
|
|
shadowSize: 0,
|
|
|
|
|
|
points:
|
2022-11-15 11:25:47 +08:00
|
|
|
|
{
|
2022-11-15 12:54:21 +08:00
|
|
|
|
show: true
|
|
|
|
|
|
}
|
|
|
|
|
|
}]
|
|
|
|
|
|
|
|
|
|
|
|
var options = {
|
|
|
|
|
|
grid:
|
|
|
|
|
|
{
|
|
|
|
|
|
hoverable: true,
|
|
|
|
|
|
clickable: true,
|
|
|
|
|
|
tickColor: 'rgba(0,0,0,0.05)',
|
|
|
|
|
|
borderWidth: 1,
|
|
|
|
|
|
borderColor: 'rgba(0,0,0,0.05)'
|
|
|
|
|
|
},
|
|
|
|
|
|
tooltip: true,
|
|
|
|
|
|
tooltipOpts:
|
|
|
|
|
|
{
|
|
|
|
|
|
cssClass: 'tooltip-inner',
|
|
|
|
|
|
defaultTheme: false
|
|
|
|
|
|
},
|
|
|
|
|
|
xaxis:
|
|
|
|
|
|
{
|
|
|
|
|
|
mode: "time",
|
|
|
|
|
|
tickColor: 'rgba(0,0,0,0.05)',
|
|
|
|
|
|
},
|
|
|
|
|
|
yaxes:
|
|
|
|
|
|
{
|
|
|
|
|
|
tickColor: 'rgba(0,0,0,0.05)',
|
|
|
|
|
|
tickFormatter: function (val, axis) {
|
|
|
|
|
|
return "$" + val;
|
2022-11-15 11:25:47 +08:00
|
|
|
|
},
|
2022-11-15 12:54:21 +08:00
|
|
|
|
max: 1200
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
var plot2 = null;
|
|
|
|
|
|
|
|
|
|
|
|
function plotNow() {
|
|
|
|
|
|
var d = [];
|
|
|
|
|
|
$("#js-checkbox-toggles").find(':checkbox').each(function () {
|
|
|
|
|
|
if ($(this).is(':checked')) {
|
|
|
|
|
|
d.push(data[$(this).attr("name").substr(4, 1)]);
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
if (d.length > 0) {
|
|
|
|
|
|
if (plot2) {
|
|
|
|
|
|
plot2.setData(d);
|
|
|
|
|
|
plot2.draw();
|
|
|
|
|
|
}
|
|
|
|
|
|
else {
|
|
|
|
|
|
plot2 = $.plot($("#flot-toggles"), d, options);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
$("#js-checkbox-toggles").find(':checkbox').on('change', function () {
|
|
|
|
|
|
plotNow();
|
|
|
|
|
|
});
|
|
|
|
|
|
plotNow()
|
|
|
|
|
|
}
|
|
|
|
|
|
flot_toggle();
|
|
|
|
|
|
/* flot toggle example -- end*/
|
|
|
|
|
|
|
|
|
|
|
|
/* flot area */
|
|
|
|
|
|
var flotArea = $.plot($('#flot-area'), [
|
|
|
|
|
|
{
|
|
|
|
|
|
data: dataSet1,
|
|
|
|
|
|
label: 'New Customer',
|
|
|
|
|
|
color: color.success._200
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
data: dataSet2,
|
|
|
|
|
|
label: 'Returning Customer',
|
|
|
|
|
|
color: color.info._200
|
|
|
|
|
|
}],
|
|
|
|
|
|
{
|
|
|
|
|
|
series:
|
|
|
|
|
|
{
|
|
|
|
|
|
lines:
|
2022-11-15 11:25:47 +08:00
|
|
|
|
{
|
2022-11-15 12:54:21 +08:00
|
|
|
|
show: true,
|
|
|
|
|
|
lineWidth: 2,
|
|
|
|
|
|
fill: true,
|
|
|
|
|
|
fillColor:
|
|
|
|
|
|
{
|
|
|
|
|
|
colors: [
|
|
|
|
|
|
{
|
|
|
|
|
|
opacity: 0
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
opacity: 0.5
|
|
|
|
|
|
}]
|
|
|
|
|
|
}
|
2022-11-15 11:25:47 +08:00
|
|
|
|
},
|
2022-11-15 12:54:21 +08:00
|
|
|
|
shadowSize: 0
|
|
|
|
|
|
},
|
|
|
|
|
|
points:
|
|
|
|
|
|
{
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
},
|
|
|
|
|
|
legend:
|
|
|
|
|
|
{
|
|
|
|
|
|
noColumns: 1,
|
|
|
|
|
|
position: 'nw'
|
|
|
|
|
|
},
|
|
|
|
|
|
grid:
|
|
|
|
|
|
{
|
|
|
|
|
|
hoverable: true,
|
|
|
|
|
|
clickable: true,
|
|
|
|
|
|
borderColor: '#ddd',
|
|
|
|
|
|
tickColor: 'rgba(0,0,0,0.05)',
|
|
|
|
|
|
aboveData: true,
|
|
|
|
|
|
borderWidth: 0,
|
|
|
|
|
|
labelMargin: 5,
|
|
|
|
|
|
backgroundColor: 'transparent'
|
|
|
|
|
|
},
|
|
|
|
|
|
yaxis:
|
|
|
|
|
|
{
|
|
|
|
|
|
tickLength: 1,
|
|
|
|
|
|
min: 0,
|
|
|
|
|
|
max: 15,
|
|
|
|
|
|
color: '#eee',
|
|
|
|
|
|
tickColor: 'rgba(0,0,0,0.05)',
|
|
|
|
|
|
font:
|
|
|
|
|
|
{
|
|
|
|
|
|
size: 0,
|
|
|
|
|
|
color: '#999'
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
xaxis:
|
|
|
|
|
|
{
|
|
|
|
|
|
tickLength: 1,
|
|
|
|
|
|
color: '#eee',
|
|
|
|
|
|
tickColor: 'rgba(0,0,0,0.05)',
|
|
|
|
|
|
font:
|
|
|
|
|
|
{
|
|
|
|
|
|
size: 10,
|
|
|
|
|
|
color: '#999'
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
/* flot area -- end */
|
|
|
|
|
|
|
|
|
|
|
|
var flotVisit = $.plot('#flotVisit', [
|
|
|
|
|
|
{
|
|
|
|
|
|
data: [
|
|
|
|
|
|
[3, 0],
|
|
|
|
|
|
[4, 1],
|
|
|
|
|
|
[5, 3],
|
|
|
|
|
|
[6, 3],
|
|
|
|
|
|
[7, 10],
|
|
|
|
|
|
[8, 11],
|
|
|
|
|
|
[9, 12],
|
|
|
|
|
|
[10, 9],
|
|
|
|
|
|
[11, 12],
|
|
|
|
|
|
[12, 8],
|
|
|
|
|
|
[13, 5]
|
2022-11-15 11:25:47 +08:00
|
|
|
|
],
|
2022-11-15 12:54:21 +08:00
|
|
|
|
color: color.success._200
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
data: [
|
|
|
|
|
|
[1, 0],
|
|
|
|
|
|
[2, 0],
|
|
|
|
|
|
[3, 1],
|
|
|
|
|
|
[4, 2],
|
|
|
|
|
|
[5, 2],
|
|
|
|
|
|
[6, 5],
|
|
|
|
|
|
[7, 8],
|
|
|
|
|
|
[8, 12],
|
|
|
|
|
|
[9, 9],
|
|
|
|
|
|
[10, 11],
|
|
|
|
|
|
[11, 5]
|
|
|
|
|
|
],
|
|
|
|
|
|
color: color.info._200
|
|
|
|
|
|
}],
|
|
|
|
|
|
{
|
|
|
|
|
|
series:
|
|
|
|
|
|
{
|
|
|
|
|
|
shadowSize: 0,
|
|
|
|
|
|
lines:
|
|
|
|
|
|
{
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
lineWidth: 2,
|
|
|
|
|
|
fill: true,
|
|
|
|
|
|
fillColor:
|
|
|
|
|
|
{
|
|
|
|
|
|
colors: [
|
|
|
|
|
|
{
|
|
|
|
|
|
opacity: 0
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
opacity: 0.12
|
|
|
|
|
|
}]
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
grid:
|
|
|
|
|
|
{
|
|
|
|
|
|
borderWidth: 0
|
|
|
|
|
|
},
|
|
|
|
|
|
yaxis:
|
|
|
|
|
|
{
|
|
|
|
|
|
min: 0,
|
|
|
|
|
|
max: 15,
|
|
|
|
|
|
tickColor: 'rgba(0,0,0,0.05)',
|
|
|
|
|
|
ticks: [
|
|
|
|
|
|
[0, ''],
|
|
|
|
|
|
[5, '100K'],
|
|
|
|
|
|
[10, '200K'],
|
|
|
|
|
|
[15, '300K']
|
|
|
|
|
|
],
|
|
|
|
|
|
font:
|
|
|
|
|
|
{
|
|
|
|
|
|
color: '#444',
|
|
|
|
|
|
size: 10
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
xaxis:
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
|
|
|
|
tickColor: 'rgba(0,0,0,0.05)',
|
|
|
|
|
|
ticks: [
|
|
|
|
|
|
[2, '2am'],
|
|
|
|
|
|
[3, '3am'],
|
|
|
|
|
|
[4, '4am'],
|
|
|
|
|
|
[5, '5am'],
|
|
|
|
|
|
[6, '6am'],
|
|
|
|
|
|
[7, '7am'],
|
|
|
|
|
|
[8, '8am'],
|
|
|
|
|
|
[9, '9am'],
|
|
|
|
|
|
[10, '1pm'],
|
|
|
|
|
|
[11, '2pm'],
|
|
|
|
|
|
[12, '3pm'],
|
|
|
|
|
|
[13, '4pm']
|
|
|
|
|
|
],
|
|
|
|
|
|
font:
|
|
|
|
|
|
{
|
|
|
|
|
|
color: '#999',
|
|
|
|
|
|
size: 9
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
});
|
2022-11-15 11:25:47 +08:00
|
|
|
|
|
|
|
|
|
|
</script>
|
