leeoniya / leeoniya/uPlot

extract some generic patterns for non-line charts

Open
#184 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

while working on #179, i'm having to copy and slightly tweak some code and noticing patterns that could be generally extracted regarding how data can/should be represented and translated to plotting custom points (which is how bars, candlesticks and boxes are implemented).

boxes and candlesticks

  • data layout - each component of the box is plotted as a separate series. this is needed for uPlot to properly do vertical ranging.
  • the fact that each drawn datapoint is a composite of multiple series and all drawing at the series level must be disabled.
  • the box drawing code itself is basically identical, with only the box fill changing based on the given data index (in candlesticks) and needing to draw a median bar + extremes cross-bars for the box-plot case.
  • the scales.x.distr type: 2, to snap to exact bounds during zooming.
  • the plugins use the draw hook to draw the points.
  • re-use the legend as a tooltip
  • draw a "hovered" background under the currently-displayed datapoint.

a generic box/composite-point base plugin can:

  • accept a callback that's fired per point to set the box styling or other metrics.
  • accept a callback that's fired per point to draw extra decorations, like median bar, extreme cross-bars or mean
  • rather than using the draw hook, can use the currently-unused series[0].points to draw the composite points from multiple series. this might require a slight tweak to the series draw loops which skip series[0].

bars

  • handles properly distributing/spreading the series data from a single index horizontally (and centering the whole group over the x point). it also handles adding padding to the chart and disabling zoom and cursor interaction.
  • draws custom bars points

a generic plugin here would be one that handles hz spreading and x scale padding. then accepting a custom point drawing function. (e.g. bars).

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 existing boxes, candlesticks, and bars implementations described in the issue, especially their plugins, draw hooks, series[0].points handling, and series draw loops. Determine whether a generic composite-point plugin and a separate bar-spreading plugin can cover those patterns; done means the repeated behavior is consolidated without changing the existing chart types.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
data-visualization
Issue type
Refactor
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.