Circle Chart

[MaximumCrash]

Attention (CC)

@as-dr

Summary of changes

• Added a Circle Chart component to the basic stat components.

Motivation & Context

@as-dr requested I implement a new type of circular infographic that would better represent the data instead of chartjs's dougnutchart.

Types of changes

• [ ] Bug fix (non-breaking change which fixes an issue)
• [x] New feature (non-breaking change which adds functionality)
• [ ] Code style update (formatting, renaming)
• [ ] Refactoring (no functional changes, no api changes)
• [ ] Build related changes
• [ ] Documentation Update
• [ ] Other (please describe):

Does this introduce a breaking change?

Breaking change is defined as "A fix or feature that would cause existing functionality to change."

• [ ] Yes
• [x] No

Checklist:

• [x] My code follows the code style of this project.
• [ ] I have added tests that prove my fix is effective or that my feature works
• [ ] I have added/changed necessary documentation (if appropriate)
• [x] All new and existing tests passed.

How Has This Been Tested?

Visual comparison to what @as-dr provided.

Screenshots (if appropriate):

Further comments

Circle Chart can be found in modules/stats/basic.js. It takes 2 props:

1. radius (size of the chart in space)
2. fillAmount ( 0-100% amount of fill the child element should fill of it's parent)

You'll see the container for it

const CircleChartContainer = ({className, children}) => (
  <div className={className}>
    <div className="fill">
      {children}
    </div>
  </div>
);

and the exported styled component of that container below it

export const CircleChart = styled(CircleChartContainer)`
  width: ${({radius}) => radius ? radius : "217"}px;
  height: ${({radius}) => radius ? radius : "217"}px;
  background: var(--highlight-color--makerorange);
  position: relative; 
  border-radius: 100%;
  display: flex; 
  align-items: center; 
  justify-content: center;

  & .fill {
    width: ${({fillAmount}) => fillAmount ? fillAmount : "0"}%;
    height: ${({fillAmount}) => fillAmount ? fillAmount : "0"}%;
    background: var(--highlight-color--makerteal);
    border-radius: 100%; 
  }
`