cashwise-dashboard
HTML
<link rel="stylesheet" href="https://semantic-ui.com/dist/semantic.css">
<script src="https://rawgit.com/Semantic-Org/Semantic-UI/next/dist/semantic.js"></script>
<script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script>
<script src="https://code.highcharts.com/gantt/modules/accessibility.js"></script>
<div class="ui fixed inverted menu">
<a class="active item">
Dashboard
</a>
<a class="item">
Notification
</a>
<a class="item">
Settings
</a>
<div class="right menu">
<a class="item">
<i class="user icon"></i>
<b>ABC Company</b>
</a>
</div>
</div>
<div style="padding: 10px; margin-top: 36px;">
<div class="ui stackable two column grid">
<div class="eight wide column">
<div class="ui segment">
<h3 class="ui header">Total Assets</h3>
<div id="total_assets"></div>
</div>
</div>
<div class="eight wide column">
<div class="ui segment">
<h3 class="ui header">Estimated Earning</h3>
<div id="earning"></div>
</div>
</div>
</div>
<div class="ui segment">
<h3 class="ui header">Current Portfolio</h3>
<a class="ui green button" style="float: right;"><i class="add icon"></i>Buy New Bond</a>
Matured in:
<div class="ui secondary compact tiny inline menu" style="margin-bottom: 8px;">
<a class="item">3 months</a>
<a class="item">6 months</a>
<a class="active item">1 year</a>
<a class="item">2 years</a>
<a class="item">3 years</a>
<a class="item">ALL</a>
</div>
<div class="ui stackable three column grid">
<div class="column">
<div class="ui two column grid">
<h4 class="ui header column">Cash Deployment</h4>
<div style="font-size: 140%; text-align: right;" class="column">
<b>$30,500,000</b>
</div>
</div>
</div>
<div class="column">
<div class="ui two column grid" style="border-left: 1px solid #eee;">
<h4 class="ui header column">Expected Future Earning</h4>
<div style="font-size: 140%; text-align: right;" class="column">
<b>$1,185,358</b>
</div>
</div>
</div>
<div class="column">
<div class="ui two column grid" style="border-left: 1px solid #eee;">
<h4 class="ui...JavaScript
Highcharts.chart('total_assets', {
colors: ['#005FFF','#2C7CFF','#8EB8FF'],
chart: { type: 'pie', plotBackgroundColor: null, plotBorderWidth: 0, plotShadow: false },
title: { align: 'center', verticalAlign: 'middle',
text: 'Total<br><b style="font-size:120%">$35,500,000</b>'},
plotOptions: { pie: { size: '100%',
dataLabels: { crop: false, distance: -20, style: { fontSize: '110%' }},
tooltip: { pointFormat: '<b>${point.y}</b>' },
}},
series: [{ innerSize: '60%', data: [
{ name: 'Matured within a year', y: 22000000 },
{ name: 'More than 1 year', y: 8500000 },
{ name: 'Money Market', y: 5000000 },
]}]
});
Highcharts.chart('earning', {
colors: ['#005FFF','#2C7CFF','#8EB8FF'],
chart: { type: 'pie', plotBackgroundColor: null, plotBorderWidth: 0, plotShadow: false },
title: { align: 'center', verticalAlign: 'middle',
text: 'Total<br><b style="font-size:120%">$2,808,883</b>'},
plotOptions: { pie: { size: '100%',
dataLabels: { crop: false, distance: -20, style: { fontSize: '110%' }},
tooltip: { pointFormat: '<b>${point.y}</b>' },
}},
series: [{ innerSize: '60%', data: [
{ name: 'Realized Earning', y: 1623525 },
{ name: 'Expected within a year', y: 737133 },
{ name: 'More than 1 year', y: 448225 },
]}]
});
Highcharts.chart('estimated_balance', {
chart: { type: 'area' },
colors: ['#005FFF',],
title: null,
xAxis: { type: 'datetime' },
yAxis: { title: { text: 'Balance' }},
plotOptions: { area: { marker: { enabled: false, }},
series: { pointStart: Date.UTC(2023, 3, 1), pointIntervalUnit: 'month' }},
series: [{ name: 'Money Market',
data: [5000000,5000000,5000000,5000000,10500000,10500000,10500000,10500000,32500000,32500000,32500000,32500000]
}]
})
Highcharts.ganttChart('portfolio', {
colors: ['#BAD3FF','#8EB8FF',],
title: null,
yAxis: { visible: false,
categories: [0,1,2,3],
},
plotOptions: { series: { pointWidth: 50,
tooltip: { headerFormat: '',
pointFormat: '<b>{point.name}</b><br>Start: {point.start:%Y-%m-%d}<br>End: {point.end:%Y-%m-%d}' },
dataLabels: { align:...