react-svg-coordinates v1.1.0
react-svg-coordinates
A React component that provides functions to allow you to easily calculate x & y coordinates for each item in a given dataset to display on a SVG. See here for some examples
What is this?
This library aims to help you map your dataset for an SVG over the SVG coordinate system, common usescase's of this would be creating a chart using SVG such as a line-chart or area-chart.
There are a lot of out of the box charting solutions which help you create a basic graph in no time, but these charts are hard to extend when you want to introduce some custom functionality.
react-svg-coordinates provides you the functionality to calculate the SVG coordinates of each item in your dataset, giving you full control when composing your own SVG charts.
Installation
This module is distributed via npm which is bundled with node and
should be installed as one of your project's dependencies
:
npm install --save react-svg-coordinates
This package also depends on
react
andprop-types
. Please make sure you have those installed.
Usage
import { SvgCoords } from 'react-svg-coordinates';
// Our data
const ages = [
{ age: 12 },
{ age: 2 },
{ age: 34 },
{ age: 76 },
{ age: 41 },
{ age: 33 },
{ age: 90 },
{ age: 3 },
{ age: 45 },
];
/**
* SvgCoords needs an array of objects where each item
* must have a x and y property.
*
* We want to display age along the y axis so lets map age to y.
*/
const svgData = ages.map((item, idx) => ({
x: idx, // where the item will be displayed along the x axis of the SVG (usually linear e.g 1,2,3,...10)
y: item.age, // where the item will be displayed along the y axis of the SVG
...item,
}));
/*
* Returns a path component which is basically a line that
* is drawn between each point in the array.
*/
const Line = ({ data, getSvgX, getSvgY }) => {
const markerTo = `M ${getSvgX(data[0].x)} ${getSvgY(data[0].y)} `;
const createLine = (d, mTo) =>
d.reduce(
(pathString, point) =>
`${pathString}L ${getSvgX(point.x)} ${getSvgY(point.y)} `,
mTo,
);
return (
<path
style={{
strokeWidth: 2,
fill: 'none',
stroke: '#f3acb1',
}}
d={createLine(data, markerTo)}
/>
);
};
const BasicExample = () => (
<SvgCoords
viewBoxHeight={500}
viewBoxWidth={1000}
data={svgData}
render={({ getSvgX, getSvgY }) => (
<svg width="100%" viewBox={'0 0 1000 500'}>
<g>
<Line data={svgData} getSvgX={getSvgX} getSvgY={getSvgY} />
</g>
</svg>
)}
/>
);
Props
data
array {x: number, y: number} | defaults to []
The data for which we want to calculate SVG co-ordinates for.
Each item in the array can be of any shape. But MUST contain a x
and y
prop.
The x
props is the value where the item will appear along the x-axis (this is usually linear E.G index where item appears in the array).
The y
props is the value where the item will appear along the y-axis.
viewBoxWidth
number | defaults to 0
Must be the same value as the width attribute used in the viewbox property of the targeted SVG.
viewBoxHeight
number | defaults to 0
Must be the same value as the height attribute used in the viewbox property of the targeted SVG.
yAxisArea
number | defaults to 0
If defined the yAxis will have a width of the value passed, allowing you to render labels.
xAxisArea
number | defaults to 0
If defined the xAxis will have a height of the value passed, allowing you to render labels.
Render Prop Function
This is where you can render your SVG, the render prop function contains one parameter which is an object containing various functions which can help you calculate SVG coordinates for your dataset.
Summary of render props parameter object.
property | type | description |
---|---|---|
getMinX | function() | Returns an item in the dataset with the smallest x value |
getMaxX | function() | Returns the item in the dataset with the largest x value |
getMinY | function() | Returns an item in the dataset with the smallest y value |
getMaxY | function() | Returns an item in the dataset with the largest y value |
getSvgX | function(number) | Returns the SVG x coordinate for the number passed to the function |
getSvgY | function(number) | Returns the SVG y coordinate for the number passed to the function |
Using as a HOC
The lib can also be used a HOC to use the HOC please import SvgCoordsHOC
from the library.
Examples
Basic examples can be found in /example
or here
An example of a production app using the lib can be found at carbondoomsday.
Repo for the production app can be found here