slaesvuo/hledger
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix:web: dragging in chart now selects date ranges more accurately

Browse Source 
Eg, previously you couldn't select a range including transactions
at the rightmost edge of the chart.
This commit is contained in:
Simon Michael 2025-06-29 11:05:38 -07:00
parent cb0a0fafa5
commit de66e266f1
2 changed files with 19 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
hledger-web/Hledger/Web/Handler/RegisterR.hs
View File

@ -114,9 +114,9 @@ registerChartHtml q title percommoditytxnreports = $(hamletFile "templates/chart
shownull c = if null c then " " else c shownull c = if null c then " " else c
nodatelink = (RegisterR, [("q", T.unwords $ removeDates q)]) nodatelink = (RegisterR, [("q", T.unwords $ removeDates q)])
dayToJsTimestamp :: Day -> Integer -- | Makes a unix timestamp (milliseconds since epoch) corresponding to noon on the given date in UTC.
dayToJsTimestamp d = dayToUtcNoonTimestamp :: Day -> Integer
dayToUtcNoonTimestamp d =
read (formatTime defaultTimeLocale "%s" t) * 1000 -- XXX read read (formatTime defaultTimeLocale "%s" t) * 1000 -- XXX read
where where
t = UTCTime d (secondsToDiffTime 0) t = UTCTime d (secondsToDiffTime $ 12 * 60 * 60)

27
hledger-web/templates/chart.hamlet
View File

@ -14,7 +14,7 @@ $# If $ is the first character in a line, it must be \-escaped to hide it from h
data: [ data: [
$forall i <- reverse items $forall i <- reverse items
[ [
#{dayToJsTimestamp $ triDate i}, #{dayToUtcNoonTimestamp $ triDate i},
#{simpleMixedAmountQuantity $ triCommodityBalance c i} #{simpleMixedAmountQuantity $ triCommodityBalance c i}
], ],
], ],
@ -35,7 +35,7 @@ $# If $ is the first character in a line, it must be \-escaped to hide it from h
data: [ data: [
$forall i <- reverse items $forall i <- reverse items
[ [
#{dayToJsTimestamp $ triDate i}, #{dayToUtcNoonTimestamp $ 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}',
@ -125,9 +125,7 @@ $# If $ is the first character in a line, it must be \-escaped to hide it from h
// Handle a click event on the chart. // Handle a click event on the chart.
function registerChartClick(ev, pos, item) { function registerChartClick(ev, pos, item) {
if (!item) { if (!item) { return; }
return;
}
var targetselector = '#' + item.series.data[item.dataIndex][5]; var targetselector = '#' + item.series.data[item.dataIndex][5];
var $target = $(targetselector); var $target = $(targetselector);
if ($target.length) { if ($target.length) {
@ -142,14 +140,19 @@ $# If $ is the first character in a line, it must be \-escaped to hide it from h
function registerChartSelect(ev, ranges) { function registerChartSelect(ev, ranges) {
console.log("selected", ranges.xaxis.from, ranges.xaxis.to); 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. // Reconstruct from/to dates carefully based on the selected x-values.
// Round down for the 'from' day: // Those x values are unix timestamps (milliseconds since epoch) enclosing the data points' timestamps.
// Those are generated by dayToJsTimestamp, and are UTC times representing the transaction dates.
var from = new Date(ranges.xaxis.from); var from = new Date(ranges.xaxis.from);
// Round up for the 'to' day: var fromy = from.getUTCFullYear();
var to = new Date(ranges.xaxis.to + (24 * 60 * 60 * 1000) - 1); var fromm = from.getUTCMonth() + 1;
var range = var fromd = from.getUTCDate();
from.getFullYear() + "/" + (from.getMonth() + 1) + "/" + from.getDate() + "-" + var to = new Date(ranges.xaxis.to + 1 * 24 * 60 * 60 * 1000);
to.getFullYear() + "/" + (to.getMonth() + 1) + "/" + to.getDate(); var toy = to.getUTCFullYear();
var tom = to.getUTCMonth() + 1;
var tod = to.getUTCDate();
var range = fromy + "/" + fromm + "/" + fromd + "-" + toy + "/" + tom + "/" + tod;
var baselink = "@?{nodatelink}"; var baselink = "@?{nodatelink}";
if (baselink.endsWith("?q")) { if (baselink.endsWith("?q")) {
document.location = baselink + "=date:" + range; document.location = baselink + "=date:" + range;