From cb27976453dffb38da756744296d46f65d723020 Mon Sep 17 00:00:00 2001 From: Justin Meyer Date: Mon, 3 Mar 2025 21:27:47 -0600 Subject: [PATCH] fixing the scatter plot timing --- public/canjs/reports/gantt-grid.js | 2 ++ public/canjs/reports/scatter-timeline.js | 28 +++++++++++++++---- .../react/ViewReports/ViewReportsWrapper.tsx | 2 +- public/timeline-report.js | 2 +- public/utils/date/date-helpers.js | 17 +++++++++++ public/utils/date/quarters-and-months.js | 3 ++ 6 files changed, 47 insertions(+), 7 deletions(-) diff --git a/public/canjs/reports/gantt-grid.js b/public/canjs/reports/gantt-grid.js index d7c04720..33f44fc6 100644 --- a/public/canjs/reports/gantt-grid.js +++ b/public/canjs/reports/gantt-grid.js @@ -690,6 +690,8 @@ function getPositionsFromWork({ firstDay, lastDay }, work) { startExtends, // is the start before the first day endExtends, // is the end after the last day style: { + // we make the day a full day wider, but this doesn't account for time zone shifts + // to handle this, we might want to use dates or move to integers width: Math.max(((end + DAY_IN_MS - start) / totalTime) * 100, 0) + "%", marginLeft: "max(" + ((start - firstDay) / totalTime) * 100 + "%, 1px)", }, diff --git a/public/canjs/reports/scatter-timeline.js b/public/canjs/reports/scatter-timeline.js index b9aa3588..e7524c95 100644 --- a/public/canjs/reports/scatter-timeline.js +++ b/public/canjs/reports/scatter-timeline.js @@ -6,11 +6,13 @@ import { makeGetChildrenFromReportingIssues } from "../../jira/rollup/rollup.js" import {mergeStartAndDueData} from "../../jira/rollup/dates/dates"; import {roundDateByRoundToParam} from "../routing/utils/round.js"; +import { getDaysInMonth } from "../../utils/date/days-in-month.js"; +import { oneDayLater } from "../../utils/date/date-helpers.js"; const DAY = 1000*60*60*24; export class ScatterTimeline extends StacheElement { static view = ` -
{{# for(quarter of this.quartersAndMonths.quarters) }} @@ -80,6 +82,18 @@ export class ScatterTimeline extends StacheElement { return getQuartersAndMonths(firstEndDate, due || new Date( new Date().getTime() + DAY*30)); } + get gridColumnsCSS() { + let columnCSS = ""; + // repeat({{this.quartersAndMonths.months.length}}, [col] 1fr) + + columnCSS += this.quartersAndMonths.months + .map(({ date }) => { + return getDaysInMonth(date.getYear(), date.getMonth() + 1) + "fr"; + }) + .join(" "); + + return columnCSS; + } get todayMarginLeft() { const { firstDay, lastDay } = this.quartersAndMonths; const totalTime = (lastDay - firstDay); @@ -103,7 +117,7 @@ export class ScatterTimeline extends StacheElement { const { firstDay, lastDay } = this.quartersAndMonths; const totalTime = (lastDay - firstDay); const issuesWithDates = this.primaryIssuesOrReleases.filter( issue => issue.rollupDates.due ); - + console.log({firstDay, lastDay, totalTime}); const rows = calculate({ widthOfArea: this.visibleWidth, issues: issuesWithDates, @@ -115,7 +129,7 @@ export class ScatterTimeline extends StacheElement { Object.assign(div.style, { position: "absolute", //transform: "translate(-100%, 0)", - padding: "2px 4px 2px 4px", + padding: "2px 2px 2px 6px", zIndex: "100", top: "4px", background: "rgba(255,255,255, 0.6)" @@ -218,18 +232,22 @@ function calculate({widthOfArea = 1230, issues, makeElementForIssue, firstDay, t const issueUIData = issues.map( issue => { - const roundedDueDate = roundDateByRoundToParam.end(issue.rollupStatuses.rollup.due); + // end dates need to be shifted one day later (see miro) + const roundedDueDate = oneDayLater( roundDateByRoundToParam.end(issue.rollupStatuses.rollup.due) ); const element = makeElementForIssue(issue), width = getWidth(element), widthInPercent = width * 100 / widthOfArea, + // from the left boundary to the right of the issue rightPercentEnd = Math.ceil( (roundedDueDate - firstDay) / totalTime * 100), + // from the right boundary to the right of the issue endPercentFromRight = ( (totalTime - (roundedDueDate- firstDay)) / totalTime * 100), leftPercentStart = rightPercentEnd - widthInPercent; element.setAttribute("measured-width", width); + element.setAttribute("width-p", widthInPercent); element.setAttribute("left-p", leftPercentStart); - element.setAttribute("right-p", leftPercentStart); + element.setAttribute("right-p", rightPercentEnd); return { roundedDueDate, issue, diff --git a/public/react/ViewReports/ViewReportsWrapper.tsx b/public/react/ViewReports/ViewReportsWrapper.tsx index d40c98be..df96fd4e 100644 --- a/public/react/ViewReports/ViewReportsWrapper.tsx +++ b/public/react/ViewReports/ViewReportsWrapper.tsx @@ -42,7 +42,7 @@ const ViewReportsWrapper: FC = (viewReportProps) => { } > }> -
+
diff --git a/public/timeline-report.js b/public/timeline-report.js index 8a3bfa71..5386598b 100644 --- a/public/timeline-report.js +++ b/public/timeline-report.js @@ -88,7 +88,7 @@ export class TimelineReport extends StacheElement { allIssuesOrReleases:from="this.rolledupAndRolledBackIssuesAndReleases"> {{/ }} -
+
diff --git a/public/utils/date/date-helpers.js b/public/utils/date/date-helpers.js index ed7fc746..31b18f1e 100644 --- a/public/utils/date/date-helpers.js +++ b/public/utils/date/date-helpers.js @@ -178,3 +178,20 @@ export function getFirstDateFrom(initiatives, property) { .map((init) => parseDateISOString(init[property][START_DATE_KEY])); return values.length ? new Date(Math.min(...values)) : undefined; } + + +export function oneDayEarlier(date) { + const newDate = new Date(date); + + // Subtract one day from the date. + newDate.setDate(newDate.getDate() - 1); + return newDate; +} + +export function oneDayLater(date) { + const newDate = new Date(date); + + // Subtract one day from the date. + newDate.setDate(newDate.getDate() + 1); + return newDate; +} \ No newline at end of file diff --git a/public/utils/date/quarters-and-months.js b/public/utils/date/quarters-and-months.js index 6813e210..fe8d4a57 100644 --- a/public/utils/date/quarters-and-months.js +++ b/public/utils/date/quarters-and-months.js @@ -1,3 +1,6 @@ + + +// how many months apart function monthDiff(dateFromSring, dateToString) { const dateFrom = new Date(dateFromSring); const dateTo = new Date(dateToString);