react-sparklines - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

demo/index.jsx

		import React from 'react';
		import Sparklines from '../src/Sparklines';

		React.render(<Sparklines data={[20, 30, 15, 40, 18, 35, 22, 28, 33, 55, 14]} limit={10} lineColor="#0a83d8" fill="#0a83d8" />, document.body);
		class Examples extends React.Component {
		render() {
		return (
		<div>
		<Sparklines data={[20, 30, 15, 40, 18, 35, 22, 28, 33, 55, 14]} limit={10} lineColor="#1c8cdc" fill="#1c8cdc" endSpotColor="#1c8cdc" />
		<Sparklines data={[20, 30, 15, 40, 18, 35, 22, 28, 33, 55, 14]} bars="true" limit={10} lineColor="#0a83d8" fill="#0a83d8" endSpotColor="#0a83d8" />
		<Sparklines data={[20, 30, 15, 40, 18, 35, 22, 28, 33, 55, 14]} limit={10} lineColor="#fa7e17" fill="#fa7e17" endSpotColor="#fa7e17" />
		<Sparklines data={[20, 30, 15, 40, 18, 35, 22, 28, 33, 55, 14]} limit={10} lineColor="#ea485c" fill="#ea485c" endSpotColor="#ea485c" />
		<Sparklines data={[20, 30, 15, 40, 18, 35, 22, 28, 33, 55, 14]} limit={10} lineColor="#56b45d" fill="#56b45d" endSpotColor="#56b45d" />
		<Sparklines data={[20, 30, 15, 40, 18, 35, 22, 28, 33, 55, 14]} limit={10} lineColor="#8e44af" fill="#8e44af" endSpotColor="#8e44af" />
		</div>
		);
		}
		}

		React.render(<Examples />, document.body);

package.json

		{
		"name": "react-sparklines",
		"version": "0.1.0",
		"version": "0.2.0",
		"description": "Beautiful and expressive Sparklines React component",
		@@ -5,0 +5,0 @@ "main": "index.js",

src/Sparklines.jsx

		@@ -32,3 +32,5 @@ import React from 'react';
		{points.map((p, i) =>
		<rect x={p.x - 10} y={p.y} width="20" height={50 - p.y}
		<rect
		x={p.x - 10} y={p.y}
		width="20" height={50 - p.y}
		stroke={this.props.stroke}
		@@ -84,10 +86,24 @@ strokeWidth={this.props.strokeWidth}
		{this.props.bars
		? <SparklinesBars points={points}
		? <SparklinesBars
		points={points}
		stroke={this.props.lineColor}
		strokeWidth={this.props.lineWidth}
		fill={this.props.fill} />
		: <SparklinesLine points={points}
		stroke={this.props.lineColor}
		strokeWidth={this.props.lineWidth}
		fill={this.props.fill} />
		: <g>
		<SparklinesLine
		points={points}
		stroke={this.props.lineColor}
		strokeWidth={this.props.lineWidth}
		fill={this.props.fill} />
		<circle
		cx={points[0].x}
		cy={points[0].y}
		r={this.props.lineWidth * 3}
		fill={this.props.endSpotColor} />
		<circle
		cx={points[points.length - 1].x}
		cy={points[points.length - 1].y}
		r={this.props.lineWidth * 3}
		fill={this.props.endSpotColor} />
		</g>
		}
		@@ -110,5 +126,6 @@ </svg>
		lineWidth: 1,
		fill: 'red'
		fill: 'red',
		endSpotColor: 'red'
		};

		export default Sparklines;

New alerts