dev:web: chart.hamlet: reindent, simpler comment syntax
This commit is contained in:
Simon Michael
parent
fd0bf6f90d
commit
cb0a0fafa5
@ -2,21 +2,21 @@ $# If $ is the first character in a line, it must be \-escaped to hide it from h
|
|||||||
<label #register-chart-label style=""><br>
|
<label #register-chart-label style=""><br>
|
||||||
<div #register-chart style="height:150px; margin-bottom:1em; display:block;">
|
<div #register-chart style="height:150px; margin-bottom:1em; display:block;">
|
||||||
<script type=text/javascript>
|
<script type=text/javascript>
|
||||||
\$(document).ready(function() {
|
\$(document).ready(function() {
|
||||||
var $chartdiv = $('#register-chart');
|
var $chartdiv = $('#register-chart');
|
||||||
if ($chartdiv.is(':visible')) {
|
if ($chartdiv.is(':visible')) {
|
||||||
\$('#register-chart-label').text('#{charttitle}');
|
\$('#register-chart-label').text('#{charttitle}');
|
||||||
var seriesData = [
|
var seriesData = [
|
||||||
$forall (c,items) <- percommoditytxnreports
|
$forall (c,items) <- percommoditytxnreports
|
||||||
/* we render each commodity using two series:
|
// we render each commodity using two series:
|
||||||
* one with extra data points added to show a stepped balance line */
|
// one with extra data points added to show a stepped balance line
|
||||||
{
|
{
|
||||||
data: [
|
data: [
|
||||||
$forall i <- reverse items
|
$forall i <- reverse items
|
||||||
[
|
[
|
||||||
#{dayToJsTimestamp $ triDate i},
|
#{dayToJsTimestamp $ triDate i},
|
||||||
#{simpleMixedAmountQuantity $ triCommodityBalance c i}
|
#{simpleMixedAmountQuantity $ triCommodityBalance c i}
|
||||||
],
|
],
|
||||||
],
|
],
|
||||||
label: '#{shownull $ T.unpack c}',
|
label: '#{shownull $ T.unpack c}',
|
||||||
color: #{colorForCommodity c},
|
color: #{colorForCommodity c},
|
||||||
@ -29,20 +29,19 @@ $# If $ is the first character in a line, it must be \-escaped to hide it from h
|
|||||||
},
|
},
|
||||||
clickable: false,
|
clickable: false,
|
||||||
hoverable: false,
|
hoverable: false,
|
||||||
},
|
},
|
||||||
/* and one with the original data, showing one clickable, hoverable point per transaction */
|
// and one with the original data, showing one clickable, hoverable point per transaction
|
||||||
{
|
{
|
||||||
data: [
|
data: [
|
||||||
$forall i <- reverse items
|
$forall i <- reverse items
|
||||||
[
|
[
|
||||||
#{dayToJsTimestamp $ triDate i},
|
#{dayToJsTimestamp $ triDate i},
|
||||||
#{simpleMixedAmountQuantity $ triCommodityBalance c i},
|
#{simpleMixedAmountQuantity $ triCommodityBalance c i},
|
||||||
'#{showZeroCommodity $ triCommodityAmount c i}',
|
'#{showZeroCommodity $ triCommodityAmount c i}',
|
||||||
'#{showZeroCommodity $ triCommodityBalance c i}',
|
'#{showZeroCommodity $ triCommodityBalance c i}',
|
||||||
'#{concat $ intersperse "\\n" $ lines $ T.unpack $ showTransaction $ triOrigTransaction i}',
|
'#{concat $ intersperse "\\n" $ lines $ T.unpack $ showTransaction $ triOrigTransaction i}',
|
||||||
#{tindex $ triOrigTransaction i}
|
#{tindex $ triOrigTransaction i}
|
||||||
],
|
],
|
||||||
/* [] */
|
|
||||||
],
|
],
|
||||||
label: '',
|
label: '',
|
||||||
color: #{colorForCommodity c},
|
color: #{colorForCommodity c},
|
||||||
@ -52,104 +51,109 @@ $# If $ is the first character in a line, it must be \-escaped to hide it from h
|
|||||||
points: {
|
points: {
|
||||||
show: true,
|
show: true,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
]
|
];
|
||||||
//eslint-disable-next-line no-unused-vars
|
var plot = registerChart($chartdiv, seriesData);
|
||||||
function registerChart($container, series) {
|
plot.setSelection({ xaxis: { from: 500, to: 700 } }); // ?
|
||||||
// https://github.com/flot/flot/blob/master/API.md
|
\$chartdiv.bind("plotclick", registerChartClick);
|
||||||
return $container.plot(
|
\$chartdiv.bind("plotselected", registerChartSelect);
|
||||||
series,
|
};
|
||||||
{ /* general chart options */
|
});
|
||||||
xaxis: {
|
|
||||||
mode: "time",
|
//eslint-disable-next-line no-unused-vars
|
||||||
timeformat: "%Y/%m/%d",
|
function registerChart($container, series) {
|
||||||
},
|
// https://github.com/flot/flot/blob/master/API.md
|
||||||
selection: {
|
return $container.plot(
|
||||||
mode: "x"
|
series,
|
||||||
},
|
{
|
||||||
legend: {
|
xaxis: {
|
||||||
position: 'sw'
|
mode: "time",
|
||||||
},
|
timeformat: "%Y/%m/%d",
|
||||||
grid: {
|
},
|
||||||
markings: function () {
|
selection: {
|
||||||
var now = Date.now();
|
mode: "x"
|
||||||
return [
|
},
|
||||||
{
|
legend: {
|
||||||
xaxis: { to: now }, // past
|
position: 'sw'
|
||||||
yaxis: { to: 0 }, // <0
|
},
|
||||||
color: '#ffdddd',
|
grid: {
|
||||||
},
|
markings: function () {
|
||||||
{
|
var now = Date.now();
|
||||||
xaxis: { from: now }, // future
|
return [
|
||||||
yaxis: { from: 0 }, // >0
|
{
|
||||||
color: '#e0e0e0',
|
xaxis: { to: now }, // past
|
||||||
},
|
yaxis: { to: 0 }, // <0
|
||||||
{
|
color: '#ffdddd',
|
||||||
xaxis: { from: now }, // future
|
|
||||||
yaxis: { to: 0 }, // <0
|
|
||||||
color: '#e8c8c8',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
yaxis: { from: 0, to: 0 }, // =0
|
|
||||||
color: '#bb0000',
|
|
||||||
lineWidth:1
|
|
||||||
},
|
|
||||||
];
|
|
||||||
},
|
|
||||||
hoverable: true,
|
|
||||||
autoHighlight: true,
|
|
||||||
clickable: true,
|
|
||||||
},
|
|
||||||
/* https://github.com/krzysu/flot.tooltip */
|
|
||||||
tooltip: true,
|
|
||||||
tooltipOpts: {
|
|
||||||
xDateFormat: "%Y/%m/%d",
|
|
||||||
content:
|
|
||||||
function(label, x, y, flotitem) {
|
|
||||||
var data = flotitem.series.data[flotitem.dataIndex];
|
|
||||||
return data[3]+" balance on %x after "+data[2]+" posted by transaction:<pre>"+data[4]+"</pre>";
|
|
||||||
},
|
},
|
||||||
onHover: function(flotitem, $tooltipel) {
|
{
|
||||||
\$tooltipel.css('border-color',flotitem.series.color);
|
xaxis: { from: now }, // future
|
||||||
},
|
yaxis: { from: 0 }, // >0
|
||||||
|
color: '#e0e0e0',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
xaxis: { from: now }, // future
|
||||||
|
yaxis: { to: 0 }, // <0
|
||||||
|
color: '#e8c8c8',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
yaxis: { from: 0, to: 0 }, // =0
|
||||||
|
color: '#bb0000',
|
||||||
|
lineWidth:1
|
||||||
|
},
|
||||||
|
];
|
||||||
},
|
},
|
||||||
}
|
hoverable: true,
|
||||||
).data("plot");
|
autoHighlight: true,
|
||||||
}
|
clickable: true,
|
||||||
function registerChartClick(ev, pos, item) {
|
},
|
||||||
if (!item) {
|
// https://github.com/krzysu/flot.tooltip
|
||||||
return;
|
tooltip: true,
|
||||||
}
|
tooltipOpts: {
|
||||||
var targetselector = '#' + item.series.data[item.dataIndex][5];
|
xDateFormat: "%Y/%m/%d",
|
||||||
var $target = $(targetselector);
|
content:
|
||||||
if ($target.length) {
|
function(label, x, y, flotitem) {
|
||||||
window.location.hash = targetselector;
|
var data = flotitem.series.data[flotitem.dataIndex];
|
||||||
\$('html, body').animate({
|
return data[3]+" balance on %x after "+data[2]+" posted by transaction:<pre>"+data[4]+"</pre>";
|
||||||
scrollTop: $target.offset().top
|
},
|
||||||
}, 1000);
|
onHover: function(flotitem, $tooltipel) {
|
||||||
|
\$tooltipel.css('border-color',flotitem.series.color);
|
||||||
|
},
|
||||||
|
},
|
||||||
}
|
}
|
||||||
|
).data("plot");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle a click event on the chart.
|
||||||
|
function registerChartClick(ev, pos, item) {
|
||||||
|
if (!item) {
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
// Handle a selection (zoom) event on the chart.
|
var targetselector = '#' + item.series.data[item.dataIndex][5];
|
||||||
|
var $target = $(targetselector);
|
||||||
|
if ($target.length) {
|
||||||
|
window.location.hash = targetselector;
|
||||||
|
\$('html, body').animate({
|
||||||
|
scrollTop: $target.offset().top
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle a selection (zoom) event on the chart.
|
||||||
|
function registerChartSelect(ev, ranges) {
|
||||||
|
console.log("selected", ranges.xaxis.from, ranges.xaxis.to);
|
||||||
|
|
||||||
// This should pick good from/to dates based on the selected x-values, which is tricky to get right.
|
// This should pick good from/to dates based on the selected x-values, which is tricky to get right.
|
||||||
function registerChartSelect(ev, ranges) {
|
// Round down for the 'from' day:
|
||||||
console.log("selected", ranges.xaxis.from, ranges.xaxis.to);
|
var from = new Date(ranges.xaxis.from);
|
||||||
/* Round down for the 'from' day: */
|
// Round up for the 'to' day:
|
||||||
var from = new Date(ranges.xaxis.from);
|
var to = new Date(ranges.xaxis.to + (24 * 60 * 60 * 1000) - 1);
|
||||||
/* Round up for the 'to' day: */
|
var range =
|
||||||
var to = new Date(ranges.xaxis.to + (24 * 60 * 60 * 1000) - 1);
|
from.getFullYear() + "/" + (from.getMonth() + 1) + "/" + from.getDate() + "-" +
|
||||||
var range =
|
to.getFullYear() + "/" + (to.getMonth() + 1) + "/" + to.getDate();
|
||||||
from.getFullYear() + "/" + (from.getMonth() + 1) + "/" + from.getDate() + "-" +
|
var baselink = "@?{nodatelink}";
|
||||||
to.getFullYear() + "/" + (to.getMonth() + 1) + "/" + to.getDate();
|
if (baselink.endsWith("?q")) {
|
||||||
var baselink = "@?{nodatelink}";
|
document.location = baselink + "=date:" + range;
|
||||||
if (baselink.endsWith("?q")) {
|
} else {
|
||||||
document.location = baselink + "=date:" + range;
|
document.location = baselink + "%20date:" + range;
|
||||||
} else {
|
|
||||||
document.location = baselink + "%20date:" + range;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
var plot = registerChart($chartdiv, seriesData);
|
}
|
||||||
plot.setSelection({ xaxis: { from: 500, to: 700 } });
|
|
||||||
\$chartdiv.bind("plotclick", registerChartClick);
|
|
||||||
\$chartdiv.bind("plotselected", registerChartSelect);
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user