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.

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

position of 0 values with grouped data and positive and negative values #2813

Closed
michkami opened this issue Aug 5, 2022 · 2 comments
Closed

Comments

@michkami
Copy link
Collaborator

michkami commented Aug 5, 2022

Description

I was working with grouped data in the last days and I noticed something weird.

grafik

In this chart I use data.order: null to keep the order of the data as I ordered it manually.

When you look at the image above, I would expect the 0 on the left side to be positioned below the -11 to match the data order.
The -1 on the right side is placed below -11 (at -12) which is what I expect because we cumulate the values below the zero line up to the -1 when they are grouped.
It seems that if there are positive and negative and the value is zero it doesn't cumulate the values below the zero line up to 0 but it cumulates all values (positive and negatives) and that's why the 0 is positioned at -8 instead of the correct accumulated value (-12) on the left side.

Is this the right behaviour or is it a bug?

Steps to check or reproduce

https://jsfiddle.net/michkami/7jn9wq2b/

@netil
Copy link
Member

netil commented Aug 8, 2022

I would expect the 0 on the left side to be positioned below the -11 to match the data order.

IMO, series 3 should stay at the top if data.order=null is specified.

@netil
Copy link
Member

netil commented Aug 9, 2022

@michkami, after doing some approach, doubt on how zero should be represented?

In a scenario, where the example you provided, the series3 value goes from 0 to -1. Looks reasonable the coordinate of 0 staying at the bottom(near -11 at y Axis) as you said, but what if value goes from 0 to 1?

image

If treat 0 as negative value, and when the value flows from 0 to 1, it needed to be drawn from the bottom to the top as follows.

image

What I want to explain here is, the 0 can be negative or positive. Look nicer if 0 treated as "negative" when value flows to negative, but is awkward, if flows to positive and vice versa.

This can be proven with example. For example when 0 is treated as "positive" value, representing 0 to 1,

  • Will look nicer if value flows to positive value,
    image

  • But, looks awkward if value flows to negative value.
    image


So, my idea is, this issue can't be handled automatically. It needs to provide some option to implicitly determine, how 0 will be treated.

  • treat as absolute 0
    value 0 won't be stacked, and will correlated with y axis 0.

    • left: 0 to 1 / right: 0 to -1
      image image
  • treat as negative 0 as described above

  • treat as positive 0 as described above

netil added a commit to netil/billboard.js that referenced this issue Aug 11, 2022
Implement the way to specify how zero value is treated on groups

Ref naver#2813
@netil netil closed this as completed in 3de8e7a Aug 11, 2022
github-actions bot pushed a commit that referenced this issue Sep 15, 2022
# [3.6.0-next.1](3.5.1...3.6.0-next.1) (2022-09-15)

### Bug Fixes

* **area:** Fix unnecessary area element generation ([d43a1a7](d43a1a7)), closes [#2826](#2826)
* **axis:** fix undefined error reading generatedTicks ([4f3c101](4f3c101)), closes [#2786](#2786)
* **data:** Fix idConverter error ([98f7103](98f7103)), closes [#2808](#2808)
* **gauge:** Fix size mismatch w/o gauge multi label text is hidden ([6ee8a1e](6ee8a1e)), closes [#2799](#2799)
* **grid:** Remove grid.y.ticks default value ([4818e44](4818e44)), closes [#2809](#2809)
* **legend:** Add default for legend.contents.template ([55fbb02](55fbb02)), closes [#2780](#2780)
* **type:** Add missing polar module export ([a950abd](a950abd)), closes [#2833](#2833)
* **typescript:** update entry point in tsconfig ([ab4d98d](ab4d98d)), closes [#2855](#2855)
* **types:** Fix the type declarations for the y tick format ([1d378e0](1d378e0)), closes [#2790](#2790)

### Features

* **module:** Support dual CJS/ESM package ([437c007](437c007)), closes [#2202](#2202)
* **options:** Intent to ship data.groupsZeroAs ([3de8e7a](3de8e7a)), closes [#2813](#2813)
* **packages:** Intent to ship React wrapper ([4cef6ad](4cef6ad)), closes [#2838](#2838)
* **plugin:** Intent to ship TableView plugin ([215b611](215b611)), closes [#1873](#1873)
github-actions bot pushed a commit that referenced this issue Sep 29, 2022
# [3.6.0](3.5.1...3.6.0) (2022-09-29)

### Bug Fixes

* **area:** Fix unnecessary area element generation ([d43a1a7](d43a1a7)), closes [#2826](#2826)
* **axis:** fix undefined error reading generatedTicks ([4f3c101](4f3c101)), closes [#2786](#2786)
* **data:** Fix idConverter error ([98f7103](98f7103)), closes [#2808](#2808)
* **gauge:** Fix size mismatch w/o gauge multi label text is hidden ([6ee8a1e](6ee8a1e)), closes [#2799](#2799)
* **grid:** Remove grid.y.ticks default value ([4818e44](4818e44)), closes [#2809](#2809)
* **legend:** Add default for legend.contents.template ([55fbb02](55fbb02)), closes [#2780](#2780)
* **type:** Add missing polar module export ([a950abd](a950abd)), closes [#2833](#2833)
* **typescript:** update entry point in tsconfig ([ab4d98d](ab4d98d)), closes [#2855](#2855)
* **types:** Fix legend.item.tile.type literal type typo ([de9781f](de9781f))
* **types:** Fix the type declarations for the y tick format ([1d378e0](1d378e0)), closes [#2790](#2790)
* **types:** Fix the type declarations for the y tick format ([#2865](#2865)) ([2e38dee](2e38dee))

### Features

* **api:** Enhance .config() to return generation options ([455944e](455944e)), closes [#2864](#2864)
* **options:** Intent to ship bar.linearGradient ([3a9989f](3a9989f)), closes [#397](#397)
* **options:** Intent to ship bar.overlap ([046aedb](046aedb)), closes [#2839](#2839)
* **options:** Intent to ship data.groupsZeroAs ([3de8e7a](3de8e7a)), closes [#2813](#2813)
* **options:** Intent to ship legend.item.tile.type ([c379c9f](c379c9f)), closes [#2874](#2874)
* **packages:** Intent to ship React wrapper ([4cef6ad](4cef6ad)), closes [#2838](#2838)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants