@intoto-dev/bibliotheca-profile NPM

`<Profile />` component

Live Demo

Profile stands for river profile. It allows rendering of a cross-section of a river. The current water-level, mean level, and a generated bridge can be added.

Example Graph

Installation

Add Profile to your project with the following command:

npm i @intoto-dev/bibliotheca-profile

Basic Usage

The only required property to pass is profile which contains a list of points to draw the cross-section. Each item is an object consisting of x and msl, x being the x-coordinate in meters and msl being meters above sea level.

import { Profile } from '@intoto-dev/bibliotheca-profile';

const profile = [
  { x: 0, y: 10 },
  { x: 2, y: 8 },
  { x: 3, y: 7 },
  { x: 6, y: 7 },
  { x: 7, y: 8 },
  { x: 9, y: 10 },
]; // Array of profile points

<Profile profile={profile} />;

Future Work

Add a custom bridge polygon to visualise the true shape of the bridge.

API

React Component: `<Profile />`

import { Profile } from '@intoto-dev/bibliotheca-profile';

Property	Description	Type	Default
profile *	List of points to draw the cross-section.	`ProfilePoint[]`
width	Width of the profile in pixels. Pass the width of a parent container to make it "responsive".	`number`	`600`
currentWaterLevel	Current water level in meters above sea level.	`number`
bridgeLevel	If you want to add a bridge, pass the meters above sea level here of the bottom of the bridge.	`number`
bridgeHeight	Height in meters of the bridge. This is to render the railing.	`number`	`1.2`
bridgeStrokeWidth	Stroke width of the bridge in pixels.	`number`	`2`
bridgeStrokeColor	Hexadecimal color ot the stroke of the bridge.	`string`	`#000`
meanLevel	Mean level in meters above sea level. Provide if you want to show an indicator line.	`number`
axis	Whether or not to show the Y-axis.	`boolean`	`false`
mslLabel	The label used on the Y-axis to indicate the MSL.	`string`	`'MASL'`
meanLabel	The label used in the legend to indicate the mean level.	`string`	`'Mean-level'`
meanStrokeColor	Hexadecimal color of the stroke of the mean level.	`string`	`'#b7323f'`
formatDistance	A function to format the distance between two points. Comes in handy with conversions etc.	`(centimeters: number) => string`
strokeWidth	Stroke width of the profile in pixels.	`number`	`1.5`
strokeColor	Hexadecimal color of the stroke.	`string`	`'#000'`
waterStrokeColor	Hexadecimal color of the stroke of the water.	`string`	`'#0633ff'`
waterFill	Hexadecimal color of the fill of the water.	`string`	`'#99ccff'`
groundFill	Hexadecimal color of the fill of the ground.	`string`	`'#b4967d'`
groundGradient	Whether or not to render the ground fill as a gradient	`boolean`	`true`
groundStroke	Whether or not to the ground fill has as a stroke	`boolean`	`false`