update to 5.0.0 (#7)

* update to 5.0.0
JesperLekland · Apr 15, 2018 · 62d5d1a · 62d5d1a
1 parent 1833d8d
commit 62d5d1a
Show file tree

Hide file tree

Showing 34 changed files with 291 additions and 239 deletions.
diff --git a/README.md b/README.md
@@ -48,6 +48,7 @@ Click an example to see the code! 💪
 [<img src="./screenshots/custom-grid.png" width=33% />](./storybook/stories/custom-grid.js)
 [<img src="./screenshots/extras.png" width=33% />](./storybook/stories/extras.js)
 [<img src="./screenshots/both-axes.png" width=33% />](./storybook/stories/both-axes.js)
+[<img src="./screenshots/decorators.png" width=33% />](./storybook/stories/decorators.js)
 
 ## StackedAreaChart
 

diff --git a/ios/examples.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist b/ios/examples.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>IDEDidComputeMac32BitWarning</key>
+	<true/>
+</dict>
+</plist>
diff --git a/package.json b/package.json
@@ -15,7 +15,7 @@
     "react": "16.2.0",
     "react-native": "0.53.3",
     "react-native-svg": "^6.2.2",
-    "react-native-svg-charts": "^4.0.0"
+    "react-native-svg-charts": "^5.0.0"
   },
   "devDependencies": {
     "@storybook/addon-actions": "^3.3.14",

diff --git a/screenshots/decorators.png b/screenshots/decorators.png
diff --git a/storybook/stories/area-chart/with-gradient.js b/storybook/stories/area-chart/with-gradient.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { AreaChart } from 'react-native-svg-charts'
+import { AreaChart, Grid } from 'react-native-svg-charts'
 import { Defs, LinearGradient, Stop } from 'react-native-svg'
 
 class GradientExample extends React.PureComponent {
@@ -22,9 +22,11 @@ class GradientExample extends React.PureComponent {
                 style={{ height: 200 }}
                 data={data}
                 contentInset={{ top: 20, bottom: 20 }}
-                extras={[ Gradient ]}
                 svg={{ fill: 'url(#gradient)' }}
-            />
+            >
+                <Grid/>
+                <Gradient/>
+            </AreaChart>
         )
     }
 

diff --git a/storybook/stories/area-chart/with-line.js b/storybook/stories/area-chart/with-line.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Path } from 'react-native-svg'
-import { AreaChart } from 'react-native-svg-charts'
+import { AreaChart, Grid } from 'react-native-svg-charts'
 import * as shape from 'd3-shape'
 
 class AreaChartExample extends React.PureComponent {
@@ -25,8 +25,10 @@ class AreaChartExample extends React.PureComponent {
                 contentInset={{ top: 30, bottom: 30 }}
                 curve={shape.curveNatural}
                 svg={{ fill: 'rgba(134, 65, 244, 0.2)' }}
-                extras={[ Line ]}
-            />
+            >
+                <Grid/>
+                <Line/>
+            </AreaChart>
         )
     }
 }

diff --git a/storybook/stories/area-stack/index.js b/storybook/stories/area-stack/index.js
@@ -47,8 +47,6 @@ class AreaStackChartExample extends React.PureComponent {
                 keys={ keys }
                 colors={ colors }
                 curve={ shape.curveNatural }
-                showGrid={ false }
-                { ...this.props }
             />
         )
     }

diff --git a/storybook/stories/area-stack/with-y-axis.js b/storybook/stories/area-stack/with-y-axis.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { StackedAreaChart, YAxis } from 'react-native-svg-charts'
+import { StackedAreaChart, YAxis, Grid } from 'react-native-svg-charts'
 import * as shape from 'd3-shape'
 import { View } from 'react-native'
 
@@ -50,8 +50,9 @@ class AreaStackWithAxisExample extends React.PureComponent {
                     keys={ keys }
                     colors={ colors }
                     curve={ shape.curveNatural }
-                    { ...this.props }
-                />
+                >
+                    <Grid/>
+                </StackedAreaChart>
                 <YAxis
                     style={ { position: 'absolute', top: 0, bottom: 0 }}
                     data={ StackedAreaChart.extractDataPoints(data, keys) }

diff --git a/storybook/stories/bar-chart/horizontal-grouped.js b/storybook/stories/bar-chart/horizontal-grouped.js
@@ -83,12 +83,13 @@ class BarChartExample extends React.PureComponent {
                         fill: 'blue',
                     }}
                     horizontal={true}
-                    extras={[ Gradient ]}
                     contentInset={{ top: 10, bottom: 10 }}
                     spacing={0.2}
                     gridMin={0}
-                    renderGrid={Grid.Vertical}
-                />
+                >
+                    <Grid direction={Grid.Direction.VERTICAL}/>
+                    <Gradient/>
+                </BarChart>
             </View>
         )
     }

diff --git a/storybook/stories/bar-chart/horizontal-with-axis.js b/storybook/stories/bar-chart/horizontal-with-axis.js
@@ -50,8 +50,9 @@ class HorizontaBarChartWithYAxis extends React.PureComponent {
                     contentInset={{ top: 10, bottom: 10 }}
                     spacing={0.2}
                     gridMin={0}
-                    renderGrid={Grid.Vertical}
-                />
+                >
+                    <Grid direction={Grid.Direction.VERTICAL}/>
+                </BarChart>
             </View>
         )
     }

diff --git a/storybook/stories/bar-chart/horizontal-with-labels.js b/storybook/stories/bar-chart/horizontal-with-labels.js
@@ -10,18 +10,19 @@ class BarChartHorizontalWithLabels extends React.PureComponent {
         const data = [ 50, 10, 40, 95, 85 ]
 
         const CUT_OFF = 50
-        const Label = ({ item: value, x, y, index, bandwidth }) => (
-            <Text
-                key={index}
-                x={value > CUT_OFF ? x(value) - 10 : x(value) + 10}
-                y={y(index) + (bandwidth / 2)}
-                fontSize={14}
-                fill={value > CUT_OFF ? 'white' : 'black'}
-                alignmentBaseline={'middle'}
-                textAnchor={value > CUT_OFF ? 'end' : 'start'}
-            >
-                {value}
-            </Text>
+        const Labels = ({  x, y, bandwidth, data }) => (
+            data.map((value, index) => (
+                <Text
+                    key={ index }
+                    x={ value > CUT_OFF ? x(0) + 10 : x(value) + 10 }
+                    y={ y(index) + (bandwidth / 2) }
+                    fontSize={ 14 }
+                    fill={ value > CUT_OFF ? 'white' : 'black' }
+                    alignmentBaseline={ 'middle' }
+                >
+                    {value}
+                </Text>
+            ))
         )
 
         return (
@@ -34,9 +35,10 @@ class BarChartHorizontalWithLabels extends React.PureComponent {
                     contentInset={{ top: 10, bottom: 10 }}
                     spacing={0.2}
                     gridMin={0}
-                    renderDecorator={Label}
-                    renderGrid={Grid.Vertical}
-                />
+                >
+                    <Grid direction={Grid.Direction.VERTICAL}/>
+                    <Labels/>
+                </BarChart>
             </View>
         )
     }

diff --git a/storybook/stories/bar-chart/horizontal.js b/storybook/stories/bar-chart/horizontal.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { View } from 'react-native'
-import { BarChart } from 'react-native-svg-charts'
+import { BarChart, Grid } from 'react-native-svg-charts'
 
 class BarChartExample extends React.PureComponent {
 
@@ -18,8 +18,9 @@ class BarChartExample extends React.PureComponent {
                     contentInset={{ top: 10, bottom: 10 }}
                     spacing={0.2}
                     gridMin={0}
-                    showGrid={false}
-                />
+                >
+                    <Grid direction={Grid.Direction.VERTICAL}/>
+                </BarChart>
             </View>
         )
     }

diff --git a/storybook/stories/bar-chart/with-different-bars.js b/storybook/stories/bar-chart/with-different-bars.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { BarChart } from 'react-native-svg-charts'
+import { BarChart, Grid } from 'react-native-svg-charts'
 import { Defs, LinearGradient, Stop } from "react-native-svg";
 
 class ColorBarExample extends React.PureComponent {
@@ -55,9 +55,11 @@ class ColorBarExample extends React.PureComponent {
                 gridMin={0}
                 svg={{ fill: 'rgba(134, 65, 244, 0.8)' }}
                 yAccessor={({ item }) => item.value}
-                extras={[ Gradient ]}
                 contentInset={{ top: 20, bottom: 20 }}
-            />
+            >
+                <Grid/>
+                <Gradient/>
+            </BarChart>
         )
     }
 

diff --git a/storybook/stories/bar-chart/with-gradient.js b/storybook/stories/bar-chart/with-gradient.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { LinearGradient, Stop, Defs } from 'react-native-svg'
-import { BarChart } from 'react-native-svg-charts'
+import { BarChart, Grid } from 'react-native-svg-charts'
 
 class GradientBarExample extends React.PureComponent {
 
@@ -22,12 +22,14 @@ class GradientBarExample extends React.PureComponent {
                 style={ { height: 200 } }
                 data={ data }
                 contentInset={ { top: 20, bottom: 20 } }
-                extras={[ Gradient ]}
                 svg={ {
                     strokeWidth: 2,
                     fill: 'url(#gradient)',
                 } }
-            />
+            >
+                <Grid/>
+                <Gradient/>
+            </BarChart>
         )
     }
 

diff --git a/storybook/stories/bar-chart/with-multiple-data-sets.js b/storybook/stories/bar-chart/with-multiple-data-sets.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { BarChart } from 'react-native-svg-charts'
+import { BarChart, Grid } from 'react-native-svg-charts'
 
 class GroupedBarChartExample extends React.PureComponent {
 
@@ -32,7 +32,9 @@ class GroupedBarChartExample extends React.PureComponent {
                 }}
                 contentInset={ { top: 30, bottom: 30 } }
                 { ...this.props }
-            />
+            >
+                <Grid/>
+            </BarChart>
         )
     }
 

diff --git a/storybook/stories/both-axes.js b/storybook/stories/both-axes.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { LineChart, XAxis, YAxis } from 'react-native-svg-charts'
+import { Grid, LineChart, XAxis, YAxis } from 'react-native-svg-charts'
 import { View } from 'react-native'
 
 class AxesExample extends React.PureComponent {
@@ -32,7 +32,9 @@ class AxesExample extends React.PureComponent {
                         data={data}
                         contentInset={verticalContentInset}
                         svg={{ stroke: 'rgb(134, 65, 244)' }}
-                    />
+                    >
+                        <Grid/>
+                    </LineChart>
                     <XAxis
                         style={{ marginHorizontal: -10, height: xAxisHeight }}
                         data={data}

diff --git a/storybook/stories/custom-grid.js b/storybook/stories/custom-grid.js
@@ -48,8 +48,9 @@ class CustomGridExample extends React.PureComponent {
                     svg={ {
                         stroke: 'rgb(134, 65, 244)',
                     } }
-                    renderGrid={ CustomGrid }
-                />
+                >
+                    <CustomGrid belowChart={true}/>
+                </LineChart>
             </View>
         )
     }

diff --git a/storybook/stories/decorator.js b/storybook/stories/decorator.js
@@ -1,30 +1,45 @@
 import React from 'react'
-import { AreaChart } from 'react-native-svg-charts'
-import { Circle } from 'react-native-svg'
+import { AreaChart, Grid } from 'react-native-svg-charts'
+import { Circle, Path } from 'react-native-svg'
 
 class DecoratorExample extends React.PureComponent {
 
     render() {
 
         const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]
 
+        const Decorator = ({ x, y, data }) => {
+            return data.map((value, index) => (
+                <Circle
+                    key={ index }
+                    cx={ x(index) }
+                    cy={ y(value) }
+                    r={ 4 }
+                    stroke={ 'rgb(134, 65, 244)' }
+                    fill={ 'white' }
+                />
+            ))
+        }
+
+        const Line = ({ line }) => (
+            <Path
+                d={ line }
+                stroke={ 'rgba(134, 65, 244)' }
+                fill={ 'none' }
+            />
+        )
+
         return (
             <AreaChart
-                style={ { height: 200 } }
+                style={{ height: 200 }}
                 data={ data }
-                svg={ { fill: 'rgba(134, 65, 244, 0.2)' } }
-                contentInset={ { top: 20, bottom: 30 } }
-                renderDecorator={ ({ x, y, index, value }) => (
-                    <Circle
-                        key={ index }
-                        cx={ x(index) }
-                        cy={ y(value) }
-                        r={ 4 }
-                        stroke={ 'rgb(134, 65, 244)' }
-                        fill={ 'white' }
-                    />
-                ) }
-            />
+                svg={{ fill: 'rgba(134, 65, 244, 0.2)' }}
+                contentInset={{ top: 20, bottom: 30 }}
+            >
+                <Grid/>
+                <Line/>
+                <Decorator/>
+            </AreaChart>
         )
     }
 

diff --git a/storybook/stories/extras.js b/storybook/stories/extras.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { LineChart } from 'react-native-svg-charts'
+import { LineChart, Grid } from 'react-native-svg-charts'
 import * as shape from 'd3-shape'
 import { Circle, G, Line, Rect, Text } from 'react-native-svg'
 
@@ -43,8 +43,8 @@ class ExtrasExample extends React.PureComponent {
                     />
                     <Text
                         x={ 75 / 2 }
-                        dy={20}
-                        alignmentBaseline={'middle'}
+                        dy={ 20 }
+                        alignmentBaseline={ 'middle' }
                         textAnchor={ 'middle' }
                         stroke={ 'rgb(134, 65, 244)' }
                     >
@@ -62,7 +62,7 @@ class ExtrasExample extends React.PureComponent {
                         cy={ y(data[ 5 ]) }
                         r={ 6 }
                         stroke={ 'rgb(134, 65, 244)' }
-                        strokeWidth={2}
+                        strokeWidth={ 2 }
                         fill={ 'white' }
                     />
                 </G>
@@ -71,16 +71,19 @@ class ExtrasExample extends React.PureComponent {
 
         return (
             <LineChart
-                style={ { height: 200 } }
+                style={{ height: 200 }}
                 data={ data }
                 svg={{
                     stroke: 'rgb(134, 65, 244)',
                     strokeWidth: 2,
                 }}
-                contentInset={ { top: 20, bottom: 20 } }
+                contentInset={{ top: 20, bottom: 20 }}
                 curve={ shape.curveLinear }
-                extras={ [ HorizontalLine, Tooltip ] }
-            />
+            >
+                <Grid/>
+                <HorizontalLine/>
+                <Tooltip/>
+            </LineChart>
         )
     }