Asset Distribution Chart
This commit is contained in:
parent
9070a33e9b
commit
885bb796e2
|
@ -161,6 +161,28 @@ namespace Core.Main.DataObjects
|
|||
this.Summary.PendingValue +
|
||||
this.Summary.DustValue);
|
||||
}
|
||||
public double GetPairsBalance()
|
||||
{
|
||||
return
|
||||
(this.Summary.PairsValue);
|
||||
}
|
||||
public double GetDCABalance()
|
||||
{
|
||||
return
|
||||
(this.Summary.DCAValue);
|
||||
}
|
||||
public double GetPendingBalance()
|
||||
{
|
||||
return
|
||||
(this.Summary.PendingValue);
|
||||
}
|
||||
public double GetDustBalance()
|
||||
{
|
||||
return
|
||||
(this.Summary.DustValue);
|
||||
}
|
||||
|
||||
|
||||
|
||||
public double GetSnapshotBalance(DateTime snapshotDateTime)
|
||||
{
|
||||
|
|
|
@ -15,8 +15,6 @@
|
|||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="card-box">
|
||||
|
||||
|
||||
<table class="table table-striped table-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
|
@ -4,6 +4,11 @@
|
|||
Layout = null;
|
||||
}
|
||||
|
||||
@section Styles {
|
||||
<link href="@Html.Raw(Model.PTMagicConfiguration.GeneralSettings.Monitor.RootUrl)assets/plugins/nvd3/nv.d3.min.css" rel="stylesheet" type="text/css" />
|
||||
<link href="@Html.Raw(Model.PTMagicConfiguration.GeneralSettings.Monitor.RootUrl)assets/plugins/tablesaw/css/tablesaw.css" rel="stylesheet" type="text/css" />
|
||||
}
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 px-1">
|
||||
<div class="card-box px-2">
|
||||
|
@ -44,6 +49,39 @@
|
|||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2 px-1">
|
||||
<div class="card-box px-2" style="height:305px;">
|
||||
<h4 class="m-t-0 header-title">Asset Distribution</h4>
|
||||
<div id="AssetDistribution">
|
||||
<svg style="height:290px;width:100%"></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 px-1">
|
||||
<div class="card-box px-2" style="height:305px;">
|
||||
@if (!Model.ProfitChartDataJSON.Equals("")) {
|
||||
<div class="profit-chart">
|
||||
<svg style="height:300px;width:100%"></svg>
|
||||
</div>
|
||||
} else {
|
||||
<p>Unable to load graph, no sales data found.</p>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 px-1">
|
||||
<div class="card-box px-2" style="height:305px;">
|
||||
@if (!Model.TrendChartDataJSON.Equals("")) {
|
||||
<div class="trend-chart">
|
||||
<svg style="height:300px;width:100%"></svg>
|
||||
</div>
|
||||
} else {
|
||||
<p>Unable to load graph, no market trend data found.</p>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 px-1">
|
||||
<div class="card-box px-2">
|
||||
<h4 class="m-t-0 m-b-20 header-title"><b>Sales Overview</b><small class="pull-right"><a href="@Html.Raw(Model.PTMagicConfiguration.GeneralSettings.Monitor.RootUrl)SalesAnalyzer">more</a></small></h4>
|
||||
|
@ -127,81 +165,84 @@
|
|||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 px-1">
|
||||
<div class="card-box px-2" style="height:305px;">
|
||||
@if (!Model.TrendChartDataJSON.Equals("")) {
|
||||
<div class="trend-chart">
|
||||
<svg style="height:305px;width:100%"></svg>
|
||||
</div>
|
||||
} else {
|
||||
<p>Not able to load graph, no market trend data found.<br />If you still do not see a graph after more than hour, report an issue.</p>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 px-1">
|
||||
<div class="card-box px-2" style="height:305px;">
|
||||
@if (!Model.ProfitChartDataJSON.Equals("")) {
|
||||
<div class="profit-chart">
|
||||
<svg style="height:305px;width:100%"></svg>
|
||||
</div>
|
||||
} else {
|
||||
<p>Not able to load graph, no sales data found.<br />If you still do not see a graph after you made your first sale, report an issue.</p>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="@Html.Raw(Model.PTMagicConfiguration.GeneralSettings.Monitor.RootUrl)assets/plugins/d3/d3.min.js"></script>
|
||||
<script src="@Html.Raw(Model.PTMagicConfiguration.GeneralSettings.Monitor.RootUrl)assets/plugins/nvd3/nv.d3.min.js"></script>
|
||||
<script src="@Html.Raw(Model.PTMagicConfiguration.GeneralSettings.Monitor.RootUrl)assets/plugins/tablesaw/js/tablesaw.js"></script>
|
||||
<script src="@Html.Raw(Model.PTMagicConfiguration.GeneralSettings.Monitor.RootUrl)assets/plugins/tablesaw/js/tablesaw-init.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function () {
|
||||
$('[data-toggle="tooltip"]').tooltip();
|
||||
$('.text-autocolor').autocolor(false);
|
||||
|
||||
@if (!Model.AssetDistributionData.Equals("")) {
|
||||
<text>
|
||||
nv.addGraph(function() {
|
||||
var chart = nv.models.pieChart()
|
||||
.x(function(d) { return d.label })
|
||||
.y(function(d) { return d.value })
|
||||
.showLabels(true) //Display pie labels
|
||||
.labelThreshold(.1) //Configure the minimum slice size for labels to show up
|
||||
.labelType("percent") //Configure what type of data to show in the label. Can be "key", "value" or "percent"
|
||||
.donut(true) //Turn on Donut mode. Makes pie chart look tasty!
|
||||
.donutRatio(0.3) //Configure how big you want the donut hole size to be.
|
||||
;
|
||||
|
||||
d3.select("#AssetDistribution svg")
|
||||
.datum(@Html.Raw(Model.AssetDistributionData))
|
||||
.transition().duration(350)
|
||||
.call(chart);
|
||||
|
||||
return chart;
|
||||
});
|
||||
</text>
|
||||
}
|
||||
});
|
||||
|
||||
(function ($) {
|
||||
'use strict';
|
||||
$('[role="tooltip"]').remove();
|
||||
$('[data-toggle="tooltip"]').tooltip();
|
||||
$('.text-autocolor').autocolor(false);
|
||||
|
||||
@if (!Model.Summary.CurrentGlobalSetting.SettingName.Equals(Model.LastGlobalSetting)) {
|
||||
<text>
|
||||
$.Notification.notify('success', 'top left', '@Core.Helper.SystemHelper.SplitCamelCase(Model.Summary.CurrentGlobalSetting.SettingName) now active!', 'PTMagic switched Profit Trailer settings to "@Core.Helper.SystemHelper.SplitCamelCase(Model.Summary.CurrentGlobalSetting.SettingName)".');
|
||||
</text>
|
||||
}
|
||||
@if (!Model.Summary.CurrentGlobalSetting.SettingName.Equals(Model.LastGlobalSetting)) {
|
||||
<text>
|
||||
$.Notification.notify('success', 'top left', '@Core.Helper.SystemHelper.SplitCamelCase(Model.Summary.CurrentGlobalSetting.SettingName) now active!', 'PTMagic switched Profit Trailer settings to "@Core.Helper.SystemHelper.SplitCamelCase(Model.Summary.CurrentGlobalSetting.SettingName)".');
|
||||
</text>
|
||||
}
|
||||
|
||||
@if (!Model.TrendChartDataJSON.Equals("")) {
|
||||
<text>
|
||||
nv.addGraph(function () {
|
||||
var lineChart = nv.models.lineChart();
|
||||
var height = 300;
|
||||
var chartData = @Html.Raw(Model.TrendChartDataJSON);
|
||||
lineChart.useInteractiveGuideline(true);
|
||||
lineChart.xAxis.tickFormat(function (d) { return d3.time.format('%H:%M')(new Date(d)); });
|
||||
lineChart.yAxis.axisLabel('Trend %').tickFormat(d3.format(',.2f'));
|
||||
d3.select('.trend-chart svg').attr('perserveAspectRatio', 'xMinYMid').datum(chartData).transition().duration(500).call(lineChart);
|
||||
//nv.utils.windowResize(lineChart.update); v1.3.0 => Removed this line to prevent memory leak
|
||||
@if (!Model.TrendChartDataJSON.Equals("")) {
|
||||
<text>
|
||||
nv.addGraph(function () {
|
||||
var lineChart = nv.models.lineChart();
|
||||
var height = 300;
|
||||
var chartData = @Html.Raw(Model.TrendChartDataJSON);
|
||||
lineChart.useInteractiveGuideline(true);
|
||||
lineChart.xAxis.tickFormat(function (d) { return d3.time.format('%H:%M')(new Date(d)); });
|
||||
lineChart.yAxis.axisLabel('Trend %').tickFormat(d3.format(',.2f'));
|
||||
d3.select('.trend-chart svg').attr('perserveAspectRatio', 'xMinYMid').datum(chartData).transition().duration(500).call(lineChart);
|
||||
//nv.utils.windowResize(lineChart.update); v1.3.0 => Removed this line to prevent memory leak
|
||||
return lineChart;
|
||||
});
|
||||
</text>
|
||||
}
|
||||
|
||||
return lineChart;
|
||||
});
|
||||
</text>
|
||||
}
|
||||
|
||||
@if (!Model.ProfitChartDataJSON.Equals("")) {
|
||||
<text>
|
||||
nv.addGraph(function () {
|
||||
var lineChart = nv.models.lineChart();
|
||||
var height = 300;
|
||||
var chartData = @Html.Raw(Model.ProfitChartDataJSON);
|
||||
lineChart.useInteractiveGuideline(true);
|
||||
lineChart.xAxis.tickFormat(function (d) { return d3.time.format('%Y/%m/%d')(new Date(d)); });
|
||||
lineChart.yAxis.axisLabel('Profit').tickFormat(d3.format(',.2f'));
|
||||
d3.select('.profit-chart svg').attr('perserveAspectRatio', 'xMinYMid').datum(chartData).transition().duration(500).call(lineChart);
|
||||
//nv.utils.windowResize(lineChart.update); v1.3.0 => Removed this line to prevent memory leak
|
||||
|
||||
return lineChart;
|
||||
});
|
||||
</text>
|
||||
}
|
||||
})(jQuery);
|
||||
@if (!Model.ProfitChartDataJSON.Equals("")) {
|
||||
<text>
|
||||
nv.addGraph(function () {
|
||||
var lineChart = nv.models.lineChart();
|
||||
var height = 300;
|
||||
var chartData = @Html.Raw(Model.ProfitChartDataJSON);
|
||||
lineChart.useInteractiveGuideline(true);
|
||||
lineChart.xAxis.tickFormat(function (d) { return d3.time.format('%Y/%m/%d')(new Date(d)); });
|
||||
lineChart.yAxis.axisLabel('Daily Profit').tickFormat(d3.format(',.2f'));
|
||||
d3.select('.profit-chart svg').attr('perserveAspectRatio', 'xMinYMid').datum(chartData).transition().duration(500).call(lineChart);
|
||||
//nv.utils.windowResize(lineChart.update); v1.3.0 => Removed this line to prevent memory leak
|
||||
|
||||
return lineChart;
|
||||
});
|
||||
</text>
|
||||
}
|
||||
})(jQuery);
|
||||
</script>
|
|
@ -16,12 +16,13 @@ namespace Monitor.Pages {
|
|||
public string ProfitChartDataJSON = "";
|
||||
public string LastGlobalSetting = "Default";
|
||||
public DateTimeOffset DateTimeNow = Constants.confMinDate;
|
||||
|
||||
public string AssetDistributionData = "";
|
||||
public void OnGet() {
|
||||
// Initialize Config
|
||||
base.Init();
|
||||
|
||||
BindData();
|
||||
BuildAssetDistributionData();
|
||||
}
|
||||
|
||||
private void BindData() {
|
||||
|
@ -87,7 +88,6 @@ namespace Monitor.Pages {
|
|||
trendChartTicks++;
|
||||
}
|
||||
}
|
||||
|
||||
// Add most recent tick
|
||||
List<MarketTrendChange> latestTickRange = marketTrendChangeSummaries.OrderByDescending(m => m.TrendDateTime).ToList();
|
||||
if (latestTickRange.Count > 0) {
|
||||
|
@ -115,22 +115,18 @@ namespace Monitor.Pages {
|
|||
string profitPerDayJSON = "";
|
||||
if (PTData.SellLog.Count > 0) {
|
||||
DateTime minSellLogDate = PTData.SellLog.OrderBy(sl => sl.SoldDate).First().SoldDate.Date;
|
||||
DateTime graphStartDate = DateTime.UtcNow.Date.AddDays(-30);
|
||||
DateTime graphStartDate = DateTime.UtcNow.Date.AddDays(-10);
|
||||
if (minSellLogDate > graphStartDate) graphStartDate = minSellLogDate;
|
||||
for (DateTime salesDate = graphStartDate; salesDate <= DateTime.UtcNow.Date; salesDate = salesDate.AddDays(1)) {
|
||||
if (tradeDayIndex > 0) {
|
||||
profitPerDayJSON += ",\n";
|
||||
}
|
||||
|
||||
int trades = PTData.SellLog.FindAll(t => t.SoldDate.Date == salesDate).Count;
|
||||
double profit = PTData.SellLog.FindAll(t => t.SoldDate.Date == salesDate).Sum(t => t.Profit);
|
||||
double profitFiat = Math.Round(profit * Summary.MainMarketPrice, 2);
|
||||
|
||||
profitPerDayJSON += "{x: new Date('" + salesDate.ToString("yyyy-MM-dd") + "'), y: " + profitFiat.ToString("0.00", new System.Globalization.CultureInfo("en-US")) + "}";
|
||||
|
||||
tradeDayIndex++;
|
||||
}
|
||||
|
||||
ProfitChartDataJSON = "[";
|
||||
ProfitChartDataJSON += "{";
|
||||
ProfitChartDataJSON += "key: 'Profit in " + Summary.MainFiatCurrency + "',";
|
||||
|
@ -140,5 +136,21 @@ namespace Monitor.Pages {
|
|||
ProfitChartDataJSON += "]";
|
||||
}
|
||||
}
|
||||
private void BuildAssetDistributionData()
|
||||
{
|
||||
double PairsBalance = PTData.GetPairsBalance();
|
||||
double DCABalance = PTData.GetDCABalance();
|
||||
double PendingBalance = PTData.GetPendingBalance();
|
||||
double DustBalance = PTData.GetDustBalance();
|
||||
double TotalValue = PTData.GetCurrentBalance();
|
||||
double AvailableBalance = (TotalValue - PairsBalance - DCABalance - PendingBalance - DustBalance);
|
||||
|
||||
AssetDistributionData = "[";
|
||||
AssetDistributionData += "{label: 'Pairs',color: '#82E0AA',value: " + PairsBalance.ToString() + "},";
|
||||
AssetDistributionData += "{label: 'DCA',color: '#D98880',value: " + DCABalance.ToString() + "},";
|
||||
AssetDistributionData += "{label: 'Pending',color: '#F5B041',value: " + PendingBalance.ToString() + "},";
|
||||
AssetDistributionData += "{label: 'Dust',color: '#BB8FCE',value: " + DustBalance.ToString() + "},";
|
||||
AssetDistributionData += "{label: 'Balance',color: '#85C1E9',value: " + AvailableBalance.ToString() + "}]";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue