diff --git a/src/components/Legend/CategoricalHorizontalCircle/CategoricalCircleProportional.js b/src/components/Legend/CategoricalHorizontalCircle/CategoricalCircleProportional.js
index 000d012..41eef90 100644
--- a/src/components/Legend/CategoricalHorizontalCircle/CategoricalCircleProportional.js
+++ b/src/components/Legend/CategoricalHorizontalCircle/CategoricalCircleProportional.js
@@ -13,9 +13,10 @@ import Label from './Label';
const renderLabel = ({ id, label }) => (
);
+
+);
-const CategoricalCircleProportional = ({ values }) => {
+const CategoricalCircleProportional = ({ values, circleSize, proportional }) => {
if (!values.length) {
throw new Error('values is empty');
}
@@ -23,19 +24,19 @@ const CategoricalCircleProportional = ({ values }) => {
return (
- {
- values.map(({ id, color }, i) => (
-
- ))
- }
+ {values.map(({ id, color }, i) => (
+
+ ))}
- { values.map(renderLabel) }
+ {values.map(renderLabel)}
);
@@ -46,7 +47,14 @@ CategoricalCircleProportional.propTypes = {
id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
color: PropTypes.string,
label: PropTypes.node
- })).isRequired
+ })).isRequired,
+ circleSize: PropTypes.number,
+ proportional: PropTypes.bool
+};
+
+CategoricalCircleProportional.defaultProps = {
+ circleSize: 20,
+ proportional: true
};
export default CategoricalCircleProportional;
diff --git a/src/components/Legend/CategoricalHorizontalCircle/Circle.js b/src/components/Legend/CategoricalHorizontalCircle/Circle.js
index ea6149e..3d0a544 100644
--- a/src/components/Legend/CategoricalHorizontalCircle/Circle.js
+++ b/src/components/Legend/CategoricalHorizontalCircle/Circle.js
@@ -1,9 +1,19 @@
import PropTypes from 'prop-types';
import styled from 'styled-components';
-const size = ({ number, length }) => {
- const value = ((20 / length) * number) + 20;
- return value % 2 ? value + 1 : value;
+// calculate circle size
+const size = (props) => {
+ const {
+ index, segmentsAmount, circleSize, proportional
+ } = props;
+
+ if (proportional) {
+ const value = ((circleSize / segmentsAmount) * index) + circleSize;
+
+ return value % 2 ? value + 1 : value;
+ }
+
+ return circleSize;
};
const Circle = styled.div`
@@ -27,9 +37,11 @@ const Circle = styled.div`
`;
Circle.propTypes = {
- number: PropTypes.number.isRequired,
- length: PropTypes.number.isRequired,
- color: PropTypes.string.isRequired
+ index: PropTypes.number.isRequired,
+ segmentsAmount: PropTypes.number.isRequired,
+ color: PropTypes.string.isRequired,
+ circleSize: PropTypes.number,
+ proportional: PropTypes.bool
};
export default Circle;
diff --git a/src/components/Legend/CategoricalHorizontalCircle/__snapshots__/CategoricalCircleProportional.test.js.snap b/src/components/Legend/CategoricalHorizontalCircle/__snapshots__/CategoricalCircleProportional.test.js.snap
index 6d9d3e4..580bbf9 100644
--- a/src/components/Legend/CategoricalHorizontalCircle/__snapshots__/CategoricalCircleProportional.test.js.snap
+++ b/src/components/Legend/CategoricalHorizontalCircle/__snapshots__/CategoricalCircleProportional.test.js.snap
@@ -4,34 +4,44 @@ exports[`Legend does not crash 1`] = `