Windrose Chart Component

Storybook

Features

• 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

License

MIT