Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Gantt milestones #788

Merged
merged 10 commits into from
Jun 9, 2019
Merged

Gantt milestones #788

merged 10 commits into from
Jun 9, 2019

Conversation

gijswijs
Copy link
Contributor

@gijswijs gijswijs commented Feb 1, 2019

This is my first PR for this project, so be gentle.

I've added the possibility to mark tasks in a Gantt chart as milestones.
What this does is the following:

  • It makes the rect representing the task exactly square, with both sides being the theBarHeight
  • It changes the x-coordinate, so that the rect is smack in the middle of what would have been the rectangular representing the task.
  • It adjusts the position of the text label accordingly
  • It adds a class to both the rect and the text label
  • The scss rotates the square, and scales it down slightly so that it looks like a diamond, which seems to be the standard icon for milestones
  • the scss makes the text label italics

It's backwards compatible, so if the milestone tag isn't there, it should work as expected.
Milestones with a task duration of several days don't really make sense, but it would still work. You just get a lot of padding to the left and right. This also happens when the timescale is very wide, like so:

image

@gijswijs
Add milestone to ganttDb
a3eef72
@gijswijs
Add custom rendering of milestone tasks
48f8c3f 
If a task is a milestone, the rect shape will be square in the center of
the original width of the rectangular calculated if it weren't a
milestone. The placement of the label text is adjusted accordingly.
Both the rect and the text get a 'milestone' and 'milestoneText' class
accordingly.
The scss rotates the square and scales it a bit down, so that it's a
diamond, which appears to be the defacto standard for milestone icons.
The label text is put in italics.
The rotational transform is done in the scss, so that it's easy for
users to create their own milestone icon-style.
@gijswijs
Fix lint issues
5565d36
@gijswijs gijswijs mentioned this pull request Feb 1, 2019
Closed
@coveralls
Copy link

coveralls commented Feb 1, 2019 •
edited
Loading

Pull Request Test Coverage Report for Build 730

  • 13 of 46 (28.26%) changed or added relevant lines in 2 files are covered.
  • 6 unchanged lines in 1 file lost coverage.
  • Overall coverage increased (+0.05%) to 54.305%
Changes Missing Coverage Covered Lines Changed/Added Lines %
src/diagrams/gantt/ganttDb.js 13 15 86.67%
src/diagrams/gantt/ganttRenderer.js 0 31 0.0%
Files with Coverage Reduction New Missed Lines %
src/diagrams/gantt/ganttRenderer.js 6 1.82%
Totals Coverage Status
Change from base Build 716: 0.05%
Covered Lines: 2058
Relevant Lines: 3757
💛 - Coveralls

@gijswijs
Extract tag parsing in separate function
9dbb376
@gijswijs
Replace multiple returns with single return
901df24
@gijswijs
Refactor tag parsing of tags
f903090 
The allowed tags are now a const at the top of the code.
Adding a tag there, automatically assigns the property to the
javascript object, if the tag is present in the data.
@gijswijs
Add tests for all possible task tags
c84c154
@gijswijs
Use it.each in test cases to prevent code repetition
a211b6d
@gijswijs
Remove MomentJS dependency from Gantt Jest test cases
f912f85 
To reduce the dependencies of the Jest test cases, the moment dates in
both Jest test files are replaced with native javascript. Also the
physical file gantt.spec.js is moved to be in the same folder as
gantt.js
@gijswijs
Refactor ganttDb tests
7ca9df9
@pgebheim
Copy link

What are the chances this can be merged?

@knsv knsv merged commit 7ca9df9 into mermaid-js:master Jun 9, 2019
@knsv
Copy link
Collaborator

knsv commented Jun 9, 2019

Thanks for this Gijs! I just merged this. Would you add some description for this in the docs? I am sure many will want to use milestones but wont know about them otherwise. Also, since you made the pull request I have added an e2e section. It is still WIP but if you add a test for the milestones it will make sure that they will render fine going forward.

Its is quite easy, one just adds a diagram and an image snapshot will be made and if it suddenly renders differently the test will break. Its WIP as images depend on environment so snapshots generated in macos does not match snapshots generated in linux dure to fons ans anti-aliasing ans such. Still they help me when I merge pull requests. If thats to much work just send me a gantt you think is suitable for the test as text to [email protected]

And... thanks for you effort!

@knsv knsv mentioned this pull request Jun 9, 2019
Merged
@knsv
Copy link
Collaborator

knsv commented Jun 9, 2019

Also... Had a quite tough merge between pr #804 and #788. Maybe you could help checking that nothing broke?

@gijswijs
Copy link
Contributor Author

I'm proud as a small child now that you have merged this. Will look into documentation and e2e testing later this week (hopefully). I'll create a separate PR when done.

@kut kut mentioned this pull request May 12, 2020
Closed
mgenereu pushed a commit to mgenereu/mermaid that referenced this pull request Jun 25, 2022
@sidharthv96
Merge pull request mermaid-js#788 from mermaid-js/dependabot/npm_and_…
927e0e3 
…yarn/develop/cypress-9.6.1

chore(deps-dev): bump cypress from 9.6.0 to 9.6.1
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@barskern barskern barskern left review comments

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@gijswijs @coveralls @pgebheim @knsv @barskern