Split SharePrices.js, refined Total Holdings History chart (commit 2)

This commit is contained in:
Steve 2025-01-06 23:15:26 +00:00
parent e1281897a8
commit 882d721899
19 changed files with 1387 additions and 1526 deletions

View File

@ -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;">&nbsp;</div>
<div class="pcLabel">30%</div>
</td>
<td>
<div class="pcBackground" style="width:60px;">&nbsp;</div>
<div class="pcLabel">60%</div>
</td>
<td>
<div class="pcBackground" style="width:90px;">&nbsp;</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>

View File

@ -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>

View File

@ -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>

View File

@ -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

File diff suppressed because it is too large Load Diff

View File

@ -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;
}