Add custom Gantt Date Range

[AlexMooney]

📑 Summary

Add dateRange to specify a custom range for a Gantt Chart.

Resolves #1530

📏 Design Decisions

Describe the way your implementation works or what design decisions you made if applicable.

• Remove all tasks which are completely outside of the custom range
• Force the x-range on the plot to match the custom range (though there might be some rounding)
• Allow setting an absolute range dateRange :2023-06-01, 2023-07-01
• Allow setting a relative range dateRange :today - 7d, today + 30d
  • I think I'll leave this to future PRs
• Allow setting only lower bound dateRange :2023-06-01
• Allow setting only upper bound dateRange :,2023-07-01 👈 kind of strange; proposals welcomed
• Tests for the range values
• Manual testing with some screen shots
  • I'm not a JS/TS dev and need some instructions for how to generate plots locally to do this part. 😅

Possible problems

• The dateRange is interpreted with the dateFormat, so if the former comes first, it'll can screw up the date parsing

📋 Tasks

Make sure you

• 📖 have read the contribution guidelines
• 💻 have added unit/e2e tests (if appropriate)
• 📓 have added documentation (if appropriate)
• 🔖 targeted develop branch

[codecov]

Codecov Report

Merging #4563 (41c61d0) into develop (db30f21) will decrease coverage by 17.18%.
The diff coverage is 100.00%.

Additional details and impacted files

@@             Coverage Diff              @@
##           develop    #4563       +/-   ##
============================================
- Coverage    75.61%   58.44%   -17.18%     
============================================
  Files          143       52       -91     
  Lines        16489     8732     -7757     
  Branches       518       18      -500     
============================================
- Hits         12468     5103     -7365     
+ Misses        3894     3629      -265     
+ Partials       127        0      -127     

Flag	Coverage Δ
e2e	?
unit	58.44% <100.00%> (+0.31%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
packages/mermaid/src/diagrams/gantt/ganttDb.js	78.53% <100.00%> (-5.25%)	⬇️

... and 137 files with indirect coverage changes

[sidharthv96]

Nice work!
Only few minor suggestions.

[sidharthv96]

Can you add the imgSnapshotTests, for the other scenarios of dateRange?

• Actual date
• Only start
• Only end

[AlexMooney]

Certainly, but how do these work? Where are the images produced so that I can check them? I suspect that without altering the tasks, the display is going to be messed up, with the task bars invading the margins, but I don't know how to produce any diagram output from this repo.

[sidharthv96]

To verify snapshots:

pnpm e2e
open cypress/snapshots

Can you also add this into the contribution docs if it's not present there?

[sidharthv96]

The current failure is from the new tests.

   1) should render with an end-only dateRange


  20 passing (43s)
  1 failing

  1) Gantt diagram
       should render with an end-only dateRange:
     CypressError: The following error originated from your application code, not from Cypress. It was caused by an unhandled promise rejection.

  > Invalid date: '' with date format: ' HH:mm:ss'

[sidharthv96]

@AlexMooney It would be nice to have this released. Please let us know if you're working on it.

[paldeep-singh]

I'd be keen to take this on as a first issue if you need someone to

[AlexMooney]

I'd be keen to take this on as a first issue if you need someone to

Hi @paldeep-singh feel free to take this over! Sorry for leaving this half-done, everyone. 🙇

[sidharthv96]

Hi @paldeep-singh feel free to take this over! Sorry for leaving this half-done, everyone. 🙇

No need for any apologies @AlexMooney, we're all doing this for free ❤️

[sidharthv96]

Work continued in #5220