Bar Graph Vertical labels on mobile #50

New Issue

snedadah · 2022-09-03T16:18:53-04:00

snedadah commented

2022-09-03 16:18:53 -04:00

The labels on the bar graph vertical get squished together on mobile.

Maybe we should have them alternate vertically to solve this?

The labels on the bar graph vertical get squished together on mobile. Maybe we should have them alternate vertically to solve this? ![image](/attachments/48ea60a7-f120-4cd3-919e-d9b629124c0e)

image.png

68 KiB

snedadah changed title from ~~Fix Bar Graph Vertical labels on mobile~~ to [Bug] Bar Graph Vertical labels on mobile

2022-09-03 16:19:09 -04:00

a258wang changed title from ~~[Bug] Bar Graph Vertical labels on mobile~~ to Bar Graph Vertical labels on mobile

2022-09-08 02:36:51 -04:00

a258wang added the

Bug

label 2022-09-08 02:36:55 -04:00

a258wang commented

2022-09-08 02:38:04 -04:00

Ideas discussed during Sept. 7 sitdown:

Alternating labels up/down
Fixed min-width for graphs (users on smaller screens have to scroll)
Use horizontal graphs (for bars)
Horizontal scroll on labels (works well for horizontal graphs)
Diagonal labels

@e26chiu to investigate these solutions and decide which offers the best balance between appearance and implementation difficulty.

Ideas discussed during Sept. 7 sitdown: * Alternating labels up/down * Fixed min-width for graphs (users on smaller screens have to scroll) * Use horizontal graphs (for bars) * Horizontal scroll on labels (works well for horizontal graphs) * Diagonal labels @e26chiu to investigate these solutions and decide which offers the best balance between appearance and implementation difficulty.

e26chiu was assigned by a258wang

2022-09-08 02:38:17 -04:00

e26chiu commented

2022-10-08 15:17:47 -04:00

Diagonal Labels Example

The labels are rotated at -45 degrees.

tickLabelProps={(value, index) => {
   return {
     angle: -45,
   };
}

Note: The graph has a certain height which is why it crops part of the label at the bottom. (I was also messing around with dx and dy to position it well visually.
A restriction that this implementation may have is the length of the labels which we do not control. Long labels and words can result in overflow. It's also harder to determine the breakpoints to rotate the labels.

Vertical Labels Example

The labels are rotate at 90 degrees. It has a simpler implementation than the previous one:

tickLabelProps={(value, index) => {
   return {
     writingMode: "vertical-lr",
   };
}

It suffers from the same problem as the Diagonal Labels example.

Fixed Min-width for graphs && Horizontal scrolls on labels Example

The reason both of these ideas got merged is because they both involve scrolling.
The overflow scroll is implemented by adding this style to the 2nd internal wrapper of the ComponentWrapper component:

const overflowScroll = {
   overflow: "scroll",
};

return (
    <div
      className={`
      ${alignClasses[align]} 
      ${noBackground ? styles.noBackground : ""}
      `}
    >
      <div className={styles.internalWrapper}>
        <h3>{heading}</h3>
        <p>{bodyText}</p>
      </div>
      <div className={styles.internalWrapper} style={overflowScroll}>
        {children}
      </div>
    </div>
);

To set a minimum width, I set a constant (that could be added as a prop) of the minimum width a graph should have:

const MIN_WIDTH = 500; // this might be added to props, differ per graph

I removed width from the const props we set at the beginning and set it by itself:

const width = props.width < MIN_WIDTH ? MIN_WIDTH : props.width;

This one doesn't have any complications as it preserves the graph at a minimum width where the labels can be clearly displayed (depending on how we set it, we could change the MIN_WIDTH variable depending on the graph we want to display)
Note that certain labels are just long, so they can still overflow.

Alternating labels up/down Example

tickLabelProps={(value, index) => {
  return {
    dy: index % 2 == 0 ? `-0.25rem` : `25px`,
  };
}}

This one also gets cropped because of the fixed height of the SVG. The use of rem doesn't really change how the labels are positioned so I used px instead.

Use horizontal graphs (for bars)

We already have horizontal bar graphs.

Conclusion

I think it would be interesting if we use a combination of min width graph + overflow scroll + one of the alternating/rotating labels solutions for the responsive vertical bar graph. The horizontal bar graph is already given (if we want to avoid using vertical bar graphs). We cannot avoid the cropping of the labels if they are rotated or shifted down. To avoid this problem, we can make the SVGs bigger in height then use the container (ComponentWrapper) to crop it with overflow: scroll.

### Diagonal Labels Example ![image](/attachments/56d4629e-5d15-4c55-9beb-27dabbfd7411) The labels are rotated at -45 degrees. ```html tickLabelProps={(value, index) => { return { angle: -45, }; } ``` Note: The graph has a certain height which is why it crops part of the label at the bottom. (I was also messing around with `dx` and `dy` to position it well visually. A restriction that this implementation may have is the length of the labels which we do not control. Long labels and words can result in overflow. It's also harder to determine the breakpoints to rotate the labels. ### Vertical Labels Example ![image](/attachments/7c851ce9-9df8-4529-8644-1bd52e2009a3) The labels are rotate at 90 degrees. It has a simpler implementation than the previous one: ```html tickLabelProps={(value, index) => { return { writingMode: "vertical-lr", }; } ``` It suffers from the same problem as the Diagonal Labels example. ### Fixed Min-width for graphs && Horizontal scrolls on labels Example ![image](/attachments/6b696133-205f-4d89-b66b-28f755b71a9d) The reason both of these ideas got merged is because they both involve scrolling. The overflow scroll is implemented by adding this style to the 2nd internal wrapper of the `ComponentWrapper` component: ```javascript const overflowScroll = { overflow: "scroll", }; return ( <div className={` ${alignClasses[align]} ${noBackground ? styles.noBackground : ""} `} > <div className={styles.internalWrapper}> <h3>{heading}</h3> <p>{bodyText}</p> </div> <div className={styles.internalWrapper} style={overflowScroll}> {children} </div> </div> ); ``` To set a minimum width, I set a constant (that could be added as a prop) of the minimum width a graph should have: ``` javascript const MIN_WIDTH = 500; // this might be added to props, differ per graph ``` I removed `width` from the `const props` we set at the beginning and set it by itself: ```javascript const width = props.width < MIN_WIDTH ? MIN_WIDTH : props.width; ``` This one doesn't have any complications as it preserves the graph at a minimum width where the labels can be clearly displayed (depending on how we set it, we could change the MIN_WIDTH variable depending on the graph we want to display) Note that certain labels are just long, so they can still overflow. ### Alternating labels up/down Example ![image](/attachments/a868c657-3f7d-4acd-8dee-bd04ebfb7175) ```html tickLabelProps={(value, index) => { return { dy: index % 2 == 0 ? `-0.25rem` : `25px`, }; }} ``` This one also gets cropped because of the fixed height of the SVG. The use of `rem` doesn't really change how the labels are positioned so I used `px` instead. ### Use horizontal graphs (for bars) We already have horizontal bar graphs. ### Conclusion I think it would be interesting if we use a combination of min width graph + overflow scroll + one of the alternating/rotating labels solutions for the responsive vertical bar graph. The horizontal bar graph is already given (if we want to avoid using vertical bar graphs). We cannot avoid the cropping of the labels if they are rotated or shifted down. To avoid this problem, we can make the SVGs bigger in height then use the container (`ComponentWrapper`) to crop it with `overflow: scroll`.

image.png

34 KiB

image.png

29 KiB

image.png

32 KiB

image.png

30 KiB

image.png

30 KiB

a258wang commented

2022-10-08 15:50:13 -04:00

Thanks for the thorough investigation!!!

We cannot avoid the cropping of the labels if they are rotated or shifted down.

The way the bar graph is implemented, the bottom margin prop controls the distance between the x-axis and the bottom edge of the entire element - would increasing this value help prevent the labels from getting cut off?

Thanks for the thorough investigation!!! > We cannot avoid the cropping of the labels if they are rotated or shifted down. The way the bar graph is implemented, the bottom margin prop controls the distance between the x-axis and the bottom edge of the entire element - would increasing this value help prevent the labels from getting cut off?

e26chiu commented

2022-10-08 17:44:47 -04:00

@a258wang Yep! I was able to display some labels that were cropped previously:

@a258wang Yep! I was able to display some labels that were cropped previously: ![image](/attachments/26cada50-8942-4242-880d-20e774ff66bb)

image.png

30 KiB

snedadah commented

2022-10-09 18:17:36 -04:00

Wow, nice investigation!!

I also agree that we should do a combination of min width + overflow scrolling, and either the up/down or diogonal labels.

My only concern with the up down lables is that the down ones seem a bit disconnected.

What do you guys think about adding a line goes up to the bar, something like:

If its too much work don't worry about it, I think it's fine right now, or the diogonal labels also look good to me.

Wow, nice investigation!! I also agree that we should do a combination of min width + overflow scrolling, and either the up/down or diogonal labels. My only concern with the up down lables is that the down ones seem a bit disconnected. What do you guys think about adding a line goes up to the bar, something like: ![image](/attachments/db272398-5ee9-4936-92e2-70b73f51a4b8) If its too much work don't worry about it, I think it's fine right now, or the diogonal labels also look good to me.

image.png

17 KiB

e26chiu referenced a pull request that will close this issue

2022-11-12 11:10:51 -05:00

Fix Mobile Vertical Bar Graph Labels (Closes #50) #83

e26chiu closed this issue

2022-11-13 18:36:36 -05:00

e26chiu referenced this issue from a commit

2022-11-13 18:36:36 -05:00

Fix Mobile Vertical Bar Graph Labels (Closes #50) (#83)

Sign in to join this conversation.