trafficmonitor init...1
This commit is contained in:
parent
94ff1b1d91
commit
4f937a7cc1
@ -9,7 +9,6 @@
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Chart.js CDN 로드 -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
|
||||
|
||||
<style>
|
||||
/* 커스텀 스타일 및 색상 변수 설정 */
|
||||
:root {
|
||||
@ -21,19 +20,6 @@
|
||||
/* OUT 트래픽 색상 (Chart.js) */
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #f8f9fa;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.dashboard-card {
|
||||
transition: box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.dashboard-card:hover {
|
||||
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
position: relative;
|
||||
height: 400px;
|
||||
@ -42,19 +28,20 @@
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="p-4 p-md-5">
|
||||
<div id="app" class="container-fluid" style="max-width: 1200px;">
|
||||
<body>
|
||||
<div id="app" class="container-fluid">
|
||||
<!-- Chart Card -->
|
||||
<div class="card shadow-lg dashboard-card">
|
||||
<div class="card-body p-4 p-md-5">
|
||||
<!-- 동적으로 업데이트될 메인 제목 영역 -->
|
||||
<h2 id="chartTitle" class="h5 card-title text-dark mb-1"><?= $viewDatas['entity']->getCustomTitle() ?>트래픽 속도 추이 (IN/OUT Kbit/s)</h2>
|
||||
<!-- 동적으로 업데이트될 날짜 정보 영역 (시작일, 종료일) -->
|
||||
<div class="row g-3 text-end">
|
||||
<div class="col-5">기간:<input type=" date" id="startDate" class="form-control" value="<?= date('Y-m-d') ?>"></div>
|
||||
<div class="col-5">~<input type="date" id="endDate" class="form-control" value="<?= date('Y-m-d') ?>">까지</div>
|
||||
<div class="col-2"><button onclick=" fetchDataAndDrawChart()" id="viewChartBtn" class="mt-4 btn btn-primary btn-lg w-100 w-md-auto shadow-sm">차트 보기</button></div>
|
||||
<div class="row g-3">
|
||||
<div class="col-5"><input type="date" id="startDate" class="form-control" value="<?= date('Y-m-d') ?>"></div>
|
||||
<div class="col-5"><input type="date" id="endDate" class="form-control" value="<?= date('Y-m-d') ?>"></div>
|
||||
<div class="col-2"><button onclick="fetchDataAndDrawChart()" id="viewChartBtn" class="btn btn-primary">차트 보기</button></div>
|
||||
</div>
|
||||
|
||||
<!-- 로딩 인디케이터 -->
|
||||
<div id="loadingIndicator" class="text-center p-5 hidden" style="display: none;">
|
||||
<div class="spinner-border text-primary" role="status">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user