unsplash / react-trend Goto Github PK

Hi, first at all, nice job! I'm following this project months ago and I love it

I'm going to use it but first I need to know one thing

I was wondering if there is any way to show each point on the chart...

thank you!

Steps to Reproduce

Add "react-trend": "^1.2.4" to package.json and npm i

Observed Behaviour

npm WARN [email protected] requires a peer of react@ but none is installed. You must install peer dependencies yourself.

Expected Behaviour

I have React installed already (16.4.2). I even tried npm i react again. Maybe it's due to the @? i.e. no version specified in the peerDependencies section.

currently gradient can only be vertical. is it possible to make it support custom angles ?

Steps to Reproduce

<View> <Trend smooth autoDraw autoDrawDuration={3000} autoDrawEasing="ease-out" data={[0,2,5,9,5,10,3,5,0,0,1,8,2,9,0]} gradient={['#f72047', '#ffd200', '#1feaea']} radius={10} strokeWidth={2} strokeLinecap={'butt'} /> </View>

Observed Behaviour

Error
`Invariant Violation: Invariant Violation: View config not found for name stop. Make sure to start component names with a capital letter.

This error is located at:
in stop (created by Trend)
in linearGradient (created by Trend)
in defs (created by Trend)
in svg (created by Trend)
in Trend (at ComponentsScreen.js:230)
in RCTView (at View.js:44)
in RCTScrollContentView (at ScrollView.js:852)
in RCTScrollView (at ScrollView.js:977)
in ScrollView (at ComponentsScreen.js:33)
in ComponentsScreen (created by withState(ComponentsScreen))
in withState(ComponentsScreen) (created by Connect(withState(ComponentsScreen)))
in Connect(withState(ComponentsScreen)) (created by SceneView)
in SceneView (at createTabNavigator.js:39)
in RCTView (at View.js:44)
in RCTView (at View.js:44)
in ResourceSavingScene (at createBottomTabNavigator.js:113)
in RCTView (at View.js:44)
in ScreenContainer (at createBottomTabNavigator.js:103)
in RCTView (at View.js:44)
in TabNavigationView (at createTabNavigator.js:197)
in NavigationView (created by Navigator)
in Navigator (created by SceneView)
in SceneView (at StackViewLayout.js:793)
in RCTView (at View.js:44)
in AnimatedComponent (at StackViewCard.js:69)
in RCTView (at View.js:44)
in AnimatedComponent (at screens.native.js:59)
in Screen (at StackViewCard.js:57)
in Card (at createPointerEventsContainer.js:27)
in Container (at StackViewLayout.js:858)
in RCTView (at View.js:44)
in ScreenContainer (at StackViewLayout.js:311)
in RCTView (at View.js:44)
in AnimatedComponent (at StackViewLayout.js:307)
in Handler (at StackViewLayout.js:300)
in StackViewLayout (at withOrientation.js:30)
in withOrientation (at StackView.js:79)
in RCTView (at View.js:44)
in Transitioner (at StackView.js:22)
in StackView (created by Navigator)
in Navigator (at createKeyboardAwareNavigator.js:12)
in KeyboardAwareNavigator (at createAppContainer.js:388)
in NavigationContainer (at Navigation.js:10)
in NavigatorView (created by Connect(NavigatorView))
in Connect(NavigatorView) (at App.js:59)
in RCTView (at View.js:44)
in Provider (at App.js:56)
in App (at withExpoRoot.js:22)
in RootErrorBoundary (at withExpoRoot.js:21)
in ExpoRootComponent (at renderApplication.js:34)
in RCTView (at View.js:44)
in RCTView (at View.js:44)
in AppContainer (at renderApplication.js:33)

This error is located at:
in NavigationContainer (at Navigation.js:10)
in NavigatorView (created by Connect(NavigatorView))
in Connect(NavigatorView) (at App.js:59)
in RCTView (at View.js:44)
in Provider (at App.js:56)
in App (at withExpoRoot.js:22)
in RootErrorBoundary (at withExpoRoot.js:21)
in ExpoRootComponent (at renderApplication.js:34)
in RCTView (at View.js:44)
in RCTView (at View.js:44)
in AppContainer (at renderApplication.js:33)

node_modules/react-native/Libraries/Renderer/shims/ReactNativeViewConfigRegistry.js:95:8 in get
node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:3954:53 in createInstance
... 17 more stack frames from framework internals`

Image or video please.

Expected Behaviour

Technical Notes

Hey,

I wanted to include this component in one of my React Native app but I can't manage to get it working 😔
I get the following error Expected a component class, got [object Object]

I used the code from the demo to be sure I wasn't using a bad prop or something.

Is this component not compatible with RN or am I doing something wrong ?

Thanks,

EDIT: I think it's because of the use of SVGs in the component. I'll check on how to use them on RN.

Hi bro, first of all thanks for making such an awesome graph component!

How can I give background fill color to the svg along with the stroke. I want to achieve something like this below:

Any advice to proceed further?

Is it possible to draw a small dot on the graph to show a particular value ?

Using this to display the mean ratings trend of seasonal shows, so the data is reset with new shows on the first day of each season - leaving only a single value in the array.

Steps to Reproduce

return <Trend data={[1]}/>

Observed Behaviour

• Errors to console with nothing rendered in DOM (breaks rest of the component from being rendered)

Trend.js?81b8:67 Uncaught TypeError: Cannot read property 'getTotalLength' of undefined
    at Trend.componentDidMount (eval at <anonymous> (bundle.js:3852), <anonymous>:76:34)
    at eval (eval at <anonymous> (bundle.js:3342), <anonymous>:265:25)
    at measureLifeCyclePerf (eval at <anonymous> (bundle.js:3342), <anonymous>:75:12)
    at eval (eval at <anonymous> (bundle.js:3342), <anonymous>:264:11)
    at CallbackQueue.notifyAll (eval at <anonymous> (bundle.js:1819), <anonymous>:76:22)
    at ReactReconcileTransaction.close (eval at <anonymous> (bundle.js:3545), <anonymous>:80:26)
    at ReactReconcileTransaction.closeAll (eval at <anonymous> (bundle.js:1197), <anonymous>:206:25)
    at ReactReconcileTransaction.perform (eval at <anonymous> (bundle.js:1197), <anonymous>:153:16)
    at batchedMountComponentIntoNode (eval at <anonymous> (bundle.js:1875), <anonymous>:126:15)
    at ReactDefaultBatchingStrategyTransaction.perform (eval at <anonymous> (bundle.js:1197), <anonymous>:140:20)

Expected Behaviour

• A flat line or no graph

Technical Notes

• Have you ever thought about adding Typescript typings to your project? I would really appreciate it.

Steps to Reproduce

• click the link

Observed Behaviour

• the link times out

Image or video please.

Expected Behaviour

https://www.unsplash.com/ should redirect to https://unsplash.com/ seemingly, or in the short term, link directly to https://unsplash.com/

Technical Notes

Steps to Reproduce

Put in data that is all the same

Observed Behaviour

Error: <path> attribute d: Expected number

Expected Behaviour

A flat line

Technical Notes

Can you please set the trend line to be flat (with no errors) if all values are the same or if there is a single value. Ideally you could set whether this should appear at the top, bottom, or middle of the graph.

Steps to Reproduce

When I have 2 Trend components the last one will overwrite the props gradient from the first one.

import React, { Component } from 'react';
import Trend from 'react-trend';

import './App.css';

export default class App extends Component {
  render() {
    return (
      <div className="container">
        <Trend
          smooth
          autoDraw
          autoDrawDuration={3000}
          autoDrawEasing="ease-out"
          data={[0, 2, 5, 9, 5, 10, 3, 5, 0, 0, 1, 8, 2, 9, 0]}
          gradient={['#DD0031', '#C3002F']}
          radius={10}
          strokeWidth={2.3}
          strokeLinecap={'round'}
          className="pos-absolute"
        />
        <Trend
          smooth
          autoDraw
          autoDrawDuration={3000}
          autoDrawEasing="ease-out"
          data={[2, 4, 10, 3, 1, 4, 9, 2, 3, 1, 6, 5, 5, 2, 7]}
          gradient={['#42b3f4']}
          radius={10}
          strokeWidth={2.3}
          strokeLinecap={'round'}
          className="pos-absolute"
        />
      </div>
    );
  }
}

Observed Behaviour

Expected Behaviour

Each component should have it's own gradient colors.

Technical Notes

Using:

• React: 15.4.2
• React-trend: 1.2.0

Steps to Reproduce

• Use Trend with SSR (ie Next.js

Observed Behaviour

• Trend flashes and disappears and logs Expected server HTML to contain a matching <linearGradient> in <defs>. to console.

Image or video please.

Expected Behaviour

• Trend animates and stays on page without an error