borisyankov / react-sparklines Goto Github PK

I would like to be able to set the SparkLineSpot to a different data item then the last one.
Could be implemented as setting which index in data you want the spot on:

<Sparklines data={sampleData}>
    <SparklinesLine color="#56b45d" />
    <SparklinesSpots xpos={10} style={{ fill: "#56b45d" }} />
</Sparklines>

Thanks for your work on this project! It looks really nice.

I tried passing in a Float32Array to data, but it failed on a.concat(b) because concat does not exist on typed arrays.

Hey @borisyankov, thanks for merging #83

Would be great if you bumped the version and published to npm 😄

Hi,

I use width set to 100% when I use raw sparklines in jQuery like

            $(".sparkline").sparkline([20, 34, 43, 43, 35, 44, 32, 44, 52, 45], {
                type: 'line',
                lineColor: '#FFFFFF',
                lineWidth: 3,
                fillColor: '#404652',
                height: 47,
                width: '100%'
            });

I love your react component, but you are only accepting only React.PropTypes.number for the width attribute in the component. At the moment if i don't set width it defaults to 240px. Is it possible to accept percentage values?

As of today's release, the module fails to import in a React Redux Webpack setup using this boilerplate from the "Modern React with Redux" tutorial on Udemy. It results in:
Uncaught TypeError: Super expression must either be null or a function, not undefined

This is my first time using React, Redux, and your module, so I have no idea what I'm talking about in terms of troubleshooting. I just reverted the package to 1.6.0 and it fixed the issue.

Depending directly on React from reusable components can cause problems stemming from competing React instances, and version conflicts. See Two React Tips.

One way around this is to export a function, that takes an options object & allow users to inject the React dependency in the options object. See Baby's First Reaction for an example.

Currently the package published on npm depends on ES6 source code, which is a PITA for anyone consuming this package needs to figure out how to special case react-sparklines in their build system, if they're using one. Can't even use an existing ES6 setup if you're not using stage 0 features.

Please set the package.json main to point only at built source in the published package – this enables anyone to use react-sparklines whether they're using a build tool, ES6 or whatever. This is exactly the usecase that npm prepublish scripts are designed for.

well i dont know what is wrong, any clue guys?

Line 1: Unexpected reserved word
You may need an appropriate loader to handle this file type.
| import React from 'react';
| import SparklinesLine from './SparklinesLine';
| import SparklinesBars from './SparklinesBars';
@ ./~/react-sparklines/index.js 1:17-47

Cool component!
I noticed today that a sparkline that i'm creating requires to have data that is not actually visible on the graph. For example, my limit was set to 20. So naturally I was .pop()ing off of my array to save memory (hoping my sparkilne can work for weeks without refreshing browser, so I was attempting to reduce memory leaks). However, I noticed that the line stopped scrolling when this was done.

Just wondering why we need to keep the old data.

Is there any way to add a tooltip?

I noticed that using array.push('newitem') doesn't quite work for updating the data feeding a dynamic sparkline. The react objects update properly, but the sparkline doesn't update. The fix was simply to use array = array.concat() instead. Same apparent result on the array, but the sparkline updates as new points are added.

Now, I'm having a similar issue with trying to update a current point on a sparkline. For example, the final point may update throughout the day. It is not a new day's data, so I'm not looking to add it as an incremental point. I'm looking to update the existing point.

I have tried array[index] = newvalue and array.splice(index,1,newvalue). Each updates the source array properly, but neither triggers the corresponding sparkline point to update.

Any suggestions?

For a more subtle style, and help align appearance if used with other graphing libs.

Hi,
Thanks for the great work.
How about create a vue version sparklines?

I started playing with react-sparklines to use in tables generated from R data, and I noticed that the SparklinesBars did not line up. Here is a quick demo of the problem http://blockbuilder.org/timelyportfolio/04832df8bad50a58e659707d3b8f423d. I think this issue is easily solved by setting scale(1,-1) and building up from the height. I will submit a pull shortly once I test to make sure these still line up with composed sparklines, such as bar+line.

While trying to use the "custom" option in SparklinesReferenceLine, I noticed that the line would never show up. However, using a static value of anything below 25 did seem to work.

It appears to be due to the fact that the only data that SparklinesReferenceLine has is points, which is already scaled here: https://github.com/borisyankov/react-sparklines/blob/master/src/Sparklines.js#L45

This bug isn't just limited to custom values however. Using types like "max" and "min" will produce the opposite of the desired result since they are working on svg coordinates, not the data.

To help illustrate what's needed to fix the bug, here's the workaround I used for a custom reference value:

    var min = Math.min.apply(Math, this.props.data);
    var max = Math.max.apply(Math, this.props.data);
    var width = 120;
    var height = 30;
    var margin = 2;
    var limit = null;

    var points = DataProcessor.dataToPoints([max], limit, width, height, margin, max, min);
    var point = points[0];
    return (
      <Sparklines data={this.props.data}>
        <SparklinesLine />
        <SparklinesReferenceLine type="custom" value={point.y} />
      </Sparklines>
    );

It seems necessary for Sparklines to start passing down data to its children.

I'm getting an error in the browser when using this package along with react v15.4.2:

Unknown prop `margin` on <div> tag.  Remove this prop from the element.

I put up a simple demo to reproduce the issue here: http://www.webpackbin.com/N1tuFIpfZ

If I have something like this:

<Sparklines data={this.props.data}>
    <SparklinesLine color={this.props.color} />
</Sparklines>

// where data = [1,2,1,2,1]
//           color = "blue"

and i update this.props.color, but I don't update this.props.data - then SparklinesLine does not re-render and the color doesn't change.

If i change the data and the color, they both update correctly.

I believe this issue is similar to the other few that are open regarding the shouldComponentUpdate function in Sparklines component.

If you go to the demo above and run, the color is changed but the Sparkline doesn't update. If you change the data prop inside the code - you will see that it updates both the data and the color correctly.

Will it be possible to show near realtime ping latency/performance using react sparklines?

Most people are too lazy to clone a repo or install a module just to see what it looks like, me included 😉

Looking forward to seeing what it looks like!

I have this error when I use SparklineBars as per your exampe (in 1.3 and 1.2.2).

Adding the 'points' prop as an array such as [5,10,5,20,10,50] which SHOULD work for React.PropTypes.arrayOf(React.PropTypes.number).isRequired.

For some reason this doesn't happen, and it gives me an error:

Warning: Failed propType: Invalid prop points[0] of type object supplied to SparklinesBars, expected number. Check the render method of Sparklines.

Thoughts?

SparklineBars provided with data looking like [0, null, null, 0, null] will draw bars with 100% of sparkline height.

Should be 0.

Would like to be able to use a pre-built lib suitable for browser <script> tag. Can this be provided in the repo? or make available elsewhere.

<Sparklines width={100} height={20} margin={2} data={[0,1]}>
    <SparklinesReferenceLine type="min" />
</Sparklines>

should be at the bottom. Right now it looks like this:

Same goes for max

why you had to wrap the actual component with index.js (using commonJS) in the root folder?
why not requiring directly the component from webpack itself?

hope it is OK to ask here a quick question.

I suggest you to rename components until this component became very popular:

• SparklinesLine to Line
• SparklinesBars to Bars
• SparklinesSpots to Spots
• SparklinesReferenceLine to ReferenceLine
• SparklinesNormalBand to NormalBand

There is no need in Sparklines prefix, because everyone use common.js or ES6 modules, right?

Please change the stdev variable name in SparklineNormalBand.js from stdev to dataStdev

I see you can provide a single hex colour to the line fill, is it possible for gradients so I can achieve something like:

Has anyone looked into this yet? Overlaying two data sets on the same graph.
Previously I have used: http://omnipotent.net/jquery.sparkline/ and it had that capability.

Hi !! i'm having this warning on webbrower dev console

"Warning: You are manually calling a React.PropTypes validation function for the color prop on SparklinesLine. This is deprecated and will not work in the next major version. You may be seeing this warning due to a third-party PropTypes library. See https://fb.me/react-warning-dont-call-proptypes for details." bundle.js:38532:10

With data array of constant value in it, the line disappeared.

           <Sparklines data={[1,1,1,1,1,1]}>
                <SparklinesLine />
            </Sparklines>

The reason is the way DataProcessor.dataToPoints() handles max===min situation incorrectly.

I prepared a fix to put such line in the middle of plot area which looks good to me.

See:

First of all, thank you so much for the library. It's been invaluable in this project I'm working on. Thanks thanks.

I'm looking to have the sparkline be the entire width of the browser. The issue is when someone resizes the browser I have a function that is called that does a forceUpdate() on the React component. This doesn't re-render the component to the new div width. Only updating the data does that.

Any ideas?

I created a sparkline with constant values (e.g. [10, 10, 10, 10, 10]. When adding a "mean" reference line, it displays a few pixels under the trend line. Clearly, in this case, it should be directly on it.

You can kind of see this happening in the demos. Seems the width calculations are off a bit
causing the last bar to extend outside the width of the svg element.

I think values passed to SVG tags should be sanitized to resolve this. I'll try to do a PR.

There is a issue with displaying of last bar for me. Only 2-5px visible though. Also then data array have only one element, the bar is not displayed at all.

I believe this was introduced by #40 in src/DataProcessor.js L#17, y: (max === min ? 1 : (max - d)...

It's accepting the data passed in and checking if it should render:

    shouldComponentUpdate(nextProps) {
        return nextProps.width != this.props.width ||
            nextProps.height != this.props.height ||
            nextProps.margin != this.props.margin ||
            nextProps.data.length != this.props.data.length ||
            nextProps.data.some((d, i) => d !== this.props.data[i]);
    }

so data={this.state.data} -> passed by reference to your props.data.

higher up if a change happens in data array (an item), it is comparing it against itself. nextProps.data.some((d, i) => d !== this.props.data[i]);

a quick workaround is to do data={this.state.data.slice()} upstream but it probably should be handled at your end or a different diff mechanism should be provided, eg forceUpdate={true}.

in my use case, the array is already limited to 30 points so length won't ever change, it's shifting first member and pushing to end. I can force an update by toggling margin to a diff value on every tick locally

I'm using median reference values on https://status.postmarkapp.com/ and they look quite weird:

I'll try to investigate the issues and add the test and do a PR.

It appears that the code which can be found on NPM isn't synced with the GitHub repo. When I install the package via NPM, it is missing the "responsive" part. I tried updating/reinstalling but nothing helps. Can someone fix this?

It seems these lines https://github.com/borisyankov/react-sparklines/blob/master/src/Sparklines.js#L32-L34 should compare nextProps with this.props, but now it is trying to compare with nextState which is null and this throws an error TypeError: Cannot read property 'width' of null

Should be as easy as adding travis.yml I think.

y-axis on line charts should always start at zero. If there are negative numbers in the data, y-axis size should be abs(min(data)) + abs(max(data)).

React 15 has nice performance enhancements and better svg support. I imagine sparklines probably works with it, but it would be nice to bump support up if it is fully compatible.

As I understand it, by omitting the height and width attributes on the svg element it will cause the spark line to fill the parent container. This is the behavior I hoped for.

I envision the default settings to only apply a height and width to the viewbox. And expose two new properties on the component: svgHeight and svgWidth

Additionally, I think it would be great to expose preserveAspectRatio with a default value of 'none'.

If you agree with this direction I'll happily submit a pull request

Hi,

I've cloned the repo, followed the install instructions but the webpack doesn't work. Module not found all the time.

Lovely looking library though!

While a sparkline is useful as a fast way of seeing the health of something, mentally I expected hovering over a point to give me the exact datapoint. I'm not sure if it's possible with the svg implementation behind the scenes, but might be a good feature

yep warning on simple import: warning.js:36 Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.

just a warning, but it will be an error somewhere in time.

Usually all math libs refererring to mean as average. This is not the case with this library.

Can you reference the algorythm behind the mean here and also add tests for it?