xDomain and LineChart.Dot

[ChaseK30]

When using xDomain to show the correct representation of time that the graph is showing it keeps the Dot at the very end of the graph instead of where the line is and does not accurately show the correct data on the tooltip when dragging

[othman95]

Same thing is happening with me

[cam-shaw]

Sorry all, that was my fault in the original implementation.
This has been merged into master to address the issue #144

[ChaseK30]

Hello @cam-shaw setting the xdomain to the timestamp of 9:30AM (when my data starts) and then setting the end to 11:59AM this is the result that I am getting still

[cam-shaw]

@ChaseK30 is this off of master? The changes haven't been merged into a release yet.

[ChaseK30]

Ah that’s my bad, I misunderstood. Is this planning to merged to a release?

[barrymichaeldoyle]

Looking forward to a new release that will have this (along with the gradient issue) fixed :)

[ChaseK30]

@cam-shaw Do you by chance know when a release will be put out with these features?

[cam-shaw]

Sorry @ChaseK30, I'm not sure when as that would be up to the maintainers. @arancauchi any idea when you might be able to look at some of the open PRs?

[barrymichaeldoyle]

Are the maintainers still alive?

[ChaseK30]

@cam-shaw been a while, i just recently pulled master and tried to get it running locally as well as pulling your reanimated update branch, getting a lot of errors on building though they look like this...

    The types returned by 'render()' are incompatible between these types.
      Type 'React.ReactNode' is not assignable to type 'import("/Users/chase/node_modules/@types/react/index").ReactNode'.

78     props.useAnimations ? <AnimatedLine {...props} /> : <Line {...props} />,
                              ~~~~~~~~~~~~

src/charts/candle/Candle.tsx:78:58 - error TS2786: 'Line' cannot be used as a JSX component.
  Its instance type 'Component<LineProps, any, any>' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'React.ReactNode' is not assignable to type 'import("/Users/chase/node_modules/@types/react/index").ReactNode'.

78     props.useAnimations ? <AnimatedLine {...props} /> : <Line {...props} />,
                                                            ~~~~

src/charts/candle/Candle.tsx:80:28 - error TS2786: 'AnimatedRect' cannot be used as a JSX component.
  Its instance type 'Component<AnimateProps<RectProps>, any, any>' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'React.ReactNode' is not assignable to type 'import("/Users/chase/node_modules/@types/react/index").ReactNode'.

80     props.useAnimations ? <AnimatedRect {...props} /> : <Rect {...props} />,
                              ~~~~~~~~~~~~

src/charts/candle/Candle.tsx:80:58 - error TS2786: 'Rect' cannot be used as a JSX component.
  Its instance type 'Component<RectProps, any, any>' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'React.ReactNode' is not assignable to type 'import("/Users/chase/node_modules/@types/react/index").ReactNode'.

80     props.useAnimations ? <AnimatedRect {...props} /> : <Rect {...props} />,
                                                            ~~~~

src/charts/candle/Candles.tsx:40:6 - error TS2786: 'Svg' cannot be used as a JSX component.
  Its instance type 'Component<SvgProps, any, any>' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'React.ReactNode' is not assignable to type 'import("/Users/chase/node_modules/@types/react/index").ReactNode'.

40     <Svg width={width} height={height} {...props}>
        ~~~

src/charts/candle/Chart.tsx:42:8 - error TS2786: 'View' cannot be used as a JSX component.
  Its instance type 'View' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'React.ReactNode' is not assignable to type 'import("/Users/chase/node_modules/@types/react/index").ReactNode'.
        Type '{}' is not assignable to type 'ReactNode'.
          Type '{}' is missing the following properties from type 'ReactPortal': key, children, type, props

42       <View {...props}>{children}</View>
          ~~~~

src/charts/candle/Crosshair.tsx:93:6 - error TS2786: 'LongPressGestureHandler' cannot be used as a JSX component.
  Its element type 'ReactElement<any, any> | Component<LongPressGestureHandlerProps & RefAttributes<any>, any, any> | null' is not a valid JSX element.
    Type 'Component<LongPressGestureHandlerProps & RefAttributes<any>, any, any>' is not assignable to type 'Element | ElementClass | null'.
      Type 'Component<LongPressGestureHandlerProps & RefAttributes<any>, any, any>' is not assignable to type 'ElementClass'.
        The types returned by 'render()' are incompatible between these types.
          Type 'React.ReactNode' is not assignable to type 'import("/Users/chase/node_modules/@types/react/index").ReactNode'.

93     <LongPressGestureHandler
        ~~~~~~~~~~~~~~~~~~~~~~~

src/charts/candle/Crosshair.tsx:99:8 - error TS2786: 'Animated.View' cannot be used as a JSX component.
  Its instance type 'View' is not a valid JSX element.

99       <Animated.View style={StyleSheet.absoluteFill}>
          ~~~~~~~~~~~~~

src/charts/candle/Crosshair.tsx:100:10 - error TS2786: 'Animated.View' cannot be used as a JSX component.
  Its instance type 'View' is not a valid JSX element.

100         <Animated.View
             ~~~~~~~~~~~~~

src/charts/candle/Crosshair.tsx:111:10 - error TS2786: 'Animated.View' cannot be used as a JSX component.
  Its instance type 'View' is not a valid JSX element.

111         <Animated.View
             ~~~~~~~~~~~~~

src/charts/candle/CrosshairTooltip.tsx:98:8 - error TS2786: 'Animated.View' cannot be used as a JSX component.
  Its instance type 'View' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'React.ReactNode' is not assignable to type 'import("/Users/chase/node_modules/@types/react/index").ReactNode'.

98       <Animated.View
          ~~~~~~~~~~~~~

src/charts/candle/CrosshairTooltip.tsx:110:8 - error TS2786: 'Animated.View' cannot be used as a JSX component.
  Its instance type 'View' is not a valid JSX element.

110       <Animated.View {...props} style={[tooltip, rightTooltip, props.style]}>
           ~~~~~~~~~~~~~

src/charts/candle/HoverTrap/index.web.tsx:94:6 - error TS2786: 'View' cannot be used as a JSX component.
  Its instance type 'View' is not a valid JSX element.

94     <View
        ~~~~

src/charts/candle/Line.tsx:18:6 - error TS2786: 'Svg' cannot be used as a JSX component.
  Its instance type 'Component<SvgProps, any, any>' is not a valid JSX element.

18     <Svg style={StyleSheet.absoluteFill}>
        ~~~

src/charts/candle/Line.tsx:19:8 - error TS2786: 'SVGLine' cannot be used as a JSX component.
  Its instance type 'Component<LineProps, any, any>' is not a valid JSX element.

19       <SVGLine
          ~~~~~~~

src/charts/line/Chart.tsx:129:10 - error TS2786: 'View' cannot be used as a JSX component.
  Its instance type 'View' is not a valid JSX element.

129         <View {...props} style={[absolute && styles.absolute, props.style]}>
             ~~~~

src/charts/line/ChartPath.tsx:147:10 - error TS2786: 'View' cannot be used as a JSX component.
  Its instance type 'View' is not a valid JSX element.

147         <View style={viewSize}>
             ~~~~

src/charts/line/ChartPath.tsx:148:12 - error TS2786: 'Svg' cannot be used as a JSX component.
  Its instance type 'Component<SvgProps, any, any>' is not a valid JSX element.

148           <Svg width={width} height={height}>
               ~~~

src/charts/line/ChartPath.tsx:166:10 - error TS2786: 'View' cannot be used as a JSX component.
  Its instance type 'View' is not a valid JSX element.

166         <View style={StyleSheet.absoluteFill}>
             ~~~~

src/charts/line/ChartPath.tsx:167:12 - error TS2786: 'AnimatedSVG' cannot be used as a JSX component.
  Its instance type 'Component<AnimateProps<SvgProps>, any, any>' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'React.ReactNode' is not assignable to type 'import("/Users/chase/node_modules/@types/react/index").ReactNode'.

167           <AnimatedSVG animatedProps={svgProps} height={height}>
               ~~~~~~~~~~~

src/charts/line/Cursor.tsx:115:8 - error TS2786: 'LongPressGestureHandler' cannot be used as a JSX component.
  Its element type 'ReactElement<any, any> | Component<LongPressGestureHandlerProps & RefAttributes<any>, any, any> | null' is not a valid JSX element.

115       <LongPressGestureHandler
           ~~~~~~~~~~~~~~~~~~~~~~~

src/charts/line/Cursor.tsx:122:10 - error TS2786: 'Animated.View' cannot be used as a JSX component.
  Its instance type 'View' is not a valid JSX element.

122         <Animated.View style={StyleSheet.absoluteFill}>
             ~~~~~~~~~~~~~

src/charts/line/CursorCrosshair.tsx:67:8 - error TS2786: 'Animated.View' cannot be used as a JSX component.
  Its instance type 'View' is not a valid JSX element.

67       <Animated.View
          ~~~~~~~~~~~~~

src/charts/line/CursorCrosshair.tsx:80:10 - error TS2786: 'View' cannot be used as a JSX component.
  Its instance type 'View' is not a valid JSX element.

80         <View
            ~~~~

src/charts/line/CursorCrosshair.tsx:94:10 - error TS2786: 'View' cannot be used as a JSX component.
  Its instance type 'View' is not a valid JSX element.

94         <View
            ~~~~

src/charts/line/CursorLine.tsx:38:8 - error TS2786: 'Animated.View' cannot be used as a JSX component.
  Its instance type 'View' is not a valid JSX element.

38       <Animated.View style={vertical}>
          ~~~~~~~~~~~~~

src/charts/line/CursorLine.tsx:39:10 - error TS2786: 'Svg' cannot be used as a JSX component.
  Its instance type 'Component<SvgProps, any, any>' is not a valid JSX element.

39         <Svg style={styles.svg}>
            ~~~

src/charts/line/CursorLine.tsx:40:12 - error TS2786: 'SVGLine' cannot be used as a JSX component.
  Its instance type 'Component<LineProps, any, any>' is not a valid JSX element.

40           <SVGLine
              ~~~~~~~

src/charts/line/Dot.tsx:155:8 - error TS2786: 'AnimatedCircle' cannot be used as a JSX component.
  Its instance type 'Component<AnimateProps<CircleProps>, any, any>' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'React.ReactNode' is not assignable to type 'import("/Users/chase/node_modules/@types/react/index").ReactNode'.

155       <AnimatedCircle
           ~~~~~~~~~~~~~~

src/charts/line/Dot.tsx:163:10 - error TS2786: 'AnimatedCircle' cannot be used as a JSX component.
  Its instance type 'Component<AnimateProps<CircleProps>, any, any>' is not a valid JSX element.

163         <AnimatedCircle
             ~~~~~~~~~~~~~~

src/charts/line/Gradient.tsx:47:10 - error TS2786: 'Defs' cannot be used as a JSX component.
  Its instance type 'Component<{}, any, any>' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'React.ReactNode' is not assignable to type 'import("/Users/chase/node_modules/@types/react/index").ReactNode'.

47         <Defs>
            ~~~~

src/charts/line/Gradient.tsx:48:12 - error TS2786: 'LinearGradient' cannot be used as a JSX component.
  Its instance type 'Component<LinearGradientProps, any, any>' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'React.ReactNode' is not assignable to type 'import("/Users/chase/node_modules/@types/react/index").ReactNode'.

48           <LinearGradient
              ~~~~~~~~~~~~~~

src/charts/line/Gradient.tsx:59:10 - error TS2786: 'Defs' cannot be used as a JSX component.
  Its instance type 'Component<{}, any, any>' is not a valid JSX element.

59         <Defs>
            ~~~~

src/charts/line/Gradient.tsx:60:12 - error TS2786: 'LinearGradient' cannot be used as a JSX component.
  Its instance type 'Component<LinearGradientProps, any, any>' is not a valid JSX element.

60           <LinearGradient
              ~~~~~~~~~~~~~~

src/charts/line/Gradient.tsx:67:14 - error TS2786: 'Stop' cannot be used as a JSX component.
  Its instance type 'Component<StopProps, any, any>' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'React.ReactNode' is not assignable to type 'import("/Users/chase/node_modules/@types/react/index").ReactNode'.

67             <Stop offset="20%" stopColor={color} stopOpacity={0.15} />
                ~~~~

src/charts/line/Gradient.tsx:68:14 - error TS2786: 'Stop' cannot be used as a JSX component.
  Its instance type 'Component<StopProps, any, any>' is not a valid JSX element.

68             <Stop offset="40%" stopColor={color} stopOpacity={0.05} />
                ~~~~

src/charts/line/Gradient.tsx:69:14 - error TS2786: 'Stop' cannot be used as a JSX component.
  Its instance type 'Component<StopProps, any, any>' is not a valid JSX element.

69             <Stop offset="100%" stopColor={color} stopOpacity={0} />
                ~~~~

src/charts/line/Gradient.tsx:73:8 - error TS2786: 'AnimatedPath' cannot be used as a JSX component.
  Its instance type 'Component<AnimateProps<PathProps>, any, any>' is not a valid JSX element.

73       <AnimatedPath
          ~~~~~~~~~~~~

src/charts/line/Group.tsx:16:6 - error TS2786: 'View' cannot be used as a JSX component.
  Its instance type 'View' is not a valid JSX element.

16     <View {...props}>
        ~~~~

src/charts/line/Highlight.tsx:68:8 - error TS2786: 'AnimatedPath' cannot be used as a JSX component.
  Its instance type 'Component<AnimateProps<PathProps>, any, any>' is not a valid JSX element.

68       <AnimatedPath
          ~~~~~~~~~~~~

src/charts/line/HorizontalLine.tsx:100:6 - error TS2786: 'AnimatedLine' cannot be used as a JSX component.
  Its instance type 'Component<AnimateProps<LineProps>, any, any>' is not a valid JSX element.

100     <AnimatedLine
         ~~~~~~~~~~~~

src/charts/line/HoverTrap/index.web.tsx:88:6 - error TS2786: 'View' cannot be used as a JSX component.
  Its instance type 'View' is not a valid JSX element.

88     <View
        ~~~~

src/charts/line/Path.tsx:57:8 - error TS2786: 'AnimatedPath' cannot be used as a JSX component.
  Its instance type 'Component<AnimateProps<PathProps>, any, any>' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'React.ReactNode' is not assignable to type 'import("/Users/chase/node_modules/@types/react/index").ReactNode'.

57       <AnimatedPath
          ~~~~~~~~~~~~

src/charts/line/Tooltip.tsx:160:6 - error TS2786: 'Animated.View' cannot be used as a JSX component.
  Its instance type 'View' is not a valid JSX element.

160     <Animated.View
         ~~~~~~~~~~~~~

src/components/AnimatedText.tsx:50:6 - error TS2786: 'AnimatedTextInput' cannot be used as a JSX component.
  Its instance type 'Component<AnimateProps<TextInputProps>, any, any>' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'React.ReactNode' is not assignable to type 'import("/Users/chase/node_modules/@types/react/index").ReactNode'.

50     <AnimatedTextInput
        ~~~~~~~~~~~~~~~~~

not sure if youve run into this before i havent changed a single thing, just went into example folder and yarn installed and then yarn installed at the top level as well