openwisp / openwisp/netjsongraph.js

[feature] Use as much screen estate as possible on initial load

Open
#420 1 comment 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement
Dominant language
JavaScript
Stars
314
Forks
119
Avg merge
18h 17m
Merged PRs (30d)
15

Description

Consider the following examples:

1) Custom attributes example

Image

2) Wireguard VPN data coming from a test server

Image

Both graphs contain little amount of data, therefore when the page loads, it would be a lot better if the library could automatically zoom in as much as possible. E.g:

1. Custom attributes example - updated

Probably I excedeed the zoom a little, but it's just to give you the idea.

Image

2. Wireguard VPN data coming from a test server - updated

Image

I think it would be a lot better if the library could automatically load the page with the sizes shown in the second set of examples. To summarize:

  • On small charts, the library will zoom in and due to the changes in #419, the labels will be visible.
  • On big charts, the library will still try to use all the available screen estate but will probably not zoom in much or not at all, and due to the changes in #419 the labels shouldn't be visible.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Use the two pairs of attached custom-attributes and WireGuard examples as the visual reference, and inspect the graph's initial-load sizing and zoom behavior. Done means small charts use more available screen space while large charts avoid unnecessary zoom, with labels remaining consistent with the changes in #419.

Written by the indexing model from the issue text.

Assessment

Tech stack
d3, javascript
Domain
data-visualization, frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.