feat: add circleSize prop to CategoricalCircleProportional (#60)

* feat: add circleSize prop to CategoricalCircleProportional * feat: add proportional prop to CategoricalCircleProportional
urbica · Jun 6, 2018 · 2a60464 · 2a60464
1 parent e91235a
commit 2a60464
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 30 deletions.
diff --git a/src/components/Legend/CategoricalHorizontalCircle/CategoricalCircleProportional.js b/src/components/Legend/CategoricalHorizontalCircle/CategoricalCircleProportional.js
@@ -13,29 +13,30 @@ import Label from './Label';
 const renderLabel = ({ id, label }) => (
   <Label key={id}>
     {label}
-  </Label>);
+  </Label>
+);
 
-const CategoricalCircleProportional = ({ values }) => {
+const CategoricalCircleProportional = ({ values, circleSize, proportional }) => {
   if (!values.length) {
     throw new Error('values is empty');
   }
 
   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}
+            proportional={proportional}
+          />
+        ))}
       </Row>
       <Row>
-        { values.map(renderLabel) }
+        {values.map(renderLabel)}
       </Row>
     </div>
   );
@@ -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
@@ -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/...gend/CategoricalHorizontalCircle/__snapshots__/CategoricalCircleProportional.test.js.snap b/...gend/CategoricalHorizontalCircle/__snapshots__/CategoricalCircleProportional.test.js.snap
@@ -4,34 +4,44 @@ exports[`Legend does not crash 1`] = `
 <div>
   <styled.div>
     <styled.div
+      circleSize={20}
       color="#111111"
+      index={0}
       key="1"
-      length={5}
-      number={0}
+      proportional={true}
+      segmentsAmount={5}
     />
     <styled.div
+      circleSize={20}
       color="#333333"
+      index={1}
       key="2"
-      length={5}
-      number={1}
+      proportional={true}
+      segmentsAmount={5}
     />
     <styled.div
+      circleSize={20}
       color="#666666"
+      index={2}
       key="3"
-      length={5}
-      number={2}
+      proportional={true}
+      segmentsAmount={5}
     />
     <styled.div
+      circleSize={20}
       color="#999999"
+      index={3}
       key="4"
-      length={5}
-      number={3}
+      proportional={true}
+      segmentsAmount={5}
     />
     <styled.div
+      circleSize={20}
       color="#AAAAAA"
+      index={4}
       key="5"
-      length={5}
-      number={4}
+      proportional={true}
+      segmentsAmount={5}
     />
   </styled.div>
   <styled.div>