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

Calling .load() on a chart that is not rendered yet (due to lazy rendering) triggers an error #3106

Closed
stof opened this issue Feb 21, 2023 · 7 comments

Comments

@stof
Copy link
Contributor

stof commented Feb 21, 2023

Description

Steps to check or reproduce

    const duration = 2500

    const options = {
      bindto: element,
      data: {
        columns: [
          ['fill', 0],
          ['background', 1]
        ],
        type: donut(),
        order: null
      },
      legend: {
        show: false
      },
      donut: {
        label: {
          show: false
        },
        width: 10,
        expand: false
      },
      interaction: {
        enabled: false
      },
      size: {
        height: 175,
        width: 175
      },
      transition: {
        duration
      },
    }

    const chart = bb.generate(options)

    setTimeout(function () {
      chart.load({
        columns: [
          ['fill', Math.min(score / 100, 1)],
          ['background', 1 - Math.min(score / 100, 1)]
        ]
      })
    }, 100)

If element is hidden at the time of running this code (in my case, it is inside a modal for which the opening animation has not run yet), the .load call fails because updateTargets tries to use $el.main which has not been initialized yet.

@netil
Copy link
Member

netil commented Mar 2, 2023

IMO, this need to be handle by usage perspective.
Basically, if the bound element isn't visible, loading new data has no sense, because it won't visualize loaded data when the element is hidden.

In this case, the call of .load() API, need to be called after the initialization.

// will be called, when chart element's visibility turn to be visible
onafterinit: function(){ 
    setTimeout(function () {
        chart.load({
            columns: [
               ['fill', Math.min(30 / 100, 1)],
               ['background', 1 - Math.min(30 / 100, 1)]
            ]
        })
    }, 100)
}

@stof
Copy link
Contributor Author

stof commented Mar 2, 2023

@netil I indeed fixed the time when I loaded the data.

However, it would still be great to avoid triggering an error due to accessing an undefined internal property when calling this method when the chart is not initialized yet, especially given that lazy rendering is active by default if the element is initially hidden (and there is no way to opt-out).

@netil
Copy link
Member

netil commented Mar 17, 2023

@stof, thanks for the suggestion.
Basically, if lazy init is active, all of the APIs aren't able functioning normally.

What will be the "best" way handling this? Not throwing error? warning via console? or just staying silently not giving any notice? And expanding for every possible error cases, what policy is the "best"?

The way to handle this, will differ based on each one's perspective.
I'll be taking others libraries as the reference on handling errors and then will consider apply some general consistent policy for error handling.

@stof
Copy link
Contributor Author

stof commented Mar 17, 2023

@netil the issue is that there is no way to disable lazy init. Even putting an explicit lazy: false will still be lazy if the element is hidden at the time of rendering.

To me, the solution should look like this:

  • make it possible to disable the lazy rendering entirely in case lazy: false is set (the automatic behavior would be kept for the case where the config is undefined). Rendering in an hidden element can cause some issues with some features, but that's something that can be documented as a warning in the doc for this option, and the automatic lazyness for hidden element is broken anyway if the hiding come from styles of a parent instead of hiding just that element as the automatic detection won't detect when it becomes visible again)
  • add an early error in any public API that cannot be called before the chart is rendered, to have clear error messages explaining what happens and how to fix it instead of getting weird errors about internal APIs not existing

@stof
Copy link
Contributor Author

stof commented Mar 17, 2023

side note: if the codebase was actually typechecked (instead of using any almost everywhere as done currently due to the way the code is organized), the type checker would force you to actually handle the case of uninitialized state.

@stof
Copy link
Contributor Author

stof commented Sep 16, 2024

I found another case that triggered such error when calling the public API while a chart was not yet initialized due to the automatic lazy rendering:

const chart = bb.generate(options);

chart.legend.show(['first', 'second']);

@netil
Copy link
Member

netil commented Sep 20, 2024

  • make it possible to disable the lazy rendering entirely in case lazy: false is set...

Will update to make a "forced" state to initialize, even when lazy:false with chart element isn't visible.
But in this case, chart's composition elements can't render properly due to non visible state.

  • add an early error in any public API that cannot be called before the chart is rendered, to have clear error messages ...

Was trying to implement this, but not really sure. Giving warning msg is good for users, but in terms of library is adding some additional call execution. Will try consider in the future.

@netil netil self-assigned this Sep 20, 2024
netil pushed a commit to netil/billboard.js that referenced this issue Sep 20, 2024
Make to initialize when chart element isn't visible, but
render.lazy=false is set

Ref naver#3106
netil pushed a commit to netil/billboard.js that referenced this issue Sep 20, 2024
Make to initialize when chart element isn't visible, but
render.lazy=false is set

Ref naver#3106
@netil netil closed this as completed in 218ce46 Sep 20, 2024
github-actions bot pushed a commit that referenced this issue Oct 11, 2024
# [3.14.0-next.1](3.13.0...3.14.0-next.1) (2024-10-11)

### Bug Fixes

* **api:** Fix to return indexed categories ([55c17c6](55c17c6)), closes [#3365](#3365)
* **axis:** fix error when showing tick only ([705947f](705947f)), closes [#3881](#3881)
* **bar:** Fix stacking bar position on multiple xs ([216da62](216da62)), closes [#3372](#3372)
* **candlestick:** Fix rendering on rotated axis ([17f5058](17f5058)), closes [#3387](#3387)
* **clip:** Fix x axis hide on title.bottom ([beec1bb](beec1bb)), closes [#3364](#3364)
* **event:** Fix interaction with viewBox ([243bf3c](243bf3c)), closes [#3414](#3414)
* **input:** Fix touch/mouse input detection ([3d4392a](3d4392a)), closes [#3854](#3854)
* **option:** Fix inconsistency of padding ([0c1ce81](0c1ce81)), closes [#3426](#3426)
* **shape:** Fix circleY() undefined error ([f4ac3f1](f4ac3f1)), closes [#3388](#3388)
* **size:** Fix legend overflows with padding fit mode ([8357d11](8357d11)), closes [#3872](#3872)
* **subchart, zoom:** Fix returning domain value ([90338ec](90338ec)), closes [#3347](#3347)
* **subchart:** Fix handlebar position ([b897cbb](b897cbb)), closes [#3358](#3358)
* **title:** fix title text center align ([b254a61](b254a61)), closes [#3363](#3363)
* **tooltip:** Fix tooltip.format.value call ([f7d587d](f7d587d)), closes [#3371](#3371)
* **tooltip:** Fix tootip display on tooltip.init ([98e6f8b](98e6f8b)), closes [#3369](#3369)
* **zoom:** Fix unzoom after dynamic data load ([385907e](385907e)), closes [#3878](#3878)

### Features

* **api:** Intent to ship subchart method ([976f04a](976f04a)), closes [#3342](#3342)
* **axis:** Intent to ship axis.evalTextSize ([87048e9](87048e9)), closes [#3889](#3889)
* **interaction:** Intent to ship interaction.onout ([9c668e6](9c668e6)), closes [#3887](#3887)
* **module:** Support dual CJS/ESM package ([437c007](437c007)), closes [#2202](#2202)
* **plugin:** Intent to ship TableView plugin ([215b611](215b611)), closes [#1873](#1873)
* **regions:** Intent to ship regions.label ([b4e3bc2](b4e3bc2)), closes [#3319](#3319)
* **render:** Add forced init option on lazy rendering  ([218ce46](218ce46)), closes [#3106](#3106)
* **resize:** Intent to ship resize.auto='viewBox' ([db21387](db21387)), closes [#3893](#3893)
github-actions bot pushed a commit that referenced this issue Oct 25, 2024
# [3.14.0](3.13.0...3.14.0) (2024-10-25)

### Bug Fixes

* **axis:** fix error when showing tick only ([705947f](705947f)), closes [#3881](#3881)
* **bar:** fix representation of radius for small data ([91b5dca](91b5dca)), closes [#3903](#3903)
* **event:** Fix interaction with viewBox ([243bf3c](243bf3c)), closes [#3414](#3414)
* **input:** Fix touch/mouse input detection ([3d4392a](3d4392a)), closes [#3854](#3854)
* **point:** fix sensitivity error when blank area is clicked ([0060786](0060786)), closes [#3900](#3900)
* **scale:** Fix non-shape's element positioned accurately ([216141b](216141b)), closes [#3907](#3907)
* **size:** Fix legend overflows with padding fit mode ([8357d11](8357d11)), closes [#3872](#3872)
* **zoom:** Fix unzoom after dynamic data load ([385907e](385907e)), closes [#3878](#3878)
* **zoom:** Prevent error for out of range ([6f69e97](6f69e97)), closes [#3895](#3895)

### Features

* **axis:** Intent to ship axis.evalTextSize ([87048e9](87048e9)), closes [#3889](#3889)
* **interaction:** Intent to ship interaction.onout ([9c668e6](9c668e6)), closes [#3887](#3887)
* **legend:** Pass visibility state to legend item's event callback ([ba71911](ba71911)), closes [#3897](#3897)
* **render:** Add forced init option on lazy rendering  ([218ce46](218ce46)), closes [#3106](#3106)
* **resize:** Intent to ship resize.auto='viewBox' ([db21387](db21387)), closes [#3893](#3893)
newkdr added a commit to newkdr/vscode-gitlens that referenced this issue Dec 18, 2024
![snyk-top-banner](https://github.com/andygongea/OWASP-Benchmark/assets/818805/c518c423-16fe-447e-b67f-ad5a49b5d123)


<h3>Snyk has created this PR to upgrade billboard.js from 3.14.0 to
3.14.2.</h3>

:information_source: Keep your dependencies up-to-date. This makes it
easier to fix existing vulnerabilities and to more quickly identify and
fix newly disclosed vulnerabilities when they affect your project.

<hr/>


- The recommended version is **2 versions** ahead of your current
version.

- The recommended version was released on **21 days ago**.



<details>
<summary><b>Release notes</b></summary>
<br/>
  <details>
    <summary>Package name: <b>billboard.js</b></summary>
    <ul>
      <li>
<b>3.14.2</b> - <a
href="https://github.com/naver/billboard.js/releases/tag/3.14.2">2024-11-26</a></br><h2><a
href="https://github.com/naver/billboard.js/compare/3.14.1...3.14.2">3.14.2</a>
(2024-11-26)</h2>
<h3>Bug Fixes</h3>
<ul>
<li><strong>axis:</strong> Fix x axis extent to work (<a
href="https://github.com/naver/billboard.js/commit/4d738348ee5c189274d277ce07bd31d626de303d">4d73834</a>),
closes <a
href="https://github.com/naver/billboard.js/issues/3768"
data-hovercard-type="issue"
data-hovercard-url="/naver/billboard.js/issues/3768/hovercard">gitkraken#3768</a></li>
<li><strong>tooltip:</strong> Fix tooltip position on viewBox resizing
(<a
href="https://github.com/naver/billboard.js/commit/582feb46500a2eaf337a83f225dcebcc4d9317e9">582feb4</a>),
closes <a
href="https://github.com/naver/billboard.js/issues/3917"
data-hovercard-type="issue"
data-hovercard-url="/naver/billboard.js/issues/3917/hovercard">#3917</a></li>
</ul>
      </li>
      <li>
<b>3.14.1</b> - <a
href="https://github.com/naver/billboard.js/releases/tag/3.14.1">2024-11-18</a></br><h2><a
href="https://github.com/naver/billboard.js/compare/3.14.0...3.14.1">3.14.1</a>
(2024-11-18)</h2>
<h3>Bug Fixes</h3>
<ul>
<li><strong>point:</strong> fix data.onclick working with sensitivity
function (<a
href="https://github.com/naver/billboard.js/commit/587d71e9b413d5abd2265a3fb13c3c09914fca80">587d71e</a>),
closes <a
href="https://github.com/naver/billboard.js/issues/3912"
data-hovercard-type="issue"
data-hovercard-url="/naver/billboard.js/issues/3912/hovercard">#3912</a></li>
<li><strong>tooltip:</strong> Hide tooltip on redraw when unexpected
error (<a
href="https://github.com/naver/billboard.js/commit/35406406962c89bac0503800771d96ba2f47f56d">3540640</a>),
closes <a
href="https://github.com/naver/billboard.js/issues/3909"
data-hovercard-type="issue"
data-hovercard-url="/naver/billboard.js/issues/3909/hovercard">#3909</a>
<a href="https://github.com/naver/billboard.js/issues/3910"
data-hovercard-type="pull_request"
data-hovercard-url="/naver/billboard.js/pull/3910/hovercard">#3910</a></li>
</ul>
      </li>
      <li>
<b>3.14.0</b> - <a
href="https://github.com/naver/billboard.js/releases/tag/3.14.0">2024-10-25</a></br><h1><a
href="https://github.com/naver/billboard.js/compare/3.13.0...3.14.0">3.14.0</a>
(2024-10-25)</h1>
<p>The detailed new feature description can be found at:</p>
<blockquote>
<p><a
href="https://netil.medium.com/billboard-js-3-14-release-viewbox-resizing-e1cb90ee0697"
rel="nofollow">billboard.js 3.14 release: viewBox resizing!</a> (<a
href="https://dev.to/netil/billboardjs-314-release-viewbox-resizing-p6e"
rel="nofollow">dev.to link</a>)</p>
</blockquote>
<h3>Bug Fixes</h3>
<ul>
<li><strong>axis:</strong> fix error when showing tick only (<a
href="https://github.com/naver/billboard.js/commit/705947f635807e359c5c2f869a7d906e2315a01a">705947f</a>),
closes <a
href="https://github.com/naver/billboard.js/issues/3881"
data-hovercard-type="issue"
data-hovercard-url="/naver/billboard.js/issues/3881/hovercard">gitkraken#3881</a></li>
<li><strong>bar:</strong> fix representation of radius for small data
(<a
href="https://github.com/naver/billboard.js/commit/91b5dca91a86779b0c808e3498d85dcb93ab5f0e">91b5dca</a>),
closes <a
href="https://github.com/naver/billboard.js/issues/3903"
data-hovercard-type="issue"
data-hovercard-url="/naver/billboard.js/issues/3903/hovercard">gitkraken#3903</a></li>
<li><strong>event:</strong> Fix interaction with viewBox (<a
href="https://github.com/naver/billboard.js/commit/243bf3cf10a7d3b4b0f668240168e4b2d9ba1eba">243bf3c</a>),
closes <a
href="https://github.com/naver/billboard.js/issues/3414"
data-hovercard-type="issue"
data-hovercard-url="/naver/billboard.js/issues/3414/hovercard">gitkraken#3414</a></li>
<li><strong>input:</strong> Fix touch/mouse input detection (<a
href="https://github.com/naver/billboard.js/commit/3d4392ac51dca1947c6380329f7c6a6e0b3a497a">3d4392a</a>),
closes <a
href="https://github.com/naver/billboard.js/issues/3854"
data-hovercard-type="issue"
data-hovercard-url="/naver/billboard.js/issues/3854/hovercard">#3854</a></li>
<li><strong>point:</strong> fix sensitivity error when blank area is
clicked (<a
href="https://github.com/naver/billboard.js/commit/00607861a96826b2e1c9fec37159065680ff278e">0060786</a>),
closes <a
href="https://github.com/naver/billboard.js/issues/3900"
data-hovercard-type="issue"
data-hovercard-url="/naver/billboard.js/issues/3900/hovercard">#3900</a></li>
<li><strong>scale:</strong> Fix non-shape's element positioned
accurately (<a
href="https://github.com/naver/billboard.js/commit/216141bd6a415752fbb31ba3016188b20401f5b0">216141b</a>),
closes <a
href="https://github.com/naver/billboard.js/issues/3907"
data-hovercard-type="issue"
data-hovercard-url="/naver/billboard.js/issues/3907/hovercard">#3907</a></li>
<li><strong>size:</strong> Fix legend overflows with padding fit mode
(<a
href="https://github.com/naver/billboard.js/commit/8357d1161fa132a6d788c1349dee1f7e99eedf39">8357d11</a>),
closes <a
href="https://github.com/naver/billboard.js/issues/3872"
data-hovercard-type="issue"
data-hovercard-url="/naver/billboard.js/issues/3872/hovercard">gitkraken#3872</a></li>
<li><strong>zoom:</strong> Fix unzoom after dynamic data load (<a
href="https://github.com/naver/billboard.js/commit/385907e5cbab1af52b63f9a2987a302d479fe332">385907e</a>),
closes <a
href="https://github.com/naver/billboard.js/issues/3878"
data-hovercard-type="issue"
data-hovercard-url="/naver/billboard.js/issues/3878/hovercard">gitkraken#3878</a></li>
<li><strong>zoom:</strong> Prevent error for out of range (<a
href="https://github.com/naver/billboard.js/commit/6f69e970bd31fdd9d353854c54437c2a9c95e269">6f69e97</a>),
closes <a
href="https://github.com/naver/billboard.js/issues/3895"
data-hovercard-type="issue"
data-hovercard-url="/naver/billboard.js/issues/3895/hovercard">gitkraken#3895</a></li>
</ul>
<h3>Features</h3>
<ul>
<li><strong>axis:</strong> Intent to ship axis.evalTextSize (<a
href="https://github.com/naver/billboard.js/commit/87048e9258d521ffb4da7b98a167e184fe3489a3">87048e9</a>),
closes <a
href="https://github.com/naver/billboard.js/issues/3889"
data-hovercard-type="issue"
data-hovercard-url="/naver/billboard.js/issues/3889/hovercard">gitkraken#3889</a></li>
<li><strong>interaction:</strong> Intent to ship interaction.onout (<a
href="https://github.com/naver/billboard.js/commit/9c668e688624e0003d6dca6ea00fcf79a3f1b782">9c668e6</a>),
closes <a
href="https://github.com/naver/billboard.js/issues/3887"
data-hovercard-type="issue"
data-hovercard-url="/naver/billboard.js/issues/3887/hovercard">gitkraken#3887</a></li>
<li><strong>legend:</strong> Pass visibility state to legend item's
event callback (<a
href="https://github.com/naver/billboard.js/commit/ba71911b7c4b47b95f0b1e2bf8f12138d5b31cb1">ba71911</a>),
closes <a
href="https://github.com/naver/billboard.js/issues/3897"
data-hovercard-type="issue"
data-hovercard-url="/naver/billboard.js/issues/3897/hovercard">gitkraken#3897</a></li>
<li><strong>render:</strong> Add forced init option on lazy rendering
(<a
href="https://github.com/naver/billboard.js/commit/218ce4608dd7da7a5288bce1c6f95d71d8aa9c5f">218ce46</a>),
closes <a
href="https://github.com/naver/billboard.js/issues/3106"
data-hovercard-type="issue"
data-hovercard-url="/naver/billboard.js/issues/3106/hovercard">gitkraken#3106</a></li>
<li><strong>resize:</strong> Intent to ship resize.auto='viewBox' (<a
href="https://github.com/naver/billboard.js/commit/db213873e2959b7c24c44f1330ec86af801406e8">db21387</a>),
closes <a
href="https://github.com/naver/billboard.js/issues/3893"
data-hovercard-type="issue"
data-hovercard-url="/naver/billboard.js/issues/3893/hovercard">gitkraken#3893</a></li>
</ul>
      </li>
    </ul>
from <a
href="https://github.com/naver/billboard.js/releases">billboard.js
GitHub release notes</a>
  </details>
</details>

---

> [!IMPORTANT]
>
> - Check the changes in this PR to ensure they won't cause issues with
your project.
> - This PR was automatically created by Snyk using the credentials of a
real user.

---

**Note:** _You are seeing this because you or someone else with access
to this repository has authorized Snyk to open upgrade PRs._

**For more information:** <img
src="https://api.segment.io/v1/pixel/track?data=eyJ3cml0ZUtleSI6InJyWmxZcEdHY2RyTHZsb0lYd0dUcVg4WkFRTnNCOUEwIiwiYW5vbnltb3VzSWQiOiJkY2EwZTViMC1mNjdhLTQwZDMtODQwOS05ZDMxYWU5ZDY4YzkiLCJldmVudCI6IlBSIHZpZXdlZCIsInByb3BlcnRpZXMiOnsicHJJZCI6ImRjYTBlNWIwLWY2N2EtNDBkMy04NDA5LTlkMzFhZTlkNjhjOSJ9fQ=="
width="0" height="0"/>

> - 🧐 [View latest project
report](https://app.snyk.io/org/newkdr/project/12a8a5f5-3e19-438c-8280-eb8f4ee06d17?utm_source&#x3D;github&amp;utm_medium&#x3D;referral&amp;page&#x3D;upgrade-pr)
> - 📜 [Customise PR
templates](https://docs.snyk.io/scan-using-snyk/pull-requests/snyk-fix-pull-or-merge-requests/customize-pr-templates?utm_source=&utm_content=fix-pr-template)
> - 🛠 [Adjust upgrade PR
settings](https://app.snyk.io/org/newkdr/project/12a8a5f5-3e19-438c-8280-eb8f4ee06d17/settings/integration?utm_source&#x3D;github&amp;utm_medium&#x3D;referral&amp;page&#x3D;upgrade-pr)
> - 🔕 [Ignore this dependency or unsubscribe from future upgrade
PRs](https://app.snyk.io/org/newkdr/project/12a8a5f5-3e19-438c-8280-eb8f4ee06d17/settings/integration?pkg&#x3D;billboard.js&amp;utm_source&#x3D;github&amp;utm_medium&#x3D;referral&amp;page&#x3D;upgrade-pr#auto-dep-upgrades)

[//]: #
'snyk:metadata:{"customTemplate":{"variablesUsed":[],"fieldsUsed":[]},"dependencies":[{"name":"billboard.js","from":"3.14.0","to":"3.14.2"}],"env":"prod","hasFixes":false,"isBreakingChange":false,"isMajorUpgrade":false,"issuesToFix":[],"prId":"dca0e5b0-f67a-40d3-8409-9d31ae9d68c9","prPublicId":"dca0e5b0-f67a-40d3-8409-9d31ae9d68c9","packageManager":"npm","priorityScoreList":[],"projectPublicId":"12a8a5f5-3e19-438c-8280-eb8f4ee06d17","projectUrl":"https://app.snyk.io/org/newkdr/project/12a8a5f5-3e19-438c-8280-eb8f4ee06d17?utm_source=github&utm_medium=referral&page=upgrade-pr","prType":"upgrade","templateFieldSources":{"branchName":"default","commitMessage":"default","description":"default","title":"default"},"templateVariants":[],"type":"auto","upgrade":[],"upgradeInfo":{"versionsDiff":2,"publishedDate":"2024-11-26T05:44:58.122Z"},"vulns":[]}'
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