In VictoryBrushContainer, clicking outside the brushed area brushes the whole domain

[jmansor]

Steps:

• Go to https://formidable.com/open-source/victory/guides/brush-and-zoom/
• Change the brush domain.
• Click outside the brushed area in the bottom chart.
• The brushed area extends to cover the whole domain.

Is this the expected behavior? Is there any way to prevent this?

[boygirl]

@jmansor this is expected behavior, but I would be willing to add a prop to change it.

[jmansor]

Thanks for the response, I've seen some d3 examples like this one:

https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172

with the same behavior. Yet, I think it would be nice to have a way to deactivate this, so that clicks outside the brushed areas has no effect.

Makes sense?

[mariogarcia]

Would it be possible to override the behavior through the eventHandlers attribute ? I've tried the following:

    <VictoryChart
        padding={{left: 1, right: 1}}
        theme={theme}
        height={20}
        scale={{x: 'time'}}
        events={[{
            target: 'parent',
            eventHandlers: {
                onClick: () => {
                    return [
                        {
                            target: 'data',
                            mutation: (props) => {                         
                                console.log('this is called when clicking')       
                                return {domain: props.domain}
                            }
                        }, {
                            target: 'labels',
                            eventKey: 0,
                            mutation: () => {
                                return {text: 'hey'}
                            }
                        }
                    ]
                }
            }
        }]}
        containerComponent={brushComponent} >
        ...
    </VictoryChart>
   

The console log works when clicking over the chart but still the domain is taking the whole area.

[xrado]

@boygirl It would be nice to have an option to prevent this, maybe trough onBrushDomainChange when returning false, or leave brush untouched if only click happens.

[ghost]

@boygirl I too stuck with this scenerio. Can we expext some good solution on this. I don't want to brush my whole chart when user clicked outside the brushed area. It is very annoying when we apply brush container on top of graph.
For example : https://formidable.com/open-source/victory/docs/victory-brush-container/

[boygirl]

Proposed solution:
Add a new prop called defaultBrushArea that will accept options "all", "none", and "disable". Default behavior will be to select "all" to prevent the breaking change. Setting this prop to "none" will cause the brush area to be cleared when the user clicks outside of the brushed region. Setting the prop to "disable" will mean that clicks outside of the brushed region will have no effect on the brush. ETA May 4 2018. For those following this issue, please comment before May 2 if this solution is insufficient for your needs.

[ghost]

@boygirl I think you meant ETA May 4th and need to comment before May 2nd ?

[boygirl]

Yes! Sorry!

[ghost]

Hi @boygirl -> For better clarity on prop "disable", i'm taking below example:-
Suppose my x-axis lies between 1-10 and y-axis between 1-20. If I brush my chart for 2-5 for domain X and If i clicked at other region but within the graph, let' say at coordinate (x= 7,y =15) , in this case it SHOULD NOT brush the whole area as we are setting the prop as "disable".

[boygirl]

@code4arpit correct. If you set the prop to "disable" clicking outside of your [2, 5] domain will result in the following behavior
onMouseDown: brush clears entirely just as it would when starting to brush a new region
onMouseUp: if there has been no change in mouse position the existing [2, 5] brush domain will be shown
onMouseUp: with a changing mouse position A new region will be selected as usual