280 lines
11 KiB
PHP
280 lines
11 KiB
PHP
<?php include '../inc/header.php'; ?>
|
|
<style>
|
|
.card {
|
|
min-height: 300px; /* 필요에 따라 220~320 조절 */
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
</style>
|
|
<div class="container">
|
|
<div class="row g-3 align-items-stretch">
|
|
<!-- 1줄 -->
|
|
<div class="col-md-6 col-lg-3">
|
|
<div class="card p-3">
|
|
<h6>Revenue BY MONTH</h6>
|
|
<div id="revenueByMonthChart" style="height: 220px;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-lg-6">
|
|
<div class="card p-3">
|
|
<h6>Revenue BY REGION</h6>
|
|
<div id="revenueByRegionChart" style="height: 220px;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 2줄 -->
|
|
<div class="col-md-6 col-lg-3">
|
|
<div class="card p-3">
|
|
<h6>Debt to Equity</h6>
|
|
<div id="debtEquityChart" style="height: 220px;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-lg-3">
|
|
<div class="card p-3">
|
|
<h6>Working Capital</h6>
|
|
<div id="workingCapitalChart" style="height: 220px;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-lg-3">
|
|
<div class="card p-3">
|
|
<h6>Return on Equity</h6>
|
|
<div id="returnOnEquityChart" style="height: 220px;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-lg-3">
|
|
<div class="card p-3 text-center">
|
|
<h6>Average Purchase Value YTD</h6>
|
|
<div style="font-size: 1.5rem; font-weight: bold;">$8,301</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 3줄 -->
|
|
<div class="col-md-6 col-lg-3">
|
|
<div class="card p-3 text-center">
|
|
<h6>Leads (Last 30 Days)</h6>
|
|
<div style="font-size: 1.5rem; font-weight: bold; color: red;">768</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-lg-3">
|
|
<div class="card p-3">
|
|
<h6>Top Customers</h6>
|
|
<table class="table table-sm mb-0">
|
|
<thead>
|
|
<tr><th>Client</th><th>Revenue</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td>Alfreds </td><td>$330,221</td></tr>
|
|
<tr><td>Berglunds </td><td>$299,112</td></tr>
|
|
<tr><td>Centro </td><td>$200,349</td></tr>
|
|
<tr><td>Ernst </td><td>$199,312</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-lg-3">
|
|
<div class="card p-3">
|
|
<h6>Sales by Product Category</h6>
|
|
<div id="salesPieChart" style="height: 220px;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 4줄 -->
|
|
<div class="col-md-6 col-lg-3">
|
|
<div class="card p-3">
|
|
<h6>Budget</h6>
|
|
<div id="budgetRadarChart" style="height: 260px;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-lg-3">
|
|
<div class="card p-3">
|
|
<h6>Website Conversion Funnel</h6>
|
|
<div id="conversionFunnelChart" style="height: 260px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container mb-4">
|
|
<div class="card p-3" style="min-height:540px;">
|
|
<h6>일정 관리 (Calendar)</h6>
|
|
<div id="calendar"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
$(function() {
|
|
// 1. Revenue By Month (Column)
|
|
Highcharts.chart('revenueByMonthChart', {
|
|
chart: { type: 'column' },
|
|
title: { text: null },
|
|
xAxis: { categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'] },
|
|
yAxis: { title: { text: 'Revenue ($M)' } },
|
|
series: [
|
|
{ name: 'Last Year', data: [10,12,14,16,18,20,21,19,17,14,12,8], color:'#2c4a85' },
|
|
{ name: 'Current Year', data: [11,13,15,18,20,22,23,20,18,16,13,10], color:'#517fc4' }
|
|
]
|
|
});
|
|
|
|
// 2. Revenue By Region (Map)
|
|
Highcharts.mapChart('revenueByRegionChart', {
|
|
chart: { map: 'custom/world' },
|
|
title: { text: null },
|
|
series: [{
|
|
data: [
|
|
['kr', 45], ['us', 28], ['de', 15], ['jp', 12], ['cn', 20], ['fr', 14], ['gb', 13]
|
|
],
|
|
name: 'Revenue',
|
|
states: { hover: { color: '#BADA55' } },
|
|
dataLabels: { enabled: true, format: '{point.name}' }
|
|
}]
|
|
});
|
|
|
|
// 3. Debt to Equity (Column)
|
|
Highcharts.chart('debtEquityChart', {
|
|
chart: { type: 'column' },
|
|
title: { text: null },
|
|
xAxis: { categories: ['Y-4','Y-3','Y-2','Y-1','Y0'] },
|
|
yAxis: { title: { text: 'Debt to Equity Ratio' } },
|
|
series: [
|
|
{ name: 'Debt', data: [20,30,40,35,25], color:'#2c4a85' },
|
|
{ name: 'Equity', data: [40,45,50,55,60], color:'#517fc4' },
|
|
{ name: 'Debt-to-Equity', data: [50,60,70,65,55], color:'#7a99d9' }
|
|
]
|
|
});
|
|
|
|
// 4. Working Capital (Column)
|
|
Highcharts.chart('workingCapitalChart', {
|
|
chart: { type: 'column' },
|
|
title: { text: null },
|
|
xAxis: { categories: ['Mar','Apr','May','Jun','Jul','Aug','Sep'] },
|
|
yAxis: { title: { text: 'Working Capital' } },
|
|
series: [
|
|
{ name: 'Cash', data: [10,9,11,12,10,8,9], color:'#2c4a85' },
|
|
{ name: 'Investments', data: [7,8,6,7,6,7,8], color:'#517fc4' },
|
|
{ name: 'A/R', data: [4,3,4,5,4,5,6], color:'#7a99d9' }
|
|
]
|
|
});
|
|
|
|
// 5. Return on Equity (Line)
|
|
Highcharts.chart('returnOnEquityChart', {
|
|
chart: { type: 'line' },
|
|
title: { text: null },
|
|
xAxis: { categories: ['Y-4','Y-3','Y-2','Y-1','Y0'] },
|
|
yAxis: { title: { text: 'Return on Equity (%)' } },
|
|
series: [
|
|
{ name: 'ROE', data: [10,12,13,15,14], color:'#2c4a85' }
|
|
]
|
|
});
|
|
|
|
// 6. Sales Pie Chart
|
|
Highcharts.chart('salesPieChart', {
|
|
chart: { type: 'pie' },
|
|
title: { text: null },
|
|
series: [{
|
|
name: 'Sales',
|
|
colorByPoint: true,
|
|
data: [
|
|
{ name: 'Scientific Equipment', y: 45 },
|
|
{ name: 'IT Services', y: 15 },
|
|
{ name: 'Financial Services', y: 10 },
|
|
{ name: 'Consumer Electronics', y: 10 },
|
|
{ name: 'Workwear', y: 10 },
|
|
{ name: 'Cosmetics', y: 10 }
|
|
]
|
|
}]
|
|
});
|
|
|
|
// 7. Budget Radar (Polar Area)
|
|
Highcharts.chart('budgetRadarChart', {
|
|
chart: { polar: true, type: 'area' },
|
|
title: { text: null },
|
|
pane: { size: '80%' },
|
|
xAxis: {
|
|
categories: ['Admin','Marketing','Develop','Customer','IT'],
|
|
tickmarkPlacement: 'on',
|
|
lineWidth: 0
|
|
},
|
|
yAxis: {
|
|
gridLineInterpolation: 'polygon',
|
|
lineWidth: 0,
|
|
min: 0
|
|
},
|
|
series: [
|
|
{ name: 'Allocated Budget', data: [43000,19000,60000,35000,17000], color:'#2c4a85' },
|
|
{ name: 'Actual Spending', data: [50000,39000,42000,31000,26000], color:'#517fc4' }
|
|
]
|
|
});
|
|
|
|
// 8. Website Conversion Funnel
|
|
Highcharts.chart('conversionFunnelChart', {
|
|
chart: { type: 'funnel' },
|
|
title: { text: null },
|
|
plotOptions: {
|
|
series: {
|
|
dataLabels: {
|
|
enabled: true,
|
|
format: '<b>{point.name}</b> ({point.y:,.0f})',
|
|
color: 'black',
|
|
softConnector: true
|
|
},
|
|
center: ['40%', '50%'],
|
|
neckWidth: '30%',
|
|
neckHeight: '25%'
|
|
}
|
|
},
|
|
series: [{
|
|
name: 'Website Conversion',
|
|
data: [
|
|
['Visit', 313000],
|
|
['Product Page', 230000],
|
|
['Add to Cart', 146000],
|
|
['Checkout', 110000],
|
|
['Sale', 63000]
|
|
]
|
|
}]
|
|
});
|
|
|
|
});
|
|
</script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
var calendarEl = document.getElementById('calendar');
|
|
var calendar = new FullCalendar.Calendar(calendarEl, {
|
|
height: 500,
|
|
initialView: 'dayGridMonth',
|
|
locale: 'ko',
|
|
headerToolbar: {
|
|
left: 'prev,next today',
|
|
center: 'title',
|
|
right: 'dayGridMonth,timeGridWeek,timeGridDay'
|
|
},
|
|
selectable: true,
|
|
editable: true,
|
|
events: [
|
|
// 샘플 일정
|
|
{ title: '회의', start: '2026-08-14', end: '2026-08-15' },
|
|
{ title: '업무 마감', start: '2026-08-17' }
|
|
],
|
|
select: function(info) {
|
|
var title = prompt('새 일정을 입력하세요:');
|
|
if (title) {
|
|
calendar.addEvent({
|
|
title: title,
|
|
start: info.startStr,
|
|
end: info.endStr
|
|
});
|
|
}
|
|
calendar.unselect();
|
|
},
|
|
eventClick: function(info) {
|
|
if (confirm("'" + info.event.title + "' 일정을 삭제할까요?")) {
|
|
info.event.remove();
|
|
}
|
|
}
|
|
});
|
|
calendar.render();
|
|
});
|
|
</script>
|
|
<?php include '../inc/footer.php'; ?>
|