update vertical-with-labels to 5.0.0 (#8)

* update stories * update stories * update vertival-with-labels to 5.0.0 * correct storybook port
JesperLekland · May 13, 2018 · 6f61cb0 · 6f61cb0
1 parent 2447676
commit 6f61cb0
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 16 deletions.
diff --git a/index.js b/index.js
@@ -30,7 +30,7 @@ class App extends React.PureComponent {
           {
             '• Stop your packager \n' +
             '• run "yarn storybook" \n' +
-            '• Go to "localhost:7008" in your browser\n' +
+            '• Go to "localhost:7007" in your browser\n' +
             '• reload your device \n' +
             '• browse our charts'
           }

diff --git a/storybook/stories/bar-chart/vertical-with-labels.js b/storybook/stories/bar-chart/vertical-with-labels.js
@@ -10,18 +10,20 @@ class BarChartVerticalWithLabels extends React.PureComponent {
         const data = [ 10, 5, 25, 15, 20 ]
 
         const CUT_OFF = 20
-        const Label = ({ item: value, x, y, index, bandwidth }) => (
-            <Text
-                key={index}
-                y={value < CUT_OFF ? y(value) - 10 : y(value) + 15}
-                x={x(index) + (bandwidth / 2)}
-                fontSize={14}
-                fill={value > CUT_OFF ? 'white' : 'black'}
-                alignmentBaseline={'middle'}
-                textAnchor={'middle'}
-            >
-                {value}
-            </Text>
+        const Labels = ({ x, y, bandwidth, data }) => (
+            data.map((value, index) => (
+                <Text
+                    key={ index }
+                    x={ x(index) + (bandwidth / 2) }
+                    y={ value < CUT_OFF ? y(value) - 10 : y(value) + 15 }
+                    fontSize={ 14 }
+                    fill={ value >= CUT_OFF ? 'white' : 'black' }
+                    alignmentBaseline={ 'middle' }
+                    textAnchor={ 'middle' }
+                >
+                    {value}
+                </Text>
+            ))
         )
 
         return (
@@ -33,9 +35,10 @@ class BarChartVerticalWithLabels extends React.PureComponent {
                     contentInset={{ top: 10, bottom: 10 }}
                     spacing={0.2}
                     gridMin={0}
-                    renderDecorator={Label}
-                    renderGrid={Grid.Horizontal}
-                />
+                >
+                    <Grid direction={Grid.Direction.HORIZONTAL}/>
+                    <Labels/>
+                </BarChart>
             </View>
         )
     }