Fix Scatter chart "selected" prop

[margaritka123]

Hi,

I have been trying to create a Scatter Chart (similar to the Wind example) with an option to select multiple events, which would then be rendered with "selected" styling applied to those events. The "selected" argument in the Scatter Chart documentation is declared as an "array of shape {event, column}", however, when I pass an array of events to the selected prop on Scatter Chart, styling on selection is simply ignored. Yet, when I pass just the {event, column} object itself, styling gets properly applied, however, I do get a warning that the selected prop type is violated. Both the source code and the Wind example seem to treat "selected" as on object rather than as an array. For example, handleSelectionChanged in the Wind example, sets this.state.selected=point as opposed to [point].

Furthermore, I copied the Wind example verbatim and ran it locally, and I do observe the exact same outcome as above, namely -- Failed prop type: Invalid propselectedof typeobjectsupplied toScatterChart, expected an array

Am I missing or misunderstanding something here? To be clear, my goal is to apply selected styling to an array of events rather than a single event at a time.

Below is my code for reference. I am using Mobx, so the syntax is a bit different from the Wind example.
The example below produces no highlighting on execution of handleSelectionChanged. However, if instead of this.selection.push(point), I would declare selection as null and then set selection=point on selection event, then I would get both a proper highlighting and a warning that selected prop is of wrong type.

@observable selection = []

handleSelectionChanged = (point) => {
       this.selection.push(point)
    }

perEventStyle = (column, event) =>{
    return ({
            normal: { fill: "red", opacity: 0.8 },
            highlighted: { fill: "red", opacity: 1.0 },
            selected: { fill: "green", opacity: 1.0, stroke: "#2CB1CF",strokeWidth: 3 },
            muted: { fill: "red", opacity: 0.4 }
            }
        )
    }

<ScatterChart key='1'
    axis="y"
    series={this.series}
    columns={['value']}
    style={this.perEventStyle}
    selected={this.selection}
    onSelectionChange={p => this.handleSelectionChanged(p)}
    info={this.infoValues}
    infoStyle={{
        fill: "black",
        color: "#DDD"
    }}
    radius={(event, column) =>
        column === "value" ? 4 : 2
    }
    onMouseNear={p => this.handleMouseNear(p)}
    highlight = {this.highlight}
/>

[pjm17971]

I think the prop needs fixing. I've added an internal issue to address this.