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

Grid line labels don't update correctly with large datasets #1592

Closed
dnlbaines opened this issue Aug 10, 2020 · 1 comment
Closed

Grid line labels don't update correctly with large datasets #1592

dnlbaines opened this issue Aug 10, 2020 · 1 comment
Labels

Comments

@dnlbaines
Copy link

Description

When there are larger datasets with grid lines, when you zoom in the labels for the gridlines do not update their position however the lines are still updated correctly. This is not the case with smaller datasets however.

Steps to check or reproduce

Easiest way is to go here - https://naver.github.io/billboard.js/demo/#Interaction.DragZoom
And use this code:

var chart = bb.generate({
  data: {
    columns: [
	["sample", 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 150, 250, 150, 200, 170, 240, 100, 150, 250, 150, 200, 170, 240, 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 350, 220, 250, 300, 270, 140, 150, 90, 150, 50, 120, 70, 40, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 150, 250, 150, 200, 170, 240, 100, 150, 250, 150, 200, 170, 240, 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 350, 220, 250, 300, 270, 140, 150, 90, 150, 50, 120, 70, 40, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 150, 250, 150, 200, 170, 240, 100, 150, 250, 150, 200, 170, 240, 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 350, 220, 250, 300, 270, 140, 150, 90, 150, 50, 120, 70, 40, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 150, 250, 150, 200, 170, 240, 100, 150, 250, 150, 200, 170, 240, 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 350, 220, 250, 300, 270, 140, 150, 90, 150, 50, 120, 70, 40, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 150, 250, 150, 200, 170, 240, 100, 150, 250, 150, 200, 170, 240, 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 350, 220, 250, 300, 270, 140, 150, 90, 150, 50, 120, 70, 40, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 150, 250, 150, 200, 170, 240, 100, 150, 250, 150, 200, 170, 240, 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 350, 220, 250, 300, 270, 140, 150, 90, 150, 50, 120, 70, 40, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 150, 250, 150, 200, 170, 240, 100, 150, 250, 150, 200, 170, 240, 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 350, 220, 250, 300, 270, 140, 150, 90, 150, 50, 120, 70, 40, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 150, 250, 150, 200, 170, 240, 100, 150, 250, 150, 200, 170, 240, 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 350, 220, 250, 300, 270, 140, 150, 90, 150, 50, 120, 70, 40, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 150, 250, 150, 200, 170, 240, 100, 150, 250, 150, 200, 170, 240, 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 350, 220, 250, 300, 270, 140, 150, 90, 150, 50, 120, 70, 40, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 150, 250, 150, 200, 170, 240, 100, 150, 250, 150, 200, 170, 240, 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 350, 220, 250, 300, 270, 140, 150, 90, 150, 50, 120, 70, 40, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 150, 250, 150, 200, 170, 240, 100, 150, 250, 150, 200, 170, 240, 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 350, 220, 250, 300, 270, 140, 150, 90, 150, 50, 120, 70, 40, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 150, 250, 150, 200, 170, 240, 100, 150, 250, 150, 200, 170, 240, 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 350, 220, 250, 300, 270, 140, 150, 90, 150, 50, 120, 70, 40, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 150, 250, 150, 200, 170, 240, 100, 150, 250, 150, 200, 170, 240, 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 350, 220, 250, 300, 270, 140, 150, 90, 150, 50, 120, 70, 40, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 150, 250, 150, 200, 170, 240, 100, 150, 250, 150, 200, 170, 240, 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 350, 220, 250, 300, 270, 140, 150, 90, 150, 50, 120, 70, 40, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 150, 250, 150, 200, 170, 240, 100, 150, 250, 150, 200, 170, 240, 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 350, 220, 250, 300, 270, 140, 150, 90, 150, 50, 120, 70, 40, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 150, 250, 150, 200, 170, 240, 100, 150, 250, 150, 200, 170, 240, 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 350, 220, 250, 300, 270, 140, 150, 90, 150, 50, 120, 70, 40, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 150, 250, 150, 200, 170, 240, 100, 150, 250, 150, 200, 170, 240, 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 350, 220, 250, 300, 270, 140, 150, 90, 150, 50, 120, 70, 40, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 150, 250, 150, 200, 170, 240, 100, 150, 250, 150, 200, 170, 240, 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 350, 220, 250, 300, 270, 140, 150, 90, 150, 50, 120, 70, 40, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 150, 250, 150, 200, 170, 240, 100, 150, 250, 150, 200, 170, 240, 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 350, 220, 250, 300, 270, 140, 150, 90, 150, 50, 120, 70, 40, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 150, 250, 150, 200, 170, 240, 100, 150, 250, 150, 200, 170, 240, 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 350, 220, 250, 300, 270, 140, 150, 90, 150, 50, 120, 70, 40, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 150, 250, 150, 200, 170, 240, 100, 150, 250, 150, 200, 170, 240, 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 350, 220, 250, 300, 270, 140, 150, 90, 150, 50, 120, 70, 40, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 150, 250, 150, 200, 170, 240, 100, 150, 250, 150, 200, 170, 240, 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 350, 220, 250, 300, 270, 140, 150, 90, 150, 50, 120, 70, 40]
    ]
  },
grid: {
    x: {
      lines: [
        {
          value: 100,
          text: "S"
        },
        {
          value: 300,
          text: "S"
        },
        {
          value: 500,
          text: "S"
        }
      ]
    }
  },
  zoom: {
    enabled: true,
    type: "drag"
  },
  bindto: "#dragZoom"
});
@netil netil added the bug label Aug 11, 2020
@netil
Copy link
Member

netil commented Aug 11, 2020

Hi @danbai02, thanks for the report.
It seems the grid label text position not get updated after the zoom.

netil added a commit to netil/billboard.js that referenced this issue Aug 11, 2020
Remove unnecessary doulbe transition wrapping

Ref naver#1592
netil added a commit to netil/billboard.js that referenced this issue Aug 11, 2020
Remove unnecessary doulbe transition wrapping

Ref naver#1592
@netil netil closed this as completed in 056b565 Aug 11, 2020
netil pushed a commit that referenced this issue Sep 7, 2020
# [2.1.0-next.2](2.1.0-next.1...2.1.0-next.2) (2020-09-07)

### Bug Fixes

* upgrade d3-brush from 1.1.5 to 1.1.6 ([#1605](#1605)) ([624f044](624f044))
* **api:** prevent TypeError when chart already destroyed ([ce42768](ce42768)), closes [#1613](#1613)
* upgrade d3-ease from 1.0.6 to 1.0.7 ([#1617](#1617)) ([4f78533](4f78533))
* **bar:** Fix not firing data.onclick ([62e7a10](62e7a10)), closes [#1619](#1619) [#1620](#1620)
* **grid:** Fix grid text position update ([056b565](056b565)), closes [#1592](#1592)
* **legend:** Fix error for color.threshold option ([6e06629](6e06629)), closes [#1604](#1604) [#1611](#1611)
* **legend:** Make legend blurry after click ([319d608](319d608)), closes [#1599](#1599)
* **step:** Fix rendering nullish data ([dbe7b9b](dbe7b9b)), closes [#1637](#1637)
* **types:** Fix donut option types ([1917169](1917169)), closes [#1615](#1615)

### Features

* **interaction:** avoid multiple <rect> generation ([97df63a](97df63a)), closes [#1642](#1642)
* **theme:** Add new 'datalab' theme ([aba20d4](aba20d4)), closes [#241](#241)
netil pushed a commit that referenced this issue Sep 25, 2020
# [2.1.0](2.0.3...2.1.0) (2020-09-25)

### Bug Fixes

* **api:** prevent TypeError when chart already destroyed ([ce42768](ce42768)), closes [#1613](#1613)
* **axis:** fix y axis clip-path coordinates ([bdf7694](bdf7694)), closes [#1572](#1572)
* **bar:** Fix not firing data.onclick ([62e7a10](62e7a10)), closes [#1619](#1619) [#1620](#1620)
* **bar:** fix on bar tooglip grouped false ([4bd69be](4bd69be)), closes [/github.com//issues/1663#issuecomment-690991679](https://github.com//github.com/naver/billboard.js/issues/1663/issues/issuecomment-690991679)
* **grid:** Fix grid text position update ([056b565](056b565)), closes [#1592](#1592)
* **interaction:** bind touch event only for rect element ([12da3e4](12da3e4)), closes [#1650](#1650)
* upgrade d3-ease from 1.0.6 to 1.0.7 ([#1617](#1617)) ([4f78533](4f78533))
* **interaction:** correct draggable selection functionality ([160f873](160f873)), closes [#1642](#1642)
* upgrade d3-brush from 1.1.5 to 1.1.6 ([#1605](#1605)) ([624f044](624f044))
* **interaction:** fix for data point click on mobile ([727c26f](727c26f)), closes [#1651](#1651)
* **interaction:** fix retrieving event rect position ([6fc449e](6fc449e)), closes [#1670](#1670)
* **legend:** Fix error for color.threshold option ([6e06629](6e06629)), closes [#1604](#1604) [#1611](#1611)
* **legend:** Make legend blurry after click ([319d608](319d608)), closes [#1599](#1599)
* **shape:** fix possible condition removal by transpiler ([781fb61](781fb61)), closes [#1663](#1663)
* **step:** Fix rendering nullish data ([dbe7b9b](dbe7b9b)), closes [#1637](#1637)
* **types:** Fix donut option types ([1917169](1917169)), closes [#1615](#1615)
* **types:** Specify context for callbacks ([f3b9f26](f3b9f26)), closes [#1551](#1551)

### Features

* **area:** Intent to ship area.front ([fe315dc](fe315dc)), closes [#1543](#1543)
* **axis:** Improve log scale to handle 0 ([ca6cf62](ca6cf62)), closes [#1578](#1578)
* **axis:** Intent to ship axis.y2.type ([a94c25e](a94c25e)), closes [#1575](#1575)
* **interaction:** avoid multiple <rect> generation ([97df63a](97df63a)), closes [#1642](#1642)
* **plugin:** Add JS  Plugin class file ([4a20480](4a20480)), closes [#1665](#1665)
* **theme:** Add new 'datalab' theme ([aba20d4](aba20d4)), closes [#241](#241)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants