Points/Labels: Filter when out of range

[techniq]

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]

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]

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]

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]

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.