From 51ebb61e7dc65a9bc206c98bf79ac612cc9fc396 Mon Sep 17 00:00:00 2001
From: Andrey Bakhvalov <bakhvalov.andrey@gmail.com>
Date: Wed, 6 Jun 2018 18:04:25 +0300
Subject: [PATCH 1/2] feat: add circleSize prop to
 CategoricalCircleProportional

---
 .../CategoricalCircleProportional.js          | 30 +++++++++++--------
 .../CategoricalHorizontalCircle/Circle.js     | 14 +++++----
 ...CategoricalCircleProportional.test.js.snap | 20 ++++++-------
 3 files changed, 36 insertions(+), 28 deletions(-)

diff --git a/src/components/Legend/CategoricalHorizontalCircle/CategoricalCircleProportional.js b/src/components/Legend/CategoricalHorizontalCircle/CategoricalCircleProportional.js
index 000d012..22a98c2 100644
--- a/src/components/Legend/CategoricalHorizontalCircle/CategoricalCircleProportional.js
+++ b/src/components/Legend/CategoricalHorizontalCircle/CategoricalCircleProportional.js
@@ -15,7 +15,7 @@ const renderLabel = ({ id, label }) => (
     {label}
   </Label>);
 
-const CategoricalCircleProportional = ({ values }) => {
+const CategoricalCircleProportional = ({ values, circleSize }) => {
   if (!values.length) {
     throw new Error('values is empty');
   }
@@ -23,19 +23,18 @@ const CategoricalCircleProportional = ({ values }) => {
   return (
     <div>
       <Row>
-        {
-          values.map(({ id, color }, i) => (
-            <Circle
-              key={id}
-              color={color}
-              number={i}
-              length={values.length}
-            />
-          ))
-        }
+        {values.map(({ id, color }, i) => (
+          <Circle
+            key={id}
+            color={color}
+            index={i}
+            segmentsAmount={values.length}
+            circleSize={circleSize}
+          />
+        ))}
       </Row>
       <Row>
-        { values.map(renderLabel) }
+        {values.map(renderLabel)}
       </Row>
     </div>
   );
@@ -46,7 +45,12 @@ CategoricalCircleProportional.propTypes = {
     id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     color: PropTypes.string,
     label: PropTypes.node
-  })).isRequired
+  })).isRequired,
+  circleSize: PropTypes.number
+};
+
+CategoricalCircleProportional.defaultProps = {
+  circleSize: undefined
 };
 
 export default CategoricalCircleProportional;
diff --git a/src/components/Legend/CategoricalHorizontalCircle/Circle.js b/src/components/Legend/CategoricalHorizontalCircle/Circle.js
index ea6149e..54ecb31 100644
--- a/src/components/Legend/CategoricalHorizontalCircle/Circle.js
+++ b/src/components/Legend/CategoricalHorizontalCircle/Circle.js
@@ -1,8 +1,11 @@
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
-const size = ({ number, length }) => {
-  const value = ((20 / length) * number) + 20;
+const size = ({ index, segmentsAmount, circleSize }) => {
+  if (circleSize) return circleSize;
+
+  const value = ((20 / segmentsAmount) * index) + 20;
+
   return value % 2 ? value + 1 : value;
 };
 
@@ -27,9 +30,10 @@ 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
 };
 
 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..b3c105d 100644
--- a/src/components/Legend/CategoricalHorizontalCircle/__snapshots__/CategoricalCircleProportional.test.js.snap
+++ b/src/components/Legend/CategoricalHorizontalCircle/__snapshots__/CategoricalCircleProportional.test.js.snap
@@ -5,33 +5,33 @@ exports[`Legend does not crash 1`] = `
   <styled.div>
     <styled.div
       color="#111111"
+      index={0}
       key="1"
-      length={5}
-      number={0}
+      segmentsAmount={5}
     />
     <styled.div
       color="#333333"
+      index={1}
       key="2"
-      length={5}
-      number={1}
+      segmentsAmount={5}
     />
     <styled.div
       color="#666666"
+      index={2}
       key="3"
-      length={5}
-      number={2}
+      segmentsAmount={5}
     />
     <styled.div
       color="#999999"
+      index={3}
       key="4"
-      length={5}
-      number={3}
+      segmentsAmount={5}
     />
     <styled.div
       color="#AAAAAA"
+      index={4}
       key="5"
-      length={5}
-      number={4}
+      segmentsAmount={5}
     />
   </styled.div>
   <styled.div>

From 30aa16239e74cf8b87db7b6f7cd4705a0f9c00d9 Mon Sep 17 00:00:00 2001
From: Andrey Bakhvalov <bakhvalov.andrey@gmail.com>
Date: Wed, 6 Jun 2018 18:42:22 +0300
Subject: [PATCH 2/2] feat: add proportional prop to
 CategoricalCircleProportional

---
 .../CategoricalCircleProportional.js           | 12 ++++++++----
 .../CategoricalHorizontalCircle/Circle.js      | 18 +++++++++++++-----
 .../CategoricalCircleProportional.test.js.snap | 10 ++++++++++
 3 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/src/components/Legend/CategoricalHorizontalCircle/CategoricalCircleProportional.js b/src/components/Legend/CategoricalHorizontalCircle/CategoricalCircleProportional.js
index 22a98c2..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 }) => (
   <Label key={id}>
     {label}
-  </Label>);
+  </Label>
+);
 
-const CategoricalCircleProportional = ({ values, circleSize }) => {
+const CategoricalCircleProportional = ({ values, circleSize, proportional }) => {
   if (!values.length) {
     throw new Error('values is empty');
   }
@@ -30,6 +31,7 @@ const CategoricalCircleProportional = ({ values, circleSize }) => {
             index={i}
             segmentsAmount={values.length}
             circleSize={circleSize}
+            proportional={proportional}
           />
         ))}
       </Row>
@@ -46,11 +48,13 @@ CategoricalCircleProportional.propTypes = {
     color: PropTypes.string,
     label: PropTypes.node
   })).isRequired,
-  circleSize: PropTypes.number
+  circleSize: PropTypes.number,
+  proportional: PropTypes.bool
 };
 
 CategoricalCircleProportional.defaultProps = {
-  circleSize: undefined
+  circleSize: 20,
+  proportional: true
 };
 
 export default CategoricalCircleProportional;
diff --git a/src/components/Legend/CategoricalHorizontalCircle/Circle.js b/src/components/Legend/CategoricalHorizontalCircle/Circle.js
index 54ecb31..3d0a544 100644
--- a/src/components/Legend/CategoricalHorizontalCircle/Circle.js
+++ b/src/components/Legend/CategoricalHorizontalCircle/Circle.js
@@ -1,12 +1,19 @@
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
-const size = ({ index, segmentsAmount, circleSize }) => {
-  if (circleSize) return circleSize;
+// calculate circle size
+const size = (props) => {
+  const {
+    index, segmentsAmount, circleSize, proportional
+  } = props;
 
-  const value = ((20 / segmentsAmount) * index) + 20;
+  if (proportional) {
+    const value = ((circleSize / segmentsAmount) * index) + circleSize;
 
-  return value % 2 ? value + 1 : value;
+    return value % 2 ? value + 1 : value;
+  }
+
+  return circleSize;
 };
 
 const Circle = styled.div`
@@ -33,7 +40,8 @@ Circle.propTypes = {
   index: PropTypes.number.isRequired,
   segmentsAmount: PropTypes.number.isRequired,
   color: PropTypes.string.isRequired,
-  circleSize: PropTypes.number
+  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 b3c105d..580bbf9 100644
--- a/src/components/Legend/CategoricalHorizontalCircle/__snapshots__/CategoricalCircleProportional.test.js.snap
+++ b/src/components/Legend/CategoricalHorizontalCircle/__snapshots__/CategoricalCircleProportional.test.js.snap
@@ -4,33 +4,43 @@ exports[`Legend does not crash 1`] = `
 <div>
   <styled.div>
     <styled.div
+      circleSize={20}
       color="#111111"
       index={0}
       key="1"
+      proportional={true}
       segmentsAmount={5}
     />
     <styled.div
+      circleSize={20}
       color="#333333"
       index={1}
       key="2"
+      proportional={true}
       segmentsAmount={5}
     />
     <styled.div
+      circleSize={20}
       color="#666666"
       index={2}
       key="3"
+      proportional={true}
       segmentsAmount={5}
     />
     <styled.div
+      circleSize={20}
       color="#999999"
       index={3}
       key="4"
+      proportional={true}
       segmentsAmount={5}
     />
     <styled.div
+      circleSize={20}
       color="#AAAAAA"
       index={4}
       key="5"
+      proportional={true}
       segmentsAmount={5}
     />
   </styled.div>