Merge pull request #356 from bitovi/scatter-cleanup

fixing the scatter plot timing

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)",
     },

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 = `
-        <div style="display: grid; grid-template-columns: repeat({{this.quartersAndMonths.months.length}}, auto); grid-template-rows: auto auto repeat({{this.rows.length}}, auto)"
+        <div style="display: grid; grid-template-columns: {{this.gridColumnsCSS}}; grid-template-rows: auto auto repeat({{this.rows.length}}, auto)"
         class='p-2 mb-10'>
 
             {{# 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,

public/react/ViewReports/ViewReportsWrapper.tsx

@@ -42,7 +42,7 @@ const ViewReportsWrapper: FC<ViewReportsWrapperProps> = (viewReportProps) => {
             }
           >
             <Suspense fallback={<ViewReportSkeleton {...viewReportProps} />}>
-              <div className="absolute top-0 left-0 right-0 bottom-0 bg-white z-[100]">
+              <div className="absolute top-0 left-0 right-0 bottom-0 bg-white z-[1000]">
                 <ViewReports {...viewReportProps} />
               </div>
             </Suspense>

public/timeline-report.js

@@ -88,7 +88,7 @@ export class TimelineReport extends StacheElement {
               allIssuesOrReleases:from="this.rolledupAndRolledBackIssuesAndReleases"></status-report>
           {{/ }}
 
-          <div class='p-2 sticky bottom-0 bg-white z-[99]'>
+          <div class='p-2 sticky bottom-0 bg-white z-[200]'>
             <div id='status-keys' on:inserted='this.attachStatusKeys()'></div>
           </div>
 

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

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);