React component for rendering simple sparklines
Home Page: http://kyleamathews.github.io/react-sparkline/
License: MIT License
React component for rendering simple sparklines. Companion to react-micro-bar-chart.
npm install react-sparkline
var Sparkline = require('react-sparkline');
// Pass in an array of values.
<Sparkline data={anArrayOfValues} />
// Sparkline of dates + values
// Pass in an array of objects something like
values = [
{
date: "2014-06-23T00:21:59.271Z"
value: 2
},
{
date: "2014-06-24T00:21:59.271Z"
value: 4
}
]
<Sparkline data={values} />
Because d3 is only called in componentDidMount, it's not possible to pass a new data prop to have the graph transform to suit the new values. - see https://github.com/KyleAMathews/react-sparkline/blob/master/src/index.cjsx#L18
It may be as simple as just adding a componentDidUpdate handler that just calls the same renderSparkline method.
I see you have your own enhancement request for animated updates but I think handling updates at all will be a good first step.
Hello, cool little library just having a play around with it.
It would be nice to support empty datasets without crashing, right now there is an svg error due to an attempted calculation on an empty array.
This is line is the particular issue on the surface though I'm sure more will have to change to support the empty data prop - https://github.com/KyleAMathews/react-sparkline/blob/master/src/index.cjsx#L58
Personally I would expect just an empty/transparent block when data is an empty array.
Found this component linked from https://github.com/brillout/awesome-react-components - was going to use it in a demo to show how you can easily leverage community effort but had to abort because you've used React.createClass which got deprecated.
Would you be up for a PR to modernise this to work on React 16+? I'll do the PR if you'd be happy to merge it.
every 1/10 second calculate speed by measuring before and after coordinate and distance traveled in that time.
amazing work!
is this component support react-native?
If data == array of ints, then render as is now, else if object, assume there's a date + value key
React
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
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
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.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.