Circular heatmap is not responsive

[vbakke]

Try opening https://dsomm.owasp.org/circular-heatmap on a mobile, or a smaller sized browser. It becomes very hard to use.

I have created an experimental branch on https://dsomm.pages.dev/ with a couple of suggestions:

• Since the circular heatmap gives the overview, and is part of the DSOMM logo, I think this should be the main page. I have moved it up on the menu, and renamed it 'Overview'
• The heatmap page is a lot more responsive, and works on different screen sizes
• The heatmap indicates with a "cursor" which sector is the selected one
• The menu starts in an open state (for new users)
  • Closing the menu closes the menu on revisit
• The order of the teams is the same in the filters as on the activity card
  • The order is decided by the meta.yaml, not generated.yaml.
  • The teams in meta.yaml takes precedence over the teams in localstorage, and generated.yaml.
• The filters can be hidden in full screen mode, it is partly hidden by the 'Fork me on GitHub'. But hiding them is more important on mobile (where I have remove the banner all together, as it was covering important UI elements).
• Calculating the heights etc for the sectors have been corrected.
• Segment labels have been centered

(Ignore the yellow background. it is to that I don't fix them that easily.)

I have more suggestions for improvements, but have not implemented them anywhere yet.

@wurstbrot, please comment on whether you like some of the suggestions. And I can port them to new pull requests, or alter them if I miss something important.

[wurstbrot]

Hi @vbakke,

thank you for your effort.

• Since the circular heatmap gives the overview, and is part of the DSOMM logo, I think this should be the main page. I have moved it up on the menu, and renamed it 'Overview'

It depends how DSOMM is used. I think more often the table is used. Unfortunately, I am currently not having statistics about usage to proof which page is used more often.

• The heatmap page is a lot more responsive, and works on different screen sizes

I did some tests in the browser with different simulate phones, much better than beforehand! Thank you! Looking forward to your PR.

• The heatmap indicates with a "cursor" which sector is the selected one

Looks good, happy to get a PR.

• The order of the teams is the same in the filters as on the activity card

Looks good, happy to get a PR.

• The order is decided by the meta.yaml, not generated.yaml.

Looks good, happy to get a PR.

• The teams in meta.yaml takes precedence over the teams in localstorage, and generated.yaml.

Looks good, happy to get a PR.

• The filters can be hidden in full screen mode, it is partly hidden by the 'Fork me on GitHub'. But hiding them is more important on mobile (where I have remove the banner all together, as it was covering important UI elements).

Looks good, happy to get a PR.

Kind regards
Timo

[wurstbrot]

Since the circular heatmap gives the overview, and is part of the DSOMM logo, I think this should be the main page. I have moved it up on the menu, and renamed it 'Overview'

If you use DSOMM mainly to show progress of your maturity over different teams, it would be good. I think a feature toggle to configure the main page would work here.

[vbakke]

Sure. We have meta.yaml and environments.ts. The yaml requires asynchronous loading before it can take effect, while the environment is compiled and ready from the very beginning in the browser.

I don't disagree that the matrix is the page that many people use the most. But I'd like to consider both experienced users, and the ones that are testing out if DSOMM is something for their organization.

In a business intelligence approach (BI world), it is recommended to start with the top view, before drilling down into the details. The page with circular sectors is much more "brandable" (if that is a word), than the matrix. I think the sectors will stick to people's minds more.

It will not be hard for the experienced users to bookmark the Matrix, rather than the homepage. Or just type a little extra in the address bar to jump straight to the matrix.

Another approach
Or, we can use localStorage to save which page was last presented.
The / route will redirect to the page used previously. If nothing is in localStorage, we redirect to the heatmap.

Though, this might be a bit overkill, for something like this.

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. 📆 It will be closed automatically in one week if no further activity occurs.

[vbakke]

hey, git bot, calm down. didn't you see that a PR was posted just a couple of days a ago...?

[vbakke]

comment to keep the stale-bot happy

[vbakke]

ignore this comment, unless you are the stale bot

[vbakke]

Merged. Close issue