feat(core): add support for string or number keys on bar/line and pie

plouc · Aug 24, 2018 · 953c572 · 953c572
1 parent 6828c33
commit 953c572
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 16 deletions.
diff --git a/packages/bar/src/props.js b/packages/bar/src/props.js
@@ -17,7 +17,7 @@ export const BarPropTypes = {
     data: PropTypes.arrayOf(PropTypes.object).isRequired,
     indexBy: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
     getIndex: PropTypes.func.isRequired, // computed
-    keys: PropTypes.arrayOf(PropTypes.string).isRequired,
+    keys: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])).isRequired,
 
     groupMode: PropTypes.oneOf(['stacked', 'grouped']).isRequired,
     layout: PropTypes.oneOf(['horizontal', 'vertical']).isRequired,

diff --git a/packages/line/src/compute.js b/packages/line/src/compute.js
@@ -129,6 +129,7 @@ export const getScales = ({ data, width, height, minY, maxY }) => {
  * @param {Function}       xScale
  * @param {Function}       yScale
  * @param {Function}       color
+ *
  * @return {{ xScale: Function, yScale: Function, lines: Array.<Object> }}
  */
 export const generateLines = (data, xScale, yScale, color) =>

diff --git a/packages/line/src/props.js b/packages/line/src/props.js
@@ -14,7 +14,7 @@ export const LinePropTypes = {
     // data
     data: PropTypes.arrayOf(
         PropTypes.shape({
-            id: PropTypes.string.isRequired,
+            id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
             data: PropTypes.arrayOf(
                 PropTypes.shape({
                     x: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
@@ -86,9 +86,6 @@ export const LinePropTypes = {
 }
 
 export const LineDefaultProps = {
-    indexBy: 'id',
-    keys: ['value'],
-
     stacked: false,
     curve: 'linear',
 

diff --git a/packages/line/stories/line.stories.js b/packages/line/stories/line.stories.js
@@ -88,15 +88,16 @@ stories.add('abusing dots', () => (
 ))
 
 const CustomSymbol = ({ size, color, borderWidth, borderColor }) => (
-    <rect
-        transform={`rotate(45) translate(${size * -0.5}, ${size * -0.5})`}
-        width={size}
-        height={size}
-        fill={color}
-        strokeWidth={borderWidth}
-        fillOpacity={1}
-        stroke={borderColor}
-    />
+    <g>
+        <circle fill="#fff" r={size / 2} strokeWidth={borderWidth} stroke={borderColor} />
+        <circle
+            r={size / 5}
+            strokeWidth={borderWidth}
+            stroke={borderColor}
+            fill={color}
+            fillOpacity={0.35}
+        />
+    </g>
 )
 
 stories.add('custom dot symbol', () => (
@@ -105,7 +106,7 @@ stories.add('custom dot symbol', () => (
         stacked={boolean('stacked', true)}
         curve={select('curve', curveOptions, 'monotoneX')}
         dotSymbol={CustomSymbol}
-        dotSize={12}
+        dotSize={16}
         dotBorderWidth={1}
         dotBorderColor="inherit:darker(0.3)"
         axisLeft={{

diff --git a/packages/pie/src/props.js b/packages/pie/src/props.js
@@ -25,7 +25,7 @@ export const arcPropType = PropTypes.shape({
 export const PiePropTypes = {
     data: PropTypes.arrayOf(
         PropTypes.shape({
-            id: PropTypes.string.isRequired,
+            id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
             value: PropTypes.number.isRequired,
         })
     ).isRequired,