uPlot icon indicating copy to clipboard operation
uPlot copied to clipboard

extract some generic patterns for non-line charts

Open leeoniya opened this issue 4 years ago • 2 comments

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).

leeoniya avatar Apr 22 '20 21:04 leeoniya

Should we make a plugins folder with the code for just plugins that can be used by the html files by the way? Some of the demos get very long (and I have a suspicion that many users of the chart will just want to copy paste the example plugins into their own applications, and having them as separate js files would make that easier).

This is kinda like a half way point between creating a uPlot github org that publishes official plugins and just having some artisan ones in the html files. Having a set of main plugins that we purposely design to be reusable across the demos but with no disclaimer about supporting them

EmiPhil avatar May 28 '20 01:05 EmiPhil

👍 agreed.

leeoniya avatar May 28 '20 02:05 leeoniya