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 { Chart } from "react-windrose-chart";

const data = {
  chartData: [
    {
      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 = () => (
  <div>
    <Chart
      chartData={data.chartData}
      columns={data.columns}
      responsive
      legendGap={10}
    />
  </div>
);

Props

Notice, when responsive is true, width and height would be ignored. chart container's aspect ratio is 1/1 and size width fit as 100% of parent container

chartData Object array

check sample data

Data utils

• Wind Rose data can be converted by Wind direction(degree) and wind speed data: {direction: number[], speed: number[]} to data: ChartData[]

import { caculateWindRose } from "react-windrose-chart";

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

const windRoseData = calculateWindRose(data);
// Return 
// [
//   {
//     angle: 'N',
//     '0-1': 0,
//     '1-2': 0,
//     '2-3': 0,
//     '3-4': 0,
//     '4-5': 0,
//     '5-6': 0,
//     '6-7': 0,
//     '7+': 0,
//     total: 0
//   },
//   {
//     angle: 'NNE',
//     '0-1': 0,
//     '1-2': 0,
//     '2-3': 0,
//     '3-4': 0,
//     '4-5': 0,
//     '5-6': 0,
//     '6-7': 0,
//     '7+': 0,
//     total: 0
//   },
//   ...
// ]

• 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