react-native-svg-charts
react-native-svg-charts copied to clipboard
[Feature] Class Based Component Examples
Description of feature
I'd love if there were examples, that weren't only PureComponents
Pure components / Functional components are cool and everything but since most other repositories use the Class-based style, that's what we use.
So the examples in this repository aren't useful to me.
for example:
<LineChart
style={{ height: Dimensions.get('window').height * 0.3 }}
data={data}
svg={{ stroke: colours.white }}
contentInset={{ top: 20, bottom: 20 }}>
<this.Tooltip />
```
This doesn't work because:
Type '{}' is missing the following properties from type '{ x: any; y: any; }': x, y ts(2739)
And I don't even know what that means, but I know it has to do with Function vs Class based component.
My screen is declared like this:
export default class GraphScreen extends Component<Props, State> {
even though that's standard, as the React docs specify, it seems simply incompatible with the current Example doc, which looks like this:
class ExtrasExample extends React.PureComponent {
Link is here: https://github.com/JesperLekland/react-native-svg-charts-examples/blob/master/storybook/stories/extras.js
I just want to access the onClick event / add a tooltip, but the Function vs Class is a big barrier to the documentation for me.
- [ ] Tooltip example for a Class based component chart
- [ ] Explanation why the x, y props are dead in this context
- [ ] class based usage example of these charts to be able to adapt for other examples
If the decision of the Repo owner / devs of this library is to not support this, an example or some advice for how to use this another way would be appreciated.
The idea occurred now to just use a Pure component as shown in the example docs, inside the Stateful class based screen component. Will come back and update if I succeed before this Issue sees any updates.
Unsure if #483 is related
Update:
As a Pure Function component exactly copied over from the example there's no difference to the error - I don't know how to solve this:

It looks weird, but this worked:
<HorizontalLine y={y => y} />
<Tooltip x={x => x} y={y => y} />
```
I don't understand what the X and Y required parameters are supposed to be in this type.