recharts / react-smooth Goto Github PK
View Code? Open in Web Editor NEWreact animation
License: MIT License
react animation
License: MIT License
I thinks this actual for all src/*.js
I am trying to animate Recharts components like ReferenceDot, ReferenceLine etc. can this library help in that ?
Since this is created by the same set of people, is there an easy integration between this and Recharts ?
We updated react-smooth
from 1.0.2 to 1.0.5 and started getting this error with treemaps:
Uncaught Invariant Violation: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
at vendors.js:54289:28
at checkForNestedUpdates (vendors.js:54292:7)
at scheduleUpdateOnFiber (vendors.js:52563:3)
at Object.enqueueSetState (vendors.js:44274:5)
at Animate.Component.setState (vendors.js:71455:16)
at Animate.componentDidUpdate (vendors.js:59325:14)
at commitLifeCycles (vendors.js:51238:22)
at commitLayoutEffects (vendors.js:53987:7)
at HTMLUnknownElement.callCallback (vendors.js:31521:14)
at Object.invokeGuardedCallbackDev (vendors.js:31571:16)
I am currently using recharts, but trying to lock versions with npm shrinkwrap on npm version 2.15.11 complains with the following error message extraneous: [email protected] /node_modules/react-smooth/node_modules/history
react-transition-group
has evolved since version 2.5
(the one marked in package.json
).
If someone with this library (or using recharts which requires this) is willing to use any new feature of RTG he will need two different versione of RTG.
Version 4.0.1
of RTG was released last year.
This library currently doesn't have react v17 as a peer-dependency,
Therefore,
[email protected]" has incorrect peer dependency "react@^15.0.0 || ^16.0.0".
[email protected]" has incorrect peer dependency "react-dom@^15.0.0 || ^16.0.0".
So updating this is appreciated.
Currently <Animate/>
's componentWillReceiveProps
will start the manager to load the animation. In which a setTimeout
is added to change styles.
A common situation could be:
set <Animate>
's to
-> state1
, some static (out of the animation) value to -> value1
Animate.state.style
isstate1
now
set <Animate>
's from
-> state2
, to
-> state3
, the static value -> value2
Now Animate.state.style
is state1
. Because the .state.style
update is triggered in the animationManager in a setTimeout
, so it will be updated after current react update loop.
So in this loop, the children state will be (value2, state1)
, which is not desirable( should be (value2, state2)
).
I think it's better to trigger a state update in Animate.componentWillReceiveProps
to set current state to
props.from
, or maybe I've missed something?
The chart animation breaks sometimes in my ui, when unmounting and mounting frequently.
I narrowed it down to this function, in easing.js:
var multyTime = function multyTime(params, t) {
return params.map(function (param, i) {
return param * Math.pow(t, i);
}).reduce(function (pre, curr) {
return pre + curr;
});
When this function is supplied with these arguments, it returns NaN
:
This NaN
value eventually pass all the way up to renderVerticalRect
in Area.js, at which point an error occurs.
For now, I avoid the problem by just adding a check inside multyTime
, which replaces NaN
with 0
. But it would be good to have some fix in the master repo.
EDIT
Interesting. So while the arguments above were indeed the exact values used when the NaN
was produced, when running it again as a watch or in the console (while paused in the debugger), it does not return NaN
.
However, when I run a loop, running that exact same line, it does produce NaN
!
Not only that: the loop has to have a certain number of loops to trigger it!
I used binary search, and narrowed it down to a single number: 8942
In other words, when I run the following, "NaN produced!" is output to the console:
for (var i = 0; i < 8942; i++) {
if (Number.isNaN(multyTime([0,0.30000000000000004,2.4,-1.7000000000000002], 0.9196919176875596)))
console.log("NaN produced!");
}
But when I run this next version, "NaN produced!" is not output to the console:
for (var i = 0; i < 8941; i++) {
if (Number.isNaN(multyTime([0,0.30000000000000004,2.4,-1.7000000000000002], 0.9196919176875596)))
console.log("NaN produced!");
}
And this is completely repeatable. I did it back and forth many times, and it always triggers when the loop-count is 8942 or over, and never when it's under.
EDIT2
Okay, I did further testing by running the above, not while paused in the debugger, but just calling multyTime
from the console. There, the issue above is not present. Instead, "NaN produced" is never produced, even when it's run with a loop-count of 10,000,000. So something weird was going on there.
EDIT3
Okay, I finally reproduced the problem to something that you can just paste into a console window (for example, on this page), and see the NaN
result. Here it is:
// if you decrease the loop-count by even one, the `NaN` will not appear
// (possibly it's platform-dependent, so try a higher number if you don't get the NaN detection + log right away)
for (var i = 0; i < 6086; i++) {
var params = [0,0.75,-.75,1];
var t = 0;
var result1 = params.map(function(param, i) {
return param * Math.pow(t, i);
});
var result2 = result1.reduce(function(pre, curr) {
return pre + curr;
});
if (Number.isNaN(result2)) {
console.log("NaN produced at loop: " + i);
break;
}
}
Once the NaN
was produced, I then checked the value of result1
and result2
.
result1: [0, 0, -0, 0]
result2: NaN
Interesting.
However, when I re-ran the code that gave result2's NaN
:
result1.reduce(function (pre, curr) {
return pre + curr;
});
It returned 0
.
So, it seems to be a strange and rare bug in Chrome, that only happens when you run a particular sequence of code many times in a row. But at least it's reproducible! So I should be able to submit a bug report, and hopefully they'll make a fix eventually.
Anyway, given that this bug does exist (you can try it right now to verify), and that it sometimes happens in actual usage of this library, should there perhaps be some sort of handling for it to prevent the resulting animation-breakage issue?
Technical info
OS Name: Microsoft Windows 10 Pro
Version: 10.0.14393 Build 14393
System Type: x64-based PC
Processor: AMD FX(tm)-8320 Eight-Core Processor, 3500 Mhz, 4 Core(s), 8 Logical Processor(s)
Chrome: "Version 59.0.3063.4 (Official Build) dev (64-bit)"
Note: I tried the code above (also with a higher loop-count), and the error was not reproduced in Chromium, Firefox, or Edge.
Scratch that: the error is reproduced in Chromium, I just needed to update it to the latest version. (from "Version 59.0.3053.0 (Official Build) (64-bit)" to "Version 59.0.3060.0 (Official Build) (64-bit)")
Good, so now we even know what update range introduced the problem. Now time to make the Chrome/Chromium bug-report...
Hey. After switching to react 16 and reinstalling dependencies I came across this error:
ERROR in ./node_modules/react-smooth/lib/AnimateGroupChild.js
Module not found: Error: Can't resolve 'react-transition-group/Transition' in
'\node_modules\react-smooth\lib'
@ ./node_modules/react-smooth/lib/AnimateGroupChild.js 21:18-62
@ ./node_modules/react-smooth/lib/AnimateGroup.js
@ ./node_modules/react-smooth/lib/index.js
@ ./node_modules/recharts/es6/polar/RadialBar.js
@ ./node_modules/recharts/es6/index.js
@ ./src/components/Dashboard/Main/index.js
@ ./src/components/Dashboard/index.js
@ ./src/components/App/index.js
@ ./src/index.js
@ multi (webpack)-dev-server/client?http://localhost:5000 webpack/hot/dev-server babel-polyfill react react-dom ./src/index.js
I dug into the lib folder and saw you are trying to import from react-transition-group/Transition but when I changed it to import { Transition } from react-transition-group it started working.
Can you please investigate?
Using esbuild to build a project that includes recharts
gives the following warning:
▲ [WARNING] Comparison using the "!==" operator here is always true [equals-new-object]
.wrangler/tmp/pages-LvycvA/functionsWorker-0.3826531471696346.mjs:42421:46:
42421 │ ...ibuteName && [attributeName] !== from || !attributeName && s...
╵ ~~~
Equality with a new object is always false in JavaScript because the equality operator tests object identity. You need to write code to compare the contents of the object instead. For example, use "Array.isArray(x) && x.length === 0" instead of "x === []" to test for an empty array.
I traced that code back to react-smooth
's Animate
component:
Lines 100 to 103 in 3ad17a7
Based on the git history, it looks like the intended code is this:
- if ((attributeName && [attributeName] !== from) || (!attributeName && style !== from)) {
+ if ((attributeName && style[attributeName] !== from) || (!attributeName && style !== from)) {
I don't know enough about this library to determine whether this logic bug has any practical impact.
I wrote this using react-smooth which kind of works like a collapsible sidebar on the left
import React, { Component } from 'react';
import Animate from 'react-smooth';
class SimpleAnime extends Component {
constructor(props) {
super(props);
this.state = {
from : -400,
to: -400
};
}
handleClick() {
if(this.state.to == this.state.from) {
this.setState({
from: -400,
to: -5
});
}
else {
this.setState({
from: this.state.to,
to: this.state.from
});
}
}
render() {
return (
<div className="simple">
<button onClick={this.handleClick.bind(this)}>click me!</button>
<Animate from={{ x: this.state.from }} to={{ x: this.state.to }}>
{({ x }) => (
<div
style={{
width: 300,
height: 800,
backgroundColor: 'green',
transform: `translate(${x}px, 0)`,
}}
>
</div>
)}
</Animate>
</div>
);
}
}
export default SimpleAnime;
How to make the collapsible sidebar on the right ?
I mean what values should to and from pros be given such that the div moves from right end to the width of div ?
Currently the following files import the entire Lodash package:
These could be refactored to the following respectively:
import isEqual from 'lodash/isEqual';
import isNumber from 'lodash/isNumber';
This would vastly cut down the bundle size of react-smooth
in production. https://bundlephobia.com/[email protected]
There are some indications from users that Animations from react-smooth are causing the graph to render partially / in an incomplete state. Users have been using isAnimationActive={false}
to disable animations to workaround the bug. See recharts
issues:
<Animate to={0} from={1} attributeName="opacity">
<div />
</Animate>
Should be this
<Animate to="0" from="1" attributeName="opacity">
<div />
</Animate>
Based on this https://github.com/recharts/react-smooth/blob/master/src/Animate.js#L15 and this https://github.com/recharts/react-smooth/blob/master/src/Animate.js#L16
I have tried working with responsive container in recharts using piechart and legend but this creates many issues like gettine "negative rect value" this value only becomes negative while you try to align legend to left or right. The piechart is not working responsive when I align Legend to left or right.
{dataStore.map((entry, index) => (
<Cell key={cell-${index}
} fill={colors[index % colors.length]} />
))}
[email protected] requires a peer of react@^0.14.0 || ^15.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react-dom@^0.14.0 || ^15.0.0 but none is installed. You must install peer dependencies yourself.
We currently use recharts in our project and after the lastest update of react-smooth, our build is breaking with the following error:
index.js:1Uncaught SyntaxError: Unexpected token import
...
import Animate from './Animate';
in react-smooth/lib/index.js
could you please have a look and release a patch.
thanks.
This line https://github.com/recharts/react-smooth/blob/master/src/util.js#L44
is causing IE9 to blow up.
SCRIPT438: Object doesn't support property or method 'bind'
You'd think you'd be able to polyfill bind or something and have that fix it, but I have not been able to make that work with a number of polyfills.
Replacing:
var log = exports.log = console.log.bind(console);
with:
var log = exports.log = function(){};
Fixes the issue.
It seems weird that you are exporting console.log as your log method.
First off, thanks so much for this package, it's made so much of my working life easier with react + charts. :)
However, as of the most recent release of react-smooth, I seem to have hit an issue related to the module bundling and transforming changes.
ERROR in /main-60bfb053936fa59d6901.js from UglifyJs
SyntaxError: Unexpected token: name (Animate) [./~/recharts/~/react-smooth/lib/index.js:1,0]
We import specific charts that we need as ES6 imports, as in import { Surface, Symbols } from 'recharts';
We're running this through UglifyJS, and hitting a syntax error with "Animate" as shown above, in browser that translates to an unexpected token 'import'
error. This is the index.js file as required by recharts@^0.20.2.
function(module, exports) {
import Animate from './Animate';
import { configBezier, configSpring } from './easing';
import { translateStyle } from './util';
import AnimateGroup from './AnimateGroup';
export { configSpring, configBezier, AnimateGroup, translateStyle };
export default Animate;
}
I noticed the recent es6 import changes to the release, and our build broke ~ 2 hours ago, around the time the new version was tagged, so I'm guessing these two things are related.
Quick fix would be pinning the version of react-smooth that recharts uses to 0.1.17, and updating that once a build process fix is found, (I've had a look around, but I'm not sure what winds up getting published to npm/required by the main 'recharts' package. If all else fails I'll fork the main package and pin the dependency and keep an eye out for an upstream fix).
This package is deprecated and will no longer work with React 16+. We recommend you use TransitionGroup from react-transition-group instead. [source]
Short term alternative: react-transition-group
I tried exactly same as Example, but it fails with:
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `AnimatedComponent`.
Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `AnimatedComponent`.
This is the code:
import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import { Animate } from 'react-smooth';
const steps = [
{
style: {
opacity: 0,
},
duration: 400,
},
{
style: {
opacity: 1,
transform: 'translate(0, 0)',
},
duration: 1000,
},
{
style: {
transform: 'translate(100px, 100px)',
},
duration: 1200,
}];
class AnimatedComponent extends React.Component {
render() {
return (
<Animate steps={steps}>
<h1>Animate!</h1>
</Animate>
);
}
}
ReactDOM.render(
<AnimatedComponent />,
document.getElementById('entry'));
Using React 15.4 with Browserify 13.3.0 and react-smooth 0.1.20. How can I solve this?
Can be seen using npm run kit here
https://npm.runkit.com/react-smooth
from our build
D:\\node_modules\react-smooth\lib\index.js:1
--
02-Oct-2018 16:15:29 | ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import Animate from './Animate';
02-Oct-2018 16:15:29 | ^^^^^^
02-Oct-2018 16:15:29 |
02-Oct-2018 16:15:29 | SyntaxError: Unexpected token import
02-Oct-2018 16:15:29 |
02-Oct-2018 16:15:29 | at transformAndBuildScript (node_modules\jest-runtime\build\transform.js:321:12)
02-Oct-2018 16:15:29 | at Object.<anonymous> (node_modules\recharts\lib\component\Tooltip.js:12:20)
02-Oct-2018 16:15:29 | at Object.<anonymous> (node_modules\recharts\lib\index.js:291:40)
const steps = [{
style: {
opacity: 0,
},
duration: 400,
easing: 'ease-in-out'
}, {
style: {
opacity: 1,
transform: 'translate(0, 0)',
},
duration: 1000,
easing: 'ease-out'
}, {
style: {
transform: 'translate(100px, 100px)',
},
duration: 1200,
easing: 'spring'
}];
render() {
return (
<div className="simple">
<button onClick={this.handleClick.bind(this)}>click me!</button>
<Animate steps={steps} >
<div style={{
width: 100,
height: 100,
backgroundColor: 'red'
}}
>
</div>
</Animate>
</div>
);
}
const steps = [{
style: {
opacity: 0,
},
duration: 400,
easing: 'ease-in-out'
}, {
style: {
opacity: 1,
transform: 'translate(0, 0)',
},
duration: 1000,
easing: 'ease-out'
}, {
style: {
transform: 'translate(100px, 100px)',
},
duration: 1200,
easing: 'ease-in'
}];
render() {
return (
<div className="simple">
<button onClick={this.handleClick.bind(this)}>click me!</button>
<Animate steps={steps} onAnimationEnd={()=>{console.log('aaa');}}>
{
(json) => {
console.log(json);
return (
<div style={{
width: 100,
height: 100,
backgroundColor: 'red'
}}
>
</div>
);
}
}
</Animate>
</div>
);
}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.