Implement multiple PRs: borisyankov#46, borisyankov#113, borisyankov#119, borisyankov#122, borisyankov#130

- PR borisyankov#46: Add gap support for null/NaN/Infinity values in data
  - Modified dataToPoints to mark invalid values with valid flag
  - Created segmentPoints utility to split data into valid segments
  - Updated SparklinesLine, SparklinesCurve, and SparklinesBars to handle gaps
  - Added comprehensive tests for gap handling

- PR borisyankov#113: Add fillInvert style option to SparklinesLine
  - Allows inverting the fill direction for line charts

- PR borisyankov#119: Add SparklinesInteractiveLayer component
  - New component for interactive hover/click with visual feedback
  - Shows active point with circle and vertical line

- PR borisyankov#122: Remove empty onMouseMove handler from SparklinesLine
  - Made tooltips conditional on onMouseMove presence

- PR borisyankov#130: Update README with improved code examples
  - Use proper JSX syntax highlighting
  - Wrap examples in function components

All tests passing (25 tests across 5 test files)

Author: claude

README.md

@@ -27,12 +27,16 @@ Import the Sparklines components that you need; for example to generate a simple
 
 ![](http://borisyankov.github.io/react-sparklines/img/basic.png)
 
-```
+```jsx
 import React from 'react';
 import { Sparklines } from 'react-sparklines';
-...
-<Sparklines data={[5, 10, 5, 20, 8, 15]} limit={5} width={100} height={20} margin={5}>
-</Sparklines>
+
+function MyComponent() {
+  return (
+    <Sparklines data={[5, 10, 5, 20, 8, 15]} limit={5} width={100} height={20} margin={5}>
+    </Sparklines>
+  );
+}
 ```
 
 Sparklines component is a container with the following properties:
@@ -56,27 +60,34 @@ min, max - optional, bound the chart
 
 ![](http://borisyankov.github.io/react-sparklines/img/customizable.png)
 
-```
+```jsx
 import React from 'react';
 import { Sparklines, SparklinesLine } from 'react-sparklines';
-...
-<Sparklines data={[5, 10, 5, 20]}>
-  <SparklinesLine color="blue" />
-</Sparklines>
+
+function MyComponent() {
+  return (
+    <Sparklines data={[5, 10, 5, 20]}>
+      <SparklinesLine color="blue" />
+    </Sparklines>
+  );
+}
 ```
 
 #### Bars
 
 ![](http://borisyankov.github.io/react-sparklines/img/bars.png)
 
-
-```
+```jsx
 import React from 'react';
 import { Sparklines, SparklinesBars } from 'react-sparklines';
-...
-<Sparklines data={[5, 10, 5, 20]}>
-  <SparklinesBars />
-</Sparklines>
+
+function MyComponent() {
+  return (
+    <Sparklines data={[5, 10, 5, 20]}>
+      <SparklinesBars />
+    </Sparklines>
+  );
+}
 ```
 
 #### Spots

__tests__/dataToPoints.js

@@ -18,58 +18,84 @@ describe('dataToPoints', () => {
 
     it('should return proper values for 1 value', () => {
         expect(dataToPoints({ data: [1] })).toEqual([
-            {x: 0, y: 0.5}
+            {x: 0, y: 0.5, valid: true}
         ])
     });
 
     it('should return proper values 2+ values', () => {
         expect(dataToPoints({ data: [1,1] })).toEqual([
-            {x: 0, y: 0.5},
-            {x: 1, y: 0.5}
+            {x: 0, y: 0.5, valid: true},
+            {x: 1, y: 0.5, valid: true}
         ])
 
         expect(dataToPoints({ data: [0,1] })).toEqual([
-            {x: 0, y: 1},
-            {x: 1, y: 0}
+            {x: 0, y: 1, valid: true},
+            {x: 1, y: 0, valid: true}
         ])
 
         expect(dataToPoints({ data: [1,0] })).toEqual([
-            {x: 0, y: 0},
-            {x: 1, y: 1}
+            {x: 0, y: 0, valid: true},
+            {x: 1, y: 1, valid: true}
         ])
 
         expect(dataToPoints({ data: [0,1,2] })).toEqual([
-            {x: 0, y: 1},
-            {x: 0.5, y: 0.5},
-            {x: 1, y: 0}
+            {x: 0, y: 1, valid: true},
+            {x: 0.5, y: 0.5, valid: true},
+            {x: 1, y: 0, valid: true}
         ])
     });
 
     it('should inerpolate values properly', () => {
         expect(dataToPoints({data: [0,1,2], width: 10, height: 10 })).toEqual([
-            {x: 0, y: 10},
-            {x: 5, y: 5},
-            {x: 10, y: 0}
+            {x: 0, y: 10, valid: true},
+            {x: 5, y: 5, valid: true},
+            {x: 10, y: 0, valid: true}
         ])
     });
 
     it('should take min and max into account', () => {
         expect(dataToPoints({ data: [1,2,3,4], width: 6, height: 10, max: 2, min: 3 })).toEqual([
-            {x: 0, y: -10},
-            {x: 2, y: 0},
-            {x: 4, y: 10},
-            {x: 6, y: 20}
+            {x: 0, y: -10, valid: true},
+            {x: 2, y: 0, valid: true},
+            {x: 4, y: 10, valid: true},
+            {x: 6, y: 20, valid: true}
         ])
     });
 
     it('should return y == height for 0 and null values', () => {
         expect(dataToPoints({ data: [0] })).toEqual([
-            {x: 0, y: 0.5}
+            {x: 0, y: 0.5, valid: true}
         ])
         expect(dataToPoints({ data: [0, null, 0] })).toEqual([
-            {x: 0, y: 0.5},
-            {x: 0.5, y: 0.5},
-            {x: 1, y: 0.5}
+            {x: 0, y: 0.5, valid: true},
+            {x: 0.5, y: null, valid: false},
+            {x: 1, y: 0.5, valid: true}
         ])
     });
+
+    it('should mark invalid values (NaN, Infinity, null, undefined) as invalid', () => {
+        const result = dataToPoints({ data: [1, NaN, 2, Infinity, 3, null, 4, undefined, 5] });
+        expect(result[0].valid).toBe(true);
+        expect(result[1].valid).toBe(false);
+        expect(result[2].valid).toBe(true);
+        expect(result[3].valid).toBe(false);
+        expect(result[4].valid).toBe(true);
+        expect(result[5].valid).toBe(false);
+        expect(result[6].valid).toBe(true);
+        expect(result[7].valid).toBe(false);
+        expect(result[8].valid).toBe(true);
+
+        // Check that invalid values have null y
+        expect(result[1].y).toBe(null);
+        expect(result[3].y).toBe(null);
+        expect(result[5].y).toBe(null);
+        expect(result[7].y).toBe(null);
+
+        // Check that valid values have proper y coordinates
+        expect(typeof result[0].y).toBe('number');
+        expect(typeof result[2].y).toBe('number');
+        expect(typeof result[4].y).toBe('number');
+        expect(typeof result[6].y).toBe('number');
+        expect(typeof result[8].y).toBe('number');
+    });
 });

__tests__/segmentPoints.js

@@ -0,0 +1,107 @@
+import { describe, it, expect } from 'vitest';
+import segmentPoints from '../src/dataProcessing/segmentPoints';
+
+describe('segmentPoints', () => {
+    it('should return a single segment for all valid points', () => {
+        const points = [
+            { x: 0, y: 0, valid: true },
+            { x: 1, y: 1, valid: true },
+            { x: 2, y: 2, valid: true }
+        ];
+        const segments = segmentPoints(points);
+
+        expect(segments).toHaveLength(1);
+        expect(segments[0]).toEqual(points);
+    });
+
+    it('should split into multiple segments when invalid points are present', () => {
+        const points = [
+            { x: 0, y: 0, valid: true },
+            { x: 1, y: 1, valid: true },
+            { x: 2, y: null, valid: false },
+            { x: 3, y: 3, valid: true },
+            { x: 4, y: 4, valid: true }
+        ];
+        const segments = segmentPoints(points);
+
+        expect(segments).toHaveLength(2);
+        expect(segments[0]).toHaveLength(2);
+        expect(segments[1]).toHaveLength(2);
+        expect(segments[0]).toEqual([points[0], points[1]]);
+        expect(segments[1]).toEqual([points[3], points[4]]);
+    });
+
+    it('should handle multiple gaps', () => {
+        const points = [
+            { x: 0, y: 0, valid: true },
+            { x: 1, y: null, valid: false },
+            { x: 2, y: 2, valid: true },
+            { x: 3, y: null, valid: false },
+            { x: 4, y: 4, valid: true }
+        ];
+        const segments = segmentPoints(points);
+
+        expect(segments).toHaveLength(3);
+        expect(segments[0]).toEqual([points[0]]);
+        expect(segments[1]).toEqual([points[2]]);
+        expect(segments[2]).toEqual([points[4]]);
+    });
+
+    it('should return empty array for all invalid points', () => {
+        const points = [
+            { x: 0, y: null, valid: false },
+            { x: 1, y: null, valid: false },
+            { x: 2, y: null, valid: false }
+        ];
+        const segments = segmentPoints(points);
+
+        expect(segments).toHaveLength(0);
+    });
+
+    it('should return empty array for empty input', () => {
+        const segments = segmentPoints([]);
+
+        expect(segments).toHaveLength(0);
+    });
+
+    it('should handle invalid points at the beginning', () => {
+        const points = [
+            { x: 0, y: null, valid: false },
+            { x: 1, y: null, valid: false },
+            { x: 2, y: 2, valid: true },
+            { x: 3, y: 3, valid: true }
+        ];
+        const segments = segmentPoints(points);
+
+        expect(segments).toHaveLength(1);
+        expect(segments[0]).toEqual([points[2], points[3]]);
+    });
+
+    it('should handle invalid points at the end', () => {
+        const points = [
+            { x: 0, y: 0, valid: true },
+            { x: 1, y: 1, valid: true },
+            { x: 2, y: null, valid: false },
+            { x: 3, y: null, valid: false }
+        ];
+        const segments = segmentPoints(points);
+
+        expect(segments).toHaveLength(1);
+        expect(segments[0]).toEqual([points[0], points[1]]);
+    });
+
+    it('should handle consecutive invalid points', () => {
+        const points = [
+            { x: 0, y: 0, valid: true },
+            { x: 1, y: null, valid: false },
+            { x: 2, y: null, valid: false },
+            { x: 3, y: null, valid: false },
+            { x: 4, y: 4, valid: true }
+        ];
+        const segments = segmentPoints(points);
+
+        expect(segments).toHaveLength(2);
+        expect(segments[0]).toEqual([points[0]]);
+        expect(segments[1]).toEqual([points[4]]);
+    });
+});