@snspinn/react-windrose-chart

0.1.9-0 • Public • Published

Windrose Chart Component

Node.js Package Greenkeeper badge npm codecov NPM npm version GitHub Package Registry version License: MIT

Storybook

Features

react-windrose-chart

  • D3js (Javascript library for manipulating documents based on data) implemented SVG rendering
  • Inspired from ssmaroju's Wind Rose Plot

Installation

npm i react-windrose-chart

Usage

import React from "react";
import styled from "styled-components";
import { WindRose } from "react-windrose-chart";

const Container = styled.div`
  width: 600px;
  height: 600px;
`;

const data = {
  data: [
    {
      angle: "N  ",
      "0-1": 0.5,
      /* ... */
      "6-7": 0.2,
      "7+": 0.1,
      total: 4.9
    } /* ... */
  ],
  columns: [
    "angle",
    "0-1",
    /* ... */
    "6-7",
    "7+"
  ]
};

const App = () => (
  <Container>
    <WindRose data={data.data} columns={data.columns} />
  </Container>
);

Props

Name Type Required Description Default
data Array Required Wind Rose Chart data
columns Array Required Wind Rose Chart header string array
width Number container width, default value: 500
height Number container height, default value: 500

data Object array

check sample data

Name Type Required Description Default
0-1 Number Required Frequency of 0-1 m/sec
1-2 Number Required Frequency of 1-2 m/sec
2-3 Number Required Frequency of 2-3 m/sec
3-4 Number Required Frequency of 3-4 m/sec
4-5 Number Required Frequency of 4-5 m/sec
5-6 Number Required Frequency of 5-6 m/sec
6-7 Number Required Frequency of 6-7 m/sec
7+ Number Required Frequency of 7+ m/sec
angle String Required Wind direction N, NNE, NE, ENE, E, ESE, SE, SSE, S, SSW, SW, WSW, W, WNW, NW, NNW
total Number Required Sum of frequencies of this direction

Data utils

  • Wind Rose data can be converted by Wind direction(degree) and wind speed data: {timestamp, direction, speed} to {data, columns}
import { caculateWindRose } from "react-windrose-chart";

const data = {
  direction: [270, 256, 240,...],
  speed: [ 1.02, 0.85, 0.98,...]
}

const windRoseData = calculateWindRose(data);
// Return {data, columns}
  • Classifying direction function only is as:
import { classifyDir } from "react-windrose-chart";

const directionCharacter = classifyDir(270);
// Return : 'W'

Development

directory & source

  • ./src: wind rose chart component source
  • ./dist: wind rose chart component distribution
  • ./stories: wind rose chart component's storybook source
  • ./babel.config.js: babel configure. (version 7.x)
  • ./rollup.config.common.js: common rollup configuration.
  • ./rollup.config.dev.js: development mode rollup configuration.
  • ./rollup.config.prod.js: production mode rollup configuration.

scripts

  • yarn storybook: run storybook component test
  • yarn storybook:build: storybook build
  • yarn storybook:deploy: storybook gh-pages deploy
  • yarn build: build the wind rose char component by rollup.
  • yarn build:watch: build watch mode.
  • yarn dist: distribution lerna for managing javascript projects with multiple packages.
  • yarn start: build the wind rose chart component and start storybook with this.
  • yarn test: testing javasciript code with jest BABEL_ENV=test

Real-Time

Real-Time chart data from Anemometer

realtime-chart

License

MIT

Package Sidebar

Install

npm i @snspinn/react-windrose-chart

Weekly Downloads

2

Version

0.1.9-0

License

MIT

Unpacked Size

880 kB

Total Files

13

Last publish

Collaborators

  • snspinn