mutpoint

components for visualizing mutating point data

Note: Project is unstable and extremely early phase

Purpose

mutpoint is designed for charting fluctuating source data.

Components

|Component | Implemented | PR | Issue | |:---------|:-----------:|:--:|:-----:| |Chart |✔️ |- |- | |Line |✔️ |- |- | |Grid |- |- |- | |XAxis |- |- |- | |YAxis |- |- |- |

Installation

npm install mutpoint

API Overview

Basic Rendering

The following example shows how to use Chart and Line to render some points.

import * as React from "react";
import { Chart, Line, Point } from "mutpoint";

interface Props { }

export default (props: Props) => {
    const [points, setPoints] = React.useState<Point[]>(
	// generate sine data from an array of size 10
	new Array(10).fill(null).map((_, i) => {
	    const x = (i + 1) / Math.PI * 2;
	    return {
		x,
		y: Math.sin(x),
	    }
	})
    );
    return (
	<>
	    <Chart
		height={300}
		width={500}
		points={points}
	    >
		<Line />
	    </Chart>
	</>
    );
}

Prior Art

• Difference Chart