react-native-svg-charts icon indicating copy to clipboard operation
react-native-svg-charts copied to clipboard

[Feature] Class Based Component Examples

Open AlphaJuliettOmega opened this issue 3 years ago • 4 comments

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.

AlphaJuliettOmega avatar Apr 23 '21 11:04 AlphaJuliettOmega

  • [ ] 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.

AlphaJuliettOmega avatar Apr 23 '21 11:04 AlphaJuliettOmega

Unsure if #483 is related

AlphaJuliettOmega avatar Apr 23 '21 11:04 AlphaJuliettOmega

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:

Screenshot 2021-04-23 at 14 58 53

AlphaJuliettOmega avatar Apr 23 '21 13:04 AlphaJuliettOmega

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.

AlphaJuliettOmega avatar Apr 23 '21 13:04 AlphaJuliettOmega