Points/Labels: Filter when out of range

techniq / layerchart

Composable Svelte chart components to build a wide range of visualizations

https://www.layerchart.com

MIT License

638 stars 12 forks source link

Points/Labels: Filter when out of range #264

Open techniq opened 1 week ago

techniq commented 1 week ago

Similar to the work done for Rule, we should filter any points which are outside of the Chart's x/y range, which is useful when brushing data and not needing to rely on a clip path.

See related discussion

cycle4passion commented 5 days ago

Looking at Rule as an example and plans to mirror this in Points, I wonder if this is going to be necessary for other primitives and/or markup items? Point ?

Could Spline use range filtering and then not need clipping at all when brushing? Is there a use case where Spline overflowing axis?

Do other chart types have, or could have, a use case for zooming being a near equivilent to brushing and also benefit from this?

I don't have enough familiarity with other components beyond linecharts.

If this is more widespread applicable, maybe a internal wrapping utility <DataWithinRange {data} x={true} y={true} /> component?

@c4p

techniq commented 5 days ago

Hmm.. few quick thoughts:

Brush component currently has 2 examples/approaches, one using a clip path and one where the data is filtered
I plan to have context integration with Brush (controlling the domain/bounds)
There might also be opportunity to have a <Chart filterDataOutOfRange> or similar
Possibly expose a DataWithinRange component
Update each component to make sure it is within bounds. I wonder if there are still use cases where you want an item to "bleed" outside the chart container. LayerChart (and LayerCake) intentionally set overflow: visible on the <Svg> container, which is not the default. For <Canvas>, this isn't possible 😁. I've seen this useful for axis labels and such, but the anchored points should still be within the chart range.

I need to put more thought into each of these, but there is definitely room for improvement.

cycle4passion commented 5 days ago

As I think about it you can't range filter things like spline as removing data out of axis range will change the appearance of the chart within the range view. That's why clip exists.

Is there room for an opinionated z-index on axis, legend, etc above things like Spline? I'm just trying to think of a way to remove clipping all together?

techniq commented 5 days ago

As I think about it you can't range filter things like spline as removing data out of axis range will change the appearance of the chart within the range view. That's why clip exists.

Is there room for an opinionated z-index on axis, legend, etc above things like Spline? I'm just trying to think of a way to remove clipping all together?

The order you render components indicates what is drawn on top (last wins), and you can also remove Points from the main ChartClipPath. There is also <ChartClipPath full> which is "full frame" (includes the padding area).

So you could only wrap <Points> in <ChartClipPath> which should work for your use case, I believe.