@@ -295,7 +325,9 @@ const RealWorld9 = () =>
const demos = {
'headersparklines': Header,
'simple': Simple,
+ 'simpleGaps': SimpleGaps,
'simpleCurve': SimpleCurve,
+ 'simpleCurveGaps': SimpleCurveGaps,
'customizable1': Customizable1,
'customizable2': Customizable2,
'customizable3': Customizable3,
@@ -308,6 +340,7 @@ const demos = {
'bounds1': Bounds1,
'bars1': Bars1,
'bars2': Bars2,
+ 'barsGaps': BarsGaps,
'dynamic1': Dynamic1,
'dynamic2': Dynamic2,
'dynamic3': Dynamic3,
@@ -318,8 +351,10 @@ const demos = {
'referenceline4': ReferenceLine4,
'referenceline5': ReferenceLine5,
'referenceline6': ReferenceLine6,
+ 'referencelineGaps': ReferenceLineGaps,
'normalband1': NormalBand1,
'normalband2': NormalBand2,
+ 'normalbandGaps': NormalBandGaps,
'realworld1': RealWorld1,
'realworld2': RealWorld2,
'realworld3': RealWorld3,
diff --git a/demo/index.html b/demo/index.html
index f417aa7..e72cd52 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -114,6 +114,17 @@ Simple
+ Simple w/Gaps
+
+
+
+
<![CDATA[
+<Sparklines data={sampleDataGaps}>
+ <SparklinesLine />
+</Sparklines>
+ ]]>
+
Simple Curve
@@ -125,6 +136,17 @@
Simple Curve
+ Simple Curve w/Gaps
+
+
+
+
<![CDATA[
+<Sparklines data={sampleDataGaps}>
+ <SparklinesCurve />
+</Sparklines>
+ ]]>
+
Customizable
@@ -208,6 +230,16 @@
Bars
+
+
+
<![CDATA[
+<Sparklines data={sampleDataGaps}>
+ <SparklinesBars style={{ stroke: "white", fill: "#41c3f9", fillOpacity: ".25" }} />
+ <SparklinesLine style={{ stroke: "#41c3f9", fill: "none" }} />
+</Sparklines>
+ ]]>
+
Dynamic
@@ -310,6 +342,16 @@
Reference Line
+
+
+
<![CDATA[
+<Sparklines data={sampleDataGaps}>
+ <SparklinesBars style={{ fill: 'slategray', fillOpacity: ".5" }} />
+ <SparklinesReferenceLine />
+</Sparklines>
+ ]]>
+
Normal Band
@@ -333,6 +375,17 @@
Normal Band
+
+
+
<![CDATA[
+<Sparklines data={sampleData}>
+ <SparklinesLine style={{ fill: "none" }}/>
+ <SparklinesNormalBand />
+ <SparklinesReferenceLine type="mean" />
+</Sparklines>
+ ]]>
+
Real world examples
diff --git a/src/DataProcessor.js b/src/DataProcessor.js
index 8914957..ce9cd1d 100644
--- a/src/DataProcessor.js
+++ b/src/DataProcessor.js
@@ -14,38 +14,47 @@ export default class DataProcessor {
return data.map((d, i) => {
return {
x: i * hfactor + margin,
- y: (max === min ? 1 : (max - d)) * vfactor + margin
+ y: this.isGapValue(d) ? d : ((max === min ? 1 : (max - d)) * vfactor + margin)
}
});
}
+ static nonGapValues(data) {
+ return data.filter(d => !this.isGapValue(d));
+ }
+
static max(data) {
- return Math.max.apply(Math, data);
+ return Math.max.apply(Math, this.nonGapValues(data));
}
static min(data) {
- return Math.min.apply(Math, data);
+ return Math.min.apply(Math, this.nonGapValues(data));
}
static mean(data) {
+ data = this.nonGapValues(data);
return (this.max(data) - this.min(data)) / 2;
}
static avg(data) {
+ data = this.nonGapValues(data);
return data.reduce((a, b) => a + b) / data.length;
}
static median(data) {
+ data = this.nonGapValues(data);
return data.sort((a,b) => a - b)[Math.floor(data.length / 2)];
}
static variance(data) {
+ data = this.nonGapValues(data);
const mean = this.mean(data);
const sq = data.map(n => Math.pow(n - mean, 2));
return this.mean(sq);
}
static stdev(data) {
+ data = this.nonGapValues(data);
const mean = this.mean(data);
const sqDiff = data.map(n => Math.pow(n - mean, 2));
const avgSqDiff = this.avg(sqDiff);
@@ -55,4 +64,28 @@ export default class DataProcessor {
static calculateFromData(data, calculationType) {
return this[calculationType].call(this, data);
}
+
+ static pointsToSegments(points) {
+ let segment, segments = [];
+ const newSegment = (isGap) => ({points: [], isGap});
+ for (let point of points) {
+ if (!segment)
+ segment = newSegment(false);
+ const isGapHere = this.isGapValue(point.y);
+ if (segment.isGap != isGapHere) {
+ if (segment.points.length)
+ segments.push(segment);
+ segment = newSegment(isGapHere);
+ }
+ segment.points.push(point);
+ }
+ if (segment && segment.points.length)
+ segments.push(segment);
+ return segments;
+ }
+
+ static isGapValue(y)
+ {
+ return !Number.isFinite(y);
+ }
}
diff --git a/src/Sparklines.js b/src/Sparklines.js
index 32a28d8..0128168 100644
--- a/src/Sparklines.js
+++ b/src/Sparklines.js
@@ -39,7 +39,7 @@ class Sparklines extends React.Component {
nextProps.max != this.props.max ||
nextProps.limit != this.props.limit ||
nextProps.data.length != this.props.data.length ||
- nextProps.data.some((d, i) => d !== this.props.data[i]);
+ nextProps.data.some((d, i) => !Object.is(d, this.props.data[i]));
}
render() {
@@ -47,7 +47,7 @@ class Sparklines extends React.Component {
if (data.length === 0) return null;
- const points = DataProcessor.dataToPoints(data, limit, width, height, margin, max, min);
+ const points = DataProcessor.dataToPoints(data, limit, width, height, margin, max, min );
return (