https://github.com/kersh1337228/react-plots

React components and common JS plotting tools
https://github.com/kersh1337228/react-plots

frontend library react typescript ui

Last synced: about 1 month ago
JSON representation

React components and common JS plotting tools

• Host: GitHub
• URL: https://github.com/kersh1337228/react-plots
• Owner: kersh1337228
• License: mit
• Created: 2022-11-28T02:42:33.000Z (about 2 years ago)
• Default Branch: master
• Last Pushed: 2024-06-20T18:06:30.000Z (7 months ago)
• Last Synced: 2024-11-18T21:05:43.222Z (2 months ago)
• Topics: frontend, library, react, typescript, ui
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/react-plots
• Size: 395 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-plots · [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/kersh1337228/react-plots/blob/master/LICENSE)

React components and common JS plotting tools.

## Details

### Supported data types

```ts

type PointNumeric = [number, number | null];

type ObjectNumeric = {

    timestamp: number;

    [ numericType: string ]: number | null;

    [ anyType: string ]: any;

};

type PointTimeSeries = [string, number | null];

type ObjectTimeSeries = {

    timestamp: string;

    [ numericType: string ]: number | null;

    [ anyType: string ]: any;

};

interface Quotes extends ObjectTimeSeries {

    open: number | null;

    high: number | null;

    low: number | null;

    close: number | null;

    volume: number | null;

}

```

### Drawing data

```ts

const sin: PointNumeric[] = [],

    cos: PointNumeric[] = [];

for (let i = 0; i < 10; i += 0.1) {

    const j = round(i, 1);

    sin.push([j, j + Math.sin(j)]);

    cos.push([j + 1, Math.cos(j + 1)]);

}

const raw = {

    timestamp: ibm.chart.result[0].timestamp,

    ...ibm.chart.result[0].indicators.quote[0]

};

const quotes = new Array(raw.timestamp.length).fill(0).map((_, i) => {

    return {

        timestamp: new Date(raw.timestamp[i] * 1000).toLocaleDateString('sv'),

        open: raw.open[i],

        high:raw.high[i],

        low: raw.low[i],

        close: raw.close[i],

        volume: raw.volume[i]

    }

}) as Quotes[];

```

### Component usage

```tsx

    

        

            

            

        

        

            

        

    

    

        

            

        

        

            

        

    

```

### Result

![demo](demo.png)