esnet / esnet/react-timeseries-charts
Fix Scatter chart "selected" prop
- Dominant language
- JavaScript
- Stars
- 876
- Forks
- 279
- PR merge metrics
- No merged PRs in 30d
Description
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 prop `selected` of type `object` supplied to `ScatterChart`, 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 }
}
)
}
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}
/>
```
Contributor guide
Assessment
This issue has not been assessed yet.