Split SharePrices.js, refined Total Holdings History chart (commit 2)
This commit is contained in:
parent
e1281897a8
commit
882d721899
Binary file not shown.
@ -1,198 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Flot test</title>
|
||||
<script src="scripts/jquery-3.5.1.min.js" type="text/javascript"></script>
|
||||
<script src="scripts/jquery.flot.js" type="text/javascript"></script>
|
||||
<script src="scripts/jquery.flot.time.min.js" type="text/javascript"></script>
|
||||
<script src="scripts/FlotGaps.js" type="text/javascript"></script>
|
||||
<style>
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
td {
|
||||
border: 1px solid black;
|
||||
border-spacing: 1px;
|
||||
padding: 0;
|
||||
}
|
||||
.pcLabel {
|
||||
/*position: absolute;*/
|
||||
width: 100px;
|
||||
background-color: transparent;
|
||||
text-align: center;
|
||||
/*border: 1px solid green;*/
|
||||
}
|
||||
.pcBackground {
|
||||
position: absolute;
|
||||
background-color: lightgrey;
|
||||
z-index:-1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<table>
|
||||
<tr>
|
||||
<td>Col1</td>
|
||||
<td>Col2</td>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
<td>Col5</td>
|
||||
<td>Col6</td>
|
||||
<td>Col7</td>
|
||||
<td>Col8</td>
|
||||
<td>Col9</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Value Col 1</td>
|
||||
<td>Value Col 2</td>
|
||||
<td>Value Col 3</td>
|
||||
<td>Value Col 4</td>
|
||||
<td>Value Col 5</td>
|
||||
<td>Value Col 6</td>
|
||||
<td>Value Col 7</td>
|
||||
<td>Value Col 8</td>
|
||||
<td>Value Col 9</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Value Col 1</td>
|
||||
<td>
|
||||
<div class="pcBackground" style="width:30px;"> </div>
|
||||
<div class="pcLabel">30%</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="pcBackground" style="width:60px;"> </div>
|
||||
<div class="pcLabel">60%</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="pcBackground" style="width:90px;"> </div>
|
||||
<div class="pcLabel">90%</div>
|
||||
</td>
|
||||
<td>Value Col 5</td>
|
||||
<td>Value Col 6</td>
|
||||
<td>Value Col 7</td>
|
||||
<td>Value Col 8</td>
|
||||
<td>Value Col 9</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Value Col 1</td>
|
||||
<td>Value Col 2</td>
|
||||
<td>Value Col 3</td>
|
||||
<td>Value Col 4</td>
|
||||
<td>Value Col 5</td>
|
||||
<td>Value Col 6</td>
|
||||
<td>Value Col 7</td>
|
||||
<td>Value Col 8</td>
|
||||
<td>Value Col 9</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div id="chartDiv" style="width:800px; height: 200px;"></div>
|
||||
<div id="chartDiv2" style="width:800px; height: 200px;"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
Date.prototype.yyyymmddhhmmss = function () {
|
||||
var yyyy = this.getFullYear().toString();
|
||||
var mm = (this.getMonth() + 1).toString(); // getMonth() is zero-based
|
||||
var dd = this.getDate().toString();
|
||||
var hh = this.getHours().toString();
|
||||
var nn = this.getMinutes().toString();
|
||||
var ss = this.getSeconds().toString();
|
||||
return yyyy + '-' + (mm[1] ? mm : "0" + mm[0]) + '-' + (dd[1] ? dd : "0" + dd[0]) + " " + (hh[1] ? hh : "0" + hh[0]) + ":" + (nn[1] ? nn : "0" + nn[0]) + ":" + (ss[1] ? ss : "0" + ss[0]);
|
||||
};
|
||||
var timespans = { oneSecond: 1000, oneMinute: 60 * 1000, oneHour: 60 * 60 * 1000, oneDay: 24 * 60 * 60 * 1000, oneWeek: 7 * 24 * 60 * 60 * 1000, oneMonth: 31 * 24 * 60 * 60 * 1000 };
|
||||
function z(dt) {
|
||||
return new Date(dt).yyyymmddhhmmss();
|
||||
};
|
||||
|
||||
function generateData1() {
|
||||
let series = [];
|
||||
let baseDate = new Date('2020-06-15').getTime();
|
||||
for (let w = 0; w < 2; w++) {
|
||||
let price = 1;
|
||||
for (let d = 0; d < 5; d++) {
|
||||
if (series.length > 0) { series.push([null, null]) };
|
||||
for (let h = 9; h < 18; h += 2) {
|
||||
series.push([baseDate + (w * timespans.oneWeek) + (d * timespans.oneDay) + (h * timespans.oneHour), price++]);
|
||||
}
|
||||
}
|
||||
}
|
||||
return [series];
|
||||
}
|
||||
function generateData2() {
|
||||
let series = [];
|
||||
let baseDate = new Date('2020-06-15').getTime();
|
||||
for (let w = 0; w < 4; w++) {
|
||||
let price = 1;
|
||||
for (let d = 0; d < 5; d++) {
|
||||
if (series.length > 0) { series.push([null, null]) };
|
||||
for (let h = 9; h < 18; h++) {
|
||||
series.push([baseDate + (w * timespans.oneWeek) + (d * timespans.oneDay) + (h * timespans.oneHour), price++]);
|
||||
}
|
||||
}
|
||||
}
|
||||
return [series];
|
||||
}
|
||||
|
||||
function drawChart() {
|
||||
let cd1 = generateData1();
|
||||
let mygapMap = generateChartGapMap(cd1[0], timespans.oneHour);
|
||||
$.plot($("#chartDiv"), cd1, {
|
||||
points: { show: false },
|
||||
lines: { show: true },
|
||||
grid: { hoverable: true },
|
||||
xaxis: {
|
||||
mode: "time",
|
||||
timezone: 'browser',
|
||||
transform: function (v) {
|
||||
return mapChartXValue(v, mygapMap);
|
||||
},
|
||||
inverseTransform: function (v) { return unmapChartXValue(v, mygapMap); }
|
||||
}
|
||||
});
|
||||
$("<div id='tooltip'></div>").css({ position: "absolute", display: "none", border: "1px solid #fdd", padding: "2px", "background-color": "#fee", opacity: 0.80 }).appendTo("body");
|
||||
$("#chartDiv").bind("plothover", function (event, pos, item) {
|
||||
if (!pos.x || !pos.y) { return; }
|
||||
if (item) {
|
||||
let x = new Date(item.datapoint[0]).yyyymmddhhmmss();
|
||||
let y = item.datapoint[1].toFixed(2);
|
||||
$("#tooltip").html(x + " = " + y).css({ top: item.pageY + 5, left: item.pageX + 5 }).fadeIn(200);
|
||||
} else {
|
||||
$("#tooltip").hide();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
let cd2 = generateData2();
|
||||
let mygapMap2 = generateChartGapMap(cd2[0], timespans.oneHour);
|
||||
$.plot($("#chartDiv2"), cd2, {
|
||||
points: { show: false },
|
||||
lines: { show: true },
|
||||
grid: { hoverable: true },
|
||||
xaxis: {
|
||||
mode: "time",
|
||||
timezone: 'browser',
|
||||
transform: function (v) {
|
||||
return mapChartXValue(v, mygapMap2);
|
||||
},
|
||||
inverseTransform: function (v) { return unmapChartXValue(v, mygapMap2); }
|
||||
}
|
||||
});
|
||||
$("#chartDiv2").bind("plothover", function (event, pos, item) {
|
||||
if (!pos.x || !pos.y) { return; }
|
||||
if (item) {
|
||||
let x = new Date(item.datapoint[0]).yyyymmddhhmmss();
|
||||
let y = item.datapoint[1].toFixed(2);
|
||||
$("#tooltip").html(x + " = " + y).css({ top: item.pageY + 5, left: item.pageX + 5 }).fadeIn(200);
|
||||
} else {
|
||||
$("#tooltip").hide();
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
$(document).ready(function () { drawChart(); });
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
@ -5,7 +5,7 @@
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head runat="server">
|
||||
<title></title>
|
||||
<script src="scripts/jquery-3.5.1.min.js" type="text/javascript"></script>
|
||||
<script src="scripts/jquery/jquery-3.5.1.min.js" type="text/javascript"></script>
|
||||
<script src="scripts/highcharts_9.3.1/highcharts.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
@ -9,21 +9,21 @@
|
||||
<link rel="stylesheet" href="SharePricesStyles.css" type="text/css" />
|
||||
<link rel="stylesheet" href="SharePricesModal.css" type="text/css" />
|
||||
<link rel="stylesheet" href="jquery-ui.css" type="text/css" />
|
||||
<script src="scripts/jquery-3.5.1.min.js" type="text/javascript"></script>
|
||||
<script src="scripts/jquery-ui.min.js" type="text/javascript"></script>
|
||||
<script src="scripts/jquery.flot.js" type="text/javascript"></script>
|
||||
<script src="scripts/jquery.flot.axislabels.js" type="text/javascript"></script>
|
||||
<script src="scripts/jquery.flot.downsample.js" type="text/javascript"></script>
|
||||
<script src="scripts/jquery.flot.crosshair.js" type="text/javascript"></script>
|
||||
<script src="scripts/jquery.flot.selection.min.js" type="text/javascript"></script>
|
||||
<script src="scripts/jquery.flot.time.min.js" type="text/javascript"></script>
|
||||
<script src="scripts/jquery.flot.tooltip.js" type="text/javascript"></script>
|
||||
<script src="scripts/jquery.flot.pie.js" type="text/javascript"></script>
|
||||
<script src="scripts/jquery/jquery-3.5.1.min.js" type="text/javascript"></script>
|
||||
<script src="scripts/jquery/jquery-ui.min.js" type="text/javascript"></script>
|
||||
<script src="scripts/flot/jquery.flot.js" type="text/javascript"></script>
|
||||
<script src="scripts/flot/jquery.flot.axislabels.js" type="text/javascript"></script>
|
||||
<script src="scripts/flot/jquery.flot.downsample.js" type="text/javascript"></script>
|
||||
<script src="scripts/flot/jquery.flot.crosshair.js" type="text/javascript"></script>
|
||||
<script src="scripts/flot/jquery.flot.selection.min.js" type="text/javascript"></script>
|
||||
<script src="scripts/flot/jquery.flot.time.min.js" type="text/javascript"></script>
|
||||
<script src="scripts/flot/jquery.flot.tooltip.js" type="text/javascript"></script>
|
||||
<script src="scripts/flot/jquery.flot.pie.js" type="text/javascript"></script>
|
||||
<script src="scripts/js.cookie-2.2.1.min.js" type="text/javascript"></script>
|
||||
<script src="scripts/tablesorter/jquery.tablesorter.js" type="text/javascript"></script>
|
||||
<script src="scripts/tablesorter/jquery.tablesorter.widgets.js" type="text/javascript"></script>
|
||||
<script src="scripts/jquery.marquee.min.js" type="text/javascript"></script>
|
||||
<script src="scripts/SharePrices.js" type="text/javascript"></script>
|
||||
<script src="scripts/jquery/jquery.marquee.min.js" type="text/javascript"></script>
|
||||
<script src="scripts/SharePrices.js" type="module"></script>
|
||||
<script src="scripts/FlotGaps.js" type="text/javascript"></script>
|
||||
|
||||
<!--<script src="scripts/highcharts_9.3.1/highcharts.js" type="text/javascript"></script>!--
|
||||
@ -41,7 +41,7 @@
|
||||
<a id="navCurrentHoldings" onclick="showTab(this);" data-div="holdingsDiv">Holdings</a>
|
||||
<a id="navAccounts" onclick="showTab(this);" data-div="accountsDiv">Accounts</a>
|
||||
<a id="navAnal" onclick="showTab(this);" data-div="analDiv">Analysis</a>
|
||||
<a id="navHist" onclick="showTab(this); refreshHistoryChart();" data-div="histDiv">History</a>
|
||||
<a id="navHist" onclick="showTab(this); importedFunctions.refreshHistoryChart();" data-div="histDiv">History</a>
|
||||
<a id="navLog" onclick="showTab(this);" data-div="logDiv">Log</a>
|
||||
</td>
|
||||
<td style="width: 30%; text-align: center;">
|
||||
@ -66,7 +66,7 @@
|
||||
<div>
|
||||
<label for="displayAsPercent">Display as percent</label><input type="checkbox" name="displayAsPercent" id="displayAsPercent" onclick="handleClick(this)"/>
|
||||
<label for="excludeNoHoldings">Hide shares with no holdings</label><input type="checkbox" name="excludeNoHoldings" id="excludeNoHoldings" onclick="handleClick(this)"/>
|
||||
<button onclick="showModalDialog_AddInstrument()">Add Instrument</button>
|
||||
<button onclick="importedFunctions.showModalDialog_AddInstrument()">Add Instrument</button>
|
||||
</div>
|
||||
<div id="chartsDiv">Charts</div>
|
||||
</div>
|
||||
@ -140,6 +140,57 @@
|
||||
</div>
|
||||
<div id="chartTooltip" class="chart-tooltip"></div>
|
||||
<script>
|
||||
let importedFunctions = {};
|
||||
function showTab(tab) {
|
||||
//$('.navbar>a').removeClass('activenav');
|
||||
$('.navbar').find('.activenav').removeClass('activenav');
|
||||
$('#' + tab.id).addClass('activenav');
|
||||
|
||||
//$('#mainDiv>div').removeClass('activetab').addClass('inactivetab');
|
||||
$('.tabParent.activeTab').removeClass('activeTab');
|
||||
//$('#' + $(tab).attr('data-div')).removeClass('inactivetab').addClass('activetab');
|
||||
$('#' + $(tab).attr('data-div')).parent().addClass('activeTab');
|
||||
|
||||
Cookies.set('activeTab', tab.id, { 'sameSite': 'strict' });
|
||||
}
|
||||
function handleClick(checkbox) {
|
||||
Cookies.set(checkbox.id, checkbox.checked, { 'sameSite': 'strict' });
|
||||
|
||||
switch (checkbox.id) {
|
||||
/*case 'showBreakevenLine':
|
||||
redrawAllSharesCharts();
|
||||
break;*/
|
||||
case 'displayAsPercent':
|
||||
redrawAllSharesCharts();
|
||||
break;
|
||||
case 'excludeNoHoldings':
|
||||
createSharesTable();
|
||||
redrawAllSharesCharts();
|
||||
break;
|
||||
/*case 'showPreviousHoldings':
|
||||
redrawAllSharesCharts();
|
||||
break;*/
|
||||
case 'groupBySymbol':
|
||||
$("#tbMainHoldings").html(''); //Empty the table body to make sure no duplicate rows are created
|
||||
//updateHoldingsTable();
|
||||
tablesUpdateTimings.updateNeeded = true;
|
||||
tablesUpdateTimings.lastUpdate = 0;
|
||||
break;
|
||||
case 'hideEmptyAccounts':
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script type="module">
|
||||
import { getInstruments, refreshHistoryChart, showModalDialog_AddInstrument, showModalDialog_AddHolding, showModalDialog_FullScreenChart, showModalDialog_SoldHolding } from "./scripts/SharePrices.js";
|
||||
importedFunctions = {
|
||||
showModalDialog_AddInstrument: showModalDialog_AddInstrument,
|
||||
showModalDialog_AddHolding: showModalDialog_AddHolding,
|
||||
showModalDialog_FullScreenChart: showModalDialog_FullScreenChart,
|
||||
refreshHistoryChart: refreshHistoryChart,
|
||||
showModalDialog_SoldHolding: showModalDialog_SoldHolding
|
||||
}
|
||||
|
||||
function initPage() {
|
||||
let c = Cookies.get('activeTab');
|
||||
let t = $('#' + c);
|
||||
@ -167,45 +218,6 @@
|
||||
|
||||
getInstruments();
|
||||
}
|
||||
function showTab(tab) {
|
||||
//$('.navbar>a').removeClass('activenav');
|
||||
$('.navbar').find('.activenav').removeClass('activenav');
|
||||
$('#' + tab.id).addClass('activenav');
|
||||
|
||||
//$('#mainDiv>div').removeClass('activetab').addClass('inactivetab');
|
||||
$('.tabParent.activeTab').removeClass('activeTab');
|
||||
//$('#' + $(tab).attr('data-div')).removeClass('inactivetab').addClass('activetab');
|
||||
$('#' + $(tab).attr('data-div')).parent().addClass('activeTab');
|
||||
|
||||
Cookies.set('activeTab', tab.id, {'sameSite': 'strict'});
|
||||
}
|
||||
function handleClick(checkbox) {
|
||||
Cookies.set(checkbox.id, checkbox.checked, {'sameSite': 'strict'});
|
||||
|
||||
switch (checkbox.id) {
|
||||
/*case 'showBreakevenLine':
|
||||
redrawAllSharesCharts();
|
||||
break;*/
|
||||
case 'displayAsPercent':
|
||||
redrawAllSharesCharts();
|
||||
break;
|
||||
case 'excludeNoHoldings':
|
||||
createSharesTable();
|
||||
redrawAllSharesCharts();
|
||||
break;
|
||||
/*case 'showPreviousHoldings':
|
||||
redrawAllSharesCharts();
|
||||
break;*/
|
||||
case 'groupBySymbol':
|
||||
$("#tbMainHoldings").html(''); //Empty the table body to make sure no duplicate rows are created
|
||||
//updateHoldingsTable();
|
||||
tablesUpdateTimings.updateNeeded = true;
|
||||
tablesUpdateTimings.lastUpdate = 0;
|
||||
break;
|
||||
case 'hideEmptyAccounts':
|
||||
break;
|
||||
}
|
||||
}
|
||||
$(document).ready(initPage());
|
||||
</script>
|
||||
</body>
|
||||
|
@ -87,7 +87,6 @@
|
||||
<Content Include="icons\Breakeven_Off.png" />
|
||||
<Content Include="icons\Breakeven.png" />
|
||||
<Content Include="icons\favicon.ico" />
|
||||
<Content Include="FlotTest.html" />
|
||||
<Content Include="HtmlPage1.html" />
|
||||
<Content Include="icons\Bin.png" />
|
||||
<Content Include="icons\Cog.png" />
|
||||
@ -246,24 +245,26 @@
|
||||
<Content Include="scripts\highcharts_9.3.1\modules\wordcloud.src.js" />
|
||||
<Content Include="scripts\highcharts_9.3.1\modules\xrange.js" />
|
||||
<Content Include="scripts\highcharts_9.3.1\modules\xrange.src.js" />
|
||||
<Content Include="scripts\jquery-3.5.1.min.js" />
|
||||
<Content Include="scripts\jquery-ui.min.js" />
|
||||
<Content Include="scripts\jquery.flot.axislabels.js" />
|
||||
<Content Include="scripts\jquery.flot.crosshair.js" />
|
||||
<Content Include="scripts\jquery.flot.downsample.js" />
|
||||
<Content Include="scripts\jquery.flot.js" />
|
||||
<Content Include="scripts\jquery.flot.pie.js" />
|
||||
<Content Include="scripts\jquery.flot.selection.min.js" />
|
||||
<Content Include="scripts\jquery.flot.time.min.js" />
|
||||
<Content Include="scripts\jquery.flot.tooltip.js" />
|
||||
<Content Include="scripts\jquery.marquee.min.js" />
|
||||
<Content Include="scripts\jquery\jquery-3.5.1.min.js" />
|
||||
<Content Include="scripts\jquery\jquery-ui.min.js" />
|
||||
<Content Include="scripts\flot\jquery.flot.axislabels.js" />
|
||||
<Content Include="scripts\flot\jquery.flot.crosshair.js" />
|
||||
<Content Include="scripts\flot\jquery.flot.downsample.js" />
|
||||
<Content Include="scripts\flot\jquery.flot.js" />
|
||||
<Content Include="scripts\flot\jquery.flot.pie.js" />
|
||||
<Content Include="scripts\flot\jquery.flot.selection.min.js" />
|
||||
<Content Include="scripts\flot\jquery.flot.time.min.js" />
|
||||
<Content Include="scripts\flot\jquery.flot.tooltip.js" />
|
||||
<Content Include="scripts\jquery\jquery.marquee.min.js" />
|
||||
<Content Include="scripts\js.cookie-2.2.1.min.js" />
|
||||
<Content Include="scripts\SharePrices.js" />
|
||||
<Content Include="scripts\SharePrices_Charts.js" />
|
||||
<Content Include="scripts\tablesorter\dragtable.mod.css" />
|
||||
<Content Include="scripts\tablesorter\filter.formatter.css" />
|
||||
<Content Include="scripts\tablesorter\highlights.css" />
|
||||
<Content Include="scripts\tablesorter\jquery.tablesorter.js" />
|
||||
<Content Include="scripts\tablesorter\jquery.tablesorter.widgets.js" />
|
||||
<Content Include="scripts\SharePrices_Common.js" />
|
||||
<Content Include="scripts\tablesorter\theme.black-ice.css" />
|
||||
<Content Include="scripts\tablesorter\theme.blue.css" />
|
||||
<Content Include="scripts\tablesorter\theme.bootstrap.css" />
|
||||
|
File diff suppressed because it is too large
Load Diff
1228
Websites/SharePrices/SharePrices/scripts/SharePrices_Charts.js
Normal file
1228
Websites/SharePrices/SharePrices/scripts/SharePrices_Charts.js
Normal file
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,38 @@
|
||||
export var timespans = {
|
||||
oneSecond: 1000,
|
||||
oneMinute: 60 * 1000,
|
||||
oneHour: 60 * 60 * 1000,
|
||||
oneDay: 24 * 60 * 60 * 1000,
|
||||
oneWeek: 7 * 24 * 60 * 60 * 1000,
|
||||
oneMonth: 31 * 24 * 60 * 60 * 1000 };
|
||||
|
||||
export function getProfitOrLoss(BasePrice, CurrentPrice, ShowPercent) {
|
||||
//let priceMovement = (CurrentPrice - BasePrice).toFixed(2);
|
||||
let priceMovement = (CurrentPrice - BasePrice).autoDP();
|
||||
let percentMovement = (((CurrentPrice / BasePrice) - 1) * 100).toFixed(1) + '%';
|
||||
if (percentMovement[0] == '-') percentMovement = percentMovement.substring(1);
|
||||
return '<span class="' + (CurrentPrice < BasePrice ? 'loss' : 'profit') + '">' + (CurrentPrice < BasePrice ? '' : '+') + priceMovement + (ShowPercent ? ' (' + percentMovement + ')' : '') + '</span>';
|
||||
}
|
||||
|
||||
export function generateAxisBreaks(data, maxGapSize, breakSize) {
|
||||
let breaks = [];
|
||||
if (data.length > 1) {
|
||||
let previousX = data[0][0];
|
||||
|
||||
for (let i = 1; i < data.length; i++) {
|
||||
if (data[i][0] != null && data[i][1] != null) {
|
||||
let currentX = data[i][0];
|
||||
if (currentX - previousX > maxGapSize) {
|
||||
let newBreak = {
|
||||
from: previousX,
|
||||
to: currentX,
|
||||
breakSize: breakSize
|
||||
};
|
||||
breaks.push(newBreak);
|
||||
}
|
||||
previousX = currentX;
|
||||
}
|
||||
}
|
||||
}
|
||||
return breaks;
|
||||
}
|
Loading…
Reference in New Issue
Block a user