leeoniya / leeoniya/uPlot

add new "justify" scale type

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

Nobody has claimed this yet.

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

Description

there are several viz types that can benefit from a built-in scale that is ordinal with respect to the number of datapoints and/or number of visible series.

grouped bars demo does its own scale math internally to distribute the bars correctly. it does a 2-level distribution -- first groups are spread based on number of datapoints and then then bars within those groups are spread based on number of series. this is done along x axis: https://leeoniya.github.io/uPlot/demos/multi-bars.html

state timeline and status history distribute lanes along y axis based on number of series. the y "values" represent the color, so it's pretty weird: https://leeoniya.github.io/uPlot/demos/timeline-discrete.html

it's time to internalize at least the scale math properly. dealing with these bits externally is a huge headache.

  • the scale settings need to account for both spacing and sizing along series and/or values counts. it will follow the css justify-content distributed alignment:
    /* Distributed alignment */
    justify-content: space-between; /* Distribute items evenly
                                     The first item is flush with the start,
                                     the last is flush with the end */
    justify-content: space-around; /* Distribute items evenly
                                     Start and end gaps are half the size of the space
                                     between each item */
    justify-content: space-evenly; /* Distribute items evenly
                                     Start, in-between, and end gaps have equal sizes */
    
  • this scale type will likely not be zoom-able. the scale.range function will be force-set to an appropriate calc function which allows integer index positions to land at the correct pixels. there will need to be a new api for these scales that accepts series index, value index, and whether to return left, center, or right positions of an item.
  • series visibility toggle will need to internally re-distribute these scales and be able to skip the disabled series in the apis while maintaining index associativity.
  • do something sensible for the axes tick labels

this is a significant undertaking that will likely touch 70% of the codebase. with many unknowns still...

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

Start by comparing the grouped bars and timeline/status history demos linked in the issue, then trace the existing scale.range and series-visibility behavior. The work is complete when the scale math is internalized, visibility changes redistribute positions while preserving index association, and the axes have sensible tick labels.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
data-visualization
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.