From aff5ec85fa27fe6ce310d6924b30fbe3c5b0c89b Mon Sep 17 00:00:00 2001 From: HojouFotytu <36724681+HojouFotytu@users.noreply.github.com> Date: Tue, 30 Jan 2024 18:38:19 +0900 Subject: [PATCH] tooltips and zero-lines --- Monitor/Pages/MarketAnalyzer.cshtml | 100 ++++++++---- Monitor/Pages/SalesAnalyzer.cshtml | 43 +++-- Monitor/Pages/SettingsGeneral.cshtml.cs | 6 - Monitor/Pages/_get/DashboardBottom.cshtml | 154 +++++++++--------- .../Pages/_get/SettingsMarketTrends.cshtml | 2 +- .../settings.analyzer.json | 3 +- .../DevSettings/settings.analyzer.json | 3 +- 7 files changed, 183 insertions(+), 128 deletions(-) diff --git a/Monitor/Pages/MarketAnalyzer.cshtml b/Monitor/Pages/MarketAnalyzer.cshtml index a1e86dd..562c717 100644 --- a/Monitor/Pages/MarketAnalyzer.cshtml +++ b/Monitor/Pages/MarketAnalyzer.cshtml @@ -162,7 +162,7 @@ else Name Markets Timeframe - Threshold + Threshold Change @@ -368,41 +368,77 @@ else } diff --git a/Monitor/Pages/SalesAnalyzer.cshtml b/Monitor/Pages/SalesAnalyzer.cshtml index a3cb551..2d341a3 100644 --- a/Monitor/Pages/SalesAnalyzer.cshtml +++ b/Monitor/Pages/SalesAnalyzer.cshtml @@ -396,7 +396,7 @@ // Add mouseleave, and mousemove event listeners to hide tooltip d3.select('.sales-chart').on('mouseleave', function() { - d3.select('.nvtooltip').style('opacity', 0); + d3.select('.nvtooltip').remove(); }); d3.select('body').on('mousemove', function() { @@ -405,7 +405,7 @@ var mouseY = d3.event.clientY; if (mouseX < chartBounds.left || mouseX > chartBounds.right || mouseY < chartBounds.top || mouseY > chartBounds.bottom) { - d3.select('.nvtooltip').style('opacity', 0); + d3.select('.nvtooltip').remove(); } }); nv.utils.windowResize(salesChart.update); @@ -444,7 +444,7 @@ // Add mouseleave, and mousemove event listeners to hide tooltip d3.select('.cumulative-profit-chart').on('mouseleave', function() { - d3.select('.nvtooltip').style('opacity', 0); + d3.select('.nvtooltip').remove(); }); d3.select('body').on('mousemove', function() { @@ -453,7 +453,7 @@ var mouseY = d3.event.clientY; if (mouseX < chartBounds.left || mouseX > chartBounds.right || mouseY < chartBounds.top || mouseY > chartBounds.bottom) { - d3.select('.nvtooltip').style('opacity', 0); + d3.select('.nvtooltip').remove(); } }); nv.utils.windowResize(cumulativeProfitChart.update); @@ -490,9 +490,9 @@ .transition().duration(0) .call(TCVChart); - // Add mouseleave, and mousemove event listeners to hide tooltip + // Add mouseleave, and mousemove event listeners to hide tooltip d3.select('.TCV-chart').on('mouseleave', function() { - d3.select('.nvtooltip').style('opacity', 0); + d3.select('.nvtooltip').remove(); }); d3.select('body').on('mousemove', function() { @@ -501,7 +501,7 @@ var mouseY = d3.event.clientY; if (mouseX < chartBounds.left || mouseX > chartBounds.right || mouseY < chartBounds.top || mouseY > chartBounds.bottom) { - d3.select('.nvtooltip').style('opacity', 0); + d3.select('.nvtooltip').remove(); } }); nv.utils.windowResize(TCVChart.update); @@ -538,9 +538,32 @@ .transition().duration(0) .call(profitChart); - // Add mouseleave, and mousemove event listeners to hide tooltip + + profitChart.dispatch.on('renderEnd', function() { + // Get the chart's container + var container = d3.select('.profit-chart .nv-wrap.nv-lineChart .nv-linesWrap'); + + // Check if profitData[0].values is not empty + if (profitData[0].values.length > 0) { + // Get the x-values of the first and last data points + var xMin = profitChart.xAxis.scale()(profitData[0].values[0].x); + var xMax = profitChart.xAxis.scale()(profitData[0].values[profitData[0].values.length - 1].x); + + // Add a line at y=0 + container.insert('line', ':first-child') + .attr('x1', xMin) // x position of the first end of the line + .attr('y1', profitChart.yAxis.scale()(0)) // y position of the first end of the line + .attr('x2', xMax) // x position of the second end of the line + .attr('y2', profitChart.yAxis.scale()(0)) // y position of the second end of the line + .attr('stroke', 'gray') // color of the line + .attr('stroke-width', 2); // width of the line + } + }); + + + // Add mouseleave, and mousemove event listeners to hide tooltip d3.select('.profit-chart').on('mouseleave', function() { - d3.select('.nvtooltip').style('opacity', 0); + d3.select('.nvtooltip').remove(); }); d3.select('body').on('mousemove', function() { @@ -549,7 +572,7 @@ var mouseY = d3.event.clientY; if (mouseX < chartBounds.left || mouseX > chartBounds.right || mouseY < chartBounds.top || mouseY > chartBounds.bottom) { - d3.select('.nvtooltip').style('opacity', 0); + d3.select('.nvtooltip').remove(); } }); nv.utils.windowResize(profitChart.update); diff --git a/Monitor/Pages/SettingsGeneral.cshtml.cs b/Monitor/Pages/SettingsGeneral.cshtml.cs index a731e9b..e601e69 100644 --- a/Monitor/Pages/SettingsGeneral.cshtml.cs +++ b/Monitor/Pages/SettingsGeneral.cshtml.cs @@ -48,18 +48,12 @@ namespace Monitor.Pages // Read the new settings PTMagicConfiguration.GeneralSettings.Application.IsEnabled = HttpContext.Request.Form["Application_IsEnabled"].Equals("on"); - PTMagicConfiguration.GeneralSettings.Application.TestMode = HttpContext.Request.Form["Application_TestMode"].Equals("on"); - //PTMagicConfiguration.GeneralSettings.Application.StartBalance = SystemHelper.TextToDouble(HttpContext.Request.Form["Application_StartBalance"], PTMagicConfiguration.GeneralSettings.Application.StartBalance, "en-US"); PTMagicConfiguration.GeneralSettings.Application.ProfitTrailerDefaultSettingName = HttpContext.Request.Form["Application_ProfitTrailerDefaultSettingName"]; PTMagicConfiguration.GeneralSettings.Application.Exchange = HttpContext.Request.Form["Application_Exchange"]; PTMagicConfiguration.GeneralSettings.Application.ProfitTrailerMonitorURL = HttpContext.Request.Form["Application_ProfitTrailerMonitorURL"]; - PTMagicConfiguration.GeneralSettings.Application.ProfitTrailerServerAPIToken = HttpContext.Request.Form["Application_ProfitTrailerServerAPIToken"]; - //PTMagicConfiguration.GeneralSettings.Application.TimezoneOffset = HttpContext.Request.Form["Application_TimezoneOffset"]; - //PTMagicConfiguration.GeneralSettings.Application.MainFiatCurrency = HttpContext.Request.Form["Application_MainFiatCurrency"]; PTMagicConfiguration.GeneralSettings.Application.FloodProtectionMinutes = SystemHelper.TextToInteger(HttpContext.Request.Form["Application_FloodProtectionMinutes"], PTMagicConfiguration.GeneralSettings.Application.FloodProtectionMinutes); PTMagicConfiguration.GeneralSettings.Application.InstanceName = HttpContext.Request.Form["Application_InstanceName"]; PTMagicConfiguration.GeneralSettings.Application.CoinMarketCapAPIKey = HttpContext.Request.Form["Application_CoinMarketCapAPIKey"]; - //PTMagicConfiguration.GeneralSettings.Application.FreeCurrencyConverterAPIKey = HttpContext.Request.Form["Application_FreeCurrencyConverterAPIKey"]; PTMagicConfiguration.GeneralSettings.Monitor.IsPasswordProtected = HttpContext.Request.Form["Monitor_IsPasswordProtected"].Equals("on"); PTMagicConfiguration.GeneralSettings.Monitor.OpenBrowserOnStart = HttpContext.Request.Form["Monitor_OpenBrowserOnStart"].Equals("on"); PTMagicConfiguration.GeneralSettings.Monitor.AnalyzerChart = HttpContext.Request.Form["Monitor_AnalyzerChart"]; diff --git a/Monitor/Pages/_get/DashboardBottom.cshtml b/Monitor/Pages/_get/DashboardBottom.cshtml index 5d1e98e..3a972d2 100644 --- a/Monitor/Pages/_get/DashboardBottom.cshtml +++ b/Monitor/Pages/_get/DashboardBottom.cshtml @@ -21,7 +21,7 @@ totalCurrentValueString = Math.Round(Model.totalCurrentValue, 2).ToString("#,#0.00", new System.Globalization.CultureInfo("en-US")); } } -
+
TCV: @totalCurrentValueString @Model.Summary.MainMarket
@@ -96,7 +96,7 @@ Name Markets Timeframe - Threshold   + Threshold   Change @@ -324,28 +324,13 @@ assetDistributionData = @Html.Raw(Model.AssetDistributionData); - d3.select("#AssetDistribution svg") + d3.select(".asset-distribution svg") // Change this line .style('height', '90%') .style('width', '100%') .datum(assetDistributionData) .transition().duration(0) .call(assetDistributionChart); - - // Add mouseleave, and mousemove event listeners to hide tooltip - d3.select('.profit-chart').on('mouseleave', function() { - d3.select('.nvtooltip').style('opacity', 0); - }); - - d3.select('body').on('mousemove', function() { - var chartBounds = d3.select('.profit-chart')[0][0].getBoundingClientRect(); - var mouseX = d3.event.clientX; - var mouseY = d3.event.clientY; - - if (mouseX < chartBounds.left || mouseX > chartBounds.right || mouseY < chartBounds.top || mouseY > chartBounds.bottom) { - d3.select('.nvtooltip').style('opacity', 0); - } - }); nv.utils.windowResize(assetDistributionChart.update); return assetDistributionChart; }); @@ -375,24 +360,34 @@ trendData = @Html.Raw(Model.TrendChartDataJSON); - d3.select('.trend-chart svg') + var svg = d3.select('.trend-chart svg').node(); + d3.select(svg) .datum(trendData) .transition().duration(0) .call(trendChart); - // Add mouseleave, and mousemove event listeners to hide tooltip - d3.select('.profit-chart').on('mouseleave', function() { - d3.select('.nvtooltip').style('opacity', 0); + + trendChart.dispatch.on('renderEnd', function() { + // Get the chart's container + var container = d3.select('.trend-chart .nv-wrap.nv-lineChart .nv-linesWrap'); + + // Get the x-values of the first and last data points + var xRange = trendChart.xAxis.scale().range(); + var xMin = xRange[0]; + var xMax = xRange[1]; + + + // Add a line at y=0 + container.insert('line', ':first-child') + .attr('x1', xMin) // x position of the first end of the line + .attr('y1', trendChart.yAxis.scale()(0)) // y position of the first end of the line + .attr('x2', xMax) // x position of the second end of the line + .attr('y2', trendChart.yAxis.scale()(0)) // y position of the second end of the line + .attr('stroke', 'gray') // color of the line + .attr('stroke-width', 2); // width of the line }); - d3.select('body').on('mousemove', function() { - var chartBounds = d3.select('.profit-chart')[0][0].getBoundingClientRect(); - var mouseX = d3.event.clientX; - var mouseY = d3.event.clientY; + - if (mouseX < chartBounds.left || mouseX > chartBounds.right || mouseY < chartBounds.top || mouseY > chartBounds.bottom) { - d3.select('.nvtooltip').style('opacity', 0); - } - }); nv.utils.windowResize(trendChart.update); return trendChart; }); @@ -427,20 +422,27 @@ .transition().duration(0) .call(profitChart); - // Add mouseleave, and mousemove event listeners to hide tooltip - d3.select('.profit-chart').on('mouseleave', function() { - d3.select('.nvtooltip').style('opacity', 0); - }); + profitChart.dispatch.on('renderEnd', function() { + // Get the chart's container + var container = d3.select('.profit-chart .nv-wrap.nv-lineChart .nv-linesWrap'); - d3.select('body').on('mousemove', function() { - var chartBounds = d3.select('.profit-chart')[0][0].getBoundingClientRect(); - var mouseX = d3.event.clientX; - var mouseY = d3.event.clientY; + // Check if profitData[0].values is not empty + if (profitData[0].values.length > 0) { + // Get the x-values of the first and last data points + var xMin = profitChart.xAxis.scale()(profitData[0].values[0].x); + var xMax = profitChart.xAxis.scale()(profitData[0].values[profitData[0].values.length - 1].x); - if (mouseX < chartBounds.left || mouseX > chartBounds.right || mouseY < chartBounds.top || mouseY > chartBounds.bottom) { - d3.select('.nvtooltip').style('opacity', 0); - } + // Add a line at y=0 + container.insert('line', ':first-child') + .attr('x1', xMin) // x position of the first end of the line + .attr('y1', profitChart.yAxis.scale()(0)) // y position of the first end of the line + .attr('x2', xMax) // x position of the second end of the line + .attr('y2', profitChart.yAxis.scale()(0)) // y position of the second end of the line + .attr('stroke', 'gray') // color of the line + .attr('stroke-width', 2); // width of the line + } }); + nv.utils.windowResize(profitChart.update); return profitChart; }); @@ -451,31 +453,10 @@ + + + diff --git a/Monitor/Pages/_get/SettingsMarketTrends.cshtml b/Monitor/Pages/_get/SettingsMarketTrends.cshtml index a4611bf..f32ef9f 100644 --- a/Monitor/Pages/_get/SettingsMarketTrends.cshtml +++ b/Monitor/Pages/_get/SettingsMarketTrends.cshtml @@ -78,7 +78,7 @@
- +
Leave empty to exclude none diff --git a/PTMagic/_defaults/_default_settings_PT_2.x/settings.analyzer.json b/PTMagic/_defaults/_default_settings_PT_2.x/settings.analyzer.json index 33ed9ac..764781b 100644 --- a/PTMagic/_defaults/_default_settings_PT_2.x/settings.analyzer.json +++ b/PTMagic/_defaults/_default_settings_PT_2.x/settings.analyzer.json @@ -22,7 +22,8 @@ "TrendCurrency": "Market", // Trend Currency to build the trend against. If set to "Fiat", the trend will // take the USD value of your main currency into account to build the trend. // "Market" will build a trend against your base currency, such as BTC or USDT. - "TrendThreshold": 15, // Any coin that is above 15% or below -15% for this timeframe will not be used when calculating the market average. + "TrendThreshold": 15, // Any coin that is above 15% or below -15% for this timeframe will be considered an outlier, + // and not used when calculating the market average. "DisplayGraph": false, // Use this trend in the graph on the PTM Monitor dashboard and market analyzer "DisplayOnMarketAnalyzerList": false // Disply this trend for all coins on the PTM Monitor market analyzer }, diff --git a/_Development/DevSettings/settings.analyzer.json b/_Development/DevSettings/settings.analyzer.json index 33ed9ac..753d4fb 100644 --- a/_Development/DevSettings/settings.analyzer.json +++ b/_Development/DevSettings/settings.analyzer.json @@ -22,7 +22,8 @@ "TrendCurrency": "Market", // Trend Currency to build the trend against. If set to "Fiat", the trend will // take the USD value of your main currency into account to build the trend. // "Market" will build a trend against your base currency, such as BTC or USDT. - "TrendThreshold": 15, // Any coin that is above 15% or below -15% for this timeframe will not be used when calculating the market average. + "TrendThreshold": 15, // Any coin that is above 15% or below -15% for this timeframe will be considered an outlier, + // and not used when calculating the market average. "DisplayGraph": false, // Use this trend in the graph on the PTM Monitor dashboard and market analyzer "DisplayOnMarketAnalyzerList": false // Disply this trend for all coins on the PTM Monitor market analyzer },