react-windrose-chart v1.0.0

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 "@eunchurn/react-windrose";

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 "@eunchurn/react-windrose";

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

Real-Time

Real-Time chart data from Anemometer

License

MIT