feat: Add DynamicRadar component.

[tyn1998]

Purpose

This PR implements the "Dynamic Radar" feature requested by #205.

Component description

The DynamicRadar component consists of 3 sub components: Radar, SimpleTable and ControlBar. These components benefit from the following technologies:

• React functional component
• Radar component from Echarts
• Stack, Slider, IconButton from Microsoft Fluent UI

DynamicRadar is really easy to use and provides features like:

• light & dark themes
• customizable sizes
• dynamic & interactive

Code structure

Usage example

import DynamicRadar from '../../components/DynamicRadar/DynamicRadar';

const indicators = ['commit', 'issue', 'PR', 'comment', 'star', 'fork', 'contributor', ];

let data = [
  {
    date: '2021/1/1',
    values: [82, 120, 31, 360, 20, 15, 8],
  },
  ...
];

const Demo = () => {
  return (
    <DynamicRadar theme='light' height={300} width={500} indicators={indicators} data={data}>
  )
}

Screenshots

This .gif shows what "dynamic" means for:

This .png shows two themes with configurable sizes.

Proposed changes

Types of changes

• Bugfix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation Update (if none of the other choices apply)

Checklist

• I have read the CONTRIBUTING doc
• I have signed the CLA
• Lint and unit tests pass locally with my changes
• I have added tests that prove my fix is effective or that my feature works
• I have added necessary documentation (if appropriate)

Further comments (Optional)

If you are interested in how this component is developed, go and look for 08-02~08-11.

[heming6666]

Great work! Thanks @tyn1998

/approve