leeoniya / leeoniya/uPlot

Add outliers in box & whisker graph to tooltip

Open
#853 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
10.5k
Forks
463
PR merge metrics
No merged PRs in 30d

Description

Perhaps you can give me a pointer in how to add the outliers to the tooltip. Much appreciated!

I now add them just to another element in the page, but adding them to the tooltip would be much better. What I do I 'compress' the outliers to a count of the different numbers (to prevent enormous lists). Something like this in the update function of the tooltipplugin.
outliersEl is document.getElementById("outliers"); set in the outerscope, where let legendEl; is positioned.

With your knowledge of uPlot, I think this can be done in a far more elegant way.

       outliersEl.innerText = "";
        if (u.data[6][u.cursor.idx] && u.data[6][u.cursor.idx].length > 0) {
            outliersEl.style.display = "block";
            let outliers = {};
            u.data[6][u.cursor.idx].forEach((outlier) => {
                if (typeof outliers[outlier] == 'undefined') {
                    outliers[outlier] = 1;
                } else {
                    outliers[outlier]++;
                }
            });
            outliersEl.innerHTML = "<strong>Outliers:</strong>" + JSON.stringify(outliers, null, 2);
        } else {
            outliersEl.style.display = "none";
        }

Originally posted by @hugovoerman in https://github.com/leeoniya/uPlot/issues/852#issuecomment-1622607372

Contributor guide

No contributing guide indexed for this repository

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

The issue points to the tooltip plugin's update function and the box-and-whisker outlier series at u.data[6]; begin by locating those entry points in the uPlot source. Done means the tooltip displays the outliers, preferably as grouped counts rather than a potentially large list; no test file is named.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
data-visualization
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 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.